/* ==========================================================================
   LexicMedia Solutions — Design System
   Visual language derived from Montfort (mont-fort.com): geometric sans,
   wide-tracked uppercase display type, steel-blue palette, generous
   whitespace, slow cubic-bezier reveals. Conversion spine layered on top.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — taken from the LexicMedia logo: a teal→green→indigo gradient.
     The Montfort structure and typography are kept; the colour is ours. */
  /* Sampled from the logo artwork so every gradient on the site — hero,
     media tiles, portfolio placeholders, the WebGL stage — is the same sweep
     as the mark. These are decorative; the functional UI colours below are
     tuned separately for text contrast. */
  --brand-green:  #14a08c;   /* mark, far left  */
  --brand-teal:   #2293b4;   /* mark, mid       */
  --brand-blue:   #3d6fe0;   /* mark, far right */
  --brand-dot:    #14a08c;
  /* Same three colours as RGB triplets. Anything that needs the brand at an
     alpha — a glow, a wash, a canvas dot — must build it from these rather than
     re-typing the hex, or it silently keeps the old palette when the brand
     changes. audit.py enforces this. */
  --brand-green-rgb: 20, 160, 140;
  --brand-teal-rgb:  34, 147, 180;
  --brand-blue-rgb:  61, 111, 224;
  --brand-grad:   linear-gradient(100deg, var(--brand-green) 0%, var(--brand-teal) 50%, var(--brand-blue) 100%);

  --ink:          #0c1116;
  --ink-2:        #121b21;
  --ink-3:        #1b2830;
  --primary:      #17a398;
  /* Text-on-light variant. The brand teal is only 3.1:1 on white, which fails
     WCAG AA for small text. This clears 4.5:1 on all three light grounds
     (white 5.28, paper-2 4.97, paper-3 4.62) and still gives 5.28:1 for white
     text sitting on it, so it doubles as the filled-button colour.
     Fills, gradients, icons and the logo keep the true brand teal. */
  --primary-ink:  #117970;
  --primary-lift: #1cbcae;
  --primary-glow: #3fd0c0;
  --tint-1:       #7fd4cb;
  --tint-2:       #a6d9d2;
  --tint-3:       #d3ece8;
  --paper:        #ffffff;
  --paper-2:      #f4f9f8;
  --paper-3:      #e7f2f0;
  --brass:        #c9a227;

  /* Text roles */
  --text-strong:   var(--ink);
  --text-body:     #45535f;
  --text-muted:    #62727f;   /* 4.67:1 on --paper-2 — WCAG AA for body text */
  --text-on-dark:  rgba(255, 255, 255, 0.92);
  --text-on-dark-2:rgba(255, 255, 255, 0.78);  /* 11.6:1 on --ink */
  --text-on-dark-3:rgba(255, 255, 255, 0.58);  /* 6.8:1 on --ink — was 3.6:1, failed AA */

  --hairline:       rgba(10, 15, 20, 0.12);
  --hairline-soft:  rgba(10, 15, 20, 0.07);
  --hairline-dark:  rgba(255, 255, 255, 0.16);
  --hairline-dark-2:rgba(255, 255, 255, 0.08);

  /* Type */
  --font-display: "Josefin Sans", "Century Gothic", ui-sans-serif, sans-serif;
  --font-body:    "Jost", "Century Gothic", ui-sans-serif, system-ui, sans-serif;

  --track-wide:   0.32em;   /* Montfort's signature heading tracking */
  --track-mid:    0.18em;
  --track-tight:  0.02em;

  /* Fluid type scale */
  --fs-display: clamp(2.35rem, 1.2rem + 4.4vw, 4.5rem);
  --fs-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  --fs-h2:      clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.65vw, 1.4rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.72rem;

  /* Space */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(3.25rem, 2rem + 5vw, 6rem);

  /* Layout */
  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Motion — Montfort's .4s cubic-bezier(.4,0,.1,1) */
  --ease:      cubic-bezier(0.4, 0, 0.1, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.4s;
  --dur-slow:  0.7s;

  --radius:    2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(10, 15, 20, 0.04), 0 4px 16px rgba(10, 15, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(10, 15, 20, 0.04), 0 12px 32px rgba(10, 15, 20, 0.08);
  --shadow-lg: 0 4px 8px rgba(10, 15, 20, 0.05), 0 24px 64px rgba(10, 15, 20, 0.12);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  /* Stops a single wide child giving the whole page a sideways scrollbar.
     `clip` rather than `hidden` so position:sticky still works. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.14;
  color: var(--text-strong);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }

/* Every heading gets space above it when it follows something. Set on the
   heading rather than on the element before it, so it holds no matter what
   an editor puts above it in the block editor. */
h2:not(:first-child), .h2:not(:first-child),
h3:not(:first-child), .h3:not(:first-child),
h4:not(:first-child), .h4:not(:first-child) {
  margin-top: var(--space-l);
}
.eyebrow:not(:first-child) { margin-top: var(--space-xl); }
/* ...but a heading that directly follows its own eyebrow stays coupled to it */
.eyebrow + h2, .eyebrow + .h2,
.eyebrow + h3, .eyebrow + .h3 { margin-top: var(--space-s); }
.section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark-2);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--text-on-dark);
}

.section--paper { background: var(--paper-2); }

.grid { display: grid; gap: var(--space-l); }

@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(3rem, 6vw, 5.5rem); }
}
@media (min-width: 560px) and (max-width: 859px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--flow, 1.25rem); }

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

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--primary-ink);
  margin-bottom: var(--space-m);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}
/* On any dark ground the eyebrow uses the light tint — the text-safe teal
   is tuned for light backgrounds and would be far too dark here. */
.section--dark .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow,
.pin-track .eyebrow { color: var(--tint-1); }
.eyebrow--center { justify-content: center; }

.display {
  font-size: var(--fs-display);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 400; }
.h4 { font-size: var(--fs-h4); font-weight: 400; }

/* Montfort's wide-tracked uppercase treatment, for section labels */
.tracked {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 400;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-body);
  font-weight: 300;
}
/* Any dark ground, not just .section--dark. The closing CTA band is dark
   but carries no --dark class, so its lead was inheriting the light-ground
   body colour: dark grey on near-black, 2.2:1. */
.section--dark .lead,
.cta-band .lead,
.pin-track .lead,
.hero .lead { color: var(--text-on-dark-2); }

.muted { color: var(--text-muted); }
.section--dark .muted { color: var(--text-on-dark-3); }

.measure { max-width: 62ch; }
.measure--short { max-width: 46ch; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head--center { text-align: center; }
.section-head--center .measure { margin-inline: auto; }
.section-head .lead { margin-top: var(--space-m); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  /* The deeper teal, not the brand teal: white on #17a398 is 3.1:1, which
     fails WCAG AA for button labels. #117b73 gives 5.1:1. */
  --btn-bg: var(--primary-ink);
  --btn-fg: #fff;
  --btn-bd: var(--primary-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn > * { position: relative; z-index: 1; }

/* Wipe fill on hover — restrained, matches Montfort's slow reveals */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scale3d(0, 1, 1);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
  z-index: 0;
}
.btn:hover::after,
.btn:focus-visible::after { transform: scale3d(1, 1, 1); }
.btn:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  --btn-bd: var(--hairline);
}
.btn--ghost:hover { --btn-fg: #fff; }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: var(--hairline-dark);
}
.btn--light::after { background: #fff; }
.btn--light:hover { --btn-fg: var(--ink); border-color: #fff; }

.btn--solid-light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}
.btn--solid-light::after { background: var(--primary); }
.btn--solid-light:hover { --btn-fg: #fff; border-color: var(--primary); }

.btn--lg { padding: 1.25rem 2.6rem; font-size: 0.82rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Text link with scale3d underline reveal — straight from Montfort */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--primary-ink);
  padding-bottom: 4px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scale3d(0, 1, 1);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.link:hover::after,
.link:focus-visible::after {
  transform: scale3d(1, 1, 1);
  transform-origin: left center;
}
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(4px); }
.section--dark .link { color: var(--tint-1); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
}

.header.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hairline-soft);
  box-shadow: var(--shadow-sm);
}

.logo {
  display: inline-block;
  position: relative;
  line-height: 0;
  transition: opacity var(--dur) var(--ease);
}

/* The supplied artwork, used as-is. Two variants are stacked and cross-faded:
   the wordmark is near-black, so it is invisible on the dark header over the
   hero, and the mark alone is invisible on the light header once stuck. Only
   the wordmark's colour differs between the two files — the mark and every
   letterform are the artwork's own pixels. */
.logo__img {
  display: block;
  width: 190px;
  height: auto;
  transition: opacity var(--dur) var(--ease);
}

.logo__img--pos {
  position: absolute;
  top: 0;
  left: 0;
  /* Not `inset: 0`: that pins bottom as well, and with height:auto the
     lockup was stretched to the height of the link and looked distorted. */
  opacity: 0;
}

.header.is-stuck .logo__img--rev,
.header--solid .logo__img--rev { opacity: 0; }

.header.is-stuck .logo__img--pos,
.header--solid .logo__img--pos { opacity: 1; }

@media (max-width: 560px) {
  .logo__img { width: 158px; }
}



.nav { display: none; }

@media (min-width: 1180px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.15rem, 2.0vw, 2.6rem);
  }
}

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  padding-block: 0.4rem;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scale3d(0, 1, 1);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scale3d(1, 1, 1);
  transform-origin: left center;
}
.nav__link:hover { color: #fff; }
.header.is-stuck .nav__link,
.header--solid .nav__link { color: var(--text-body); }
.header.is-stuck .nav__link:hover,
.header--solid .nav__link:hover { color: var(--primary); }
.header.is-stuck .nav__link[aria-current="page"],
.header--solid .nav__link[aria-current="page"] { color: var(--primary); }

.header__cta { display: none; flex: none; white-space: nowrap; }
@media (min-width: 1180px) {
  .header__cta { display: inline-flex; padding: 0.85rem 1.35rem; font-size: 0.7rem; }
}

/* Mobile menu toggle */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0 10px;
  margin-right: -10px;
}
@media (min-width: 1180px) { .burger { display: none; } }

.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: #fff;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.header.is-stuck .burger span,
.header--solid .burger span { background: var(--ink); }
body.menu-open .burger span { background: #fff; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
  overflow-y: auto;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1180px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; gap: 0.35rem; }
.mobile-nav__link {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 300;
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--hairline-dark-2);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav__link:hover { color: var(--tint-1); padding-left: 0.6rem; }
.mobile-nav__foot { margin-top: var(--space-xl); display: grid; gap: var(--space-s); }
.mobile-nav__meta { font-size: var(--fs-sm); color: var(--text-on-dark-3); }
.mobile-nav__meta a:hover { color: var(--tint-1); }

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* The old 620px floor made the hero taller than the screen on any viewport
     under ~674px — landscape phones, split-screen, short browser windows —
     which left a large empty band above the content. Let it shrink instead.
     svh is the small viewport height, so mobile browser chrome cannot push
     the hero taller than what is actually visible. */
  min-height: clamp(440px, 92vh, 940px);
  min-height: clamp(440px, 92svh, 940px);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  background: var(--ink);
  color: var(--text-on-dark-2);
  overflow: hidden;
}

/* Inner heroes were roughly half the home hero, which left the WebGL layer
   with too little canvas to read as motion. */
.hero--inner {
  min-height: clamp(400px, 78vh, 820px);
  min-height: clamp(400px, 78svh, 820px);
}

/* Layered atmospheric background — no image dependency */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(23, 163, 152, 0.55) 0%, rgba(23, 163, 152, 0) 62%),
    radial-gradient(90% 80% at 8% 92%, rgba(var(--brand-green-rgb), 0.22) 0%, rgba(var(--brand-green-rgb), 0) 60%),
    linear-gradient(160deg, #0d1720 0%, #0a0f14 55%, #070b0f 100%);
}
/* Faint architectural grid — echoes Montfort's 24-col structure */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 17ch;
}
.hero__title em {
  font-style: normal;
  color: var(--tint-1);
}

.hero__lead {
  margin-top: var(--space-m);
  max-width: 54ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-on-dark-2);
}

.hero__actions { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* Short viewports: stop reserving vertical space the screen does not have,
   and let the hero size to its own content. */
@media (max-height: 700px) {
  .hero,
  .hero--inner {
    min-height: 0;
    padding-top: calc(var(--header-h) + 1.25rem);
    padding-bottom: 2.25rem;
  }
  .hero__lead { margin-top: 1rem; }
  .hero__actions { margin-top: 1.25rem; }
  .scroll-cue { display: none; }
}

/* The sticky CTA bar floats over the bottom of the page below 860px, so the
   hero needs to clear it or the availability line sits underneath it. */
@media (max-width: 859px) {
  .hero { padding-bottom: calc(clamp(3rem, 8vh, 6rem) + 4.5rem); }
  .hero--inner { padding-bottom: calc(2.5rem + 4.5rem); }
}

.hero__note {
  margin-top: var(--space-m);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-on-dark-3);
}

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  /* The brand teal, not a generic "available" green. It still reads as a live
     indicator but is the only hue on the page, rather than a foreign one. */
  background: var(--brand-green);
  flex: none;
  box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0.6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--brand-green-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0); }
}

/* Scroll cue — Montfort's "SCROLL DOWN TO DISCOVER" */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-on-dark-3);
  transition: color var(--dur) var(--ease);
}
@media (min-width: 860px) { .scroll-cue { display: flex; } }
.scroll-cue:hover { color: var(--text-on-dark); }
.scroll-cue__line {
  display: block;
  width: 46px; height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint-1);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Inner-page hero */
.hero--inner .hero__title { max-width: 20ch; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-m);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--text-on-dark-3);
}
.breadcrumbs a { transition: color var(--dur) var(--ease); }
.breadcrumbs a:hover { color: var(--tint-1); }
.breadcrumbs li { display: flex; align-items: center; gap: 0.6rem; }
.breadcrumbs li + li::before { content: "/"; opacity: 0.45; }

/* --------------------------------------------------------------------------
   8. Proof bar / stats
   -------------------------------------------------------------------------- */

.proof-bar {
  position: relative;
  z-index: 2;
  background: var(--ink-2);
  border-top: 1px solid var(--hairline-dark-2);
}
.proof-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline-dark-2);
}
@media (min-width: 860px) { .proof-bar__grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--ink-2);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem);
  font-weight: 200;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.stat__label {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-on-dark-3);
}

/* Light variant */
.stat--light { background: var(--paper); }
.stat--light .stat__num { color: var(--primary); }
.stat--light .stat__label { color: var(--text-muted); }

/* Logo strip */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.logos__item {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-on-dark-3);
  transition: color var(--dur) var(--ease);
}
.logos__item:hover { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--primary);
  transform: scale3d(0, 1, 1);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline);
}
.card:hover::before { transform: scale3d(1, 1, 1); }

.card__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mid);
  color: var(--tint-1);
  margin-bottom: var(--space-s);
}
.card__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--primary-ink);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover .card__icon {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.card__icon svg { width: 20px; height: 20px; }

.card__title { font-size: var(--fs-h3); font-weight: 400; margin-bottom: 0.75rem; }
.card__body { font-size: var(--fs-sm); line-height: 1.72; color: var(--text-muted); }
.card__list {
  margin-top: var(--space-m);
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.card__list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.card__list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--tint-1);
}
.card__foot { margin-top: auto; padding-top: var(--space-m); }

/* Dark card */
.card--dark {
  background: var(--ink-2);
  border-color: var(--hairline-dark-2);
}
.card--dark .card__title { color: var(--text-on-dark); }
.card--dark .card__body,
.card--dark .card__list { color: var(--text-on-dark-3); }
.card--dark .card__icon { border-color: var(--hairline-dark); color: var(--tint-1); }

/* Stretched link makes the whole card clickable without nesting <a> */
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   10. Process steps
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  counter-increment: step;
  position: relative;
  padding: var(--space-l) 0 var(--space-l) 0;
  border-top: 1px solid var(--hairline-dark-2);
}
@media (min-width: 860px) {
  .step { padding-right: var(--space-l); }
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mid);
  color: var(--tint-1);
  margin-bottom: var(--space-s);
}
.step__title { font-size: var(--fs-h4); font-weight: 400; margin-bottom: 0.6rem; }
.step__body {
  /* Was --text-on-dark-3 (white at 58%). Inside .section--paper that is
     1.06:1 against the background — the copy was there but unreadable.
     The on-dark variant is applied explicitly by the dark sections below. */
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 46ch;
}
.section--dark .step__body,
.pin-track .step__body { color: var(--text-on-dark-3); }

/* --------------------------------------------------------------------------
   11. Case studies
   -------------------------------------------------------------------------- */

.case {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.case__tag {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--primary-ink);
}
.case__title { font-size: var(--fs-h3); font-weight: 400; }
.case__body { font-size: var(--fs-sm); color: var(--text-muted); }

.case__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline-soft);
}
.case__metric-num {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--primary-ink);
}
.case__metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Placeholder flag for content the client must supply */
.placeholder-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a6d1f;
  background: rgba(201, 162, 39, 0.12);
  border: 1px dashed rgba(201, 162, 39, 0.5);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  height: 100%;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--tint-2);
}
.quote__text {
  font-size: var(--fs-h4);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-strong);
}
.quote__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline-soft);
}
.quote__avatar {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.quote__name { font-size: var(--fs-sm); color: var(--text-strong); font-weight: 500; }
.quote__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12b. Masonry testimonial wall — mixed text and video tiles
   -------------------------------------------------------------------------- */

.wall {
  columns: 1;
  column-gap: var(--space-m);
}
@media (min-width: 620px) { .wall { columns: 2; } }
@media (min-width: 1024px) { .wall { columns: 3; } }

.tile {
  break-inside: avoid;
  margin: 0 0 var(--space-m);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline);
}

.tile__body { padding: clamp(1.35rem, 1rem + 1.2vw, 2rem); }

.tile__quote {
  font-size: var(--fs-h4);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-strong);
  margin: 0 0 var(--space-m);
}
.tile--sm .tile__quote { font-size: var(--fs-sm); line-height: 1.7; }

.tile__foot { display: flex; align-items: center; gap: 0.85rem; }
.tile__avatar {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.tile__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-strong); }
.tile__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* Video tiles ------------------------------------------------------------- */

.tile__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--brand-grad);
  overflow: hidden;
}
.tile__media--wide { aspect-ratio: 16 / 10; }

.tile__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
/* Only reveal the element once the file has actually decoded, so a missing
   or slow video shows the branded poster rather than a black rectangle. */
.tile__media.is-ready video { opacity: 1; }

.tile__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.25rem;
  color: rgba(255, 255, 255, 0.94);
}
.tile__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,17,22,0.15) 0%, rgba(12,17,22,0.55) 100%);
}
.tile__media.is-ready .tile__poster { display: none; }

.tile__poster-initials {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 200;
  letter-spacing: 0.12em;
}

.tile__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tile__play svg { width: 20px; height: 20px; margin-left: 3px; }
.tile:hover .tile__play { transform: translate(-50%, -50%) scale(1.08); }
.tile__media.is-playing .tile__play { opacity: 0; pointer-events: none; }

.tile__duration {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  z-index: 2;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(12, 17, 22, 0.7);
  border-radius: var(--radius);
}

.tile__badge {
  position: absolute;
  left: 0.7rem; top: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 17, 22, 0.6);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
}

/* Metric tile — a number rather than a quote, for visual rhythm */
.tile--metric {
  background: var(--ink);
  border-color: transparent;
  color: var(--text-on-dark-2);
}
.tile--metric .tile__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 200;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.6rem;
}
.tile--metric .tile__num em {
  font-style: normal;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tile--metric .tile__label { font-size: var(--fs-sm); color: var(--text-on-dark-3); }

/* --------------------------------------------------------------------------
   12d. Portfolio
   -------------------------------------------------------------------------- */

.folio-grid { display: grid; gap: var(--space-l); }
@media (min-width: 700px)  { .folio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .folio-grid { grid-template-columns: repeat(4, 1fr); } }

.folio {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.folio:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline);
}

.folio__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-grad);
  overflow: hidden;
}
.folio__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.folio:hover .folio__media img { transform: scale(1.04); }

/* Shown until a real image is uploaded through the admin panel */
.folio__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.folio__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,17,22,.1), rgba(12,17,22,.45));
}

.folio__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
}

.folio__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--primary-ink);
}
.folio__meta span:last-child { color: var(--text-muted); }

.folio__title { font-size: var(--fs-h4); font-weight: 500; margin-bottom: 0.2rem; }
.folio__link { transition: color var(--dur) var(--ease); }
.folio__link:hover { color: var(--primary-ink); }
.folio__client { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 0.75rem; }
.folio__summary { font-size: var(--fs-sm); line-height: 1.68; color: var(--text-muted); }

.folio__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: var(--space-m);
}
.folio__tags li {
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--primary-ink);
  background: rgba(23, 163, 152, 0.09);
  border-radius: 100px;
}

.section--dark .folio { background: var(--ink-2); border-color: var(--hairline-dark-2); }
.section--dark .folio__title { color: var(--text-on-dark); }
.section--dark .folio__summary,
.section--dark .folio__client { color: var(--text-on-dark-3); }

/* --------------------------------------------------------------------------
   12c. Founder
   -------------------------------------------------------------------------- */

.founder { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 860px) {
  .founder { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-grad);
}
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12,17,22,0.5) 100%);
  pointer-events: none;
}
.founder__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 200;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.9);
}

.founder__quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--text-strong);
  margin-bottom: var(--space-m);
}
.section--dark .founder__quote { color: var(--text-on-dark); }

.founder__sig {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline-soft);
}
.section--dark .founder__sig { border-top-color: var(--hairline-dark-2); }
.founder__sig-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-strong); }
.section--dark .founder__sig-name { color: var(--text-on-dark); }
.founder__sig-role { font-size: var(--fs-sm); color: var(--text-muted); }

.founder__direct {
  margin-top: var(--space-m);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-3);
}
.founder__direct a {
  color: var(--tint-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.founder__direct a:hover { color: #fff; }
.section--dark .founder__sig-role { color: var(--text-on-dark-3); }

/* Empty state — a blog with no posts yet should still look deliberate */
.empty-state {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
}
.empty-state a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--hairline-soft);
}

/* --------------------------------------------------------------------------
   13. FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline-soft); }
.faq__item { border-bottom: 1px solid var(--hairline-soft); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--text-strong);
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--primary); }

.faq__icon {
  flex: none;
  position: relative;
  width: 16px; height: 16px;
  margin-top: 0.3rem;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--primary);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.form-panel {
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form-grid { display: grid; gap: var(--space-m); }
@media (min-width: 620px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field label .req { color: #c0392b; }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c7c89' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.12);
}

.field input::placeholder,
.field textarea::placeholder { color: #9aa8b3; }

.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #c0392b; background: #fdf5f4; }

.field__error {
  font-size: var(--fs-xs);
  color: #c0392b;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.field.has-error .field__error { opacity: 1; }

.form-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.form-consent input { width: 16px; height: 16px; margin-top: 0.22rem; flex: none; accent-color: var(--primary); }
.form-consent a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot — hidden from humans, catches bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none;
}

.form-status {
  display: none;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.form-status.is-visible { display: flex; }
.form-status--ok    { background: #edf7f0; border-color: #b9e0c6; color: #1e6b3a; }
.form-status--error { background: #fdf1f0; border-color: #f0c4c0; color: #a03127; }

.btn.is-loading { pointer-events: none; opacity: 0.72; }
.btn.is-loading .btn__label::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 0.6rem;
  vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.form-trust li { display: flex; align-items: center; gap: 0.4rem; }
.form-trust svg { width: 13px; height: 13px; color: var(--primary); flex: none; }

/* --------------------------------------------------------------------------
   14b. Sticky mobile CTA
   On phones the hero CTA scrolls away within one swipe and never comes back
   until the form. This keeps a single tap to conversion available throughout.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 17, 22, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--hairline-dark-2);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.sticky-cta.is-up { transform: translateY(0); }

@media (max-width: 859px) { .sticky-cta { display: flex; } }
body.menu-open .sticky-cta { transform: translateY(110%); }

.sticky-cta .btn { flex: 1; padding-block: 0.85rem; }
.sticky-cta__call {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  color: #fff;
}
.sticky-cta__call svg { width: 18px; height: 18px; }

/* Keep the footer clear of the bar */
@media (max-width: 859px) { .footer { padding-bottom: 5.5rem; } }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text-on-dark-2);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 120% at 85% 20%, rgba(23, 163, 152, 0.5) 0%, rgba(23, 163, 152, 0) 60%),
    radial-gradient(70% 100% at 10% 90%, rgba(var(--brand-green-rgb), 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: #070b0f;
  color: var(--text-on-dark-3);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  padding-bottom: var(--space-l);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  padding-bottom: var(--space-xl);
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer__brand .logo { color: #fff; margin-bottom: var(--space-m); }
.footer__blurb { max-width: 34ch; line-height: 1.7; }

.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: var(--space-m);
}

.footer__list { display: grid; gap: 0.7rem; }
.footer__list a {
  position: relative;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer__list a:hover { color: #fff; padding-left: 0.4rem; }

.footer__contact { display: grid; gap: 0.85rem; }
.footer__contact a { transition: color var(--dur) var(--ease); }
.footer__contact a:hover { color: var(--tint-1); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline-dark-2);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a:hover { color: #fff; }

.social { display: flex; gap: 0.6rem; margin-top: var(--space-m); }
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dark-2);
  border-radius: 50%;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.social svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Never hide content if JS fails or is disabled */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. Prose (for legal / article pages)
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--space-xl); margin-bottom: var(--space-m); }
.prose h3 { font-size: var(--fs-h3); font-weight: 400; margin-top: var(--space-l); margin-bottom: var(--space-s); }
.prose p { margin-bottom: var(--space-m); }
.prose ul { margin-bottom: var(--space-m); display: grid; gap: 0.6rem; }
.prose ul li { display: flex; gap: 0.7rem; }
.prose ul li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.68em;
  border-radius: 50%;
  background: var(--tint-1);
}
.prose a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   19. Small-screen refinements
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  /* Equal-width, full-bleed CTAs. Mismatched button widths read as a bug,
     and thumb-reach matters more than elegance at this size. */
  .btn-row .btn { width: 100%; }
  .btn { padding: 1.05rem 1.25rem; letter-spacing: 0.12em; }
  .btn--lg { padding: 1.15rem 1.25rem; font-size: 0.78rem; }

  /* Align the status dot to the first line rather than the block centre */
  .hero__note { align-items: flex-start; }
  .hero__note .pulse-dot { margin-top: 0.5em; }

  /* Comfortable tap targets on stacked link lists */
  .footer__list a,
  .footer__legal a { display: inline-block; padding-block: 0.35rem; }

  .form-trust { gap: 0.65rem 1rem; }

  /* Case metrics stack rather than squeeze to three cramped columns */
  .case__metrics { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .case__metric-label { font-size: 0.68rem; }
}

/* --------------------------------------------------------------------------
   20. Reduced motion & print
   -------------------------------------------------------------------------- */

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

@media print {
  .header, .mobile-nav, .scroll-cue, .cta-band, .footer { display: none !important; }
  body { color: #000; background: #fff; }
  .hero { min-height: auto; background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* Split sections: the intro column is short and the list beside it is long, so
   stretching the intro to match left a tall band of empty paper. Pinning it
   instead keeps the heading and its call to action beside whichever item the
   reader has reached. */
@media (min-width: 900px) {
  .grid--split > :first-child {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h, 76px) + var(--space-l));
  }
}
@media (max-width: 899px) {
  .grid--split > :first-child { align-self: start; }
}


/* --- button row rhythm (added after blockGap was zeroed) --- */
/* Zeroing WordPress's blockGap handed spacing back to this stylesheet, but
   nothing here gave button rows any clearance, so "View all case studies" sat
   flush against the card grid above it and read as overlapping. */
.btn-row { margin-top: var(--space-l); }
.btn-row:first-child { margin-top: 0; }
.btn-row--center { justify-content: center; }
.grid + .btn-row,
.wall + .btn-row,
.cases + .btn-row,
.form-panel + .btn-row { margin-top: var(--space-xl); }


/* --- form field alignment --- */
/* Fields sit in a two-column grid, but each field stacked its own label and
   input independently — so a label that wrapped to two lines ("What do you
   need?" plus its required marker) pushed that field's control below the one
   next to it and the rows stopped lining up.
   Subgrid makes label, control and error share the parent's rows, so controls
   align across the row no matter how long a label runs. */
@supports (grid-template-rows: subgrid) {
  .form-grid--2 { grid-auto-rows: auto auto auto; }
  .form-grid--2 > .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }
  .form-grid--2 > .field--full { grid-column: 1 / -1; }
}
/* Fallback where subgrid is unavailable: reserve two lines for every label so
   a wrapping one does not shift its own field out of step. */
@supports not (grid-template-rows: subgrid) {
  .form-grid--2 > .field > label { min-height: 2.6em; display: block; }
}
.field .req { margin-left: .15em; }


/* --- contact page rhythm --- */
/* A heading that opens a new wrapper still needs air above it. The earlier
   rule only covered headings with a sibling before them, so "Prefer email?" —
   first child of its own div, directly after a list — sat flush against it. */
ul + .reveal, ol + .reveal, p + .reveal,
ul + div > h3:first-child, ol + div > h3:first-child {
  margin-top: var(--space-l);
}

/* Landing on the contact page, the form is the point of the page. On narrow
   screens it used to sit below the whole introduction, so a visitor arriving
   ready to enquire had to scroll past everything first. */
@media (max-width: 899px) {
  .contact-grid, .grid--split { display: flex; flex-direction: column; }
  .contact-grid .form-panel, .grid--split .form-panel { order: -1; }
}