/* ============================================================
   Foundry Revenue Partners — Products & Services page
   Only what this page adds lives here; everything else comes
   from tokens.css and site.css. Every class is prefixed svc-
   so nothing here can collide with a name site.css already
   uses (see Rule 32: .msg was already the status banner).
   ============================================================ */

/* ---------- intro ---------- */
.svc-intro { padding-block: var(--spacing-40) var(--spacing-60); }
.svc-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  /* About 25% under --text-heading-lg, with looser tracking: the serif has
     one weight, so size and spacing are what make it read lighter. */
  font-size: clamp(2.25rem, 7.6vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-mid);
  width: auto; max-width: none; margin: 0 0 var(--spacing-50);
  text-wrap: balance;   /* no one-word last line */
}
/* The second line is the homepage's pairing: Outfit bold under the serif,
   the same treatment as "This is what the research shows." */
/* A class, not `.svc-title span`: the typewriter wraps every letter in a
   span, and a bare element selector turned each one into its own block. */
.svc-title-q {
  display: block; margin-top: var(--spacing-15);
  font-family: var(--font-ui); font-weight: var(--font-weight-w550);
  /* Always about three-quarters of the serif line above (em is the h1's size):
     ~80px against 109px on a wide screen, ~27px against 36px on a phone. A
     fixed clamp let both lines hit the same 36px floor on a phone, and the
     bold line then read larger than the one it answers. */
  font-size: 0.74em; letter-spacing: var(--tracking-display);
  line-height: 1;
}
.svc-lede {
  /* Outfit light rather than the serif: Instrument Serif is a condensed face,
     and at paragraph length with tight tracking it read cramped. Open leading,
     no negative tracking. Width is set by script to match the title's first
     line; 44ch is the fallback. */
  font-family: var(--font-ui); font-weight: var(--font-weight-light);
  font-size: clamp(1.125rem, 1.7vw, 1.4rem);
  line-height: 1.65; letter-spacing: 0;
  max-width: 44ch; margin: 0;
}

/* ---------- the phase index ----------
   Four cards that jump to their phase. Resting: type on the canvas under a
   hairline rule. On hover or focus the phase's photograph rises through a
   dark wash, the type reverses out, and the arrow drops. On arrival each
   rule draws left to right, its dot lands, then the card rises, in phase
   order, so the row reads as a sequence rather than four boxes. */
.svc-index {
  list-style: none; margin: var(--spacing-60) 0 0; padding: 0;
  display: grid; gap: var(--spacing-15); grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: none;
}
.svc-index a {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(170px, 17vw, 230px);
  padding: var(--spacing-25) var(--spacing-20) var(--spacing-20);
  border-radius: 0 0 var(--radius-images) var(--radius-images);
  color: var(--color-typesetter-ink);
  transition: color 0.45s ease, border-radius 0.45s ease;
}
.svc-index a:hover,
.svc-index a:focus-visible { color: var(--color-bone-white); border-radius: var(--radius-images); }
.svc-index a:focus-visible { outline-offset: 3px; }

.svc-index-bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--color-press-black);
  background-size: cover; background-position: center;
  filter: grayscale(0.9) contrast(1.05) brightness(0.5);
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-index a:hover .svc-index-bg,
.svc-index a:focus-visible .svc-index-bg { opacity: 1; transform: scale(1); }

.svc-index-rule {
  /* Inset from the card's top edge so the dot is never clipped by the
     card's overflow:hidden, which the hover photograph needs. */
  position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: var(--color-typesetter-ink); transform-origin: left center;
}
.svc-index-dot {
  position: absolute; left: 0; top: -4px; width: 9px; height: 9px;
  border-radius: var(--radius-round); background: var(--color-highlighter-green);
  box-shadow: var(--shadow-lg-2);
}
.svc-index a:hover .svc-index-rule,
.svc-index a:focus-visible .svc-index-rule { background: var(--color-highlighter-green); }

.svc-index-num {
  font-family: var(--font-display); font-size: var(--text-heading-sm);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  color: var(--color-newsprint-gray);
  transition: color 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-index a:hover .svc-index-num,
.svc-index a:focus-visible .svc-index-num { color: var(--color-highlighter-green); transform: translateY(-4px); }

.svc-index-name {
  display: block; padding-right: var(--spacing-30);
  font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-mid); line-height: 1.2;
}
.svc-index-name .micro {
  display: block; margin-bottom: var(--spacing-8);
  color: var(--color-newsprint-gray); transition: color 0.45s ease;
}
.svc-index a:hover .svc-index-name .micro,
.svc-index a:focus-visible .svc-index-name .micro { color: var(--color-muted-sage); }

.svc-index-go {
  position: absolute; right: var(--spacing-20); bottom: var(--spacing-20);
  line-height: 0; opacity: 0.45;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-index a:hover .svc-index-go,
.svc-index a:focus-visible .svc-index-go { opacity: 1; transform: translateY(5px); color: var(--color-highlighter-green); }

/* Arrival sequence — only once the script has set .svc-motion. */
.svc-motion .svc-index .svc-index-rule { transform: scaleX(0); }
.svc-motion .svc-index .svc-index-dot { transform: scale(0); }
.svc-motion .svc-index .svc-index-num,
.svc-motion .svc-index .svc-index-name,
.svc-motion .svc-index .svc-index-go { opacity: 0; transform: translateY(16px); }

.svc-motion .svc-index.is-shown .svc-index-rule {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 0.16s),
              background-color 0.45s ease;
}
.svc-motion .svc-index.is-shown .svc-index-dot {
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.16s + 0.1s);
}
.svc-motion .svc-index.is-shown .svc-index-num,
.svc-motion .svc-index.is-shown .svc-index-name {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease calc(var(--i) * 0.16s + 0.35s),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.16s + 0.35s),
              color 0.45s ease;
}
.svc-motion .svc-index.is-shown .svc-index-go {
  opacity: 0.45; transform: none;
  transition: opacity 0.8s ease calc(var(--i) * 0.16s + 0.5s),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.16s + 0.5s);
}
/* Once arrived, hover must answer immediately, not after the entrance delay. */
.svc-motion .svc-index.is-shown a:hover .svc-index-num,
.svc-motion .svc-index.is-shown a:focus-visible .svc-index-num { transform: translateY(-4px); transition-delay: 0s; }
.svc-motion .svc-index.is-shown a:hover .svc-index-go,
.svc-motion .svc-index.is-shown a:focus-visible .svc-index-go { opacity: 1; transform: translateY(5px); transition-delay: 0s; }
.svc-motion .svc-index.is-shown a:hover .svc-index-name,
.svc-motion .svc-index.is-shown a:hover .svc-index-name .micro { transition-delay: 0s; }

html { scroll-behavior: smooth; }

/* ---------- the phases ---------- */
.svc-phases { padding-block: var(--spacing-20) var(--section-gap); }
.svc-phase {
  display: grid; column-gap: clamp(30px, 5vw, 80px); row-gap: var(--spacing-35);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  padding-block: var(--spacing-60);
  scroll-margin-top: var(--spacing-40);
}
.svc-phase + .svc-phase { margin-top: var(--spacing-40); }

/* ---------- the break between phases ----------
   With Phase 03 off its box, a hairline no longer told a reader they had
   moved on (TeeJay). Each phase now opens on the same device as the phase
   cards at the top: a dark full-width rule with a green dot at its start,
   then the phase's name and where it sits in the four. The rule draws in
   and the dot lands as the phase arrives. */
.svc-divider {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr auto; row-gap: var(--spacing-15);
}
.svc-divider-rule {
  grid-column: 1 / -1; position: relative; display: block;
  height: 2px; background: var(--color-typesetter-ink); transform-origin: left center;
}
.svc-divider-dot {
  position: absolute; left: 0; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; border-radius: var(--radius-round);
  background: var(--color-highlighter-green); box-shadow: var(--shadow-lg-2);
}
.svc-divider-label,
.svc-divider-count {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-w550);
}
.svc-divider-label { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-15); color: var(--color-accent-edge); }
.svc-divider-name { color: var(--color-typesetter-ink); }
.svc-divider-count { color: var(--color-newsprint-gray); font-variant-numeric: tabular-nums; }

.svc-motion .svc-phase .svc-divider-rule { transform: scaleX(0); }
.svc-motion .svc-phase .svc-divider-dot { transform: scale(0); }
.svc-motion .svc-phase.is-shown .svc-divider-rule { transform: scaleX(1); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.svc-motion .svc-phase.is-shown .svc-divider-dot { transform: scale(1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; }
.svc-phase-side { position: relative; }
.svc-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-newsprint-gray);
  margin-bottom: var(--spacing-25);
}
/* Same treatment as the homepage rail: greyscale, a trace of green. */
.svc-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-images);
  background-color: var(--color-slate-verdant);
  background-size: cover; background-position: center;
  filter: grayscale(0.85) contrast(1.04) brightness(0.92);
  position: sticky; top: var(--spacing-30);
}
.svc-kicker { display: block; color: var(--color-accent-edge); letter-spacing: 0.16em; margin-bottom: var(--spacing-15); }
.svc-phase-body h2 {
  font-size: var(--text-heading-sm); max-width: 16ch; margin-bottom: var(--spacing-25);
}
.svc-summary {
  /* Same treatment as the intro paragraph, on TeeJay's direction: the
     condensed serif read cramped at three sentences in a narrow column. */
  font-family: var(--font-ui); font-size: clamp(1.125rem, 1.7vw, 1.4rem);
  line-height: 1.65; letter-spacing: 0;
  max-width: 60ch;   /* 44ch, widened twice on TeeJay's direction */
}
.svc-phase-body p { font-weight: var(--font-weight-light); }
.svc-phase-body p.svc-summary { font-weight: var(--font-weight-light); }

.svc-listhead { color: var(--color-newsprint-gray); margin: var(--spacing-35) 0 var(--spacing-15); }
.svc-list { list-style: none; margin: 0 0 var(--spacing-30); padding: 0; max-width: 52ch; }
.svc-list li {
  position: relative; padding: var(--spacing-10) 0 var(--spacing-10) var(--spacing-30);
  border-top: 1px solid var(--color-muted-sage);
  font-size: var(--text-body); line-height: 1.4; font-weight: var(--font-weight-light);
}
.svc-list li:last-child { border-bottom: 1px solid var(--color-muted-sage); }
.svc-list li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: var(--spacing-15); height: 2px; background: var(--color-highlighter-green);
}

/* ---------- Phase 01 deliverables: the second sheet ----------
   Laid out as a drawing sheet to pair with the blueprint above it: the same
   dark grid, a header strip, four cells with a green drawing reference and
   corner crop marks, and a title-block strip underneath. */
.svc-spec {
  /* On the page canvas, not a dark sheet: the blueprint drawing directly
     above already carries the dark grid, and two of them stacked was too
     much (TeeJay). The strips, cells and crop marks stay. */
  margin-top: var(--spacing-35);
  color: var(--color-typesetter-ink);
}
.svc-spec-head,
.svc-spec-foot {
  display: flex; justify-content: space-between; gap: var(--spacing-20);
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--color-newsprint-gray);
  padding: var(--spacing-10) var(--spacing-15);
  border: 1px solid var(--color-muted-sage);
}
.svc-spec-head { border-bottom: 0; }
.svc-spec-foot { border-top: 0; }
.svc-spec-foot span:first-child { color: var(--color-typesetter-ink); }

.svc-spec-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-muted-sage);
}
.svc-spec-grid li {
  position: relative;
  padding: var(--spacing-25) var(--spacing-25) var(--spacing-30);
  border-right: 1px solid var(--color-muted-sage);
  border-bottom: 1px solid var(--color-muted-sage);
}
.svc-spec-grid li:nth-child(2n) { border-right: 0; }
.svc-spec-grid li:nth-last-child(-n+2) { border-bottom: 0; }
/* Crop marks, top-left and bottom-right of each cell. */
.svc-spec-grid li::before,
.svc-spec-grid li::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 0 solid var(--color-highlighter-green);
}
.svc-spec-grid li::before { top: 8px; left: 8px; border-top-width: 1.5px; border-left-width: 1.5px; }
.svc-spec-grid li::after { bottom: 8px; right: 8px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.svc-spec-ref {
  display: block; margin-bottom: var(--spacing-10);
  font-size: var(--text-caption); letter-spacing: 0.14em; font-weight: var(--font-weight-medium);
  color: var(--color-accent-edge);   /* the bright green is unreadable as text on the light canvas */
}
.svc-spec-name {
  margin: 0 0 var(--spacing-10);
  font-family: var(--font-ui); font-size: var(--text-body);
  font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-mid);
  line-height: 1.25; color: var(--color-typesetter-ink);
}
.svc-phase-body .svc-spec-grid p {
  margin: 0; max-width: none;
  font-size: var(--text-body-sm); line-height: 1.6;
  font-weight: var(--font-weight-light); color: var(--color-slate-verdant);
}

/* Cells arrive one after another once the sheet is on screen. */
.svc-motion .svc-spec-grid li { opacity: 0; transform: translateY(10px); }
.svc-motion .svc-spec.is-shown .svc-spec-grid li {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(var(--i) * 0.15s + 0.1s),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.15s + 0.1s);
}

@media (max-width: 640px) {
  .svc-spec-grid { grid-template-columns: 1fr; }
  .svc-spec-grid li { border-right: 0; border-bottom: 1px solid var(--color-muted-sage); }
  .svc-spec-grid li:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-muted-sage); }
  .svc-spec-grid li:last-child { border-bottom: 0; }
  .svc-spec-head span:last-child { display: none; }
}

/* ---------- Phase 02: the three waves ----------
   A wave line with three crests, each taller than the last, so the Build
   reads as momentum gathering. Each crest carries its number; the matching
   wave sits under it in three columns (stacked under the chart on a phone,
   matched by number). On arrival the line draws left to right, each crest
   pops as the line reaches it, and that wave's text rises in with it. */
.svc-wave { margin: var(--spacing-35) 0 var(--spacing-10); }
.svc-wave-chart { position: relative; height: clamp(110px, 12vw, 150px); }
.svc-wave-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.svc-wave-fill-top { stop-color: var(--color-echo-green); stop-opacity: 0.9; }
.svc-wave-fill-bottom { stop-color: var(--color-echo-green); stop-opacity: 0; }
.svc-wave-area { fill: url(#svc-wave-fill); }
.svc-wave-base { stroke: var(--color-muted-sage); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svc-wave-line {
  fill: none; stroke: var(--color-highlighter-green); stroke-width: 3;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.svc-wave-crest {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-round);
  background: var(--color-press-black); color: var(--color-highlighter-green);
  font-size: var(--text-caption); font-weight: var(--font-weight-w550); letter-spacing: 0.06em;
  box-shadow: 0 0 0 4px var(--color-bone-white), var(--shadow-lg-2);
}

.svc-wave-list {
  list-style: none; margin: var(--spacing-20) 0 0; padding: 0;
  display: grid; gap: var(--spacing-20); grid-template-columns: repeat(3, minmax(0, 1fr));
}
.svc-wave-list li {
  text-align: center; padding: 0 var(--spacing-10);
  font-size: var(--text-body-sm); line-height: 1.5; font-weight: var(--font-weight-light);
}
.svc-wave-list .micro { display: block; color: var(--color-newsprint-gray); margin-bottom: var(--spacing-8); }
.svc-wave-list .micro b { display: none; color: var(--color-accent-edge); font-weight: inherit; margin-right: var(--spacing-8); }
.svc-wave-list strong {
  display: block; font-weight: var(--font-weight-w550); font-size: var(--text-body);
  letter-spacing: var(--tracking-mid); margin-bottom: var(--spacing-8);
}

/* Arrival. Each crest is reached at about the same fraction of the draw. */
.svc-motion .svc-wave .svc-wave-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc-motion .svc-wave .svc-wave-area { opacity: 0; }
.svc-motion .svc-wave .svc-wave-crest { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.svc-motion .svc-wave .svc-wave-list li { opacity: 0; transform: translateY(12px); }
.svc-motion .svc-wave.is-shown .svc-wave-line {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.35, 1) 0.1s;
}
.svc-motion .svc-wave.is-shown .svc-wave-area { opacity: 1; transition: opacity 1.2s ease 0.5s; }
.svc-motion .svc-wave.is-shown .svc-wave-crest {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.3s ease calc(0.35s + var(--i) * 0.58s),
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.35s + var(--i) * 0.58s);
}
.svc-motion .svc-wave.is-shown .svc-wave-list li {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(0.45s + var(--i) * 0.58s),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.45s + var(--i) * 0.58s);
}


/* ---------- the seven areas ---------- */

/* ---------- are you ready? a self-check ----------
   Five signs as cards a visitor can tap. Beneath them an F1-style rev gauge:
   five segments over a 240-degree arc and a needle that climbs one segment
   per sign marked, with a message that changes with the count. Without
   script the cards are a plain list and the gauge reads zero. */
.svc-ready { padding-block: var(--spacing-120); margin-top: var(--section-gap); }
/* One column at every width: the signs first, the dial beneath them. */
.svc-ready-grid { display: grid; gap: var(--spacing-40); grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.svc-ready-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem); max-width: 16ch; margin: 0 0 var(--spacing-25);
  color: var(--color-bone-white); text-wrap: balance;
}
.dark .svc-ready-intro { color: var(--color-muted-sage); max-width: 46ch; margin-bottom: var(--spacing-35); }
.svc-ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-10); }
.svc-ready-card {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--spacing-15); row-gap: var(--spacing-4);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--spacing-20) var(--spacing-20) var(--spacing-20) var(--spacing-15);
  background: color-mix(in srgb, var(--color-slate-verdant) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-shadow-moss) 35%, transparent);
  border-radius: var(--radius-pills);
  font-family: var(--font-ui); color: var(--color-bone-white);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.25s ease;
}
.svc-ready-card:hover { border-color: var(--color-shadow-moss); transform: translateX(4px); }
.svc-ready-card:focus-visible { outline: 2px solid var(--color-highlighter-green); outline-offset: 3px; }
.svc-ready-check {
  grid-row: 1 / span 3; align-self: start; margin-top: 2px;
  width: 26px; height: 26px; border-radius: var(--radius-round);
  border: 1.5px solid var(--color-shadow-moss); position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.svc-ready-check::after {
  content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px;
  border: solid var(--color-press-black); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-ready-code { font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-shadow-moss); }
.svc-ready-text { font-size: var(--text-body); line-height: 1.45; font-weight: var(--font-weight-light); }
.svc-ready-yes {
  justify-self: start; margin-top: var(--spacing-4);
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-w550);
  color: var(--color-highlighter-green); opacity: 0; transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.svc-ready-card[aria-pressed="true"] { border-color: var(--color-highlighter-green); background: var(--color-slate-verdant); }
.svc-ready-card[aria-pressed="true"] .svc-ready-check { background: var(--color-highlighter-green); border-color: var(--color-highlighter-green); }
.svc-ready-card[aria-pressed="true"] .svc-ready-check::after { transform: rotate(45deg) scale(1); }
.svc-ready-card[aria-pressed="true"] .svc-ready-code { color: var(--color-highlighter-green); }
.svc-ready-card[aria-pressed="true"] .svc-ready-yes { opacity: 1; transform: none; }
.svc-ready:not(.is-live) .svc-ready-check,
.svc-ready:not(.is-live) .svc-ready-yes { display: none; }
.svc-ready:not(.is-live) .svc-ready-card { cursor: default; grid-template-columns: 1fr; }

/* The way on from the self-check: the site's outlined button for dark
   sections, so it stays distinct from the green scoping-call button that
   follows. The arrow slides on hover to say "this goes somewhere". */
.svc-ready-cta { margin: 0; max-width: none; }
.svc-ready-pricing {
  display: inline-flex; align-items: center; gap: var(--spacing-10);
  padding: var(--spacing-15) var(--spacing-25);   /* a tad smaller (TeeJay); still over 44px tall */
  font-family: var(--font-ui); font-size: 1rem; font-weight: var(--font-weight-w550);
  letter-spacing: var(--tracking-mid);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.svc-ready-pricing span { color: var(--color-highlighter-green); transition: transform 0.3s ease, color 0.3s ease; }
.svc-ready-pricing:hover span { transform: translateX(5px); color: var(--color-press-black); }
.svc-ready-pricing:focus-visible { outline: 2px solid var(--color-highlighter-green); outline-offset: 3px; }

/* The gauge. */
.svc-ready-gauge {
  width: 100%; max-width: 34rem;
  padding: var(--spacing-30) var(--spacing-30) var(--spacing-25);
  border: 1px solid color-mix(in srgb, var(--color-shadow-moss) 35%, transparent);
  border-radius: var(--radius-images);
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--color-slate-verdant) 90%, transparent), transparent 75%);
}
.svc-ready-gauge svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; overflow: visible; }
.svc-gauge-track { fill: none; stroke: color-mix(in srgb, var(--color-shadow-moss) 22%, transparent); stroke-width: 14; stroke-linecap: round; }
.svc-gauge-seg { fill: none; stroke: color-mix(in srgb, var(--color-shadow-moss) 30%, transparent); stroke-width: 14; transition: stroke 0.35s ease, filter 0.35s ease; }
.svc-gauge-seg.is-on { stroke: var(--color-highlighter-green); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-highlighter-green) 60%, transparent)); }
.svc-gauge-tick { stroke: var(--color-shadow-moss); stroke-width: 1.5; }
.svc-gauge-needle { transform-box: view-box; transform-origin: 120px 120px; transform: rotate(-120deg); transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1); }
.svc-gauge-needle path { stroke: var(--color-bone-white); stroke-width: 3; stroke-linecap: round; }
.svc-gauge-needle circle { fill: var(--color-press-black); stroke: var(--color-highlighter-green); stroke-width: 2.5; }
.svc-gauge-read { display: flex; align-items: baseline; justify-content: center; gap: var(--spacing-8); margin-top: calc(-1 * var(--spacing-20)); }
.svc-gauge-n { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.25rem); line-height: 1; color: var(--color-bone-white); font-variant-numeric: tabular-nums; }
.svc-gauge-of { font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-shadow-moss); }
.dark .svc-gauge-msg {
  text-align: center; margin: var(--spacing-15) auto var(--spacing-25); max-width: 32ch; min-height: 3.1em;
  font-size: var(--text-body); line-height: 1.45; font-weight: var(--font-weight-medium); color: var(--color-bone-white);
}
.svc-ready.has-picks .svc-gauge-msg { color: var(--color-highlighter-green); }
.dark .svc-ready-note {
  margin: 0; padding-top: var(--spacing-20);
  border-top: 1px solid color-mix(in srgb, var(--color-shadow-moss) 35%, transparent);
  font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-muted-sage); max-width: none;
}
.svc-motion .svc-ready .svc-fade { transition-delay: calc(var(--i) * 0.08s); }

@media (max-width: 860px) {
  .svc-ready { padding-block: var(--spacing-60); }
}

/* ---------- next step ---------- */
.svc-next { padding-bottom: var(--spacing-120); }
.svc-next p { font-weight: var(--font-weight-light); }
.svc-next .actions { margin-top: var(--spacing-30); }

/* A real subheading inside a phase, not a caption: bigger, ink, with the
   dividers' green accent in front, and room before what it introduces. */
.svc-subhead {
  display: flex; align-items: center; gap: var(--spacing-10);
  margin: var(--spacing-45) 0 var(--spacing-35);
  font-family: var(--font-ui); font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  font-weight: var(--font-weight-w550); letter-spacing: var(--tracking-mid);
  line-height: 1.2; color: var(--color-typesetter-ink);
}
.svc-subhead::before {
  content: ''; flex: 0 0 auto; width: 22px; height: 3px;
  border-radius: var(--radius-round); background: var(--color-highlighter-green);
}

/* ---------- Phase 03: what gets automated, as a carousel ----------
   Without .is-live (no script, or reduced motion) this is a plain numbered
   list. Live, the items stack in one stage: the active one front and centre
   in a bracketed card, its neighbours smaller and faded either side,
   positioned by --o (offset, -2..2) and --a (its absolute value), which the
   page script sets. The active dot fills over one step, like a timer. */
.svc-auto { margin: 0 0 var(--spacing-30); max-width: 60ch; }
.svc-auto-track { list-style: none; margin: 0; padding: 0; }
.svc-auto-item {
  display: flex; gap: var(--spacing-15); align-items: baseline;
  padding: var(--spacing-10) 0; border-top: 1px solid var(--color-muted-sage);
  font-weight: var(--font-weight-light);
}
.svc-auto-item:last-child { border-bottom: 1px solid var(--color-muted-sage); }
.svc-auto-ref,
.svc-auto-strip { display: none; }
.svc-auto-head { flex: 0 0 auto; }
.svc-auto-n {
  flex: 0 0 auto; font-size: var(--text-caption); letter-spacing: 0.12em;
  font-weight: var(--font-weight-w550); color: var(--color-accent-edge);
}

.svc-auto.is-live .svc-auto-stage {
  position: relative; height: clamp(150px, 16vw, 180px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
}
.svc-auto.is-live .svc-auto-track { position: absolute; inset: 0; }
.svc-auto.is-live .svc-auto-item {
  position: absolute; top: 50%; left: 50%;
  width: min(74%, 440px); min-height: 150px;
  flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--spacing-15);
  padding: var(--spacing-20) var(--spacing-25) var(--spacing-15);
  border: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); border-radius: 0;
  /* The Phase 01 sheet: dark ground, fine 10px grid under a 50px major grid. */
  background-color: var(--color-press-black);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  color: var(--color-bone-white);
  transform: translate(calc(-50% + var(--o) * 68%), -50%) scale(calc(1 - var(--a) * 0.2));
  opacity: calc(1 - var(--a) * 0.6);
  z-index: calc(10 - var(--a));
  /* 0.5s slide inside a 2s step, so each card rests about 1.5 seconds. */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, border-color 0.4s ease;
}
.svc-auto.is-live .svc-auto-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); }
.svc-auto.is-live .svc-auto-item.is-active { border-color: var(--color-shadow-moss); box-shadow: var(--shadow-lg); }
.svc-auto.is-live .svc-auto-item::before,
.svc-auto.is-live .svc-auto-item::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 0 solid var(--color-highlighter-green); opacity: 0; transition: opacity 0.4s ease;
}
.svc-auto.is-live .svc-auto-item::before { top: 7px; left: 7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.svc-auto.is-live .svc-auto-item::after { bottom: 7px; right: 7px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.svc-auto.is-live .svc-auto-item.is-active::before,
.svc-auto.is-live .svc-auto-item.is-active::after { opacity: 1; }
.svc-auto.is-live .svc-auto-head { display: flex; justify-content: space-between; gap: var(--spacing-15); }
.svc-auto.is-live .svc-auto-ref {
  display: block; font-size: var(--text-caption); letter-spacing: 0.14em;
  font-weight: var(--font-weight-medium); color: var(--color-highlighter-green);
}
.svc-auto.is-live .svc-auto-n { color: var(--color-shadow-moss); font-weight: var(--font-weight-medium); }
.svc-auto.is-live .svc-auto-text {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.3;
  font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-mid);
  color: var(--color-bone-white);
}
/* The title-block strip, as on the car drawing. */
.svc-auto.is-live .svc-auto-strip {
  display: flex; justify-content: space-between; gap: var(--spacing-15);
  padding-top: var(--spacing-8);
  border-top: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: var(--color-shadow-moss);
}

/* The controls are sized for a thumb, not a cursor: each dot and the pause
   button is a 44px target (the minimum comfortable tap size), and the dots
   themselves are large enough to read as buttons at a glance. */
.svc-auto-controls { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-20); }
.svc-auto-dot {
  min-width: 44px; height: 44px; padding: 0 var(--spacing-4); border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.svc-auto-dot span {
  position: relative; display: block; width: 14px; height: 14px; border-radius: var(--radius-round);
  background: var(--color-muted-sage); overflow: hidden;
  transition: width 0.4s ease, background-color 0.25s ease, transform 0.25s ease;
}
.svc-auto-dot:hover span { background: var(--color-newsprint-gray); transform: scale(1.15); }
.svc-auto-dot.is-active span { width: 48px; transform: none; background: color-mix(in srgb, var(--color-newsprint-gray) 30%, transparent); }
.svc-auto-dot.is-active span::after {
  content: ''; position: absolute; inset: 0; background: var(--color-highlighter-green);
  transform-origin: left center; transform: scaleX(1);
}
.svc-auto-dot.is-active.is-filling span::after { animation: svc-auto-fill var(--step, 2000ms) linear both; }
@keyframes svc-auto-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.svc-auto-dot:focus-visible { outline: 2px solid var(--color-accent-edge); outline-offset: 2px; border-radius: var(--radius-pills); }

.svc-auto-pause {
  width: 48px; height: 48px; margin-left: var(--spacing-10); padding: 0; cursor: pointer;
  border: 1.5px solid var(--color-newsprint-gray); border-radius: var(--radius-round); background: none;
  display: grid; place-items: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.svc-auto-pause:hover { background: var(--color-press-black); border-color: var(--color-press-black); }
.svc-auto-pause-icon { display: block; width: 12px; height: 16px; border-left: 4px solid var(--color-typesetter-ink); border-right: 4px solid var(--color-typesetter-ink); }
.svc-auto-pause:hover .svc-auto-pause-icon { border-left-color: var(--color-highlighter-green); border-right-color: var(--color-highlighter-green); }
.svc-auto-pause[aria-pressed="true"] .svc-auto-pause-icon {
  width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--color-typesetter-ink); margin-left: 4px;
}
.svc-auto-pause[aria-pressed="true"]:hover .svc-auto-pause-icon { border-color: transparent transparent transparent var(--color-highlighter-green); }
.svc-auto-pause:focus-visible { outline: 2px solid var(--color-accent-edge); outline-offset: 2px; }

@media (max-width: 560px) {
  .svc-auto.is-live .svc-auto-item { width: 78%; transform: translate(calc(-50% + var(--o) * 70%), -50%) scale(calc(1 - var(--a) * 0.18)); }
}

/* ---------- Phase 04: what it includes, as a pit-wall telemetry board ----------
   Engine Growth is keeping a built engine healthy, so the list reads like the
   screens a race team watches: each row has its cadence, the item, and a
   small live trace that fits it (a heartbeat for continuous updates, a
   two-step rise for the H1/H2 reviews, your line against a dashed market
   line for the benchmark). Rows arrive in order and their traces draw;
   then a dot runs each trace and a green scan line sweeps the board, lighting
   each row as it passes. Reduced motion or no script: all of it, still. */
.svc-tele { position: relative; max-width: 64ch; margin: 0 0 var(--spacing-30); }
.svc-tele-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-typesetter-ink); }
.svc-tele-list li {
  position: relative; isolation: isolate;   /* the scan's highlight sits behind the text */
  display: grid; grid-template-columns: 2rem 7.5rem minmax(0, 1fr) 84px;
  align-items: center; gap: var(--spacing-15);
  padding: var(--spacing-15) var(--spacing-10);
  border-bottom: 1px solid var(--color-muted-sage);
}
.svc-tele-n { font-size: var(--text-caption); letter-spacing: 0.12em; font-weight: var(--font-weight-w550); color: var(--color-newsprint-gray); }
.svc-tele-cad {
  justify-self: start;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-w550);
  color: var(--color-accent-edge);
  padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--color-accent-edge) 40%, transparent);
  border-radius: var(--radius-round); white-space: nowrap;
}
.svc-tele-text { font-size: var(--text-body-sm); line-height: 1.5; font-weight: var(--font-weight-light); }
.svc-tele-spark { width: 84px; height: 26px; overflow: visible; }
.svc-tele-line { fill: none; stroke: var(--color-highlighter-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-tele-base { fill: none; stroke: var(--color-newsprint-gray); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.svc-tele-dot { fill: var(--color-press-black); stroke: var(--color-highlighter-green); stroke-width: 1.2; }

/* The scan: a green line with a soft glow, sweeping the board top to bottom. */
.svc-tele-scan { display: none; }

/* Arrival, then the live loop. */
.svc-motion .svc-tele .svc-tele-list li { opacity: 0; transform: translateX(-14px); }
.svc-motion .svc-tele .svc-tele-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc-motion .svc-tele .svc-tele-dot { opacity: 0; }
.svc-motion .svc-tele.is-shown .svc-tele-list li {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(var(--i) * 0.14s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.14s);
}
.svc-motion .svc-tele.is-shown .svc-tele-line {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(0.45, 0, 0.2, 1) calc(0.3s + var(--i) * 0.14s);
}
.svc-motion .svc-tele.is-shown .svc-tele-dot { opacity: 1; transition: opacity 0.4s ease calc(1.3s + var(--i) * 0.14s); }
.svc-motion .svc-tele.is-shown .svc-tele-scan {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-highlighter-green) 12%, var(--color-highlighter-green) 88%, transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--color-highlighter-green) 45%, transparent);
  animation: svc-tele-scan 5s cubic-bezier(0.45, 0, 0.55, 1) 2s infinite;
  opacity: 0;
}
@keyframes svc-tele-scan {
  0%   { top: 0; opacity: 0; }
  6%   { opacity: 1; }
  60%  { top: 100%; opacity: 1; }
  66%, 100% { top: 100%; opacity: 0; }
}
/* Each row lights as the scan crosses it: the sweep covers the board in the
   first 60% of the cycle, so row i is reached at about (i + 0.5) / 5 of that. */
.svc-motion .svc-tele.is-shown .svc-tele-list li::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: color-mix(in srgb, var(--color-echo-green) 55%, transparent);
  opacity: 0;
  animation: svc-tele-lit 5s linear infinite;
  animation-delay: calc(2s + (var(--i) + 0.5) / 5 * 3s - 0.35s);
}
@keyframes svc-tele-lit {
  0% { opacity: 0; } 5% { opacity: 1; } 18% { opacity: 0; } 100% { opacity: 0; }
}
/* Without motion there is no dot to run. */
html:not(.svc-motion) .svc-tele-dot { display: none; }

@media (max-width: 640px) {
  .svc-tele-list li { grid-template-columns: 2rem 1fr; row-gap: var(--spacing-8); }
  .svc-tele-cad { grid-column: 2; grid-row: 1; }
  .svc-tele-text { grid-column: 1 / -1; }
  .svc-tele-spark { display: none; }
}

/* ---------- Phase 01: "How Your Business Gets Read" ----------
   A button under the deliverables that opens the seven areas as a dark
   blueprint sheet in a modal. Without script the sheet sits in the page. */
.svc-areas { margin-top: var(--spacing-30); max-width: 60ch; }

.svc-areas-open {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-20);
  width: 100%; padding: var(--spacing-20) var(--spacing-25);
  background: none; cursor: pointer; text-align: left;
  border: 1px solid var(--color-typesetter-ink); border-radius: var(--radius-pills);
  font-family: var(--font-ui); color: var(--color-typesetter-ink);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.svc-areas-open:hover { background: color-mix(in srgb, var(--color-echo-green) 45%, transparent); box-shadow: var(--shadow-lg-2); }
.svc-areas-open:focus-visible { outline: 2px solid var(--color-accent-edge); outline-offset: 3px; }
.svc-areas-open-text {
  display: flex; flex-direction: column; gap: var(--spacing-4);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: var(--font-weight-w550); letter-spacing: var(--tracking-mid);
}
.svc-areas-open-tag {
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-w550); color: var(--color-accent-edge);
}
/* A plus that pulses to invite the click, and turns toward an x on hover. */
.svc-areas-open-icon {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-round);
  background: var(--color-press-black); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-areas-open-icon::before,
.svc-areas-open-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--color-highlighter-green); border-radius: var(--radius-round);
}
.svc-areas-open-icon::after { transform: rotate(90deg); }
.svc-areas-open:hover .svc-areas-open-icon { transform: rotate(45deg); }
.svc-motion .svc-areas-open-icon { animation: svc-areas-pulse 2.4s ease-out infinite; }
.svc-areas-open:hover .svc-areas-open-icon { animation: none; }
@keyframes svc-areas-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-highlighter-green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-highlighter-green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-highlighter-green) 0%, transparent); }
}

/* The same sheet, opened from the Maturity Scorecard deliverable. */
.svc-areas-trigger {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  margin-top: var(--spacing-15); padding: 0; cursor: pointer;
  background: none; border: 0;
  font-family: var(--font-ui); font-size: var(--text-caption); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: var(--font-weight-w550); color: var(--color-accent-edge);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.svc-areas-trigger span {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-round);
  background: var(--color-press-black); color: var(--color-highlighter-green); font-size: 0.8rem; line-height: 1;
  transition: transform 0.3s ease;
}
.svc-areas-trigger:hover { color: var(--color-typesetter-ink); }
.svc-areas-trigger:hover span { transform: rotate(90deg); }
.svc-areas-trigger:focus-visible { outline: 2px solid var(--color-accent-edge); outline-offset: 3px; }

/* The sheet: dark ground, the Phase 01 grid, a header strip, crop-marked cells. */
.svc-areas-sheet {
  position: relative;
  background-color: var(--color-press-black);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  color: var(--color-bone-white);
  border-radius: var(--radius-images);
  padding: var(--spacing-25) clamp(20px, 3.5vw, 40px) var(--spacing-30);
}
.svc-areas-head {
  display: flex; justify-content: space-between; gap: var(--spacing-15);
  padding-bottom: var(--spacing-10); margin-bottom: var(--spacing-25);
  border-bottom: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: var(--color-shadow-moss);
}
.svc-areas-title {
  margin: 0 0 var(--spacing-25);
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: var(--tracking-display);
  color: var(--color-bone-white);
}
.svc-areas-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
}
.svc-areas-grid li {
  position: relative;
  padding: var(--spacing-25) var(--spacing-20) var(--spacing-25);
  border-right: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent);
  font-size: var(--text-body-sm); line-height: 1.5; font-weight: var(--font-weight-light);
  color: var(--color-muted-sage);
}
.svc-areas-grid li::before {
  content: ''; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px;
  border-top: 1.5px solid var(--color-highlighter-green); border-left: 1.5px solid var(--color-highlighter-green);
}
.svc-areas-code {
  display: block; margin-bottom: var(--spacing-10);
  font-size: var(--text-caption); letter-spacing: 0.14em; font-weight: var(--font-weight-w550);
  color: var(--color-highlighter-green);
}
.svc-areas-grid strong {
  display: block; margin-bottom: var(--spacing-8);
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: var(--text-note); line-height: 1.1; letter-spacing: var(--tracking-mid);
  color: var(--color-bone-white);
}
.svc-areas-grid .svc-areas-note {
  display: flex; align-items: flex-end;
  font-family: var(--font-display); font-size: var(--text-note); line-height: 1.2; letter-spacing: var(--tracking-mid);
  font-weight: var(--font-weight-regular); color: var(--color-shadow-moss);
}
.svc-areas-grid .svc-areas-note::before { display: none; }
.svc-areas-close {
  position: absolute; top: var(--spacing-15); right: var(--spacing-15);
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-15); cursor: pointer;
  background: var(--color-bone-white); color: var(--color-press-black);
  border: 0; border-radius: var(--radius-round);
  font-family: var(--font-ui); font-size: var(--text-caption); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: var(--font-weight-w550);
}
.svc-areas-close span { font-size: 1rem; line-height: 1; letter-spacing: 0; }
.svc-areas-close:hover { background: var(--color-highlighter-green); }
.svc-areas-close:focus-visible { outline: 2px solid var(--color-highlighter-green); outline-offset: 3px; }
.svc-areas.is-live .svc-areas-head { padding-right: 110px; }

/* The modal. */
.svc-areas-dialog {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 0; background: none; overflow: auto;
}
.svc-areas-dialog .svc-areas-head { padding-right: 110px; }
.svc-areas-dialog::backdrop { background: color-mix(in srgb, var(--color-press-black) 55%, transparent); backdrop-filter: blur(3px); }
.svc-areas-dialog .svc-areas-sheet { opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.svc-areas-dialog.is-open .svc-areas-sheet { opacity: 1; transform: none; }
.svc-areas-dialog .svc-areas-grid li { opacity: 0; transform: translateY(10px); }
.svc-areas-dialog.is-open .svc-areas-grid li {
  opacity: 1; transform: none;
  transition: opacity 0.45s ease calc(0.15s + var(--i) * 0.07s), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i) * 0.07s);
}
html:not(.svc-motion) .svc-areas-dialog .svc-areas-sheet,
html:not(.svc-motion) .svc-areas-dialog .svc-areas-grid li { opacity: 1; transform: none; transition: none; }
.svc-no-scroll { overflow: hidden; }

@media (max-width: 900px) { .svc-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .svc-areas-grid { grid-template-columns: 1fr; }
  .svc-areas-dialog .svc-areas-head span:last-child { display: none; }
}

/* ---------- the Phase 01 blueprint ----------
   An engineering sheet of a Formula 1 car, drawn in about three seconds: grid, body,
   wheels, glass and details, then dimensions, then the title block. Every
   drawn stroke carries pathLength="1", so one dash rule animates them all;
   each element sets its own start (--t) and duration (--d) inline. Without
   .svc-motion (reduced motion, or no script) the sheet is simply complete. */
.svc-bp {
  /* Stretches every start and duration below: the sequence is written for
     about 3.25s, and 1.23 makes it about four seconds end to end. */
  --bp-speed: 1.23;
  aspect-ratio: 2 / 1;   /* a third shorter than the 4:3 photo it replaced */
  border-radius: var(--radius-images);
  background: var(--color-slate-verdant);
  overflow: hidden;
  position: sticky; top: var(--spacing-30);
}
.svc-bp svg { display: block; width: 100%; height: 100%; }
.svc-bp pattern path { stroke: var(--color-shadow-moss); stroke-opacity: 0.16; }
.svc-bp .bp-line,
.svc-bp .bp-fine,
.svc-bp .bp-frame,
.svc-bp .bp-dim,
.svc-bp .bp-center { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.svc-bp .bp-line  { stroke: var(--color-bone-white); stroke-width: 2.2; }
.svc-bp .bp-fine  { stroke: var(--color-muted-sage); stroke-width: 1.2; }
.svc-bp .bp-frame { stroke: var(--color-shadow-moss); stroke-width: 1; }
.svc-bp .bp-dim   { stroke: var(--color-highlighter-green); stroke-width: 1.2; }
.svc-bp .bp-center { stroke: var(--color-shadow-moss); stroke-width: 0.8; stroke-dasharray: 10 4 2 4; }
.svc-bp .bp-arrow { fill: var(--color-highlighter-green); }
.svc-bp text { font-family: var(--font-ui); letter-spacing: 0.08em; }
.svc-bp .bp-label   { fill: var(--color-shadow-moss); font-size: 10px; font-weight: var(--font-weight-medium); }
.svc-bp .bp-dimtext { fill: var(--color-highlighter-green); font-size: 11px; font-weight: var(--font-weight-medium); }
.svc-bp .bp-title   { fill: var(--color-bone-white); font-size: 10px; font-weight: var(--font-weight-w550); }
.svc-bp .bp-small   { font-size: 9px; }

.svc-motion .svc-bp .bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc-motion .svc-bp .bp-grid,
.svc-motion .svc-bp .bp-center,
.svc-motion .svc-bp .bp-arrow,
.svc-motion .svc-bp .bp-text { opacity: 0; }
.svc-motion .svc-bp.is-drawn .bp-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--d, 0.8s) * var(--bp-speed)) cubic-bezier(0.45, 0, 0.2, 1) calc(var(--t, 0s) * var(--bp-speed));
}
.svc-motion .svc-bp.is-drawn .bp-grid,
.svc-motion .svc-bp.is-drawn .bp-center,
.svc-motion .svc-bp.is-drawn .bp-arrow,
.svc-motion .svc-bp.is-drawn .bp-text {
  opacity: 1;
  transition: opacity calc(0.5s * var(--bp-speed)) ease calc(var(--t, 0s) * var(--bp-speed));
}

/* ---------- Phase 02: the car assembles itself, in 3D ----------
   A three.js scene (services-3d.js) on a light studio floor: the car's
   parts fly in from all round, spin home, and lock in with a green glow over
   five seconds, while the line underneath fills and the status turns to
   READY TO RACE. The HUD's resting state is the finished one, so with no
   script the words are right; services-3d.js sets .is-live and drives it.
   If the 3D never starts, .is-fallback shows the phase photograph. */
.svc-bld {
  position: sticky; top: var(--spacing-30);
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-images);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 72%,
      var(--color-bone-white) 0%,
      color-mix(in srgb, var(--color-echo-green) 45%, var(--color-bone-white)) 55%,
      color-mix(in srgb, var(--color-muted-sage) 80%, var(--color-bone-white)) 100%);
}
.bld-stage { position: absolute; inset: 0; }
.bld-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.svc-bld.is-fallback .bld-stage {
  background: url('/img/phase-02-engine-v2.webp') center / cover;
  filter: grayscale(0.85) contrast(1.04) brightness(0.92);
}
#svc-boost.is-fallback .bld-stage { background-image: url('/img/phase-03-automation.webp'); }
#svc-journey.is-fallback .bld-stage { background-image: url('/img/phase-04-growth.webp'); }
/* Phase 04: the Phase 01 sheet, copied in by services-3d.js, laid over the 3D
   stage for act one and faded away as the build begins. */
.svc-journey-sheet { position: absolute; inset: 0; pointer-events: none; transition: opacity 1s ease; }
/* Act one keeps the blueprint's own dark sheet; from the build on, the scene
   sits on the page like Phase 03 (TeeJay). */
.svc-journey-sheet { background: var(--color-press-black); border-radius: var(--radius-images); overflow: hidden; }
/* The drawing stops short of the readout, so the loading line sits on a dark
   strip under the sheet instead of over its dimensions and title block. */
.svc-journey-sheet .svc-bp { position: absolute; inset: 0 0 44px 0; aspect-ratio: auto; border-radius: 0; }
.svc-journey .bld-stage canvas { transition: opacity 0.8s ease; }
.svc-journey.is-fallback .svc-journey-sheet { display: none; }
/* While the dark sheet is up, the readout reads light. */
.svc-journey.is-sheet .bld-status-text { color: var(--color-shadow-moss); }
.svc-journey.is-sheet.is-ready .bld-status-text { color: var(--color-highlighter-green); }
.svc-journey.is-sheet .bld-count { color: var(--color-bone-white); }
.svc-journey.is-sheet .bld-track { background: color-mix(in srgb, var(--color-shadow-moss) 35%, transparent); }
.svc-journey .bld-hud { z-index: 2; }
/* Inset while it sits on the dark sheet; full width once the scene is on the page. */
#svc-journey.is-sheet .bld-hud { left: var(--spacing-20); right: var(--spacing-20); }
/* Phase 03 sits straight on the page, not in a studio box: two boxed renders
   back to back read as a template (TeeJay). The stage fades out at its left
   and right edges so the flame and speed streaks dissolve rather than being
   cut off at an edge nobody can see. */
#svc-boost,
#svc-journey { background: none; border-radius: 0; }
#svc-boost .bld-stage,
#svc-journey .bld-stage {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 9%, black 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 9%, black 91%, transparent 100%);
}
#svc-boost.is-fallback .bld-stage,
#svc-journey.is-fallback .bld-stage { -webkit-mask-image: none; mask-image: none; border-radius: var(--radius-images); }
#svc-boost .bld-hud,
#svc-journey .bld-hud { left: 0; right: 0; }
.bld-hud {
  position: absolute; left: var(--spacing-20); right: var(--spacing-20); bottom: var(--spacing-15);
}
.bld-track { height: 2px; background: color-mix(in srgb, var(--color-newsprint-gray) 25%, transparent); overflow: hidden; }
.bld-bar { height: 100%; background: var(--color-highlighter-green); transform-origin: left center; }
.bld-status {
  display: flex; justify-content: space-between; margin-top: var(--spacing-8);
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--color-newsprint-gray);
}
.svc-bld.is-ready .bld-status-text,
.svc-bld:not(.is-live) .bld-status-text { color: var(--color-accent-edge); }
.bld-count { color: var(--color-typesetter-ink); font-variant-numeric: tabular-nums; }

/* The Phase 01 heading waits, laid out but invisible, until the blueprint
   starts drawing; then it types. .svc-sr is the screen-reader copy. */
.svc-type-wait .svc-char { visibility: hidden; }
.svc-type-wait .svc-char.is-typed { visibility: visible; }
.svc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the typed title ----------
   While .svc-typing is on the root, only the nav and the title are on the
   page. The title's letters are made visible one at a time by the script;
   everything else waits, then fades up together when the typing ends. */
.svc-typing .svc-title { visibility: hidden; }
.svc-typing .svc-title.is-split { visibility: visible; }
.svc-typing .svc-char { visibility: hidden; }
.svc-typing .svc-char.is-typed { visibility: visible; }
.svc-char { position: relative; }
.svc-char.is-caret::after {
  content: ''; position: absolute; right: -0.07em; top: 0.12em; bottom: 0.02em;
  width: 0.055em; min-width: 2px; background: var(--color-highlighter-green);
}
.svc-char.is-resting::after { animation: svc-blink 0.45s steps(1) infinite; }
@keyframes svc-blink { 50% { opacity: 0; } }

.svc-typing .svc-intro > :not(.svc-title),
.svc-typing main > section:not(.svc-intro),
.svc-typing .footer,
.svc-typing .accent-band { opacity: 0; transform: translateY(14px); }
.svc-typed .svc-intro > :not(.svc-title),
.svc-typed main > section:not(.svc-intro),
.svc-typed .footer,
.svc-typed .accent-band {
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-typed .svc-intro > .eyebrow { transition-delay: 0s; }
.svc-typed .svc-intro > .svc-lede { transition-delay: 0.08s; }

/* ---------- motion ----------
   Hidden state exists only once the script has set .svc-motion, so the
   words are always there if the script is not. */
.svc-motion .svc-fade {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-motion .svc-fade.is-shown { opacity: 1; transform: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 860px) {
  .svc-phase { grid-template-columns: 1fr; }
  .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-10); }
  .svc-index a { min-height: 150px; }
  .svc-phase { gap: var(--spacing-25); padding-block: var(--spacing-45); }
  .svc-phase-side { display: flex; align-items: flex-end; gap: var(--spacing-20); }
  .svc-num { margin: 0; flex: 0 0 auto; }
  .svc-photo { position: static; flex: 1 1 auto; aspect-ratio: 16 / 9; max-height: 180px; }
  /* The blueprint needs its width to be legible: number above, sheet full width. */
  .svc-phase-side--bp { flex-direction: column; align-items: stretch; }
  .svc-bp,
  .svc-bld { position: static; }
  .svc-wave-list { grid-template-columns: 1fr; gap: var(--spacing-15); margin-top: var(--spacing-25); }
  .svc-wave-list li { text-align: left; padding: var(--spacing-15) 0 0; border-top: 1px solid var(--color-muted-sage); }
  .svc-wave-list .micro b { display: inline; }
  .svc-wave-crest { width: 28px; height: 28px; }
}
@media (max-width: 560px) {
  /* On a phone the index becomes rows: number, name, arrow on one line. */
  .svc-index { grid-template-columns: 1fr; gap: 0; }
  .svc-index a {
    min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: var(--spacing-20); padding: var(--spacing-20) var(--spacing-50) var(--spacing-15) var(--spacing-15);
  }
  .svc-index-num { font-size: var(--text-subheading); min-width: 2.2ch; }
  .svc-index-name { padding-right: 0; }
  .svc-index-go { bottom: auto; top: 50%; margin-top: -10px; }
}