/* ==========================================================================
   GrowNav — "Signal" design system
   ---------------------------------------------------------------------------
   Art direction: warm bone paper, warm ink, one vermilion signal.
   A heavy display grotesque used at scale, so typography IS the graphic.
   Photography is never decoration — it lives inside a browser, a phone, a
   social post or an ad creative, so every image reads as work output.

   Section rhythm is deliberately varied. There is no single "section header"
   component repeating down the page; there are several, used in sequence:
     .kick   compact label + headline (workhorse, but never twice in a row)
     .mark   oversized index numeral set against the headline
     .slab   full-bleed typographic statement — type as the whole composition
     .band   horizontal strip, content laid across it
     (none)  work rows and creative walls carry no header at all

   1. Tokens          6. Mockups (browser / phone / post / creative)
   2. Reset & base    7. Sections
   3. Layout          8. Journal
   4. Typography      9. Motion
   5. Components     10. Responsive
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root{
  /* --- Surfaces. Warm, never clinical. --------------------------------- */
  --paper:    #F5F2ED;   /* the page. Bone, not white. */
  --paper-2:  #EAE5DC;   /* recessed panels, image wells */
  --card:     #FFFFFF;   /* objects only — mockups read as things on a desk */
  --ink:      #12100E;   /* warm near-black */
  --ink-2:    #1D1A17;   /* raised surface inside a dark section */

  --text:     #12100E;
  --muted:    #56504A;   /* 6.9:1 on paper */
  --faint:    #6F6860;   /* 4.9:1 on paper — safe for small labels */

  /* --- What the accent MEANS ------------------------------------------
     Vermilion marks movement toward an outcome. That is the whole rule, and
     it is why the accent is loud in some places and absent in others:

       · the conversion action        buttons, the CTA band
       · the mechanism                the funnel band, the approach sequence
       · the index of curated work    the work-row numerals
       · a flag that must be seen     sample-project tags, honesty notes, form state
       · interaction                  hover, the current nav item

     It is deliberately NOT used for structural labels, list bullets, card
     numbers or "one word per headline". Those were decoration; colour that
     means everything means nothing. Display type takes the accent exactly
     twice per page — the h1, which states the page thesis, and the single
     slab statement. Elsewhere the serif italic carries emphasis, so voice
     and claim stay distinguishable.
     ------------------------------------------------------------------- */

  /* --- One signal colour, in three jobs. -------------------------------
     --brand      never re-maps. Button fills, the wordmark dot, the nav rule.
                  White text on it clears AA (4.5:1), which the brighter
                  vermilion it replaced did not.
     --signal     rules, borders, arrows and display-size type. Re-maps per
                  surface so it stays visible on near-black.
     --signal-ink small text and micro-labels. Darker on light surfaces,
                  because 11px of accent has to clear 4.5:1 too.            */
  --brand:       #DB3A14;
  --brand-deep:  #B92F0F;
  --signal:      #DB3A14;
  --signal-ink:  #C0330F;

  /* --- Structure ------------------------------------------------------- */
  --line:    #DBD5CA;
  --line-2:  #C6BFB2;
  --line-3:  #ADA598;
  --hover:   #EDE8E0;

  /* --- Type ------------------------------------------------------------ */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, Georgia, serif;

  /* A genuinely dramatic scale. --t-mega is the signature: it is allowed to
     fill the viewport and be read as a graphic, not as a heading. */
  --t-mega:    clamp(2.6rem, 8.9vw, 8.6rem);
  --t-display: clamp(2.4rem, 6.4vw, 5.6rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.8rem);
  --t-h2:      clamp(1.7rem, 3.1vw, 2.8rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --t-lead:    clamp(1.15rem, 1.5vw, 1.45rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-micro:   .8125rem;
  --t-meta:    .6875rem;

  /* --- Rhythm ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --shell:  1520px;
  --shell-narrow: 940px;
  --sec:    clamp(4.5rem, 8vw, 8.5rem);
  --sec-lg: clamp(6rem, 11vw, 12rem);

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 78px;
}

/* Recessed warm panel */
.tint{
  --paper: #EAE5DC; --paper-2: #DFD9CE;
  --faint: #6B6459;   /* the paper value drops below 4.5:1 on this surface */
  --line: #CFC8BB; --line-2: #B9B1A3; --hover: #E2DCD1;
  background: #EAE5DC;
}

/* Dark surface. Every token re-maps, so components need no dark variants. */
.inverse{
  --paper: #12100E; --paper-2: #1D1A17; --card: #1D1A17;
  --text: #FAF8F5;
  --muted: #A9A199;    /* 7.2:1 on ink */
  --faint: #8C857C;    /* 5.0:1 on ink */
  --signal: #FF5C33;   /* lifted so it holds contrast on near-black */
  --signal-ink: #FF7A57;
  --line:   rgba(255,255,255,.13);
  --line-2: rgba(255,255,255,.22);
  --line-3: rgba(255,255,255,.34);
  --hover:  #201C19;
  background: #12100E;
  color: #FAF8F5;
}

/* Signal surface. Used once per page at most, at full width, as an event.
   It runs on the deep vermilion, not the bright one: at .86 opacity the
   supporting copy still clears 4.5:1, which it cannot do on the brighter
   tone. Depth also reads more confident than a hot orange field. */
.blaze{
  --paper: #B92F0F; --paper-2: #A32809; --card: #FFFFFF;
  --text: #FFFFFF;
  --muted: rgba(255,255,255,.86);
  --faint: rgba(255,255,255,.86);
  --signal: #FFFFFF; --signal-ink: #FFFFFF;
  --line: rgba(255,255,255,.28); --line-2: rgba(255,255,255,.42); --line-3: rgba(255,255,255,.58);
  --hover: #A32809;
  background: #B92F0F;
  color: #FFFFFF;
}

/* 2. RESET & BASE ======================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-open{ overflow: hidden; }

h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd,fieldset{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
fieldset{ border: 0; padding: 0; min-width: 0; }
img,svg,video{ max-width: 100%; height: auto; display: block; }
button,input,select,textarea{ font: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--signal); color: #FFFFFF; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip{
  position: absolute; left: 1rem; top: -140%;
  z-index: 200; background: var(--ink); color: #FFF;
  padding: .9rem 1.3rem; font-size: var(--t-small); font-weight: 600;
}
.skip:focus{ top: 1rem; }

.vh{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. LAYOUT ============================================================== */
.shell{ width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow{ max-width: var(--shell-narrow); }
/* Gutters only, no max width: work rows and creative walls run to the edges. */
.bleed{ width: 100%; padding-inline: var(--gutter); }
section{ position: relative; }

.pad{ padding-block: var(--sec); }
.pad-lg{ padding-block: var(--sec-lg); }
.pad-t{ padding-top: var(--sec); }
.pad-b{ padding-bottom: var(--sec); }
.rule{ border: 0; border-top: 1px solid var(--line); margin: 0; }

:where([id]){ scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.split{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,4.5vw,5rem); align-items: start; }
.split--even{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split--wide{ grid-template-columns: minmax(0,4fr) minmax(0,8fr); }
.split--flip{ grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.sticky{ position: sticky; top: calc(var(--header-h) + 2.5rem); }

.stack{ display: grid; gap: clamp(1rem,1.7vw,1.4rem); align-content: start; }
.stack-lg{ display: grid; gap: clamp(1.8rem,3.2vw,2.8rem); align-content: start; }
.endrow{ display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; }

/* 4. TYPOGRAPHY ========================================================== */
/* Display settings share one voice: heavy Archivo, very tight. Weight and
   scale do the work that colour and effects usually get asked to do. */
.mega,.display,.h1,.h2{ font-weight: 800; text-wrap: balance; }
.mega{ font-size: var(--t-mega); line-height: .84; letter-spacing: -.045em; }
.display{ font-size: var(--t-display); line-height: .9; letter-spacing: -.04em; }
.h1{ font-size: var(--t-h1); line-height: .95; letter-spacing: -.036em; }
.h2{ font-size: var(--t-h2); line-height: 1; letter-spacing: -.032em; }
.h3{ font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.018em; font-weight: 700; }
.h4{ font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }

/* Editorial italic — one phrase at a time, never twice in a heading.
   It is a change of voice, not a decoration. */
.em{ font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
.mega .em,.display .em,.h1 .em,.h2 .em{ font-size: 1.1em; line-height: .86; }

.sig{ color: var(--signal); }
/* A word the eye must not miss, ruled in signal underneath. */
.under{
  background-image: linear-gradient(var(--signal),var(--signal));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% .085em;
  padding-bottom: .03em;
}

.lead{ font-size: var(--t-lead); line-height: 1.48; color: var(--muted); letter-spacing: -.008em; text-wrap: pretty; max-width: 42ch; }
.lead-wide{ max-width: 58ch; }
.body{ color: var(--muted); text-wrap: pretty; }
.measure{ max-width: 62ch; }
.measure-sm{ max-width: 46ch; }
.small{ font-size: var(--t-small); color: var(--muted); }

/* Micro label — squared, tracked, bold. The connective tissue of the site. */
.label{
  font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: .17em; font-weight: 700; color: var(--faint);
  display: inline-flex; align-items: center; gap: .6rem;
}
.label--tick::before{ content:""; width: 1.4rem; height: 2px; background: var(--signal); flex: none; }
.num{ font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }

/* Oversized index numeral — outlined so it composes rather than shouts. */
.bignum{
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 800; line-height: .78; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-3);
  font-variant-numeric: tabular-nums;
  display: block;
}
/* Without text-stroke support the numeral would be invisible rather than
   outlined, so fall back to a flat tone. */
@supports not (-webkit-text-stroke: 1px #000){
  .bignum{ color: var(--line-3); }
}
.bignum--solid{ color: var(--signal); -webkit-text-stroke: 0; }

/* 5. COMPONENTS ========================================================== */

/* --- Buttons ---------------------------------------------------------- */
/* Primary is signal-filled. The main conversion action is the loudest thing
   on any screen it appears on, and it looks the same on every surface. */
.btn{
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 1.6rem;
  background: var(--brand);
  color: #FFFFFF;
  border: 2px solid var(--brand);
  font-size: var(--t-small); font-weight: 700; line-height: 1;
  letter-spacing: .01em;
  cursor: pointer; overflow: hidden;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn::after{
  content:""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .42s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{ transform: translateY(0); }
.btn:hover{ border-color: var(--ink); }
.btn .arw{ transition: transform .35s var(--ease-out); flex: none; }
.btn:hover .arw{ transform: translateX(5px); }

.btn--ghost{ background: transparent; color: var(--text); border-color: var(--line-3); }
.btn--ghost::after{ background: var(--brand); }
.btn--ghost:hover{ color: #FFFFFF; border-color: var(--brand); }
.btn--ink{ background: var(--ink); border-color: var(--ink); }
.btn--ink::after{ background: var(--brand); }
.btn--ink:hover{ border-color: var(--brand); }
.btn--lg{ padding: 1.32rem 1.9rem; font-size: 1rem; }
.btn-row{ display: flex; flex-wrap: wrap; gap: .9rem; }

/* On near-black the ghost outline needs white; on signal the primary
   inverts entirely so it stays the loudest element. */
.inverse .btn--ghost{ color: #FFFFFF; }
.blaze .btn{ background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.blaze .btn::after{ background: var(--ink); }
.blaze .btn:hover{ color: #FFFFFF; border-color: var(--ink); }
.blaze .btn--ghost{ background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.blaze .btn--ghost::after{ background: #FFFFFF; }
.blaze .btn--ghost:hover{ color: var(--ink); border-color: #FFFFFF; }

/* Text link with a rule that sweeps in signal */
.tlink{
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-small); font-weight: 700; letter-spacing: .01em;
  padding-bottom: .4rem; position: relative;
  border-bottom: 2px solid var(--line-2);
  transition: color .28s var(--ease);
}
.tlink::after{
  content:""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease-out);
}
.tlink:hover{ color: var(--signal-ink); }
.tlink:hover::after{ transform: scaleX(1); }
.tlink .arw{ transition: transform .35s var(--ease-out); }
.tlink:hover .arw{ transform: translateX(4px); }

/* --- Header ----------------------------------------------------------- */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(245,242,237,.86);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease);
}
/* Pages that open on a dark hero carry a dark header. It is painted rather
   than transparent: against the hero it is invisible either way, but if JS
   never runs the .is-stuck class never lands and a transparent header would
   leave white nav text sitting on a light section further down. */
.hdr--dark{ background: rgba(18,16,14,.88); }
.hdr--dark .wordmark{ color: #FAF8F5; }
.hdr--dark .nav a{ color: rgba(250,248,245,.72); }
.hdr--dark .nav a:hover,.hdr--dark .nav a[aria-current="page"]{ color: #FFFFFF; }
.hdr--dark .burger span,.hdr--dark .burger span::before,.hdr--dark .burger span::after{ background: #FAF8F5; }
.hdr--dark.is-stuck{ border-bottom-color: rgba(255,255,255,.12); }

.hdr__in{
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.5rem;
}
.hdr.is-stuck{ border-bottom-color: var(--line); height: 66px; }

.wordmark{
  display: inline-flex; align-items: center;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--ink); transition: color .3s var(--ease);
}
.wordmark .dot{
  width: 6px; height: 6px; background: var(--brand);
  display: inline-block; margin-left: .3em; margin-bottom: .06em; flex: none;
}

.nav{ display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem,2.1vw,2.2rem); }
.nav a{
  font-size: var(--t-small); font-weight: 500;
  position: relative; padding-block: .45rem; color: var(--muted);
  transition: color .25s var(--ease);
}
.nav a::after{
  content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform: scaleX(1); }
.nav a[aria-current="page"]{ color: var(--ink); font-weight: 700; }

.hdr__cta{ display: flex; align-items: center; gap: 1rem; }
.hdr .btn{ padding: .82rem 1.15rem; gap: .9rem; font-size: var(--t-micro); }

.burger{
  display: none; width: 46px; height: 46px; margin-right: -12px;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
  position: relative; z-index: 101;
}
.burger span{ display: block; width: 24px; height: 2px; background: var(--ink); position: relative; transition: background-color .2s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink);
  transition: transform .35s var(--ease-out);
}
.burger span::before{ top: -7px; }
.burger span::after{ top: 7px; }
body.is-open .burger span{ background: transparent !important; }
body.is-open .burger span::before,body.is-open .burger span::after{ background: #FAF8F5 !important; }
body.is-open .burger span::before{ transform: translateY(7px) rotate(45deg); }
body.is-open .burger span::after{ transform: translateY(-7px) rotate(-45deg); }
body.is-open .hdr{ background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
body.is-open .wordmark{ color: #FAF8F5; }

/* --- Mobile menu ------------------------------------------------------- */
.menu{
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: #FAF8F5;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
body.is-open .menu{ opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.menu__nav{ display: grid; border-top: 1px solid rgba(255,255,255,.13); }
.menu__nav a{
  display: flex; align-items: baseline; gap: 1rem;
  font-size: clamp(1.7rem,7.4vw,2.4rem);
  line-height: 1.15; letter-spacing: -.038em; font-weight: 800;
  padding-block: .44em;
  border-bottom: 1px solid rgba(255,255,255,.13);
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.menu__nav a span{ font-size: var(--t-meta); letter-spacing: .16em; color: #FF5C33; font-weight: 700; }
.menu__nav a:hover,.menu__nav a[aria-current="page"]{ color: #FF5C33; }
.menu__nav a:hover{ padding-left: .4rem; }
.menu__foot{ display: grid; gap: 1.1rem; padding-top: 1.2rem; }
.menu__foot .btn{ width: 100%; }
.menu__foot p{ color: #A9A199; font-size: var(--t-small); }
.menu__foot a:hover{ color: #FFFFFF; }

/* --- Section headers --------------------------------------------------- */
/* .kick — the compact workhorse. Label, headline, optional lead and link. */
.kick{ display: grid; gap: clamp(1rem,1.6vw,1.4rem); margin-bottom: clamp(2.4rem,4.5vw,4rem); }
.kick__top{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.kick--center{ justify-items: center; text-align: center; }
.kick--center .lead{ margin-inline: auto; }

/* .mark — an oversized numeral against the headline. Used where a section
   needs weight without another rule-and-label header. */
.mark{
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: clamp(1.2rem,3vw,3rem); align-items: start;
  margin-bottom: clamp(2.4rem,4.5vw,4rem);
}
.mark__body{ display: grid; gap: clamp(1rem,1.6vw,1.4rem); }

/* .slab — full-bleed typographic statement. The type is the composition;
   nothing else is allowed in here. */
.slab{ padding-block: clamp(4rem,9vw,9.5rem); }
.slab__t{
  font-size: var(--t-mega); font-weight: 800;
  line-height: .86; letter-spacing: -.045em;
  text-wrap: balance;
}
.slab__foot{
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2rem,4vw,3.4rem);
  padding-top: clamp(1.2rem,2vw,1.8rem);
  border-top: 2px solid var(--line-2);
}

/* --- Capability wall --------------------------------------------------- */
/* A dense index of what the studio actually does. Reads as a contents page
   for the whole business, not as a list of cards. */
.wall{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--line);
}
.wall li{
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: clamp(1rem,1.7vw,1.4rem) clamp(.9rem,1.4vw,1.2rem);
  display: flex; align-items: baseline; gap: .75rem;
  font-size: var(--t-small); font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.wall li:nth-child(4n){ border-right: 0; }
.wall li:hover{ background: var(--hover); }
.wall li b{ font-size: var(--t-meta); letter-spacing: .1em; color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }

/* --- Ticker ------------------------------------------------------------ */
/* A single quiet horizontal pass. Pauses on hover, stops entirely under
   reduced-motion — and the content still reads as a static list if it does. */
.ticker{ overflow: hidden; border-block: 2px solid var(--line-2); padding-block: clamp(.9rem,1.5vw,1.2rem); }
.ticker__in{ display: flex; width: max-content; }
/* Only animates once JS has cloned the set — a single set sliding to -50%
   would leave a gap halfway through every loop. */
.ticker__in.is-live{ animation: slide 46s linear infinite; }
.ticker:hover .ticker__in{ animation-play-state: paused; }
.ticker__set{ display: flex; align-items: center; flex: none; }
.ticker span{
  display: inline-flex; align-items: center; gap: clamp(1.2rem,2.4vw,2.4rem);
  padding-right: clamp(1.2rem,2.4vw,2.4rem);
  font-size: clamp(1.1rem,2.2vw,1.9rem); font-weight: 800; letter-spacing: -.03em;
  white-space: nowrap;
}
.ticker span::after{ content:""; width: 7px; height: 7px; background: var(--signal); flex: none; }
@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker__in{ animation: none; width: 100%; }
  .ticker__set:nth-child(2){ display: none; }
}

/* --- Statement pair ---------------------------------------------------- */
.pitch{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,6rem); align-items: end; }

/* --- Column set --------------------------------------------------------
   Three supporting points under one rule. Deliberately not a card grid: it
   reads as a continuation of the statement above it, not as new objects. */
.cols{
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(1.4rem,3vw,3rem);
  border-top: 2px solid var(--line-2); padding-top: clamp(1.4rem,2.2vw,2rem);
}
.cols > div{ display: grid; gap: .5rem; align-content: start; }
.cols h3{ font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.28; }
.cols p{ font-size: var(--t-small); color: var(--muted); max-width: 38ch; }

/* --- Numbered belief / claim grid -------------------------------------- */
/* Cards with real presence — a filled surface and a signal rule that draws
   across on hover, rather than a hairline box. */
.grid-3{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-2{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-4{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell{
  background: var(--paper);
  padding: clamp(1.5rem,2.4vw,2.2rem);
  display: grid; gap: .7rem; align-content: start;
  position: relative;
  transition: background-color .3s var(--ease);
}
.cell::before{
  content:""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--signal); transition: width .45s var(--ease-out);
}
.cell:hover{ background: var(--hover); }
.cell:hover::before{ width: 100%; }
.cell__n{ font-size: var(--t-meta); letter-spacing: .14em; color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.cell h3{ font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.28; }
.cell p{ font-size: var(--t-small); color: var(--muted); max-width: 36ch; }

/* --- Ruled list -------------------------------------------------------- */
.rlist{ border-top: 2px solid var(--line-2); }
.rlist li{ border-bottom: 1px solid var(--line); }
.rlist .row{
  display: grid; grid-template-columns: minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);
  align-items: baseline; gap: .5rem 2rem;
  padding-block: clamp(1.1rem,1.8vw,1.5rem);
  transition: color .25s var(--ease), padding-left .35s var(--ease-out);
}
.rlist .ttl{ font-size: clamp(1.1rem,1.8vw,1.45rem); letter-spacing: -.028em; font-weight: 700; line-height: 1.15; }
.rlist .sub{ font-size: var(--t-small); color: var(--muted); max-width: 48ch; }
a.row:hover{ color: var(--signal-ink); padding-left: .6rem; }

/* --- Inline CTA -------------------------------------------------------- */
.cta-inline{
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1.4rem 2.5rem; align-items: center;
  border-block: 2px solid var(--line-2);
  padding-block: clamp(1.6rem,2.6vw,2.2rem);
}
.cta-inline p{ font-size: clamp(1.15rem,1.9vw,1.6rem); letter-spacing: -.028em; font-weight: 700; max-width: 34ch; line-height: 1.12; }

/* --- Note -------------------------------------------------------------- */
.note{
  display: block; font-size: var(--t-small); color: var(--faint); line-height: 1.6;
  border-left: 3px solid var(--signal); padding: .15rem 0 .15rem 1.1rem;
  max-width: 64ch;
}
.note strong{ color: var(--muted); font-weight: 700; }

/* --- Chips ------------------------------------------------------------- */
.chips{ display: flex; flex-wrap: wrap; gap: .45rem; }
.chip{
  font-size: var(--t-micro); font-weight: 500;
  padding: .5rem .85rem; border: 1px solid var(--line-2); color: var(--muted);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover{ border-color: var(--signal-ink); color: var(--signal); }
.tag{
  display: inline-flex; align-items: center;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; padding: .45rem .75rem;
  background: var(--ink); color: #FAF8F5;
}
.tag--sig{ background: var(--signal); color: #FFFFFF; }
.tag--out{ background: transparent; color: var(--faint); border: 1px solid var(--line-2); }

/* 6. MOCKUPS ============================================================= */
/* Everything below turns a photograph into evidence of work: it is shown
   inside the thing GrowNav would actually have built. */

/* A mockup is an OBJECT, not a surface-aware component. It is always a light
   thing sitting on whatever ground the section provides, so it re-maps the
   tokens locally rather than inheriting them. Without this, a browser frame
   placed on the accent surface renders its own UI text white-on-white — which
   is exactly what happened when the entry offer moved onto it. The phone is
   excluded: it is a dark object by design. */
.browser,.post,.ad,.leadcard{
  --text: #12100E;
  --muted: #56504A;
  --faint: #6F6860;
  --card: #FFFFFF;
  --paper: #F5F2ED;
  --paper-2: #EAE5DC;
  --line: #DBD5CA;
  --line-2: #C6BFB2;
  --line-3: #ADA598;
  --signal: #DB3A14;
  --signal-ink: #C0330F;
  color: var(--text);
}

/* --- Browser window ---------------------------------------------------- */
.browser{
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -32px rgba(18,16,14,.4);
  overflow: hidden;
}
.inverse .browser{ border-color: rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.browser__bar{
  display: flex; align-items: center; gap: .38rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.browser__bar i{ width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); display: block; flex: none; }
.browser__url{
  margin-left: .6rem; font-size: var(--t-meta); letter-spacing: .04em;
  color: var(--faint); background: var(--card); padding: .25rem .7rem;
  border: 1px solid var(--line); border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.browser img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
/* A miniature page below the image, so the frame reads as a website rather
   than a photograph in a box. */
.browser__page{
  padding: clamp(.85rem,1.4vw,1.15rem);
  display: grid; gap: .45rem; background: var(--card);
}
.browser__h{ font-size: clamp(.95rem,1.15vw,1.1rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.1; color: var(--ink); }
.browser__m{ font-size: .7rem; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.browser__cta{
  justify-self: start; margin-top: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--brand); color: #FFFFFF; padding: .45rem .8rem;
}

/* --- Phone ------------------------------------------------------------- */
.phone{
  border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden;
  background: var(--card); aspect-ratio: 9/17.4; position: relative;
  box-shadow: 0 22px 50px -28px rgba(18,16,14,.45);
}
.inverse .phone{ border-color: rgba(255,255,255,.16); }
.phone img{ width: 100%; height: 100%; object-fit: cover; }
.phone__notch{
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 40%; height: 16px; border-radius: 99px; background: rgba(10,8,6,.72); z-index: 3;
}
/* Reel chrome: caption block over the bottom of the frame. */
.phone__reel{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 3.5rem .8rem .9rem;
  /* The caption sits over an arbitrary photograph, so the scrim holds at
     0.82 or darker everywhere the text actually is. */
  background: linear-gradient(to top, rgba(10,8,6,.95) 0%, rgba(10,8,6,.82) 48%, rgba(10,8,6,0) 100%);
  color: #FFFFFF; display: grid; gap: .3rem;
}
.phone__handle{ font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.phone__cap{ font-size: .68rem; color: rgba(255,255,255,.8); line-height: 1.4; }
.phone__ui{
  position: absolute; right: .6rem; bottom: 4.4rem; z-index: 2;
  display: grid; gap: .75rem; justify-items: center;
}
.phone__ui i{ width: 20px; height: 20px; border: 1.5px solid rgba(255,255,255,.85); display: block; }
.phone__ui i:nth-child(1){ border-radius: 0 50% 50% 50%; }
.phone__ui i:nth-child(2){ border-radius: 50% 50% 50% 0; }
.phone__ui i:nth-child(3){ border-radius: 3px; }

/* --- Social post ------------------------------------------------------- */
.post{
  background: var(--card); border: 1px solid var(--line-2);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
  box-shadow: 0 18px 44px -30px rgba(18,16,14,.4);
}
.inverse .post{ border-color: rgba(255,255,255,.14); }
.post__top{ display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.post__av{ width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #FFF; display: grid; place-items: center; font-size: .6rem; font-weight: 800; flex: none; }
.post__who{ font-size: .74rem; font-weight: 700; letter-spacing: -.01em; }
.post__meta{ font-size: .64rem; color: var(--faint); }
.post__img{ position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--paper-2); }
.post__img img{ width: 100%; height: 100%; object-fit: cover; }
.post__foot{ padding: .7rem .8rem .9rem; display: grid; gap: .45rem; }
.post__acts{ display: flex; gap: .55rem; }
.post__acts i{ width: 15px; height: 15px; border: 1.5px solid var(--line-3); display: block; }
.post__acts i:first-child{ border-radius: 50% 50% 50% 0; }
.post__acts i:nth-child(2){ border-radius: 0 50% 50% 50%; }
.post__cap{ font-size: .72rem; color: var(--muted); line-height: 1.45; }
.post__cap b{ color: var(--text); font-weight: 700; }

/* --- Type-led creative tile ------------------------------------------- */
/* A poster built from type and the signal colour alone — no photograph.
   These are the pieces that show the studio can make something from nothing. */
/* A poster is an object with its own tone, so the colours are fixed rather
   than inherited from the surface — an ink poster on an ink section would
   otherwise disappear. height:100% lets it match the tallest item in a row
   instead of leaving a gap under itself. */
.poster{
  /* width AND height are both pinned: with only height:100% set, a poster
     stretched to a taller sibling would compute its width from the aspect
     ratio and overflow its column. */
  aspect-ratio: 4/5; width: 100%; height: 100%;
  padding: clamp(1rem,1.8vw,1.5rem);
  display: grid; grid-template-rows: auto 1fr auto;
  background: #12100E; color: #FAF8F5;
  overflow: hidden; position: relative;
}
.poster--sig{ background: var(--brand); color: #FFFFFF; }
.poster--paper{ background: #FFFFFF; color: #12100E; border: 1px solid var(--line-2); }
.inverse .poster:not(.poster--sig):not(.poster--paper){ border: 1px solid var(--line-2); }
.poster__k{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; font-weight: 700; opacity: .72; }
.poster__t{
  align-self: center;
  font-size: clamp(1.5rem,3.1vw,2.5rem); font-weight: 800;
  line-height: .92; letter-spacing: -.04em; text-wrap: balance;
}
.poster__t .em{ font-size: 1.12em; }
.poster__f{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; font-weight: 700; opacity: .72; display: flex; justify-content: space-between; gap: 1rem; }
/* On the signal tone even a micro-label has to clear 4.5:1, so it runs at
   full opacity and separates by size and weight instead. */
.poster--sig .poster__k,.poster--sig .poster__f{ opacity: 1; }

/* --- Ad creative ------------------------------------------------------- */
/* Deliberately shaped like a paid social unit, because that is the product.
   Every one is labelled as a sample so it can never read as a real campaign. */
.ad{
  background: var(--card); border: 1px solid var(--line-2);
  display: grid; grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(18,16,14,.4);
}
.inverse .ad{ border-color: rgba(255,255,255,.14); }
.ad__top{ display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; }
.ad__av{ width: 24px; height: 24px; background: var(--brand); color: #FFF; display: grid; place-items: center; font-size: .58rem; font-weight: 800; flex: none; }
.ad__who{ font-size: .72rem; font-weight: 700; line-height: 1.15; }
.ad__spon{ font-size: .6rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.ad__copy{ padding: 0 .75rem .6rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.ad__img{ aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.ad__img img{ width: 100%; height: 100%; object-fit: cover; }
.ad__bar{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .75rem; background: var(--paper-2); }
.ad__h{ font-size: .74rem; font-weight: 800; letter-spacing: -.018em; line-height: 1.15; }
.ad__btn{ font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: var(--ink); color: #FAF8F5; padding: .4rem .65rem; flex: none; }

/* --- Media caption ----------------------------------------------------- */
.cap{ font-size: var(--t-small); color: var(--muted); margin-top: .85rem; max-width: 36ch; }
.cap strong{ color: var(--text); font-weight: 700; }
.mgrid-2{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.9rem,1.8vw,1.6rem); }
.mgrid-3{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.9rem,1.8vw,1.6rem); }
.mgrid-4{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(.9rem,1.8vw,1.6rem); }
/* Phones are tall and narrow, so this row never collapses to a single column —
   one full-width phone would be taller than the viewport. auto-fit handles
   both the two-phone and three-phone groupings without a second class. */
.phonerow{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  gap: clamp(.7rem,1.5vw,1.4rem);
}

/* 7. SECTIONS ============================================================ */

/* --- Hero -------------------------------------------------------------- */
/* Opens on near-black at full height. The headline is the composition; the
   mockup cluster to its side is the proof. */
.hero{
  padding-top: calc(var(--header-h) + clamp(2.5rem,5vw,4.5rem));
  padding-bottom: clamp(2.5rem,5vw,4.5rem);
  overflow: hidden;
}
.hero__top{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .8rem 2rem; padding-bottom: clamp(1rem,1.8vw,1.5rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem,4vw,3.4rem);
}
/* The headline runs the full width of the shell — at this size a 7fr column
   breaks it into four cramped lines. The proof sits underneath it. */
.hero__h{ max-width: 21ch; margin-bottom: clamp(.9rem,1.8vw,1.4rem); }
.hero__grid{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,4.5vw,5rem); align-items: end; }
.hero__sub{ display: grid; gap: clamp(1.6rem,2.6vw,2.2rem); max-width: 44ch; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: .9rem; }

/* The cluster: a browser, a phone and an ad creative overlapping, so the
   first screen shows three different kinds of output at once. */
/* The browser sits back; the ad and the phone come forward over it. The
   browser in this cluster is image-only, so nothing overlaps live text. */
.cluster{ position: relative; padding-bottom: clamp(2.5rem,6vw,5rem); }
.cluster__browser{ width: 100%; }
.cluster__phone{
  position: absolute; right: 1%; bottom: -2%; width: 27%; max-width: 172px; z-index: 2;
}
.cluster__ad{
  position: absolute; left: -3%; bottom: 0; width: 40%; max-width: 224px; z-index: 3;
}
/* Sits above the cluster rather than floating over the hero, where it
   collided with the service line now running the full width. */
.cluster__note{ display: block; text-align: right; margin-bottom: .7rem; }
/* The pair wrapper is transparent on desktop so its children position against
   .cluster; below 1024px it becomes the grid that lays them out side by side. */
.cluster__pair{ display: contents; }

/* The capability list sits in the left column rather than in a strip below,
   so the copy column has enough height to sit alongside the mockup cluster
   instead of leaving a void under the headline. */
.hero__caps{
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  border-top: 1px solid var(--line); margin-top: .4rem;
}
.hero__caps li{
  display: flex; align-items: baseline; gap: .7rem;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 500;
}
.hero__caps li b{ font-size: var(--t-meta); letter-spacing: .1em; color: var(--signal-ink); font-weight: 700; flex: none; }

/* --- Interior page hero ------------------------------------------------ */
.phero{
  padding-top: calc(var(--header-h) + clamp(3rem,6vw,6rem));
  padding-bottom: clamp(2.5rem,5vw,4.5rem);
}
.phero__grid{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,4vw,4.5rem); align-items: end; }

/* --- Work rows --------------------------------------------------------- */
/* Full-bleed, asymmetric, alternating. Each row is a compact case study:
   a large primary visual, an oversized index, the brief in three beats and a
   supporting strip showing the other artefacts the project produced. */
.wrow{
  display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(1.5rem,3.5vw,4rem); align-items: center;
  padding-block: clamp(2.5rem,5vw,5rem);
  border-top: 1px solid var(--line);
}
.wrow:last-child{ border-bottom: 1px solid var(--line); }
/* Flipping the row also flips the column widths, or the image lands in the
   narrow column and the row stops matching the one above it. */
.wrow--flip{ grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.wrow--flip .wrow__media{ order: 2; }
.wrow__media{ position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4/3; }
.wrow__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .6s var(--ease); }
.wrow a:hover .wrow__media img,.wrow__link:hover .wrow__media img{ transform: scale(1.035); }
.wrow__tag{ position: absolute; top: 0; left: 0; z-index: 2; }
.wrow__body{ display: grid; gap: clamp(1rem,1.7vw,1.5rem); align-content: center; }
.wrow__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.wrow__ttl{ max-width: 17ch; }
.wrow__facts{ display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.wrow__facts > div{ display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: .3rem 1rem; }
/* One accent anchor per work row — the index numeral. The fact labels sit
   back so the numeral is the thing that indexes the row. */
.wrow__facts dt{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .15em; color: var(--faint); font-weight: 700; }
.wrow__facts dd{ font-size: var(--t-small); color: var(--muted); }
.wrow__out{ display: flex; flex-wrap: wrap; gap: .4rem; }

/* --- Case study body ---------------------------------------------------- */
.cs{ display: grid; gap: clamp(1.6rem,3vw,2.6rem); }
.cs__block{ display: grid; gap: .7rem; }
.cs__block h3{
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em;
  color: var(--signal-ink); font-weight: 700;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.cs__block p{ color: var(--muted); max-width: 62ch; }
.cs__hero{ position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 21/9; max-height: min(62vh,620px); }
.cs__hero img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 680px){ .cs__hero{ aspect-ratio: 4/3; } }

/* --- The entry offer ---------------------------------------------------
   The site previously had exactly one call to action — "Start a Project" —
   which asks a stranger for the highest-commitment step available. This block
   is the missing rung on the ladder: something a 30%-intent visitor can say
   yes to. It is deliberately the most visually assertive thing on the page
   after the hero, because it is the conversion the traffic is being bought for. */
.offer{
  display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  gap: clamp(2rem,4vw,4.5rem); align-items: center;
}
.offer__body{ display: grid; gap: clamp(1rem,1.8vw,1.5rem); align-content: start; }
.offer__h{ max-width: 15ch; }
.offer__list{ display: grid; gap: .7rem; margin-top: .3rem; }
.offer__list li{
  font-size: var(--t-small); padding-left: 1.7rem; position: relative; color: var(--muted);
}
.offer__list li strong{ color: var(--text); font-weight: 700; }
.offer__list li::before{
  content:""; position: absolute; left: 0; top: .32em;
  width: 10px; height: 6px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}
.offer__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: .6rem; }

/* The deliverable, shown rather than described: a site with the problems
   marked on it, which is exactly what the teardown hands over. */
.teardown{ display: grid; gap: .9rem; }
.teardown__frame{ position: relative; }
.teardown__pin{
  position: absolute; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #FFFFFF;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(219,58,20,.22);
}
/* On the accent surface an accent pin would vanish, so it inverts. */
.blaze .teardown__pin{ background: var(--ink); box-shadow: 0 0 0 4px rgba(18,16,14,.22); }
.teardown__note{
  position: absolute; z-index: 3;
  background: var(--ink); color: #FAF8F5;
  font-size: .68rem; line-height: 1.35; font-weight: 500;
  padding: .45rem .6rem; width: max-content; max-width: min(13rem, 46%);
}
.teardown__note--l{ text-align: right; }

/* --- Who you deal with -------------------------------------------------
   A service business is a people purchase. The site had no humans on it at
   all, which is a trust hole no amount of typography closes. */
.who{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
.who__portrait{
  aspect-ratio: 4/5; background: var(--paper-2); color: var(--muted);
  border: 1px solid var(--line-2); position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center; padding: 2rem;
}
.who__portrait img{ width: 100%; height: 100%; object-fit: cover; }
/* .label sets its own colour, so the placeholder copy has to be told again. */
.who__portrait .label{ color: var(--muted); }
.who__facts{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.who__facts > div{ background: var(--paper); padding: clamp(1rem,1.7vw,1.4rem); display: grid; gap: .35rem; }
.who__facts dt{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--faint); }
.who__facts dd{ font-size: var(--t-small); color: var(--text); font-weight: 500; }
.who__facts dd span{ display: block; color: var(--muted); font-weight: 400; margin-top: .15rem; }

/* --- FAQ ---------------------------------------------------------------
   Native details/summary: the objections a buyer has at decision time, open
   and readable with no JavaScript at all. */
.faq{ border-top: 2px solid var(--line-2); }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: center;
  padding-block: clamp(1.1rem,1.9vw,1.5rem);
  font-size: clamp(1.05rem,1.5vw,1.25rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.25;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--signal-ink); }
.faq summary::after{
  content:""; width: 12px; height: 12px; flex: none;
  border-right: 2px solid var(--line-3); border-bottom: 2px solid var(--line-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s var(--ease-out), border-color .25s var(--ease);
}
.faq details[open] summary::after{ transform: translateY(2px) rotate(-135deg); border-color: var(--signal); }
.faq__a{ padding-bottom: clamp(1.1rem,1.9vw,1.5rem); }
.faq__a p{ color: var(--muted); max-width: 64ch; }
.faq__a p + p{ margin-top: .8rem; }

/* --- Qualification -----------------------------------------------------
   Lets a buyer self-select before they spend twenty minutes on a form, and
   lets GrowNav stop fielding enquiries it cannot serve. */
.qual{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.qual > div{ background: var(--paper); padding: clamp(1.4rem,2.2vw,2rem); display: grid; gap: .8rem; align-content: start; }
.qual h3{ font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; }
.qual ul{ display: grid; gap: .55rem; }
.qual li{ font-size: var(--t-small); color: var(--muted); padding-left: 1.5rem; position: relative; }
.qual li::before{
  content:""; position: absolute; left: 0; top: .35em; width: 10px; height: 6px;
  border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg);
}
.qual__no li::before{
  border: 0; background: var(--line-3); height: 2px; width: 10px; top: .62em; transform: none;
}

/* --- Hero service line -------------------------------------------------
   The old hero put the services in an 11px label and a paragraph, so the
   largest element on the page carried the least information. */
.hero__svc{
  display: flex; flex-wrap: wrap; gap: .4rem clamp(.7rem,1.3vw,1.1rem);
  align-items: baseline;
  font-size: clamp(1rem,1.35vw,1.28rem); font-weight: 600; letter-spacing: -.018em;
  /* Carries the gap down to the grid, so the services never butt against the
     lead paragraph once the hero stacks. */
  margin-bottom: clamp(1.8rem,3.6vw,3rem);
}
.hero__svc span{ display: inline-flex; align-items: baseline; gap: clamp(.7rem,1.3vw,1.1rem); }
.hero__svc span::after{ content:""; width: 4px; height: 4px; background: var(--signal); align-self: center; }
.hero__svc span:last-child::after{ display: none; }

/* --- Accent band -------------------------------------------------------
   Breaks out of the section to full width. Reserved for the moment a section
   is explaining a mechanism: colour carries the direction of travel, which is
   a job no amount of extra typography does as quickly. */
.band{ padding-block: clamp(2.2rem,4.5vw,3.8rem); margin-block: clamp(2.4rem,4.5vw,4rem); }
.band__head{
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: clamp(1.4rem,2.4vw,2rem);
}

/* --- Flow: one story told in three artefacts ---------------------------
   Not three examples side by side — the same campaign at three moments, so
   the row argues the thing the copy claims (the page keeps the ad^s promise). */
.flow{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: clamp(1rem,2vw,1.8rem);
  /* Steps align at the top so the sequence labels read as one line across the
     row; the connectors centre themselves against the artefacts instead. */
  align-items: start;
}
.flow__step{ display: grid; gap: .9rem; align-content: start; }
.flow__k{
  display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; font-weight: 700;
  color: var(--faint);
  border-top: 2px solid var(--line-2); padding-top: .75rem;
}
.flow__k b{ color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.flow__c{ font-size: var(--t-small); color: var(--muted); }
.flow__c strong{ color: var(--text); font-weight: 700; }
.flow__arw{
  width: clamp(18px,2vw,28px); height: 2px; background: var(--signal);
  position: relative; align-self: center; margin-top: 3.5rem;
}
.flow__arw::after{
  content:""; position: absolute; right: 0; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--signal); border-right: 2px solid var(--signal);
  transform: rotate(45deg);
}

/* --- Lead capture mockup ----------------------------------------------
   The third artefact in the flow. Paid media ends at a form; showing the form
   is the only way the row reaches the outcome it is describing. */
.leadcard{
  background: var(--card); border: 1px solid var(--line-2);
  padding: clamp(1rem,1.7vw,1.4rem);
  display: grid; gap: .6rem; align-content: start;
  box-shadow: 0 18px 44px -30px rgba(18,16,14,.4);
}
.leadcard__k{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--signal-ink); }
.leadcard__h{ font-size: clamp(.95rem,1.15vw,1.1rem); font-weight: 800; letter-spacing: -.026em; line-height: 1.1; color: var(--ink); }
.leadcard__f{
  border: 1px solid var(--line); background: var(--paper);
  padding: .55rem .7rem; font-size: .72rem; color: var(--faint);
}
.leadcard__f--fill{ color: var(--text); border-color: var(--line-3); }
.leadcard__btn{
  justify-self: stretch; text-align: center; margin-top: .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand); color: #FFFFFF; padding: .6rem .8rem;
}
.leadcard__n{ font-size: .66rem; color: var(--faint); line-height: 1.4; }

/* --- Sector grid -------------------------------------------------------
   Industries are a "find yourself" scan, not a set of positions to read one
   by one — so they get density and a short qualifier, not display type. */
.sectors{
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.sectors > div{
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(1.1rem,1.8vw,1.5rem) clamp(1rem,1.5vw,1.3rem);
  display: grid; gap: .4rem; align-content: start;
  transition: background-color .25s var(--ease);
}
.sectors > div:hover{ background: var(--hover); }
.sectors h3{ font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.sectors p{ font-size: var(--t-micro); color: var(--muted); }

/* --- Funnel ------------------------------------------------------------ */
/* The commercial argument as a diagram: attention becomes opportunity in
   four moves, and each move names what GrowNav actually builds. */
.funnel{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.fstep{
  background: var(--paper); padding: clamp(1.4rem,2.4vw,2.2rem) clamp(1.2rem,2vw,1.8rem);
  display: grid; gap: .7rem; align-content: start; position: relative;
  transition: background-color .3s var(--ease);
}
.fstep:hover{ background: var(--hover); }
.fstep__k{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; font-weight: 700; color: var(--signal-ink); }
.fstep__t{ font-size: clamp(1.5rem,2.8vw,2.2rem); font-weight: 800; letter-spacing: -.038em; line-height: .95; }
.fstep__p{ font-size: var(--t-small); color: var(--muted); }
.fstep__b{ margin-top: .35rem; display: grid; gap: .3rem; }
.fstep__b li{ font-size: var(--t-micro); color: var(--faint); padding-left: .95rem; position: relative; }
.fstep__b li::before{ content:""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--signal); }
/* The arrow between steps, drawn rather than typed. */
.fstep:not(:last-child)::after{
  content:""; position: absolute; top: 50%; right: -1px; z-index: 2;
  width: 10px; height: 10px; margin-top: -5px; margin-right: -5px;
  border-top: 2px solid var(--signal); border-right: 2px solid var(--signal);
  transform: rotate(45deg); background: var(--paper);
}

/* --- Process stages ---------------------------------------------------- */
.stage{
  display: grid; grid-template-columns: auto minmax(0,4fr) minmax(0,6fr);
  gap: clamp(1rem,2.6vw,3rem);
  padding-block: clamp(1.8rem,3.2vw,3rem);
  border-top: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}
.stage:last-child{ border-bottom: 1px solid var(--line); }
.stage__n{ min-width: clamp(3.5rem,7vw,7rem); }
.stage__t{ display: grid; gap: .7rem; align-content: start; }
/* The stage name is content, not a label, so it carries ink weight rather
   than colour. */
.stage__k{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; font-weight: 700; color: var(--text); }
.stage__d{ color: var(--muted); }
.stage__d ul{ margin-top: 1.1rem; display: grid; gap: .45rem; }
.stage__d li{ font-size: var(--t-small); padding-left: 1.2rem; position: relative; }
.stage__d li::before{ content:""; position: absolute; left: 0; top: .68em; width: 7px; height: 2px; background: var(--line-3); }
.stage__d li strong{ color: var(--text); font-weight: 700; }

/* --- Industry wall ----------------------------------------------------- */
/* Type-led. Hovering pulls a row into the signal colour, so the list reads
   as a set of positions rather than a spreadsheet of categories. */
.iwall{ border-top: 2px solid var(--line-2); }
.iwall li{ border-bottom: 1px solid var(--line); }
.iwall__row{
  /* The title carries more of the row than the qualifier does, so it gets the
     larger share — otherwise longer capability names wrap and the rows stop
     sharing a baseline. */
  display: grid; grid-template-columns: auto minmax(0,5fr) minmax(0,4fr) auto;
  gap: 1rem clamp(1.2rem,3vw,3rem); align-items: center;
  padding-block: clamp(1.1rem,2vw,1.7rem);
  transition: color .3s var(--ease), padding-left .35s var(--ease-out);
}
.iwall__n{ font-size: var(--t-meta); letter-spacing: .14em; color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.iwall__t{ font-size: clamp(1.4rem,3vw,2.5rem); font-weight: 800; letter-spacing: -.036em; line-height: 1; }
.iwall__s{ font-size: var(--t-small); color: var(--muted); max-width: 44ch; }
.iwall__a{ opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .35s var(--ease-out); color: var(--signal-ink); }
.iwall li:hover .iwall__row{ color: var(--signal-ink); padding-left: .6rem; }
.iwall li:hover .iwall__n{ color: var(--signal-ink); }
.iwall li:hover .iwall__s{ color: var(--muted); }
.iwall li:hover .iwall__a{ opacity: 1; transform: none; }

/* --- Service blocks ---------------------------------------------------- */
.svc{ display: grid; gap: clamp(3rem,6vw,6.5rem); }
.svc__item{ display: grid; gap: clamp(1.6rem,3vw,2.6rem); }
.svc__head{ display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.2rem,3vw,3rem); align-items: start; }
.svc__body{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.8rem,3.5vw,3.5rem); align-items: start; }
.svc__facts{ display: grid; gap: 1.3rem; align-content: start; }
.svc__facts > div{ border-top: 1px solid var(--line); padding-top: .9rem; display: grid; gap: .35rem; }
.svc__facts dt,.svc__facts h4{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; color: var(--faint); font-weight: 700; }
.svc__facts dd,.svc__facts p{ font-size: var(--t-small); color: var(--muted); max-width: 40ch; }

/* --- CTA band ---------------------------------------------------------- */
.ctaband{ padding-block: var(--sec-lg); }
.ctaband__in{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,4vw,4.5rem); align-items: end; }
.ctaband h2{ max-width: 13ch; }
.ctaband__side{ display: grid; gap: 1.5rem; justify-items: start; }

/* --- Form -------------------------------------------------------------- */
.form{ display: grid; gap: clamp(1.4rem,2.3vw,1.9rem); }
.form__foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.2rem,2vw,2rem);
  border-top: 2px solid var(--line-2); padding-top: clamp(1.4rem,2.2vw,1.9rem);
}
.form__foot .form__note{ flex: 1 1 16rem; margin: 0; }
.opt{ text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; }
.field{ display: grid; gap: .5rem; }
.field label,.field legend{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--faint); }
.field .req{ color: var(--signal-ink); }
.field input,.field select,.field textarea{
  width: 100%; background: var(--card); border: 1px solid var(--line-2);
  padding: .85rem .95rem;
  font-size: 1.0625rem; letter-spacing: -.01em; border-radius: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field input::placeholder,.field textarea::placeholder{ color: var(--faint); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(229,64,26,.12);
}
.field select{
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),
                    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position: calc(100% - 18px) 1.4rem, calc(100% - 13px) 1.4rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field--pair{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,2.3vw,1.9rem); }

.pick{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.pick > div{ position: relative; }
.pick input{ position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; }
.pick label{
  display: block; cursor: pointer; font-size: var(--t-micro); letter-spacing: 0; text-transform: none;
  color: var(--muted); padding: .62rem 1rem; border: 1px solid var(--line-2); background: var(--card);
  font-weight: 500;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.pick label:hover{ border-color: var(--line-3); color: var(--text); }
.pick input:checked ~ label{ background: var(--ink); color: #FAF8F5; border-color: var(--ink); }
.pick input:focus-visible ~ label{ outline: 2px solid var(--signal); outline-offset: 3px; }

.form__note{ font-size: var(--t-micro); color: var(--faint); max-width: 52ch; }
.form__status{ font-size: var(--t-small); color: var(--signal-ink); min-height: 1.4em; font-weight: 600; }
.form__status:empty{ min-height: 0; }

/* Contact rail */
.crail{ display: grid; gap: clamp(1.6rem,2.6vw,2.2rem); align-content: start; }
.crail__item{ border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .4rem; }
.crail__item dt,.crail__item h3{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; color: var(--faint); font-weight: 700; }
.crail__item p,.crail__item dd{ font-size: var(--t-small); color: var(--muted); max-width: 38ch; }
.crail ol{ display: grid; gap: .8rem; counter-reset: s; }
.crail ol li{ font-size: var(--t-small); color: var(--muted); padding-left: 2rem; position: relative; counter-increment: s; }
.crail ol li::before{ content: "0" counter(s); position: absolute; left: 0; top: .05em; font-size: var(--t-meta); letter-spacing: .1em; color: var(--faint); font-weight: 700; }
.clink{
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em;
  border-bottom: 2px solid var(--line-2); padding-bottom: .12rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.clink:hover{ color: var(--signal-ink); border-color: var(--signal); }

/* --- Footer ------------------------------------------------------------ */
/* The closing frame: a final CTA, the sitemap, then the wordmark set as
   large as the page allows so the site ends on the name. */
.ftr{ padding-top: clamp(3rem,5vw,4.5rem); padding-bottom: clamp(1.5rem,2.5vw,2rem); }
.ftr__top{
  display: grid; grid-template-columns: minmax(0,4fr) repeat(3,minmax(0,2.2fr));
  gap: clamp(2rem,4vw,3rem);
  padding-block: clamp(2.5rem,4.5vw,3.6rem);
}
.ftr h4{ font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em; color: var(--faint); font-weight: 700; margin-bottom: 1.1rem; }
.ftr ul{ display: grid; gap: .6rem; }
.ftr a{ font-size: var(--t-small); color: var(--muted); transition: color .25s var(--ease); }
.ftr a:hover{ color: var(--signal-ink); }
.ftr__pos{ color: var(--muted); max-width: 34ch; font-size: var(--t-small); }
.ftr__word{
  display: block; width: 100%; line-height: .78;
  /* Sized to fill the shell. The cap stops it overflowing once the shell
     stops growing at its max width. */
  font-size: clamp(3rem, 19.2vw, 18.5rem);
  font-weight: 800; letter-spacing: -.055em;
  padding-top: clamp(1rem,2vw,1.6rem);
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.ftr__word .dot{ color: var(--signal); }
.ftr__bot{
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: center;
  padding-top: clamp(1rem,1.8vw,1.5rem); font-size: var(--t-micro); color: var(--faint);
}
.ftr__bot a{ font-size: var(--t-micro); }

/* --- .job — the four jobs marketing has to do -----------------------------
   Customer problem → the system we run → the business outcome, one row each.
   Deliberately unlike .stage (approach) and .funnel (performance): the problem
   is set at lead size in the customer's own terms, and every row ends on an
   outcome in ink. No two ideas on this page share a layout. */
.jobs{ border-top: 2px solid var(--line-2); }
.job{
  display: grid;
  grid-template-columns: auto minmax(0,5fr) minmax(0,5fr);
  gap: clamp(1.2rem,2.6vw,3rem);
  padding-block: clamp(2rem,3.4vw,3.2rem);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}
.job:hover{ background: var(--hover); }
.job__n{ min-width: clamp(3rem,5.5vw,5.5rem); }
.job__head{ display: grid; gap: .85rem; align-content: start; }
.job__k{
  font-size: clamp(1.5rem,2.6vw,2.3rem); font-weight: 800;
  letter-spacing: -.04em; line-height: .98;
}
.job__p{ font-size: var(--t-lead); line-height: 1.45; color: var(--muted); max-width: 34ch; }
.job__d{ display: grid; gap: 1.15rem; align-content: start; }
.job__d > div{ display: grid; grid-template-columns: 6.5rem minmax(0,1fr); gap: .35rem 1rem; }
.job__d dt{
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .17em;
  font-weight: 700; color: var(--faint); padding-top: .3em;
}
.job__out{ font-weight: 700; letter-spacing: -.022em; font-size: 1.0625rem; line-height: 1.35; }

/* --- .wmini — compact work preview ---------------------------------------
   The homepage shows that work exists and what kind; work.html carries the
   full case studies. Project, one line on what we did, and a way in. */
.wmini{ display: grid; gap: .9rem; align-content: start; }
.wmini__media{ position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--paper-2); }
.wmini__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.wmini:hover .wmini__media img{ transform: scale(1.04); }
.wmini__tag{ position: absolute; top: 0; left: 0; z-index: 2; }
.wmini__t{
  font-size: clamp(1.1rem,1.6vw,1.32rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.14;
  transition: color .25s var(--ease);
}
.wmini:hover .wmini__t{ color: var(--signal); }
.wmini__x{ font-size: var(--t-small); color: var(--muted); }

@media (max-width: 1024px){
  .job{ grid-template-columns: auto minmax(0,1fr); }
  .job__d{ grid-column: 2; }
}
@media (max-width: 640px){
  .job{ grid-template-columns: minmax(0,1fr); gap: 1.1rem; }
  .job__d{ grid-column: 1; }
  .job__d > div{ grid-template-columns: minmax(0,1fr); gap: .3rem; }
  .job__n .bignum{ font-size: 2.6rem; }
}


/* 8. JOURNAL ============================================================= */
.jfeat{
  display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(1.5rem,3.5vw,3.5rem); align-items: center;
}
.jfeat__media{ position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--paper-2); }
.jfeat__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.jfeat:hover .jfeat__media img{ transform: scale(1.03); }
.jfeat__body{ display: grid; gap: clamp(.9rem,1.6vw,1.3rem); }

.jgrid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.4rem,2.6vw,2.4rem); }
.jcard{ display: grid; grid-template-rows: auto auto 1fr auto; gap: .85rem; align-content: start; }
.jcard__media{ overflow: hidden; aspect-ratio: 3/2; background: var(--paper-2); }
.jcard__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.jcard:hover .jcard__media img{ transform: scale(1.04); }
.jcard__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.jcard__t{ font-size: clamp(1.15rem,1.7vw,1.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; transition: color .25s var(--ease); }
.jcard:hover .jcard__t{ color: var(--signal); }
.jcard__x{ font-size: var(--t-small); color: var(--muted); }
.jcard__go{ font-size: var(--t-micro); font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: .4rem; transition: color .25s var(--ease); }
.jcard:hover .jcard__go{ color: var(--signal-ink); }
.jcard:hover .jcard__go .arw{ transform: translateX(4px); }
.jcard__go .arw{ transition: transform .35s var(--ease-out); }
/* Cards without a photograph get a typographic tile, so the grid never
   depends on stock imagery to look complete. */
.jcard__poster{ aspect-ratio: 3/2; }
.jcard__poster .poster{ aspect-ratio: 3/2; height: 100%; }

.jfilter{ display: flex; flex-wrap: wrap; gap: .5rem; }
.jfilter button{
  background: transparent; border: 1px solid var(--line-2); cursor: pointer;
  font-size: var(--t-micro); font-weight: 600; color: var(--muted);
  padding: .6rem 1rem;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.jfilter button:hover{ border-color: var(--line-3); color: var(--text); }
.jfilter button[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: #FAF8F5; }
.jempty{ font-size: var(--t-small); color: var(--faint); padding-block: 2rem; }

/* Article. Left-aligned inside the narrow shell so the prose lines up with
   the headline and the lead image above it. */
.article{ max-width: 68ch; }
.article > * + *{ margin-top: 1.35rem; }
.article h2{ font-size: clamp(1.45rem,2.4vw,2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-top: clamp(2.4rem,4vw,3.2rem); }
.article h3{ font-size: clamp(1.1rem,1.5vw,1.25rem); font-weight: 700; letter-spacing: -.02em; margin-top: clamp(1.8rem,3vw,2.4rem); }
.article p{ color: var(--muted); line-height: 1.72; }
.article p.standfirst{
  font-size: clamp(1.2rem,1.7vw,1.55rem); color: var(--text);
  line-height: 1.4; font-weight: 500; letter-spacing: -.016em;
}
.article ul{ display: grid; gap: .6rem; }
.article ul li{ color: var(--muted); padding-left: 1.4rem; position: relative; line-height: 1.6; }
.article ul li::before{ content:""; position: absolute; left: 0; top: .68em; width: 8px; height: 2px; background: var(--line-3); }
.article strong{ color: var(--text); font-weight: 700; }
.article blockquote{
  border-left: 3px solid var(--signal); padding-left: 1.4rem;
  font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.2;
  margin-block: clamp(2rem,3.2vw,2.8rem);
}
.article a:not(.btn):not(.tlink){ color: var(--signal-ink); border-bottom: 1px solid currentColor; }
.artmeta{ display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }

/* 9. MOTION ============================================================== */
/* One short fade-up as blocks enter, plus hover feedback. Every layout is
   designed to read correctly with all of it disabled — content is visible by
   default and only hidden once JS confirms the observer can actually run. */
.has-reveal [data-reveal]{
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .6s var(--ease-out);
}
.has-reveal [data-reveal].is-in{ opacity: 1; transform: none; }

/* No-JS path: show everything and open anything that JS would have opened. */
.js-off [data-reveal]{ opacity: 1; transform: none; }
.js-off .jfilter{ display: none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
}

/* 10. RESPONSIVE ========================================================= */
@media (max-width: 1240px){
  :root{ --shell: 1200px; }
  .nav{ gap: 1.1rem; }
  .hdr .btn{ padding: .78rem 1rem; gap: .7rem; }
  .grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wall{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wall li:nth-child(4n){ border-right: 1px solid var(--line); }
  .wall li:nth-child(3n){ border-right: 0; }
}
@media (max-width: 1080px){
  .sectors{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .funnel{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fstep:nth-child(2)::after{ display: none; }
  .jgrid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .split,.split--even,.split--wide,.split--flip,.phero__grid,.hero__grid,
  .ctaband__in,.pitch,.svc__body,.jfeat,.wrow,.offer,.who{ grid-template-columns: minmax(0,1fr); }
  .sticky{ position: static; }
  .wrow--flip .wrow__media{ order: 0; }
  .grid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cols{ grid-template-columns: 1fr; gap: 1.2rem; }
  .cols > div{ border-top: 1px solid var(--line); padding-top: 1rem; }
  .cols > div:first-child{ border-top: 0; padding-top: 0; }
  .ftr__top{ grid-template-columns: 1fr 1fr; }
  .stage{ grid-template-columns: auto minmax(0,1fr); }
  .stage__d{ grid-column: 2; }
  .iwall__row{ grid-template-columns: auto minmax(0,1fr) auto; }
  .iwall__s{ grid-column: 2; max-width: none; }
  .rlist .row{ grid-template-columns: minmax(0,3fr) minmax(0,9fr); }
  .rlist .sub{ grid-column: 2; }
  .split--form > .crail{ order: 2; }
  /* The hero cluster stops overlapping once there is no room for it to. */
  .cluster{ padding-bottom: 0; }
  .cluster__browser{ width: 100%; }
  .cluster__phone,.cluster__ad{ position: static; width: auto; max-width: none; transform: none; }
  .cluster__pair{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; margin-top: 1rem; align-items: start; }
}
@media (max-width: 860px){
  :root{ --header-h: 64px; }
  .nav,.hdr__cta .btn{ display: none; }
  .hdr__in{ grid-template-columns: 1fr auto; }
  .burger{ display: inline-flex; }
  .mgrid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mgrid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wall{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wall li:nth-child(3n){ border-right: 1px solid var(--line); }
  .wall li:nth-child(2n){ border-right: 0; }
  .cta-inline{ grid-template-columns: 1fr; }
  .svc__head{ grid-template-columns: 1fr; }
  .mark{ grid-template-columns: 1fr; gap: .6rem; }
  .jgrid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px){
  .grid-3,.grid-2,.grid-4,.qual{ grid-template-columns: minmax(0,1fr); }
  /* Annotation pins would sit on top of each other at this width. */
  .teardown__note{ display: none; }
  .sectors{ grid-template-columns: 1fr; }
  /* The flow stacks and its connectors turn to point down the page, so the
     sequence still reads as a sequence. */
  .flow{ grid-template-columns: minmax(0,1fr); }
  .flow__arw{ justify-self: center; transform: rotate(90deg); margin-block: .4rem; }
  .funnel{ grid-template-columns: minmax(0,1fr); }
  .fstep::after{ display: none !important; }
  .stage{ grid-template-columns: minmax(0,1fr); gap: .9rem; }
  .stage__d{ grid-column: 1; }
  .stage__n{ min-width: 0; }
  .iwall__row{ grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .iwall__s{ grid-column: 1; }
  .iwall__a{ display: none; }
  .rlist .row{ grid-template-columns: minmax(0,1fr); }
  .rlist .sub{ grid-column: 1; }
  .field--pair{ grid-template-columns: 1fr; }
  .ftr__top{ grid-template-columns: 1fr; gap: 2rem; }
  .mgrid-2,.mgrid-3{ grid-template-columns: 1fr; }
  /* The creative wall stays two-up: full-width posters leave the type
     stranded in the middle of a very tall box. */
  .mgrid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jgrid{ grid-template-columns: minmax(0,1fr); }
  .wrow__facts > div{ grid-template-columns: 1fr; }
  .btn{ width: 100%; }
  .btn-row,.hero__actions{ width: 100%; }
  /* Mobile keeps the display type large but stops it from breaking the
     viewport: tracking loosens slightly as the size drops. */
  .mega{ letter-spacing: -.035em; }
  .hero__caps{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .wall{ grid-template-columns: 1fr; }
  .wall li{ border-right: 0 !important; }
}