/* ─────────────────────────────────────────────────────────────────────────
   Detailed service pages — the nine bay pages and their focused builds.

   Rendered entirely by /src/page.js. The hero's live sheet is drawn in
   dashboard.css's register (mounted from scenes/dash via kit.js); this file
   owns everything AROUND it: the hero grid, the caption rail, the editorial
   sections, the reveal choreography, and the page's hover/focus states.

   HISTORY. This file once carried a second, older scene system — nine
   bespoke CSS-keyframe hero scenes (`.chat-stage`, `.call-stage`, the
   `.cue-1..6` timing grid, the `.visual-*` photographic overlays) and a
   `.subflow-*` stage for the sub-service pages. page.js stopped emitting
   all of it when the hero became a bay sheet, and the dead rules — some
   40KB — were removed in the same audit that wrote this comment. Ground
   truth for what stays is what page.js emits today, nothing else.

   TIMING CONTRACT. The caption rail under the sheet is driven by page.js's
   own loop: it writes `--story-step` (the kit LOOP divided by the caption
   count) and toggles `is-active` / `is-done` / `is-paused` / `scene-reset`.
   The `.bar` animation below must stay LINEAR and exactly `--story-step`
   long, or the rail drifts against the sheet it narrates.
   ───────────────────────────────────────────────────────────────────────── */

.page-main.service-page {
  max-width: none;
  padding: 0;
  overflow: clip;
}

.service-detail {
  /* One wash for all nine bays. The old per-service raw hexes were nine
     near-identical tints of the same green; the token composites over
     white to the same colour and keeps the file inside the palette law. */
  --service-wash: var(--leaf-08);
  background: var(--page);
}

.service-hero,
.service-section,
.outcome-strip,
.transformation-section,
.process-panel,
.integration-band,
.service-final,
.service-next {
  width: min(100% - clamp(32px, 7vw, 112px), 1480px);
  margin-inline: auto;
}

.service-hero {
  min-height: min(900px, 100svh);
  padding: clamp(120px, 15vh, 170px) 0 clamp(72px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
  gap: clamp(44px, 6vw, 100px);
  align-items: center;
}

.service-hero-copy { position: relative; z-index: 2; }

.service-hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s4);
  color: var(--ink);
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 5px var(--leaf-14);
  animation: live-pulse 2.2s ease-in-out infinite;
}

/* The hero carries three things and stops: the bay, the headline, and one
   supporting line. The full description moved down the page (into "who it
   is for" and "what's included") where someone who wants detail will look
   for it — a hero that explains everything gets read as nothing. */

.service-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(50px, 6.4vw, 102px);
  letter-spacing: -0.055em;
  line-height: 0.92;
  max-width: 12ch;
  text-wrap: balance;
}

.hero-accent {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 2.35vw, 37px);
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--leaf-ink);
  margin: var(--s4) 0 0;
  max-width: 22ch;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.hero-actions .cta,
.service-final .cta {
  border-radius: 999px;
  min-height: 56px;
  padding-inline: 28px;
}

.outline-cta {
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.outline-cta:hover { background: var(--ink); color: white; }
.outline-cta span { transition: transform 250ms var(--ease-out); }
.outline-cta:hover span { transform: translateX(4px); }

/* ── Hero visual column: the sheet and the rail arrive as one object ──── */

.hero-visual-column { display: grid; gap: 16px; min-width: 0; align-content: start; }

/* The sheet's box is reserved by dashboard.css's aspect-ratio, so this
   entrance is pure transform/opacity over an already-sized slot — no CLS.
   The rail follows 150ms behind: one column, two beats, same grammar the
   dashboards use for their own tiles. */
.hero-sheet { animation: visual-enter 700ms var(--ease-out) both; }

/* ── Step-by-step story guide under the hero sheet ───────────────────── */

.story-guide {
  border: 1px solid rgba(11, 13, 16, 0.1);
  border-radius: 20px;
  background: white;
  padding: 18px 20px 20px;
  animation: visual-enter 700ms var(--ease-out) 150ms both;
}

/* Transport. page.js toggles these in step with its own loop: `is-paused`
   freezes the bar on the same frame the sheet freezes (offscreen, hidden
   tab), and `scene-reset` kills every animation for one frame so REPLAY
   restarts the bar from zero together with the sheet. `*` matches neither
   the element nor its pseudo-elements, so all three forms are named. */
.story-guide.is-paused, .story-guide.is-paused *,
.story-guide.is-paused *::before, .story-guide.is-paused *::after { animation-play-state: paused !important; }

.story-guide.scene-reset, .story-guide.scene-reset *,
.story-guide.scene-reset *::before, .story-guide.scene-reset *::after { animation: none !important; }

.story-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.story-head p { display: flex; align-items: center; gap: 8px; font: 10px var(--font-mono); letter-spacing: .12em; color: var(--ink-60); }
.story-head p i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-14); animation: live-pulse 2.2s ease-in-out infinite; }

/* REPLAY is the rail's one real control (the rail itself is display, not a
   scrubber), so it earns full states: rest, hover, press, keyboard focus. */
.story-replay {
  border: 1px solid rgba(11, 13, 16, .16);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  min-height: 30px;
  padding: 0 12px;
  cursor: pointer;
  font: 9px var(--font-mono);
  letter-spacing: .08em;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.story-replay:hover { background: var(--ink); border-color: var(--ink); color: white; }
.story-replay:active { transform: scale(0.96); }
.story-replay:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.story-replay span { display: inline-block; color: var(--leaf-ink); margin-right: 3px; transition: transform 300ms var(--ease-out), color 160ms var(--ease-out); }
.story-replay:hover span { color: var(--leaf-hot); transform: rotate(-180deg); }

.story-guide ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.story-guide li {
  position: relative;
  padding-top: 14px;
  opacity: .34;
  transform: translateY(0);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.story-guide li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 99px; background: rgba(11, 13, 16, .1); }
.story-guide .bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 99px; background: var(--leaf); transform: scaleX(0); transform-origin: left; }
.story-guide li.is-active { opacity: 1; transform: translateY(-2px); }
/* Linear, so the bar tracks real elapsed time — an eased bar reads as a
   progress lie. */
.story-guide li.is-active .bar { animation: story-bar var(--story-step, 3000ms) linear forwards; }
.story-guide li.is-done { opacity: .68; }
.story-guide li.is-done .bar { transform: scaleX(1); }
.story-guide li > span {
  font: 10px var(--font-mono);
  color: var(--ink-60);
  transition: color 320ms var(--ease-out);
}
.story-guide li.is-active > span, .story-guide li.is-done > span { color: var(--leaf-ink); }
.story-guide li b {
  display: block;
  margin: 7px 0 5px;
  font: 800 15px var(--font-display);
  letter-spacing: -.02em;
  transition: color 320ms var(--ease-out);
}
.story-guide li small { display: block; color: var(--ink-60); font-size: 12px; line-height: 1.45; }

.story-guide[data-static] li { opacity: 1; }
.story-guide[data-static] .story-replay,
.story-guide[data-static] .bar { display: none; }

/* ── Sub-service pages: hero ─────────────────────────────────────────── */

.sub-hero h1 { font-size: clamp(44px, 5.2vw, 84px); max-width: 13ch; }
.sub-hero .eyebrow a { border-bottom: 1px solid var(--ink-60); transition: color 160ms, border-color 160ms; }
.sub-hero .eyebrow a:hover { color: var(--leaf-ink); border-color: var(--leaf-ink); }

/* ── "Choose your build" cards (parent pages + related builds) ───────── */

.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
.sub-card {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid rgba(11, 13, 16, 0.12);
  border-radius: 22px;
  background: white;
  position: relative;
  overflow: hidden;
  transform: none;
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out), background 300ms var(--ease-out);
}
.sub-card::after { content: ''; position: absolute; width: 120px; height: 120px; border: 1px solid var(--leaf-30); border-radius: 50%; right: -50px; top: -50px; transition: transform 500ms var(--ease-out); }
.sub-card:hover { transform: translateY(-6px); border-color: var(--leaf); background: var(--service-wash); }
.sub-card:hover::after { transform: scale(1.35); }
.sub-card > span { font: 10px var(--font-mono); color: var(--leaf-ink); }
.sub-card h3 { margin: 26px 0 10px; font: 800 clamp(19px, 1.7vw, 25px)/1.1 var(--font-display); letter-spacing: -.03em; max-width: 16ch; }
.sub-card p { color: var(--ink-60); font-size: 13px; max-width: 32ch; }
.sub-card b { margin-top: auto; padding-top: 18px; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 8px; }
.sub-card b span { transition: transform 250ms var(--ease-out); }
.sub-card:hover b span { transform: translateX(5px); }

/* Reveal via a 'backwards' animation so the stagger doesn't poison hover
   transitions with a lingering transition-delay. */
.sub-card.reveal { opacity: 0; }
.sub-card.reveal.is-visible { opacity: 1; animation: subcard-in 550ms var(--ease-out) calc(var(--i) * 80ms) backwards; }

.related-section { border-top: var(--hairline); }

/* ── Highlights and editorial sections ───────────────────────────────── */

.outcome-strip {
  border-block: var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.outcome-strip > div {
  min-height: 120px;
  display: grid;
  align-content: center;
  padding: var(--s4) clamp(18px, 3vw, 42px);
  border-right: var(--hairline);
}

.outcome-strip > div:first-child { padding-left: 0; }
.outcome-strip > div:last-child { border-right: 0; }
.outcome-strip strong { font: 800 clamp(22px, 2.3vw, 34px) var(--font-display); letter-spacing: -.035em; }
.outcome-strip span { color: var(--ink-60); font-size: 13px; margin-top: 5px; }

.service-section { padding: clamp(96px, 11vw, 168px) 0; }

.section-heading { max-width: 760px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-tag { font: 11px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--leaf-ink); margin-bottom: var(--s3); }
.section-heading h2,
.transformation-head h2,
.process-title h2,
.scope-copy h2,
.service-final h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}
.section-heading > p:last-child,
.scope-copy > p {
  color: var(--ink-60);
  font-size: clamp(16px, 1.25vw, 19px);
  margin-top: var(--s4);
  max-width: 62ch;
}
.section-heading.centered > p:last-child { margin-inline: auto; }

.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
.audience-card { min-height: 270px; padding: clamp(25px, 3vw, 42px); background: var(--service-wash); border-radius: 24px; position: relative; overflow: hidden; }
.audience-card::after { content: ''; width: 130px; height: 130px; border: 1px solid var(--leaf-30); border-radius: 50%; position: absolute; right: -55px; top: -55px; }
.audience-card > span { font: 11px var(--font-mono); color: var(--leaf-ink); }
.audience-card h3 { font: 800 clamp(23px, 2vw, 31px)/1.05 var(--font-display); letter-spacing: -.04em; margin: 56px 0 15px; max-width: 14ch; }
.audience-card p { color: var(--ink-60); font-size: 14px; max-width: 35ch; }

/* ── Capabilities: demo pane reveals internally as its row scrolls in ── */

.capability-section { border-top: var(--hairline); }
.feature-list { margin-top: clamp(72px, 8vw, 112px); }
.feature-row { min-height: 570px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 130px); align-items: center; padding: clamp(70px, 8vw, 120px) 0; border-top: var(--hairline); }
.feature-row:nth-child(even) .feature-demo { order: 2; }
.feature-demo { min-height: 430px; border-radius: 26px; background: var(--service-wash); padding: clamp(24px, 3vw, 42px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.feature-demo::after { content: ''; position: absolute; width: 260px; height: 260px; border: 1px solid var(--leaf-30); border-radius: 50%; right: -90px; top: -90px; }
.feature-demo-label { font: 9px var(--font-mono); letter-spacing: .12em; color: var(--leaf-ink); }
.feature-demo-core { margin: 58px 0 35px; display: grid; grid-template-columns: 52px 1fr; gap: 0 15px; align-items: center; opacity: 0; transform: translateY(12px); }
.feature-demo-core i { grid-row: span 2; width: 52px; height: 52px; border-radius: 15px; background: var(--ink); color: var(--leaf); display: grid; place-items: center; font: normal 24px var(--font-body); }
.feature-demo-core b { font: 800 clamp(20px, 2vw, 29px) var(--font-display); letter-spacing: -.035em; }
.feature-demo-core small { color: var(--ink-60); font-size: 11px; }
.feature-demo > p { margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: white; display: flex; align-items: center; gap: 12px; font-size: 13px; transform: translateY(10px); opacity: 0; }
.feature-demo > p span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-14); color: var(--leaf-ink); font-size: 11px; }

/* Internal choreography, keyed off the row's own scroll reveal: the pane's
   core lands first, then the ✓ examples arrive 80ms apart — the same short,
   labelled cadence the dashboard tiles use. `backwards` holds each element
   at its staged frame until its delay elapses. */
.feature-row.is-visible .feature-demo-core { animation: demo-row 500ms var(--ease-out) 150ms forwards; }
.feature-row.is-visible .feature-demo > p { animation: demo-row 500ms var(--ease-out) calc(var(--i) * 80ms + 350ms) forwards; }

.feature-number { display: block; font: 11px var(--font-mono); color: var(--leaf-ink); margin-bottom: var(--s3); }
.feature-copy h3 { font: 900 clamp(38px, 4.4vw, 66px)/.96 var(--font-display); letter-spacing: -.055em; text-wrap: balance; }
.feature-copy > p { color: var(--ink-60); font-size: clamp(16px, 1.25vw, 19px); margin: var(--s4) 0; max-width: 53ch; }
.feature-copy ul { list-style: none; border-top: var(--hairline); }
.feature-copy li { padding: 12px 0; border-bottom: var(--hairline); display: flex; gap: 10px; font-size: 13px; }
.feature-copy li span { color: var(--leaf-ink); }

.transformation-section { padding: clamp(80px, 9vw, 136px); border-radius: 32px; background: var(--service-wash); }
.transformation-head { max-width: 800px; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s6); }
.comparison { background: white; border-radius: 20px; padding: clamp(24px, 3vw, 40px); }
.comparison.after { background: var(--ink); color: white; }
.comparison > p { font: 10px var(--font-mono); letter-spacing: .1em; color: var(--ink-60); margin-bottom: 28px; }
.comparison.after > p { color: var(--leaf-hot); }
.comparison ul { list-style: none; }
.comparison li { display: flex; gap: 12px; padding: 15px 0; border-top: 1px solid rgba(90, 95, 102, .2); font-size: 14px; }
.comparison.after li { border-color: rgba(255, 255, 255, .12); }.comparison li span { color: var(--ink-60); }.comparison.after li span { color: var(--leaf); }

.process-panel { padding: clamp(75px, 8vw, 120px); margin-top: clamp(90px, 11vw, 168px); background: var(--ink); color: white; border-radius: 32px; }
.process-title { max-width: 800px; }.process-title .section-tag { color: var(--leaf-hot); }
.process-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s7); position: relative; }
.process-steps::before { content: ''; position: absolute; left: 36px; right: 36px; top: 25px; border-top: 1px dashed var(--leaf); }
.process-steps li { position: relative; padding-right: clamp(28px, 5vw, 76px); }
.process-steps li > span { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: var(--ink); font: 700 18px var(--font-mono); box-shadow: 0 0 0 10px var(--ink); }
.process-steps h3 { font: 800 clamp(23px, 2.3vw, 34px)/1 var(--font-display); letter-spacing: -.04em; margin: 34px 0 15px; }
.process-steps p { color: rgba(255, 255, 255, .58); font-size: 14px; max-width: 32ch; }
.process-note { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; gap: 12px 26px; flex-wrap: wrap; color: rgba(255, 255, 255, .72); font-size: 13px; }
.process-note span { color: var(--leaf); }

.scope-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 9vw, 150px); align-items: start; }
.scope-copy { position: sticky; top: 120px; }
.scope-copy .outline-cta { margin-top: var(--s5); }
.deliverable-list { border-top: var(--hairline); }
.deliverable-list p { min-height: 76px; border-bottom: var(--hairline); display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 16px; font: 800 clamp(17px, 1.6vw, 23px) var(--font-display); letter-spacing: -.025em; }
.deliverable-list p span { font: 10px var(--font-mono); color: var(--ink-60); }.deliverable-list p i { color: var(--leaf-ink); font-style: normal; }

.integration-band { background: var(--service-wash); border-radius: 28px; padding: clamp(40px, 5vw, 70px); }
.integration-band > div { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 24px; }
.integration-band > div span { padding: 13px 18px; border: 1px solid rgba(11, 13, 16, .18); border-radius: 999px; background: white; font: 10px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; transition: border-color 200ms var(--ease-out); }
.integration-band > div span:hover { border-color: var(--leaf); }
.integration-band small { color: var(--ink-60); font-size: 11px; }

/* ── FAQ: hairline accordion with a smooth open ──────────────────────── */

.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 9vw, 150px); }
.faq-list { border-top: var(--hairline); }
.faq-list details { border-bottom: var(--hairline); padding: 0; }

/* Smooth height, no wrapper markup and no per-frame layout script:
   `interpolate-size` lets `height: auto` transition on the browser-owned
   `::details-content` box. Browsers without support ignore all three rules
   and keep the instant toggle — the honest fallback. `allow-discrete`
   holds the content visible while the close transition runs. */
.faq-list details { interpolate-size: allow-keywords; }
.faq-list details::details-content {
  height: 0;
  overflow: clip;
  transition: height 320ms var(--ease-out), content-visibility 320ms allow-discrete;
}
.faq-list details[open]::details-content { height: auto; }

.faq-list summary { list-style: none; min-height: 88px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; font: 800 clamp(17px, 1.6vw, 23px) var(--font-display); letter-spacing: -.025em; }
.faq-list summary::-webkit-details-marker { display: none; }
/* The + rotates 45° into × while the panel opens; hover firms the ring up
   before the click so the control reads as live. */
.faq-list summary span { width: 30px; height: 30px; border: 1px solid var(--graphite); border-radius: 50%; display: grid; place-items: center; font: 400 17px var(--font-body); transition: transform 320ms var(--ease-out), background 320ms var(--ease-out), border-color 200ms var(--ease-out); }
.faq-list summary:hover span { border-color: var(--ink); }
.faq-list details[open] summary span { transform: rotate(45deg); background: var(--leaf); border-color: var(--leaf); }
.faq-list details > p { color: var(--ink-60); max-width: 60ch; padding: 0 55px var(--s4) 0; font-size: 14px; }
/* The answer settles in just after the panel starts to grow. `backwards`
   stages it transparent for the delay's duration. */
.faq-list details[open] > p { animation: faq-in 360ms var(--ease-out) 80ms backwards; }

/* INK, NOT GREEN. This panel shipped for a while as a full-strength --leaf
   wash, which is design law 1's exact break: green means current is FLOWING,
   and a static closing slab is the least live thing on the page. The panel
   now sits on ink — the same register as .process-panel — and the only green
   here is the live dot in the eyebrow, which pulses because it is signal. */
.service-final { margin-top: clamp(80px, 9vw, 136px); padding: clamp(75px, 9vw, 138px); background: var(--ink); color: var(--page); border-radius: 32px; position: relative; overflow: hidden; }
.service-final::after { content: ''; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; right: -170px; top: -230px; }
.service-final .eyebrow { color: var(--leaf-hot); }.service-final h2 { max-width: 12ch; margin: var(--s3) 0 var(--s4); position: relative; z-index: 1; }.service-final > p:not(.eyebrow) { max-width: 54ch; position: relative; z-index: 1; color: var(--graphite); }.service-final .cta.light { margin-top: var(--s5); background: var(--leaf); color: var(--ink); position: relative; z-index: 1; gap: 28px; }

/* ── Previous / next: the arrows lean the way the link goes ──────────── */

.service-next { display: grid; grid-template-columns: 1fr 1fr; padding: var(--s6) 0 var(--s7); }
.service-next a { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--s5); border-right: var(--hairline); }
.service-next a:first-child { padding-left: 0; }.service-next a:last-child { border-right: 0; text-align: right; padding-right: 0; }
.service-next span { font: 9px var(--font-mono); letter-spacing: .1em; color: var(--ink-60); transition: transform 250ms var(--ease-out), color 250ms var(--ease-out); }
.service-next strong { font: 800 clamp(22px, 2.5vw, 36px) var(--font-display); letter-spacing: -.035em; transition: color .2s; }
.service-next a:hover strong { color: var(--leaf-ink); }
.service-next a:hover span { color: var(--ink); }
/* The label (arrow included — it is part of the text) nudges toward its
   destination: back-links left, forward-links right. */
.service-next a:first-child:hover span { transform: translateX(-5px); }
.service-next a:last-child:hover span { transform: translateX(5px); }

/* Scroll reveals */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.audience-card.reveal { transition-delay: calc(var(--i) * 90ms); }

/* Motion */
@keyframes visual-enter { from { opacity: 0; transform: translateY(28px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 9px rgba(31, 191, 102, 0); } }
@keyframes demo-row { to { opacity: 1; transform: none; } }
@keyframes story-bar { to { transform: scaleX(1); } }
@keyframes subcard-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .service-hero { grid-template-columns: 1fr; min-height: auto; }
  .service-hero h1 { max-width: 13ch; }
  .scope-section, .faq-section { gap: 60px; }
}

@media (max-width: 820px) {
  .service-hero, .service-section, .outcome-strip, .transformation-section, .process-panel, .integration-band, .service-final, .service-next { width: min(100% - 32px, 1480px); }
  .service-hero { padding-top: 110px; gap: 50px; }
  .sub-grid { grid-template-columns: 1fr; gap: 12px; }
  .sub-card { min-height: 0; }
  .sub-card h3 { margin-top: 18px; }
  .outcome-strip { grid-template-columns: 1fr; }
  .outcome-strip > div { min-height: 90px; border-right: 0; border-bottom: var(--hairline); padding-inline: 0; }.outcome-strip > div:last-child { border-bottom: 0; }
  .audience-grid { grid-template-columns: 1fr; }.audience-card { min-height: 230px; }
  .feature-row { grid-template-columns: 1fr; gap: 45px; min-height: 0; }.feature-row:nth-child(even) .feature-demo { order: 0; }.feature-demo { min-height: 400px; }
  .comparison-grid, .scope-section, .faq-section { grid-template-columns: 1fr; }.scope-copy { position: static; }.scope-section, .faq-section { gap: 50px; }
  .process-panel, .transformation-section, .service-final { padding: 60px 28px; border-radius: 24px; }
  .process-steps { grid-template-columns: 1fr; gap: 45px; }.process-steps::before { top: 25px; bottom: 25px; left: 25px; right: auto; border-top: 0; border-left: 1px dashed var(--leaf); }.process-steps li { padding-left: 78px; padding-right: 0; }.process-steps li > span { position: absolute; left: 0; top: 0; }.process-steps h3 { margin-top: 0; }
  .service-next a { padding-inline: 20px; }
}

/* 360px-wide phones: everything single-column, nothing overflowing. All
   section shells are `min(100% - 32px, …)` by here, every grid is one
   column, and the widest fixed pieces (52px roundels, 45px list gutters)
   sit inside 328px of content with room to spare. */
@media (max-width: 620px) {
  .service-hero { padding-bottom: 70px; }
  .service-hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .hero-actions { align-items: stretch; }.hero-actions a { width: 100%; }
  .story-guide { padding: 15px 16px 16px; border-radius: 16px; }
  .story-guide ol { grid-template-columns: 1fr; gap: 11px; }
  .story-guide li { padding-top: 11px; }
  .story-guide li b { display: inline; margin: 0 0 0 8px; }
  .story-guide li small { margin-top: 4px; }
  .section-heading h2, .transformation-head h2, .process-title h2, .scope-copy h2, .service-final h2 { font-size: clamp(36px, 11vw, 52px); }
  .feature-demo { min-height: 375px; padding: 22px; }.feature-demo-core { margin: 45px 0 24px; }.feature-copy h3 { font-size: clamp(36px, 11vw, 54px); }
  .comparison-grid { gap: 10px; }.comparison { padding: 22px; }
  .integration-band { padding: 38px 22px; }.integration-band > div span { padding: 10px 12px; }
  .faq-list details > p { padding-right: 0; }
  .service-next { grid-template-columns: 1fr; gap: 30px; }.service-next a, .service-next a:first-child, .service-next a:last-child { padding: 0; text-align: left; border: 0; }
}

/* With motion off the honest fallback is the FINISHED frame — everything
   present, nothing staged for an entrance, no hover nudges. page.js reads
   the same preference and paints the sheet settled and every caption lit;
   these rules make the CSS side agree with it. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero-sheet, .story-guide { animation: none; }
  .live-dot, .story-head p i { animation: none; }
  .story-guide li { opacity: 1; transform: none; transition: none; }
  .story-guide .bar, .story-guide .story-replay { display: none; }
  .feature-demo-core, .feature-demo > p { opacity: 1; transform: none; animation: none; }
  .sub-card.reveal { opacity: 1; animation: none; }
  .sub-card, .sub-card::after, .sub-card b span,
  .outline-cta span, .service-next span, .story-replay span { transition: none; }
  .sub-card:hover { transform: none; }
  .faq-list details::details-content { transition: none; }
  .faq-list details[open] > p { animation: none; }
  .faq-list summary span { transition: none; }
  .service-next a:hover span { transform: none; }
  .outline-cta:hover span, .sub-card:hover b span { transform: none; }
  .story-replay:hover span { transform: none; }
}