/* ============================================================
   Juicy Brains — marketing site
   ============================================================ */

:root {
  /* Brand */
  /* --green is the vibrant accent: icons, display type, gradients.
     --green-ink is a deeper cut of it for small text, which needs
     more contrast than the vibrant shade can give on white. */
  --green:     #009B6A;
  --green-ink: #00754E;
  --blue:    #2B6CF6;
  --pink:    #E6007E;
  --purple:  #7B3FE4;
  --navy:    #0B1533;

  /* Neutrals */
  --ink:      #0B1533;
  --ink-soft: #4A5468;
  --line:     #E4E7EE;
  --panel:    #F5F6F8;
  --white:    #FFFFFF;

  /* Type */
  --font-head: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --shell: 1180px;
  --radius: 18px;
  --radius-lg: 26px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 64px 0; }
.section-tight { padding: 24px 0 48px; }

.muted { color: var(--ink-soft); font-size: 15px; }
.t-green { color: var(--green); }
.dot-magenta { color: var(--pink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─────────────── Eyebrows ─────────────── */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 14px;
}
.eyebrow-green { color: var(--green-ink); }
.eyebrow-blue  { color: var(--blue); }
.eyebrow-pink  { color: var(--pink); }
/* --green-ink is the deep cut tuned for white; on navy it drops to ~3:1, so
   the navy panels take the vibrant green, which reads at ~5:1 there instead */
.ai-panel .eyebrow-green,
.cto-ai .eyebrow-green,
.dark-panel .eyebrow-green { color: var(--green); }
.centered { text-align: center; }

/* ─────────────── Buttons & links ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.btn-dark {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 21, 51, .18);
}
.btn-dark:hover {
  background: #142046;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 21, 51, .24);
}
/* for use on the navy panels, where btn-dark would disappear */
.btn-light {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.btn-light:hover {
  background: #F2F4F8;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn .arrow, .link-arrow .arrow { transition: transform .18s ease; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

/* ─────────────── Header ─────────────── */
/* No backdrop-filter here, deliberately. A translucent `position: sticky`
   element with a backdrop-filter makes WebKit build a backdrop root covering
   the viewport, and Safari intermittently fails to paint that root after a
   navigation — the page stays blank until something forces a repaint. The
   header sits on a white page at 88% white, so the blur bought almost
   nothing visually; an opaque background looks the same, removes the bug,
   and stops body text ghosting through while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(11, 21, 51, .05);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 88px;
}

/* Logo — radial dot-burst mark + solid geometric wordmark.
   The mark is a CSS mask so it takes its colour from `color`,
   which lets the same asset go navy on white and white on navy. */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  color: var(--ink);
}
.logo-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("assets/logo-mark.svg") center / contain no-repeat;
          mask: url("assets/logo-mark.svg") center / contain no-repeat;
}
.logo-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0.15em;
  text-indent: 0.15em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}

/* stacked lockup (footer) */
.logo-stacked {
  display: inline-grid;
  justify-items: center;
  gap: 16px;
}
.logo-stacked .logo-mark { width: 64px; height: 64px; }
.logo-stacked .logo-word { font-size: 22px; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--blue); }
.nav a.is-active { border-bottom-color: var(--green); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 8px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--line); background: #fff; padding: 12px 24px 22px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { display: block; padding: 10px 0; font-weight: 500; }

/* The CTA needs its own rule because `.mobile-nav a` above outranks both
   `.btn` and `.btn-sm`: it was overriding display:inline-flex and stripping
   every pixel of horizontal padding, so the label sat hard against the
   rounded left edge with the rest of the pill empty. The old
   `align-self: flex-start` never applied either — the flex item is the <li>,
   not the <a> inside it. Full width and centred: it is the primary action in
   the menu and should read like one. */
.mobile-nav li:last-child {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mobile-nav .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  font-size: 15px;
}

/* ─────────────── Hero ─────────────── */
.hero { padding: 56px 0 40px; overflow: hidden; }

/* ─────────────── Hero carousel (home page) ───────────────
   Four slides laid side by side on one track and moved with a transform.
   The track is the only animated thing, so the slides themselves keep
   normal flow and the existing .hero-grid rules apply untouched.

   Slides stay in the DOM and stay visible to layout: hero.js marks the
   off-screen ones `inert`, which removes their links from the tab order
   and hides them from assistive tech without display:none. That matters
   because a display:none slide has no height, and the track would
   collapse to the height of whichever slide was current, jumping on
   every change.

   Without JavaScript the controls stay hidden and the track renders as a
   plain stack of all four slides. Everything is readable and every link
   works; it simply does not rotate. */
.hero-carousel { padding-bottom: 20px; }

/* Carousel layout only applies once hero.js has added .is-live. The default
   is a plain stack: without JavaScript all four slides sit one under the
   other, every headline is readable and every link works. Make the flex
   track the default instead and the three off-screen slides are clipped by
   overflow:hidden with no control able to reach them - visible to a crawler,
   invisible and unreachable for a person. */
.hero-carousel.is-live .hero-viewport { overflow: hidden; }
.hero-carousel.is-live .hero-track {
  display: flex;
  /* stretch, so every slide is as tall as the tallest and the hero never
     changes height as it rotates. Sizing the viewport to each slide in
     turn was tried and is worse: the section grew and shrank by up to
     119px on every advance, shoving the content below it up and down, and
     because an auto-advance is not user input those shifts count towards
     CLS. The cost is some slack on the shorter slides - about 50px on a
     phone, 119px on the shortest desktop slide - which .hero-grid's
     align-items:center turns into even breathing room above and below. */
  align-items: stretch;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.hero-carousel.is-live .hero-slide {
  flex: 0 0 100%;
  min-width: 0;
}
/* the grid has to fill the stretched slide for its centring to apply */
.hero-carousel.is-live .hero-slide > .hero-grid { height: 100%; }

/* The offer slides use <h2> so the document keeps one <h1>. This makes
   them read at hero scale regardless. */
.hero-slide h2 {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.hero-slide .eyebrow { margin-bottom: 18px; }

/* ---- the facts panel on the offer slides ---- */
.hero-facts {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--hf-accent, var(--green));
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 18px 40px rgba(11, 21, 51, .07);
  max-width: 480px;
}
.hero-slide[data-accent="audit"]       { --hf-accent: var(--green); }
.hero-slide[data-accent="workshop"]    { --hf-accent: var(--blue); }
.hero-slide[data-accent="foundations"] { --hf-accent: var(--pink); }

/* ─────────── The Foundations slide ───────────
   Pale teal. A blush was the obvious pick from this slide's own pink
   and was rejected as too feminine, which leaves a narrow field: mint,
   indigo and sand already hold green, blue and orange, so magenta was
   the one wide gap in the wheel. Teal at hue 180 sits 46 degrees from
   its nearest neighbour, where the cool greys managed only 18 to 26 and
   would have crowded the indigo. Desaturated to 25% so it reads as a
   cool ground rather than a colour statement, and it keeps the dark
   video frame from floating on bare white.

   Both accents are darkened, and both were already tight before any
   tint. --pink (#E6007E) scored exactly 4.50 on white against the 4.5
   its 12px eyebrow needs, which is passing by nothing, and the teal
   takes it to 3.88. --green (#009B6A) in the headline was at 3.56; it
   only needs 3.0 at 38px so it passed, but with no margin.

   --f-pink is the same hue darkened, 4.76 here. --f-green is the same
   #007a54 the audit slide uses, 4.62 here, so the tinted panels share
   one darker green rather than inventing a second. */
.hero-slide[data-accent="foundations"] {
  --f-teal:  #e6f0f0;
  --f-pink:  #cc0070;
  --f-green: #007a54;

  background: var(--f-teal);
}
.hero-slide[data-accent="foundations"] .eyebrow-pink { color: var(--f-pink); }
.hero-slide[data-accent="foundations"] .t-green { color: var(--f-green); }

/* ─────────── The workshop slide ───────────
   A tint so it is not a third white slide in a row. Picked from the
   indigo in the poster's own gradient rather than from the site palette,
   for the same reason the scorecard slide borrows from its landing page.

   --w-blue exists because of contrast, not taste. The site's --blue
   (#2B6CF6) manages only 4.59 on white, and the eyebrow it colours is
   12px, so it is normal text and needs 4.5. Any tint at all pushes it
   under: on this ground it would be 4.07. --w-blue is the same hue (221)
   and saturation, two steps darker, which measures 4.80 here. Local to
   the slide so the darker blue cannot leak onto white backgrounds where
   the lighter one is fine. */
.hero-slide[data-accent="workshop"] {
  --w-tint: #eef1fd;
  --w-blue: #145cf5;

  background: var(--w-tint);
}
.hero-slide[data-accent="workshop"] .eyebrow-blue { color: var(--w-blue); }

/* ─────────── The audit slide ───────────
   Warm sand, so slide 4 is not white between two tinted neighbours. The
   hue matters more than the value here: it sits at about the same
   lightness as the workshop indigo before it, but the opposite side of
   the wheel, so the two read as plainly different panels. It also suits
   what the slide shows, a findings report on a white card.

   --a-green fixes a contrast failure that predates the tint. The site's
   --green (#009B6A) scores only 3.56 on WHITE, and the eyebrow it
   colours is 12px, so it is normal text needing 4.5. It was already
   below the line before this change; the sand would have taken it to
   3.17. This is the same hue (161) and saturation, darkened to 4.78 on
   the sand. Applied to the headline's .t-green too: at 38px that one
   only needs 3.0 and technically passed, but 3.17 is no margin at all,
   and two different greens on one slide looks like an accident.

   Scoped to the slide. The same failure exists wherever .eyebrow-green
   appears on white elsewhere on the site, and that is a separate fix. */
.hero-slide[data-accent="audit"] {
  --a-sand:  #f8f1e4;
  --a-green: #007a54;

  background: var(--a-sand);
}
.hero-slide[data-accent="audit"] .eyebrow-green,
.hero-slide[data-accent="audit"] .t-green { color: var(--a-green); }

/* ---- the film on the Foundations slide ----
   Stands in for .hero-facts, so it takes the same max-width, radius and
   shadow. overflow:hidden is what makes the radius apply to the video
   frame itself; a <video> paints its content over its own border-radius
   without it. */
.hero-film {
  display: block;
  width: 100%; height: auto;
  max-width: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 18px 40px rgba(11, 21, 51, .07);
}

/* ---- the poster on the workshop slide ----
   Stands in for .hero-facts on that one slide, so it takes the same
   max-width, radius and shadow and reads as the same object in the
   layout. The artwork is dark to its own edges, so it gets no border:
   one would draw a light line around a dark rectangle. */
.hero-poster {
  display: block;
  width: 100%; height: auto;
  max-width: 480px;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(11, 21, 51, .07);
}

/* ─────────── The scorecard slide ───────────
   The three paid offers share one layout: white ground, white facts card,
   coloured top rule. Put the free scorecard in that same shape and it
   disappears among them - four near-identical slides rotating past.

   So this one is built from its own landing page instead: the mint
   ground, the cream score card, the conic dial and the lime stamp. It
   reads as a different kind of offer, and as the page it opens.

   Tokens are local to the slide and prefixed --s-, because this palette's
   green (#356c57) is not the site's (#009B6A) and must not escape. The
   mono is JetBrains, which the home page already loads; the landing page
   uses DM Mono, and pulling a fourth family onto the busiest page of the
   site is not worth the two labels it would restyle. */
.hero-slide[data-accent="scorecard"] {
  --s-navy:  #0b1533;
  --s-green: #356c57;
  --s-mint:  #e1eee4;
  --s-cream: #fffdf6;
  --s-lime:  #d9fa78;
  --s-line:  #dce2d8;
  --s-amber: #e3b64e;
  --s-muted: #5b6575;

  background: var(--s-mint);
}
/* the landing hero's ring motif, so the two share a silhouette */
.hero-slide[data-accent="scorecard"] > .hero-grid { position: relative; }
.hero-slide[data-accent="scorecard"] > .hero-grid::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border: 1px solid #8ba99655;
  border-radius: 50%;
  right: -210px; top: -280px;
  box-shadow: 0 0 0 38px #ffffff30, 0 0 0 76px #ffffff22;
  pointer-events: none;
}
.hero-slide[data-accent="scorecard"] .hero-copy,
.hero-slide[data-accent="scorecard"] .hero-visual { position: relative; }

.hero-slide[data-accent="scorecard"] .sc-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--s-green);
}
.hero-slide[data-accent="scorecard"] h2 { color: var(--s-navy); }
.hero-slide[data-accent="scorecard"] h2 em { font-style: normal; color: var(--s-green); }
.hero-slide[data-accent="scorecard"] .lede { color: #4b5a50; }

/* ---- the miniature score card ---- */
.sc-card-mini {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  background: var(--s-cream);
  border: 1px solid #d7ded3;
  border-radius: 14px;
  box-shadow: 0 24px 55px #163c3518;
  /* the landing page's card sits at a slight angle; keeping it upright
     here, because a rotated card inside a sliding track reads as a
     rendering fault rather than a flourish */
}
.sc-mini-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--s-line);
}
.sc-mini-top { display: flex; align-items: center; gap: 18px; padding: 16px 0 14px; }

/* the same conic dial as the landing page and the result */
.sc-mini-dial {
  width: 104px; height: 104px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  background: conic-gradient(var(--s-amber) 0deg var(--deg, 0deg), #e8ece4 var(--deg, 0deg) 360deg);
}
.sc-mini-dial::before {
  content: ""; position: absolute; inset: 8px;
  background: var(--s-cream); border-radius: 50%;
}
.sc-mini-dial-in { position: relative; text-align: center; line-height: 1; }
.sc-mini-dial-in b {
  font-family: var(--font-head); font-weight: 700;
  font-size: 27px; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.sc-mini-dial-in span {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 9.5px;
  color: #71796f; text-transform: uppercase; letter-spacing: .07em;
}
.sc-mini-verdict small {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px;
  color: #777f75; text-transform: uppercase; letter-spacing: .08em;
}
.sc-mini-verdict b {
  display: block; margin: 5px 0;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: #947019;
}
.sc-mini-verdict span { font-size: 12px; line-height: 1.5; color: #596354; }

.sc-mini-rows { border-top: 1px solid var(--s-line); }
.sc-mini-rows li {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #edf0e9;
  font-size: 12px; color: #4f5d53;
}
.sc-mini-rows li:last-child { border-bottom: 0; }
/* the bar is the <i>, sized by --w */
.sc-mini-rows i {
  display: block; height: 5px; border-radius: 9px;
  background: #e9ece5; position: relative;
}
.sc-mini-rows i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 0%); background: var(--s-green); border-radius: 9px;
}
.sc-mini-rows em {
  font-style: normal;
  font-family: var(--font-mono); font-size: 10.5px; color: #6e776e;
  font-variant-numeric: tabular-nums;
}
.sc-mini-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 12px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: #697369;
}

/* The lime stamp, lifted from the landing hero. Hung off the CARD's
   bottom-right corner, not the column's, so it overhangs into the mint
   instead of sitting on the rows - which is exactly what it did at
   bottom-left, covering "Maintainability 10 / 12" and the foot. */
.sc-stamp {
  position: absolute;
  right: -40px; bottom: -46px;
  width: 92px; height: 92px;
  display: grid; place-items: center;
  text-align: center;
  background: var(--s-lime);
  border: 1px solid var(--s-navy);
  border-radius: 50%;
  box-shadow: 3px 4px 0 var(--s-navy);
  transform: rotate(-11deg);
  font-family: var(--font-mono);
  font-size: 10px; line-height: 1.35;
  text-transform: uppercase; color: var(--s-navy);
}

@media (max-width: 940px) {
  .hero-slide[data-accent="scorecard"] > .hero-grid::before { display: none; }
  .sc-stamp { right: -18px; bottom: -22px; width: 78px; height: 78px; font-size: 8.5px; }
}
@media (max-width: 720px) {
  .sc-card-mini { padding: 18px 16px 14px; }
  .sc-mini-top { gap: 14px; }
  .sc-mini-dial { width: 88px; height: 88px; }
  .sc-mini-dial-in b { font-size: 23px; }
  .sc-stamp { display: none; }
}

.hero-facts-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.hero-facts ul { display: grid; }
.hero-facts li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.hero-facts li:last-child { border-bottom: 0; }
.hf-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--hf-accent, var(--green));
}
.hf-tag {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.hf-high { background: #FDE7F1; color: #B00063; }
.hf-med  { background: #FFF2DC; color: #8A5A00; }
.hf-next { background: var(--panel); color: var(--ink-soft); }
.hero-facts-foot {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- controls ---- */
.hero-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.hero-arrow,
.hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-head);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.hero-arrow {
  /* 44px, so the target clears the WCAG 2.5.8 minimum without padding tricks */
  width: 44px; height: 44px;
  font-size: 22px;
  line-height: 1;
}
.hero-arrow:hover,
.hero-pause:hover { border-color: var(--green); color: var(--green-ink); }

.hero-dots { display: flex; align-items: center; gap: 10px; margin-inline: 4px; }
.hero-dot {
  /* the visible dot is 10px, but the button is 24px so it stays tappable */
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero-dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #C9CEDA;
  transition: background-color .18s ease, transform .18s ease;
}
.hero-dot:hover::before { background: var(--ink-soft); }
.hero-dot[aria-current="true"]::before { background: var(--green); transform: scale(1.35); }

.hero-pause {
  margin-left: auto;
  height: 44px;
  padding-inline: 18px;
  font-size: 13.5px;
  font-weight: 500;
}
/* Two bars for pause, one triangle for play, drawn in CSS so there is no
   icon font or sprite to load for a single control. */
.hero-pause-icon {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hero-pause[aria-pressed="true"] .hero-pause-icon {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

@media (max-width: 720px) {
  .hero-controls { gap: 10px; margin-top: 22px; }
  .hero-pause-text { position: absolute; left: -9999px; }
  .hero-pause { padding-inline: 0; width: 44px; }
  .hero-facts { padding: 22px 20px 18px; }
}

/* Auto-advance is switched off entirely in hero.js when this is set; the
   transition goes too, so a manual change is an instant cut. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel.is-live .hero-track { transition: none; }
  .hero-dot::before { transition: none; }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 700;
  margin-bottom: 30px;
}
/* headline operators, picking up the magenta of the code annotation's + and = */
.h-op { color: var(--pink); }
.lede { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 34px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.hero-visual { position: relative; }
/* height:auto is safe here because the <img> carries width/height attributes,
   giving it a real intrinsic ratio. The same declaration on an inline <svg>
   with only a viewBox is the Safari intrinsic-sizing bug. */
.brain { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.code-note {
  position: absolute;
  right: 4px;
  bottom: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.85;
  color: #9AA3B5;
}
.code-note .c-comment { color: #A9B1C1; }
.code-note .c-op { color: var(--pink); }
.code-note .c-fn { color: var(--blue); }

/* ─────────────── Panels ─────────────── */
.panel {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}

/* ─────────────── Journey ─────────────── */
.journey {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
}
.journey-intro h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.journey-intro .muted { max-width: 200px; }

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  position: relative;
}
.steps .step-arrow {
  display: none; /* arrows are absolutely placed between columns below */
}
.step {
  text-align: center;
  padding: 0 8px;
  position: relative;
}
.step + .step::before {
  content: "→";
  position: absolute;
  left: -12px;
  top: 26px;
  color: #B9C0CE;
  font-size: 16px;
}
.step-icon svg {
  width: 46px; height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon svg .fill { fill: currentColor; stroke: none; }
.step h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 12px 0 8px;
  color: inherit;
}
.step p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.step-green  { color: var(--green); }
.step-purple { color: var(--purple); }
.step-blue   { color: var(--blue); }
.step-pink   { color: var(--pink); }

.rail {
  position: relative;
  height: 12px;
  margin: 26px 0 22px;
}
.rail-line {
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--green) 0%, var(--purple) 27%, var(--blue) 50%, var(--pink) 74%, var(--green) 100%);
}
.rail-dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: calc(10% + var(--i) * 20%);
}
.rail-dot:nth-child(2) { background: var(--green); }
.rail-dot:nth-child(3) { background: var(--purple); }
.rail-dot:nth-child(4) { background: var(--blue); }
.rail-dot:nth-child(5) { background: var(--pink); }
.rail-dot:nth-child(6) { background: var(--green); }

.journey-foot {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.75;
}

/* ─────────────── Discipline cards ─────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.card {
  position: relative;          /* anchors the stretched link below */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 21, 51, .09);
  border-color: transparent;
}

/* The whole card is the target, not just the "Learn more" text — it already
   lifts on hover, so it should behave like the link it looks like. Done by
   stretching the existing anchor over the card rather than wrapping
   everything in an <a>: that keeps one link per card, keeps the heading and
   list markup intact, and leaves "Learn more" as the link's accessible name. */
.card .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* keyboard focus lands on that anchor, so show it on the whole card */
.card:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent, var(--blue));
}
.card .link-arrow:focus-visible { outline: none; }
.card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.card-icon {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.card-icon svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-icon svg .fill { fill: currentColor; stroke: none; }
.card h3 { font-size: 22px; font-weight: 700; }
.card-tag { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; margin-top: 2px; }
.card-body { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }

.ticks { display: grid; gap: 11px; margin-bottom: 26px; }
.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  color: var(--ink);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  background-image: linear-gradient(45deg, currentColor, currentColor);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 5px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.7px solid #fff;
  border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg);
}
.card .link-arrow { margin-top: auto; }

/* --accent paints marks, --accent-ink paints text; they only differ
   for green, whose vibrant shade is too light for small copy */
.card-green  { --accent: var(--green); --accent-ink: var(--green-ink); }
.card-blue   { --accent: var(--blue);  --accent-ink: var(--blue); }
.card-pink   { --accent: var(--pink);  --accent-ink: var(--pink); }
.card-green .card-icon  { background: var(--green); }
.card-blue  .card-icon  { background: var(--blue); }
.card-pink  .card-icon  { background: var(--pink); }
.card .ticks li::before { color: var(--accent); }
.card .card-tag,
.card .link-arrow { color: var(--accent-ink); }
.card:hover { box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ─────────────── Method.AI (homepage) ───────────────
   The one dark block on an otherwise light page, so the AI position reads as
   a statement rather than another card in the stack. */
.ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: start;
  background: var(--navy);
  color: #C3CADB;
  border-radius: var(--radius-lg);
  padding: 56px 60px;
}
.ai-copy h2 {
  color: #fff;
  font-size: clamp(28px, 3.1vw, 38px);
  font-weight: 700;
  margin-bottom: 20px;
}
/* :not(.eyebrow) — the eyebrow is a <p> too, and this selector outranks
   .eyebrow, so without it the label picks up body-copy sizing */
.ai-copy p:not(.eyebrow) { font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; }
.ai-copy p strong { color: #fff; font-weight: 600; }
.ai-copy .btn { margin-top: 12px; }

.ai-points { display: grid; gap: 26px; }
.ai-points li { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; }
.ai-points h3 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ai-points p { font-size: 14px; line-height: 1.65; }

@media (max-width: 940px) {
  .ai-panel { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; }
}
@media (max-width: 720px) {
  .ai-panel { padding: 32px 24px; gap: 30px; }
}

/* ─────────────── Why founders ─────────────── */
.why {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.why-intro h2 { font-size: 30px; font-weight: 700; margin-bottom: 16px; }
.why-intro .muted { max-width: 250px; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.why-item { padding: 0 26px; }
.why-item + .why-item { border-left: 1px solid var(--line); }
.why-icon svg {
  width: 44px; height: 44px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.why-icon svg .fill { fill: currentColor; stroke: none; }
.why-item h3 { font-size: 16px; font-weight: 700; margin: 18px 0 14px; }
.why-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.why-green  { color: var(--green); }
.why-blue   { color: var(--blue); }
.why-pink   { color: var(--pink); }
.why-purple { color: var(--purple); }
.why-item h3, .why-item p { color: var(--ink); }
.why-item p { color: var(--ink-soft); }

/* ─────────────── Logos ─────────────── */
.logos { padding: 34px 48px 38px; }
/* Flex rather than a fixed column count, so adding or removing a client does
   not need a CSS change — the row just re-centres. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 64px;
  margin-top: 20px;
}

/* Client marks are painted as CSS masks rather than placed as images. The
   supplied files were ink on opaque white, which would have shown as white
   boxes on the panel; as masks they take their colour from `color`, so they
   render grey here and darken on hover exactly like the old inline SVGs.
   --ratio is each mark's own trimmed aspect ratio, so a shared height gives
   every logo its true proportions. */
/* --scale is an optical correction, set per logo in the markup. Matching the
   box heights is not the same as matching visual weight: Facto. is a bare
   wordmark so its letters fill the full height, while MEGT and MotorPlatform
   spend part of theirs on a mark and a dotted ring, leaving their lettering
   smaller. Without this the row reads as one big logo and two small ones. */
.client-logo {
  display: block;
  height: calc(34px * var(--scale, 1));
  width: calc(34px * var(--scale, 1) * var(--ratio, 3));
  background-color: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  color: #8A93A5;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.logo-row li:hover .client-logo { opacity: 1; color: var(--ink); }

/* ─────────────── Closing CTA ───────────────
   A contained panel: copy left, framed image right. The image sits on a
   single offset gradient block rather than a pile of organic blobs, so the
   composition reads as two aligned rectangles instead of coloured noise. */
.cta { padding-bottom: 84px; }

.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
}

.cta-copy h2 {
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 700;
  margin-bottom: 18px;
}
.cta-copy .muted { max-width: 330px; margin-bottom: 34px; font-size: 16px; }

.cta-actions {
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.cta-mail { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.cta-mail:hover { color: var(--green-ink); }

/* The graphic is flat with no frame — no card shadow, rounded corners or
   offset accent block, which all belonged to the photo treatment this
   replaced. */
.cta-figure { margin: 0; }
.cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────── Sub-page scaffold ───────────────
   Shared by every page other than the homepage. The min-height on the
   body keeps the footer down the page while the pages are still empty. */
.page-head { padding: 72px 0 0; }
.page-head h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 700;
  margin-bottom: 18px;
}
.page-head .muted { max-width: 580px; font-size: 16px; }

.page-body { padding: 44px 0 96px; min-height: 38vh; }
.page-placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 64px 32px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

@media (max-width: 720px) {
  .page-head { padding-top: 48px; }
  .page-body { padding: 32px 0 64px; }
  .page-placeholder { padding: 44px 20px; }
}

/* ─────────────── Juicy Ventures ─────────────── */
/* The 680px cap sits on the paragraph, not the whole block. Body copy wants a
   short measure to stay readable; a heading does not, and sharing one cap was
   breaking "Why fractional or interim makes sense" onto a second line for the
   sake of 86px. Headings get a wider ceiling of their own. */
.page-intro { margin-bottom: 56px; }
/* The cap keeps a headline off an uncomfortably long measure, but 820px was
   breaking the three longest intros onto two lines inside a 1180px shell.
   The longest is "Technical firepower for the earliest, hardest part." at
   962px when set at the 40px cap, so 980px clears every current headline with
   a little slack for font-rendering differences. Re-measure if a longer one
   is added — the body copy below keeps its own, narrower limit. */
.page-intro h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
  max-width: 980px;
}
.page-intro .muted { font-size: 16px; line-height: 1.7; max-width: 680px; }

.venture {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
/* alternate which side the artwork sits on */
.venture-flip .venture-media { order: 2; }

.venture-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
/* Real product screenshots, and they do not share an aspect ratio — Wistla is
   about 1.36, Dotzle about 1.74. Forcing both into a fixed frame cropped the
   Dotzle logo off one edge and the value card off the other, so each image
   keeps its natural proportions instead. */
.venture-media img {
  display: block;
  width: 100%;
  height: auto;
}

.venture-body h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.venture-tagline {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--green-ink);
  margin: 8px 0 18px;
}
.venture-desc { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; }
.venture-link { color: var(--ink); }
.venture-link:hover { color: var(--green-ink); }

/* ---- how we build ---- */
.venture-pillars { margin-top: 72px; }
.venture-pillars h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}
.pillar-grid h4 { font-size: 16px; font-weight: 700; margin: 10px 0 8px; }
.pillar-grid p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---- closing CTA ---- */
.page-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 72px;
  padding: 36px 40px;
  background: var(--panel);
  border-radius: var(--radius-lg);
}
.page-cta h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }

@media (max-width: 860px) {
  .venture {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0;
  }
  /* keep the artwork above the copy on every venture once stacked */
  .venture-flip .venture-media { order: 0; }
  .page-intro { margin-bottom: 40px; }
  .venture-pillars, .page-cta { margin-top: 52px; }
  .page-cta { padding: 28px 24px; }
}

/* ─────────────── Sub-page sections ───────────────
   .page-section is the generic spacing between the stacked sections of a
   sub-page. The .cto-* names alongside it predate it and are kept so that
   Ask the CTO's markup does not have to change. */
.page-section,
.cto-models, .cto-why, .cto-lead, .cto-ai, .cto-where { margin-top: 76px; }

/* shared with .venture-pillars — a small caps heading over a hairline */
.section-rule, .venture-pillars h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

/* ---- engagement models ---- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.model {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
}
.model-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}
.model h4 { font-size: 19px; font-weight: 700; margin: 10px 0 10px; }
.model p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
/* scoped rather than !important — `.model p` above has the same weight */
.model .model-best {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.5px;
}
.model .model-best strong { color: var(--ink); font-weight: 600; }

/* ---- why fractional / interim ---- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 34px 32px;
}
.reason-grid h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 9px;
  padding-left: 16px;
  position: relative;
}
.reason-grid h4::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.reason-grid p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); padding-left: 16px; }

/* ---- leading from the front ---- */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}
.lead-grid h4 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.lead-grid h4::after {
  content: "";
  display: block;
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin-top: 12px;
}
.lead-grid p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

.culture-note {
  margin-top: 40px;
  padding: 30px 32px;
  background: var(--panel);
  border-radius: var(--radius);
  border-left: 4px solid var(--green);
}
.culture-note h4 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.culture-note p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* An inline link inside running prose. The global `a { color: inherit }` would
   otherwise leave it indistinguishable from the sentence around it. Uses
   --green-ink, not --green: this is small text on a light background. */
.text-link { color: var(--green-ink); font-weight: 500; }
.text-link:hover { text-decoration: underline; }

/* ---- dark panel: the one dark block on a sub-page, so it reads as the claim
        the rest of the page is built around. .cto-ai is the original name,
        kept so Ask the CTO's markup is left alone. ---- */
.cto-ai, .dark-panel {
  background: var(--navy);
  color: #C3CADB;
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}
.cto-ai h3,
.dark-panel h3 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; margin-bottom: 16px; }
/* :not(.eyebrow) matters — the eyebrow is itself a <p>, and this rule is more
   specific than .eyebrow, so without it the label gets body-copy sizing */
.cto-ai p:not(.eyebrow),
.dark-panel p:not(.eyebrow) { font-size: 15.5px; line-height: 1.75; max-width: 760px; }
.dark-panel p + p:not(.eyebrow) { margin-top: 16px; }
.dark-panel a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.dark-panel a:hover { border-bottom-color: var(--green); }

/* ---- where and how ---- */
.where-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}
.where-grid h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip-list li {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (max-width: 720px) {
  .page-section,
  .cto-models, .cto-why, .cto-lead, .cto-ai, .cto-where { margin-top: 52px; }
  .cto-ai, .dark-panel { padding: 32px 24px; }
  .culture-note { padding: 24px 22px; }
}

/* ─────────────── Our Team ─────────────── */
.team-intro { max-width: 720px; margin-bottom: 56px; }
.team-intro h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
}
.team-intro .muted { font-size: 16px; line-height: 1.7; }

.team-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin-top: 32px;
}
.team-stats li { display: flex; align-items: baseline; gap: 9px; }
.team-stats strong {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.team-stats span { font-size: 14px; color: var(--ink-soft); }

.team-group + .team-group { margin-top: 56px; }
.team-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.team-count {
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--green-ink);
  background: #E3F2EC;
  border-radius: 999px;
  padding: 3px 9px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 40px 32px;
}
.member-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;      /* keeps real headshots from distorting */
  display: block;
  margin-bottom: 18px;
  background: var(--panel);
}
.member h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;
}
.member-loc {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 12px;
}
.member-bio { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 720px) {
  .team-intro { margin-bottom: 40px; }
  .team-group + .team-group { margin-top: 44px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-stats { gap: 12px 32px; }
}

/* ─────────────── Booking (Calendly) ─────────────── */
.booking {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.booking-aside h2 { font-size: 20px; font-weight: 700; margin-bottom: 22px; }
/* nowrap keeps the address whole on its line — it needs 170px and the
   narrowest container it sits in is ~272px, so it always fits */
.booking-mail { color: var(--green-ink); font-weight: 500; white-space: nowrap; }
.booking-mail:hover { text-decoration: underline; }

/* numbered "how it works" list in the sidebar */
.how-list { display: grid; gap: 22px; margin-bottom: 26px; }
.how-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
}
.how-num {
  grid-row: 1 / span 2;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
}
.how-list strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.how-list .muted { font-size: 13.5px; line-height: 1.55; }

.booking-main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* ---- progress stepper ---- */
.stepper {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.stepper-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.stepper-item + .stepper-item { border-left: 1px solid var(--line); }
.stepper-num {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #DDE1E8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.stepper-item.is-current { color: var(--ink); background: #fff; }
.stepper-item.is-current .stepper-num { background: var(--green); }
.stepper-item.is-done .stepper-num { background: var(--green-ink); }
.stepper-item.is-done .stepper-num::after { content: "✓"; font-size: 12px; }
.stepper-item.is-done .stepper-num { font-size: 0; }

/* ---- step 1: the form ---- */
#step-details { padding: 30px 32px 34px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.req { color: var(--pink); }
.optional { color: var(--ink-soft); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5468' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.field [aria-invalid="true"] { border-color: var(--pink); }
.field [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent);
}
.field-error { color: var(--pink); font-size: 13px; }

.form-note { color: var(--ink-soft); font-size: 13px; margin: 20px 0 22px; }

/* ---- step 2: summary above the calendar ---- */
.booking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.summary-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.summary-meta { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.summary-edit {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  color: var(--green-ink);
}
.summary-edit:hover { text-decoration: underline; }
/* Opening height only. booking.js replaces this with an inline height as
   soon as Calendly reports its content height, so the embed never scrolls
   internally. This value is what shows for the moment between the iframe
   appearing and its first page_height message, so it wants to be close to
   the real thing rather than merely safe: too short and the box visibly
   jumps taller, too tall and it collapses. The date picker reports 891px.
   See the note in booking.js. */
.calendly-inline-widget {
  min-width: 320px;
  height: 880px;
  transition: height .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .calendly-inline-widget { transition: none; }
}

.booking-noscript { padding: 48px 32px; text-align: center; color: var(--ink-soft); }
.booking-noscript p + p { margin-top: 20px; }

.booking-fallback {
  border-top: 1px solid var(--line);
  padding: 16px 24px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.booking-fallback a { color: var(--green-ink); font-weight: 500; }
.booking-fallback a:hover { text-decoration: underline; }

@media (max-width: 940px) {
  .booking { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  /* No height override here any more. Calendly's mobile layout stacks and
     is taller, but it reports that height itself and booking.js applies
     it, so a hand-guessed figure would only govern the first moment and
     then be replaced. */
  .field-grid { grid-template-columns: 1fr; }
  #step-details { padding: 24px 20px 28px; }
  .stepper-item { padding: 14px 16px; font-size: 13px; gap: 8px; }
  .stepper-label { font-size: 13px; }
  .booking-summary { padding: 16px 20px; }
}

/* ─────────────── Footer ─────────────── */
.site-footer {
  background: var(--navy);
  color: #C3CADB;
  padding: 60px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 40px;
}
.footer-brand p { font-size: 14px; margin-top: 18px; max-width: 280px; }
.logo-invert { color: #fff; }
.footer-col h4 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color .15s ease; }
.footer-col a:hover { color: var(--green); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
}
.footer-bottom a:hover { color: var(--green); }

/* The scroll-reveal rules that lived here are gone — see the note in
   script.js. Nothing in this stylesheet sets content to opacity:0 any more,
   so no page can render blank waiting for JavaScript to un-hide it. */

/* ─────────────── Responsive ─────────────── */
/* The nav collapses to the menu button at 1050px. Measured: the logo, SIX
   nav items and the Let's Talk button need 992px of viewport on one row, so
   this leaves the same ~58px margin the five-item version had at 980px.
   Re-measure if items are added or removed — the point is to collapse just
   before the row would collide, not well before it.

   Adding About is what moved this. At the old 980px there was a 12px band,
   981 to 991, where the nav was still shown but no longer fitted: "Ask the
   CTO", "Spike It!" and "Juicy Ventures" each broke onto two lines and the
   header grew to a ragged double row. Nothing overflowed, so it did not
   show up as a layout error — only as an ugly header at one narrow range of
   desktop widths. Measure with the items forced onto one line (or at a wide
   viewport); at a width where they are already wrapping, the reported item
   widths are the wrapped ones and the row looks like it fits. */
@media (max-width: 1050px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
/* script.js only toggles [hidden] on the panel and has no resize handler, so a
   menu left open while the window grows past the breakpoint stranded it: the
   hamburger vanished with no way to close the panel it had opened. */
@media (min-width: 981px) {
  .mobile-nav { display: none; }
}

@media (max-width: 1080px) {
  .journey { grid-template-columns: 1fr; gap: 30px; }
  .journey-intro .muted, .why-intro .muted { max-width: none; }
  .why { grid-template-columns: 1fr; gap: 32px; }
}

/* ─────────── Narrow: the carousel panels ───────────
   Three separate problems, all only visible once the slides carry
   backgrounds.

   1. The 56px top padding lives on .hero, OUTSIDE the slides, so the
      mint, indigo and sand grounds began 56px below the header and left
      a white band above every tinted panel. The padding moves onto the
      slide, where it becomes space inside the colour instead of a gap
      above it. Scoped to .hero-carousel: .hero is the hero on every
      other page too, and those have no slides to move it to.

   2. The track stretches each slide to the tallest, and the grid fills
      that height with its rows centred. So each panel's copy floated to
      a different place depending on how tall its own content was: the
      first element sat 38px down on one panel, 0px on another, 23px on
      a third. align-content:start packs the rows to the top, which is
      what makes the five agree. It is align-CONTENT, not align-items:
      the rows are what is being distributed in the leftover space.

   3. Even top-aligned, the titles still disagreed, because some
      eyebrows wrap to two lines at this width and some do not. Giving
      the eyebrow the height of two lines reserves the same block on
      every panel, so the four offer titles start level.

      What is aligned is the FIRST LINE OF TEXT, not the title. The
      original Juicy Brains slide has no eyebrow, and reserving the
      eyebrow's block on it so its <h1> lined up with the other titles
      only bought a 54px hole under the header with nothing in it. Its
      heading now starts where the others' eyebrows start, which is
      what reads as aligned. */
@media (max-width: 940px) {
  .hero-carousel { padding-top: 0; }
  .hero-carousel .hero-slide { padding-top: 40px; }
  .hero-carousel.is-live .hero-slide > .hero-grid { align-content: start; }

  /* two 18px lines, plus the eyebrow's own 18px margin-bottom */
  .hero-carousel .hero-slide .eyebrow { min-height: 36px; }
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy h1 br, .lede br { display: none; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .code-note { position: static; margin-top: 4px; text-align: right; }
  .cards { grid-template-columns: 1fr; }
  .cta-panel { grid-template-columns: 1fr; gap: 44px; padding: 48px 40px; }
  .cta-copy .muted { max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .section { padding: 44px 0; }
  .panel { padding: 32px 24px; }
  .logos { padding: 28px 24px 32px; }
  /* the 64px column gap forces one logo per line on a phone — tighten it so
     they pair up two by two instead of running down the page */
  .logo-row { gap: 22px 30px; }
  /* Once the steps collapse to a narrow two-up block, the intro sitting
     left-aligned above a centred grid and a centred closing line read as two
     different layouts stacked on each other. Centre the whole module. */
  .journey-intro { text-align: center; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; }
  /* Five steps across two columns leaves the last one alone on its row. Let it
     span the full width so it reads as the end of the sequence rather than an
     orphan sitting under the left-hand column. Its hand-placed <br> was sized
     for a narrow column, so drop it and let the line run — the markup carries
     a trailing space before the <br>, so the words stay apart. */
  .steps .step:last-child { grid-column: 1 / -1; }
  .steps .step:last-child p br { display: none; }
  .step + .step::before { display: none; }
  /* The rail carries 60px of vertical separation on desktop (its own height
     plus margins). Hiding it on mobile left the closing paragraph sitting
     directly under the last step with no gap at all, reading as one block. */
  .rail { display: none; }
  .journey-foot { margin-top: 30px; }
  .journey-foot br { display: none; }
  /* Centred in both columns, and the intro above them with it, so the module
     reads as one block — same treatment as the journey panel. The padding
     stays symmetric so the content sits on the true centre of its half: the
     old rule zeroed padding-left on the odd items, which pinned the left
     column flush to the edge and made the pair read as left-aligned however
     the text itself was set. */
  .why-intro { text-align: center; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .why-item { padding: 0 18px; text-align: center; }
  .why-item:nth-child(odd) { border-left: 0; }
  .cta-panel { padding: 36px 24px; gap: 34px; }

  /* ---- Footer, narrow ----
     Stacked in one column this ran to ~775px — most of a phone screen for
     eight links. The two three-item groups pair up instead, and the brand
     becomes a centred crown above them: the stacked lockup centres its mark
     over the wordmark, so left-aligned at full width the dot burst looked
     adrift rather than deliberate. */
  .site-footer { padding: 44px 0 24px; }

  /* Everything is centred on one axis — brand, columns, bottom bar. The two
     columns size to their content and the pair is centred as a unit: at a
     full 1fr each they drifted to the outer edges with a gap down the
     middle, which read as two separate blocks rather than one group. */
  .footer-grid {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 30px 44px;
    padding-bottom: 30px;
  }
  .footer-col { text-align: center; }
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .footer-brand .logo-stacked { gap: 14px; }
  .footer-brand .logo-mark { width: 54px; height: 54px; }

  /* "Get in touch" spans both columns — the email address will not fit beside
     anything — and lays its two links out side by side, centred. */
  /* "Get in touch" spans both columns so the email address has the width it
     needs. Its two links stack — one per line, like every other column —
     rather than sitting side by side, which read as one run-on string and
     was a few pixels from overflowing at 320px anyway. */
  .footer-col:last-child { grid-column: 1 / -1; }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: 10px 18px;
  }
}

@media (max-width: 460px) {
  .logo-mark { width: 34px; height: 34px; }
  .logo-word { font-size: 16px; letter-spacing: .12em; text-indent: .12em; }

  /* The journey steps and the why-grid deliberately stay two-up here rather
     than collapsing to one column. Stacked, five steps and four reasons turned
     both sections into a long run of mostly-empty rows that read as filler.
     Tightening the horizontal padding buys back the width two columns need. */
  .step { padding: 0 3px; }
  .why-item { padding: 0 11px; }

  .hero-actions { gap: 16px; }
}

/* ─────────────── Cookie consent bar ─────────────── */

/* A ghost pill for secondary choices. Reject must be as easy to press
   as Accept, so it is the same size and shape, only quieter. */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid #C7CDDA;
}
.btn-outline:hover {
  background: var(--panel);
  border-color: #AEB6C8;
  transform: translateY(-2px);
}

/* Deliberately not animated.

   A slide-in reads nicely but every version of it is fail-hidden: the
   bar's visibility ends up depending on an animation or transition
   actually running. In a background tab the clock does not advance, so
   the element sits pinned at its first keyframe - off screen, but
   unhidden and still in the tab order. A transition has the same problem,
   and `animation-fill-mode: both` makes it worse by back-filling the
   start state while merely pending.

   A consent notice is the one piece of UI that must never fail to
   appear, so it just appears. `hidden` does the hiding. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;              /* above the sticky header's 50 */
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(11, 21, 51, .12);
}

.consent-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.consent-copy {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.consent-link {
  color: var(--green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.consent-link:hover { color: var(--green); }

.consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .consent-actions > .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ─────────────── Privacy page ─────────────── */

.prose { max-width: 720px; }
.prose h2 {
  font-size: 24px;
  margin: 44px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li {
  color: var(--ink-soft);
  line-height: 1.7;
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a {
  color: var(--green-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--green); }

/* the live "what you chose" box */
.consent-state {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.consent-state p { margin: 0 0 16px; }
.consent-state p:last-child { margin-bottom: 0; }
.consent-state strong { color: var(--ink); }

/* ─────────────── Offer pages (/offers/*) ─────────────── */

/* Conversion pages, not service descriptions: one offer, one decision,
   the price visible, and a single call to action repeated at the end. */

.offer-head { padding: 64px 0 0; }
.offer-head h1 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 18px;
  max-width: 17ch;
}
.offer-head .lede { max-width: 620px; font-size: 17px; line-height: 1.6; }

/* price, duration and format, stated up front rather than on request */
.offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 42px;
  margin: 30px 0 32px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offer-meta div { padding: 4px 0; }
.offer-meta dt {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.offer-meta dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

/* An unmissable placeholder. A plausible-looking number here could ship by
   accident and misprice the offer, so it is deliberately not a number. */
.price-tbc {
  display: inline-block;
  font-size: 14px;
  padding: 3px 12px;
  border-radius: 6px;
  background: #FFF4D6;
  border: 1px dashed #C79B1E;
  color: #7A5B00;
}

.offer-section { padding: 46px 0; border-top: 1px solid var(--line); }
.offer-section:first-of-type { border-top: none; }
.offer-section h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 16px;
}
.offer-section h3 { font-size: 17px; margin: 26px 0 10px; }
.offer-section p { max-width: 68ch; }
.offer-section > .shell > p + ul { margin-top: 18px; }

.offer-lead { font-size: 17px; color: var(--ink); margin-bottom: 22px; }

/* who it is for, and who it is not. Saying no is what makes the yes land. */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 24px;
}
.fit-col {
  padding: 28px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.fit-col.is-yes { background: rgba(0, 155, 106, .045); border-color: rgba(0, 155, 106, .3); }
.fit-col h3 { margin: 0 0 14px; font-size: 16px; }
.fit-col ul { display: grid; gap: 10px; }
.fit-col li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.fit-col.is-yes li { color: var(--ink); }

/* a plain table for scorecard bands and comparisons */
.data-table { width: 100%; border-collapse: collapse; margin: 22px 0 8px; }
.data-table th {
  text-align: left;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
}
.data-table th:first-child { border-radius: 10px 0 0 0; }
.data-table th:last-child  { border-radius: 0 10px 0 0; }
.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-soft);
  vertical-align: top;
}
.data-table tr td:first-child { color: var(--ink); font-weight: 500; }

.faq { margin-top: 10px; max-width: 760px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 34px 16px 0;
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--green-ink);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.faq details p {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* where to go next, so a page that is not the right fit still routes */
.offer-next { padding: 10px 0 70px; }
.offer-next h2 { font-size: 19px; margin-bottom: 18px; }
.next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.next-card {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.next-card:hover { border-color: var(--green); transform: translateY(-2px); }
.next-card strong { display: block; font-family: var(--font-head); margin-bottom: 6px; }
.next-card span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ── Scorecard landing pages ──
   Deliberately stripped: no primary nav, nothing competing with the one
   action. The logo still goes home, because a dead end is not focus. */
.lp-header { padding: 26px 0; border-bottom: 1px solid var(--line); }
.lp-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-back { font-size: 14px; color: var(--ink-soft); }
.lp-back:hover { color: var(--green-ink); }

.lp-foot {
  padding: 34px 0 60px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.lp-foot a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
  .fit-grid, .next-grid { grid-template-columns: 1fr; }
  .offer-meta { gap: 0 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   Ask the CTO - page colour
   ═══════════════════════════════════════════════════════════════
   Everything here is scoped to `.cto-page`. The grids inside
   (.model, .reason-grid, .lead-grid, .where-grid, .chip-list,
   .culture-note, .page-head) are SHARED with Spike It!, Method.AI
   and 404, so an unscoped rule would restyle three pages nobody
   asked about. The `.cto-*` section wrappers are unique to this
   page, but the scope is kept on `.cto-page` throughout so the
   intent is obvious rather than accidental.

   The page keeps its colour in per-card accents and cycled marks.
   No body text changes colour: the accents are rules, dots and
   numbers, so contrast is untouched.

   The grounds are gone, by request: the page head carried a green
   and blue wash and "Why founders choose us" was a tinted panel.
   Both are white now. */

/* ---- the hero: copy left, film right ----
   Mirrors .method-hero, which is the two-column page head on this
   site, so the two pages open the same way. .page-head is padding
   72px 0 0, so without a bottom the film would sit flush against the
   section below; .method-hero solves that identically. */
.cto-hero { padding-bottom: 8px; }
.cto-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
}
/* .page-head caps .muted at 580px for a full-width column; in half the
   width that cap does nothing, so the measure comes from the column */
.cto-hero-copy .muted { max-width: 46ch; }
.cto-hero-media { min-width: 0; }
/* .film-media video is aspect-ratio 16/9 with object-fit:cover, which is
   right for the Method.AI film. This clip is 864x496, or 1.742, so that
   box cropped 2% off its height. Matching the real ratio keeps the
   reserved box - which is what stops the page jumping before metadata
   arrives - without trimming the frame. */
.cto-hero-media .film-media video { aspect-ratio: 864 / 496; }

@media (max-width: 940px) {
  .cto-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cto-hero-copy .muted { max-width: 60ch; }
}

/* ---- the five engagement models, each with its own accent ----
   Numbers were mono blue on a white card with a grey border; all
   five looked identical. A top rule and a filled number chip give
   the row some rhythm. Five cards, four brand hues, so the cycle
   repeats once - at this size they are never confusable. */
.cto-page .cto-models .model {
  border-top: 3px solid var(--m-accent, var(--green));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cto-page .cto-models .model:nth-child(4n+1) { --m-accent: var(--green);  --m-ink: var(--green-ink); }
.cto-page .cto-models .model:nth-child(4n+2) { --m-accent: var(--blue);   --m-ink: var(--blue); }
.cto-page .cto-models .model:nth-child(4n+3) { --m-accent: var(--purple); --m-ink: var(--purple); }
.cto-page .cto-models .model:nth-child(4n+4) { --m-accent: var(--pink);   --m-ink: var(--pink); }
.cto-page .cto-models .model:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--m-accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--m-accent) 42%, var(--line));
  border-top-color: var(--m-accent);
}
/* the number becomes a filled chip: at 12px a coloured numeral is a speck */
.cto-page .cto-models .model-num {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  /* --m-ink, not --m-accent: vibrant green carries white at about 3:1,
     which fails for the numeral. The deeper cut clears it. */
  background: var(--m-ink);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cto-page .cto-models .model-best strong { color: var(--m-ink); }

/* .cto-why was a tinted panel breaking the white run. Removed with the
   rest of the grounds; the section keeps its shared .page-section
   spacing and its dots below. */

/* The bullet dots cycled rather than all green. Counted on the <li>, not
   the <h4>: each h4 is the only one inside its own li, so every h4 is
   :nth-of-type(1) and an h4-based cycle paints them all the same colour.
   That was the first attempt and it silently produced six green dots. */
.cto-page .cto-why .reason-grid > li:nth-of-type(4n+1) h4::before { background: var(--green); }
.cto-page .cto-why .reason-grid > li:nth-of-type(4n+2) h4::before { background: var(--blue); }
.cto-page .cto-why .reason-grid > li:nth-of-type(4n+3) h4::before { background: var(--purple); }
.cto-page .cto-why .reason-grid > li:nth-of-type(4n+4) h4::before { background: var(--pink); }

/* ---- leading from the front: cycle the rule under each heading ---- */
.cto-page .cto-lead .lead-grid > li:nth-of-type(4n+1) h4::after { background: var(--green); }
.cto-page .cto-lead .lead-grid > li:nth-of-type(4n+2) h4::after { background: var(--blue); }
.cto-page .cto-lead .lead-grid > li:nth-of-type(4n+3) h4::after { background: var(--purple); }
.cto-page .cto-lead .lead-grid > li:nth-of-type(4n+4) h4::after { background: var(--pink); }

/* ---- the chips get a tint, rather than outline-on-white ---- */
/* The chips were tinted to sit on a tinted page. With the grounds gone
   they go back to the shared outline-on-white. */

/* ═══════════════════════════════════════════════════════════════
   Spike It! - page colour
   ═══════════════════════════════════════════════════════════════
   Same treatment as Ask the CTO above, and deliberately so: the two
   are sibling service pages and should read as one family. Scoped to
   `.spike-page` for the same reason - .model, .lead-grid, .where-grid,
   .chip-list, .pillar-grid and .page-head are shared with Ask the CTO,
   Method.AI and 404.

   The page ran to a long flat white with one navy block in the upper
   half. What follows adds a tinted opening, per-card accents, a tinted
   panel low down where the white run was longest, and cycled accent
   marks. No body text changes colour: every accent is a rule, a chip,
   a number or a ground, so contrast is untouched.

   The opening wash is violet and blue rather than the magenta of this
   page's own eyebrows. A magenta ground was tried first and reads far
   softer than the page's content warrants; the magenta stays as the
   small accents it already was. */

/* The page head carried a violet and blue wash here. It is white now,
   by request. The page keeps its colour in the accents below - card
   rules, number chips, heading marks - rather than in any ground. */

/* ---- the hero: copy left, artwork right ----
   Mirrors .method-hero, which is the established two-column page head
   on this site, so the two pages open the same way. Scoped to the
   .spike-hero modifier for the same reason .method-hero is.

   The artwork is near square (1312x1199), where Method.AI's film is
   16:9, so the right column is the narrower of the two and capped at
   460px. Left to take half of a 1180px shell it stands tall enough to
   turn the page head into a full screen of masthead before a word of
   the page proper. */
/* .page-head is padding 72px 0 0, so with the tint gone the artwork
   would sit flush against the section below. .method-hero solves this
   the same way. */
.spike-hero { padding-bottom: 8px; }
.spike-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
}
/* .page-head caps .muted at 580px for a full-width column; in half the
   width that cap does nothing, so the measure comes from the column */
.spike-hero-copy .muted { max-width: 46ch; }

.spike-hero-media { min-width: 0; justify-self: end; }
.spike-hero-media img {
  display: block;
  width: 100%; height: auto;
  max-width: 460px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(11, 21, 51, .16);
}

@media (max-width: 940px) {
  .spike-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .spike-hero-copy .muted { max-width: 60ch; }
  /* centred once stacked, so it does not hang off one edge */
  .spike-hero-media { justify-self: center; }
}

/* ---- the five engagement shapes, each with its own accent ----
   Cycle starts on magenta, this page's own accent, then runs through
   the rest of the brand set. Five cards and four hues, so the first
   repeats on the last - far enough apart to read as rhythm.

   --s-ink, not --s-accent, for anything carrying white or small text.
   The vibrant green is 3.56 on white and fails outright; --green-ink
   clears it at 5.75. Blue, purple and magenta pass as they are. */
.spike-page .spike-models .model {
  border-top: 3px solid var(--s-accent, var(--pink));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.spike-page .spike-models .model:nth-child(4n+1) { --s-accent: var(--pink);   --s-ink: var(--pink); }
.spike-page .spike-models .model:nth-child(4n+2) { --s-accent: var(--purple); --s-ink: var(--purple); }
.spike-page .spike-models .model:nth-child(4n+3) { --s-accent: var(--blue);   --s-ink: var(--blue); }
.spike-page .spike-models .model:nth-child(4n+4) { --s-accent: var(--green);  --s-ink: var(--green-ink); }
.spike-page .spike-models .model:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--s-accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--s-accent) 42%, var(--line));
  border-top-color: var(--s-accent);
}
/* the number becomes a filled chip: at 12px a coloured numeral is a speck */
.spike-page .spike-models .model-num {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--s-ink);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.spike-page .spike-models .model-best strong { color: var(--s-ink); }

/* ---- cycle the rule under each "what you leave with" heading ----
   Counted on the <li>, not the <h4>. Each h4 is the only one inside
   its own li, so every h4 is :nth-of-type(1) and an h4-based cycle
   paints them all one colour. That mistake was made once already on
   the Ask the CTO page and produced six identical dots. */
.spike-page .spike-leave .lead-grid > li:nth-of-type(4n+1) h4::after { background: var(--pink); }
.spike-page .spike-leave .lead-grid > li:nth-of-type(4n+2) h4::after { background: var(--purple); }
.spike-page .spike-leave .lead-grid > li:nth-of-type(4n+3) h4::after { background: var(--blue); }
.spike-page .spike-leave .lead-grid > li:nth-of-type(4n+4) h4::after { background: var(--green); }

/* "Shaped around you" was a tinted panel, breaking the long white run
   below the .dark-panel. Removed with the rest of the grounds. The
   .spike-shape hook stays in the markup so putting it back is a CSS
   change alone, and the chips go back to the shared outline-on-white:
   the tinted chip colours only existed to sit on that panel. */

/* ---- the three opening steps, numbered in the cycle ---- */
.spike-page .spike-start .pillar-grid > li:nth-of-type(3n+1) .pillar-num { color: var(--pink); }
.spike-page .spike-start .pillar-grid > li:nth-of-type(3n+2) .pillar-num { color: var(--purple); }
.spike-page .spike-start .pillar-grid > li:nth-of-type(3n+3) .pillar-num { color: var(--blue); }

/* ─────────────── Method.AI hero ───────────────
   Two columns, copy left and film right. Everything is scoped to the
   .method-hero modifier: .page-head is shared with eight other pages
   and must not move.

   The film was previously a full-width block under the title at 1132px
   across, which made it the loudest element on the page. In the right
   column it lands at roughly half that. */
.method-hero { padding-bottom: 8px; }
.method-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
}
/* .page-head caps .muted at 580px for a full-width column; in half the
   width that cap does nothing, so the measure comes from the column */
.method-hero-copy .muted { max-width: 46ch; }

.method-hero-media { margin: 0; min-width: 0; }

.film-media {
  border-radius: var(--radius-lg);
  overflow: hidden;              /* clips the video to the rounded corner */
  background: var(--navy);       /* behind the poster while it loads */
  box-shadow: 0 20px 48px rgba(11, 21, 51, .16);
  line-height: 0;                /* kills the inline-element gap under the video */
}
/* aspect-ratio rather than a height: the box reserves its space from the
   first paint, so nothing below jumps when the video's dimensions land.
   The width/height attributes do the same for browsers that get there
   first. */
.film-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.film-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* One column below the nav breakpoint. Copy first, then the film, which
   is the order it is written in, so nothing needs reordering. */
@media (max-width: 940px) {
  .method-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .method-hero-copy .muted { max-width: 60ch; }
}
@media (max-width: 720px) {
  .film-media { border-radius: var(--radius); }
}