/* ================= Jeff Builds ================= */
/* Blueprint / drafting-sheet direction.
   Palette: slate indigo, drafting linework white, warm linen paper, deep ink, burnt terracotta.
   Every page is a numbered sheet in one drawing set. */

@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/big-shoulders-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* COLOR SYSTEM (Option A: Warm Studio & Burnt Amber)
   Three grounds, in a clear light-to-dark ladder so stacked sections never fuse:
     paper  (lightest)  ->  blueprint (mid)  ->  ink (darkest)
   Each ground has one raised surface: --paper-2 / --blueprint-hi / --ink-2.

   Terracotta / Amber is one hue at three stops, chosen so the rule is simple:
     --safety       display type and drawn marks — never small text on paper
     --safety-lift  small text and labels on a DARK ground
     --safety-ink   small text on a LIGHT ground, and solid fill under white text
   Every stop clears WCAG AA (4.5:1) at the size it is used. */

:root {
  --blueprint: #182236;       /* slate indigo field */
  --blueprint-deep: #101726;  /* top bar, footer — the bound edge of the sheet */
  --blueprint-hi: #22304C;    /* raised panel on blue */
  --blueprint-well: #0D131F;  /* recessed field (inputs) on blue */
  --line-input: rgba(240, 244, 255, .35);  /* drafted edge of an input */
  --line: #F0F4FF;            /* blueprint linework */
  --line-faint: rgba(240, 244, 255, .15);
  --line-grid: rgba(240, 244, 255, .07);
  --line-grid-major: rgba(240, 244, 255, .12);

  --paper: #F9F7F2;           /* warm linen parchment */
  --paper-2: #EFECE4;         /* recessed / alternating band */
  --paper-edge: #DFD9CC;
  --paper-mark: #CBC3B3;      /* drafting numerals, rules, non-text marks */

  --ink: #12161E;             /* darkest ground */
  --ink-2: #19202C;           /* card surface on ink */
  --ink-line: rgba(240, 244, 255, .12);
  --ink-soft: #4B5362;        /* body copy on paper */
  --ink-mute: rgba(245, 247, 250, .75);  /* body copy on ink */

  --safety: #E05A2B;          /* burnt terracotta display / CTA */
  --safety-lift: #F5764A;     /* warm tangerine on dark ground */
  --safety-ink: #BA4116;      /* deep burnt amber on light paper */

  --ok: #6FD3A0;
  --err: #FF9A7A;

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--safety-ink) var(--paper-2);
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--safety-ink);
}

/* paper grain — static, never animated; a fixed full-viewport wash under everything */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--safety-lift); color: var(--ink); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--safety-ink); border: 3px solid var(--paper-2); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--safety-ink);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
main[tabindex="-1"]:focus { outline: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; }

/* Blueprint field. Flat, not a stretched vertical gradient — a gradient scaled to
   section height made every section a different shade of blue and left a hard seam
   under the top bar. The highlight below is sized in px, so a short CTA band and a
   full-height contact page read as the same sheet. */
.bg-blueprint {
  background:
    linear-gradient(var(--line-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid-major) 1px, transparent 1px),
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
    var(--blueprint);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
  color: var(--line);
}
/* the opening sheet catches the light; nothing blue sits above it, so no seam */
.hero.bg-blueprint, .pagehead.bg-blueprint {
  background:
    radial-gradient(1400px 620px at 50% -12%, rgba(120, 160, 255, .17), transparent 70%),
    linear-gradient(var(--line-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid-major) 1px, transparent 1px),
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
    var(--blueprint);
  background-size: 100% 620px, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
}

/* blueprint grid: a slow drift on the fine grid only — cheap, background-only, ambient */
@property --grid-shift {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.hero.bg-blueprint::before, .pagehead.bg-blueprint::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  background-position: var(--grid-shift) var(--grid-shift), var(--grid-shift) var(--grid-shift);
  animation: grid-drift 40s linear infinite;
}
@keyframes grid-drift {
  from { --grid-shift: 0px; }
  to { --grid-shift: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.bg-blueprint::before, .pagehead.bg-blueprint::before { animation: none; }
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: var(--blueprint-deep);
  border-bottom: 1px solid var(--line-faint);
  view-transition-name: topbar;
}
/* scroll state: a safety-orange edge, appearing on top of the static border, plus a
   scroll-progress bar — both opacity/transform only, JS drives --scroll-p via rAF */
.topbar::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--safety);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.topbar.scrolled::before { opacity: 1; }
.topbar::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0;
  height: 2px;
  background: var(--safety);
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: left;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .topbar::before { transition: none; }
}
.topbar-brand {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800; font-size: 22px; letter-spacing: .04em;
  color: var(--line); text-decoration: none;
}
.topbar-brand span { color: var(--safety-lift); }
.topbar-brand::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 2px; background: var(--safety-lift);
  transition: right .4s cubic-bezier(.22, 1, .36, 1);
}
.topbar.scrolled .topbar-brand::after { right: 0; }
.topbar-nav { display: flex; align-items: center; gap: 26px; }
.topbar-nav a {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--line);
  opacity: .85;
}
.topbar-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.topbar-nav a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--safety-lift); text-decoration-thickness: 2px;
}
.topbar-nav .topbar-cta {
  opacity: 1;
  background: var(--safety); color: var(--ink);
  padding: 8px 14px;
}
.topbar-nav .topbar-cta:hover,
.topbar-nav .topbar-cta[aria-current="page"] { background: var(--safety-lift); text-decoration: none; }

/* mobile nav */
.nav-toggle {
  display: none;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .18em;
  color: var(--line); background: none;
  border: 1px solid var(--line-faint);
  padding: 8px 14px; cursor: pointer;
}
.nav-overlay {
  position: fixed; inset: 0; z-index: 49;
  padding: 92px 24px 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay a {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(44px, 11vw, 64px); line-height: 1.15;
  text-transform: uppercase; text-decoration: none;
  color: var(--line);
  border-bottom: 1px solid var(--line-faint);
  padding: 10px 0;
  display: flex; align-items: baseline; gap: 14px;
}
.nav-overlay a b {
  font-family: var(--font-mono); font-weight: 400;
  font-size: 12px; letter-spacing: .2em; opacity: .6;
  white-space: nowrap;
}
.nav-overlay a[aria-current="page"] { color: var(--safety-lift); }
.nav-overlay .nav-overlay-cta { color: var(--safety-lift); }
.nav-overlay-foot { margin-top: auto; padding-top: 28px; opacity: .65; }
body.nav-open { overflow: hidden; }

/* ---------- hero: the drafting sheet (home) ---------- */
.hero { padding: 36px 24px 56px; position: relative; }
.sheet { max-width: var(--wrap); margin: 0 auto; }
.sheet-frame {
  border: 2px solid var(--line);
  outline: 1px solid var(--line-faint);
  outline-offset: 6px;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4.5vw, 60px) 0;
  position: relative;
}

.hero-eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--line);
  opacity: .8; margin-bottom: 22px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 9.2vw, 132px);
  line-height: .87;
  letter-spacing: .005em;
  text-transform: uppercase;
  position: relative;
  padding-top: 34px;
  margin-bottom: 30px;
}
.hero-title em { font-style: normal; color: var(--safety); }

/* dimension line above the headline */
.dim-line {
  position: absolute; top: 0; left: 2px; right: 2px;
  display: flex; align-items: center; gap: 10px;
}
.dim-line i {
  flex: 1; height: 1px; background: var(--line);
  position: relative; opacity: .7;
}
.dim-line i::before, .dim-line i::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px;
  background: var(--line);
}
.dim-line i:first-child::before { left: 0; }
.dim-line i:first-child::after { display: none; }
.dim-line i:last-child::after { right: 0; }
.dim-line i:last-child::before { display: none; }
.dim-line b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: .22em; white-space: nowrap;
  opacity: .8;
}

.hero-sub {
  max-width: 520px;
  font-size: 18px;
  color: var(--line);
  opacity: .88;
  margin-bottom: 32px;
  text-wrap: pretty;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* body row: lead + CTAs on the left, drafted proof notes on the right.
   Fills the right half of the sheet that the stacked headline leaves empty. */
.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: 56px;
}
.hero-notes {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line-faint);
}
.hero-notes li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 14.5px; line-height: 1.45;
  color: var(--ink-mute);
}
.hero-notes b {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; color: var(--safety-lift);
}
.hero-notes a { color: var(--line); }

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 0; cursor: pointer;
}
.btn-primary { background: var(--safety); color: var(--ink); font-weight: 600; }
.btn-primary:hover { background: var(--safety-lift); }
.btn:disabled { cursor: wait; opacity: .72; }

/* magnetic primary CTAs (desktop only) — JS sets --mgx/--mgy within 90px of the pointer */
@media (hover: hover) and (pointer: fine) {
  .btn-primary, .topbar-cta {
    transform: translate(var(--mgx, 0px), var(--mgy, 0px));
    transition: transform .25s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .topbar-cta { transform: none !important; }
}
.btn-ghost {
  color: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { background: rgba(233, 238, 255, .08); }
.btn-ghost-dark {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-ghost-dark:hover { background: rgba(13, 21, 36, .07); }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--safety-ink);
  outline-offset: 3px;
}
.bg-blueprint .btn:focus-visible, .bg-blueprint a:focus-visible,
.topbar a:focus-visible, .topbar button:focus-visible,
.nav-overlay a:focus-visible {
  outline-color: var(--line);
}

/* signature: title block, drawn like a real drawing sheet */
.titleblock {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr;
  border-top: 2px solid var(--line);
  margin: 0 calc(-1 * clamp(22px, 4.5vw, 60px));
}
.tb-cell {
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px; letter-spacing: .05em;
  padding: 10px 14px 12px;
  border-right: 1px solid var(--line-faint);
}
.tb-cell:last-child { border-right: 0; }
.tb-cell span {
  display: block;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: .2em; opacity: .65;
  margin-bottom: 2px;
}

/* ---------- intro: the sheet draws itself on load ----------
   Decorative highlight traces the frame, then fades — the real CSS border
   (above) is always present, so nothing here ever hides real content.
   Everything below is gated behind html.js; without JS the page is static
   and fully visible, per the existing .rv convention. */
.sheet-draw {
  position: absolute; inset: -2px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  pointer-events: none;
  opacity: 0;
}
.sheet-draw rect {
  fill: none;
  stroke: var(--safety-lift);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
html.js .sheet-draw {
  opacity: 1;
  transition: opacity .4s ease .9s;
}
html.js .sheet-draw rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
html.intro-ready .sheet-draw { opacity: 0; }
html.intro-ready .sheet-draw rect { stroke-dashoffset: 0; }

/* dimension line + title block, staggered in */
html.js .dim-line i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1) .15s;
}
html.js .dim-line b { opacity: 0; transition: opacity .4s ease .55s; }
html.intro-ready .dim-line i { transform: scaleX(1); }
html.intro-ready .dim-line b { opacity: .8; }

html.js .pagehead-meta i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1) .15s;
}
html.js .pagehead-meta em, html.js .pagehead-meta span { opacity: 0; transition: opacity .4s ease .5s; }
html.intro-ready .pagehead-meta i { transform: scaleX(1); }
html.intro-ready .pagehead-meta em, html.intro-ready .pagehead-meta span { opacity: 1; }

html.js .tb-cell {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
html.intro-ready .tb-cell { opacity: 1; transform: none; }
.tb-cell:nth-child(1) { transition-delay: .9s; }
.tb-cell:nth-child(2) { transition-delay: .96s; }
.tb-cell:nth-child(3) { transition-delay: 1.02s; }
.tb-cell:nth-child(4) { transition-delay: 1.08s; }
.tb-cell:nth-child(5) { transition-delay: 1.14s; }

/* headline: each line wipes in, staggered 90ms apart */
html.js .hl {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(14px);
  transition: clip-path .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
html.intro-ready .hl { clip-path: inset(0); transform: none; }
.hl-1 { transition-delay: .2s; }
.hl-2 { transition-delay: .29s; }
.hl-3 { transition-delay: .38s; }
.hl-4 { transition-delay: .47s; }

/* eyebrow / sub / actions: fade in after the headline */
html.js .hero-eyebrow, html.js .hero-sub, html.js .hero-actions, html.js .hero-notes, html.js .pagehead-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
html.intro-ready .hero-eyebrow, html.intro-ready .hero-sub,
html.intro-ready .hero-actions, html.intro-ready .hero-notes, html.intro-ready .pagehead-sub { opacity: 1; transform: none; }
html.js .hero-eyebrow { transition-delay: .05s; }
html.js .hero-sub { transition-delay: .95s; }
html.js .hero-actions { transition-delay: 1.05s; }
html.js .hero-notes { transition-delay: 1.15s; }
html.js .pagehead-sub { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  html.js .sheet-draw { opacity: 0 !important; }
  html.js .dim-line i, html.js .pagehead-meta i,
  html.js .dim-line b, html.js .pagehead-meta em, html.js .pagehead-meta span,
  html.js .tb-cell,
  html.js .hl,
  html.js .hero-eyebrow, html.js .hero-sub, html.js .hero-actions, html.js .hero-notes, html.js .pagehead-sub {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- interior page header: slim sheet ---------- */
.pagehead { padding: 44px 24px 48px; position: relative; }
.pagehead .sheet-frame { padding-bottom: clamp(26px, 4vw, 44px); }
.pagehead-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; opacity: .8;
  margin-bottom: 22px;
}
.pagehead-meta em { font-style: normal; color: var(--safety-lift); }
.pagehead-meta i { flex: 1; height: 1px; background: var(--line); opacity: .4; min-width: 40px; }
.pagehead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 8.5vw, 110px);
  line-height: .9; text-transform: uppercase;
  margin-bottom: 18px;
}
.pagehead h1 em { font-style: normal; color: var(--safety); }
.pagehead-sub { max-width: 620px; font-size: 18px; opacity: .88; }
.pagehead-sub a { color: var(--line); }

/* ---------- shared section scaffolding ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 72px 0; }
.section-flush-top { padding-top: 0; }
.section-contact-lead { padding-top: 72px; }
.section-paper { background: var(--paper); }
/* alternating band: one tone down, with edges stepped to match so hairlines survive */
.section-paper-alt { background: var(--paper-2); --paper-edge: #D6D0C2; }
.section-ink { background: var(--ink); color: var(--paper); }

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.section-head-row .section-head { margin-bottom: 0; }
.head-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  white-space: nowrap; padding-bottom: 6px;
}
.head-link:hover { color: var(--safety-ink); }
.kicker {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--safety-ink);
  margin-bottom: 12px;
}
/* drawn-in rule: a plain bar, not text, so it never enters the accessible name */
.kicker::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 22px; height: 2px;
  background: currentColor;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
html.js .rv.in .kicker::before { transform: translateY(-50%) scaleX(1); }
@supports (animation-timeline: view()) {
  .kicker::before {
    transition: none;
    animation: kicker-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes kicker-draw {
    from { transform: translateY(-50%) scaleX(0); }
    to { transform: translateY(-50%) scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .kicker::before { transform: translateY(-50%) scaleX(1) !important; }
}
.kicker-light { color: var(--safety-lift); }
.section-head h2, .contact-copy h1 {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(40px, 6vw, 64px);
  line-height: .95; text-transform: uppercase;
  margin-bottom: 18px;
}
.h-light { color: var(--paper); }
.section-lede { color: var(--ink-soft); font-size: 18px; }
.lede-light { color: rgba(244, 245, 247, .8); font-size: 18px; }

/* scroll reveal — html.js gates it so no-JS visitors always see content */
html.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* per-child stagger on top of the block-level .rv fade above */
html.js .steps li,
html.js .proc-step > .proc-no, html.js .proc-step > .proc-body,
html.js .scope-card,
html.js .work-card {
  opacity: 0;
  transition: opacity .5s ease;
}
html.js .steps.rv.in li,
html.js .rv.in .proc-step > .proc-no, html.js .rv.in .proc-step > .proc-body,
html.js .rv.in .scope-card,
html.js .work-card.rv.in { opacity: 1; }

.steps li:nth-child(2), .work-card:nth-child(2), .scope-card:nth-child(2), .footer-grid > div:nth-child(2),
.proc-step:nth-child(2) > .proc-no, .proc-step:nth-child(2) > .proc-body { transition-delay: 70ms; }
.steps li:nth-child(3), .work-card:nth-child(3), .scope-card:nth-child(3), .footer-grid > div:nth-child(3),
.proc-step:nth-child(3) > .proc-no, .proc-step:nth-child(3) > .proc-body { transition-delay: 140ms; }
.steps li:nth-child(4), .work-card:nth-child(4), .scope-card:nth-child(4), .footer-grid > div:nth-child(4),
.proc-step:nth-child(4) > .proc-no, .proc-step:nth-child(4) > .proc-body { transition-delay: 210ms; }
.steps li:nth-child(5),
.proc-step:nth-child(5) > .proc-no, .proc-step:nth-child(5) > .proc-body { transition-delay: 280ms; }
.steps li:nth-child(6),
.proc-step:nth-child(6) > .proc-no, .proc-step:nth-child(6) > .proc-body { transition-delay: 350ms; }

/* large display numbers: a "plotted" wipe left-to-right */
html.js .step-no, html.js .proc-no, html.js .scope-no {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
}
html.js .steps.rv.in .step-no, html.js .rv.in .proc-no, html.js .rv.in .scope-no { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .steps li,
  html.js .proc-step > .proc-no, html.js .proc-step > .proc-body,
  html.js .scope-card,
  html.js .work-card,
  html.js .step-no, html.js .proc-no, html.js .scope-no {
    opacity: 1 !important;
    clip-path: none !important;
  }
}

/* hero sheet parallax on scroll — supported browsers only; Firefox stays static */
@supports (animation-timeline: scroll()) {
  .hero .sheet-frame {
    animation: sheet-parallax linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }
  @keyframes sheet-parallax {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-40px); opacity: .85; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .sheet-frame { animation: none !important; transform: none !important; opacity: 1 !important; }
}

h2 { text-wrap: balance; }

/* ---------- work cards ---------- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 40px;
}
.work-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.work-card { display: flex; flex-direction: column; position: relative; }
.shot {
  display: block;
  position: relative;
  border: 1px solid var(--paper-edge);
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 21, 36, .07), 0 12px 32px -16px rgba(13, 21, 36, .20);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s ease, box-shadow .25s ease;
}
a.shot:hover, .work-card-link:hover .shot, .work-card-link:focus-within .shot {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: 0 2px 4px rgba(13, 21, 36, .07), 0 24px 48px -20px rgba(13, 21, 36, .30);
}
/* while the pointer is actively tracking, skip the transform transition so the tilt follows instantly */
.shot.is-tracking { transition: box-shadow .25s ease; }
/* glare: a soft highlight following the pointer, desktop only (JS sets --tx/--ty) */
@media (hover: hover) and (pointer: fine) {
  .work-card-link .shot::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--tx, 50%) var(--ty, 50%), rgba(255, 255, 255, .35), transparent 60%);
    transition: opacity .3s ease;
  }
  .work-card-link .shot.is-tracking::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shot { transform: none !important; }
}
.shot-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--ink);
}
.shot-chrome i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(244, 245, 247, .35);
}
.shot-chrome em {
  font-style: normal;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(244, 245, 247, .75);
  margin-left: 8px;
}

/* pan: full-page screenshot scrolls inside the frame.
   JS measures each image and drives a WAAPI animation.
   Pointer devices pan on hover; touch devices get a small play/return
   button (.pan-play, injected by JS) that starts the walk-through. */
.shot-pan {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  background: #fff;
}
.shot-pan img {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .shot-pan img { transform: none !important; }
}
.pan-hint {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  background: rgba(13, 21, 36, .88); color: rgba(244, 245, 247, .92);
  padding: 4px 8px;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.work-card-link:hover .pan-hint,
.work-card-link:focus-visible .pan-hint,
.shot:hover .pan-hint { opacity: 1; }

/* touch: tap-to-walk control, injected as a sibling of the case-study link */
.pan-play {
  position: absolute; right: 10px; top: 48px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  background: rgba(13, 21, 36, .9); color: var(--line);
  border: 1px solid var(--safety);
  padding: 11px 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.pan-play:active { background: var(--safety); color: #fff; }
.pan-play:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.pan-play:disabled { opacity: .6; cursor: progress; }

.work-card-link { text-decoration: none; display: block; color: inherit; }
.work-meta { padding: 18px 4px 0; }
.work-meta h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 26px; letter-spacing: .02em;
  text-transform: uppercase;
}
.work-card-link:hover .work-meta h3 { color: var(--safety-ink); }
.work-tags {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--safety-ink);
  margin: 4px 0 10px;
}
.work-meta p { color: var(--ink-soft); font-size: 15.5px; }
.work-meta .work-more {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--safety-ink);
  padding-bottom: 2px;
}

/* ---------- services: scope of work ---------- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.scope-card {
  background: var(--ink-2);
  padding: 34px 30px 38px;
  display: flex; flex-direction: column;
}
.scope-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.scope-no {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  color: var(--safety-lift);
}
.scope-price {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: rgba(244, 245, 247, .68);
}
.scope-price b { color: var(--paper); font-weight: 500; }
.scope-card h3 {
  font-family: var(--font-display);
  font-weight: 800; font-size: 32px; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 12px;
}
.scope-desc { color: var(--ink-mute); font-size: 15.5px; margin-bottom: 24px; }
.scope-list { list-style: none; margin-bottom: 26px; }
.scope-list li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-top: 1px solid var(--ink-line);
  font-size: 15px;
}
.scope-list li::before {
  content: "";
  position: absolute; left: 2px; top: 13px;
  width: 12px; height: 12px;
  border: 1.5px solid var(--safety);
}
.scope-list li::after {
  content: "";
  position: absolute; left: 5px; top: 15px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--safety);
  border-bottom: 2px solid var(--safety);
  transform: rotate(-45deg);
}
.scope-cta {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper);
  text-decoration-color: var(--safety); text-underline-offset: 5px;
}
.scope-cta:hover { color: var(--safety-lift); }

/* good-fit / not-fit */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.fit-col h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 16px;
}
.fit-col ul { list-style: none; }
.fit-col li {
  border-top: 1px solid var(--paper-edge);
  padding: 12px 0 12px 26px;
  position: relative;
  font-size: 16px; color: var(--ink-soft);
}
.fit-yes h3 { color: var(--safety-ink); }
.fit-yes li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--safety-ink); border-bottom: 2px solid var(--safety-ink);
  transform: rotate(-45deg);
}
.fit-no h3 { color: var(--ink-soft); }
.fit-no li::before, .fit-no li::after {
  content: ""; position: absolute; left: 5px; top: 22px;
  width: 12px; height: 2px; background: var(--ink-soft);
}
.fit-no li::before { transform: rotate(45deg); }
.fit-no li::after { transform: rotate(-45deg); }

/* ---------- process ---------- */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  counter-reset: step;
}
.steps li { border-top: 2px solid var(--ink); padding-top: 18px; }
.steps-light li { border-top-color: var(--paper); }
.steps-light .step-no, .section-ink .step-no { color: var(--safety-lift); }
.step-no {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em;
  color: var(--safety-ink); margin-bottom: 10px;
}
.steps h3 {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px; text-transform: uppercase;
  margin-bottom: 8px;
}
.steps p { color: var(--ink-soft); font-size: 15px; }
.section-ink .steps p { color: var(--ink-mute); }
.step-note {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--safety-ink); margin-top: 12px;
}

/* process page: detailed vertical steps */
.proc {
  display: grid; grid-template-columns: 120px 1fr; gap: 0 40px;
  max-width: 860px;
}
.proc-step { display: contents; }
.proc-no {
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; color: var(--paper-mark); line-height: 1;
  text-align: right;
  padding: 34px 0;
  border-top: 2px solid var(--ink);
}
.proc-body { border-top: 2px solid var(--ink); padding: 40px 0 44px; }
.proc-body h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  text-transform: uppercase; margin-bottom: 10px;
}
.proc-body > p { color: var(--ink-soft); max-width: 560px; }
.proc-meta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--safety-ink);
  margin-bottom: 12px;
}
.proc-get {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--ink);
  background: #fff; border: 1px solid var(--paper-edge);
  padding: 12px 16px;
  max-width: 560px;
}
.proc-get b { color: var(--safety-ink); font-weight: 500; letter-spacing: .14em; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--paper-edge); }
.faq details:last-child { border-bottom: 1px solid var(--paper-edge); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 46px 22px 0;
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; letter-spacing: .01em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 16px; height: 2px; background: var(--safety-ink);
}
.faq summary::after { transform: rotate(90deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--safety-ink); }
.faq-a { padding: 0 46px 26px 0; color: var(--ink-soft); max-width: 720px; }
.faq-a p + p { margin-top: 12px; }

/* spec list (case studies) */
.spec {
  border: 1px solid var(--paper-edge); background: #fff;
}
.spec-row {
  display: grid; grid-template-columns: 140px 1fr;
  border-top: 1px solid var(--paper-edge);
}
.spec-row:first-child { border-top: 0; }
.spec-row dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 14px;
  border-right: 1px solid var(--paper-edge);
}
.spec-row dd { padding: 12px 16px; font-size: 15px; }

/* ---------- case study ---------- */
.case-hero-shot { margin-top: 40px; }
.case-cols {
  display: grid; grid-template-columns: 300px 1fr; gap: 64px;
  align-items: start;
}
.case-side { position: sticky; top: 92px; }
.case-side .spec { margin-bottom: 22px; }
.case-visit { width: 100%; text-align: center; }
.case-body h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4vw, 42px); text-transform: uppercase;
  line-height: .95;
  margin: 56px 0 16px;
  position: relative;
  padding-top: 16px;
}
.case-body h2:first-child { margin-top: 0; }
.case-body h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 3px; background: var(--safety-ink);
}
.case-body p { color: var(--ink-soft); max-width: 640px; }
.case-body p + p { margin-top: 14px; }
.case-body ul { list-style: none; margin: 18px 0; max-width: 640px; }
.case-body ul li {
  position: relative; padding: 8px 0 8px 28px;
  border-top: 1px solid var(--paper-edge);
  color: var(--ink-soft); font-size: 15.5px;
}
.case-body ul li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 11px; height: 11px; border: 1.5px solid var(--safety-ink);
}
.case-body ul li::after {
  content: ""; position: absolute; left: 5px; top: 14px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--safety-ink); border-bottom: 2px solid var(--safety-ink);
  transform: rotate(-45deg);
}
.case-figure { margin: 36px 0; }
.case-figure figcaption {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: 10px;
}
.case-figure figcaption::before { content: "FIG. "; color: var(--safety-ink); }

/* ---------- before / after: a drafting overlay you drag across the sheet ----------
   The range input IS the control: native keyboard support, native drag, one element.
   It sits transparent over the whole figure; the visible handle is drawn by ::before
   on .ba-handle and positioned from --pos, which app.js writes on input.
   With JS off --pos never updates, so the control is hidden and the figure
   degrades to the plain "after" image — the honest default. */
.ba {
  --pos: 0%;
  position: relative;
  border: 1px solid var(--paper-edge);
  overflow: hidden;
  line-height: 0;
  touch-action: pan-y;
  /* a window onto the top of each page, so the drag handle always sits
     mid-figure instead of a thousand pixels down a full-page screenshot */
  aspect-ratio: 16 / 10;
}
.ba img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

/* the control only exists when it can actually work */
.ba-range, .ba-handle, .ba-tag-before { display: none; }
html.js .ba-range, html.js .ba-handle, html.js .ba-tag-before { display: block; }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}
.ba-range:focus-visible ~ .ba-handle::before {
  outline: 2px solid var(--safety);
  outline-offset: 3px;
}
.ba-handle {
  position: absolute; inset-block: 0;
  left: var(--pos);
  width: 0;
  z-index: 2;
  pointer-events: none;
}
.ba-handle::before {
  content: "";
  position: absolute; inset-block: 0; left: -1px;
  width: 2px;
  background: var(--safety);
}
.ba-handle::after {
  content: "↔";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 2px solid var(--safety);
  border-radius: 50%;
  background: var(--paper);
  color: var(--safety-ink);
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
}
.ba-tag {
  position: absolute; top: 12px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--ink); color: var(--line);
  line-height: 1;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; background: var(--safety-ink); }

/* the numbers under the slider — the proof, not the picture */
.ba-metrics {
  list-style: none;
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-edge);
  border: 1px solid var(--paper-edge);
}
.ba-metrics li {
  background: var(--paper);
  padding: 12px 14px;
}
.ba-metrics b {
  display: block;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.ba-metrics span {
  font-family: var(--font-display); font-weight: 700; font-size: 25px;
  letter-spacing: .01em;
}
.ba-metrics i {
  font-style: normal;
  color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 13px;
}
.ba-metrics em {
  font-style: normal;
  color: var(--safety-ink);
}

/* revision table — the project timeline drawn like a drawing's rev block */
.rev-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--paper-edge);
  font-size: 14.5px;
  margin: 20px 0 8px;
}
.rev-table th {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; text-align: left;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  padding: 10px 14px;
}
.rev-table td { border-top: 1px solid var(--paper-edge); padding: 10px 14px; vertical-align: top; }
.rev-table td:first-child {
  font-family: var(--font-mono); font-size: 12px; color: var(--safety-ink);
  white-space: nowrap;
}
.rev-table td:last-child { color: var(--ink-soft); }

/* device pair: desktop + phone */
.device-pair {
  display: grid; grid-template-columns: 1fr 220px; gap: 32px;
  align-items: start;
}
.phone {
  border: 2px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  padding: 8px 6px;
  box-shadow: 0 12px 32px -16px rgba(13, 21, 36, .32);
}
.phone img { border-radius: 14px; }

/* prev/next project */
.case-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--ink);
}
.case-nav a {
  padding: 30px 8px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
}
.case-nav a:hover .case-nav-title { color: var(--safety-ink); }
.case-nav .case-nav-next { text-align: right; border-left: 1px solid var(--paper-edge); }
.case-nav-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft);
}
.case-nav-title {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  text-transform: uppercase;
}
.case-nav-spaced { margin-top: 72px; }
.case-image { border: 1px solid var(--paper-edge); }
.figure-caption-full { grid-column: 1 / -1; }

/* ---------- contact ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-note { margin-top: 28px; opacity: .7; max-width: 380px; line-height: 1.7; }
.contact-facts { list-style: none; margin-top: 30px; max-width: 400px; }
.contact-facts li {
  border-top: 1px solid var(--line-faint);
  padding: 12px 0;
  display: flex; gap: 16px; align-items: baseline;
  font-size: 15.5px;
}
.contact-facts b {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--safety-lift);
  flex: 0 0 110px;
}

.contact-elsewhere {
  margin-top: 22px; max-width: 400px;
  font-size: 15px; line-height: 1.7; opacity: .78;
}
.contact-elsewhere a {
  color: inherit; text-decoration: underline; text-underline-offset: 4px;
}
.contact-elsewhere a:hover { color: var(--safety-lift); }

.contact-form .field { margin-bottom: 18px; }
.contact-form label, .audit-form label {
  display: block;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 7px; opacity: .85;
}
.label-optional { opacity: .72; }
.contact-form input, .contact-form textarea, .contact-form select,
.audit-form input {
  width: 100%;
  font-family: var(--font-body); font-size: 16px;
  color: var(--line);
  background: var(--blueprint-well);
  border: 1px solid var(--line-input);
  padding: 13px 14px;
  resize: vertical;
}
.contact-form ::placeholder, .audit-form ::placeholder {
  color: rgba(233, 238, 255, .5);
  opacity: 1;
}
.contact-form input:focus, .contact-form textarea:focus, .audit-form input:focus {
  outline: 2px solid var(--safety-lift);
  outline-offset: 0;
  border-color: transparent;
}
/* honeypot — hidden from humans, present for bots */
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  min-height: 1.4em;
}
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }
.form-status-wide { grid-column: 1 / -1; }

/* audit strip */
.audit {
  border: 2px solid var(--line);
  outline: 1px solid var(--line-faint);
  outline-offset: 5px;
  padding: clamp(26px, 4vw, 44px);
  position: relative;
  background: color-mix(in srgb, var(--blueprint-hi) 55%, transparent);
}
.audit h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; line-height: .95;
  margin-bottom: 12px;
}
.audit h2 em { font-style: normal; color: var(--safety); }
.audit > p { max-width: 560px; opacity: .85; margin-bottom: 26px; }
.audit-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.audit-form .btn { padding-top: 14px; padding-bottom: 14px; }
.stamp {
  position: absolute; top: -16px; right: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--safety-lift); background: var(--blueprint-deep);
  border: 2px solid var(--safety-lift);
  padding: 6px 12px;
  transform: rotate(3deg);
}
/* stamp slam: on reveal, drops in oversized and skewed, settles to its resting angle */
html.js .stamp {
  opacity: 0;
  transform: rotate(-8deg) scale(1.4);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.rv.in .stamp { opacity: 1; transform: rotate(3deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .stamp { opacity: 1 !important; transform: rotate(3deg) scale(1) !important; }
}

/* ---------- CTA band ---------- */
.cta-band { padding: 84px 24px; }
.cta-band-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-band h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 72px); line-height: .92; text-transform: uppercase;
}
.cta-band h2 em { font-style: normal; color: var(--safety); }
.cta-band p {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .7; margin-top: 14px;
}

/* ---------- footer ---------- */
.footer {
  background: var(--blueprint-deep);
  border-top: 1px solid var(--line-faint);
  color: var(--line);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 52px 0 44px;
}
.footer-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: .04em; text-decoration: none; color: var(--line);
}
.footer-brand span { color: var(--safety-lift); }
.footer-tag { margin-top: 12px; opacity: .7; font-size: 15px; max-width: 320px; }
.footer h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--safety-lift);
  margin-bottom: 14px;
}
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 8px; }
.footer-nav a {
  text-decoration: none; font-size: 15px; opacity: .85;
}
.footer-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-elsewhere a:hover { color: var(--safety-lift); }
.footer-sheets { list-style: none; }
.footer-sheets li {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  margin-bottom: 8px; opacity: .7;
}
.footer-sheets a {
  position: relative;
  padding-left: 14px;
  text-decoration: none;
}
.footer-sheets a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--safety-lift); opacity: 1; }
.footer-sheets a::before {
  content: "→";
  position: absolute; left: -4px; top: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.footer-sheets a:hover::before, .footer-sheets a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
.footer-bottom {
  border-top: 1px solid var(--line-faint);
  padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  opacity: .65;
}

/* ---------- page-to-page view transitions (MPA) ---------- */
@view-transition {
  navigation: auto;
}
.footer { view-transition-name: footer; }
::view-transition-old(root) {
  animation: vt-old-out .28s cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-new(root) {
  animation: vt-new-in .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes vt-old-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-new-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- 404 ---------- */
.nf { min-height: 60vh; display: grid; place-items: center; padding: 80px 24px; }
.nf-inner { text-align: center; }
.nf-code {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(110px, 22vw, 240px); line-height: .9; color: var(--line);
}
.nf p { margin: 18px 0 30px; opacity: .8; }
.nf .nf-label { opacity: .7; letter-spacing: .22em; }

/* ---------- marquee rail ---------- */
.rail {
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
  background: var(--blueprint-deep);
}
.rail-track {
  display: flex;
  width: max-content;
  animation: rail-scroll 40s linear infinite;
}
.rail:hover .rail-track { animation-play-state: paused; }
.rail-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--line) 75%, transparent);
  padding-right: 10px;
}
.rail-item i { font-style: normal; color: var(--safety); }
@keyframes rail-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .work-grid { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-body { grid-template-columns: 1fr; gap: 36px; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .tb-cell.tb-wide { grid-column: 1 / -1; border-top: 1px solid var(--line-faint); }
  .tb-cell { border-top: 1px solid var(--line-faint); }
  .case-cols { grid-template-columns: 1fr; gap: 40px; }
  .case-side { position: static; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
  .case-side .spec { margin-bottom: 0; }
  .fit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .device-pair { grid-template-columns: 1fr; }
  .phone { max-width: 240px; }
  .proc { grid-template-columns: 64px 1fr; gap: 0 24px; }
  .proc-no { font-size: 36px; padding: 42px 0; }
}
@media (max-width: 640px) {
  .ba-metrics { grid-template-columns: 1fr; }
  .ba { aspect-ratio: 4 / 3; }
  .topbar { padding: 12px 16px; }
  .topbar-nav { display: none; }
  .nav-toggle { display: block; }
  .section { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
  .steps { grid-template-columns: 1fr; }
  .hero { padding: 20px 14px 28px; }
  .pagehead { padding: 24px 14px 32px; }
  /* one label, not two: the eyebrow carries the positioning; the dimension line is desktop signature */
  .hero .sheet-frame { padding-top: 26px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .08em; margin-bottom: 14px; white-space: nowrap; }
  .hero-title { padding-top: 0; font-size: clamp(58px, 17.5vw, 76px); margin-bottom: 26px; }
  .dim-line { display: none; }
  .hero-sub { font-size: 16.5px; margin-bottom: 24px; }
  .hero-body { gap: 28px; margin-bottom: 32px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions .btn { text-align: center; padding: 16px 20px; }
  .hero-notes li { padding: 10px 0; font-size: 14px; }
  /* title block collapses to one drafted strip */
  .titleblock { grid-template-columns: 1fr auto auto; }
  .tb-cell { border-top: 0; padding: 8px 10px 10px; font-size: 14px; }
  .tb-cell.tb-wide { grid-column: auto; border-top: 0; }
  .tb-cell span { font-size: 9px; }
  .tb-cell:nth-child(3), .tb-cell:nth-child(4) { display: none; }
  .audit-form { grid-template-columns: 1fr; }
  .faq summary { font-size: 19px; padding-right: 38px; }
  .case-side { grid-template-columns: 1fr; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav .case-nav-next { border-left: 0; border-top: 1px solid var(--paper-edge); text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .proc { grid-template-columns: 1fr; }
  .proc-no { text-align: left; padding: 28px 0 0; border-top: 2px solid var(--ink); }
  .proc-body { border-top: 0; padding-top: 10px; }
}

/* Inquiry guidance and comfortable touch controls. */
.form-help { font-size: 14px; line-height: 1.6; color: var(--line); opacity: .85; }
.form-help-wide { grid-column: 1 / -1; }
.contact-form .form-help { margin-top: 14px; }
.form-status:focus { outline: 2px solid var(--safety-lift); outline-offset: 5px; }
.nav-toggle { min-height: 44px; }
.proc-no { color: var(--ink-soft); }
.scope-card[id] { scroll-margin-top: 90px; }
.nf-inner h1 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; }
@media print {
  html.js .rv, html.js .steps li, html.js .proc-step > .proc-no,
  html.js .proc-step > .proc-body, html.js .scope-card, html.js .work-card {
    opacity: 1; transform: none;
  }
  html.js .step-no, html.js .proc-no, html.js .scope-no { clip-path: none; }
}