/* =========================================================
   GROWIS — Design System
   Palette: warm cream + white, ink near-black, Growis lime accent
   ========================================================= */

/* The fonts used to be pulled in with @import from inside this file, which
   makes the browser fetch the HTML, then this stylesheet, then the font CSS,
   then the font files - four round trips in a line before any text can be
   painted, and the hero paragraph was the Largest Contentful Paint. They are
   enqueued in functions.php now, with a preconnect, so the font CSS is
   requested at the same time as this file instead of after it. */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — the "two lights" */
  --canvas:        #F5F2EA;   /* warm cream — page ground */
  --canvas-soft:   #FAF8F3;   /* near-white — nav, raised areas */
  --canvas-deep:   #EBE6DA;   /* deeper cream — alternating bands */
  --surface:       #FFFFFF;   /* white — cards */

  /* Ink */
  --ink:           #14121C;   /* headings, body, primary buttons */
  --ink-2:         #3A3742;   /* secondary text */
  --ink-muted:     #6B6675;   /* captions, meta */
  --hairline:      rgba(20,18,28,.10);
  --hairline-2:    rgba(20,18,28,.06);

  /* Accent — refined from the existing Growis lime */
  --lime:          #C4F042;
  --lime-deep:     #A8DB1E;
  --lime-ink:      #46660A;   /* lime family, safe for text on cream */
  --lime-wash:     rgba(196,240,66,.18);

  /* Dark band */
  --night:         #14121C;
  --night-2:       #1E1B29;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --band: clamp(72px, 11vw, 152px);
  --maxw: 1280px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: .98; letter-spacing: -.03em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* Dotted paper texture — the signature ground */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(var(--hairline-2) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; position: relative; z-index: 1; }
.band { padding-block: var(--band); position: relative; }
.band--deep { background: var(--canvas-deep); }
.band--night { background: var(--night); color: #fff; }

/* ---------- Type scale ---------- */
.display   { font-size: clamp(2.7rem, 8vw, 6.4rem); }
.h2        { font-size: clamp(2rem, 5vw, 4rem); }
.h3        { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.lede      { font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--ink-2); max-width: 62ch; line-height: 1.62; }
.muted     { color: var(--ink-muted); }

/* Eyebrow — mono label with a lime dot */
.eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime-deep); flex: none;
  /* keep the dot on the first line when the label wraps on small screens */
  align-self: flex-start; margin-top: .42em;
}
.band--night .eyebrow { color: rgba(255,255,255,.6); }

/* Section number marker */
.sec-no {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em;
  color: var(--ink-muted); border: 1px solid var(--hairline);
  padding: 5px 11px; border-radius: var(--r-pill);
}

/* ---------- Signature: highlighter swipe ---------- */
/* A lime marker stroke that draws itself across a word on scroll */
.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.mark::after {
  content: '';
  position: absolute; left: -.08em; right: -.08em; bottom: .06em;
  height: .38em;
  background: var(--lime);
  border-radius: 3px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease);
  z-index: -1;
}
.is-in .mark::after, .mark.is-in::after { transform: scaleX(1); }

/* Outline word — hollow display type */
.hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.band--night .hollow { -webkit-text-stroke-color: rgba(255,255,255,.5); }

/* The hero's middle word. A hollow outline like .hollow, plus a band of lime
   that crosses it once as the headline comes into view. The stroke is painted
   over the background, so background-clip:text can colour the letter body
   while the outline stays exactly as it is.

   inline-block, not inline: an inline box fragments its background area per
   line box, and the 300% background-size then has nothing stable to resolve
   against, so no lime is painted at all.

   The positive tracking is deliberate. The stroke is drawn outside each glyph,
   so outline capitals need room that filled ones do not. */
.hero__with {
  display: inline-block;
  letter-spacing: .03em;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  background-image: linear-gradient(100deg,
    transparent 0 38%, var(--lime) 46%, var(--lime) 54%, transparent 62% 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  /* linear, because a light crossing a word should travel at one speed. An
     eased curve spends its time at the two ends, where the band is outside
     the word and nothing is visible. */
  /* .25s, not .5s: the theme reveals .mark on its own observer entry, which
     lands earlier than the title's. At .5s the light only began after the
     marker had finished and read as a separate event; at .25s the two overlap
     the way they do in the approved design. */
  transition: background-position 1.6s linear .25s;
}
.hero__title.is-in .hero__with { background-position: 100% 0; }
.tint { color: var(--ink-muted); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .35s var(--ease);
  will-change: transform;
}
.btn__ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: transform .45s var(--ease), background .3s;
}
.btn svg { width: 13px; height: 13px; }

/* Primary — ink fill, lime hover */
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary .btn__ic { background: rgba(255,255,255,.16); }
.btn--primary:hover { background: var(--lime); color: var(--ink); box-shadow: 0 14px 34px -12px rgba(168,219,30,.75); }
.btn--primary:hover .btn__ic { background: rgba(20,18,28,.14); transform: rotate(45deg); }

/* Lime — the loud one */
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime .btn__ic { background: rgba(20,18,28,.13); }
.btn--lime:hover { background: var(--ink); color: #fff; box-shadow: 0 14px 34px -12px rgba(20,18,28,.5); }
.btn--lime:hover .btn__ic { background: rgba(255,255,255,.18); transform: rotate(45deg); }

/* Ghost — hairline on cream */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn--ghost .btn__ic { background: var(--hairline-2); }
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px transparent, 0 10px 26px -14px rgba(20,18,28,.4); }
.btn--ghost:hover .btn__ic { transform: rotate(45deg); }

.band--night .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.band--night .btn--ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- Promo band ----------
   One number governs the whole thing. --pb-h is the band's height, and it is
   also what the shell moves down by and what the page is padded by; keeping the
   three as one value is what stops them drifting apart at a breakpoint.

   The band lives inside .nav-shell so the pill's hide-on-scroll carries it too,
   and breaks back out to the full width with a negative margin, since the shell
   is inset by the page gutter. */
:root { --pb-h: 0px; }
body.has-pb { --pb-h: 40px; padding-top: var(--pb-h); }
body.has-pb .nav-shell { top: 0; }
body.has-pb .nav { margin-top: 14px; }

.pb {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--pb-h); margin-inline: calc(var(--gutter) * -1);
  padding-inline: clamp(14px, 4vw, 28px);
  background: var(--night); color: #F2F0EA;
  font-size: clamp(.82rem, .95vw, .9rem);
}
.pb__t {
  margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0;
  /* One line, always: the height above is what the page padding is built on. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb__sm { display: none; }
.pb__a {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  color: var(--lime); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(196,240,66,.4);
  transition: text-decoration-color .2s ease;
}
.pb__a:hover, .pb__a:focus-visible { text-decoration-color: currentColor; }
.pb__a svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb__x {
  position: absolute; right: max(10px, calc(var(--gutter) - 10px));
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  color: rgba(242,240,234,.6); transition: color .2s, background .2s;
}
.pb__x:hover, .pb__x:focus-visible { color: #F2F0EA; background: rgba(255,255,255,.1); }
.pb__x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

@media (max-width: 760px) {
  /* Shorter on a phone, and the short wording takes over so nothing wraps. */
  body.has-pb { --pb-h: 38px; }
  .pb { padding-inline: 12px 40px; }
  .pb__lg { display: none; }
  .pb__sm { display: inline; }
}

/* ---------- Nav ---------- */
.nav-shell {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 90; padding-inline: var(--gutter);
  transition: transform .34s var(--ease);
}
/* Scrolling down, the bar gets out of the way — a fixed bar over a dark band
   makes the line beneath it unreadable. Scrolling up brings it straight back,
   so the menu and the call button are never more than a flick away. */
.nav-shell.is-away { transform: translateY(calc(-100% - 20px)); }
@media (prefers-reduced-motion: reduce) { .nav-shell { transition: none; } }
.nav {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
  padding: 11px 11px 11px 24px;
  background: rgba(250,248,243,.93);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(20,18,28,.04), 0 16px 40px -24px rgba(20,18,28,.28);
  transition: box-shadow .4s var(--ease), background .4s;
}
.nav.is-stuck { box-shadow: 0 2px 8px rgba(20,18,28,.06), 0 22px 50px -26px rgba(20,18,28,.4); }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -.035em; }
.brand span { color: var(--lime-deep); }
.nav__links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* wp_nav_menu wraps each item in an <li>; keep them transparent to the flex row */
.nav__links li { list-style: none; display: flex; }
.nav__links a {
  padding: 9px 15px; border-radius: var(--r-pill); font-size: .92rem; font-weight: 500;
  color: var(--ink-2); transition: background .25s, color .25s;
}
.nav__links a:hover,
.nav__links a[aria-current],
.nav__links .current-menu-item > a { background: var(--hairline-2); color: var(--ink); }

/* WordPress accessibility helper */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; clip: auto; white-space: normal;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-weight: 600;
}
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--hairline-2); }
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 3.5px auto; transition: transform .3s var(--ease); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(120px, 15vw, 178px); padding-bottom: var(--band); }
.hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; }

/* The wall sits between the lede and the buttons in the markup, so a stacked
   layout reads headline, promise, then the work - which is where a phone
   wants it, rather than buried under the trust strip.

   On a desktop it is pinned back into the second column and spans both text
   rows, so the layout is exactly what it was. The two text blocks meet at the
   row boundary (one aligned to its end, one to its start) with no row gap
   between them, which keeps the lede and the buttons as close together as
   they were when they shared one box. */
.hero__grid--split { grid-template-areas: "lead wall" "foot wall"; row-gap: 0; }
.hero__grid--split > .rv:first-child { grid-area: lead; align-self: end; }
.hero__grid--split > .wall { grid-area: wall; align-self: center; }
.hero__grid--split > .hero__foot { grid-area: foot; align-self: start; }

/* grid children must be allowed to shrink, or long display words blow the track out */
.hero__grid > * { min-width: 0; }
/* hero headline is column-scoped, so it sizes off the column not the page */
.hero__title { margin: 22px 0 26px; font-size: clamp(2.3rem, 4.6vw, 4.15rem); }
/* As large as the hero's original height allows, and no larger.

   The wall sets the hero's height, and what is left after the eyebrow, lede,
   buttons and trust strip is the budget for three lines of type. That budget
   does not scale with the viewport: the wall shrinks with the measure while
   the content under the headline stays roughly the same height, so the room
   for type runs out much faster than the page narrows.

   A plain Nvw is linear and cannot follow that, and at 10.3vw the headline
   overtook the wall below about 1366px and made the section up to 78px taller
   than it is on the live site. calc() with a negative term gives the steeper
   line the budget actually follows, measured across 1045-1425px. */
.hero__title.hero__title--grow {
  /* GROW on its own row, WITH and US together on the next - the phone
     composition, now used at every width. Two rows instead of three frees
     enough height that the limit becomes the width of WITH US rather than
     the hero's height, so the type can be far larger and still fit. */
  display: flex; flex-wrap: wrap; column-gap: .24em;
  font-size: clamp(2.3rem, 10.9vw, 10rem);
  line-height: .84;
}
.hero__title--grow .line:first-child { flex: 0 0 100%; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Trust strip under hero */
.hero__trust { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--hairline); }

/* Video wall — masonry of client work */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wall__col { display: grid; gap: 12px; }
.wall__col:nth-child(2) { transform: translateY(26px); }
.wall__col:nth-child(3) { transform: translateY(-14px); }
.tile {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--canvas-deep); aspect-ratio: 9/14;
  box-shadow: 0 2px 6px rgba(20,18,28,.05), 0 18px 40px -26px rgba(20,18,28,.5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile:nth-child(even) { aspect-ratio: 9/11; }
.tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 6px 14px rgba(20,18,28,.07), 0 28px 56px -28px rgba(20,18,28,.6); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile__tag {
  position: absolute; left: 9px; bottom: 9px; z-index: 2;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(250,248,243,.92); color: var(--ink);
  padding: 4px 9px; border-radius: var(--r-pill);
  /* One line, always. A two-word service like "Influencer Marketing" used to
     wrap on a phone and the pill grew into a block covering the picture. If a
     label is ever too long for the tile it is trimmed rather than wrapped,
     because a tidy cut reads better than a stack. */
  white-space: nowrap; max-width: calc(100% - 18px);
  overflow: hidden; text-overflow: ellipsis;
}
/* Placeholder shimmer until real client media is dropped in */
.tile--ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); padding: 12px;
  background: linear-gradient(115deg, var(--canvas-deep) 0%, var(--canvas-soft) 50%, var(--canvas-deep) 100%);
  background-size: 220% 100%;
  animation: shimmer 3.2s var(--ease-soft) infinite;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* ---------- Logo marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.025em;
  color: var(--ink-muted); white-space: nowrap; opacity: .62;
  transition: opacity .3s, color .3s;
}
.marquee__item:hover { opacity: 1; color: var(--ink); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline); }
.stat { background: var(--canvas); padding: 34px 26px; transition: background .35s; }
.stat:hover { background: var(--surface); }
.stat__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 4.4vw, 3.6rem); letter-spacing: -.04em; line-height: 1; }
.stat__n em { font-style: normal; color: var(--lime-deep); }
.stat__l { margin-top: 9px; font-size: .87rem; color: var(--ink-muted); line-height: 1.45; }

/* ---------- Section head ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 54px; flex-wrap: wrap; }
.sec-head__l { max-width: 62ch; }
.sec-head h2 { margin: 16px 0 14px; }

/* ---------- Services: stacking cards ---------- */
.svc { display: grid; gap: 14px; }
.svc__card {
  position: sticky; top: 108px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 44px);
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 44px); align-items: start;
  transition: box-shadow .45s var(--ease), border-color .45s;
  box-shadow: 0 1px 3px rgba(20,18,28,.03);
}
.svc__card:hover { box-shadow: 0 12px 44px -22px rgba(20,18,28,.4); border-color: rgba(20,18,28,.16); }
.svc__no { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-muted); padding-top: 7px; }
.svc__body h3 { margin-bottom: 12px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.svc__tag {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--lime-wash); color: var(--lime-ink);
}
.svc__go {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--canvas); display: grid; place-items: center;
  transition: background .35s, transform .45s var(--ease), color .35s;
}
.svc__card:hover .svc__go { background: var(--lime); transform: rotate(45deg); }
.svc__go svg { width: 17px; height: 17px; }

/* ---------- Work: filterable grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.chip {
  padding: 10px 18px; border-radius: var(--r-pill); font-size: .88rem; font-weight: 500;
  background: transparent; color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  transition: all .3s var(--ease);
}
.chip:hover { background: var(--surface); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }

.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work__item { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.work__item[hidden] { display: none; }
.work__item.is-out { opacity: 0; transform: scale(.94); }

.wcard {
  display: block; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden; height: 100%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.wcard:hover { transform: translateY(-7px); box-shadow: 0 22px 54px -26px rgba(20,18,28,.5); border-color: transparent; }
.wcard__media { position: relative; aspect-ratio: 4/3; background: var(--canvas-deep); overflow: hidden; }
.wcard__media img, .wcard__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.wcard:hover .wcard__media img { transform: scale(1.05); }
.wcard__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(0deg, rgba(20,18,28,.32), transparent 62%);
}
.wcard__play i {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(250,248,243,.94);
  display: grid; place-items: center;
  transition: transform .45s var(--ease), background .3s;
}
.wcard:hover .wcard__play i { transform: scale(1.12); background: var(--lime); }
.wcard__play svg { width: 16px; height: 16px; margin-left: 2px; }
.wcard__body { padding: 20px 22px 24px; }
.wcard__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.wcard__cat { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-ink); background: var(--lime-wash); padding: 4px 9px; border-radius: var(--r-pill); }
.wcard__client { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.wcard h3 { font-size: 1.12rem; line-height: 1.24; letter-spacing: -.02em; }
.wcard__res { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline-2); display: flex; gap: 22px; }
.wcard__res div { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); }
.wcard__res b { display: block; font-family: var(--font-display); font-size: 1.16rem; color: var(--ink); letter-spacing: -.03em; }

/* ---------- Featured case ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 62px); align-items: center; }
.feat__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--night-2); }
.feat__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; }
.feat__metric { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 20px 18px; }
.feat__metric b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.1rem); letter-spacing: -.035em; color: var(--lime); }
.feat__metric span { font-size: .8rem; color: rgba(255,255,255,.62); }

/* ---------- Framework stepper ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1.5px solid var(--hairline); }
.step { padding: 30px 22px 0; border-right: 1px solid var(--hairline); position: relative; cursor: default; }
.step:last-child { border-right: 0; }
.step::before {
  content: ''; position: absolute; top: -1.5px; left: 0; width: 0; height: 1.5px;
  background: var(--lime-deep); transition: width .6s var(--ease);
}
.step:hover::before, .step.is-in::before { width: 100%; }
.step__n { font-family: var(--font-mono); font-size: .7rem; color: var(--lime-ink); letter-spacing: .12em; }
.step h3 { font-size: 1.05rem; margin: 12px 0 9px; letter-spacing: -.02em; }
.step p { font-size: .87rem; color: var(--ink-muted); line-height: 1.55; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.quote:hover { transform: translateY(-5px); box-shadow: 0 18px 44px -26px rgba(20,18,28,.45); }
.quote__mark { font-family: var(--font-display); font-size: 2.6rem; line-height: .6; color: var(--lime-deep); }
.quote p { font-size: .98rem; line-height: 1.62; color: var(--ink-2); flex: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hairline-2); }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: var(--canvas-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink-muted); flex: none; }
.quote__who b { display: block; font-size: .92rem; letter-spacing: -.01em; }
.quote__who span { font-size: .8rem; color: var(--ink-muted); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -.02em; transition: color .3s;
}
.faq__q:hover { color: var(--lime-ink); }
.faq__ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hairline-2); display: grid; place-items: center; flex: none; transition: transform .45s var(--ease), background .3s; }
.faq__item.is-open .faq__ic { transform: rotate(135deg); background: var(--lime); }
.faq__ic svg { width: 13px; height: 13px; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 26px; max-width: 76ch; color: var(--ink-muted); }

/* ---------- Lead form ---------- */
.lead { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.form {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 2px 6px rgba(20,18,28,.03), 0 30px 70px -40px rgba(20,18,28,.5);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: .95rem;
  background: var(--canvas); color: var(--ink);
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  transition: border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime-deep); background: var(--surface); }
.field textarea { resize: vertical; min-height: 92px; }
.form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form__note { margin-top: 14px; font-size: .78rem; color: var(--ink-muted); text-align: center; }

.lead__points { display: grid; gap: 18px; margin-top: 32px; }
.lead__point { display: flex; gap: 14px; align-items: flex-start; }
.lead__point i { width: 26px; height: 26px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; margin-top: 2px; }
.lead__point svg { width: 12px; height: 12px; }
.lead__point b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.lead__point span { font-size: .89rem; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.foot { background: var(--night); color: #fff; padding-top: clamp(56px, 8vw, 96px); padding-bottom: 34px; }
.foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.12); }
/* h3, not h4: these follow an h2 in the page above, and jumping a level is
   the one heading fault every page on the site shared. */
.foot h3 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.foot li { margin-bottom: 11px; }
.foot li a { font-size: .93rem; color: rgba(255,255,255,.78); transition: color .25s, padding-left .3s var(--ease); }
.foot li a:hover { color: var(--lime); padding-left: 5px; }
.foot__bot { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; flex-wrap: wrap; font-size: .84rem; color: rgba(255,255,255,.45); }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }

/* Line-by-line headline mask reveal */
.line > span { transform: translateY(105%); transition: transform .95s var(--ease); }
.is-in .line > span { transform: none; }
.line:nth-child(2) > span { transition-delay: .1s; }
.line:nth-child(3) > span { transition-delay: .2s; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .hero__grid, .feat, .lead { grid-template-columns: 1fr; }
  .work, .quotes { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { border-bottom: 1px solid var(--hairline); padding-bottom: 26px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .svc__card { position: static; }
}
@media (max-width: 700px) {
  .nav__links { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .work, .quotes, .stats, .steps { grid-template-columns: 1fr; }
  .svc__card { grid-template-columns: 1fr; gap: 18px; }
  .svc__go { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .feat__metrics { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .wall__col:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv, .line > span { opacity: 1; transform: none; }
  .mark::after { transform: scaleX(1); }
}

/* Services a case study used, linked back to the pages that sell them */
.case-used { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 34px; }
.case-used__list { display: flex; flex-wrap: wrap; gap: 8px; }
.case-used__list a {
  padding: 9px 16px; border-radius: var(--r-pill); font-size: .88rem; font-weight: 500;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hairline);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.case-used__list a:hover { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); }

/* ---------- Post / page content ---------- */
.prose { font-size: 1.03rem; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink); margin-top: 1.9em; }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ink); margin-top: 1.6em; }
.prose a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--lime-deep); }
.prose blockquote {
  margin-inline: 0; padding: 20px 26px; border-left: 3px solid var(--lime);
  background: var(--canvas-soft); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.08rem; color: var(--ink);
}
.prose img { border-radius: var(--r-md); }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--canvas-deep); padding: 2px 6px; border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.prose th { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* Responsive oEmbed wrapper on case-study pages */
.growis-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; display: block; border: 0; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-numbers {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-grid; place-items: center; border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  transition: all .3s var(--ease);
}
.page-numbers:hover { background: var(--surface); }
.page-numbers.current { background: var(--ink); color: #fff; box-shadow: none; }
.page-numbers.dots { box-shadow: none; }

/* ---------- Form states ---------- */
.form__msg { margin-top: 14px; font-size: .9rem; text-align: center; font-weight: 500; }
.form__msg--ok { color: var(--lime-ink); }
.form__msg--err { color: #B3261E; }

/* ---------- Booking: step two of the enquiry ----------
   Shares the .form card, so the panel that replaces the form is the same
   object in the same place rather than a new thing appearing beside it. */
.bk__top { margin-bottom: clamp(18px, 2vw, 24px); }
.bk__step {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime-ink);
}
.bk__h { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 8px; }
.bk__p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }

/* Days scroll sideways on a phone rather than wrapping into a wall of chips. */
.bk__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bk__day {
  display: grid; gap: 2px; padding: 12px 6px; cursor: pointer; text-align: center;
  background: var(--canvas); border: 1.5px solid transparent; border-radius: var(--r-sm);
  font: inherit; color: var(--ink); transition: border-color .2s, background .2s;
}
.bk__day span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.bk__day b { font-size: .95rem; font-weight: 600; }
.bk__day:hover { border-color: var(--hairline); background: var(--surface); }
.bk__day.is-on { border-color: var(--lime-deep); background: var(--lime-wash); }
.bk__day.is-on span { color: var(--lime-ink); }
/* A day already gone. Legible rather than hidden — it is doing useful work by
   being visible — but plainly not something you can press. */
.bk__day.is-taken { cursor: not-allowed; background: transparent; border-color: var(--hairline-2); }
.bk__day.is-taken span, .bk__day.is-taken b { color: var(--ink-muted); opacity: .55; }
.bk__day.is-taken b { text-decoration: line-through; }
.bk__day.is-taken em {
  display: block; margin-top: 3px; font-style: normal;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.bk__day.is-taken:hover { border-color: var(--hairline-2); background: transparent; }

.bk__slot { margin-top: 18px; }
.bk__lbl { display: block; margin-bottom: 9px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.bk__times { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.bk__time {
  padding: 12px 8px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 500;
  background: var(--canvas); color: var(--ink);
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  transition: border-color .2s, background .2s;
}
.bk__time:hover { border-color: var(--hairline); background: var(--surface); }
.bk__time.is-on { border-color: var(--lime-deep); background: var(--lime-wash); color: var(--lime-ink); font-weight: 600; }

.bk__go { margin-top: 20px; }
.bk__go:disabled { opacity: .45; cursor: not-allowed; }
.bk__none { margin: 4px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-muted); }

.bk__skip { margin: 14px 0 0; text-align: center; font-size: .84rem; color: var(--ink-muted); }
.bk__skip button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: inherit;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.bk__skip button:hover { color: var(--lime-ink); }

/* ---------- Before you book ----------
   Sits under both columns, full width, so the questions read as a calm
   afterword to the section rather than competing with the form beside it. */
.faq { margin-top: clamp(44px, 5vw, 76px); padding-top: clamp(28px, 3vw, 42px); border-top: 1px solid var(--hairline); }
.faq__h {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 500;
}
/* Two columns on a wide screen: six questions in one tall stack makes the
   section feel longer than it is. */
.faq__list { columns: 2; column-gap: clamp(32px, 4vw, 64px); }
.faq__i { break-inside: avoid; margin-bottom: 4px; border-bottom: 1px solid var(--hairline-2); }
.faq__q {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 15px 0; list-style: none;
  font-size: clamp(.98rem, 1.15vw, 1.06rem); font-weight: 600; line-height: 1.4;
  color: var(--ink); transition: color .2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--lime-ink); }
.faq__q span { flex: 1; }
/* A plus that becomes a minus, drawn in CSS so there is no icon to load. */
.faq__q i {
  position: relative; flex: none; width: 15px; height: 15px; margin-top: 4px;
}
.faq__q i::before, .faq__q i::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--ink-muted); transition: transform .25s var(--ease), background .2s;
}
.faq__q i::before { width: 13px; height: 1.5px; }
.faq__q i::after { width: 1.5px; height: 13px; }
.faq__i[open] .faq__q i::after { transform: rotate(90deg); }
.faq__i[open] .faq__q { color: var(--ink); }
.faq__a {
  margin: 0; padding: 0 29px 18px 0;
  font-size: clamp(.92rem, 1.05vw, .99rem); line-height: 1.68; color: var(--ink-2);
}
@media (max-width: 860px) {
  .faq__list { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__q i::before, .faq__q i::after { transition: none; }
}

.bk-done { text-align: center; }
.bk-done__tick {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 999px; background: var(--lime-wash); color: var(--lime-ink);
}
.bk-done__tick svg { width: 22px; height: 22px; }
.bk-done__when { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }

@media (max-width: 760px) {
  .bk__days { grid-auto-columns: minmax(70px, 1fr); }
  .bk__times { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   CLIENT WALL — one card per client, many campaigns inside
   ========================================================= */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.client {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden; height: 100%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.client:hover { transform: translateY(-7px); box-shadow: 0 24px 56px -28px rgba(20,18,28,.5); border-color: transparent; }

/* Logo sits on ink so white-on-transparent brand marks stay visible */
.client__logo {
  height: 116px; display: grid; place-items: center; padding: 26px;
  background: var(--night); position: relative; overflow: hidden;
}
.client__logo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(196,240,66,.16), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.client:hover .client__logo::after { opacity: 1; }
/* Dark artwork gets a white panel so interior detail survives.
   White artwork sits straight on the ink panel — set per client. */
.client__logo img {
  max-height: 62px; max-width: 78%; width: auto; object-fit: contain;
  background: #fff; padding: 12px 16px; border-radius: 10px;
  transition: transform .5s var(--ease);
  position: relative; z-index: 1;
}
.client__logo--light img { background: none; padding: 0; max-height: 66px; }
.client:hover .client__logo img { transform: scale(1.04); }
.client__fallback {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: #fff; letter-spacing: -.03em; text-align: center; position: relative; z-index: 1;
}

.client__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.client__ind {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime-ink);
  background: var(--lime-wash); padding: 4px 10px; border-radius: var(--r-pill);
  align-self: flex-start; margin-bottom: 12px;
}
.client__body h3 { font-size: 1.16rem; line-height: 1.2; letter-spacing: -.025em; }
.client__sum { margin-top: 10px; font-size: .89rem; line-height: 1.55; color: var(--ink-muted); flex: 1; }

/* Service pills — the visible proof of several workstreams per client */
.client__svcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.client__svc {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--canvas-deep); color: var(--ink-2);
  transition: background .3s, color .3s;
}
.client:hover .client__svc { background: var(--lime-wash); color: var(--lime-ink); }

.client__foot {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hairline-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.client__count { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); letter-spacing: .04em; }
.client__count b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; margin-right: 5px; }
.client__go {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--canvas-deep); display: grid; place-items: center;
  transition: background .35s, transform .45s var(--ease);
}
.client__go svg { width: 12px; height: 12px; }
.client:hover .client__go { background: var(--lime); transform: rotate(45deg); }

/* Whole card is one link */
.client__link { position: absolute; inset: 0; z-index: 2; }

/* ---------- Client landing page hero ---------- */
.chero { display: grid; grid-template-columns: 210px 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
.chero__logo {
  background: var(--night); border-radius: var(--r-lg);
  aspect-ratio: 1; display: grid; place-items: center; padding: 32px;
}
.chero__logo img { max-width: 100%; max-height: 104px; object-fit: contain; background: #fff; padding: 16px 20px; border-radius: 12px; }
.chero__logo--light img { background: none; padding: 0; }
.chero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.member { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--canvas-deep); aspect-ratio: 4/5; }
.member img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.member:hover img { transform: scale(1.04); }
.member__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 18px;
  background: linear-gradient(0deg, rgba(20,18,28,.86), transparent);
  color: #fff;
}
.member__cap b { display: block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.025em; }
.member__cap span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* =========================================================
   RESPONSIVE — desktop / tablet / mobile
   ========================================================= */

/* Very wide screens: widen the measure rather than stretching type */
@media (min-width: 1600px) {
  :root { --maxw: 1400px; }
  /* The measure widens here, so the headline's cap has to widen with it.
     Left at 11.4rem the column kept growing past the type and the empty band
     at the right of the headline came back. */
  /* --maxw widens to 1400 here, so the column does too and the line can grow
     with it. Below 1600 the measure is pinned at 1280, which is why the base
     clamp has to stop at 10rem however wide the window gets. */
  .hero__title.hero__title--grow { font-size: 11rem; }
}

/* Small desktop / tablet landscape */
@media (max-width: 1200px) {
  .clients, .work, .quotes, .team { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; }
  .step:nth-child(3) { border-right: 0; }
}

/* Tablet portrait */
@media (max-width: 1040px) {
  :root { --band: clamp(64px, 9vw, 104px); }

  .hero { padding-top: clamp(112px, 14vw, 150px); }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  /* stacked: let the three blocks fall in source order - lede, wall, buttons */
  /* 28px either side of the wall, and the buttons give up their own top margin,
     which the gap is now doing. Three blocks with the 44px gap and that margin
     still in place pushed the section 44px taller than it was with two. */
  .hero__grid--split { grid-template-areas: none; row-gap: 28px; }
  .hero__grid--split > .hero__foot .hero__cta { margin-top: 0; }
  .hero__grid--split > .rv:first-child,
  .hero__grid--split > .wall,
  .hero__grid--split > .hero__foot { grid-area: auto; align-self: auto; }
  .hero__title { font-size: clamp(2.6rem, 7.4vw, 4.2rem); }
  /* The --grow modifier is two classes, so it outranks the single-class stack
     rule above and kept the hero in two columns on a phone. It has to be
     restated here, and its size with it, or the headline is wider than the
     column it sits in. */
  .hero__title.hero__title--grow { font-size: clamp(2.6rem, 7.4vw, 5.2rem); }
  /* 3px is right beside a 180px headline; beside a 60px one it is a slab. */
  .hero__with { -webkit-text-stroke-width: 1.5px; }

  /* The video wall becomes a swipeable filmstrip instead of a squashed grid */
  .wall {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wall::-webkit-scrollbar { display: none; }
  .wall__col { display: contents; }
  .wall__col:nth-child(2), .wall__col:nth-child(3) { transform: none; }
  .wall .tile, .wall .tile:nth-child(even) { flex: 0 0 clamp(150px, 24vw, 200px); aspect-ratio: 9/13; scroll-snap-align: start; }
  /* The tiles are only ~150px wide here, so the label needs to be smaller
     and tighter to stay on one line. */
  .tile__tag { font-size: .5rem; letter-spacing: .05em; padding: 3px 7px; left: 7px; bottom: 7px; }

  .sec-head { margin-bottom: 40px; }
  .sec-no { display: none; }

  .svc__card { position: static; grid-template-columns: auto 1fr; }
  .svc__go { display: none; }

  .feat, .lead { grid-template-columns: 1fr; }
  .feat__media { order: -1; }
  .chero { grid-template-columns: 150px 1fr; }
}

/* Large phone */
@media (max-width: 780px) {
  :root { --gutter: 20px; --band: clamp(56px, 12vw, 84px); }

  .nav { padding: 9px 9px 9px 18px; gap: 12px; }
  .nav__links { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .nav .btn--lime { padding: 12px 18px; font-size: .86rem; }
  .nav .btn--lime .btn__ic { display: none; }

  .hero__title { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  /* the signed-off phone size; the two-row layout now comes from the base rule */
  .hero__title.hero__title--grow { font-size: clamp(2.2rem, 14vw, 3.4rem); }
  .hero__cta .btn { flex: 1 1 100%; justify-content: space-between; }

  .clients, .work, .quotes, .stats, .steps, .team { grid-template-columns: 1fr; }
  .step { border-right: 0; padding-inline: 0; }

  .svc__card { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .svc__no { padding-top: 0; }

  .form__row, .feat__metrics { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 30px; }

  /* Filter chips scroll instead of wrapping into four rows */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .chero { grid-template-columns: 1fr; }
  .chero__logo { aspect-ratio: 16/7; max-width: 260px; }
}

/* Small phone */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(2rem, 11vw, 2.6rem); }
  .marquee__item { font-size: 1.05rem; }
  .stat { padding: 26px 20px; }
  .quote { padding: 24px 22px; }
  .form { padding: 22px 18px; }
}

/* Touch devices: no magnetic lean, no hover-only lifts */
@media (hover: none) {
  .btn:hover, .wcard:hover, .client:hover, .tile:hover, .quote:hover { transform: none; }
}

/* ---------- Nav collapses before the pill can crowd ---------- */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav { gap: 10px; padding: 10px 10px 10px 20px; }
  /* with the links gone, the CTA takes over pushing the group right */
  .nav > .btn--lime { margin-left: auto; padding: 12px 20px; font-size: .88rem; }
}
@media (max-width: 560px) {
  .nav .btn--lime .btn__ic { display: none; }
  .nav .btn--lime { padding: 11px 16px; font-size: .82rem; }
  .brand { font-size: 1.08rem; }
}

/* =========================================================
   CASE STUDY SYSTEM
   Long-form campaign narratives: spec bar, numbered chapters,
   flow chains, stage ladders, spec tables, metric grids.
   ========================================================= */

/* ---------- Status pill ---------- */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 12px 5px 10px; border-radius: var(--r-pill);
  background: var(--canvas-deep); color: var(--ink-2);
}
.status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.status--completed { background: rgba(70,102,10,.12); color: var(--lime-ink); }
.status--ongoing   { background: rgba(196,240,66,.22); color: #3E5A08; }
.status--ongoing::before { animation: pulse 2s var(--ease-soft) infinite; }
.status--upcoming  { background: rgba(20,18,28,.07); color: var(--ink-2); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.band--night .status { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.band--night .status--ongoing { background: rgba(196,240,66,.2); color: var(--lime); }

/* ---------- Case hero ---------- */
.cs-hero { padding-top: clamp(132px, 15vw, 186px); padding-bottom: clamp(30px, 4vw, 48px); }
.cs-hero h1 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); margin: 20px 0 18px; }
.cs-hero .cs-sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem); line-height: 1.22;
  letter-spacing: -.025em; color: var(--ink-muted); max-width: 30ch;
}
.cs-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Spec bar ---------- */
.cs-meta {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  overflow: hidden; margin-top: clamp(30px, 4vw, 48px);
}
.cs-meta__i { background: var(--canvas); padding: 20px 22px; transition: background .35s; }
.cs-meta__i:hover { background: var(--surface); }
.cs-meta__k {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 8px;
}
.cs-meta__v { font-size: .93rem; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.cs-meta__v span { display: block; color: var(--ink-2); font-weight: 400; }

/* ---------- Numbered chapter ---------- */
.cs-ch { position: relative; }
.cs-ch__head { display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 34px); margin-bottom: 26px; }
.cs-ch__no {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--hairline);
  flex: none; transition: -webkit-text-stroke-color .6s var(--ease), color .6s var(--ease);
}
.cs-ch.is-in .cs-ch__no { -webkit-text-stroke-color: var(--lime-deep); }
.cs-ch__t { padding-top: .3em; }
.cs-ch__t .eyebrow { margin-bottom: 12px; }
.cs-ch__t h2 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }

/* ---------- Big statement ---------- */
.cs-say {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.14; letter-spacing: -.03em;
  max-width: 22ch; margin-block: clamp(28px, 4vw, 44px);
}
.cs-say--wide { max-width: 30ch; }

/* ---------- Flow chain (Awareness → Curiosity → …) ---------- */
.cs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 26px; }
.cs-flow__i {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s, border-color .3s;
}
.cs-flow.is-in .cs-flow__i { opacity: 1; transform: none; }
.cs-flow__i:hover { background: var(--lime-wash); border-color: transparent; }
/* Arrow is drawn in CSS, not SVG — WordPress strips inline <svg> from
   post content via KSES, so the connector must not depend on markup. */
.cs-flow__a {
  color: var(--lime-deep); flex: none;
  position: relative; width: 20px; height: 10px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.cs-flow.is-in .cs-flow__a { opacity: 1; }
.cs-flow__a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.6px; background: currentColor;
  transform: translateY(-50%); border-radius: 2px;
}
.cs-flow__a::after {
  content: ''; position: absolute; right: 1px; top: 50%;
  width: 6px; height: 6px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.cs-flow__a svg { display: none; }
/* stagger */
.cs-flow.is-in > *:nth-child(1) { transition-delay: 0s; }
.cs-flow.is-in > *:nth-child(2) { transition-delay: .07s; }
.cs-flow.is-in > *:nth-child(3) { transition-delay: .14s; }
.cs-flow.is-in > *:nth-child(4) { transition-delay: .21s; }
.cs-flow.is-in > *:nth-child(5) { transition-delay: .28s; }
.cs-flow.is-in > *:nth-child(6) { transition-delay: .35s; }
.cs-flow.is-in > *:nth-child(7) { transition-delay: .42s; }
.cs-flow.is-in > *:nth-child(8) { transition-delay: .49s; }
.cs-flow.is-in > *:nth-child(9) { transition-delay: .56s; }
.cs-flow.is-in > *:nth-child(n+10) { transition-delay: .63s; }

/* ---------- Stage ladder (vertical numbered journey) ---------- */
.cs-ladder { position: relative; margin-block: clamp(26px, 4vw, 40px); padding-left: 62px; }
.cs-ladder::before {
  content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background: var(--hairline);
}
.cs-ladder::after {
  content: ''; position: absolute; left: 21px; top: 12px; width: 2px; height: 0;
  background: var(--lime-deep); transition: height 1.6s var(--ease);
}
.cs-ladder.is-in::after { height: calc(100% - 24px); }

.cs-stage { position: relative; padding-block: 16px; }
.cs-stage__n {
  position: absolute; left: -62px; top: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--hairline);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: var(--ink-muted);
  transition: border-color .5s var(--ease), background .5s var(--ease), color .5s;
}
.cs-stage:hover .cs-stage__n,
.cs-ladder.is-in .cs-stage__n { border-color: var(--lime-deep); color: var(--ink); }
.cs-stage:hover .cs-stage__n { background: var(--lime); }
.cs-stage h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: -.025em; }
.cs-stage p { margin-top: 7px; color: var(--ink-muted); font-size: .93rem; line-height: 1.55; }

/* ---------- Spec table ---------- */
.cs-tbl { width: 100%; border-collapse: collapse; margin-block: clamp(24px, 3.5vw, 38px); }
.cs-tbl th {
  text-align: left; padding: 12px 16px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1.5px solid var(--hairline); font-weight: 500;
}
.cs-tbl td { padding: 15px 16px; border-bottom: 1px solid var(--hairline-2); vertical-align: top; font-size: .95rem; }
.cs-tbl tr { transition: background .3s; }
.cs-tbl tbody tr:hover { background: var(--surface); }
.cs-tbl td:first-child { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.cs-tbl td:last-child { color: var(--ink-2); }

/* ---------- Metric grid ---------- */
.cs-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; margin-block: 30px; }
.cs-num { background: var(--canvas); padding: 28px 22px; transition: background .35s; }
.cs-num:hover { background: var(--surface); }
.cs-num b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.04em; line-height: 1;
}
.cs-num span { display: block; margin-top: 9px; font-size: .84rem; color: var(--ink-muted); line-height: 1.4; }
/* awaiting real data */
.cs-num--tbc b { color: var(--ink-muted); -webkit-text-stroke: 1.5px var(--hairline); color: transparent; }
.cs-num--tbc { position: relative; }
.cs-num--tbc::after {
  content: 'awaiting data'; position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); opacity: .65;
}

/* ---------- Two-up split ---------- */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-block: clamp(24px, 3.5vw, 38px); }
.cs-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cs-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -26px rgba(20,18,28,.42); }
.cs-card h3 { font-size: 1.12rem; letter-spacing: -.025em; margin-bottom: 10px; }
.cs-card p { font-size: .93rem; color: var(--ink-muted); line-height: 1.58; }
.cs-card__n {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--lime-ink); display: block; margin-bottom: 12px;
}

/* three-up variant */
.cs-split--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Media slot ---------- */
.cs-slot {
  border: 1.5px dashed var(--hairline); border-radius: var(--r-lg);
  padding: clamp(30px, 5vw, 54px); text-align: center; background: var(--canvas-soft);
  margin-block: clamp(24px, 3.5vw, 38px);
}
.cs-slot__k {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime-ink); display: block; margin-bottom: 10px;
}
.cs-slot p { color: var(--ink-muted); font-size: .92rem; max-width: 52ch; margin-inline: auto; }
.cs-slot ul { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px; }
.cs-slot li {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); background: var(--canvas-deep); color: var(--ink-2);
}

/* ---------- Chapter rhythm ---------- */
.cs-body > .cs-ch + .cs-ch { margin-top: clamp(56px, 8vw, 110px); }
.cs-body p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.72; max-width: 68ch; }
.cs-body p + p { margin-top: 1.05em; }
.cs-body ul.cs-list { margin-block: 22px; display: grid; gap: 10px; max-width: 62ch; }
.cs-body ul.cs-list li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: .97rem; }
.cs-body ul.cs-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 2px; background: var(--lime-deep); border-radius: 2px;
}

/* ---------- Client project switcher (browse projects fast) ---------- */
.proj-switch { display: grid; gap: 10px; }
.proj {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 18px 20px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background .3s;
}
.proj:hover { transform: translateX(5px); box-shadow: 0 14px 34px -22px rgba(20,18,28,.45); border-color: transparent; }
.proj__n { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); }
.proj__t { min-width: 0; }
.proj__t b { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.025em; line-height: 1.2; }
.proj__t span { font-size: .85rem; color: var(--ink-muted); }
.proj__r { display: flex; align-items: center; gap: 12px; flex: none; }
.proj__go {
  width: 32px; height: 32px; border-radius: 50%; background: var(--canvas-deep);
  display: grid; place-items: center; transition: background .3s, transform .45s var(--ease);
}
.proj__go svg { width: 11px; height: 11px; }
.proj:hover .proj__go { background: var(--lime); transform: rotate(45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
  .cs-nums { grid-template-columns: repeat(2, 1fr); }
  .cs-split, .cs-split--3 { grid-template-columns: 1fr; }
  .cs-ch__head { gap: 16px; }
}
@media (max-width: 780px) {
  .cs-meta { grid-template-columns: 1fr; }
  .cs-ladder { padding-left: 46px; }
  .cs-ladder::before, .cs-ladder::after { left: 15px; }
  .cs-stage__n { left: -46px; width: 32px; height: 32px; font-size: .62rem; }
  .cs-ch__head { flex-direction: column; gap: 6px; }
  .cs-ch__no { font-size: 2.4rem; }
  .cs-ch__t { padding-top: 0; }
  .cs-flow { gap: 7px; }
  .cs-flow__i { font-size: .62rem; padding: 8px 12px; }
  .proj { grid-template-columns: 1fr auto; }
  .proj__n { display: none; }
  /* tables scroll rather than crush */
  .cs-tbl-wrap { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .cs-tbl { min-width: 520px; }
}
@media (max-width: 420px) {
  .cs-nums { grid-template-columns: 1fr; }
}

/* ---------- Filter bar: category chips, then status chips ---------- */
.filters__div {
  width: 1px; align-self: stretch; margin-inline: 6px;
  background: var(--hairline); flex: none;
}
.chip--status { position: relative; padding-left: 28px; }
.chip--status::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55;
}
.chip--completed { color: var(--lime-ink); }
.chip--ongoing::before { animation: pulse 2s var(--ease-soft) infinite; }
.chip--status[aria-pressed="true"]::before { opacity: 1; background: var(--lime); }

/* Status badge riding on a work card */
.wcard__meta .status { padding: 3px 9px 3px 8px; font-size: .55rem; }
.wcard__meta { flex-wrap: wrap; }

@media (max-width: 780px) {
  .filters__div { display: none; }
}

/* ---------- Anchor offset for the fixed nav ---------- */
:target, section[id], .cs-ch, .cs-stage { scroll-margin-top: 110px; }
@media (max-width: 780px) { :target, section[id], .cs-ch, .cs-stage { scroll-margin-top: 90px; } }

/* FAQ plus/minus drawn in CSS — post content cannot carry inline <svg> */
.faq__ic { position: relative; }
.faq__ic::before, .faq__ic::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq__ic::before { width: 11px; height: 1.8px; }
.faq__ic::after  { width: 1.8px; height: 11px; transition: opacity .35s var(--ease); }
.faq__item.is-open .faq__ic::after { opacity: 0; }
.faq__ic svg { display: none; }

/* FAQ nested inside long-form content */
.cs-body .faq { border-top: 1px solid var(--hairline); margin-top: 8px; }
.cs-body .faq p { max-width: 74ch; }

/* Service tags become links on the homepage engine cards */
a.svc__tag { transition: background .28s, color .28s, transform .28s var(--ease); }
a.svc__tag:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
a.svc__go { text-decoration: none; }

/* =========================================================
   HOMEPAGE v2 — denser, with deliberate quiet bands
   ========================================================= */

/* ---------- "What is Growis" band: cross out the wrong guess, then answer ----------
   The three wrong labels sit left and strike themselves through one after
   another as the band arrives; the real answer lands on the right once they
   are gone. Timings are chained: .15s / .40s / .65s for the strikes, .85s
   for the highlighter under the answer. */
.wn {
  display: grid; grid-template-columns: .72fr 1.28fr;
  gap: clamp(28px, 5vw, 76px); align-items: start;
  margin-top: 34px;
}

.wn__k, .wn__yk {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 16px;
}
.wn__yk { color: var(--lime-ink); }

.wn__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.08rem, 1.9vw, 1.5rem); line-height: 1.25; letter-spacing: -.025em;
  color: var(--ink-muted);
  padding: 14px 0; border-bottom: 1px solid var(--hairline-2);
}
.wn__n:last-child { border-bottom: 0; }
/* the strike hugs the words, not the column, so it reads as a correction */
.wn__n > span { position: relative; display: inline-block; }
.wn__n > span::after {
  content: ''; position: absolute; left: -.04em; right: -.04em; top: 52%;
  height: 2px; border-radius: 2px;
  background: var(--ink-muted); opacity: .55;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
.wn.is-in .wn__n:nth-child(2) > span::after { transform: scaleX(1); transition-delay: .15s; }
.wn.is-in .wn__n:nth-child(3) > span::after { transform: scaleX(1); transition-delay: .40s; }
.wn.is-in .wn__n:nth-child(4) > span::after { transform: scaleX(1); transition-delay: .65s; }

.wn__y {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 3.1rem); line-height: 1.14; letter-spacing: -.04em;
  margin: 0; text-wrap: balance;
}
/* The shared .mark is an inline-block, so on narrow screens its single
   highlight bar spills past the last line. Inside this answer the highlight
   is painted per line box instead, and still wipes in after the strikes. */
.wn__y .mark {
  display: inline; isolation: auto;
  padding: 0 .06em; margin: 0 -.06em;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat; background-position: 0 88%;
  background-size: 0 .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .7s var(--ease) .85s;
}
.wn__y .mark::after { display: none; }
.wn.is-in .wn__y .mark { background-size: 100% .34em; }

.wn__sub {
  margin-top: 18px; max-width: 52ch;
  font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.65; color: var(--ink-2);
}

.wn__facts { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.wn__chip {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 10px 15px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--hairline);
}

/* Tablet — the rejected labels become a row of chips, so they read as one
   quick sweep of wrong guesses rather than a list to study line by line. */
@media (max-width: 900px) {
  .wn { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .wn__not { display: flex; flex-wrap: wrap; gap: 9px; }
  .wn__k { width: 100%; margin-bottom: 2px; }
  .wn__n {
    padding: 9px 15px; border-bottom: 0; border-radius: var(--r-pill);
    background: var(--canvas-deep); font-size: .95rem;
  }
  .wn__n > span::after { top: 50%; }
}
@media (max-width: 560px) {
  .wn__n { font-size: .84rem; padding: 8px 12px; }
  .wn__chip { font-size: .58rem; padding: 9px 12px; }
}

/* ---------- Problem band: no cards, no images, no links ---------- */
.problem { max-width: 26ch; }
.problem__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 4.1rem); line-height: 1.01; letter-spacing: -.04em;
}
.problem__body { max-width: 58ch; margin-top: clamp(26px, 4vw, 44px); }
.problem__body p { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.68; color: rgba(255,255,255,.72); }
.problem__body p + p { margin-top: 1.05em; }

/* the three named problems, as a quiet row */
.problem__three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.14); margin-top: clamp(36px, 5vw, 60px); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden; }
.problem__one { background: var(--night); padding: clamp(24px, 3vw, 34px); transition: background .4s; }
.problem__one:hover { background: var(--night-2); }
.problem__one b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.03em; color: var(--lime); margin-bottom: 10px;
}
.problem__one span { font-size: .93rem; line-height: 1.55; color: rgba(255,255,255,.62); }

/* ---------- Service index: engine left, services right ---------- */
.sidx { display: grid; gap: clamp(36px, 5vw, 64px); }
.sidx__eng { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.sidx__label { position: sticky; top: 120px; }
.sidx__label .eyebrow { margin-bottom: 12px; }
.sidx__label h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -.035em;
}
.sidx__label p { margin-top: 12px; font-size: .92rem; line-height: 1.55; color: var(--ink-muted); }

.sidx__rows { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.sidx__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding: clamp(18px, 2.4vw, 26px) 4px;
  border-bottom: 1px solid var(--hairline);
  position: relative; transition: padding-left .4s var(--ease);
}
/* lime rail that grows on hover */
.sidx__row::before {
  content: ''; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 2px;
  background: var(--lime-deep); transform: scaleY(0); transform-origin: center;
  transition: transform .4s var(--ease);
}
.sidx__row:hover { padding-left: 14px; }
.sidx__row:hover::before { transform: scaleY(1); }

.sidx__no { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); }
.sidx__t { min-width: 0; }
.sidx__t b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem); letter-spacing: -.025em; line-height: 1.2;
}
.sidx__t span { display: block; margin-top: 5px; font-size: .89rem; color: var(--ink-muted); line-height: 1.45; }
.sidx__r { display: flex; align-items: center; gap: 14px; flex: none; }
.sidx__go {
  width: 32px; height: 32px; border-radius: 50%; background: var(--canvas-deep);
  display: grid; place-items: center; transition: background .3s, transform .45s var(--ease);
}
.sidx__go svg { width: 11px; height: 11px; }
.sidx__row:hover .sidx__go { background: var(--lime); transform: rotate(45deg); }

/* ---------- Work card metric boxes ---------- */
.wcard__res {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px; padding-top: 0; border-top: 0;
}
.wcard__box {
  background: var(--canvas); border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm); padding: 12px 13px;
  transition: background .3s, border-color .3s;
}
.wcard:hover .wcard__box { background: var(--canvas-deep); }
.wcard__box b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.16rem; letter-spacing: -.03em; line-height: 1.15; color: var(--ink);
}
/* a qualitative metric sits in the same slot, smaller */
.wcard__box--text b { font-size: .92rem; font-weight: 700; line-height: 1.25; }
.wcard__box span {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); line-height: 1.3;
}

/* location · year meta line */
.wcard__where {
  margin-top: 9px; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .sidx__eng { grid-template-columns: 1fr; gap: 20px; }
  .sidx__label { position: static; }
  .problem { max-width: 16ch; }
  .problem__three { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .sidx__row { grid-template-columns: 1fr auto; padding-inline: 0; }
  .sidx__no { display: none; }
  .sidx__row:hover { padding-left: 10px; }
  .problem { max-width: none; }
}
@media (max-width: 420px) {
  .wcard__res { grid-template-columns: 1fr; }
}

/* Compact team strip — the homepage shows faces, the About page shows people */
.team--strip { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.team--strip .member { aspect-ratio: 3/4; border-radius: var(--r-md); }
.team--strip .member__cap { padding: 14px 12px 12px; }
.team--strip .member__cap b { font-size: .88rem; letter-spacing: -.02em; }
.team--strip .member__cap span { font-size: .54rem; letter-spacing: .08em; }
@media (max-width: 1200px) { .team--strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .team--strip { grid-template-columns: repeat(2, 1fr); } }

/* Card description — gives every card body, with or without metrics */
.wcard__desc {
  margin-top: 10px; font-size: .88rem; line-height: 1.55; color: var(--ink-muted);
}
/* push the metric row to the bottom so cards in a row align */
.wcard { display: flex; flex-direction: column; }
.wcard__body { display: flex; flex-direction: column; flex: 1; }
.wcard__res { margin-top: auto; padding-top: 16px; }

/* =========================================================
   GROWTH SPINE — Attention → System → Conversion → Scale
   The central philosophy, as a four-stage machine.
   ========================================================= */

.spine { position: relative; margin-top: clamp(40px, 6vw, 68px); }

/* the rail that runs through all four stages and draws on scroll */
.spine__rail {
  position: absolute; left: 0; right: 0; top: 46px; height: 2px;
  background: var(--hairline);
}
.spine__rail::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--lime-deep);
  transition: width 2.2s var(--ease);
}
.spine.is-in .spine__rail::after { width: 100%; }

.spine__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); position: relative; }

.stage { position: relative; padding-top: 0; }

/* the node sitting on the rail */
.stage__node {
  width: 94px; height: 94px; border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--hairline);
  display: grid; place-items: center; position: relative; z-index: 2;
  transition: border-color .6s var(--ease), background .6s var(--ease), transform .6s var(--ease);
}
.stage__node b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.04em; line-height: 1; color: var(--ink-muted);
  transition: color .6s var(--ease);
}
.spine.is-in .stage__node { border-color: var(--lime-deep); }
.spine.is-in .stage__node b { color: var(--ink); }
.stage:hover .stage__node { background: var(--lime); transform: scale(1.06); }
/* stagger the nodes lighting up behind the rail */
.spine.is-in .stage:nth-child(1) .stage__node { transition-delay: .15s; }
.spine.is-in .stage:nth-child(2) .stage__node { transition-delay: .70s; }
.spine.is-in .stage:nth-child(3) .stage__node { transition-delay: 1.25s; }
.spine.is-in .stage:nth-child(4) .stage__node { transition-delay: 1.80s; }

.stage__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem); letter-spacing: -.035em;
  margin: 22px 0 8px;
}
.stage__q { font-size: .9rem; line-height: 1.5; color: var(--ink-muted); min-height: 3em; }

/* the capabilities inside a stage */
.stage__caps { margin-top: 18px; display: grid; gap: 7px; }
.stage__cap {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: .88rem; font-weight: 500; letter-spacing: -.01em;
  transition: transform .35s var(--ease), border-color .3s, background .3s;
}
.stage__cap:hover { transform: translateX(4px); background: var(--lime-wash); border-color: transparent; }
.stage__cap em {
  display: block; font-style: normal; margin-top: 3px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* the outcome sitting under the whole spine */
.spine__out {
  margin-top: clamp(34px, 5vw, 56px); padding-top: clamp(26px, 3.5vw, 38px);
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
}
.spine__out b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.035em; line-height: 1.1;
}

/* ---------- Proof strip: verified numbers only ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.proofc { background: var(--canvas); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 26px);
  transition: background .4s; display: block; }
.proofc:hover { background: var(--surface); }
.proofc__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -.045em; line-height: 1;
}
.proofc__n em { font-style: normal; color: var(--lime-deep); }
.proofc__l { margin-top: 10px; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.proofc__c {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline-2);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.proofc__c span { transition: transform .4s var(--ease); }
.proofc:hover .proofc__c span { transform: translateX(4px); }

/* a claim still awaiting sign-off reads as pending, never as fact */
.proofc--tbc .proofc__n { color: var(--ink-muted); }
.proofc--tbc { position: relative; }
.proofc--tbc::after {
  content: 'to confirm'; position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime-ink); background: var(--lime-wash); padding: 3px 7px; border-radius: var(--r-pill);
}

/* ---------- Before / After ---------- */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: stretch;
  margin-block: clamp(26px, 4vw, 40px); }
.ba__side { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px); }
.ba__side--after { background: var(--lime-wash); border-color: transparent; }
.ba__k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); display: block; margin-bottom: 12px; }
.ba__side--after .ba__k { color: var(--lime-ink); }
.ba__side p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.ba__side--after p { color: var(--ink); font-weight: 500; }
.ba__arrow { display: grid; place-items: center; color: var(--lime-deep); }
.ba__arrow::before {
  content: ''; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lime); position: relative;
}
.ba__arrow::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
  transform: rotate(45deg) translate(-1px, 1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .spine__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .spine__rail { display: none; }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .spine__out { grid-template-columns: 1fr; gap: 16px; }
  .ba { grid-template-columns: 1fr; }
  .ba__arrow { transform: rotate(90deg); padding-block: 6px; }
}
@media (max-width: 640px) {
  .spine__grid { grid-template-columns: 1fr; gap: 30px; }
  .proof { grid-template-columns: 1fr; }
  .stage__q { min-height: 0; }
  .stage__node { width: 74px; height: 74px; }
}

/* The rail is drawn as a segment per stage, node-centre to node-centre,
   so it never overshoots the last node regardless of column width. */
.spine__rail { display: none; }

.stage::before,
.stage::after {
  content: ''; position: absolute; top: 46px; height: 2px;
  left: 47px;                                   /* centre of the 94px node */
  width: calc(100% - 47px + clamp(14px, 2vw, 26px));  /* across the gap */
  pointer-events: none;
}
.stage:last-child::before,
.stage:last-child::after { display: none; }

.stage::before { background: var(--hairline); }
.stage::after {
  background: var(--lime-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s var(--ease);
}
.spine.is-in .stage:nth-child(1)::after { transform: scaleX(1); transition-delay: .25s; }
.spine.is-in .stage:nth-child(2)::after { transform: scaleX(1); transition-delay: .80s; }
.spine.is-in .stage:nth-child(3)::after { transform: scaleX(1); transition-delay: 1.35s; }

@media (max-width: 1040px) {
  .stage::before, .stage::after { display: none; }
}

/* =========================================================
   FEATURED CASE PANELS — proof hierarchy
   A campaign with a hard number gets a full-width panel.
   Everything else stays a card. The difference is the point.
   ========================================================= */

.fcases { display: grid; gap: clamp(18px, 2.6vw, 30px); }

.fcase {
  position: relative;
  display: grid; grid-template-columns: 1.02fr 1fr;
  background: var(--night); color: #fff;
  border-radius: var(--r-xl); overflow: hidden;
  min-height: clamp(360px, 42vw, 480px);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.fcase:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -44px rgba(20,18,28,.8); }

/* alternate the media side so the run of panels has rhythm */
.fcase:nth-child(even) { grid-template-columns: 1fr 1.02fr; }
.fcase:nth-child(even) .fcase__media { order: 2; }

/* ---------- media half ---------- */
.fcase__media { position: relative; overflow: hidden; background: var(--night-2); }
.fcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.fcase:hover .fcase__media img { transform: scale(1.045); }
.fcase__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,18,28,.1), rgba(20,18,28,.55));
}
.fcase:nth-child(even) .fcase__media::after { background: linear-gradient(260deg, rgba(20,18,28,.1), rgba(20,18,28,.55)); }

/* placeholder when no cover image exists yet */
.fcase__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(196,240,66,.14), transparent 70%),
    linear-gradient(140deg, #1E1B29, #14121C);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.35); padding: 20px;
}

.fcase__badges {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 7px;
}

/* ---------- body half ---------- */
.fcase__body {
  padding: clamp(28px, 3.6vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  position: relative; z-index: 1;
}

.fcase__no {
  position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(24px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.14);
}

.fcase__who {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 18px;
}

/* the number is the reason this panel exists — give it the room */
.fcase__metric { margin-bottom: 20px; }
.fcase__metric b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .88; letter-spacing: -.05em;
  color: var(--lime);
}
.fcase__metric b em { font-style: normal; color: rgba(255,255,255,.4); }
.fcase__metric span {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}

.fcase__body h3 {
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); line-height: 1.18; letter-spacing: -.03em;
  color: #fff; margin-bottom: 12px;
}
.fcase__body > p {
  font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.66); max-width: 46ch;
}

.fcase__go {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--lime); align-self: flex-start;
}
.fcase__go i {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(196,240,66,.16);
  display: grid; place-items: center; transition: background .35s, transform .45s var(--ease);
}
.fcase__go svg { width: 11px; height: 11px; }
.fcase:hover .fcase__go i { background: var(--lime); color: var(--ink); transform: rotate(45deg); }

/* whole panel is the link */
.fcase__link { position: absolute; inset: 0; z-index: 3; }

/* ---------- before / after, dark variant ---------- */
.ba--dark { margin-block: 4px 0; gap: 12px; }
.ba--dark .ba__side {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  padding: 15px 17px; border-radius: var(--r-md);
}
.ba--dark .ba__side--after { background: rgba(196,240,66,.14); border-color: transparent; }
.ba--dark .ba__k { color: rgba(255,255,255,.45); margin-bottom: 7px; }
.ba--dark .ba__side--after .ba__k { color: var(--lime); }
.ba--dark .ba__side p { font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.8); }
.ba--dark .ba__side--after p { color: #fff; font-weight: 500; }
.ba--dark .ba__arrow::before { width: 26px; height: 26px; }
.ba--dark .ba__arrow::after { width: 7px; height: 7px; }

/* ---------- the divider between tiers ---------- */
.tier-split {
  display: flex; align-items: center; gap: 18px;
  margin-block: clamp(44px, 6vw, 76px) clamp(26px, 3vw, 38px);
}
.tier-split__l {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.tier-split::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .fcase,
  .fcase:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .fcase__media { aspect-ratio: 16/9; order: -1 !important; }
  .fcase:nth-child(even) .fcase__media { order: -1; }
  .fcase__no { font-size: 2.4rem; }
  .ba--dark { grid-template-columns: 1fr; }
  .ba--dark .ba__arrow { transform: rotate(90deg); padding-block: 2px; }
}
@media (max-width: 640px) {
  .fcase__metric b { font-size: clamp(2.6rem, 15vw, 3.6rem); }
  .fcase__body { padding: 26px 22px 30px; }
  .fcase__no { top: 16px; right: 18px; font-size: 2rem; }
}

/* Status badge sits over dark campaign artwork on featured panels */
.fcase__badges .status {
  background: rgba(20,18,28,.62);
  color: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
}
.fcase__badges .status--completed { color: var(--lime); }
.fcase__badges .status--ongoing   { color: var(--lime); }
.fcase__badges .status--upcoming  { color: rgba(255,255,255,.8); }

/* =========================================================
   THE DIAGNOSTIC — three root causes, self-identified
   The visitor should recognise themselves in one of these.
   ========================================================= */

.diag-band { position: relative; overflow: hidden; }

/* a slow lime wash behind the section, so the dark band is not flat */
.diag-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 44% at 12% 8%, rgba(196,240,66,.10), transparent 62%),
    radial-gradient(50% 40% at 92% 98%, rgba(196,240,66,.07), transparent 60%);
  pointer-events: none;
}

.diag-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 76px); align-items: end; }
.diag-head__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.04em;
}
.diag-head__h em { font-style: normal; color: var(--lime); }
.diag-head p { color: rgba(255,255,255,.66); font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.65; }
.diag-head p + p { margin-top: .9em; }

/* ---------- the three panels ---------- */
.diag {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg); overflow: hidden;
  margin-top: clamp(34px, 5vw, 62px);
  position: relative;
}

/* the diagnostic sweep — one pass when the section arrives */
.diag::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(196,240,66,.10), transparent);
  transform: translateX(-120%); pointer-events: none; z-index: 3;
}
.diag.is-in::after { animation: diagSweep 1.9s var(--ease-soft) .35s 1 forwards; }
@keyframes diagSweep { to { transform: translateX(320%); } }

.dcard {
  position: relative; background: var(--night);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
  transition: background .45s var(--ease);
  opacity: 0; transform: translateY(22px);
}
.diag.is-in .dcard { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease), background .45s var(--ease); }
.diag.is-in .dcard:nth-child(1) { transition-delay: .10s; }
.diag.is-in .dcard:nth-child(2) { transition-delay: .22s; }
.diag.is-in .dcard:nth-child(3) { transition-delay: .34s; }

.dcard:hover { background: var(--night-2); }
/* hovering one panel quietens the others — a diagnosis narrows */
.diag:hover .dcard { opacity: .45; }
.diag:hover .dcard:hover { opacity: 1; }

/* ---------- icon ---------- */
.dcard__ic {
  width: 64px; height: 64px; margin-bottom: 22px;
  border-radius: var(--r-md); display: grid; place-items: center;
  background: rgba(196,240,66,.10); border: 1px solid rgba(196,240,66,.22);
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.dcard:hover .dcard__ic { background: rgba(196,240,66,.2); transform: translateY(-2px); }
.dcard__ic svg { width: 36px; height: 36px; color: var(--lime); overflow: visible; }
/* the icon draws itself in */
.dcard__ic svg [data-draw] {
  stroke-dasharray: var(--len, 90); stroke-dashoffset: var(--len, 90);
  transition: stroke-dashoffset 1.1s var(--ease);
}
.diag.is-in .dcard__ic svg [data-draw] { stroke-dashoffset: 0; }
.diag.is-in .dcard:nth-child(1) [data-draw] { transition-delay: .35s; }
.diag.is-in .dcard:nth-child(2) [data-draw] { transition-delay: .50s; }
.diag.is-in .dcard:nth-child(3) [data-draw] { transition-delay: .65s; }

/* ---------- text ---------- */
.dcard__n {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px;
}
.dcard h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.035em;
  color: var(--lime); margin-bottom: 12px;
}
.dcard__d { font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.78); }

/* symptoms — the part that makes someone say "that's us" */
.dcard__sym {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex: 1;
}
.dcard__sym > span {
  display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38);
  margin-bottom: 13px;
}
.dcard__sym li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: .89rem; line-height: 1.5; color: rgba(255,255,255,.62);
}
.dcard__sym li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 2px; border-radius: 2px; background: var(--lime);
  opacity: .55; transition: width .35s var(--ease), opacity .35s;
}
.dcard:hover .dcard__sym li::before { width: 12px; opacity: 1; }

/* the self-select affordance */
.dcard__pick {
  margin-top: 22px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  transition: color .3s, border-color .3s, background .3s, transform .4s var(--ease);
}
.dcard__pick i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  transition: transform .4s var(--ease);
}
.dcard:hover .dcard__pick {
  color: var(--ink); background: var(--lime); border-color: transparent; transform: translateX(3px);
}

/* ---------- closing line ---------- */
.diag-out {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: center;
}
.diag-out__k {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime);
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(196,240,66,.3); white-space: nowrap;
}
.diag-out p { color: rgba(255,255,255,.72); font-size: clamp(.98rem, 1.3vw, 1.14rem); line-height: 1.6; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet — panels become full-width rows, icon beside the heading */
@media (max-width: 1040px) {
  .diag-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .diag { grid-template-columns: 1fr; }
  .dcard {
    display: grid; grid-template-columns: 64px 1fr; column-gap: 22px;
    align-items: start; padding: 26px 24px;
  }
  .dcard__ic { margin-bottom: 0; grid-row: span 2; }
  .dcard__head { grid-column: 2; }
  .dcard__sym { grid-column: 2; margin-top: 18px; }
  .dcard__pick { grid-column: 2; margin-top: 18px; }
  /* symptoms run two-up on tablet, where there is width for it */
  .dcard__sym ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .diag:hover .dcard { opacity: 1; }
}

/* Mobile — single column throughout, tighter rhythm */
@media (max-width: 700px) {
  .dcard { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 24px 20px; }
  .dcard__ic { width: 44px; height: 44px; border-radius: var(--r-sm); }
  .dcard__ic svg { width: 22px; height: 22px; }
  .dcard h3 { font-size: 1.25rem; }
  .dcard__sym ul { grid-template-columns: 1fr; }
  .diag-out { grid-template-columns: 1fr; gap: 14px; }
  .diag-out__k { justify-self: start; }
}

/* Small phone — icon moves above the heading so text keeps its measure */
@media (max-width: 420px) {
  .dcard { grid-template-columns: 1fr; }
  .dcard__ic { grid-row: auto; margin-bottom: 16px; }
  .dcard__head, .dcard__sym, .dcard__pick { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .diag::after { display: none; }
  .dcard { opacity: 1; transform: none; }
  .dcard__ic svg [data-draw] { stroke-dashoffset: 0; }
}

/* In the tablet/mobile grid layout the pick pill is a grid item, so
   align-self alone will not stop it filling the column. */
@media (max-width: 1040px) {
  .dcard__pick { justify-self: start; }
}

/* =========================================================
   THE JOURNEY LINE — where growth actually breaks
   One buyer's path, three points it can fail at. This is the
   only version of this section that adds information rather
   than restating it: the position of each break is the reason
   the three need different answers.

   Desktop  : horizontal track, three columns
   Tablet   : same track, tighter type and spacing
   Mobile   : the track rotates into a vertical descent
   ========================================================= */

.jl-band { position: relative; overflow: hidden; }
.jl-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 10% 6%, rgba(196,240,66,.09), transparent 62%),
    radial-gradient(48% 38% at 94% 96%, rgba(196,240,66,.06), transparent 60%);
}

/* ---------- framing ---------- */
.jl-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 76px); align-items: end; }
.jl-head__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.04em;
}
.jl-head__h em { font-style: normal; color: var(--lime); }
.jl-head__p p { color: rgba(255,255,255,.68); font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.65; }
.jl-head__p p + p { margin-top: .9em; color: rgba(255,255,255,.8); }
.jl-head__p em { font-style: normal; color: var(--lime); }

/* ---------- the track ---------- */
.jl { margin-top: clamp(40px, 6vw, 72px); }
.jl__track { position: relative; padding-top: 46px; }

.jl__stops { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.jl__stop {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center;
}

.jl__rail { position: relative; height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; }
/* the line fades out to the right — the journey stops when it breaks */
.jl__rail::after {
  content: ''; position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--lime-deep), rgba(168,219,30,.15));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.6s var(--ease);
}
.jl.is-in .jl__rail::after { transform: scaleX(1); }

.jl__breaks { display: grid; grid-template-columns: repeat(3, 1fr); }
.jl__break { position: relative; padding: 32px 18px 0; text-align: center; }

.jl__mark {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--night); border: 2px solid var(--lime);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .5s var(--ease);
}
.jl.is-in .jl__mark { opacity: 1; }
.jl.is-in .jl__break:nth-child(1) .jl__mark { transition-delay: .35s; }
.jl.is-in .jl__break:nth-child(2) .jl__mark { transition-delay: .75s; }
.jl.is-in .jl__break:nth-child(3) .jl__mark { transition-delay: 1.15s; }
.jl__mark::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

.jl__break h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.03em; margin-bottom: 10px;
}

/* the plain sentence is the thing read first — size and weight say so */
.jl__plain {
  font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 500; line-height: 1.4;
  color: rgba(255,255,255,.92); max-width: 22ch; margin-inline: auto;
}

/* one shop metaphor across all three, so it is learned once */
.jl__eg {
  display: block; margin-top: 11px; font-size: .88rem; line-height: 1.5;
  color: rgba(255,255,255,.52); max-width: 28ch; margin-inline: auto;
}
.jl__eg::before { content: '\201C'; }
.jl__eg::after  { content: '\201D'; }

.jl__where {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--lime); opacity: .85;
}

/* ---------- closing line ---------- */
.jl__end {
  margin-top: clamp(34px, 5vw, 56px); padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid rgba(255,255,255,.13);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: center;
}
.jl__end__k {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime);
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(196,240,66,.3); white-space: nowrap;
}
.jl__end p { color: rgba(255,255,255,.74); font-size: clamp(.98rem, 1.3vw, 1.14rem); line-height: 1.6; }

/* =========================================================
   TABLET — same track, tightened
   ========================================================= */
@media (max-width: 1040px) {
  .jl-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .jl__break { padding-inline: 10px; }
  .jl__plain { max-width: none; }
  .jl__eg { max-width: none; }
}

/* =========================================================
   MOBILE — the journey becomes a descent, which is how a
   phone is actually read. The rail turns vertical rather
   than three columns crushing to 100px each.
   ========================================================= */
@media (max-width: 720px) {
  .jl__track { padding-top: 0; }
  .jl__rail, .jl__stops { display: none; }

  .jl__breaks {
    grid-template-columns: 1fr; gap: 0;
    padding-left: 30px; position: relative;
  }
  /* the descent line, drawn once for the whole column */
  .jl__breaks::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
    background: rgba(255,255,255,.16); border-radius: 2px;
  }
  .jl__breaks::after {
    content: ''; position: absolute; left: 0; top: 6px; width: 2px; height: 0;
    background: linear-gradient(180deg, var(--lime-deep), rgba(168,219,30,.15));
    border-radius: 2px; transition: height 1.6s var(--ease);
  }
  .jl.is-in .jl__breaks::after { height: calc(100% - 12px); }

  .jl__break { text-align: left; padding: 0 0 30px; }
  .jl__break:last-child { padding-bottom: 0; }
  .jl__mark { left: -39px; top: 3px; transform: none; }

  /* the stop label reappears above each break, where it belongs on a list */
  .jl__break::before {
    content: attr(data-stop); display: block; margin-bottom: 7px;
    font-family: var(--font-mono); font-size: .56rem; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255,255,255,.42);
  }
  .jl__plain, .jl__eg { margin-inline: 0; }
  .jl__end { grid-template-columns: 1fr; gap: 14px; }
  .jl__end__k { justify-self: start; }
}

@media (max-width: 420px) {
  .jl__breaks { padding-left: 26px; }
  .jl__mark { left: -35px; width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .jl__rail::after { transform: scaleX(1); }
  .jl__mark { opacity: 1; }
  .jl .jl__breaks::after { height: calc(100% - 12px); }
}

/* The three breaks hold different amounts of text, so push the
   "breaks at…" label to the bottom and let all three line up. */
.jl__break { display: flex; flex-direction: column; }
.jl__where { margin-top: auto; padding-top: 16px; align-self: center; }
/* balance the wrap so "never heard of / you." does not orphan a word */
.jl__plain { text-wrap: balance; }
.jl__eg { text-wrap: pretty; }

@media (max-width: 720px) {
  .jl__where { align-self: flex-start; padding-top: 12px; margin-top: 0; }
}

/* =========================================================
   PROJECT SCALEUP — "what you keep"
   Answers the question a buyer is actually asking: what do I
   still have on month seven? Left is what a normal retainer
   leaves behind, right is what this leaves. The gap between
   the two columns is the argument.

   Outcomes only. Team sizes and internal mechanics stay off
   the page — they describe how Growis works, not what the
   client got.
   ========================================================= */

.sup-band { position: relative; overflow: hidden; }
.sup-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 40% at 88% 4%, rgba(196,240,66,.09), transparent 62%),
    radial-gradient(45% 36% at 6% 96%, rgba(196,240,66,.06), transparent 60%);
}

/* ---------- head ---------- */
.sup-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1; letter-spacing: -.045em;
  margin-top: 16px;
}
.sup-head h2 em { font-style: normal; color: var(--lime); }
.sup-head__sub {
  margin-top: 20px; font-size: clamp(1.02rem, 1.5vw, 1.25rem); font-weight: 500;
  line-height: 1.45; color: rgba(255,255,255,.9); max-width: 46ch;
}

/* ---------- the comparison ---------- */
.sup { margin-top: clamp(34px, 5vw, 58px); display: grid; grid-template-columns: .82fr 1.18fr; }

.sup__col { padding: clamp(22px, 3vw, 30px) clamp(26px, 3.6vw, 46px) clamp(22px, 3vw, 30px) 0; }
.sup__col--keep {
  padding: clamp(22px, 3vw, 30px) 0 clamp(22px, 3vw, 30px) clamp(26px, 3.6vw, 46px);
  border-left: 1px solid rgba(255,255,255,.15);
}
.sup__k {
  display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 20px;
}

/* what a normal retainer leaves */
.sup__lose li {
  display: grid; grid-template-columns: 18px 1fr; gap: 13px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 1rem; color: rgba(255,255,255,.5); line-height: 1.45;
}
.sup__lose li:last-child { border-bottom: 0; }
.sup__lose li::before { content: '✕'; color: rgba(255,255,255,.3); font-size: .84em; }

/* what this leaves */
.sup__keep li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sup__keep li:last-child { border-bottom: 0; }
.sup__keep li::before {
  content: '✓'; color: var(--lime); font-weight: 700; font-size: 1.05rem; line-height: 1.35;
  opacity: 0; transform: scale(.6);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.sup.is-in .sup__keep li::before { opacity: 1; transform: none; }
.sup.is-in .sup__keep li:nth-child(1)::before { transition-delay: .10s; }
.sup.is-in .sup__keep li:nth-child(2)::before { transition-delay: .22s; }
.sup.is-in .sup__keep li:nth-child(3)::before { transition-delay: .34s; }
.sup.is-in .sup__keep li:nth-child(4)::before { transition-delay: .46s; }

.sup__keep b {
  display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em;
  color: #fff; line-height: 1.3;
}
.sup__keep span {
  display: block; margin-top: 6px; font-size: .92rem; line-height: 1.5;
  color: rgba(255,255,255,.58);
}

/* the client's own result — safe to publish, and the point */
.sup__result {
  margin-top: clamp(24px, 3.4vw, 34px); padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.55; color: rgba(255,255,255,.82);
}
.sup__result strong { color: var(--lime); font-weight: 600; }

/* ---------- CTA ---------- */
.sup__cta { margin-top: clamp(30px, 4vw, 44px); }

/* =========================================================
   TABLET — the comparison stays side by side, because the
   contrast is the whole argument.
   ========================================================= */
@media (max-width: 1040px) {
  .sup { grid-template-columns: 1fr 1.15fr; }
  .sup__col { padding-right: clamp(18px, 2.8vw, 28px); }
  .sup__col--keep { padding-left: clamp(18px, 2.8vw, 28px); }
  .sup__lose li, .sup__keep b { font-size: .98rem; }
}

/* =========================================================
   MOBILE — stacked, but the contrast is preserved: the old
   way sits dimmed, the kept things in a lime block, so the
   comparison survives losing the side-by-side.
   ========================================================= */
@media (max-width: 760px) {
  .sup { grid-template-columns: 1fr; gap: 12px; }
  .sup__col {
    padding: 20px; border-radius: var(--r-md);
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1);
  }
  .sup__col--keep {
    padding: 20px; border-left: 1px solid rgba(196,240,66,.3);
    background: rgba(196,240,66,.07); border-color: rgba(196,240,66,.26);
  }
  .sup__lose li { padding: 12px 0; }
  .sup__keep li { padding: 14px 0; }
}

@media (max-width: 420px) {
  .sup__col, .sup__col--keep { padding: 18px 16px; }
  .sup__keep li { grid-template-columns: 19px 1fr; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sup__keep li::before { opacity: 1; transform: none; }
}

/* ---------- Ways to work: three sizes of engagement, smallest first ----------
   Ordered left to right by commitment. Only the third card is dark, so the
   eye lands on it last and reads it as the destination rather than as one
   more item in a list. */
.ways {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px); align-items: stretch;
}
.ways__c {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 28px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--hairline);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.ways__c:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(20,18,28,.4); }
.ways__c--deep { background: var(--night); border-color: var(--night); color: #F0EEE9; }
.ways__c--deep:hover { box-shadow: 0 18px 44px -22px rgba(20,18,28,.7); }

.ways__badge {
  position: absolute; top: -10px; right: 20px;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--lime); color: var(--ink);
  padding: 6px 13px; border-radius: var(--r-pill);
}

.ways__n {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px;
}
.ways__c--deep .ways__n { color: rgba(255,255,255,.5); }

.ways__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.62rem); letter-spacing: -.035em; line-height: 1.05;
  margin: 0 0 9px;
}
.ways__c--deep .ways__h { color: var(--lime); }

.ways__say { font-size: clamp(.96rem, 1.1vw, 1.05rem); line-height: 1.5; color: var(--ink-2); }
.ways__c--deep .ways__say { color: rgba(255,255,255,.72); }

.ways__how {
  margin: 16px 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px solid var(--hairline-2); display: grid; gap: 8px;
}
.ways__c--deep .ways__how { border-top-color: rgba(255,255,255,.14); }
.ways__how li {
  position: relative; padding-left: 17px;
  font-size: .93rem; line-height: 1.45;
}
.ways__how li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep);
}

/* the meta rows sit at the foot of every card, so the three line up */
.ways__meta { margin-top: auto; padding-top: 18px; display: grid; gap: 7px; }
.ways__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.ways__row b { color: var(--ink); font-weight: 700; text-align: right; }
.ways__c--deep .ways__row { color: rgba(255,255,255,.5); }
.ways__c--deep .ways__row b { color: #F0EEE9; }

.ways__foot {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.ways__foot p { font-size: 1rem; color: var(--ink-2); }

/* Tablet — full-width rows rather than three squeezed columns. The detail
   under each door is what makes the choice, so it must not be dropped. */
@media (max-width: 1040px) {
  .ways { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .ways__c { padding: 22px 22px 24px; }
  .ways__badge { top: -9px; right: 18px; }
}
@media (max-width: 620px) {
  .ways__row { flex-direction: column; gap: 2px; }
  .ways__row b { text-align: left; }
  .ways__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* The human check on the booking step. Centred, and given room above the
   button so it never looks bolted on. */
.bk__ts { margin-top: 18px; display: flex; justify-content: center; min-height: 66px; }