/* Switchboard home — site-specific styles */
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #fdfcf8; }
/* overflow-x: clip (not hidden) keeps horizontal overflow clipped without
   turning the body into a scroll container — `hidden` forces overflow-y
   to compute as `auto`, which breaks position: sticky on descendants. */
html, body { overflow-x: clip; }
/* Anchor jumps (footer links to #services, #contact, etc.) need to clear
   the fixed nav so the section title isn't hidden underneath it.
   scroll-margin-top on the targets covers both initial-load hash jumps AND
   in-page scrollIntoView, where scroll-padding-top alone misses the former. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }

/* Fixed 1440 design canvas, scaled to fit any viewport width.
   Transform + margin set by JS — see index.html.
   Below 900px viewport the JS clears the transform and the stage goes
   fluid so per-section media queries can render at 1:1 instead of being
   shrunk inside a scaled ancestor. */
#stage, .stage {
  width: 1440px;
  transform-origin: top left;
}
@media (max-width: 899px) {
  #stage, .stage {
    width: 100%;
    /* In case JS didn't run yet, prevent the 1440 canvas from blowing
       out the viewport. */
    transform: none;
  }
}

body {
  background: #fdfcf8;
  color: #000;
  font-family: "Neue Montreal", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ------- Tokens used inline ------- */
:root {
  --bg: #fdfcf8;
  --cream: #f7f4e8;
  --ink: #000;
  --muted: #656567;
  --line: rgba(0,0,0,0.11);
  --blue: #397ae7;
  --blue-deep: #2866ce;
  --blue-light: #c6dbff;
  --blue-light-2: #9cbdf3;
  --blue-tint: #c8d6f5;
  --salmon-bg: #ffd7d7;
  --salmon: #ffbcbc;
  --yellow-bg: #fff3c7;
  --yellow: #ffeba1;
  --pink-bg: #ffeffa;
  --pink: #ffdff4;
  --green-bg: #caf0be;
  --container: 1280px;
  --pad: 80px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ------- Layout helpers ------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section {
  padding: 128px 0;
}
.eyebrow {
  font: 600 14px/17px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: var(--blue);
  text-transform: uppercase;
}
.h-display {
  font: 500 50px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #000;
  margin: 0;
  text-wrap: balance;
}
.lead {
  font: 400 18px/24px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

/* ------- Buttons ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  font: 500 16px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .15s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--secondary { background: transparent; color: #000; border-color: #000; }
.btn--secondary:hover { background: #000; color: #fff; }
.btn--block { width: 100%; }

/* ------- Navbar ------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 92px; padding: 20px 40px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.nav.is-stuck { border-bottom-color: rgba(0,0,0,0.08); }
.nav__logo { height: 26px; }
.nav__logo svg, .nav__logo img { height: 26px; width: auto; display:block; }
.nav__links { display: flex; gap: 4px; align-items: center; }
.nav__link {
  padding: 8px 14px;
  font: 500 16px/1 "Neue Montreal", system-ui, sans-serif;
  color: #000;
  border-radius: 8px;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.nav__link:hover { color: var(--blue); }
.nav__cta { display: flex; gap: 12px; }

/* ------- Hero ------- */
.hero {
  padding: 56px var(--pad) 64px;
  background: var(--bg);
  position: relative;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__copy {
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
}
.hero__title {
  font: 500 76px/1.02 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: #000;
  margin: 0;
  text-wrap: balance;
}
.hero__work {
  color: var(--blue);
}
.hero__sub {
  font: 400 19px/28px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
  margin: 24px 0 0;
  max-width: 580px;
}
.hero__cta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ------- Hero scene: transformation diagram -------
   Inline SVG below the headline. CSS keyframes drive the entrance
   stagger (cubes → tag → disc → pills → windows). The continuous
   idle loop (packets, pulse) is SMIL-driven inside the SVG so the
   compositor handles it without rAF. */
.hero__art {
  width: 100%;
  max-width: 1280px;
  margin: 36px auto 0;
}
.hero-scene {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* All scene elements that fade in share a common animation; per-element
   delay scheduling lives below. animation-fill-mode:backwards holds the
   "from" state during the delay so nothing flashes before its cue. */
.hs-arrow,
.hs-tag,
.hs-cube,
.hs-disc,
.hs-pill,
.hs-window,
.hs-packets {
  transform-box: fill-box;
  transform-origin: center;
}
.hs-cube,
.hs-tag,
.hs-disc,
.hs-pill,
.hs-window {
  animation: hs-fade-up 700ms cubic-bezier(.2,.7,.2,1) backwards;
}
.hs-arrow {
  stroke-dashoffset: 0;
  animation: hs-fade-in 600ms ease-out backwards;
}
.hs-packets {
  animation: hs-fade-in 600ms ease-out backwards 2.2s;
}

/* Entrance schedule — 5 cubes stagger, then tag, disc, pills, windows. */
.hs-cube-1 { animation-delay: 0.05s; }
.hs-cube-2 { animation-delay: 0.18s; }
.hs-cube-3 { animation-delay: 0.30s; }
.hs-cube-4 { animation-delay: 0.42s; }
.hs-cube-5 { animation-delay: 0.55s; }

.hs-arrow-1 { animation-delay: 0.70s; }
.hs-arrow-2 { animation-delay: 0.80s; }
.hs-arrow-3 { animation-delay: 0.90s; }
.hs-arrow-4 { animation-delay: 1.00s; }
.hs-arrow-5 { animation-delay: 1.10s; }
.hs-arrow-out { animation-delay: 2.20s; }

.hs-tag { animation-delay: 1.10s; }
.hs-disc { animation-delay: 1.35s; animation-duration: 800ms; }

.hs-pill-1 { animation-delay: 1.75s; }
.hs-pill-2 { animation-delay: 1.90s; }
.hs-pill-3 { animation-delay: 2.05s; }

.hs-window-3 { animation-delay: 2.10s; }
.hs-window-2 { animation-delay: 2.20s; }
.hs-window-1 { animation-delay: 2.30s; }

/* Continuous breathing on the Sb wordmark — kicks in after the disc lands. */
.hs-sb {
  transform-box: fill-box;
  transform-origin: center;
  animation: hs-sb-breathe 3.2s ease-in-out infinite 2.4s;
}

@keyframes hs-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hs-sb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-cube, .hs-tag, .hs-disc, .hs-pill, .hs-window,
  .hs-arrow, .hs-packets, .hs-sb {
    animation: none !important;
  }
  /* SMIL animateMotion / animate elements respect prefers-reduced-motion
     via the parent <svg> as well, but we belt-and-suspenders by hiding
     the traveling packets when reduce is set so the static end-state
     reads as the calm, "settled" composition. */
  .hs-packets { opacity: 0; }
  .hs-disc__pulse { display: none; }
}

/* ------- Trust / logo marquee ------- */
.trust {
  border-top: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: stretch;
  height: 96px;
}
.trust__label {
  padding: 0 28px;
  display: flex; align-items: center;
  border-right: 1px solid rgba(0,0,0,0.85);
  margin-left: 40px;
  font: 500 14px/20px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--ink);
  max-width: 240px;
}
.trust__marquee {
  overflow: hidden;
  position: relative;
  height: 96px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.trust__marquee::before, .trust__marquee::after { display: none; }
.trust__track {
  display: flex; align-items: center; gap: 70px;
  height: 100%;
  width: max-content;
  /* 40s — another 5% slower than 38s for a calmer, more confident pace. */
  animation: trust-slide 40s linear infinite;
  padding-right: 70px;
}
.trust__track img {
  height: 22px;
  /* No max-width so wide logos (aarcomm 10.4:1) aren't vertically squished
     by object-fit: contain. Width follows the natural aspect ratio at fixed
     height; the marquee accommodates varying widths via its gap. */
  width: auto;
  flex-shrink: 0;
  opacity: 0.65;
}
/* aarcomm is heavier visually than the others — knock it down further. */
.trust__track img[data-mark="aarcomm"] { height: 14px; }
/* ultraspeaking is stacked (icon over text) so reads smaller — size it up. */
.trust__track img[data-mark="ultra"] { height: 29px; }
/* reliablepremium reads lighter than its weight class; bump 10% for parity. */
.trust__track img[data-mark="reliablepremium"] { height: 24px; }
@keyframes trust-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------- Logo bar (legacy) ------- */
.logos {
  display: grid;
  grid-template-columns: 246px 1fr;
  gap: 40px;
  align-items: center;
  height: 112px;
  padding: 0 var(--pad);
  border-top: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
}
.logos__lead {
  font: 400 16px/24px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
  border-right: 1px solid #000;
  height: 48px;
  display: flex; align-items: center;
  padding-right: 24px;
}
.logos__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  overflow: hidden;
}
.logos__row span {
  font: 500 22px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: #000;
  opacity: .85;
  white-space: nowrap;
}

/* ------- Section labels (eyebrow + heading + lead) ------- */
.section-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
}
.section-head .lead { text-align: center; max-width: 540px; }

/* ------- THE CHALLENGE (DNA helix, scroll-driven) ------- */
.helix {
  background: var(--bg);
  /* Bottom pad extends the section (head's sticky containing block) so
     the head stays pinned through item 4 viewing. Without enough padding,
     the section ends right after items and the head detaches from its pin.
     Trimmed from 240 → 96 because the previous value left a marathon of
     empty space after item 4 — see .helix__items padding-bottom note. */
  padding: 110px var(--pad) 96px;
  position: relative;
  border-top: 1px solid rgba(0,0,0,0.06);
}
/* Sticky centered header — direct child of <section>, sticky inside it.
   ::before extends the cream background edge-to-edge so items scrolling
   underneath are fully occluded; ::after fades the seam below. */
.helix__head {
  position: sticky;
  top: 104px;
  z-index: 4;
  padding: 8px 0 32px;
  /* Pull the head outside the section's horizontal padding so the bg
     can stretch edge-to-edge without affecting layout width. */
  margin: 0 calc(-1 * var(--pad));
}
.helix__head::before {
  content: "";
  position: absolute;
  /* Extends UP past the head's top edge so the cream backdrop meets the
     nav-scrim's fade — closes the gap where helix items would otherwise
     scroll into view between the nav and the sticky head. */
  top: -40px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--bg);
  z-index: -1;
  pointer-events: none;
}
.helix__head::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  width: 100vw;
  height: 18px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
}
.helix__head-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.helix__eyebrow { color: var(--blue); }
.helix__title {
  font: 500 50px/1.08 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  color: #000;
}
.helix__title em { font-style: normal; font-weight: 500; color: var(--blue); }
.helix__sub {
  font: 400 19px/1.5 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  max-width: 560px;
  margin: 0;
  text-wrap: pretty;
}

/* Two-col grid below the (sticky) head: viz on the left, items on the right. */
.helix__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  column-gap: 80px;
}
.helix__sticky {
  position: sticky;
  top: calc(104px + 260px);
  align-self: start;
  height: calc(100vh - 104px - 280px);
  max-height: 580px;
  min-height: 440px;
  display: grid;
  place-items: center;
  /* Perspective is on the sticky wrapper so the inner scene gets correct
     3D foreshortening relative to its container size. */
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.helix__items {
  /* Padding-bottom extends the grid's row height, which is the viz's
     sticky containing block — keeps the viz pinned while item 4 is read.
     Trimmed from 80vh → 22vh: 80 left the viz hanging alone for nearly a
     full extra viewport after item 4 ended. 22vh keeps the viz pinned
     just long enough for item 4 to scroll off the top cleanly, then lets
     the next section come into view promptly. */
  padding-bottom: 22vh;
}

/* ============================================================
   helix3d: real 3D DNA helix built from HTML divs.

   Strand beads are spheres-shaded circles, each positioned with
       translateY(y) rotateY(angle) translateZ(R)
   so they live at exact 3D points around a central vertical axis.
   Rungs span the helix diameter, rotated to align with each Y's
   strand-A → strand-B axis. The whole scene rotates on Y as the
   user scrolls — every element swings through real 3D space.
   ============================================================ */
.helix3d {
  /* All bead/rung positions scale from these — pixel values in CSS space
     are 0.78× the original SVG-unit values, so the helix fits cleanly in
     the sticky container. The bead step in JS is 12 Y-units → ~9.4px
     spacing; bead diameter 12px → adjacent beads overlap slightly along
     the strand, reading as a continuous chain rather than separated dots. */
  --hx-radius: 56px;          /* distance from central axis */
  --hx-bead-d: 12px;          /* bead diameter */
  --hx-rung-h: 8px;           /* rung thickness */
  --hx-rung-w: 112px;         /* rung length = 2 × radius */
  --hx-scale: 0.78;           /* multiplier applied to all bead/rung --y values */
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.helix3d__scene {
  position: relative;
  width: 180px;
  height: 480px;
  transform-style: preserve-3d;
  /* X-tilt is constant; Y rotation comes from scroll-driven --helix-rot. */
  transform: rotateX(12deg) rotateY(var(--helix-rot, 0deg));
  will-change: transform;
}

/* Each bead is a small shaded sphere placed at its 3D coordinate.
   --y and --angle are set inline on each element by the JS generator. */
.hx-bead {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hx-bead-d);
  height: var(--hx-bead-d);
  margin-left: calc(var(--hx-bead-d) / -2);
  margin-top: calc(var(--hx-bead-d) / -2);
  border-radius: 50%;
  border: 1.5px solid #000;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--y, 0) * var(--hx-scale) * 1px))
    rotateY(calc(var(--angle, 0) * 1deg))
    translateZ(var(--hx-radius));
  /* Bead must remain visible from the back side too. */
  backface-visibility: visible;
}
/* Flat pastel fills — same illustration language as the hero cubes and
   the pills (sb-light-salmon / sb-light-blue with a 1.5px black outline,
   no glossy shading). The 3D depth still reads via perspective
   foreshortening: beads further from the camera render visibly smaller. */
.hx-bead--a { background: #FFBCBC; }  /* sb-light-salmon */
.hx-bead--b { background: #9CBDF3; }  /* sb-light-blue-2 */

/* Rungs span the helix diameter, anchored at the center axis and rotated
   in Y to match the strand-A angle at their Y position. */
.hx-rung {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hx-rung-w);
  height: var(--hx-rung-h);
  margin-left: calc(var(--hx-rung-w) / -2);
  margin-top: calc(var(--hx-rung-h) / -2);
  /* Pill-shaped rung in the site's signature card-card style: cream fill,
     1.5px black outline, fully rounded ends. */
  background: var(--cream);
  border: 1.5px solid #000;
  border-radius: 999px;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--y, 0) * var(--hx-scale) * 1px))
    rotateY(calc(var(--angle, 0) * 1deg));
  transition: background-color 0.4s ease;
  backface-visibility: visible;
  /* Soft drop shadow underneath gives the rung physical thickness
     against the bead chain rather than reading as a flat sticker. */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}
/* Active rung adopts the brand-pastel of its item. Slightly more saturated
   pulls than the cube-face palette so the active rung clearly POPS against
   the cream-default ones around it. */
.helix[data-active="0"] .hx-rung[data-set="0"] { background: #FFBCBC; }  /* sb-light-salmon */
.helix[data-active="1"] .hx-rung[data-set="1"] { background: #9CBDF3; }  /* sb-light-blue-2 */
.helix[data-active="2"] .hx-rung[data-set="2"] { background: #FFD542; }  /* sb-yellow */
.helix[data-active="3"] .hx-rung[data-set="3"] { background: #FFDFF4; }  /* sb-pink */

/* Compositor-driven helix rotation: a full 360° turn over the section so
   the helix completes one revolution as the user reads through the four
   items. With real Z-depth, even the "edge-on" angles still show two
   columns of beads — the helix never collapses to a flat sliver. */
@keyframes helix-spin {
  from { transform: rotateX(12deg) rotateY(0deg); }
  to   { transform: rotateX(12deg) rotateY(360deg); }
}
@supports (animation-timeline: view()) {
  .helix3d__scene {
    animation: helix-spin linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .helix3d__scene {
    animation: none !important;
    transform: rotateX(12deg) rotateY(15deg) !important;
  }
}

/* Right column: stacked items */
.helix__items { display: flex; flex-direction: column; min-width: 0; }
.helix__item {
  /* Each item still owns the better part of a viewport so reading the
     focused one feels deliberate, but compressed from 78vh → 62vh so
     the run of 4 doesn't feel like an endurance scroll. */
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  /* Items stay readable from the moment they enter the viewport. The
     focused item still gets emphasized at full opacity, but the others
     no longer feel like they're "fading in too late". */
  opacity: 0.62;
  transition: opacity 0.42s ease;
}
.helix__item.is-focus { opacity: 1; }
.helix__item:last-child { padding-bottom: 16vh; }
.helix__item:first-child { padding-top: 5vh; }

.helix__num {
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--blue));
  margin-bottom: 18px;
  display: inline-flex; align-items: center;
}
.helix__num-rule {
  display: inline-block;
  height: 2px; width: 24px;
  background: var(--accent, var(--blue));
  margin-left: 14px;
  border-radius: 2px;
}
.helix__item-title {
  font: 500 36px/1.12 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.014em;
  margin: 0 0 20px;
  color: #000;
  text-wrap: balance;
}
.helix__item-body {
  font: 400 19px/1.5 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
  max-width: 46ch;
}

.helix__item[data-index="0"] { --accent: #E54848; }
.helix__item[data-index="1"] { --accent: #397AE7; }
.helix__item[data-index="2"] { --accent: #C28A00; }
.helix__item[data-index="3"] { --accent: #C84596; }

/* Header reveal */
.helix__eyebrow, .helix__title, .helix__sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.helix.is-in .helix__eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
.helix.is-in .helix__title   { opacity: 1; transform: none; transition-delay: 140ms; }
.helix.is-in .helix__sub     { opacity: 1; transform: none; transition-delay: 300ms; }

/* Inline mark beside the eyebrow on mobile (hidden on desktop). */
.helix__mark { display: none; }

@media (prefers-reduced-motion: reduce) {
  .helix__eyebrow, .helix__title, .helix__sub { opacity: 1 !important; transform: none !important; transition: none !important; }
  .helix__item { transition: opacity 200ms ease; }
}

@media (max-width: 860px) {
  .helix { padding: 88px 0 56px; }
  .helix__head { top: 92px; padding: 8px 0 24px; margin: 0; }
  .helix__head-inner { padding: 0 24px; }
  .helix__title { font-size: 32px; }
  .helix__sub { font-size: 16.5px; }
  .helix__grid {
    grid-template-columns: 1fr;
    padding: 16px 24px 24px;
    column-gap: 0;
  }
  .helix__items { padding-bottom: 0; }
  .helix__sticky { display: none; }
  .helix__mark {
    display: inline-block;
    width: 26px; height: 26px;
    vertical-align: middle;
    margin-left: 10px;
  }
  .helix__item {
    min-height: 0;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(0,0,0,0.08);
    opacity: 1;
  }
  .helix__item:first-child { border-top: 0; padding-top: 16px; }
  .helix__item-title { font-size: 26px; }
  .helix__item-body { font-size: 16.5px; }
}

/* WHAT WE BUILD */
.wwb, .start {
  background: var(--cream);
  text-align: center;
}
.start { padding: 128px var(--pad); }
.start .wwb__cards, .start .wwb__rail { max-width: var(--container); margin-left: auto; margin-right: auto; }
.wwb__cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.wwb__card {
  position: relative;
  border-radius: 20px;
  border: 1.8px solid #000;
  background: var(--bg);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  align-items: stretch;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.wwb__card.in { opacity: 1; transform: none; }
.wwb__card h3 {
  font: 500 36px/1.15 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  color: #000;
}
.wwb__card p {
  font: 400 18px/26px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
  margin: 0;
}
.wwb__cap { display: none; }
.wwb__badge {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border-radius: 99px;
  font: 500 14px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
}
.wwb__badge--agents    { background: #dfeaff; color: #2866ce; }
.wwb__badge--workflows { background: #ebe2ff; color: #6d49e0; }
.wwb__badge--software  { background: #dbedcb; color: #3d7827; }
.wwb__art {
  margin-top: 12px;
  height: 220px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.18) 1px, transparent 1.5px) 0 0/14px 14px,
    var(--cream);
  border: 1.5px solid rgba(0,0,0,0.12);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.wwb__rail {
  position: relative;
  z-index: 1;
  margin-top: 0;
  height: 110px;
  width: 100%;
  padding-top: 40px;
}
.wwb__rail-line {
  position: absolute; left: 0; right: 24px; top: 40px;
  z-index: 1;
  height: 1.5px; background: rgba(0,0,0,0.35);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.wwb__rail.in .wwb__rail-line { transform: scaleX(1); }
.wwb__rail-arrow {
  position: absolute; right: 0; top: 40px;
  width: 14px; height: 14px;
  border-top: 1.5px solid rgba(0,0,0,0.6);
  border-right: 1.5px solid rgba(0,0,0,0.6);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .4s var(--ease) 1s;
}
.wwb__rail.in .wwb__rail-arrow { opacity: 1; }
.wwb__rail-vt {
  position: absolute; top: 0; width: 0;
  border-left: 1.5px dashed rgba(0,0,0,0.28);
  height: 0;
  transform: translateX(-50%);
  transition: height .7s var(--ease);
}
.wwb__rail.in .wwb__rail-vt { height: 40px; }
.wwb__rail .dot {
  position: absolute; top: 40px; width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .4s var(--ease);
  z-index: 2;
}
.wwb__rail.in .dot { transform: translate(-50%, -50%) scale(1); }
.dot--blue   { background: #397ae7; }
.dot--purple { background: #6d49e0; }
.dot--green  { background: #3d7827; }
.wwb__rail-label {
  position: absolute; top: 64px; transform: translateX(-50%);
  font: 400 16px/1.3 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s var(--ease) .8s;
}
.wwb__rail.in .wwb__rail-label { opacity: 1; }
.wwb__platform {
  margin-top: 80px;
  position: relative;
  border-radius: 20px;
  background: var(--blue);
  padding: 48px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.wwb__platform.in { opacity: 1; transform: none; }
.wwb__platform-canvas {
  border-radius: 12px;
  background: var(--cream);
  border: 1.5px solid #000;
  height: 540px;
  position: relative;
  overflow: hidden;
}
.wwb__platform-mock {
  display: grid; grid-template-columns: 220px 1fr; height: 100%;
}
.wwb__platform-side {
  background: var(--bg);
  border-right: 1.5px solid #000;
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.wwb__platform-side .pill {
  font: 500 14px/1 "Neue Montreal", system-ui, sans-serif;
  padding: 10px 12px; border-radius: 8px; color: #000;
}
.wwb__platform-side .pill.active { background: var(--cream); border: 1.5px solid #000; }
.wwb__platform-side .pill.muted { color: rgba(0,0,0,0.5); }
.wwb__platform-stage {
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.wwb__platform-row {
  background: var(--bg);
  border: 1.5px solid rgba(0,0,0,.85);
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 100px 80px 28px;
  gap: 16px;
  align-items: center;
  font: 400 14px/20px "Neue Montreal", system-ui, sans-serif;
  color: #000;
}
.wwb__platform-row .tag {
  font: 500 12px/16px "Neue Montreal", system-ui, sans-serif;
  padding: 4px 8px; border-radius: 99px;
  background: var(--blue-light); color: #000;
  display: inline-block; width: max-content;
}
.wwb__platform-row .tag.green { background: var(--green-bg); }
.wwb__platform-row .tag.yellow { background: var(--yellow); }
.wwb__platform-row .check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center;
  color: #fff; font-size: 13px;
}
.wwb__sweep {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sweep 6s var(--ease) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 5px 10px;
  border-radius: 111px;
  font: 500 14px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #000;
}
.badge--blue { background: var(--blue-light); }
.badge--green { background: var(--green-bg); }
.badge--yellow { background: var(--yellow); }

/* DO THE MATH */
.math {
  /* Cream so we alternate cleanly with the bg-colored .services above and
     .compare below (start=cream → services=bg → math=cream → compare=bg). */
  background: var(--cream);
  /* +10% bottom padding to give the section room to breathe before the
     next section starts during scroll. */
  padding: 128px var(--pad) 142px;
  text-align: center;
}
.math__head {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 720px; margin: 0 auto;
  align-items: center;
}
.math__head .eyebrow { color: var(--blue); }
.math__head .h-display { margin: 0; }
.math__head .lead { color: var(--muted); margin: 0; max-width: 640px; }
.math__head { gap: 10px; }
.math__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 24px;
  text-align: left;
  max-width: var(--container); margin-left: auto; margin-right: auto;
  align-items: stretch;
}
.math__left { display: flex; flex-direction: column; gap: 20px; }

/* Case (project showcase) */
.case {
  border: 1.5px solid #000;
  border-radius: 16px;
  background: var(--bg);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Slide stack — all slides occupy the same grid cell; opacity + visibility
   give us a smooth cross-fade between the active slide and the previous
   one without any layout shift. */
.case__slides {
  position: relative;
  display: grid;
}
.case__slide {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.case__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s linear;
}

.case__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.case__art {
  /* No border here — the SVG inside is itself a card (its own white inner
     rect with a black outline). Adding another border around this whole
     area would create a "card within a card within a card" stack with the
     outer .case container. Background is --bg so it contrasts against
     the cream .math section (the SVG covers this fully, but keeping it
     in sync makes intent clear). */
  background: var(--bg);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 460 / 280;
}
.case__app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.case__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px 0;
}
.case__tag { display: none; }
.case__quote {
  font: 500 26px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: #000;
  margin: 0;
  text-wrap: balance;
}
.case__sub {
  font: 400 16px/1.4 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  margin: 0;
  letter-spacing: -0.005em;
}
.case__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.25px solid #000;
  border-radius: 999px;
  background: var(--bg);
  color: #000;
  font: 500 13px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.case__btn span { transition: transform .18s ease; display: inline-block; }
.case__btn:hover { background: #000; color: #fff; }
.case__btn:hover span { transform: translateX(2px); }

.case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
  margin-top: auto;
}
.case__dots {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
}
.case__dot {
  width: 22px;
  height: 8px;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,0.10);
  border-radius: 99px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width .35s cubic-bezier(.4,0,.2,1), background .25s ease;
}
.case__dot.is-active {
  width: 56px;
  background: rgba(0,0,0,0.10);
}
.case__dot-fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  border-radius: 99px;
  transform-origin: left center;
  transform: scaleX(0);
}
.case__dot.is-active .case__dot-fill {
  animation: caseFill 6s linear forwards;
}
@keyframes caseFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.case__counter {
  font: 500 13px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.case__counter #caseIdx { color: #000; }
.case__counter-sep { opacity: 0.4; padding: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .case__dot.is-active .case__dot-fill { animation: none; transform: scaleX(1); }
}

/* Stat tiles below left card only */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.stat {
  border: 1.5px solid #000;
  border-radius: 14px;
  padding: 20px 18px 22px;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 110px;
  justify-content: space-between;
}
.stat .n,
.stat .l {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.stats.is-swapping .stat .n,
.stats.is-swapping .stat .l {
  opacity: 0;
  transform: translateY(4px);
}
.stat .n {
  font: 500 36px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: #000;
}
.stat .l {
  font: 400 14px/1.35 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: #000;
  opacity: 0.85;
}

/* Calculator */
.calc {
  border: 1.5px solid #000;
  border-radius: 18px;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  align-self: stretch;
}
.calc__top { padding: 30px 32px 14px; }
.calc__top h3 {
  font: 500 30px/1.15 "Neue Montreal", system-ui, sans-serif;
  margin: 0 0 30px;
  letter-spacing: -0.02em;
}
.calc__row { margin-top: 26px; }
.calc__row:first-of-type { margin-top: 0; }
.calc__row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.calc__row-head .label {
  font: 400 18px/1.3 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: #000;
}
.calc__row-head .val {
  font: 500 18px/1.3 "Neue Montreal", system-ui, sans-serif;
  color: var(--blue);
  letter-spacing: -0.005em;
}

/* Track + dots overlay */
.calc__track {
  position: relative;
  height: 22px;
}
.calc__slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0;
}
.calc__slider::-webkit-slider-runnable-track {
  height: 22px; border-radius: 99px;
  background: linear-gradient(to right, var(--blue) 0%, var(--blue) var(--p, 50%), transparent var(--p, 50%), transparent 100%);
}
.calc__slider::-moz-range-track {
  height: 22px; border-radius: 99px;
  background: linear-gradient(to right, var(--blue) 0%, var(--blue) var(--p, 50%), transparent var(--p, 50%), transparent 100%);
}
.calc__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.calc__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid rgba(0,0,0,0.18);
}
/* Dot row sits behind the slider; only dots beyond thumb are visible */
.calc__dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  pointer-events: none;
  z-index: 1;
}
.calc__dots i {
  width: 14px; height: 14px; border-radius: 50%;
  background: #d8dadf;
  display: block;
  transition: opacity 120ms ease;
}
.calc__dots i.on { opacity: 0; }

.calc__bounds {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font: 400 15px/1.3 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0,0,0,0.45);
  letter-spacing: -0.002em;
}
.calc__bottom {
  padding: 26px 32px 28px;
  text-align: center;
  display: flex; flex-direction: column;
  flex: 1;
}
.calc__eyebrow {
  font: 400 16px/1.3 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0,0,0,0.55);
  letter-spacing: -0.002em;
  margin-bottom: 6px;
}
.calc__big {
  font: 500 75px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.035em;
  color: var(--blue);
  margin: 0 0 10px;
}
.calc__caption {
  font: 400 17px/1.35 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: #000;
  /* Extra breathing room before the CTA so the bottom half of the card
     doesn't feel cramped against the big number above. */
  margin: 0 0 40px;
}
.calc__cta {
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 12px;
  padding: 18px 16px;
  font: 500 18px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
}
.calc__footnote {
  font: 400 14px/1.3 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0,0,0,0.4);
  letter-spacing: -0.002em;
  margin-top: 14px;
}

/* Color tokens used by stat tiles */
:root {
  --pink-bg: #f5d2d6;
  --green-bg: #d9eccf;
  --blue-bg: #cad9f3;
}

@media (max-width: 980px) {
  .math__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .case__quote { font-size: 24px; }
  .stats { grid-template-columns: 1fr; }
}

/* THERE'S NO WRONG PLACE TO START */
.start {
  /* Cream so the cream/bg alternation lands correctly down the page:
     start=cream → services=bg → math=cream → compare=bg. */
  background: var(--cream);
  padding: 128px var(--pad);
  text-align: center;
}
.start__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 64px auto 0;
}

/* SERVICES */
.services { background: var(--bg); padding: 128px var(--pad) 176px; }
.services .section-head { text-align: center; }
.services .section-head .lead { margin: 0 auto; max-width: 720px; }

.puzzle {
  margin: 96px auto 0;
  max-width: 1620px;
  position: relative;
  aspect-ratio: 1620 / 660;
}
.puzzle__a, .puzzle__b {
  position: absolute;
}
.puzzle__a {
  left: 0;
  top: 0;
  width: calc(1100 / 1620 * 100%);
  height: 100%;
}
.puzzle__b {
  right: 0;
  top: calc(40 / 660 * 100%);
  width: calc(520 / 1620 * 100%);
  height: calc(580 / 660 * 100%);
  z-index: 1;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.puzzle__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.puzzle__a-grid {
  position: absolute;
  inset: 0;
  padding: 44px 80px 44px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.puzzle__b-inner {
  position: absolute;
  inset: 0;
  /* Vertical padding trimmed from 36→28 so the longer lede + bullets + CTA
     stack still fits inside the puzzle B card without the CTA falling
     outside the bottom edge. Horizontal padding kept so the notch and
     content alignment stay intact. */
  padding: 28px 56px;
  display: flex;
  flex-direction: column;
}
.puzzle__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.puzzle__anim {
  border: 1.5px solid #000;
  border-radius: 10px;
  background: var(--cream);
  height: 100%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puzzle__anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.15) 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.15) 100%);
}
.puzzle__anim-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  font-family: "Neue Montreal", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
}
.pa-lane { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; fill: rgba(0,0,0,0.45); font-family: inherit; }
.pa-node { font-size: 11px; font-weight: 600; fill: #000; font-family: inherit; }
.pa-node--alt { font-weight: 400; }
.puzzle__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font: 600 12px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.puzzle__badge.badge--blue { background: var(--blue-light); color: #0B3A8C; border: 1.5px solid #0B3A8C; }
.puzzle__badge.badge--cream { background: #F1ECE0; color: #000; border: 1.5px solid #000; }
.puzzle__badge.badge--green { background: #D9ECCF; color: #000; border: 1.5px solid #000; }
.puzzle__a h3, .puzzle__b h3 {
  font: 500 38px/1.05 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
}
.puzzle__b h3 { font-size: 32px; }
.dashed-rule {
  border: 0;
  border-top: 1.5px dashed rgba(0,0,0,0.55);
  margin: 18px 0 18px;
  width: 100%;
}
.puzzle__lede {
  font: 400 17px/1.45 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: #000;
  margin: 0 0 22px;
  max-width: 440px;
}
.puzzle__b .puzzle__lede { font-size: 16px; max-width: 408px; margin-bottom: 14px; }
/* Scoped tightening so the longer Studio lede + bullets + CTA stack
   leaves comfortable breathing room (~24-30px) below the CTA inside the
   puzzle B card. Only the B side is affected. */
.puzzle__b h3 { margin-top: 10px; }
.puzzle__b .dashed-rule { margin: 12px 0; }
.puzzle__b .puzzle__bullets { margin-bottom: 20px; }
.puzzle__bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.puzzle__bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 17px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: #000;
}
.puzzle__bullets li img,
.puzzle__bullets li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.puzzle__cta {
  margin-top: auto;
  align-self: flex-start;
}
.puzzle__a .puzzle__cta { padding: 14px 22px; }
.puzzle__b .puzzle__cta {
  background: #3D7827;
  color: #fff;
  border: 1.5px solid #3D7827;
  padding: 12px 22px;
}
.puzzle__b .puzzle__cta:hover { background: #2E5C1D; border-color: #2E5C1D; color: #fff; }

/* HOW WE COMPARE */
.compare { background: var(--bg); padding: 128px var(--pad) 142px; }
.compare__head { text-align: center; }
.compare__wrap {
  position: relative;
  max-width: var(--container);
  margin: 72px auto 0;
  overflow-x: auto;
}
.compare__grid {
  position: relative;
  display: grid;
  grid-template-columns: 200px 320px 1fr 1fr 1fr;
  min-width: 1080px;
  column-gap: 0;
  row-gap: 0;
  z-index: 1;
}
.compare__pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 200px;
  width: 320px;
  background: var(--blue);
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
}
.compare__rl,
.compare__c {
  position: relative;
  z-index: 1;
  padding: 22px 28px;
  font: 400 17px/1.4 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #000;
  display: flex;
  align-items: center;
}
.compare__rl {
  padding-left: 0;
  font-weight: 500;
}
.compare__c--us { color: #fff; font-weight: 500; }
.compare__c--head {
  font-weight: 500;
  padding-top: 26px;
  padding-bottom: 26px;
}
/* Switchboard column header gets extra weight so the brand stands out
   against the competitor labels in the same row. */
.compare__c--head.compare__c--us { font-weight: 700; }
.compare__rl--head { padding: 0; }
/* Light row dividers — applied to every cell in rows 2..7 */
.compare__grid > .compare__rl:not(.compare__rl--head),
.compare__grid > .compare__c:not(.compare__c--head):not(.compare__c--us) {
  border-top: 1px solid rgba(0,0,0,0.08);
}
/* Switchboard column dividers visible on the pill (lighter white) */
.compare__grid > .compare__c--us:not(.compare__c--head) {
  border-top: 1px solid rgba(255,255,255,0.18);
}

@media (max-width: 900px) {
  .compare__grid { grid-template-columns: 160px 280px 1fr 1fr 1fr; min-width: 920px; }
  .compare__pill { left: 160px; width: 280px; }
  .compare__rl, .compare__c { padding: 18px 18px; font-size: 15px; }
  .compare__rl { padding-left: 0; }
}

/* CONTACT */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--blue-light);
  padding: 128px var(--pad);
}
.contact__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; background: var(--blue-light-2); }
.shape--rect-tr   { width: 760px; height: 280px; border-radius: 28px; right: -120px; top: -40px; }
.shape--circle-r  { width: 720px; height: 720px; border-radius: 50%; right: -300px; top: 240px; }
.shape--rect-ml   { width: 360px; height: 240px; border-radius: 28px; left: -180px; top: 380px; }
.shape--rect-bl   { width: 480px; height: 220px; border-radius: 28px; left: 180px; bottom: 80px; }
.shape--rect-bm   { width: 540px; height: 220px; border-radius: 28px; left: 50%; transform: translateX(-30%); bottom: -80px; }
.shape--circle-bl { width: 320px; height: 320px; border-radius: 50%; left: -120px; bottom: -120px; }
.shape--rect-br   { width: 360px; height: 200px; border-radius: 28px; right: 80px; bottom: -60px; }

.contact__inner { position: relative; max-width: var(--container); margin: 0 auto; }
.contact__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 64px;
  margin-bottom: 80px;
}
.contact__head h2 {
  font: 500 56px/1.05 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
}
.contact__head p {
  /* Bumped from 18px/400 → 19px/500 for readability on the tinted bg. */
  font: 500 19px/1.5 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: #000;
  margin: 56px 0 0;
  max-width: 520px;
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.testimonial {
  position: relative;
  border: 1.5px solid #000;
  background: var(--bg);
  border-radius: 16px;
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}
.testimonial__slides {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.testimonial__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.testimonial__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.testimonial__qmark {
  width: 28px;
  height: 21px;
  color: var(--blue);
  flex-shrink: 0;
  margin-bottom: 18px;
}
.testimonial__quote {
  font: 400 19px/1.45 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
  color: #000;
  flex: 1;
}
.testimonial__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.testimonial__author { display: flex; gap: 14px; align-items: center; }
.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c7d4f5 0%, #8aa4dd 100%);
  border: 1.5px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.testimonial__avatar::after {
  content: attr(data-avatar);
  font: 500 14px/1 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.02em;
}
.testimonial__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial__name { font: 500 15px/1.3 "Neue Montreal", system-ui, sans-serif; color: #000; letter-spacing: -0.002em; }
.testimonial__co   { font: 400 14px/1.3 "Neue Montreal", system-ui, sans-serif; color: var(--muted); letter-spacing: -0.002em; margin-top: 2px; }
.testimonial__dots {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.testimonial__dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
  cursor: pointer;
  padding: 0;
  transition: width .35s var(--ease), background .35s var(--ease);
}
.testimonial__dot.is-active {
  width: 28px;
  background: var(--blue);
}
.form {
  border: 1.5px solid #000;
  background: var(--bg);
  border-radius: 16px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field {
  height: 56px;
  border: 1.5px solid #000; border-radius: 10px;
  padding: 16px;
  background: transparent;
  font: 400 16px/24px "Neue Montreal", system-ui, sans-serif;
  color: #000;
  letter-spacing: -0.002em;
  outline: none;
  transition: border-color .2s var(--ease);
}
.form__field:focus { border-color: var(--blue); }
.form__field::placeholder { color: rgba(0,0,0,0.45); }
.form__field--ta { height: 132px; resize: none; padding: 16px; line-height: 1.45; }
.form__check {
  display: flex; gap: 10px; align-items: center;
  font: 400 15px/1.4 "Neue Montreal", system-ui, sans-serif;
  color: #000; letter-spacing: -0.002em;
  margin-top: 4px;
}
.form__check input {
  width: 18px; height: 18px;
  border: 1.5px solid #000; border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.form__check input:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.form__check input:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #fff;
  clip-path: polygon(13% 50%, 0 65%, 38% 100%, 100% 18%, 85% 5%, 36% 70%);
}
.form__cta { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 4px; }
.form__cta .btn { padding: 18px 22px; font-size: 17px; }
.form__cta .btn[disabled] { opacity: 0.55; cursor: progress; }
.form__cta a { font: 500 15px/24px "Neue Montreal", system-ui, sans-serif; color: var(--blue); letter-spacing: -0.002em; text-decoration: none; }
.form__cta a:hover { opacity: .7; }
.form__status {
  font: 500 15px/1.45 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  padding: 14px 18px;
  border-radius: 10px;
  text-align: center;
  margin-top: 4px;
}
.form__status--sending { color: var(--muted); background: rgba(0,0,0,0.04); }
.form__status--ok      { color: #1d5a14; background: rgba(149,225,124,0.32); }
.form__status--err     { color: #8a2a2a; background: rgba(255,121,121,0.22); }

@media (max-width: 900px) {
  .contact__head { grid-template-columns: 1fr; gap: 24px; }
  .contact__head p { margin-top: 0; }
  .contact__head h2 { font-size: 44px; }
  .contact__row { grid-template-columns: 1fr; }
}

/* FAQ */
.faq { background: var(--bg); padding: 128px var(--pad); text-align: center; }
.faq__list {
  margin: 56px auto 0;
  max-width: 1100px;
  display: flex; flex-direction: column; gap: 16px;
}
.faq__item {
  border: 1.5px solid #000;
  background: var(--cream);
  border-radius: 14px;
  text-align: left;
  overflow: hidden;
}
.faq__btn {
  width: 100%;
  display: flex; align-items: center; gap: 18px;
  padding: 28px 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 500 28px/1.25 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: #000;
  text-align: left;
}
.faq__btn::before {
  content: "";
  width: 16px; height: 16px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease);
}
.faq__item.open .faq__btn::before { transform: rotate(90deg); }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq__item.open .faq__panel { grid-template-rows: 1fr; }
.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.faq__panel p {
  font: 400 18px/1.5 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  letter-spacing: -0.002em;
  margin: 0;
  padding: 0 36px 28px 70px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease .05s, transform .5s cubic-bezier(0.16, 1, 0.3, 1) .05s;
}
.faq__item.open .faq__panel p {
  opacity: 1;
  transform: translateY(0);
}
.faq__panel a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid var(--blue);
  transition: opacity .25s ease;
}
.faq__panel a:hover { opacity: .7; }
/* non-last paragraph in multi-paragraph answers: tighter bottom gap */
.faq__panel-inner p:not(:last-child) { padding-bottom: 14px; }

/* FOOTER */
.footer {
  background: #F7F4E8;
  padding: 128px var(--pad) 48px;
}
.footer__inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.footer__nav { display: flex; gap: 4px; }
.footer__nav a {
  padding: 8px 14px;
  font: 500 16px/1 "Neue Montreal", system-ui, sans-serif;
  color: #000;
  text-decoration: none;
}
.footer__nav a:hover { color: var(--blue); }
.footer__rule { height: 1px; background: #000; }
.footer__logo { width: 100%; }
.footer__logo svg, .footer__logo img { width: 100%; height: auto; display: block; color: #000; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 14px/20px "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
}
.footer__bottom .links { display: flex; gap: 32px; }
.footer__bottom a { color: var(--muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--blue); }

/* Reveal helpers */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Section headlines should inherit their section background, never paint their own */
.challenge__intro h2, .challenge__intro .h-display,
.math__head h2, .math__head .h-display,
.section-head h2, .section-head .h-display {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   MOBILE — ≤ 899px
   Stage goes fluid above (see top of file); JS clears the scale
   transform below 900px. These rules reflow the 1440 desktop grid
   into a single-column mobile layout. Targets modern phones first
   (iPhone 12 ≈ 390 logical px) but stays usable down to ~360px.
   ============================================================ */
@media (max-width: 899px) {
  :root {
    --pad: 20px;
  }

  body { font-size: 15px; }

  /* Generic display type scales with viewport so we don't have to retune
     every section by hand. */
  .h-display { font-size: clamp(34px, 8vw, 52px) !important; line-height: 1.05 !important; letter-spacing: -0.02em; }

  /* ---------- HERO ---------- */
  .hero { padding: 40px var(--pad) 48px; }
  .hero__art { margin-top: 28px; }
  .hero__title {
    font-size: clamp(40px, 8.4vw, 64px);
    line-height: 1.02;
  }
  .hero__sub { font-size: 16px; line-height: 1.5; margin-top: 20px; max-width: 520px; }
  .hero__cta { margin-top: 24px; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .hero__cta .btn { padding: 14px 18px; font-size: 15px; }

  /* ---------- TRUST / LOGOS ---------- */
  .trust { grid-template-columns: 1fr; height: auto; }
  .trust__label {
    margin: 0;
    height: auto;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.85);
    justify-content: center;
    text-align: center;
    max-width: none;
  }
  .trust__marquee { height: 80px; }
  .trust__track { gap: 40px; padding-right: 40px; }

  /* Legacy logos grid — same treatment if a page still uses it. */
  .logos { grid-template-columns: 1fr; gap: 12px; height: auto; padding: 20px var(--pad); }
  .logos__row { justify-content: center; flex-wrap: wrap; gap: 24px; }
  .logos__lead { text-align: center; }

  /* ---------- CHALLENGE ----------
     Mobile reinterprets the section as a horizontal scroll-snap
     carousel:
       • Tabs above the card → pill row (in-flow, not absolutely
         positioned — desktop's top:-48px trick overlaps the intro).
       • Panels container → flex row with scroll-snap-type x mandatory.
         The user swipes between panels with iOS-native feel; the
         JS-driven crossfade from desktop is replaced by CSS snap +
         a scroll-position-based progress bar.
       • Dots (.challenge__foot) come back from `display:none` to
         indicate position and act as tap-to-jump targets. */
  .challenge__intro { padding: 48px var(--pad) 24px; gap: 6px; }
  .challenge__intro .lead { font-size: 16px; }
  .challenge__pinwrap { padding: 0 var(--pad); }
  .challenge__card { max-width: none; overflow: visible; }
  .challenge__body { padding: 22px 18px 18px; min-height: 0; }
  .challenge__tabs {
    position: relative;
    inset: auto;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: auto;
  }
  .ctab {
    position: relative;
    inset: auto;
    min-width: 0;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #000;
    border-radius: 999px;
    font-size: 13px;
    opacity: 1 !important;
    transform: none !important;
    background: var(--bg);
    pointer-events: auto !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .ctab[data-state="active"]  { background: #000; color: var(--bg); border-color: #000; }
  .ctab[data-state="past"]    { background: var(--bg); color: rgba(0,0,0,0.55); }
  .ctab[data-state="pending"] { background: var(--bg); color: rgba(0,0,0,0.55); }

  /* Horizontal scroll-snap carousel. The panels container breaks out
     of the card body's horizontal padding so each snap card is the
     full body width — no awkward partial-panel previews on either side. */
  .challenge__panels {
    position: static !important;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 0;
    margin: 0 -18px;
    padding: 0 18px;
    min-height: 360px;
  }
  .challenge__panels::-webkit-scrollbar { display: none; }

  .cpanel {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Override the existing 900px rule's `.cpanel:not(.is-active) { display: none }` —
       all panels must be laid out simultaneously for the carousel. */
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    align-content: start;
    align-items: start;
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .cpanel:not(.is-active) { display: grid !important; }
  .cpanel__title { font-size: 28px !important; }
  .cpanel__copy { font-size: 16px; line-height: 1.55; max-width: none; }
  .cpanel__art {
    min-height: 200px;
    max-height: 280px;
    border-radius: 12px;
  }

  /* Dots back on mobile as carousel position + tap target. */
  .challenge__foot { display: flex; margin-top: 18px; justify-content: center; }
  .challenge__dots { gap: 10px; }
  .cdot { width: 24px; height: 6px; padding: 6px 0; }
  .cdot::before { height: 4px; border-radius: 99px; }
  .cdot__fill { height: 4px; margin-top: -2px; }

  /* ---------- DO THE MATH ---------- */
  .math { padding: 64px var(--pad); }
  .math__head { gap: 8px; }
  .math__head .lead { font-size: 16px; }
  .math__grid { margin-top: 32px; grid-template-columns: 1fr; gap: 16px; }
  .math__left { gap: 16px; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { min-height: 0; padding: 18px 18px 20px; }
  .case { padding: 16px; }
  .case__quote { font-size: 22px; }
  .case__sub { font-size: 14px; }
  .case__dot { width: 18px; height: 6px; }
  .case__dot.is-active { width: 44px; }

  /* ---------- WHAT WE BUILD (start) ---------- */
  .start { padding: 64px var(--pad); }
  .start .wwb__cards { margin-top: 36px; }
  .wwb__cards { grid-template-columns: 1fr; gap: 18px; }
  .wwb__card { padding: 26px 22px 28px; }
  .wwb__card h3 { font-size: 28px; }
  .wwb__card p { font-size: 16px; line-height: 1.45; }
  .wwb__art { height: 180px; }

  /* The horizontal rail connecting cards stops making sense once they
     stack vertically. Hide it; the badges and content already convey
     the sequence. */
  .wwb__rail { display: none; }
  .wwb__platform { margin-top: 40px; padding: 24px 16px; border-radius: 16px; }
  .wwb__platform-canvas { height: auto; min-height: 360px; }
  .wwb__platform-mock { grid-template-columns: 1fr; }
  .wwb__platform-side {
    border-right: 0;
    border-bottom: 1.5px solid #000;
    padding: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .wwb__platform-stage { padding: 18px; gap: 12px; }
  .wwb__platform-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label tag"
      "label check";
    gap: 6px 14px;
    padding: 12px 14px;
    font-size: 13px;
  }
  .wwb__platform-row > :nth-child(1) { grid-area: label; }
  .wwb__platform-row .tag { grid-area: tag; align-self: end; }
  .wwb__platform-row .check { grid-area: check; align-self: start; justify-self: end; }
  .wwb__platform-row > :nth-child(3) { display: none; }

  /* ---------- SERVICES / PUZZLE ---------- */
  .services { padding: 64px var(--pad) 80px; }
  .puzzle {
    margin: 40px auto 0;
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }
  .puzzle__a, .puzzle__b {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: none !important;
  }
  /* The SVG dovetail shapes don't tile nicely once the pieces stack
     vertically, so we hide them and let the inner cards stand on their
     own borders. */
  .puzzle__shape { display: none; }
  .puzzle__a-grid {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    padding: 0;
    gap: 16px;
  }
  .puzzle__b-inner { position: relative; inset: auto; padding: 0; }
  .puzzle__text { padding: 0; }
  .puzzle__anim {
    min-height: 240px;
    padding: 20px;
  }

  /* ---------- COMPARE ---------- */
  /* Keep the compare grid horizontally scrollable so the columns stay
     readable on phones instead of getting crushed. */
  .compare { padding: 64px 0; }
  .compare .section-head { padding: 0 var(--pad); }
  .compare__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--pad) 12px;
  }
  .compare__grid { min-width: 720px; }

  /* ---------- TESTIMONIALS + CONTACT ---------- */
  .contact { padding: 64px var(--pad); }
  .contact__head { margin-bottom: 40px; }
  .contact__head h2 { font-size: clamp(30px, 7.4vw, 44px); }
  .contact__head p { font-size: 16px; margin-top: 4px; }
  .testimonial { padding: 28px 24px; min-height: 360px; }
  .testimonial__quote { font-size: 17px; line-height: 1.45; }
  .testimonial__dots { right: 24px; bottom: 24px; }
  .form { padding: 22px; gap: 14px; }
  .form__row { grid-template-columns: 1fr; gap: 12px; }
  .form__field { height: 52px; font-size: 16px; }
  .form__field--ta { height: 120px; }
  .form__cta .btn { padding: 16px 22px; font-size: 16px; }
  /* Hide decorative background blobs on mobile — they bleed off-screen
     and chew bandwidth. */
  .contact__shapes { display: none; }

  /* ---------- FAQ ---------- */
  .faq { padding: 64px var(--pad); text-align: left; }
  .faq__list { margin: 28px auto 0; gap: 10px; }
  .faq__btn { padding: 18px 22px; font-size: 17px; gap: 12px; line-height: 1.3; }
  .faq__panel p { padding: 0 22px 22px 22px; font-size: 15px; }

  /* ---------- FOOTER ---------- */
  .footer { padding: 64px var(--pad) 32px; }
  .footer__inner { gap: 36px; }
  .footer__nav { flex-wrap: wrap; gap: 0; }
  .footer__nav a { padding: 8px 14px 8px 0; font-size: 15px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
  }
  .footer__bottom .links { gap: 20px; flex-wrap: wrap; }
}

/* ============================================================
   PHONE — ≤ 640px
   Sharper tightening for true phone widths. iPhone SE (375) and
   below land here; we still want everything readable.
   ============================================================ */
@media (max-width: 640px) {
  :root { --pad: 16px; }

  .hero { padding: 28px var(--pad) 36px; }
  .hero__title { font-size: clamp(36px, 9vw, 50px); line-height: 1.04; }
  .hero__sub { font-size: 15px; margin-top: 16px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  /* Full-bleed the diagram on phones so its internal elements
     have a few extra pixels to breathe in. The viewBox is 1400×600;
     at 375 wide that's still only ~160 tall, but every pixel helps. */
  .hero__art {
    margin: 24px calc(-1 * var(--pad)) 0;
    max-width: none;
    width: calc(100% + 2 * var(--pad));
  }

  .challenge__intro { padding: 40px var(--pad) 8px; }
  .cpanel__title { font-size: 26px !important; }
  .cpanel__copy { font-size: 15px; }

  .math { padding: 52px var(--pad); }
  .case__quote { font-size: 20px; }
  .case__art { aspect-ratio: 16 / 11; }
  .stat { padding: 16px 16px 18px; }

  .start { padding: 52px var(--pad); }
  .wwb__card { padding: 22px 20px 24px; }
  .wwb__card h3 { font-size: 24px; }
  .wwb__art { height: 160px; }

  .services { padding: 52px var(--pad) 64px; }

  .contact { padding: 52px var(--pad); }
  .contact__head h2 { font-size: clamp(28px, 8.2vw, 36px); }
  .testimonial { padding: 24px 20px; min-height: 320px; }

  .faq { padding: 52px var(--pad); }
  .faq__btn { padding: 16px 20px; font-size: 16px; }
  .faq__panel p { padding: 0 20px 20px; }

  .footer { padding: 52px var(--pad) 28px; }
}