/* ==========================================================================
   ASYS — "Setout" design tokens + base
   All Seasons Yard Services · concept v1 · ORDA Creative
   One file: tokens, @font-face, reset, base typography, focus/selection.
   Breakpoints (use in min-width media queries; custom props can't be used in MQs):
     --bp-sm  : 36rem  (576px)   large phones / small tablets portrait
     --bp-md  : 48rem  (768px)   tablets
     --bp-lg  : 64rem  (1024px)  small laptops, desktop nav appears
     --bp-xl  : 80rem  (1280px)  desktop
     --bp-2xl : 90rem  (1440px)  wide; container stops growing
   ========================================================================== */

/* ---- Fonts: self-hosted variable woff2 (latin subset, from @fontsource-variable) ---- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
       url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-var.woff2") format("woff2-variations"),
       url("../fonts/martian-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: raw palette ------------------------------------------- */
  --basalt-950: #0b0e0c;   /* deepest, footer */
  --basalt-900: #111512;   /* dark surface */
  --basalt-800: #1a201b;   /* raised dark */
  --basalt-700: #262d27;   /* dark hairline strong */
  --basalt-600: #343c36;   /* dark hairline */
  --fog-100:    #e8ebe6;   /* text on dark 15.3:1 */
  --fog-300:    #a3aba4;   /* secondary on dark 7.8:1 */
  --fog-500:    #7b847d;   /* decorative only on dark */
  --concrete-50:  #f7f7f4; /* paper */
  --concrete-100: #edeee9; /* light surface */
  --concrete-200: #dfe1db; /* sunken light */
  --concrete-300: #c9ccc4; /* hairline light */
  --ink-900: #121613;      /* text on light 15.7:1 */
  --ink-600: #4a524c;      /* secondary on light 6.9:1 */
  --ink-500: #5f6761;      /* tertiary on light 5.2:1 (paper) */

  /* The one accent: ASYS green, deepened and cooled. One hue, three stops. */
  --green-400: #39c065;    /* "marking green" — marks, buttons on dark, 7.8:1 on basalt */
  --green-700: #17703b;    /* green as text/links on light, 5.3:1 on concrete */
  --green-900: #0c4a2b;    /* drenched field (CTA band), fog text 8.6:1 */
  --green-200: #b9e7c6;    /* secondary text on green-900, 7.5:1 */

  /* Flagging-tape amber: ONLY for "confirm" / placeholder status. Never decorative. */
  --amber-400: #f4b000;    /* basalt text on amber 9.7:1 */
  --amber-100: #fbeabf;

  --red-700: #b42e1c;      /* error on light 5.8:1 */
  --red-300: #ff8a73;      /* error on dark 8.0:1 */

  /* ---- Colour: semantic (light is the root; .surface-dark flips) ------- */
  --bg:        var(--concrete-100);
  --bg-raised: var(--concrete-50);
  --bg-sunken: var(--concrete-200);
  --fg:        var(--ink-900);
  --fg-2:      var(--ink-600);
  --fg-3:      var(--ink-500);
  --line:      var(--concrete-300);
  --line-strong: var(--ink-900);
  --accent:    var(--green-700);      /* text-safe accent on this surface */
  --accent-mark: var(--green-700);    /* rules, ticks, markers */
  --btn-bg:    var(--green-900);
  --btn-fg:    var(--fog-100);
  --btn-bg-hover: var(--basalt-900);
  --focus:     var(--green-700);
  --error:     var(--red-700);
  --confirm-bg: var(--amber-400);
  --confirm-fg: var(--basalt-900);
  --confirm-wash: color-mix(in srgb, var(--amber-400) 26%, transparent);

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Archivo", "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 112%;   /* semi-expanded: engineered, planted */
  --stretch-text: 100%;
  --weight-display: 620;
  --weight-strong: 600;
  --weight-text: 400;

  /* fluid scale, 360 → 1440 */
  --step--2: 0.6875rem;                                   /* 11px mono micro (uppercase codes only) */
  --step--1: 0.8125rem;                                   /* 13px mono labels, captions */
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.125rem);     /* body 16 → 18 */
  --step-1:  clamp(1.1875rem, 1.1rem + 0.42vw, 1.4375rem);/* lede 19 → 23 */
  --step-2:  clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);   /* h3 22 → 30 */
  --step-3:  clamp(1.75rem, 1.4rem + 1.6vw, 2.875rem);    /* h2 28 → 46 */
  --step-4:  clamp(2.25rem, 1.65rem + 2.8vw, 4.25rem);    /* page h1 36 → 68 */
  --step-5:  clamp(2.625rem, 1.55rem + 4.8vw, 6rem);      /* hero display 42 → 96 */

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-text: 1.55;
  --track-display: -0.032em;
  --track-mono: 0.02em;
  --measure: 64ch;

  /* ---- Space (4px base; section rhythm is fluid) ----------------------- */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */
  --sp-10: 9rem;    /* 144 */
  --section-y: clamp(4rem, 2.6rem + 6.2vw, 9rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);            /* 16 → 32 */
  --page-x: clamp(1rem, -0.2rem + 4.4vw, 4rem);           /* side margin 16 → 64 */

  /* ---- Layout ---------------------------------------------------------- */
  --container: 90rem;       /* 1440 frame */
  --content: 80rem;         /* 1280 content */
  --cols: 4;                /* 4 / 8 / 12 columns — see .grid */

  /* ---- Shape & depth: hard edges. Radius only on inputs + chips ------ */
  --radius-0: 0;
  --radius-1: 2px;
  --hair: 1px;
  --rule: 2px;
  --shadow-panel: 0 1px 2px rgb(11 14 12 / 0.12), 0 24px 48px -24px rgb(11 14 12 / 0.45);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-1: 120ms;   /* press, colour */
  --dur-2: 220ms;   /* hover, chip, accordion */
  --dur-3: 480ms;   /* panels, image hover */
  --dur-draw: 900ms;/* set-out line draw (the one authored moment) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Layers ---------------------------------------------------------- */
  --z-header: 50;
  --z-menu: 60;

  color-scheme: light;
}

@media (min-width: 48rem) { :root { --cols: 8; } }
@media (min-width: 64rem) { :root { --cols: 12; } }

/* Dark surface: flip semantics, never re-declare components */
.surface-dark {
  --bg: var(--basalt-900);
  --bg-raised: var(--basalt-800);
  --bg-sunken: var(--basalt-950);
  --fg: var(--fog-100);
  --fg-2: var(--fog-300);
  --fg-3: var(--fog-300);
  --line: var(--basalt-600);
  --line-strong: var(--fog-100);
  --accent: var(--green-400);
  --accent-mark: var(--green-400);
  --btn-bg: var(--green-400);
  --btn-fg: var(--basalt-900);
  --btn-bg-hover: var(--fog-100);
  --focus: var(--green-400);
  --error: var(--red-300);
  --confirm-wash: color-mix(in srgb, var(--amber-400) 22%, transparent);
  color-scheme: dark;
}
.surface-green {
  --bg: var(--green-900);
  --bg-raised: #0f5533;
  --fg: var(--fog-100);
  --fg-2: var(--green-200);
  --fg-3: var(--green-200);
  --line: #2a6a47;
  --line-strong: var(--fog-100);
  --accent: var(--fog-100);
  --accent-mark: var(--green-400);
  --btn-bg: var(--fog-100);
  --btn-fg: var(--green-900);
  --btn-bg-hover: var(--green-400);
  --focus: var(--fog-100);
  color-scheme: dark;
}
.surface-paper { --bg: var(--concrete-50); --bg-raised: #ffffff; }
.surface-dark, .surface-green, .surface-paper, .surface-light { background: var(--bg); color: var(--fg); }

/* ==========================================================================
   Reset (lean)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-text);
  font-stretch: var(--stretch-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--accent-mark); }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ==========================================================================
   Base typography
   ========================================================================== */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-sans);
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.t-display { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: -0.038em; }
h1, .t-h1  { font-size: var(--step-4); line-height: 1.02; }
h2, .t-h2  { font-size: var(--step-3); line-height: 1.06; }
h3, .t-h3  { font-size: var(--step-2); letter-spacing: -0.018em; }
h4, .t-h4  { font-size: var(--step-0); font-weight: var(--weight-strong); font-stretch: 104%; letter-spacing: 0; line-height: 1.3; }
.t-lede    { font-size: var(--step-1); line-height: 1.42; color: var(--fg); max-width: 38ch; letter-spacing: -0.006em; }
.t-body    { max-width: var(--measure); }
.t-muted   { color: var(--fg-2); }
.t-mono, .t-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  line-height: 1.5;
  font-variant-numeric: tabular-nums slashed-zero;
}
.t-code { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; }
strong, b { font-weight: var(--weight-strong); }
small { font-size: var(--step--1); }

/* ==========================================================================
   Browser surfaces carry the design
   ========================================================================== */
::selection { background: var(--green-400); color: var(--basalt-900); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-1); }
input, textarea, select { caret-color: var(--accent-mark); accent-color: var(--green-700); }
html { scrollbar-color: var(--fog-500) var(--basalt-900); }

/* Utilities */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-x); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section-y); }

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

/* ==========================================================================
   Components — "Setout"
   ========================================================================== */

/* ---- Brand mark ---------------------------------------------------------- */
.mark { width: 2.25rem; height: 2.25rem; color: var(--fg); flex: none; }
.mark .q { fill: currentColor; }
.mark .q-spring { fill: var(--accent-mark); }
.mark .glyph { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; }
.mark .glyph-fill { fill: var(--bg); }
.lockup { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--fg); }
.lockup__name { font-stretch: 125%; font-weight: 720; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1; }
.lockup__full { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); line-height: 1.35; border-left: 1px solid var(--line); padding-left: var(--sp-3); display: none; }
@media (min-width: 36rem) { .lockup__full { display: block; } }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --_bg: var(--btn-bg); --_fg: var(--btn-fg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 3rem; padding: 0.75rem 1.25rem;
  background: var(--_bg); color: var(--_fg);
  font-weight: 600; font-stretch: 108%; font-size: 1rem; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; border: 1px solid var(--_bg); border-radius: var(--radius-0);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.btn svg { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover { --_bg: var(--btn-bg-hover); --_fg: var(--bg); }
.surface-dark .btn:hover, .surface-green .btn:hover { --_fg: var(--basalt-900); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --_bg: transparent; --_fg: var(--fg); border-color: var(--fg); }
.btn--ghost:hover { --_bg: var(--fg); --_fg: var(--bg); }
.surface-dark .btn--ghost:hover, .surface-green .btn--ghost:hover { --_fg: var(--basalt-900); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-stretch: 106%; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--accent-mark); padding-bottom: 2px; }
.link-arrow svg { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  color: var(--fog-100);
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: var(--basalt-900); border-bottom-color: var(--basalt-700); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 4.5rem; }
.nav { display: none; }
.nav ul { display: flex; gap: clamp(1rem, 2vw, 2.25rem); list-style: none; padding: 0; }
.nav a { text-decoration: none; font-weight: 500; font-stretch: 104%; font-size: 0.975rem; padding-block: .5rem; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px; background: var(--green-400); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--sp-5); }
.header-phone { display: none; font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none; }
.header-cta { display: none; min-height: 2.75rem; padding: .6rem 1rem; font-size: .95rem; }
.menu-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 2.75rem; padding-inline: .25rem; font-weight: 600; font-stretch: 106%; }
.menu-toggle__icon { width: 1.5rem; height: .75rem; position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: calc(100% - 2px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: calc(50% - 1px); transform: rotate(-45deg); }
@media (min-width: 64rem) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-cta { display: inline-flex; }
}
@media (min-width: 80rem) { .header-phone { display: inline; } }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  padding: 5.5rem var(--page-x) var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7);
  overflow-y: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.menu.is-open { opacity: 1; transform: none; }
.menu__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1rem; text-decoration: none; font-size: var(--step-3); font-stretch: 112%; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.menu__list a span { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.menu__foot { display: grid; gap: var(--sp-4); }
.menu__foot .btn { width: 100%; }
.menu__contact { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); display: grid; gap: var(--sp-1); }
.menu__contact a { color: var(--fg); text-decoration: none; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: transparent; border-bottom-color: transparent; z-index: calc(var(--z-menu) + 1); }
@media (min-width: 64rem) { .menu { display: none !important; } }

/* ---- Placeholder / confirm chips ---------------------------------------- */
.chip-flag {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--amber-400); color: var(--basalt-900);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: .35em .7em; line-height: 1.2; border-radius: var(--radius-1);
}
.chip-flag::before { content: ""; width: .55em; height: .55em; background: var(--basalt-900); transform: rotate(45deg); flex: none; }
mark.confirm {
  background: var(--confirm-wash); color: inherit;
  box-shadow: inset 0 -2px 0 var(--amber-400);
  padding: 0 .15em; border-radius: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.confirm::after {
  content: "confirm";
  display: inline-block; vertical-align: .35em; margin-left: .3em;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  background: var(--amber-400); color: var(--basalt-900); padding: .25em .4em; border-radius: 1px;
  font-stretch: 100%;
}
h1 mark.confirm::after, h2 mark.confirm::after, h3 mark.confirm::after, .t-display mark.confirm::after { font-size: 0.6875rem; vertical-align: .9em; letter-spacing: .06em; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; min-height: max(36rem, 100svh); display: grid; align-items: end; isolation: isolate; overflow: hidden; background: var(--basalt-900); }
.hero .hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before { /* legibility: basalt from the bottom and left only */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(17 21 18 / .92) 0%, rgb(17 21 18 / .6) 34%, rgb(17 21 18 / .08) 64%, rgb(17 21 18 / .5) 100%),
    linear-gradient(to right, rgb(17 21 18 / .5), transparent 60%);
}
.hero__inner { padding-block: 9rem var(--sp-5); display: grid; gap: var(--sp-5); }
.hero h1 { display: grid; gap: var(--sp-4); }
.hero h1 .t-display { color: var(--fog-100); }
.hero h1 .line { display: block; }
.hero__kw { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; letter-spacing: var(--track-mono); font-stretch: 100%; color: var(--green-400); line-height: 1.4; order: -1; }
.hero__lede { font-size: var(--step-1); line-height: 1.42; max-width: 40ch; color: var(--fog-100); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgb(232 235 230 / .22); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fog-300); }
.hero__foot ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; padding: 0; }
.video-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; color: var(--fog-100); font-family: var(--font-mono); font-size: var(--step--1); }
.video-toggle svg { width: 1.25rem; height: 1.25rem; }
.hero__flag { position: absolute; top: 5.5rem; right: var(--page-x); left: var(--page-x); display: flex; justify-content: flex-end; }
.hero__flag-inner { display: grid; gap: var(--sp-2); justify-items: end; max-width: 22rem; text-align: right; }
.hero__flag p { display: none; font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.5; letter-spacing: .02em; color: var(--fog-100); background: rgb(17 21 18 / .72); padding: .5em .7em; }
@media (min-width: 48rem) { .hero__flag p { display: block; } }
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); padding-bottom: var(--sp-7); }
  .hero h1 { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
  .hero__lede { grid-column: 1 / span 6; }
  .hero__actions { grid-column: 7 / span 6; justify-content: flex-end; align-self: end; }
  .hero__foot { grid-column: 1 / -1; }
}

/* ---- Section heading (set-out annotation) -------------------------------- */
.sh { display: grid; gap: var(--sp-4) var(--gutter); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.setout { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--track-mono); color: var(--fg-2); }
.setout__line { flex: 1; height: 1px; background: var(--accent-mark); position: relative; transform-origin: left center; min-width: 2rem; }
.setout__line::before, .setout__line::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--accent-mark); }
.setout__line::before { left: 0; } .setout__line::after { right: 0; }
.setout__val { color: var(--fg); white-space: nowrap; }
.sh__title { max-width: 18ch; }
.sh__lede { color: var(--fg-2); max-width: 46ch; font-size: var(--step-1); line-height: 1.42; }
@media (min-width: 64rem) {
  .sh { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; }
  .sh .setout { grid-column: 1 / -1; }
  .sh__title { grid-column: 1 / span 7; }
  .sh__lede { grid-column: 8 / span 5; justify-self: start; }
}
html.motion .setout__line { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); }
html.motion .is-drawn .setout__line { transform: scaleX(1); }

/* ---- Image treatment ----------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--basalt-800); isolation: isolate; }
.media picture { display: block; height: 100%; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.treat img, .treat video { filter: saturate(.55) contrast(1.06) brightness(.98); transition: filter var(--dur-3) var(--ease-out), transform 1.2s var(--ease-out); }
.treat::before { /* tint: shadows pulled toward basalt-green */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(12 74 43 / .26), rgb(11 14 12 / .4));
  mix-blend-mode: multiply; transition: opacity var(--dur-3) var(--ease-out);
}
.treat::after { /* grain */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ticks { position: absolute; inset: var(--sp-3); z-index: 3; pointer-events: none; }
.ticks::before, .ticks::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--green-400); border-style: solid; }
.ticks::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.ticks::after { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.fig { display: grid; gap: var(--sp-3); }
.fig figcaption { display: flex; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); line-height: 1.5; }
.fig figcaption b { color: var(--fg); font-weight: 500; white-space: nowrap; }

/* ---- Placeholder frame (footage to supply) ------------------------------- */
.ph {
  position: relative; overflow: hidden; display: grid; place-items: center; grid-template-columns: minmax(0, 34rem);
  background-color: var(--basalt-800);
  background-image: repeating-linear-gradient(135deg, rgb(163 171 164 / .16) 0 1px, transparent 1px 11px);
  color: var(--fog-100);
  outline: 1.5px dashed rgb(232 235 230 / .38); outline-offset: -10px;
}
.ph--gravel { background-image: radial-gradient(rgb(163 171 164 / .28) 1px, transparent 1.4px), radial-gradient(rgb(163 171 164 / .18) 1px, transparent 1.4px); background-size: 12px 12px, 12px 12px; background-position: 0 0, 6px 6px; }
.ph--turf { background-image: repeating-linear-gradient(90deg, rgb(57 192 101 / .14) 0 1px, transparent 1px 14px), repeating-linear-gradient(0deg, rgb(57 192 101 / .1) 0 1px, transparent 1px 14px); }
.ph__inner { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-6); max-width: 34rem; min-width: 0; width: 100%; position: relative; z-index: 1; }
.ph__icon { width: 2.5rem; height: 2.5rem; color: var(--amber-400); }
.ph__title { font-size: var(--step-2); font-weight: 600; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.12; color: var(--fog-100); }
.ph__brief { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fog-300); line-height: 1.6; }
.ph .chip-flag { position: absolute; top: 1.25rem; left: 1.25rem; }
.ph__inner .chip-flag { position: static; }
.ph--feature { aspect-ratio: 4 / 5; }
.ph-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gutter); margin-top: var(--gutter); }
.ph-row .ph { aspect-ratio: 3 / 2; }
@media (min-width: 48rem) { .ph--feature { aspect-ratio: 16 / 9; } }
.ph--compact .ph__inner { padding: var(--sp-5); gap: var(--sp-2); }
.ph--compact .ph__title { font-size: var(--step-0); }

/* ---- Capabilities -------------------------------------------------------- */
.caps { display: grid; gap: var(--sp-7) var(--gutter); }
.cap { display: grid; gap: var(--sp-4); align-content: start; text-decoration: none; color: inherit; }
.cap__media { aspect-ratio: 4 / 3; }
.cap__code { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .04em; }
.cap__title { font-size: var(--step-2); }
.cap__text { color: var(--fg-2); max-width: 38ch; }
.cap__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); border-top: 1px solid var(--line-strong); padding-top: var(--sp-3); }
.cap:hover .treat img { filter: saturate(.8) contrast(1.05) brightness(.95); transform: scale(1.025); }
.cap:hover .cap__title { text-decoration: underline; text-decoration-color: var(--accent-mark); text-decoration-thickness: 2px; text-underline-offset: .18em; }

.cap--lead { padding: var(--sp-5); display: grid; gap: var(--sp-6); }
.cap--lead .cap__title { font-size: var(--step-3); max-width: 14ch; }
.cap--lead .cap__text { max-width: 44ch; font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); }
.xsec { width: 100%; height: auto; }
.xsec text { font-family: var(--font-mono); }
.xsec-key { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); counter-reset: k; }
.xsec-key li { display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; counter-increment: k; }
.xsec-key li::before { content: counter(k); display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--green-400); color: var(--green-400); font-size: .6875rem; border-radius: 50%; }
.xsec-key b { color: var(--fg); font-weight: 500; }
@media (min-width: 48rem) {
  .caps { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .cap { grid-column: span 4; }
  .cap--lead { grid-column: 1 / -1; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) { .cap:last-child { grid-column: 1 / -1; } .cap:last-child .cap__media { aspect-ratio: 16 / 7; } }
@media (min-width: 64rem) {
  .caps { grid-template-columns: repeat(12, minmax(0,1fr)); row-gap: var(--sp-8); }
  .cap { grid-column: span 4; }
  .cap--lead { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); padding: var(--sp-7); align-items: start; }
  .cap--lead .cap__body { grid-column: 1 / span 5; display: grid; gap: var(--sp-5); align-content: start; }
  .cap--lead .cap__figure { grid-column: 6 / -1; }
  .cap--wide { grid-column: span 6; }
  .cap--wide .cap__media { aspect-ratio: 16 / 9; }
}

/* ---- Projects index ------------------------------------------------------ */
.filters { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-1); margin-inline: calc(var(--page-x) * -1); padding-inline: var(--page-x); scroll-padding-inline: var(--page-x); }
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .6em;
  min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-1);
  font-weight: 500; font-stretch: 104%; font-size: .9375rem; color: var(--fg);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.chip span { font-family: var(--font-mono); font-size: .6875rem; color: var(--fg-2); }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-pressed="true"] span { color: inherit; opacity: .75; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.filter-note { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.filter-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
@media (min-width: 64rem) { .filters { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }

.projects { list-style: none; padding: 0; display: grid; gap: var(--sp-7) var(--gutter); }
@media (min-width: 48rem) { .projects { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .projects { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pcard { display: grid; gap: var(--sp-4); text-decoration: none; color: inherit; }
.pcard__media { aspect-ratio: 5 / 4; }
.pcard__media .ph__inner { padding: var(--sp-5); }
.pcard__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.pcard__cat { color: var(--accent); }
.pcard__title { font-size: var(--step-2); line-height: 1.12; }
.pcard__where { color: var(--fg-2); }
.pcard:hover .treat img { filter: saturate(.8) contrast(1.05) brightness(.95); transform: scale(1.025); }
.pcard:hover .pcard__title { text-decoration: underline; text-decoration-color: var(--accent-mark); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.pcard[hidden] { display: none; }
@media (min-width: 64rem) { .projects > li:first-child { grid-column: span 2; grid-row: span 2; } .projects > li:first-child .pcard__media { aspect-ratio: auto; height: 100%; min-height: 22rem; } .projects > li:first-child .pcard { grid-template-rows: 1fr auto auto; height: 100%; } }
.projects.is-filtered > li:first-child { grid-column: auto; grid-row: auto; }
.projects.is-filtered > li:first-child .pcard__media { aspect-ratio: 5 / 4; min-height: 0; height: auto; }

/* ---- Project spec block -------------------------------------------------- */
.project-head { display: grid; gap: var(--sp-6) var(--gutter); }
.project-head__media { aspect-ratio: 16 / 9; }
.spec { display: grid; grid-template-columns: minmax(0,1fr); border-top: 2px solid var(--fg); }
.spec > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); padding-top: .15rem; }
.spec dd { font-weight: 500; line-height: 1.4; }
.spec dd ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.spec dd li { font-family: var(--font-mono); font-size: .75rem; border: 1px solid var(--line); padding: .2rem .5rem; font-weight: 400; }
@media (min-width: 64rem) {
  .project-head { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: start; }
  .project-head__intro { grid-column: 1 / span 5; display: grid; gap: var(--sp-5); }
  .project-head__media { grid-column: 6 / -1; grid-row: span 2; aspect-ratio: 4 / 3; }
  .project-head .spec { grid-column: 1 / span 5; }
}

/* ---- Prose (for confirm demo) -------------------------------------------- */
.prose { display: grid; gap: var(--sp-4); max-width: var(--measure); }
.prose p { color: var(--fg); }

/* ---- Stats: measured run -------------------------------------------------- */
.run { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-6) var(--gutter); position: relative; }
.run li { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-5); position: relative; border-top: 1px solid var(--accent-mark); }
.run li::before { content: ""; position: absolute; top: -6px; left: 0; width: 1px; height: 11px; background: var(--accent-mark); }
.run__num { font-size: var(--step-4); font-stretch: 112%; font-weight: 600; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums lining-nums; }
.run__num small { font-size: .42em; letter-spacing: -.01em; margin-left: .1em; font-weight: 500; }
.run__num mark.confirm { background: none; box-shadow: none; padding: 0; }
.run__num mark.confirm::after { vertical-align: 1.6em; }
.team-fig { margin-top: var(--sp-8); }
.team-fig .media { aspect-ratio: 4 / 3; }
.team-fig img { object-position: 45% 60%; }
@media (min-width: 48rem) { .team-fig .media { aspect-ratio: 1425 / 370; } }
.run__label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); max-width: 22ch; }
@media (min-width: 64rem) { .run { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 0; } .run li { padding-right: var(--gutter); } .run li:last-child::after { content: ""; position: absolute; top: -6px; right: 0; width: 1px; height: 11px; background: var(--accent-mark); } }

/* ---- Process ------------------------------------------------------------- */
.steps { list-style: none; padding: 0; display: grid; counter-reset: s; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--line); counter-increment: s; }
.step::before { content: counter(s); grid-row: span 2; font-size: var(--step-3); font-stretch: 112%; font-weight: 600; line-height: 1; color: var(--accent); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--step-2); }
.step p { color: var(--fg-2); max-width: 52ch; }
.step__who { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-3); grid-column: 2; }
@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--gutter); }
  .step { grid-template-columns: 1fr; border-top: 2px solid var(--fg); padding-top: var(--sp-4); align-content: start; }
  .step::before { grid-row: auto; margin-bottom: var(--sp-5); }
  .step__who { grid-column: 1; }
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq { border-top: 2px solid var(--fg); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.5rem; gap: var(--sp-4); align-items: start; padding-block: var(--sp-5); font-size: var(--step-1); font-weight: 600; font-stretch: 106%; letter-spacing: -.012em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 1.5rem; height: 1.5rem; margin-top: .1rem; background: linear-gradient(var(--fg), var(--fg)) center / 14px 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 14px no-repeat; transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq .faq__a { padding-bottom: var(--sp-5); color: var(--fg-2); max-width: 62ch; display: grid; gap: var(--sp-3); }
@media (min-width: 64rem) { .faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); } .faq-wrap .sh { grid-column: 1 / span 4; align-content: start; grid-template-columns: 1fr; } .faq-wrap .sh > * { grid-column: 1 / -1; } .faq-wrap .faq { grid-column: 6 / -1; } }

/* ---- Testimonial placeholder --------------------------------------------- */
.quote-ph { display: grid; gap: var(--sp-5); padding: clamp(1.5rem, 1rem + 3vw, 4rem); outline: 1.5px dashed var(--fg-3); outline-offset: -1px; position: relative; }
.quote-ph blockquote { font-size: var(--step-3); font-stretch: 108%; font-weight: 500; letter-spacing: -.028em; line-height: 1.15; color: var(--fg-3); max-width: 26ch; }
.quote-ph blockquote::before { content: "\201C"; color: var(--accent); margin-right: .05em; }
.quote-ph footer { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); display: grid; gap: var(--sp-1); }

/* ---- Logo strip placeholder ---------------------------------------------- */
.logos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.logos li { min-height: 6.5rem; display: grid; place-items: center; text-align: center; padding: var(--sp-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; font-stretch: 116%; letter-spacing: -.02em; color: var(--fg-2); line-height: 1.2; font-size: .95rem; }
.logos li span { display: block; font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; letter-spacing: .06em; font-size: .625rem; text-transform: uppercase; color: var(--fg-3); margin-top: .35rem; }
@media (min-width: 48rem) { .logos { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 64rem) { .logos { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* ---- CTA band ------------------------------------------------------------ */
.cta { display: grid; gap: var(--sp-6) var(--gutter); }
.cta h2 { font-size: var(--step-5); line-height: .98; letter-spacing: -.04em; max-width: 12ch; }
.cta p { color: var(--fg-2); font-size: var(--step-1); line-height: 1.42; max-width: 38ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta__tel { font-family: var(--font-mono); font-size: var(--step-0); color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--green-400); }
@media (min-width: 64rem) { .cta { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; } .cta h2 { grid-column: 1 / span 8; } .cta__side { grid-column: 9 / -1; display: grid; gap: var(--sp-5); } }
.cta__side { display: grid; gap: var(--sp-5); }

/* ---- Form ---------------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-7) var(--gutter); }
.contact__aside { display: grid; gap: var(--sp-5); align-content: start; }
.contact__aside dl { display: grid; gap: var(--sp-4); }
.contact__aside dt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.contact__aside dd { font-size: var(--step-1); font-weight: 500; }
.contact__aside dd a { text-decoration: none; border-bottom: 1px solid var(--accent-mark); }
@media (min-width: 64rem) { .contact { grid-template-columns: repeat(12, minmax(0,1fr)); } .contact__aside { grid-column: 1 / span 4; } .form { grid-column: 6 / -1; } }
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 36rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--sp-2); }
.field label, .field legend { font-weight: 600; font-stretch: 104%; font-size: .9375rem; }
.field label .opt { font-family: var(--font-mono); font-weight: 400; font-size: .6875rem; color: var(--fg-2); margin-left: .4em; }
.field .hint { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-2); line-height: 1.5; }
.input {
  width: 100%; min-height: 3rem; padding: .75rem .9rem;
  background: var(--bg-raised); color: var(--fg);
  border: 1px solid var(--fg-3); border-radius: var(--radius-1);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.input::placeholder { color: var(--fg-3); opacity: 1; }
.input:hover { border-color: var(--fg); }
.input:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-400) 45%, transparent); }
textarea.input { min-height: 9rem; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field.is-invalid .input { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); }
.field.is-valid .input { border-color: var(--green-700); }
.err { display: none; align-items: start; gap: .5em; font-size: .875rem; color: var(--error); font-weight: 500; }
.err::before { content: ""; width: .5rem; height: .5rem; margin-top: .4em; background: var(--error); transform: rotate(45deg); flex: none; }
.field.is-invalid .err { display: flex; }
.radios { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; padding: 0; }
.radios legend { margin-bottom: var(--sp-2); }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; }
.radio span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid var(--fg-3); border-radius: var(--radius-1); font-size: .9375rem; cursor: pointer; transition: all var(--dur-2) var(--ease-out); }
.radio input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form__summary { padding: var(--sp-4); border: 1px solid var(--error); background: color-mix(in srgb, var(--error) 7%, var(--bg-raised)); display: grid; gap: var(--sp-2); }
.form__summary h3 { font-size: var(--step-0); font-stretch: 104%; letter-spacing: 0; color: var(--error); }
.form__summary ul { padding-left: 1.1rem; font-size: .9375rem; }
.form__summary a { color: var(--fg); }
.form__success { padding: var(--sp-5); background: var(--green-900); color: var(--fog-100); display: grid; gap: var(--sp-2); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.form__foot p { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-2); max-width: 36ch; }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--basalt-950); padding-block: var(--sp-9) var(--sp-6); }
.footer__top { display: grid; gap: var(--sp-7) var(--gutter); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.footer__brand { display: grid; gap: var(--sp-5); align-content: start; }
.footer__brand .mark { width: 4rem; height: 4rem; }
.footer__brand p { color: var(--fg-2); max-width: 32ch; }
.footer h2 { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; letter-spacing: var(--track-mono); color: var(--fg-2); font-stretch: 100%; margin-bottom: var(--sp-4); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-7) var(--gutter); }
.footer__contact { font-size: var(--step-1); font-weight: 500; }
.footer__legal { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); font-family: var(--font-mono); font-size: .75rem; color: var(--fg-2); line-height: 1.6; }
.footer__ack { max-width: 70ch; }
@media (min-width: 64rem) {
  .footer__top { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .footer__brand { grid-column: 1 / span 4; }
  .footer__cols { grid-column: 6 / -1; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer__legal { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---- 404 ----------------------------------------------------------------- */
.nf { min-height: 80svh; display: grid; align-content: end; gap: var(--sp-6); position: relative; overflow: hidden; padding-block: var(--sp-10) var(--sp-8); }
.nf .nf__rl { display: none; position: absolute; bottom: var(--sp-8); right: var(--page-x); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); text-align: right; }
.nf .nf__big { max-width: none; font-size: clamp(7rem, 3rem + 22vw, 20rem); font-stretch: 125%; font-weight: 700; letter-spacing: -.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--fog-500); user-select: none; }
.nf h1 { font-size: var(--step-4); max-width: 16ch; }
.nf p { color: var(--fg-2); max-width: 46ch; font-size: var(--step-1); line-height: 1.42; }
@media (min-width: 48rem) { .nf .nf__rl { display: block; } }
.nf__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; }




/* ==========================================================================
   Site layer: page layouts built on the Setout components.
   ========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.no-bg { background: none !important; }
[data-pt0] { padding-top: 0; }
.section--flush-top { padding-top: var(--sp-5); }
main:focus { outline: none; }

.skip { position: absolute; left: var(--sp-4); top: -4rem; z-index: 100; background: var(--green-400); color: var(--basalt-900); padding: .75rem 1rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--sp-4); }

/* ---- Header variants ----------------------------------------------------- */
.site-header .mark { --bg: var(--basalt-900); }
.site-header.is-static { position: sticky; background: var(--basalt-900); border-bottom-color: var(--basalt-700); }
.site-header .header-cta[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--basalt-900); }
.notice { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; padding: .45rem var(--page-x); background: var(--amber-400); color: var(--basalt-900); font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; text-align: center; }
.notice .chip-flag { background: var(--basalt-900); color: var(--amber-400); padding: .25em .55em; }
.notice .chip-flag::before { background: var(--amber-400); }
.notice mark.confirm { background: none; box-shadow: none; }

/* Capabilities dropdown (desktop) */
.nav > ul > li { display: flex; align-items: center; }
.nav__has-sub { position: relative; gap: 2px; }
.nav__sub-toggle { display: inline-grid; place-items: center; width: 1.75rem; height: 2.75rem; color: var(--fog-300); }
.nav__sub-toggle svg { width: .75rem; height: .75rem; transition: transform var(--dur-2) var(--ease-out); }
.nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub-toggle:hover { color: var(--fog-100); }
.nav__sub { position: absolute; top: calc(100% + .6rem); left: -1.25rem; min-width: 22rem; padding: var(--sp-3); background: var(--basalt-900); border: 1px solid var(--basalt-700); box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav__has-sub:hover .nav__sub, .nav__has-sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub ul { list-style: none; padding: 0; display: grid; }
.nav .nav__sub a { display: flex; gap: var(--sp-4); align-items: baseline; padding: .6rem .75rem; font-size: .95rem; }
.nav .nav__sub a::after { display: none; }
.nav .nav__sub a:hover, .nav .nav__sub a[aria-current="page"] { background: var(--basalt-800); }
.nav .nav__sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--green-400); }
.nav__code { font-family: var(--font-mono); font-size: .6875rem; color: var(--green-400); letter-spacing: .06em; min-width: 1.5rem; }

/* Mobile menu sub-list */
.menu__sub { list-style: none; padding: 0 0 var(--sp-4) 0; display: grid; gap: .1rem; }
.menu__list .menu__sub li { border: 0; }
.menu__list .menu__sub a { font-size: var(--step-0); font-stretch: 104%; font-weight: 500; letter-spacing: 0; padding-block: .6rem; min-height: 2.75rem; color: var(--fg-2); }
.menu__list .menu__sub a[aria-current="page"], .menu__list a[aria-current="page"] { color: var(--green-400); }

/* ---- Breadcrumb ---------------------------------------------------------- */
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--fg-3); }
.crumbs a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--fg); border-bottom-color: var(--accent-mark); }
.crumbs [aria-current] { color: var(--fg); }

/* ---- Home hero ----------------------------------------------------------- */
.hero--home .hero__h1 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.25rem); line-height: 1; letter-spacing: -0.036em; max-width: 19ch; color: var(--fog-100); }
.hero--home .hero__inner { gap: var(--sp-4); }
.hero__kw { order: 0; }
@media (min-width: 64rem) {
  .hero--home .hero__kw, .hero--home .hero__h1 { grid-column: 1 / -1; }
  .hero--home .hero__h1 { margin-bottom: var(--sp-3); }
}
.hero__flag p mark.confirm, .chero__label mark.confirm { color: inherit; }

/* ---- Page head (text-only heroes) --------------------------------------- */
.phead { padding-block: var(--sp-7) var(--sp-6); }
.phead .crumbs { margin-bottom: var(--sp-6); }
.phead h1 { max-width: 20ch; }
.phead__intro { margin-top: var(--sp-5); max-width: 52ch; color: var(--fg-2); }
.phead--tall { min-height: 60svh; padding-bottom: var(--sp-9); }

/* ---- Positioning --------------------------------------------------------- */
.positioning__text { display: grid; gap: var(--sp-6); max-width: 60ch; }
.positioning__text p { font-size: var(--step-2); font-weight: 500; font-stretch: 104%; letter-spacing: -.018em; line-height: 1.3; }
.positioning__kicker { color: var(--accent); border-left: 2px solid var(--accent-mark); padding-left: var(--sp-5); }
@media (min-width: 64rem) { .positioning__text { margin-left: calc((100% + var(--gutter)) / 12); } }

/* ---- Capability grid (home) --------------------------------------------- */
.cap { color: var(--fg); }
.cap__media.ph { width: 100%; }
.cap--lead .cap__figure .ph { aspect-ratio: 16 / 10; }
.cap--lead .cap__head { border-color: var(--line); }
.cap--lead .cap__body { display: grid; gap: var(--sp-4); justify-items: start; align-content: start; }
.cap--lead .cap__body .cap__head { width: 100%; }
.cap .link-arrow { justify-self: start; margin-top: var(--sp-1); }
.caps--home .cap:not(.cap--lead) .cap__media { aspect-ratio: 4 / 3; }
@media (min-width: 64rem) {
  .caps--home .cap--wide .cap__media { aspect-ratio: 16 / 9; }
  .cap--lead .cap__figure { grid-column: 7 / -1; }
  .cap--lead .cap__body { grid-column: 1 / span 5; }
}

/* ---- Project cards ------------------------------------------------------- */
.pcard__media { aspect-ratio: 16 / 10; }
.pcard__media > .ph { height: 100%; }
.pcard .ph .chip-flag { top: 1rem; left: 1rem; }
.pcard .ph__title { font-size: var(--step-1); }
.pcard__meta { justify-content: flex-start; gap: var(--sp-1) var(--sp-4); }

.featured { list-style: none; padding: 0; display: grid; gap: var(--sp-7) var(--gutter); }
.filter-note--solo { margin-bottom: var(--sp-5); }
@media (min-width: 48rem) { .featured { grid-template-columns: 1fr 1fr; } .featured__lead { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .featured { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .featured__lead { grid-column: 1 / span 7; grid-row: span 2; }
  .featured > li:not(.featured__lead) { grid-column: 8 / -1; }
  .featured__lead .pcard { height: 100%; grid-template-rows: 1fr auto auto; }
  .featured__lead .pcard__media { aspect-ratio: auto; min-height: 24rem; }
  .featured__lead .pcard__title { font-size: var(--step-3); }
}
.after-grid { margin-top: var(--sp-7); }
.projects--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .projects--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.projects--2 > li:first-child { grid-column: auto !important; grid-row: auto !important; }
.projects--2 > li:first-child .pcard__media { aspect-ratio: 16 / 10 !important; min-height: 0 !important; height: auto !important; }
.projects--2 > li:first-child .pcard { height: auto !important; grid-template-rows: none !important; }
.projects li[hidden] { display: none; }
.filter-bar.is-sticky { position: sticky; top: var(--hh, 4.5rem); z-index: 5; background: var(--bg); padding-block: var(--sp-3); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.empty { padding: var(--sp-6); border: 1px dashed var(--line); font-size: var(--step-1); }
.empty a { color: var(--accent); }

/* ---- Rows (why / who) ---------------------------------------------------- */
.why { display: grid; gap: var(--sp-6) var(--gutter); }
.rows { border-top: 2px solid var(--fg); }
.rows > div { display: grid; gap: var(--sp-2) var(--gutter); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.rows dt { font-size: var(--step-1); font-weight: 600; font-stretch: 106%; letter-spacing: -.012em; line-height: 1.25; }
.rows dd { color: var(--fg-2); max-width: 56ch; }
.why .sh { margin-bottom: 0; }
@media (min-width: 48rem) { .rows--who > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } .rows--who dd { color: var(--fg); } }
@media (min-width: 64rem) {
  .why { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .why__head { grid-column: 1 / span 5; position: sticky; top: 7rem; grid-template-columns: 1fr; }
  .why__head > * { grid-column: 1 / -1 !important; }
  .why > .rows { grid-column: 7 / -1; }
}

/* ---- Process ------------------------------------------------------------- */
.steps--lz .step::before { content: counter(s, decimal-leading-zero); }
.step h3 { grid-column: 2; }
.step p { grid-column: 2; }
@media (min-width: 64rem) { .step h3, .step p { grid-column: 1; } }

/* ---- Clients ------------------------------------------------------------- */
.sh--tight { margin-bottom: var(--sp-5); }
h2.setout { font-weight: 400; font-stretch: 100%; letter-spacing: var(--track-mono); font-size: var(--step--1); color: var(--fg-2); line-height: 1.5; }
.logos li { font-size: .9375rem; }
.logos li div { display: block; }
.logos mark.confirm { display: block; margin-top: .4rem; font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; font-stretch: 100%; letter-spacing: .02em; background: none; box-shadow: none; color: var(--fg-2); }
.logos__caption { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }

/* ---- CTA band ------------------------------------------------------------ */
.cta .cta__small { font-size: var(--step--1); line-height: 1.6; }
.cta__small { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.cta__small a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--green-400); }

/* ---- Capabilities index -------------------------------------------------- */
.phead + .section .wrap > .caprows { border-top: 2px solid var(--fg); }
.caprows { list-style: none; padding: 0; display: grid; }
.caprow { display: grid; gap: var(--sp-5) var(--gutter); padding-block: var(--sp-7); border-bottom: 1px solid var(--line); }
.caprow__frame { aspect-ratio: 16 / 10; width: 100%; }
.caprow--lead .caprow__frame { aspect-ratio: 4 / 3; }
.caprow__body { display: grid; gap: var(--sp-4); align-content: center; justify-items: start; }
.caprow__n { display: flex; align-items: center; gap: var(--sp-3); width: 100%; font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.caprow__n span:first-child { color: var(--accent); }
.caprow__title { font-size: var(--step-3); }
.caprow__title a { text-decoration: none; }
.caprow__title a:hover { text-decoration: underline; text-decoration-color: var(--accent-mark); text-decoration-thickness: 2px; }
.caprow__text { color: var(--fg-2); max-width: 48ch; }
.scope-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.scope-tags li { font-family: var(--font-mono); font-size: .75rem; border: 1px solid var(--line); padding: .3rem .55rem; color: var(--fg); background: var(--bg-raised); }
@media (min-width: 64rem) {
  .caprow { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; padding-block: var(--sp-8); }
  .caprow__media { grid-column: 1 / span 6; }
  .caprow__body { grid-column: 8 / span 5; }
  .caprow--flip .caprow__media { grid-column: 7 / -1; grid-row: 1; }
  .caprow--flip .caprow__body { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---- Capability hero (split) -------------------------------------------- */
.chero { padding-block: calc(4.5rem + var(--sp-7)) var(--sp-8); position: relative; }
.chero__grid { display: grid; gap: var(--sp-7) var(--gutter); }
.chero__text { display: grid; gap: var(--sp-5); align-content: end; justify-items: start; }
.chero h1 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.75rem); line-height: 1.03; max-width: 20ch; }
.chero .hero__lede { color: var(--fg-2); }
.chero__frame { aspect-ratio: 4 / 3; width: 100%; }
.chero__frame video { width: 100%; height: 100%; object-fit: cover; }
.chero__chip { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 4; }
.chero__media figcaption { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.chero__label { flex: 1 1 16rem; }
.chero__media .video-toggle { color: var(--fg); }
@media (min-width: 64rem) {
  .chero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .chero__text { grid-column: 1 / span 7; }
  .chero__media { grid-column: 8 / -1; }
  .chero__frame { aspect-ratio: 4 / 5; }
  .page-cap .chero__frame { max-height: 34rem; }
}

/* ---- Prose, pull figure -------------------------------------------------- */
.prose { max-width: 65ch; gap: var(--sp-5); }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-2); }
.prose h2 + p { margin-top: calc(var(--sp-1) * -1); }
.prose p { max-width: 65ch; }
.split-margin { display: grid; gap: var(--sp-7) var(--gutter); }
.pull { border-top: 2px solid var(--accent-mark); padding-top: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; max-width: 22rem; }
.pull__num { font-size: var(--step-4); font-stretch: 112%; font-weight: 620; letter-spacing: -.04em; line-height: 1; }
.pull__cap { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
@media (min-width: 64rem) { .split-margin { grid-template-columns: repeat(12, minmax(0, 1fr)); } .split-margin .prose { grid-column: 1 / span 7; } .split-margin .pull { grid-column: 9 / -1; margin-top: 3.25rem; } }

.text-fig { display: grid; gap: var(--sp-7) var(--gutter); }
.text-fig__media { aspect-ratio: 16 / 10; }
@media (min-width: 64rem) { .text-fig { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .text-fig .prose { grid-column: 1 / span 6; } .text-fig__fig { grid-column: 8 / -1; margin-top: 3.25rem; } }

/* ---- Diagram (soil cells) ----------------------------------------------- */
.diagram { display: grid; gap: var(--sp-7) var(--gutter); }
.diagram__text { display: grid; gap: var(--sp-5); align-content: start; max-width: 60ch; }
.diagram__text h2 { font-size: var(--step-3); }
.diagram__h { font-size: var(--step-1); font-stretch: 106%; letter-spacing: -.01em; }
.diagram__fig { gap: var(--sp-5); }
.diagram .xsec-key { counter-reset: k; }
@media (min-width: 48rem) { .diagram .xsec-key { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } }
@media (min-width: 64rem) { .diagram { grid-template-columns: repeat(12, minmax(0, 1fr)); } .diagram__text { grid-column: 1 / span 4; position: sticky; top: 7rem; } .diagram__fig { grid-column: 6 / -1; } }

/* ---- 2 x 2 statements ---------------------------------------------------- */
.grid4 { list-style: none; padding: 0; display: grid; gap: var(--sp-6) var(--gutter); }
.grid4 li { border-top: 2px solid var(--fg); padding-top: var(--sp-4); }
.grid4 p { color: var(--fg-2); max-width: 44ch; font-size: var(--step-1); line-height: 1.42; }
.grid4 strong { color: var(--fg); display: block; font-stretch: 106%; margin-bottom: var(--sp-1); }
@media (min-width: 48rem) { .grid4 { grid-template-columns: 1fr 1fr; row-gap: var(--sp-8); } }

/* ---- Scope checklist ----------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: grid; column-gap: var(--gutter); border-top: 2px solid var(--fg); }
.checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.checklist svg { width: 1rem; height: 1rem; margin-top: .3rem; color: var(--accent); }
.checklist a { color: var(--accent); }
@media (min-width: 48rem) { .checklist { grid-template-columns: 1fr 1fr; } }

/* ---- How it's done ------------------------------------------------------- */
.how { display: grid; gap: var(--sp-7) var(--gutter); }
.how__side { display: grid; gap: var(--sp-5); align-content: start; }
.panel { border-top: 2px solid var(--fg); background: var(--bg-raised); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.panel__label { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; font-stretch: 100%; letter-spacing: var(--track-mono); color: var(--fg-2); line-height: 1.6; }
.panel ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.panel li { font-weight: 500; padding-left: 1rem; position: relative; }
.panel li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; background: var(--accent-mark); transform: rotate(45deg); }
.graphic { padding: var(--sp-5); gap: var(--sp-4); }
.dim-graphic { width: 100%; height: auto; }
.graphic__key { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.graphic__key li::before { content: "— "; color: var(--green-400); }
.graphic .xsec-key { grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
.note { border: 1px dashed var(--fg-3); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.note h3 { font-size: var(--step-1); }
.note p { color: var(--fg-2); }
@media (min-width: 64rem) { .how { grid-template-columns: repeat(12, minmax(0, 1fr)); } .how__text { grid-column: 1 / span 6; } .how__side { grid-column: 8 / -1; margin-top: 3.25rem; } }

/* ---- Related ------------------------------------------------------------- */
.related { list-style: none; padding: 0; display: grid; gap: var(--sp-7) var(--gutter); }
@media (min-width: 48rem) { .related { grid-template-columns: 1fr 1fr; } }

/* ---- FAQ ----------------------------------------------------------------- */
.faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; line-height: inherit; }
.faq summary { min-height: 2.75rem; }

/* ---- Project page -------------------------------------------------------- */
.phero.ph { display: grid; place-items: stretch; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: max(32rem, 78svh); outline-offset: -14px; position: relative; isolation: isolate; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(17 21 18 / .94) 0%, rgb(17 21 18 / .55) 38%, rgb(17 21 18 / 0) 70%); }
.phero__inner { display: grid; gap: var(--sp-4); padding-block: 10rem var(--sp-7); justify-items: start; }
.phero h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem); max-width: 20ch; line-height: 1.02; color: var(--fog-100); }
.phero .crumbs { margin-bottom: var(--sp-3); }
.phero__flag { position: absolute; top: calc(4.5rem + 3.25rem); right: var(--page-x); left: var(--page-x); display: grid; justify-items: end; gap: var(--sp-2); text-align: right; z-index: 2; }
.phero__flag p { display: none; max-width: 24rem; font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.5; color: var(--fog-100); background: rgb(17 21 18 / .8); padding: .5em .7em; }
.phero__glyph { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
.phero__glyph .ph__icon { width: 4.5rem; height: 4.5rem; opacity: .9; }
@media (min-width: 48rem) { .phero__flag p { display: block; } }
@media (min-width: 64rem) { .phero__glyph { left: 72%; top: 46%; } .phero__glyph .ph__icon { width: 6rem; height: 6rem; } }

.pbody { display: grid; gap: var(--sp-8) var(--gutter); }
.pbody__spec { display: grid; gap: var(--sp-5); align-content: start; }
.spec > div { grid-template-columns: 8.5rem 1fr; }
.pbody__story h2 { font-size: var(--step-2); margin-top: var(--sp-4); }
.pbody__story h2:first-child { margin-top: 0; }
.detail { border-left: 2px solid var(--accent-mark); padding-left: var(--sp-5); display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.detail p { font-size: var(--step-1); line-height: 1.45; }
.detail--lg { max-width: 60rem; margin-top: 0; }
.detail--lg h2 { font-size: var(--step-3); max-width: 22ch; }
@media (min-width: 64rem) { .pbody { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .pbody__spec { grid-column: 1 / span 5; position: sticky; top: 8rem; } .pbody__story { grid-column: 7 / -1; } }

.gallery { display: grid; gap: var(--sp-6) var(--gutter); }
.gallery__frame { aspect-ratio: 4 / 3; }
.gallery__item--wide .gallery__frame { aspect-ratio: 16 / 9; }
@media (max-width: 47.99rem) { .gallery__item--wide .gallery__frame { aspect-ratio: 4 / 3; } }
@media (min-width: 48rem) { .gallery { grid-template-columns: 1fr 1fr; } .gallery__item--wide { grid-column: 1 / -1; } }

.nextstrip { display: grid; gap: var(--sp-7) var(--gutter); align-items: end; }
.nextstrip__cap { display: grid; gap: var(--sp-5); }
.nextstrip__link { font-size: var(--step-2); font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; text-decoration: none; display: inline-flex; gap: var(--sp-3); align-items: center; }
.nextstrip__link svg { width: 1.5rem; height: 1.5rem; color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
.nextstrip__link:hover svg, .nextstrip__next:hover .nextstrip__title { transform: translateX(3px); }
.nextstrip__next { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-4); align-items: center; text-decoration: none; border-top: 2px solid var(--fg); padding-top: var(--sp-4); }
.nextstrip__poster .ph { aspect-ratio: 4 / 3; }
.nextstrip__poster .ph__inner { padding: var(--sp-3); }
.nextstrip__poster .ph__icon { width: 1.75rem; height: 1.75rem; }
.nextstrip__poster .chip-flag { display: none; }
.nextstrip__txt { display: grid; gap: var(--sp-1); }
.nextstrip__label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.nextstrip__title { font-size: var(--step-1); font-weight: 600; font-stretch: 106%; line-height: 1.25; transition: transform var(--dur-2) var(--ease-out); }
@media (min-width: 48rem) { .nextstrip { grid-template-columns: 1fr 1fr; } .nextstrip__next { grid-template-columns: 12rem 1fr; } }

/* ---- About --------------------------------------------------------------- */
.about-hero { padding-block: var(--sp-6) var(--sp-8); }
.about-hero .crumbs { margin-bottom: var(--sp-5); }
.about-hero__media { aspect-ratio: 4 / 3; }
.about-hero__media img { object-position: 45% 60%; }
@media (min-width: 48rem) { .about-hero__media { aspect-ratio: 21 / 9; } }
.about-hero__text { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
.about-hero__text h1 { max-width: 18ch; }
@media (min-width: 64rem) { .about-hero__text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; } .about-hero__text h1 { grid-column: 1 / span 7; } .about-hero__text .t-lede { grid-column: 8 / -1; color: var(--fg-2); } }

.story { display: grid; gap: var(--sp-6) var(--gutter); }
.story__frame { aspect-ratio: 4 / 5; max-width: 20rem; }
@media (min-width: 64rem) { .story { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .story__portrait { grid-column: 1 / span 3; margin-top: 3.25rem; } .story__text { grid-column: 5 / span 7; } }

.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.creds > div { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-4); background: var(--bg-raised); border-top: 2px solid var(--fg); min-height: 9rem; }
.creds dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); line-height: 1.5; }
.creds dd { font-weight: 600; font-stretch: 104%; line-height: 1.35; overflow-wrap: anywhere; }
.creds .is-verified { border-top-color: var(--accent-mark); }
@media (min-width: 48rem) { .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .creds { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.area { display: grid; gap: var(--sp-7) var(--gutter); }
.map { width: 100%; max-width: 30rem; height: auto; }
.map__t { font-family: var(--font-mono); font-size: 11px; fill: var(--fog-300); }
.map__t--hq { fill: var(--green-400); font-size: 12px; }
.map__t--sea, .map__t--dim { fill: var(--fog-500); letter-spacing: .12em; }
@media (min-width: 64rem) { .area { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .area__text { grid-column: 1 / span 5; } .area__map { grid-column: 7 / -1; } }

/* ---- Contact ------------------------------------------------------------- */
.contact-page { padding-block: var(--sp-6) var(--section-y); }
.cgrid { display: grid; gap: var(--sp-8) var(--gutter); grid-template-areas: "intro" "form" "direct" "next"; }
.cgrid__intro { grid-area: intro; display: grid; gap: var(--sp-5); align-content: start; }
.cgrid__intro .crumbs { margin-bottom: var(--sp-3); }
.cgrid__intro .t-lede { max-width: 44ch; }
.cgrid__direct { grid-area: direct; }
.cgrid__form { grid-area: form; }
.cgrid__next { grid-area: next; display: grid; gap: var(--sp-5); }
.cgrid__next h2 { font-size: var(--step-3); }
.direct { display: grid; border-top: 2px solid var(--fg); }
.direct > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); align-items: baseline; }
.direct dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.direct dd { font-weight: 500; overflow-wrap: anywhere; }
.direct dd a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent-mark); }
.form-shell { display: grid; gap: var(--sp-6); max-width: 52rem; padding: clamp(1.25rem, .5rem + 3vw, 3rem); background: var(--bg-raised); border-top: 2px solid var(--fg); }
.form-shell__h { font-size: var(--step-2); }
.req { font-family: var(--font-mono); font-weight: 400; font-size: .6875rem; color: var(--fg-2); margin-left: .5em; letter-spacing: .02em; }
.input--file { padding: .6rem; min-height: 3.25rem; }
.input--file::file-selector-button { font: inherit; font-weight: 600; margin-right: 1rem; padding: .5rem .9rem; border: 1px solid var(--fg); background: var(--bg); color: var(--fg); border-radius: 2px; cursor: pointer; }
@media (min-width: 36rem) { .field--half { max-width: calc(50% - var(--sp-5) / 2); } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 35.99rem) { .form__submit { width: 100%; } }
.form__error { padding: var(--sp-4); border: 1px solid var(--error); color: var(--error); font-weight: 500; background: color-mix(in srgb, var(--error) 6%, var(--bg-raised)); }
.form__success { max-width: 52rem; }
.form__success h2, .form__success h1 { color: var(--fog-100); font-size: var(--step-3); }
.form__success:focus { outline: 2px solid var(--green-400); outline-offset: 3px; }
.form__success--page { margin-top: var(--sp-5); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); gap: var(--sp-4); }
.nextsteps { list-style: none; padding: 0; display: grid; gap: var(--sp-4) var(--gutter); }
.nextsteps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); font-size: .9375rem; color: var(--fg-2); }
.nextsteps__n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); padding-top: .15rem; }
@media (min-width: 64rem) {
  .cgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; }
  .cgrid__intro { grid-column: 1 / span 7; grid-row: 1; }
  .cgrid__direct { grid-column: 9 / -1; grid-row: 1; align-self: end; }
  .cgrid__form { grid-column: 1 / -1; grid-row: 2; }
  .cgrid__next { grid-column: 1 / -1; grid-row: 3; }
  .nextsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nextsteps li { grid-template-columns: 1fr; border-top-width: 2px; border-top-color: var(--fg); }
}

/* ---- 404 ----------------------------------------------------------------- */
.nf { padding-block: calc(4.5rem + var(--sp-8)) var(--sp-9); min-height: 70svh; }
.nf__wrap { display: grid; gap: var(--sp-5); justify-items: start; }
.nf__mark { width: 3rem; height: 3rem; }
.nf .nf__big { font-size: clamp(6rem, 3rem + 18vw, 16rem); }
.nf__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.nf .nf__note { font-size: var(--step-0); }
.nf__note a { color: var(--accent); }

/* ---- Footer tweaks -------------------------------------------------------- */
.footer { --bg: var(--basalt-950); }
.footer li { color: var(--fg-2); }
.footer a { color: var(--fg); }

/* ---- Confirm marks on dark/amber surfaces keep the tag readable ----------- */
.surface-dark mark.confirm, .surface-green mark.confirm { color: inherit; }
.pcard__meta mark.confirm::after, .spec mark.confirm::after { vertical-align: .15em; }
.chero .hero__lede, .chero .hero__actions { grid-column: auto; justify-content: flex-start; align-self: auto; }
.phero__flag .chip-flag { position: static; }
.phero__flag { top: calc(var(--hh, 7.75rem) + var(--sp-4)); }
@media (max-width: 47.99rem) { .phero__glyph { display: none; } .notice { font-size: .6875rem; justify-content: flex-start; text-align: left; } }
.field { align-content: start; }
@media (max-width: 63.99rem) { .story__frame { max-width: 15rem; } }
@media (min-width: 64rem) { .cgrid__direct { grid-column: 8 / -1; } }
.nav .nav__sub ul { gap: 0; }
/* impeccable critique fixes */
.nav__sub { box-shadow: none; }
.detail--lg p { max-width: 65ch; }
.footer__legal p { max-width: 70ch; }
.creds dt { text-transform: none; letter-spacing: .02em; font-size: .75rem; }
.footer__legal p + p { max-width: none; }

/* ---- QA fixes (2026-09-26) ------------------------------------------------ */
.nw { white-space: nowrap; }
.detail .runin { font-weight: 700; }
.chero__media figcaption.fig__plain { justify-content: flex-start; }
/* Touch targets: stacked footer links reach 44px rows; underlined standalone links get an invisible
   hit area so the underline stays tight to the text. */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer li { min-height: 2.75rem; display: flex; align-items: center; }
  .footer li > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .footer__contact { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .link-arrow, .cta__small a, .direct dd a { position: relative; }
  .link-arrow::after, .cta__small a::after, .direct dd a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; transform: translateY(-50%); }
}
.menu { overscroll-behavior: contain; }