/*
Theme Name: Misnomer
Theme URI: https://misnomer.co
Author: Misnomer Marketing
Description: Custom block-free WordPress theme for misnomer.co. Replaces Elementor. Built to the Apple fluid-interface principles: press feedback on every control, spring-shaped motion, translucent chrome, size-specific typography, and honest reduced-motion support.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: misnomer
*/

/* ==========================================================================
   1. FONTS  (self-hosted, latin subset, variable)
   ========================================================================== */

/* Archivo replaced Syne as the display face in Aug 2026. Syne's counters close
   up at 700 and above, which is exactly where this site lives. Archivo holds
   its apertures open at 800, has properly tabular figures (the site is built
   on numbers), and carries a width axis if a long headline ever needs
   tightening. */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. TOKENS
   Palette is the documented Misnomer palette. This resolves the drift the
   audit found: the theme no longer invents its own dark surfaces.
   ========================================================================== */

:root {
  /* Brand
   * Ground moved to #1F2628 (Aug 2026). It is a warm green-grey rather than
   * the old blue-slate #0F1623, and it is the same value as the plate behind
   * the logo mark, so the logo now sits on the page with no visible box.
   * Surfaces are derived from it so the whole stack stays in one hue family. */
  --green:        #11EFB4;
  --green-press:  #0FD5A0;
  --dark:         #1F2628;   /* Misnomer Dark, page ground */
  --surface:      #262E30;   /* cards */
  --surface-2:    #2E3739;   /* raised / hover */
  --slate:        #6E6E8C;   /* hairlines, decorative only */
  --gold:         #F0A500;   /* AI callouts only */
  --ice:          #F0F0F0;

  /* Hero, the one place the deep green is kept */
  --hero-deep:    #002319;
  --hero-mid:     #06120F;

  /* Brand object, reused as a cropped background motif on inner heroes */
  --hero-object:  url("assets/img/hero-object.webp");

  /* Text, tuned for contrast on --dark and shifted warm to match the ground */
  --text:         #FFFFFF;   /* 15.3:1 on --dark */
  --text-2:       #CBD4D2;   /* 10.1:1 on --dark */
  --text-3:       #9AA6A4;   /*  6.1:1 on --dark */

  --line:         rgba(255, 255, 255, 0.10);
  --line-2:       rgba(255, 255, 255, 0.16);
  --green-dim:    rgba(17, 239, 180, 0.12);

  /* Type */
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Motion. One house curve. Critically damped feel, no overshoot.
     Bounce is reserved for momentum, and nothing here carries momentum. */
  --ease:        cubic-bezier(0.20, 0.80, 0.20, 1.00);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.36, 1.00); /* momentum only */
  --t-press:     100ms;
  --t-micro:     200ms;
  --t-move:      420ms;

  /* Structure
   * Buttons and nav are squared to 20px. Nested radii are concentric: an
   * inner radius equals the outer radius minus the padding between them,
   * which is what keeps the curves parallel instead of merely similar. */
  --page:    1400px;
  --gutter:  clamp(20px, 4vw, 40px);
  --radius:  16px;
  --radius-lg: 22px;
  --radius-btn:       20px;
  --radius-btn-in:    12px;   /* 20 minus 8px of button padding */
  --radius-btn-sm:    16px;
  --radius-btn-sm-in: 10px;   /* 16 minus 6px of button padding */
  --radius-nav:       20px;
  --radius-nav-in:    15px;   /* 20 minus 5px of nav padding */
  --header-h: 92px;
}

/* ==========================================================================
   3. RESET + BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

/* ==========================================================================
   4. TYPOGRAPHY
   Tracking is size-specific and leading tightens as type grows. This is the
   §15 fix: the live site runs default tracking at 72px and tightens only its
   smallest heading.
   ========================================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}

h2, .h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

h3, .h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h4, .h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p { margin: 0; max-width: 66ch; }
.lede { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--text-2); }

/* One eyebrow treatment site-wide. Every section label is Misnomer Green at
   the same size, weight and tracking. The only exception is .is-gold, which
   is reserved for AI callouts inside a card, never for a section label. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;   /* positive tracking, small size */
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}
.eyebrow.is-gold { color: var(--gold); }

.figure {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.05;         /* the §16 fix: these were line-height 0 */
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

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

/* Every focusable thing gets a visible ring. The live site's primary CTAs
   resolve to outline:none. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: var(--dark);
  padding: 14px 22px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

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

.section { padding-block: clamp(72px, 9vw, 132px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Continues the block above rather than starting a new topic, so it does not
   pay full section padding at the top. Two stacked --tight sections otherwise
   put 160px between things that belong together. */
.section--continues { padding-top: clamp(28px, 3.4vw, 44px); }

.stack   { display: flex; flex-direction: column; gap: var(--g, 20px); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--g, 16px); align-items: center; }

/* A section header is not constrained as a block. Only running copy inside it
   gets a measure, so a standalone headline sits at its natural width instead
   of being penned into a narrow left-hand column. */
.sec-head { display: flex; flex-direction: column; gap: 16px; }
.sec-head > p:not(.eyebrow) { max-width: 62ch; }

/* ==========================================================================
   6. BUTTONS
   Geometry matches the live site: pill, 18px Inter, circular arrow badge.
   What is new is the press state.
   ========================================================================== */

.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--dark);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 60px;              /* was 38px on some links */
  padding: 8px 8px 8px 32px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* Named properties only. The live site uses `transition: all`. */
  transition:
    transform  var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease);
}

.btn__arrow {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-btn-in);
  background: var(--dark);
  color: var(--green);
  transition: transform var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.btn__arrow svg { width: 17px; height: 17px; }

.btn:hover { background: var(--green-press); }
.btn:hover .btn__arrow { transform: rotate(45deg); }

/* THE press state. Instant, on pointer-down, not on release. */
.btn:active { transform: scale(0.97); transition-duration: var(--t-press); }
.btn:active .btn__arrow { transform: rotate(45deg) scale(0.94); }

.btn--ghost {
  --btn-bg: rgba(255,255,255,0.04);
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
}
.btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--green); }
.btn--ghost .btn__arrow { background: var(--green); color: var(--dark); }

.btn--sm {
  min-height: 48px; padding: 6px 6px 6px 24px;
  font-size: 1rem; gap: 12px;
  border-radius: var(--radius-btn-sm);
}
.btn--sm .btn__arrow { width: 36px; height: 36px; border-radius: var(--radius-btn-sm-in); }
.btn--sm .btn__arrow svg { width: 14px; height: 14px; }

/* Text link with an arrow, used for "Learn more" and "Read the case study".
   Minimum 44px tall target, which the live 38px rows miss. */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--green);
  font-weight: 500;
  transition: gap var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.tlink svg { width: 15px; height: 15px; transition: transform var(--t-micro) var(--ease); }
.tlink:hover { gap: 15px; }
.tlink:hover svg { transform: rotate(45deg); }
.tlink:active { transform: scale(0.98); transition-duration: var(--t-press); }

/* ==========================================================================
   7. HEADER
   Translucent floating layer with content passing under it. The live site
   has zero backdrop-filter across 696 elements.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(31, 38, 40, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: height var(--t-move) var(--ease),
              background-color var(--t-move) var(--ease),
              border-color var(--t-move) var(--ease);
}

/* Condenses once you leave the hero. Set by JS on <body>. */
.is-scrolled .site-header {
  height: 72px;
  background: rgba(31, 38, 40, 0.86);
  border-bottom-color: var(--line);
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: flex; align-items: center; min-height: 44px; }
.brand img, .brand svg { height: 34px; width: auto; }
.brand:active { transform: scale(0.98); transition: transform var(--t-press) var(--ease); }

/* Nav is a translucent panel, squared to match the buttons */
.nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-nav);
  background: rgba(255,255,255,0.03);
}
/* wp_nav_menu wraps items in <li>; the no-menu fallback prints bare <a>.
   display:contents makes both markups lay out identically. */
.nav li { list-style: none; margin: 0; display: contents; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 18px;
  border-radius: var(--radius-nav-in);
  font-size: 0.9375rem;
  white-space: nowrap;
  color: var(--text-2);
  transition: color var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.nav a:active { transform: scale(0.96); transition-duration: var(--t-press); }
.nav a[aria-current="page"] { color: var(--dark); background: var(--green); }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;          /* 24x24 on the live site */
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-nav-in);
  cursor: pointer;
  transition: transform var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.nav-toggle:active { transform: scale(0.94); transition-duration: var(--t-press); }
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--text);
  transition: transform var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
[aria-expanded="true"].nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
[aria-expanded="true"].nav-toggle span:nth-child(2) { opacity: 0; }
[aria-expanded="true"].nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex; align-items: center;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 42%, rgba(17,239,180,0.30) 0%, rgba(17,239,180,0.06) 38%, transparent 68%),
    linear-gradient(155deg, var(--hero-mid) 0%, var(--hero-deep) 52%, #0A2A1E 100%);
}

/* The faint grid, drawn in CSS rather than shipped as a 32KB image */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(90% 80% at 50% 45%, #000 35%, transparent 78%);
  pointer-events: none;
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 40px; align-items: center;
}

.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 50ch; }

.hero__art { position: relative; justify-self: stretch; }

/* ---- Scoreboard -----------------------------------------------------------
   The hero visual: the track record, as a panel of real figures. Glass over
   the hero gradient so the grid and the light behind it still read through.
   Values use tabular figures so the numerals line up in a column.            */

.scoreboard {
  margin: 0;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(10, 22, 19, 0.42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.scoreboard__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}
.scoreboard__title {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2);
}
.scoreboard__title::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 0 3px rgba(17, 239, 180, 0.20);
}
.scoreboard__meta {
  font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.scoreboard__hero { padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.scoreboard__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.scoreboard__figure { margin: 0; }
.scoreboard__figure .figure {
  font-size: clamp(3rem, 6.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.scoreboard__sub { font-size: 0.9375rem; color: var(--text-2); }

.scoreboard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;                                   /* hairline gutters, not borders */
  background: rgba(255, 255, 255, 0.10);
  border-block: 1px solid rgba(255, 255, 255, 0.10);
}
.tile {
  background: rgba(10, 22, 19, 0.55);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background-color var(--t-micro) var(--ease);
}
.tile:hover { background: rgba(17, 239, 180, 0.07); }
.tile__val {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.05; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.tile__label { font-size: 0.8125rem; color: var(--text-2); line-height: 1.35; }
.tile__client {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}

.scoreboard__foot {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 14px 20px;
  font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.scoreboard__foot span { display: inline-flex; align-items: center; gap: 8px; }
.scoreboard__foot span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--green); opacity: 0.7;
}

/* Stat rail under the hero */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  /* Page-width panel, not a full-bleed band. The rail sits directly in
     <main> rather than inside a .wrap, so it carries the wrap geometry
     itself; edge-to-edge it read as out of place next to carded content. */
  width: min(100% - 2 * var(--gutter), var(--page) - 2 * var(--gutter));
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--dark);
  padding: 32px clamp(20px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 6px;
}
.stat__label { font-size: 0.875rem; color: var(--text-3); letter-spacing: 0.02em; }

/* ==========================================================================
   9. CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t-move) var(--ease),
              border-color var(--t-move) var(--ease),
              background-color var(--t-move) var(--ease);
}

/* The accent edge grows on hover rather than appearing */
.card::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--green);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-move) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); }
.card:hover::after { transform: scaleY(1); }
.card:active { transform: translateY(-2px) scale(0.994); transition-duration: var(--t-press); }

.card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--green-dim);
  color: var(--green);
  transition: transform var(--t-move) var(--ease), background-color var(--t-move) var(--ease);
}
.card:hover .card__icon { transform: scale(1.06) rotate(-4deg); background: rgba(17,239,180,0.2); }
.card p { color: var(--text-2); font-size: 1rem; }
.card .tlink { margin-top: auto; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 30px; }

/* Case study card */
.case {
  display: flex; flex-direction: column; gap: 14px;
  padding: 38px;
  background: linear-gradient(160deg, var(--surface) 0%, #222A2B 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
}
.case:hover { transform: translateY(-5px); border-color: rgba(17,239,180,0.35); }
.case:active { transform: translateY(-2px) scale(0.995); transition-duration: var(--t-press); }
.case__client {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
}
.case__result { color: var(--text); }
.case p { color: var(--text-2); font-size: 1rem; }
.case__metrics {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  /* One chip per line, and the block rides at the foot of the card so every
     card in a row reads as the same filled height regardless of how long the
     summary above it runs. */
  margin-top: auto; padding-top: 10px;
}
.chip {
  font-size: 0.8125rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Split band, used for Narrative Debt and the AI section */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--flip > *:first-child { order: 2; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 40px;
}

/* Pricing band */
.band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: center; justify-content: space-between;
}

/* CTA band */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 84px);
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 88% 20%, rgba(17,239,180,0.28) 0%, transparent 62%),
    linear-gradient(150deg, var(--hero-mid), var(--hero-deep));
  border: 1px solid rgba(17,239,180,0.22);
  text-align: left;
}

/* ==========================================================================
   10. LOGO MARQUEE
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 72px;
  width: max-content;
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--t-micro) var(--ease);
}
.marquee__item:hover { color: var(--text); }

@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer { border-top: 1px solid var(--line); padding-block: 72px 40px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }

/* Footer column labels are h2, not h4. They follow the closing CTA's h2, and a
   jump straight to h4 is a level skip for anyone navigating by heading. The
   size is set here, so the level carries the structure and the class carries
   the look. Same reason .panel__label is an h3. */
.footer__label,
.panel__label {
  font-family: var(--body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  margin: 0 0 14px;
}
.footer__label { color: var(--text-3); }
.panel__label--quiet { color: var(--text-3); }
.footer__links { display: flex; flex-direction: column; }
.footer__links a {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--text-2);
  transition: color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.footer__links a:hover { color: var(--green); }
.footer__links a:active { transform: scale(0.98); transition-duration: var(--t-press); }
.footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  color: var(--text-3); font-size: 0.875rem;
}

/* Inline link inside a sentence, so it is exempt from the 44px target minimum
   (WCAG 2.5.8). It still needs to look like a link, hence the underline. */
.footer__bottom a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-micro) var(--ease);
}
.footer__bottom a:hover { color: var(--text); }

/* ==========================================================================
   12. SCROLL REVEAL
   Hidden state only applies when JS is running, so content is never
   trapped behind a script that failed to load.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-move) var(--ease),
              transform var(--t-move) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hero copy is the LCP element on every page. Holding it at opacity 0 until
   the script boots and the fade plays cost 2.5s of render delay on mobile
   Lighthouse, so heroes keep the slide but never hide the text: paint is
   immediate, motion is preserved, and LCP fires on first paint. */
.js .hero .reveal,
.js .page-hero .reveal {
  opacity: 1;
  transition: transform var(--t-move) var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ==========================================================================
   13. REDUCED MOTION  (the real implementation)
   Movement is removed. Comprehension fades and press feedback stay, because
   reduced motion means a gentler equivalent, not no feedback at all.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .page-hero::after { opacity: 0.10; }

  .js .reveal { transform: none; transition: opacity 250ms ease; }
  .js .reveal.is-in { opacity: 1; }

  .card:hover, .case:hover, .btn:active, .card:active,
  .case:active, .tlink:active, .nav a:active, .brand:active,
  .price:hover, .price:active, .book:hover .jacket { transform: none; }

  /* The ambient field is static already, but drop the noise for anyone who
     finds fine-grained texture uncomfortable. */
  body::after { opacity: 0; }

  .card:hover .card__icon { transform: none; }
  .btn:hover .btn__arrow, .tlink:hover svg { transform: none; }

  /* Keep the fades that aid comprehension */
  .btn, .tlink, .card, .case, .nav a, .footer__links a {
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,0.34); --line-2: rgba(255,255,255,0.5); --text-3: #C3CCDA; }
  .card, .case, .panel, .band { border-width: 2px; }
}

/* ==========================================================================
   13b. AMBIENT DEPTH
   A fixed field sitting behind all content, not a page-length gradient.
   A single gradient stretched over a 6,000px page either changes so slowly
   it is invisible or, if strong enough to see, muddies the middle and makes
   section contrast unpredictable. Fixed means content travels over a static
   atmosphere, which reads as depth and costs one composited layer.
   The noise overlay is what stops low-alpha gradients banding on dark.
   ========================================================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 82%  6%, rgba(17, 239, 180, 0.11), transparent 70%),
    radial-gradient(48% 38% at  4% 38%, rgba(17, 239, 180, 0.05), transparent 72%),
    radial-gradient(76% 52% at 58% 99%, rgba(0,  35,  25, 0.60), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   13c. LIGHT SECTIONS
   One inverted band, used where the content justifies it. On the homepage
   that is Pricing, because the claim being made there is transparency and a
   bright, document-like ground makes the page feel like the claim.
   Tokens are scoped, never global, so the button foreground on green is not
   inverted along with the surface.
   ========================================================================== */

.section--light {
  --l-bg:      var(--ice);
  --l-surface: #FFFFFF;
  --l-text:    #1F2628;
  --l-text-2:  #4C585A;   /* 7.4:1 on Ice */
  --l-line:    rgba(31, 38, 40, 0.14);
  --l-accent:  #057456;   /* 5.1:1 on Ice. #11EFB4 is 1.3:1 and unusable */

  position: relative;
  background: var(--l-bg);
  color: var(--l-text);
}

/* Squares off the join with the dark sections above and below */
.section--light::before,
.section--light::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(17, 239, 180, 0.45);
}
.section--light::before { top: 0; }
.section--light::after  { bottom: 0; }

.section--light .eyebrow          { color: var(--l-accent); }
.section--light :where(p, .lede)  { color: var(--l-text-2); }
.section--light :where(h2, h3)    { color: var(--l-text); }
.section--light .tlink            { color: var(--l-accent); }

/* Components placed inside a light band. These are single-class selectors and
   the :where() rules above carry no specificity, so they apply cleanly. */
.section--light .price__hours { color: var(--l-accent); }
.section--light .price__name,
.section--light .price__fig   { color: var(--l-text); }
.section--light .price__per   { color: var(--l-text-2); }
.section--light .worklist li  { color: var(--l-text-2); }
.section--light .worklist b   { color: var(--l-text); }
.section--light .worklist li::before { background: var(--l-accent); }

.section--light .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--l-text);
  --btn-bd: rgba(31, 38, 40, 0.26);
}
.section--light .btn--ghost:hover { background: rgba(31,38,40,0.05); border-color: var(--l-text); }
.section--light .btn--ghost .btn__arrow { background: var(--l-text); color: var(--green); }

/* ==========================================================================
   13d. PRICING
   ========================================================================== */

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.price {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--radius);
  transition: transform var(--t-move) var(--ease),
              border-color var(--t-move) var(--ease),
              box-shadow var(--t-move) var(--ease);
}
.price:hover {
  transform: translateY(-4px);
  border-color: rgba(5, 116, 86, 0.45);
  box-shadow: 0 12px 32px rgba(31, 38, 40, 0.10);
}
.price:active { transform: translateY(-2px) scale(0.995); transition-duration: var(--t-press); }

.price__hours {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--l-accent);
}
.price__name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.price__fig {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  letter-spacing: -0.028em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--l-text);
  margin-top: auto; padding-top: 12px;
}
.price__per { font-size: 0.8125rem; color: var(--l-text-2); }

/* Sprint list, a plain priced table rather than more cards */
.sprints { width: 100%; border-collapse: collapse; }
.sprints th {
  text-align: left; padding: 0 0 12px;
  font-family: var(--body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-accent);
  border-bottom: 1px solid var(--l-line);
}
.sprints th:last-child, .sprints td:last-child { text-align: right; }
.sprints td {
  padding: 15px 0; border-bottom: 1px solid var(--l-line);
  font-size: 1rem; color: var(--l-text);
}
.sprints td:last-child { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sprints tr:last-child td { border-bottom: 0; }

/* Inline link inside a table cell of running text, so it is exempt from the
   44px target minimum (WCAG 2.5.8) but still has to look like a link. */
.sprints a {
  color: var(--l-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-micro) var(--ease);
}
.sprints a:hover { color: var(--l-text); }

/* ==========================================================================
   13e. THE BOOK
   ========================================================================== */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
  /* Open band, not a card. The book sits directly above the CTA band on the
     homepage, About, and Speaking, and two bordered green-tinted cards in a
     row read as one stack. The CTA card keeps the chrome; the book gets a
     hairline top and a faint glow on the open page ground instead. */
  padding: clamp(34px, 4.5vw, 64px) 0;
  border-top: 1px solid var(--line);
  /* No backdrop: a radial glow here painted a hard rectangular cutoff at the
     element's edges once the card chrome came off. The jacket's drop-shadow
     is all the depth the band needs. */
}

.book__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.book__tag {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 10px;
  border: 1px solid rgba(17, 239, 180, 0.35);
  color: var(--green);
}
.book__tag--quiet { border-color: var(--line); color: var(--text-3); }

/* A typographic stand-in for the jacket. Swap for real cover art when it
   exists; the markup is one <img> away. */
.jacket {
  aspect-ratio: 5 / 7;
  width: min(100%, 320px);
  justify-self: center;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px 26px;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(150deg, #0B1512 0%, #16241F 55%, #0E1A16 100%);
  border: 1px solid rgba(17, 239, 180, 0.22);
  border-left: 5px solid var(--green);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  transition: transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease);
}
.book:hover .jacket { transform: translateY(-5px) rotate(-0.8deg); box-shadow: 0 34px 72px rgba(0,0,0,0.58); }
.jacket__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.04; letter-spacing: -0.03em;
}
.jacket__rule { width: 44px; height: 3px; background: var(--green); margin: 16px 0; }
.jacket__author {
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

/* Real cover art. The gradient, border, and padding belong to the typographic
   stand-in; the photo replaces them and keeps only the spine radius, the
   shadow, and the hover lift. aspect-ratio comes from the image itself. */
.jacket--photo {
  aspect-ratio: auto; padding: 0; background: none; border: 0;
  /* The art is a cutout with alpha, so the rectangular box-shadow the
     typographic jacket uses would render as a dark slab behind it. A
     drop-shadow filter follows the silhouette instead. */
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
}
.book:hover .jacket--photo { box-shadow: none; }
.jacket--photo img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   13f. INNER PAGE COMPONENTS
   ========================================================================== */

/* Inner page hero. Quieter than the homepage hero, which stays the flagship,
   but it has to read as a hero: its own ground, its own light, and a grid that
   separates it from the translucent nav above and the flat sections below.
   Previously it shared #1F2628 with everything else, so it disappeared. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(76px, 9vw, 124px) clamp(48px, 6vw, 76px);
  border-bottom: 1px solid rgba(17, 239, 180, 0.20);
  background:
    radial-gradient(64% 104% at 93% 4%, rgba(17, 239, 180, 0.20) 0%, transparent 60%),
    radial-gradient(52% 78% at 4% 96%, rgba(17, 239, 180, 0.06) 0%, transparent 66%),
    linear-gradient(158deg, #0A1613 0%, var(--hero-deep) 66%, #09291D 100%);
}

.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(80% 100% at 70% 20%, #000 30%, transparent 80%);
  pointer-events: none;
}

/* A cropped sliver of the brand object, anchored off the right edge. Present
   enough to give the band depth, quiet enough not to compete with the type. */
.page-hero::after {
  content: "";
  position: absolute; z-index: -1;
  right: -7%; top: 50%;
  width: min(46vw, 560px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: var(--hero-object) center / contain no-repeat;
  opacity: 0.20;
  filter: grayscale(0.15);
  pointer-events: none;
}
@media (max-width: 1080px) { .page-hero::after { opacity: 0.11; right: -22%; } }

/* Editorial masthead: headline on the left, the supporting line and the
   actions on the right, baseline-aligned. The headline anchors the full
   measure instead of sitting in a centred column with dead air either side.
   Do not put a max-width on the container here: the container also carries
   .wrap, which is margin-inline:auto, so capping it centres the whole hero. */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.page-hero h1   { max-width: 15ch; }
.page-hero .lede { max-width: 48ch; }

/* Numbered pillar, used on Services. The numbering is real sequence:
   the pillars build on each other. */
.pillar {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(38px, 4.5vw, 60px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.pillar__num {
  font-family: var(--display); font-weight: 800;
  font-size: 2.75rem; line-height: 1; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(17, 239, 180, 0.55);
  font-variant-numeric: tabular-nums;
}
.pillar__body { display: flex; flex-direction: column; gap: 16px; }
.pillar__line { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--green); }
.pillar__body p { color: var(--text-2); }

.deliverables {
  display: flex; flex-direction: column; gap: 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.deliverables h4 {
  font-family: var(--body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  margin-bottom: 14px;
}
.deliverables ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.deliverables li {
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--text-2); line-height: 1.5;
}
.deliverables li:first-child { border-top: 0; padding-top: 0; }
.outcome {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17,239,180,0.3);
  font-size: 0.9375rem; color: var(--text); line-height: 1.55;
}
.outcome b {
  display: block; font-family: var(--body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 8px;
}

/* Fit / not-fit columns, used on Contact */
.fitlist { display: flex; flex-direction: column; gap: 0; }
.fitlist li { list-style: none; padding: 13px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.fitlist li:first-child { border-top: 0; }
.fitlist ul { margin: 0; padding: 0; }

/* Steps table, used on Contact */
.steps { width: 100%; border-collapse: collapse; }
.steps th {
  text-align: left; padding: 0 16px 12px 0;
  font-family: var(--body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid var(--line);
}
.steps td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.steps td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
.steps tr:last-child td { border-bottom: 0; }

/* Prose, for the blog and any editor-managed page */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
/* :where() contributes zero specificity, so this sets the default colour for
   unstyled prose without outranking any component dropped inside it. Written
   as `.prose p` it was 0,1,1 and silently beat single-class components like
   .metric__val, .pillar__line and .outcome-note. */
:where(.prose) :where(p, li) { color: var(--text-2); max-width: 68ch; }
.prose a { color: var(--green); border-bottom: 1px solid var(--green-dim); }
.prose a:hover { border-bottom-color: var(--green); }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--green);
  font-family: var(--display); font-size: 1.3rem; line-height: 1.35;
  letter-spacing: -0.015em; color: var(--text);
}

/* ==========================================================================
   13g. CASE STUDIES
   ========================================================================== */

.cs-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
}
.cs-eyebrow .sep { color: var(--text-3); }

/* The outcome line, sitting under the client name in the masthead */
.cs-result {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--green);
  max-width: 20ch;
}

/* The results are the differentiator, so they are the first thing on the page
   and they sit inside the hero rather than buried under the narrative. */
.cs-hero__result {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--text);
  max-width: 16ch;
}
.cs-hero__client {
  font-family: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: 500; letter-spacing: 0.02em;
  color: var(--green);
}

/* Metric cards, glass over the hero gradient */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}
.metric {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
}
.metric:hover { transform: translateY(-3px); border-color: rgba(17, 239, 180, 0.45); }
.metric__val {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.02; letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.metric__label { font-size: 0.875rem; color: var(--text-2); line-height: 1.4; }

/* Metrics used on a flat section rather than over the hero */
.metrics--solid .metric {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Editorial body. A left rail holds the section label so long-form copy sits
   in a proper measure without leaving the right half of the page empty. */
.cs-block {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(38px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.cs-block > h2 {
  font-family: var(--body);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green);
  position: sticky; top: calc(var(--header-h) + 28px);
}
.cs-block__body { display: flex; flex-direction: column; gap: 20px; }
.cs-block__body > p { color: var(--text-2); max-width: 62ch; }
.cs-block__lead {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 1.875rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.022em;
  color: var(--text) !important;
  max-width: 22ch;
}

/* The work, as a two-column grid so it fills the measure */
/* Doubled class so this does not depend on sitting after the .worklist base
   rule, which sets display:flex at the same specificity. */
.worklist.worklist--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.worklist.worklist--2col li:nth-child(2) { border-top: 0; }

/* "The work" list. A rule per item rather than a bullet glyph. */
.worklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.worklist li {
  padding: 16px 0 16px 26px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  position: relative;
}
.worklist li:first-child { border-top: 0; }
.worklist li::before {
  content: ""; position: absolute; left: 0; top: 25px;
  width: 12px; height: 1.5px; background: var(--green);
}
.worklist b { color: var(--text); font-weight: 600; }

/* The outcome and the booking CTA share one line. Full width, aligned to the
   page edge. It sits outside the .cs-block rail grid deliberately: indenting
   the outcome under the right-hand column pushed it out of line. */
.outcome-note {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  border: 1px solid rgba(17, 239, 180, 0.30);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: rgba(17, 239, 180, 0.06);
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.outcome-note__text {
  margin: 0;
  flex: 1 1 34ch;
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 62ch;
}
.outcome-note__text b { color: var(--green); font-weight: 700; }
.outcome-note .btn { flex: none; }

/* Prev / next between case studies. Wayfinding only: the conversion ask is the
   shared CTA band below, so there is no button row competing with it here. */
.cs-more { display: flex; flex-direction: column; gap: 20px; }
.cs-more__head {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.cs-more__head .eyebrow { margin: 0; }

/* All five remaining studies, compact, in one row on desktop. Replaces the
   prev/next pair, which left half the row empty at either end of the set. */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.cs-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 22px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--t-move) var(--ease),
              border-color var(--t-move) var(--ease),
              background-color var(--t-move) var(--ease);
}
.cs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 239, 180, 0.42);
  background: var(--surface-2);
}
.cs-card:active { transform: translateY(-1px) scale(0.995); transition-duration: var(--t-press); }
.cs-card__client {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.2;
}
.cs-card__res { font-size: 0.875rem; color: var(--green); line-height: 1.35; }

/* Desktop shows the whole set, so the catch-all link would be redundant. It
   only earns its place at the breakpoint where cards are actually hidden. */
.cs-more__all { display: none; margin: 4px 0 0; }

@media (max-width: 600px) {
  /* Five stacked cards is a long tail on a phone. Cap at three and offer the
     rest through the link. display:none also drops them from the
     accessibility tree, so the link is the single route to them. */
  .cs-card:nth-child(n + 4) { display: none; }
  .cs-more__all { display: block; }
}

/* ==========================================================================
   13g2. SPEAKING
   A list, not cards. Eight appearances grouped under three themes reads as a
   body of work when it is set as a run of entries with hairlines; the same
   eight as cards would read as eight unrelated things.
   ========================================================================== */

.talks { display: flex; flex-direction: column; }
.talk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 8px clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.talk:first-child { border-top: 0; padding-top: 6px; }
.talk__title {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 640;
  letter-spacing: -0.012em; line-height: 1.3; color: var(--text);
  margin: 0;
}
.talk__meta {
  grid-column: 1;
  font-size: 0.8125rem; color: var(--text-3); line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.talk__meta span + span::before {
  content: ""; display: inline-block; width: 3px; height: 3px;
  border-radius: 50%; background: var(--green); opacity: 0.65;
  margin-right: 10px; vertical-align: middle;
}
.talk__body {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0; font-size: 0.9375rem; color: var(--text-2); line-height: 1.55;
}

/* ==========================================================================
   13g3. BOOK
   ========================================================================== */

.blurb {
  padding: clamp(24px, 3.4vw, 38px) clamp(26px, 3.8vw, 44px);
  border: 1px solid rgba(17, 239, 180, 0.24);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-lg);
  background: rgba(17, 239, 180, 0.05);
}
.blurb q {
  display: block; quotes: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 640; line-height: 1.35; letter-spacing: -0.018em;
  color: var(--text); max-width: 44ch;
}
.blurb figcaption {
  margin-top: 16px; font-size: 0.9375rem; color: var(--text-2);
}
.blurb figcaption b { color: var(--green); font-weight: 600; }

/* ==========================================================================
   13h. PE PORTFOLIO PAGE
   ========================================================================== */

/* Two-audience comparison. The point is that the buyer is different, so the
   two columns are visually equal rather than one being the "better" option. */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare__col {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 16px;
}
.compare__col--accent { border-color: rgba(17, 239, 180, 0.32); background: var(--surface-2); }
.compare__who {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
}
.compare__col--quiet .compare__who { color: var(--text-3); }

/* Portfolio-wide engagement model: a numbered sequence, because it is one */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: ph; }
.phase {
  counter-increment: ph;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
}
.phase::before {
  content: counter(ph, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -0.03em; color: transparent;
  -webkit-text-stroke: 1.2px rgba(17, 239, 180, 0.6);
}
.phase h3 { font-size: 1.125rem; }
.phase p { color: var(--text-2); font-size: 0.9375rem; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .phases { grid-template-columns: 1fr; }
  .page-hero__grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .book { grid-template-columns: 1fr; }
  .book > *:last-child { order: -1; }
  .pillar { grid-template-columns: 60px minmax(0, 1fr); }
  .pillar > *:last-child { grid-column: 2; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  /* The art stays below the copy when stacked: the scoreboard is over a
     thousand pixels tall on a phone, and the H1 leads the argument. The
     old order:-1 was for the days when the art was a small image. */
  .hero__art img { width: min(70%, 320px); margin-inline: auto; }
  .split, .split--flip > *:first-child { grid-template-columns: 1fr; order: 0; }
}

/* Header collapses earlier than the content grids. Six nav items plus a logo
   and a CTA get cramped well before the body layout needs to stack. */
@media (max-width: 1024px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px var(--gutter) 28px;
    border: 0; border-radius: 0;
    background: rgba(15,22,35,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-micro) var(--ease),
                transform var(--t-micro) var(--ease),
                visibility var(--t-micro);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { min-height: 52px; font-size: 1.0625rem; padding-inline: 14px; }
  .nav-toggle { display: flex; flex-direction: column; }
  .header-cta { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 76px; }
  body { font-size: 17px; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr; }
  .talk { grid-template-columns: 1fr; gap: 6px; }
  .talk__meta, .talk__body { grid-column: 1; }
  .talk__body { grid-row: auto; margin-top: 6px; }
  .cs-block { grid-template-columns: 1fr; gap: 16px; }
  .cs-block > h2 { position: static; }
  .worklist.worklist--2col { grid-template-columns: 1fr; column-gap: 0; }
  .worklist.worklist--2col li:nth-child(2) { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr 1fr; }
  .pillar { grid-template-columns: 1fr; gap: 18px; }
  .pillar > *:last-child { grid-column: 1; }
  .pillar__num { font-size: 2rem; }
  .sprints td, .sprints th { font-size: 0.9375rem; }
  .steps thead { display: none; }
  .steps td { display: block; padding: 6px 0; border-bottom: 0; }
  .steps tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .band { flex-direction: column; align-items: flex-start; }
  .card, .case, .panel { padding: 26px; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
}


.section--light .card {
  background: var(--l-surface);
  border-color: var(--l-line);
}
.section--light .card:hover { border-color: var(--l-accent); }

/* ==========================================================================
   16. AUGUST 2026 CONTENT REBUILD ADDITIONS
   Native contact form, experience-row caption, case study role line, and
   the assessment embed. Added with the content rewrite; form colors are
   scoped to work on both grounds via the --l-* fallbacks.
   ========================================================================== */

/* The experience band is an interlude, not a chapter: it pays about half
   the --tight padding so the sections around it stay close. */
.section--experience { padding-block: clamp(28px, 3.5vw, 44px); }

/* Caption under the experience marquee. */
.marquee__caption {
  margin-top: 22px;
  max-width: none;
  color: var(--text-3);
  font-size: 0.9375rem;
}

/* Role line on a case study hero. */
.cs-role {
  max-width: 72ch;
  color: var(--text-2);
  font-size: 0.9375rem;
  border-left: 2px solid var(--green);
  padding-left: 14px;
}

/* The native form. Sits on the light band on Contact and Speaking. */
.mform { display: grid; gap: 18px; }
.mform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
.mform__field { display: grid; gap: 6px; margin: 0; }
.mform__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--l-text-2, var(--text-2));
}
.mform__field label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mform__field input,
.mform__field textarea {
  font: inherit;
  color: var(--l-text, var(--text));
  background: var(--l-surface, var(--surface));
  border: 1px solid var(--l-line, var(--line));
  border-radius: var(--radius, 10px);
  padding: 12px 14px;
  min-height: 44px;
  width: 100%;
}
.mform__field textarea { resize: vertical; }
.mform__field input:focus-visible,
.mform__field textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.mform button { justify-self: start; border: 0; cursor: pointer; }

/* Honeypot: moved out of view, still in the DOM for bots to find. */
.mform__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
}

/* Submission notices. */
.form-note {
  border-radius: var(--radius, 10px);
  padding: 18px 20px;
  border: 1px solid var(--l-line, var(--line));
  background: var(--l-surface, var(--surface));
  color: var(--l-text, var(--text));
}
.form-note--ok  { border-color: rgba(5, 116, 86, 0.5); }
.form-note--err { border-color: rgba(179, 45, 46, 0.55); }
.form-note + .mform { margin-top: 16px; }

/* Logo marquee items. The files are pre-lit for the dark ground; opacity
   does the "quiet row" work the gray text used to do, and hover restores
   full strength one logo at a time. */
.marquee { margin-top: 30px; }
.marquee__item--logo img {
  display: block;
  height: 44px;
  width: auto;
  opacity: 0.72;
  transition: opacity var(--t-micro) var(--ease);
}
.marquee__item--logo:hover img { opacity: 1; }

/* Without the animation there is no loop to close, so the duplicate set is
   just repeated content. */
@media (prefers-reduced-motion: reduce) {
  .marquee__item[data-dup] { display: none; }
  .marquee__track { flex-wrap: wrap; justify-content: center; row-gap: 26px; width: 100%; padding-inline: var(--gutter); }
}

/* Blog pagination. */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-2); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a.page-numbers:hover { border-color: rgba(17, 239, 180, 0.35); color: var(--text); }
.pagination .page-numbers.current { border-color: var(--green); color: var(--green); }

/* Assessment embed. */
.assessment-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

@media (max-width: 640px) {
  .mform__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {
  .site-header, .nav, .marquee, .hero__art, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}