/* =========================================================
   Priebe Bridge / Schematic, Site Styles
   Stack: plain HTML + CSS + JS. No build step.
   ========================================================= */

/* ---------- 1. Fonts ------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- 2. Design Tokens ----------------------------- */
:root {
  /* Primary palette */
  --ink: #0A0E14;
  --ink-elevated: #181C22;
  --drafting-paper: #F4F4EE;
  --drafting-paper-alt: #EDEDE5;
  --surface: #FFFFFF;
  --signal-amber: #F5A524;
  --signal-amber-hover: #E29314;

  /* Structural */
  --edge: #C9CDD3;
  --hairline-dark: rgba(201, 205, 211, 0.18);
  --hairline-dark-soft: rgba(201, 205, 211, 0.10);
  --rule-blue: #A8B5C7;
  --muted: #5C6470;
  --body-ink: #2D343D;

  /* Functional */
  --won-green: #22C55E;
  --leak-red: #EF4444;
  /* Won Green and Leak Red are tuned for Ink. On Drafting Paper #22C55E is only
     2.06:1 and #EF4444 only 3.41:1, so neither clears AA for text. These are the
     paper-safe darkenings, per the kit's "darken the text on light" rule:
     4.54:1 and 4.82:1. Use these any time the semantic colors carry TEXT on a
     light canvas. The originals stay correct for fills, pills and dark canvases. */
  --won-green-paper: #15803D;
  --leak-red-paper: #CC2B2B;

  /* Tonal text on dark */
  --offwhite: #F4F4EE;
  --body-on-dark: #A8B5C7;
  --muted-on-dark: #5C6470;

  /* Grid + glow */
  --gridline-dark: rgba(168, 181, 199, 0.05);
  --gridline-light: rgba(15, 19, 24, 0.04);
  --amber-glow: rgba(245, 165, 36, 0.15);

  /* Type families */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Layout */
  --max-width: 1280px;
  --gutter: 32px;
  --gutter-mobile: 20px;
  --section-pad: 112px;
  --section-pad-mobile: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
}

/* ---------- 3. Reset + base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  /* Ink so the transparent header reads against a dark page until the
     user scrolls onto a paper surface. Every section paints itself. */
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--offwhite);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { top: 0; }

/* ---------- 4. Layout primitives ------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-pad) 0; position: relative; }
.section--ink { background: var(--ink); color: var(--offwhite); }
.section--paper { background: var(--drafting-paper); color: var(--body-ink); }
.section--paper-alt { background: var(--drafting-paper-alt); color: var(--body-ink); }
/* Gridline backdrop (About > Core Values). The grid sits behind the container;
   opaque cards mask it, so the lines only show in the gaps and behind the
   heading. Adds schematic texture without touching the cards themselves. */
.section--gridlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--gridline-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline-light) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
/* On Ink the same texture needs light lines on a 32px pitch, per the kit. The
   original rule was written for the light About page only and painted dark
   lines on a dark canvas, i.e. nothing. */
.section--ink.section--gridlines::before,
.final-cta.section--gridlines::before {
  background-image:
    linear-gradient(to right, var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline-dark) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Content sits above the texture. NOTE: only the container gets position
   here. .sheet-callout is position:absolute with right:var(--gutter); setting
   it to relative drops it back into normal flow and the right offset then
   pushes it a full gutter past the viewport edge, which is a 32px horizontal
   scrollbar on every page that uses a callout. z-index alone is enough. */
.section--gridlines > .container { position: relative; z-index: 1; }
.section--gridlines > .sheet-callout { z-index: 1; }
.section--gridlines > .container { position: relative; z-index: 1; }

/* ---------- 5. Typography utilities ---------------------- */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.body-large {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin: 0 0 20px;
}
.eyebrow::before { content: '//'; color: var(--signal-amber); }

.caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.wedge { color: var(--signal-amber); font-style: normal; }

.section-head { max-width: 880px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.section-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body-ink);
  max-width: 640px;
  /* Vertical-only reset so the --center modifier's horizontal auto margins still win */
  margin-top: 0;
  margin-bottom: 0;
}
.section--ink .section-head h2,
.section--ink .section-head { color: var(--offwhite); }
.section--ink .section-head p { color: var(--body-on-dark); }

/* ---------- 6. Buttons ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Primary on Ink: amber fill, ink type */
.section--ink .btn-primary,
.btn-primary--on-ink {
  background: var(--signal-amber);
  color: var(--ink);
  border-color: var(--signal-amber);
}
.section--ink .btn-primary:hover,
.btn-primary--on-ink:hover { background: var(--signal-amber-hover); border-color: var(--signal-amber-hover); }

/* Primary on Paper: ink fill */
.btn-primary {
  background: var(--ink);
  color: var(--offwhite);
  border-color: var(--ink);
}
.btn-primary:hover { background: #000; border-color: #000; }

/* Secondary */
/* Amber fill on any canvas. The kit's default primary on Drafting Paper is an ink
   fill, this is Logan's deliberate override for the offer CTA. Ink type on amber is
   9.48:1 so it clears AA comfortably on either surface. */
.btn-amber {
  background: var(--signal-amber);
  color: var(--ink);
  border-color: var(--signal-amber);
}
.btn-amber:hover { background: var(--signal-amber-hover); border-color: var(--signal-amber-hover); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--offwhite); }
/* On any dark surface: hero, final-cta, page-hero, ink sections */
.section--ink .btn-secondary,
.hero .btn-secondary,
.final-cta .btn-secondary,
.page-hero .btn-secondary {
  color: var(--offwhite);
  border-color: var(--offwhite);
}
.section--ink .btn-secondary:hover,
.hero .btn-secondary:hover,
.final-cta .btn-secondary:hover,
.page-hero .btn-secondary:hover { background: var(--offwhite); color: var(--ink); }

/* Link button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--signal-amber);
  border-bottom: 1px solid var(--signal-amber);
  padding-bottom: 4px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.btn-link:hover { gap: 10px; }

/* ---------- 7. Site header ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--hairline-dark);
}
.site-header.is-on-paper {
  background: rgba(244, 244, 238, 0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: transparent;
}
.site-header.is-on-paper.is-scrolled { border-bottom-color: var(--edge); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .priebe {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}
.brand-text .bridge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 5px;
  color: var(--muted-on-dark);
}
.site-header.is-on-paper .brand-text .priebe { color: var(--ink); }
.site-header.is-on-paper .brand-text .bridge { color: var(--muted); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--offwhite);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--signal-amber); }
.site-header.is-on-paper .nav a { color: var(--ink); }
.nav .btn { font-size: 13px; padding: 11px 18px; }
.nav .btn-primary {
  background: var(--signal-amber);
  color: var(--ink);
  border-color: var(--signal-amber);
}
.nav .btn-primary:hover { background: var(--signal-amber-hover); border-color: var(--signal-amber-hover); color: var(--surface); }

.nav-toggle {
  display: none;
  color: var(--offwhite);
  font-size: 24px;
  padding: 8px;
}
.site-header.is-on-paper .nav-toggle { color: var(--ink); }

/* ---------- 8. Hero (canvas wave-pulse) ------------------ */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--offwhite);
  --hero-video-op: 0.87;
  --hero-video-fade: 1;
  /* Fill the viewport below the 72px sticky header, minus one grid (32px)
     so the top of the partner marquee peeks at the bottom on landing. */
  min-height: calc(100vh - 72px - 32px);
  padding: 96px 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero canvas#hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
/* layer 0 - darkened background video.
   Clip is pre-encoded at 0.75x / 30fps, so no playbackRate is used.
   --hero-video-fade is driven by js/hero-video.js to dip through the loop
   seam; --hero-video-op is the base level and is the only knob to turn. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: calc(var(--hero-video-op) * var(--hero-video-fade));
  /* No CSS filter here on purpose. brightness/contrast/saturate on a
     full-bleed video forces the compositor to re-filter every frame. The
     same grade (x0.72 brightness, 1.06 contrast, 0.88 saturation) is baked
     into hero.mp4 with ffmpeg instead, which costs nothing at runtime.
     If the clip is ever re-exported, bake the grade in again. */
}

/* Phones and reduced-motion sessions never download the clip (js/hero-video.js
   strips the source). The poster carries the look instead, at the same opacity
   as the video so the two match, and it is applied here in CSS so it survives
   even if the script never runs. */
@media (max-width: 700px) {
  .hero-bg video { display: none; }
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/video/hero-poster.jpg') center / cover no-repeat;
    opacity: var(--hero-video-op);
  }
}

/* layer 1 - scrim. Centre pool is deliberately light so the footage reads;
   the top and bottom bands still protect the sticky header and the hand-off
   into the partner marquee. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 88% 68% at 50% 46%,
      rgba(10, 14, 20, 0.18) 0%,
      rgba(10, 14, 20, 0.10) 52%,
      rgba(10, 14, 20, 0.08) 100%),
    linear-gradient(to bottom, rgba(10, 14, 20, 0.88) 0%, rgba(10, 14, 20, 0) 20%),
    linear-gradient(to top,    rgba(10, 14, 20, 0.96) 0%, rgba(10, 14, 20, 0) 28%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg video { display: none; }
}
.hero-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline-dark);
  z-index: 2;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--offwhite);
  max-width: 960px;
  margin: 0 auto 28px;
}
.hero-sub {
  font-family: var(--font-body);
  /* Lifted off the video: 20px/500 in --offwhite rather than 18px/400 in
     --body-on-dark. The soft shadow is a separation cue against moving
     footage, not a glow; it is invisible on a flat background. */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--offwhite);
  max-width: 680px;
  margin: 0 auto 44px;
  text-shadow: 0 1px 14px rgba(10, 14, 20, 0.6);
}
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- 9. Page hero (subpages) ---------------------- */
.page-hero {
  background: var(--ink);
  color: var(--offwhite);
  padding: 144px 0 96px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--offwhite);
  max-width: 800px;
  margin: 0 0 16px;
}
.page-hero p {
  font-size: 18px;
  color: var(--body-on-dark);
  max-width: 640px;
  margin: 0;
}

/* ---------- 10. Partner marquee on Ink ------------------- */
.marquee-band {
  background:
    linear-gradient(to right, rgba(168, 181, 199, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--ink);
  padding: 24px 0 16px;
  position: relative;
  overflow: hidden;
}
.marquee-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  padding: 0 var(--gutter);
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.marquee-label::before { content: '//'; color: var(--signal-amber); font-weight: 700; }
.marquee-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: pb-marquee 50s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 56px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.marquee-track a:hover { opacity: 1; }
.marquee-track img { max-height: 32px; width: auto; filter: brightness(1.15); }
@keyframes pb-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Affiliate disclosure strip under the marquee */
/* .disclosure-strip removed: the full-width affiliate band under the
   marquee is now the single .marq-fine line in section 27. */

/* ---------- 11. Problem to Solution to Result rows ------- */
.psr-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--edge);
}
.psr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--edge);
}
.psr-row.reverse .psr-text { order: 2; }
.psr-row.reverse .psr-flow { order: 1; }

.psr-text { max-width: 540px; }
.psr-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 16px;
  display: block;
}
.psr-marker::before { content: '// '; }

.psr-block { margin-bottom: 20px; }
.psr-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  display: block;
  margin-bottom: 6px;
}
.psr-label::before { content: '// '; }
.psr-block p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0;
}
.psr-block .tools {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Flow card (vertical chain of numbered steps) */
.flow-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
}
.flow-card-band {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--drafting-paper);
}
.flow-body { padding: 24px; }
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--edge);
  background: var(--drafting-paper);
}
.flow-step .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--signal-amber);
  min-width: 28px;
}
.flow-step .label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.flow-step.is-terminal {
  background: var(--ink);
  border-color: var(--ink);
}
.flow-step.is-terminal .label { color: var(--offwhite); }

.psr-more {
  margin-top: 56px;
  text-align: center;
}

/* ---------- 11b. PSR Flip Cards (interactive) ----------- */
.flip-instruction {
  display: flex;
  justify-content: center;
  margin: 36px auto 28px;
}
.flip-instruction .fi-badge {
  /* Reset button defaults */
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  /* Pill */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: var(--signal-amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.flip-instruction .fi-badge:hover { transform: translateY(-1px); }
.flip-instruction .fi-badge:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.flip-instruction .fi-hand {
  font-size: 18px;
  line-height: 1;
  filter: grayscale(1) brightness(0);
  transition: opacity 200ms ease;
}
.flip-instruction .fi-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Active (flipped-all) state: ink bg, amber text */
.flip-instruction .fi-badge[aria-pressed="true"] {
  background: var(--ink);
  color: var(--signal-amber);
}
.flip-instruction .fi-badge[aria-pressed="true"] .fi-hand {
  opacity: 0;
  width: 0;
  margin-left: -12px; /* collapse the gap when hidden */
}
.flip-instruction .fi-badge[aria-pressed="true"] .fi-arrow {
  transform: rotate(-180deg);
}
@media (max-width: 540px) {
  .flip-instruction .fi-badge {
    font-size: 11px;
    padding: 10px 16px;
    letter-spacing: 0.12em;
  }
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 16px;
  perspective: 1600px;
}

.flip-card {
  /* Reset button styles */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* Card metrics */
  position: relative;
  width: 100%;
  min-height: 380px;
  perspective: 1600px;
  display: block;
}
.flip-card:focus { outline: none; }
.flip-card:focus-visible .flip-card-inner {
  box-shadow: 0 0 0 3px var(--signal-amber);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.flip-card[aria-pressed="true"] .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--edge);
  overflow: hidden;
  box-sizing: border-box;
}

/* FRONT — paper / light schematic */
.flip-front {
  background: var(--surface);
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  z-index: 2;
  transform: rotateY(0deg);
  transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.flip-card:hover .flip-front {
  box-shadow: 0 18px 48px -28px rgba(10, 14, 20, 0.30);
}
.flip-card:hover .flip-card-inner {
  transform: translateY(-4px);
}
.flip-card[aria-pressed="true"]:hover .flip-card-inner {
  transform: rotateY(180deg) translateY(-4px);
}

/* BACK — dark ink schematic canvas */
.flip-back {
  background: var(--ink);
  color: var(--offwhite);
  transform: rotateY(180deg);
  z-index: 1;
}
.flip-back .flip-grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}
.flip-back::before {
  /* Amber radial glow */
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.flip-back > * { position: relative; z-index: 1; }

/* Corner tick marks (drafting-paper detail) */
.flip-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.flip-corner.tl { top: 10px; left: 10px; border-top: 1px solid var(--edge); border-left: 1px solid var(--edge); }
.flip-corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--edge); border-right: 1px solid var(--edge); }
.flip-corner.on-ink { border-color: rgba(168, 181, 199, 0.35); }
.flip-tick {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--signal-amber);
  border-radius: 50%;
}
.flip-corner.tl .flip-tick { top: -3px; left: -3px; }
.flip-corner.br .flip-tick { bottom: -3px; right: -3px; }

/* Head row: chip + sheet stamp */
.flip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.flip-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--signal-amber);
  padding: 5px 10px;
  border-radius: 2px;
}
.flip-chip.on-ink {
  color: var(--ink);
  background: var(--signal-amber);
}
.flip-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flip-stamp.on-ink { color: var(--muted-on-dark); }

/* Small schematic icon (top-right of card head) */
.flip-icon {
  width: 56px;
  height: 56px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
}
.flip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.flip-icon .stroke    { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flip-icon .stroke-amber { stroke: var(--signal-amber); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip-icon .fill-amber   { fill: var(--signal-amber); }
.flip-icon .fill-ink     { fill: var(--ink); }

/* Before / After teaser strip on the front of each card */
.flip-ba {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--edge);
  background: var(--drafting-paper);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.flip-ba .ba-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.flip-ba .ba-side.ba-after { text-align: right; }
.flip-ba .ba-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flip-ba .ba-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flip-ba .ba-after .ba-value { color: var(--signal-amber); }
.flip-ba .ba-arrow {
  font-family: var(--font-mono);
  color: var(--signal-amber);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 540px) {
  .flip-ba .ba-value { font-size: 13px; }
  .flip-icon { width: 48px; height: 48px; }
}

/* Body */
.flip-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.flip-body.on-ink {
  justify-content: flex-start;
  padding-top: 4px;
  gap: 0;
}
/* Dashed hairline divider between Solution and Result blocks (Schematic style) */
.flip-body.on-ink .flip-block + .flip-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(168, 181, 199, 0.22);
}
.flip-block { display: flex; flex-direction: column; gap: 8px; }

.flip-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
}
/* Solution eyebrow on dark: bright drafting-paper white (was muted blue-gray) */
.flip-marker.on-ink { color: var(--offwhite); }
.flip-marker.on-ink.amber { color: var(--signal-amber); }

.flip-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.flip-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-ink);
  margin: 0;
}
/* Body copy on dark surface: bright drafting-paper white, medium weight,
   looser line-height than the front face (dark surfaces need more air) */
.flip-text.on-ink {
  color: var(--offwhite);
  font-weight: 500;
  line-height: 1.65;
}
.flip-text.on-ink.result {
  color: var(--offwhite);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
}
.flip-text .big-stat {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--signal-amber);
  line-height: 1;
  vertical-align: -3px;
  margin-right: 2px;
}

/* Footer / CTA */
.flip-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--edge);
}
.flip-footer.on-ink {
  border-top: 1px dashed rgba(168, 181, 199, 0.20);
}
.flip-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms var(--ease-out);
}
.flip-cta.on-ink { color: var(--muted-on-dark); }
.flip-cta-icon {
  color: var(--signal-amber);
  font-size: 13px;
  display: inline-block;
  transition: transform 400ms var(--ease-out);
}
.flip-card:hover .flip-front .flip-cta { color: var(--ink); }
.flip-card:hover .flip-front .flip-cta-icon { transform: rotate(60deg); }

/* Placeholder card (dashed style hint) */
.flip-card.is-placeholder .flip-front {
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  border-style: dashed;
}

/* Responsive */
@media (max-width: 1024px) {
  .flip-grid { gap: 20px; }
  .flip-card { min-height: 360px; }
  .flip-card-inner { min-height: 360px; }
}
@media (max-width: 768px) {
  .flip-grid { grid-template-columns: 1fr; gap: 18px; }
  .flip-face { padding: 24px 22px 22px; }
  .flip-title { font-size: 22px; }
  .flip-text { font-size: 15.5px; }
  .flip-card { min-height: 340px; }
  .flip-card-inner { min-height: 340px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
  .flip-card:hover .flip-card-inner { transform: none; }
}

/* ---------- 12. How It Works step cards ------------------ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
}
.section--ink .step-card {
  background: var(--ink-elevated);
  border-color: var(--hairline-dark);
}
.step-card .num-big {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  padding: 36px 32px 0;
}
.section--ink .step-card .num-big { color: var(--offwhite); }
.step-card .num-big em {
  color: var(--signal-amber);
  font-style: normal;
}
.step-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  padding: 16px 32px 12px;
  margin: 0;
}
.section--ink .step-card h3 { color: var(--offwhite); }
.step-card p {
  padding: 0 32px 36px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0;
}
.section--ink .step-card p { color: var(--body-on-dark); }
/* Steps carousel (single-card with arrow nav) */
.steps-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
}
.steps-arrow {
  /* button reset */
  appearance: none;
  background: transparent;
  margin: 0;
  font: inherit;
  /* visual */
  width: 56px;
  height: 56px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid rgba(168, 181, 199, 0.30);
  color: var(--offwhite);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.steps-arrow:hover:not(:disabled) {
  background: var(--signal-amber);
  border-color: var(--signal-amber);
  color: var(--ink);
  transform: scale(1.05);
}
.steps-arrow:focus-visible {
  outline: 2px solid var(--signal-amber);
  outline-offset: 3px;
}
.steps-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.steps-arrow svg { width: 22px; height: 22px; }

.steps-track {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: stretch;
}
.steps-track .step-card {
  display: none;
  width: 100%;
}
.steps-track .step-card.is-active {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.steps-track .step-card .step-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.steps-track .step-card .num-big {
  font-size: 120px;
  padding: 44px 44px 0;
}
.steps-track .step-card h3 {
  font-size: 28px;
  padding: 20px 44px 12px;
}
.steps-track .step-card p {
  padding: 0 44px 44px;
  font-size: 17px;
  max-width: 560px;
}

/* Right-column illustration (two-layer sketch, JS-driven).
   The PNG is split into two layers: cream line work (without the
   tie) and the amber tie alone. Layers stack absolutely so they
   align pixel-for-pixel. The lines wipe in top-to-bottom; the
   tie fades in last, after the wipe finishes. All animation is
   driven from main.js via the Web Animations API to dodge
   Chromium's broken clip-path bidirectional transitions. The
   .is-drawn class persists the final state for no-JS / reduced
   motion. */
.step-illustration {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px 24px 0;
  min-width: 180px;
}
/* Height-based sizing: pin the stack to 400px tall so every card's
   figure renders at the same physical height regardless of the
   source image's aspect ratio. Width auto-fits the aspect, capped
   to keep wide compositions from blowing out the text column. */
.step-illustration__stack {
  position: relative;
  display: block;
  height: 400px;
  width: fit-content;
  max-width: 420px;
}
.step-illustration__stack > picture {
  display: block;
  height: 100%;
}
.step-illustration__stack > picture.step-illustration__lines {
  position: relative;
  z-index: 1;
}
.step-illustration__stack > picture.step-illustration__accent {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.step-illustration__stack img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity, clip-path;
}
.step-card.is-drawn .step-illustration__lines img,
.step-card.is-drawn .step-illustration__accent img {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .step-illustration__stack img { opacity: 1; }
}

/* Step indicator (01 / 03) */
.steps-indicator {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted-on-dark);
}
.steps-indicator .indicator-current {
  color: var(--signal-amber);
  font-weight: 700;
  font-size: 16px;
}
.steps-indicator .indicator-divider {
  margin: 0 12px;
  color: var(--muted-on-dark);
}

@media (max-width: 768px) {
  .steps-carousel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .steps-arrow {
    grid-row: 2;
    justify-self: center;
  }
  .steps-arrow.steps-prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .steps-arrow.steps-next { grid-column: 1; grid-row: 2; justify-self: end; }
  .steps-track { grid-row: 1; min-height: 320px; }
  .steps-track .step-card.is-active { flex-direction: column; }
  .steps-track .step-card .num-big { font-size: 88px; padding: 32px 28px 0; }
  .steps-track .step-card h3 { font-size: 22px; padding: 16px 28px 12px; }
  .steps-track .step-card p { padding: 0 28px 24px; font-size: 16px; max-width: none; }
  .step-illustration {
    width: 100%;
    min-width: 0;
    padding: 0 28px 28px;
  }
  .step-illustration__stack { height: 280px; max-width: 300px; margin: 0 auto; }
}

.steps-cta { margin-top: 56px; text-align: center; }
.steps-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.steps-cta-caption {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.section--paper .steps-cta-caption { color: var(--muted); }

/* ---------- 13. About blurb (two-column) ----------------- */
.about-blurb {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
.about-blurb-photo {
  border: 1px solid var(--edge);
  background: var(--surface);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.about-blurb-photo .placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 24px;
  max-width: 280px;
}
.about-blurb-photo .placeholder::before {
  content: '//';
  display: block;
  font-size: 36px;
  color: var(--signal-amber);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.about-blurb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.about-blurb-text h2 { margin-bottom: 24px; }
.about-blurb-text p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 24px;
  max-width: 560px;
}

/* ---------- 14. FAQ accordion ---------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--edge);
}
.faq-item {
  border-bottom: 1px solid var(--edge);
  background: transparent;
}
.faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item button:hover { color: var(--signal-amber); }
.faq-item .stamp-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--signal-amber);
  margin-right: 14px;
  vertical-align: 2px;
}
.faq-item .toggle {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--muted);
  font-weight: 400;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.faq-item[data-open="true"] .toggle {
  transform: rotate(45deg);
  color: var(--signal-amber);
}
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner {
  overflow: hidden;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-ink);
  max-width: 760px;
}
.faq-item[data-open="true"] .faq-panel-inner { padding: 0 8px 28px; }

/* ---------- 15. Final CTA -------------------------------- */
.final-cta {
  text-align: center;
  padding: 128px 0;
  background: var(--ink);
  color: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 {
  color: var(--offwhite);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 auto 20px;
  max-width: 880px;
}
.final-cta h2 .wedge { color: var(--signal-amber); font-style: normal; }
.final-cta p {
  color: var(--body-on-dark);
  font-size: 18px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 36px;
}
.final-cta .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.final-cta .disclosure {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 0;
}

/* ---------- 16. Footer ----------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--body-on-dark);
  padding: 88px 0 32px;
  border-top: 1px solid var(--hairline-dark);
  position: relative;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 0 0 22px;
}
.site-footer h4::before { content: '// '; color: var(--signal-amber); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer-brand p {
  color: var(--body-on-dark);
  margin: 16px 0 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.65;
}
.footer-grid ul { display: flex; flex-direction: column; gap: 12px; }
.footer-grid a {
  font-size: 14px;
  color: var(--body-on-dark);
}
.footer-grid a:hover { color: var(--signal-amber); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* ---------- 17. Mobile ----------------------------------- */
@media (max-width: 1024px) {
  .psr-row { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .psr-row.reverse .psr-text,
  .psr-row.reverse .psr-flow { order: initial; }
  .steps-grid { grid-template-columns: 1fr; }
  .about-blurb { grid-template-columns: 1fr; gap: 40px; }
  .about-blurb-photo { max-width: 400px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: var(--section-pad-mobile) 0; }
  .hero { min-height: calc(100vh - 72px); padding: 80px 0 80px; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .container,
  .header-inner,
  .hero-inner { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--hairline-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px var(--gutter-mobile);
    gap: 16px;
  }
  .nav.is-open { display: flex; }
  .nav-toggle { display: block; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-base { flex-direction: column; align-items: flex-start; }

  .step-card .num-big { font-size: 64px; padding: 28px 24px 0; }
  .step-card h3 { padding: 12px 24px 8px; }
  .step-card p { padding: 0 24px 28px; }
}

/* ---------- 18. Scroll-reveal + micro-interactions ------- */

/* Reveal base — applied via JS data-reveal attribute on intersection. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children — child elements reveal in sequence */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}
[data-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: 450ms; }

/* Flow-step reveal — chain numbered steps in sequence */
.flow-steps[data-flow-reveal] .flow-step {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.flow-steps[data-flow-reveal].is-revealed .flow-step { opacity: 1; transform: none; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(1) { transition-delay: 0ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(2) { transition-delay: 120ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(3) { transition-delay: 240ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(4) { transition-delay: 360ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(5) { transition-delay: 480ms; }

/* ---------- 19. Hero embellishments ---------------------- */

/* hero-stamp rules removed with the Rev. B corner stamp. The keyframes
   below stay: .hero-scroll-cue animates with them. */
@keyframes hero-stamp-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Live pulse dot — sits beside SHEET tag, signals "live system" */
.hero-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-amber);
  box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.6);
  animation: pulse-amber 1800ms infinite;
}
@keyframes pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}

/* Hero h1 word-stagger — words fade up in sequence on load */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: word-in 900ms var(--ease-out) forwards;
}
.hero h1 .word:nth-child(1) { animation-delay: 80ms; }
.hero h1 .word:nth-child(2) { animation-delay: 180ms; }
.hero h1 .word:nth-child(3) { animation-delay: 280ms; }
.hero h1 .word:nth-child(4) { animation-delay: 380ms; }
.hero h1 .word:nth-child(5) { animation-delay: 480ms; }
.hero h1 .word:nth-child(6) { animation-delay: 580ms; }
.hero h1 .word:nth-child(7) { animation-delay: 680ms; }
@keyframes word-in {
  to { opacity: 1; transform: none; }
}
.hero-sub,
.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: word-in 800ms var(--ease-out) forwards;
}
.hero-sub { animation-delay: 820ms; }
.hero-cta { animation-delay: 950ms; }

/* Hero scroll-cue — animated chevron at bottom */
.hero-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  animation: hero-stamp-in 800ms 1300ms var(--ease-out) forwards;
}
.hero-scroll-cue::after {
  content: '';
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, var(--signal-amber), transparent);
  animation: cue-bounce 2200ms infinite ease-in-out;
}
@keyframes cue-bounce {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---------- 20. PSR row enhancements --------------------- */
.psr-row { position: relative; }
/* Numbered chip on each row for stronger rhythm */
.psr-chip {
  position: absolute;
  top: 32px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.psr-chip::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--edge);
}
.psr-row.reverse .psr-chip { right: auto; left: 0; }
.psr-row.reverse .psr-chip::before { order: 2; }
@media (max-width: 1024px) {
  .psr-chip { position: static; margin-bottom: 16px; }
  .psr-row.reverse .psr-chip::before { order: initial; }
}

/* PSR block separators between problem/solution/result */
.psr-block { position: relative; padding-bottom: 20px; }
.psr-block + .psr-block { padding-top: 20px; border-top: 1px dashed var(--edge); }

/* Flow card hover — subtle lift */
.flow-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(10, 14, 20, 0.18);
}

/* Connecting line down the flow steps */
.flow-steps { position: relative; }
.flow-steps::before {
  content: '';
  position: absolute;
  left: 35px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--edge) 0, var(--edge) 4px, transparent 4px, transparent 8px);
  z-index: 0;
}
.flow-step { position: relative; z-index: 1; }

/* ---------- 21. Step cards (How It Works) ---------------- */
.step-card {
  position: relative;
  overflow: hidden;
}
/* Hover lift only on cards that aren't in the single-card carousel */
.steps-grid .step-card {
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.steps-grid .step-card:hover {
  transform: translateY(-3px);
  border-color: var(--signal-amber);
}
.steps-grid .step-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--signal-amber);
  transition: width 400ms var(--ease-out);
}
.steps-grid .step-card:hover::after { width: 100%; }

/* ---------- 22. About blurb improvements ----------------- */
.about-blurb-photo {
  background:
    linear-gradient(135deg, var(--ink) 0%, var(--ink-elevated) 100%);
  border-color: var(--hairline-dark);
  position: relative;
}
.about-blurb-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.about-blurb-photo::after {
  /* Amber corner accent (pushed in past the rounded corner) */
  content: '';
  position: absolute;
  top: 22px;
  right: 22px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--signal-amber);
  border-right: 1px solid var(--signal-amber);
  z-index: 2;
}
.about-blurb-photo .placeholder {
  color: var(--body-on-dark);
  position: relative;
  z-index: 1;
}
.about-blurb-photo .placeholder::before { color: var(--signal-amber); }

/* ---------- 23. Subpage components ----------------------- */

/* Page hero with eyebrow + stamp */
.page-hero { padding-top: 168px; }
.page-hero .stamp {
  position: absolute;
  top: 96px;
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  z-index: 1;
}
.page-hero .stamp::before { content: '// '; color: var(--signal-amber); }

/* Process step cards — used on how-it-works.
   Namespaced as .process-card to avoid colliding with the home-page
   carousel's .step-card. Cards sit in normal page flow and scroll
   freely in both directions. */
#process .section-head p { max-width: 760px; }
/* Amber top hairline */
.process-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--signal-amber);
}
/* Corner callout tick (top-right) */
.process-card__corner {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  pointer-events: none;
}
@media (max-width: 768px) {
  #process .section-head { margin-bottom: 40px; }
}

/* Speed timeline (How It Works) — replaces the case-file problems block.
   Horizontal 4-step timeline on desktop, vertical on mobile. */
.timeline {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.tl-step { display: flex; flex-direction: column; gap: 12px; }
.tl-track { display: flex; align-items: center; height: 14px; }
.tl-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signal-amber);
}
.tl-line { flex: 1 1 auto; height: 1px; margin-left: 10px; background: var(--edge); }
.tl-step:last-child .tl-line { display: none; }
.tl-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
}
.tl-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.tl-desc { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 768px) {
  .timeline { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .tl-track { display: none; }
  .tl-step {
    position: relative;
    padding: 0 0 28px 26px;
    margin-left: 6px;
    border-left: 1px solid var(--edge);
  }
  .tl-step::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--signal-amber);
  }
  .tl-step:last-child { border-left-color: transparent; padding-bottom: 0; }
}

/* Full PSR list for how-it-works — same layout but tighter */
.psr-full .psr-row { padding: 56px 0; }

/* Team / Mission grid for About */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-grid h2 { margin-bottom: 24px; }
.about-grid p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body-ink);
  margin: 0 0 18px;
}
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Team grid for About — three-up portrait cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Stage wrapper exists so the snake SVG can render OVER the photo's
   1.5px Ink border. .team-photo has overflow:hidden which clips at the
   padding edge, so children of .team-photo can never extend into the
   border area. The stage has no border of its own — its padding edge IS
   the photo's outer edge — so an SVG positioned inset:0 inside it can
   paint stroke onto the border. The stage also enforces overflow:hidden
   + border-radius:16px so any half-stroke that would extend past the
   photo's rounded outer shape gets clipped cleanly. */
.team-photo-stage {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
}
.team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-elevated) 100%);
}
.team-photo::before {
  /* Gridline backdrop (Schematic technical-drawing texture) */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
}
.team-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Snake — amber segment slowly tracing the photo border, staggered per card.
   SVG sibling of .team-photo (inside .team-photo-stage), positioned to fill
   the full photo box so the stroke can paint onto the border line itself. */
.team-photo-stage .snake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.team-photo-stage .snake-track {
  /* dasharray + dashoffset + animation are all set inline by
     setupTeamSnakes() in main.js using the real getTotalLength() so only
     ONE segment ever appears on the perimeter (Chrome ignores SVG
     pathLength for stroke-dasharray). Single clean amber line, no glow
     halos — the layered drop-shadow filter was reading as multiple
     parallel lines instead of one snake. */
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 2;          /* slightly wider than the 1.5px Ink border for visibility */
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  .team-photo-stage .snake-track { opacity: 0; }
}
.team-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.team-role::before { content: '// '; color: var(--signal-amber); }
.team-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.team-bio {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 18px;
  flex: 1;
  max-width: 320px;
}
.team-email {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--signal-amber);
  padding-bottom: 2px;
  align-self: center;
  word-break: break-word;
  transition: color 200ms var(--ease-out);
}
.team-email:hover { color: var(--signal-amber); }
.team-phone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  align-self: center;
  margin-top: 6px;
  transition: color 200ms var(--ease-out);
}
.team-phone:hover { color: var(--signal-amber); }
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: 1fr; gap: 48px; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.value-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.value-card:hover {
  border-color: var(--signal-amber);
  transform: translateY(-2px);
}
.value-card .val-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--signal-amber);
  margin-bottom: 16px;
  display: block;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.value-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0;
}
@media (max-width: 768px) {
  .value-list { grid-template-columns: 1fr; }
}

/* Partner portfolio grid (About) */
/* "What we cover" capability band (About) — replaces the named partner grid.
   Same drafting-grid hairlines, but category-only with a numbered chip; no
   vendor names, so it stays short and gives nothing away. */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.coverage-cell {
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 28px 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--dur-base) var(--ease-out);
}
.coverage-cell:hover { background: var(--drafting-paper); }
.coverage-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal-amber);
}
.coverage-cat {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (max-width: 1024px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stats strip (About — animated count-up) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  margin: 0;
}
.stat {
  padding: 40px 28px;
  border-right: 1px solid var(--hairline-dark);
  text-align: left;
}
.stat:last-child { border-right: none; }
.stat .stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--offwhite);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat .stat-num .unit { color: var(--signal-amber); font-size: 0.5em; font-weight: 700; }
.stat .stat-label {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.section--ink .stat .stat-num { color: var(--offwhite); }
.section--paper .stat .stat-num { color: var(--ink); }
.section--paper .stat .stat-label { color: var(--muted); }
.section--paper .stat { border-right-color: var(--edge); }
.section--paper .stat-strip { border-color: var(--edge); }
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hairline-dark); }
}

/* "What we have built" statement — replaces the old stat strip on About.
   A clean lead paragraph on the dark section, with the trades accented amber. */
.built-statement {
  max-width: 920px;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
}
.built-statement p {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}
.built-statement .hl { color: var(--signal-amber); font-weight: 600; }
@media (max-width: 768px) {
  .built-statement { padding-top: 20px; }
  .built-statement p { font-size: 19px; line-height: 1.55; }
}

/* ---------- 24. Contact form ----------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 40px;
  position: relative;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  border-top: 2px solid var(--signal-amber);
  border-left: 2px solid var(--signal-amber);
}
.contact-form .form-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-form .form-title::before { content: '// Step 01 of 02'; color: var(--signal-amber); }
.contact-form .form-title .step-meta { color: var(--muted); }
.contact-form h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 28px;
}

.form-row { margin-bottom: 22px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form-row.two { grid-template-columns: 1fr; } }

.form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-row label .req { color: var(--signal-amber); margin-left: 4px; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background-color: var(--drafting-paper);
  border: 1px solid var(--edge);
  border-radius: 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--signal-amber);
  background-color: var(--surface);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted); }

.form-submit {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-submit .btn { padding: 16px 28px; }
.form-submit .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Contact sidebar */
.contact-side h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.contact-side p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 24px;
  max-width: 360px;
}
.contact-side .direct-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--edge);
  padding-top: 24px;
}
.contact-side .direct-list .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-side .direct-list .item .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-side .direct-list .item .lbl::before { content: '// '; color: var(--signal-amber); }
.contact-side .direct-list .item .val {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.contact-side .direct-list .item a:hover { color: var(--signal-amber); }

.contact-success {
  display: none;
  background: var(--ink);
  color: var(--offwhite);
  padding: 56px 40px;
  position: relative;
  border-left: 3px solid var(--signal-amber);
  margin-top: 24px;
}
.contact-success.is-shown { display: block; }
.contact-success h3 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--offwhite);
}
.contact-success p {
  color: var(--body-on-dark);
  max-width: 480px;
  margin: 0 0 20px;
}
.contact-success .next {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* ---------- 24b. Contact — drafting-sheet treatment ----- */

/* Section reads as a drafting surface */
.contact-section { position: relative; overflow: hidden; }
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.contact-section > .container { position: relative; z-index: 1; }

/* Section corner callouts (drafting markers) */
.sheet-callout {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-callout::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--signal-amber);
}
.sheet-callout.tl { top: 30px; left: var(--gutter); }
.sheet-callout.br { bottom: 30px; right: var(--gutter); }
.sheet-callout.br::before { background: var(--edge); }
@media (max-width: 1024px) { .sheet-callout { display: none; } }

/* Form card head band (dimension stamp) */
.form-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -40px -40px 0;
  padding: 12px 40px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-sheet-head .fsh-tag::before { content: '// '; color: var(--signal-amber); }

/* Two-step progress rail */
.form-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 24px;
  padding: 0;
  list-style: none;
}
.form-progress .fp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-progress .fp-step.is-active { border-top-color: var(--signal-amber); color: var(--ink); }
.form-progress .fp-num { font-weight: 700; color: var(--muted); }
.form-progress .fp-step.is-active .fp-num { color: var(--signal-amber); }

/* Bottom-right corner bracket on the form card */
.contact-form::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid var(--edge);
  border-right: 2px solid var(--edge);
  pointer-events: none;
}

/* Custom select chevron — kills the native-dropdown tell */
.form-row select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23F5A524' stroke-width='1.5' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ----- Inverted Ink side panel ----- */
.contact-side--ink {
  position: relative;
  background: var(--ink);
  color: var(--offwhite);
  padding: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.contact-side--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.contact-side--ink::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid var(--signal-amber);
  border-right: 2px solid var(--signal-amber);
  pointer-events: none;
}
.contact-side--ink > * { position: relative; z-index: 1; }

.contact-side--ink .cs-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -40px -40px 28px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.contact-side--ink .cs-tag::before { content: '// '; color: var(--signal-amber); }

.contact-side--ink h3 { color: var(--offwhite); margin: 0 0 16px; }
.contact-side--ink p { color: var(--body-on-dark); }
.contact-side--ink .direct-list { border-top-color: var(--hairline-dark); }
.contact-side--ink .direct-list .item .lbl { color: var(--muted-on-dark); }
.contact-side--ink .direct-list .item .val { color: var(--offwhite); }
.contact-side--ink .direct-list .item a:hover { color: var(--signal-amber); }

.contact-side--ink .cs-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.contact-side--ink .cs-foot-brand::before { content: '// '; color: var(--signal-amber); }

/* Contact responsive tightening */
@media (max-width: 540px) {
  .contact-form { padding: 28px 22px; }
  .form-sheet-head { margin: -28px -22px 0; padding: 12px 22px; }
  .contact-side--ink { padding: 28px 22px; }
  .contact-side--ink .cs-sheet-head { margin: -28px -22px 24px; padding: 12px 22px; }
}

/* ---------- 24c. Contact — multi-step intake form ------- */

/* Three-column progress rail + completed-step state */
.form-progress--three { grid-template-columns: repeat(3, 1fr); }
.form-progress .fp-step.is-done {
  border-top-color: var(--signal-amber);
  color: var(--ink);
}
.form-progress .fp-step.is-done .fp-num { color: var(--signal-amber); }

/* Keep card height steady so the layout does not jump between steps */
.contact-form--steps { min-height: 460px; display: flex; flex-direction: column; }

/* Each step is a fieldset; only the active one shows.
   Motion is the JS-driven card flip (setupContactForm), which sets
   inline transform/opacity per step. Backface-hidden + centered
   origin give the flip a clean edge-on midpoint. */
.form-step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* allow grid children to shrink inside fieldset */
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.form-step.is-active { display: block; }

/* Step heading + subhead */
.step-legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 4px 0 6px;
}
.step-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 28px;
}

/* Big, visible question labels in Space Grotesk */
.q-block { margin-bottom: 26px; }
.form-row.two .q-block { margin-bottom: 0; }
.q-block label.q {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 14px;
}
.q-block label.q .req { color: var(--signal-amber); margin-left: 4px; font-weight: 600; }

/* Inline validation */
.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid { border-color: var(--leak-red); }
.q-error {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--leak-red);
}

/* Step navigation row */
.form-nav {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.form-nav--end { justify-content: flex-end; }
.form-nav .btn { padding: 14px 26px; }

/* Back button — secondary on light surface */
.btn-back {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-back:hover { background: var(--ink); color: var(--offwhite); }
.arrow--back { display: inline-block; }

/* Submitted screen — stamp + redo */
.contact-success .cs-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 16px;
}
.btn-redo {
  margin-top: 28px;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-redo:hover { border-color: var(--signal-amber); color: var(--signal-amber); }

@media (max-width: 540px) {
  .step-legend { font-size: 24px; }
  .q-block label.q { font-size: 18px; }
  .contact-form--steps { min-height: 0; }
  .form-nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 25. Legal page ------------------------------- */
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 0;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 48px 0 16px;
  letter-spacing: -0.02em;
}
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-ink);
  margin: 0 0 16px;
}
.legal ul { padding-left: 20px; list-style: disc; margin-bottom: 20px; }
.legal .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--edge);
}

/* ---------- 26. Reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  [data-reveal],
  [data-stagger] > *,
  .flow-steps[data-flow-reveal] .flow-step,
  .hero h1 .word,
  .hero-sub,
  .hero-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Free Website nav link: animated amber underline (added 2026-06-16) ===== */
.nav a.nav-fw > span { position: relative; }
.nav a.nav-fw > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 1px;
  background-image: linear-gradient(90deg,
    var(--signal-amber) 0%,
    var(--signal-amber) 38%,
    #FFE0A3 50%,
    var(--signal-amber) 62%,
    var(--signal-amber) 100%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: navFwSweep 3s linear infinite;
  pointer-events: none;
}
@keyframes navFwSweep { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav a.nav-fw > span::after { animation: none; background-image: none; background-color: var(--signal-amber); }
}

/* =========================================================
   27. Free-build offer components (Sheet 01)
   Ported from the ad landing page at offer.priebebridge.com/excavation.
   The LP's inline :root and this file already carry identical values, so
   these came over by swapping raw hex for the tokens above. Nothing here
   introduces a new colour, family, or corner radius.
   ========================================================= */

/* ---------- 27.1 Hero offer rails ------------------------ */
/* .hero-guarantee, .hero-micro and .hero-catch are UNUSED as of
   2026-08-13: the hero was cut back to headline, sub and CTAs. Kept
   rather than deleted because the guarantee line is likely to come
   back somewhere. Delete them together if it does not. */
.hero-guarantee {
  color: var(--offwhite);
  border-left: 2px solid var(--signal-amber);
  padding-left: 16px;
  margin-top: 20px;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.6;
}
.hero-micro {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* was --muted-on-dark #5C6470, which measured 1.92:1 over the hero video
     and only 2.73:1 over flat ink. Both fail AA for 11px text. */
  color: var(--body-on-dark);
  margin-top: 20px;
}
.hero-catch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: -0.025em;
  color: var(--signal-amber);
  margin-top: 20px;
}

/* ---------- 27.2 The deal, numbered ---------------------- */
.deal {
  margin-top: 8px;
  border-top: 1px solid var(--edge);
  max-width: 760px;
}
.deal__row {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--edge);
  align-items: baseline;
}
.deal__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--signal-amber);
  flex: 0 0 48px;
}
.deal__row p { color: var(--ink); font-size: 18px; line-height: 1.5; margin: 0; }
.deal__row .sub { color: var(--muted); }
.section--ink .deal { border-top-color: var(--hairline-dark); }
.section--ink .deal__row { border-bottom-color: var(--hairline-dark); }
.section--ink .deal__row p { color: var(--offwhite); }
.section--ink .deal__row .sub { color: var(--body-on-dark); }

/* On a gridline canvas the ruled backdrop runs straight through the row text and
   makes 18px body copy hard to read. Per the kit, opaque cards mask the grid, so
   the list becomes a card and the lines only show around it. Scoped to
   .section--gridlines on purpose: work.html renders .deal on a plain ink section
   where the bare hairline list is still correct. */
.section--gridlines .deal {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 4px 22px;
  margin-top: 20px;
}
.section--gridlines .deal__row:last-child { border-bottom: 0; }
.section--ink.section--gridlines .deal {
  background: var(--ink-elevated);
  border-color: var(--hairline-dark);
}
@media (min-width: 760px) {
  .section--gridlines .deal { padding: 6px 32px; }
}

.deal-close {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 28px 0 0;
}
.section--ink .deal-close { color: var(--offwhite); }
.deal-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ---------- 27.2b The deal, plotted as a timeline --------
   HOME ONLY. work.html still renders .deal as the hairline list above and has
   to keep doing so, which is why this is a separate component and not a
   restyle of .deal. Touching .deal changes both pages.

   Structure is the six-step rail from the fencing build, redrawn in Schematic:
   an amber node per step sitting on a hairline rail, a mono number, a display
   title, then the body copy.

   .deal-sheet is not decoration. This section is .section--gridlines, and per
   the kit body copy on a ruled canvas is hard to read, so the timeline sits on
   an opaque surface for exactly the reason .deal does here. */
.deal-sheet {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 40px 32px 36px;
  margin-top: 20px;
}
.section--ink .deal-sheet { background: var(--ink-elevated); border-color: var(--hairline-dark); }

.dealline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* NOT repeat(4, 1fr), and do not "fix" it back. Step 03 carries half again as
     much copy as the others, and on equal columns its last word wraps alone onto
     a fourth line while 04 sits on two with 54px of slack. Measured against the
     real webfonts at the 1216px sheet, AFTER the copy changed to "happy with a
     design" on 2026-08-13: 03 needs 282px for three lines, 02 needs 263, 01
     needs 245 and 04 only 213. Total slack across the row is about 80px, so the
     gap came down to 24px to free a little more and the weights hand it out
     where it is scarcest. Headroom is now roughly +18 per column.
     RE-MEASURE WHENEVER THIS COPY CHANGES. One extra word ate 30px of it. */
  grid-template-columns: 0.97fr 1.05fr 1.14fr 0.84fr;
  gap: 24px;
}
/* Inset by half a node so the rail starts and ends UNDER the first and last
   node instead of running off into the sheet padding. */
.dealline::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 6px;
  height: 1px;
  background: var(--edge);
}
.dealline__step { position: relative; z-index: 1; padding-top: 32px; }
/* The glow. One slow pass from node 01 to node 04, then a beat parked off the
   right edge before it comes round again. Two backgrounds on one pseudo
   element whose positions animate together: a soft halo centred on the rail,
   and a brighter 1px core riding the rail itself. 12px is where the rail sits
   inside this box (top:-6px, rail at 6px), so re-derive it if either moves.

   z-index 0, under the steps, so it passes BEHIND the nodes and the type and
   they stay crisp. Gated on .is-revealed so it does not run before the section
   is on screen. The global reduced-motion rule parks it off screen left, which
   is exactly where it belongs when motion is off. */
.dealline::after {
  content: '';
  position: absolute;
  top: -6px; left: 6px; right: 6px;
  height: 26px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(245, 165, 36, 0.28), rgba(245, 165, 36, 0)) no-repeat,
    linear-gradient(90deg, rgba(245, 165, 36, 0), rgba(245, 165, 36, 0.85), rgba(245, 165, 36, 0)) no-repeat;
  background-size: 220px 26px, 220px 1px;
  background-position: -220px 0, -220px 12px;
}
.deal-sheet.is-revealed .dealline::after { animation: dealSweep 12s linear infinite; }
@keyframes dealSweep {
  0%, 7%    { background-position: -220px 0, -220px 12px; }
  77%, 100% { background-position: calc(100% + 220px) 0, calc(100% + 220px) 12px; }
}
/* The ring is the sheet colour, not white, so the node reads as sitting ON the
   rail rather than punched through it. Re-point it if .deal-sheet changes. */
.dealline__node {
  position: absolute;
  top: 0; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--signal-amber);
  box-shadow: 0 0 0 4px var(--surface);
}
.section--ink .dealline__node { box-shadow: 0 0 0 4px var(--ink-elevated); }
.dealline__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--signal-amber);
  margin-bottom: 9px;
}
.dealline__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
/* 14px, not 15px. At 15px every column sat within a few pixels of gaining a
   line, so a different rasteriser tips one over. 14px buys 23 to 46px of
   headroom per column at the same widths. */
.dealline__p { font-size: 14px; line-height: 1.62; color: var(--body-ink); margin: 0; }
.dealline__p .sub { color: var(--muted); }
.section--ink .dealline__t { color: var(--offwhite); }
.section--ink .dealline__p { color: var(--body-on-dark); }
.section--ink .dealline::before { background: var(--hairline-dark); }

/* Under four columns the horizontal rail would only span the first row, so the
   whole thing rotates: the rail goes vertical down the left and each step draws
   its own segment to the next one. The last step draws none, which is what
   stops the line dangling past the final node. */
@media (max-width: 900px) {
  .dealline { grid-template-columns: 1fr; gap: 0; }
  .dealline::before { display: none; }
  /* No sweep once the rail is vertical and drawn per step: a glow running
     down a stacked list reads as a progress bar, not a timeline. */
  .dealline::after { display: none; }
  .dealline__step { padding: 0 0 26px 34px; }
  .dealline__step:last-child { padding-bottom: 0; }
  .dealline__step::before {
    content: '';
    position: absolute;
    left: 6px; top: 18px; bottom: -2px;
    width: 1px;
    background: var(--edge);
  }
  .dealline__step:last-child::before { display: none; }
  .section--ink .dealline__step::before { background: var(--hairline-dark); }
  .dealline__node { top: 2px; }
  .dealline__num { margin-bottom: 6px; }
}
@media (max-width: 560px) {
  .deal-sheet { padding: 28px 20px 24px; }
}

/* ---------- 27.3 Google reviews -------------------------- */
.tst-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 36px;
}
@media (min-width: 760px) { .tst-grid { grid-template-columns: repeat(3, 1fr); } }
.tst {
  background: var(--ink-elevated);
  border: 1px solid var(--hairline-dark);
  border-left: 2px solid var(--signal-amber);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
}
.tst-top { display: flex; align-items: center; gap: 12px; }
/* 42px explicitly, not a percentage: this rule has to outrank any later
   avatar sizing or the images blow out to full card width. */
.tst-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 42px;
  object-fit: cover;
  display: block;
}
.tst-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--offwhite);
  letter-spacing: -0.01em;
  margin: 0;
}
.tst-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 3px 0 0;
}
.tst-stars { color: var(--signal-amber); letter-spacing: 0.12em; font-size: 15px; line-height: 1; }
.tst blockquote { font-size: 15.5px; line-height: 1.62; color: var(--offwhite); margin: 0; }
.tst-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-top: auto;
  padding-top: 4px;
}
/* Dimmed single pull-quote that sits directly above the form */
.tst-inline { max-width: 480px; margin: 26px 0 -4px; padding-left: 14px; border-left: 1px solid #313841; }
.tst-stars--dim { color: var(--muted-on-dark); font-size: 12px; letter-spacing: 0.14em; }
.tst-inline-q { font-size: 14.5px; line-height: 1.6; color: #8C949E; margin-top: 7px; }
.tst-inline-q em { font-style: normal; color: var(--body-on-dark); }
.tst-inline-by {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-top: 7px;
}

/* ---------- 27.4 Why a website --------------------------- */
.why-lines { margin-top: 26px; max-width: 720px; }
.why-lines p { margin-bottom: 22px; font-size: 20px; line-height: 1.6; }
.why-lines p:last-child { margin-bottom: 0; }
/* Semantic word colour inside a headline. Paper-safe values only, see the token
   block. Two accents in one headline is a deliberate exception to the kit's
   one-amber-wedge rule, taken because good and bad are genuinely semantic here. */
.tone-good { color: var(--won-green-paper); }
.tone-bad  { color: var(--leak-red-paper); }
.section--ink .tone-good { color: var(--won-green); }
.section--ink .tone-bad  { color: var(--leak-red); }

/* ---------- 27.5 Partner marquee fine print -------------- */
/* Replaces the old full-width .disclosure-strip. The FTC line has to travel
   with the logos, but it does not have to be a band. */
.marq-fine {
  background: var(--ink);
  text-align: center;
  padding: 0 var(--gutter) 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.marq-fine a { color: var(--muted-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.marq-fine a:hover { color: var(--signal-amber); }

/* ---------- 27.6 One-question intake --------------------- */
.claim-form { margin-top: 30px; max-width: 480px; }
.claim-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 18px 0 8px;
}
.claim-form input[type=text],
.claim-form input[type=tel],
.claim-form input[type=email],
.claim-form select {
  width: 100%;
  background: var(--ink-elevated);
  border: 1px solid #262626;
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--offwhite);
  outline: none;
}
.claim-form select { cursor: pointer; }
.claim-form input::placeholder { color: var(--muted-on-dark); }
.claim-form input:focus,
.claim-form select:focus { border-color: var(--signal-amber); }
.claim-form .hp { position: absolute; left: -5000px; top: 0; height: 1px; overflow: hidden; }

.q-head { margin-bottom: 26px; }
.q-bar { height: 3px; background: #262b33; position: relative; overflow: hidden; }
.q-bar > span {
  position: absolute; left: 0; top: 0; height: 100%; width: 20%;
  background: var(--signal-amber);
  transition: width 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.q-on .q-step { display: none; }
.q-on .q-step.active { display: block; }
.q-step label { margin-top: 0; }
/* The five fields ARE the form, so their labels get read as questions:
   sentence case, body size, full contrast. [for] keeps this off the consent
   checkbox, which wraps its input and carries no for=. */
.q-step > label[for] {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--offwhite);
  margin: 0 0 10px;
}
@keyframes qOutL { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } }
@keyframes qInR  { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qOutR { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
@keyframes qInL  { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }
/* justify-content is what keeps the primary button STILL between steps.
   .q-back carries margin-right:auto, which parks it left and the primary
   right whenever both are on screen. But step 1 hides Back with
   display:none, so without flex-end the primary was the only child and
   fell back to the left, then jumped right the moment Back appeared.
   Now it starts on the right and never moves. */
.q-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 26px; }
.q-nav .btn { margin-top: 0; }
.q-back {
  margin-right: auto;
  background: transparent;
  color: var(--body-on-dark);
  border: 1px solid #2f3640;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 0;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.q-back:hover { border-color: var(--signal-amber); color: var(--offwhite); }
.q-back[hidden] { display: none; }
.form-err { display: none; color: var(--leak-red); font-size: 14px; margin-top: 14px; }

.consent-box {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-body); font-size: 12px; font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: 1.65;
  color: var(--muted-on-dark); margin: 20px 0 0; cursor: pointer;
}
.consent-box span { display: block; font: inherit; letter-spacing: normal; text-transform: none; }
.consent-box input { margin: 3px 0 0; accent-color: #F5A524; width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.consent-box a { color: inherit; text-decoration: underline; }
.consent-note {
  font-family: var(--font-body); font-size: 12px; line-height: 1.65;
  color: var(--muted-on-dark); margin-top: 12px;
  letter-spacing: normal; text-transform: none;
}
.consent-note a { color: inherit; text-decoration: underline; }

/* A real number a real person answers is the strongest anti-scam proof on the
   page, so it sits above the conversion point, not behind it. */
.call-alt { font-family: var(--font-body); font-size: 14px; color: var(--body-on-dark); margin-top: 20px; max-width: 480px; }
.call-alt a { color: var(--signal-amber); text-decoration: none; border-bottom: 1px solid rgba(245, 165, 36, 0.45); white-space: nowrap; }

.terms-box {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--muted-on-dark);
  border: 1px solid var(--hairline-dark);
  padding: 16px 18px;
  margin-top: 34px;
  max-width: 480px;
}
.sms-note {
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: 1.6;
  color: var(--muted-on-dark); opacity: 0.9; margin: 22px 0 0; max-width: 480px;
}
.sms-note a { color: inherit; text-decoration: underline; }

/* Post-submit */
@keyframes sPanel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.claim-done { max-width: 640px; animation: sPanel 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.claim-done[hidden] { display: none; }
.claim-done .s-stamp {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--signal-amber); margin-bottom: 14px; display: inline-block;
}
.claim-done h2 { color: var(--offwhite); }
.claim-done .lead { margin-top: 14px; max-width: 560px; color: var(--body-on-dark); font-size: 17px; }
.done-phone {
  display: inline-block; margin-top: 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 6vw, 38px); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--offwhite); text-decoration: none;
  border-bottom: 2px solid var(--signal-amber); padding-bottom: 3px;
}
.done-phone:hover { color: var(--signal-amber); }

/* ---------- 27.7 Browser-chrome frame -------------------- */
.browser {
  width: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: left;
  border-radius: 11px;
}
.browser-bar {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: #e9ecef; padding: 11px 15px; border-bottom: 1px solid #d6dade;
}
.browser-dots { display: flex; gap: 7px; flex: 0 0 auto; }
.browser-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser-dots .r { background: #ff5f57; }
.browser-dots .y { background: #febc2e; }
.browser-dots .g { background: #28c840; }
.browser-url {
  flex: 1; background: #fff; border: 1px solid #d6dade; border-radius: 8px;
  padding: 8px 16px; font: 13px/1.2 var(--font-body); color: #5c6470;
  max-width: 560px; margin: 0 auto; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The frame renders the demo at its own natural width, with no transform.
   An earlier version rendered a 1280px logical viewport and scaled it down so
   the demo would lay out as a desktop site. It looked right and then did not
   paint: a scaled iframe is a composited layer, and past a certain rasterized
   size Chromium quietly drops it, leaving a blank white rectangle with a
   perfectly healthy document inside. Small tiles survived it, the full-width
   frame did not. Every demo's desktop breakpoint is under 1080px anyway, so
   an untransformed frame still shows the desktop layout and always paints. */
.browser-view {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  background: #fff;
}
.browser-view iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Live on arrival. The wheel does go to the frame once the cursor is over it,
     which is the known cost of embedding a real site mid-page. Logan's call on
     2026-08-13, matching how the offer landing pages embed their demo. */
}
.browser-view--tall { height: 760px; }

/* Scaled preview (work.html). The default .browser-view sizes the iframe to the
   container, so simply shrinking the box narrows the client's viewport and their
   site reflows into its own mobile layout. This pins the iframe to a real
   1280x800 desktop viewport and draws it smaller with a transform instead, so the
   site renders exactly as it does on a desktop and only the picture shrinks. Same
   technique the offer landing pages use (offer-page/excavation, --dts).

   .proof-stage--sm needs the doubled class: plain .proof-stage sets max-width
   1080px LATER in this file, so a single class loses the cascade tie.

   0.65625 is 840/1280 and is exact, not approximate: the stage is hard-capped at
   840px, so above the breakpoint the container is always exactly 840 and the
   scale never needs to track anything. The breakpoint is 920 rather than 900
   because 840 + two 32px gutters is 904, and below that the container would be
   narrower than the painting and clip it.

   IT NOW APPLIES AT EVERY WIDTH, PHONES INCLUDED. It used to switch off under
   920px and hand back to the client's own mobile layout, on the argument that a
   1280px desktop layout on a 350px phone is unreadable. Logan's call on
   2026-08-13 is that the desktop view is the one worth showing and the point of
   the frame is the DESIGN, not the body copy: you are meant to see the shape of
   the page, and the full-size button is there when you want to read it.

   The scale is no longer the hard-coded 0.65625. That number was 840/1280, and
   it only worked because the stage was capped at exactly 840px above the old
   breakpoint. setupFrameScale() in main.js measures each frame and sets
   --fw-scale, so the same rule now fits any container. The fallback in the var()
   is the old constant, so a frame still paints correctly if the JS never runs. */
.proof-stage.proof-stage--sm { max-width: 840px; }
.browser-view--scaled {
  height: auto;
  aspect-ratio: 1280 / 800;
}
.browser-view--scaled iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  transform: scale(var(--fw-scale, 0.65625));
  transform-origin: top left;
}

/* :not() so the fixed mobile heights cannot fight the scaled frame's
   height:auto + aspect-ratio, whatever order the two end up in. */
@media (max-width: 900px) {
  .browser-view:not(.browser-view--scaled) { height: 460px; }
  .browser-view--tall:not(.browser-view--scaled) { height: 520px; }
}

/* ---------- 27.8 Work: trade picker ---------------------- */
/* Ported from the general LP at offer.priebebridge.com/general. One frame, five
   tabs, one caption. Only the selected trade is ever loaded. */
.proof-stage { max-width: 1080px; margin: 40px auto 0; }
.proof-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 0 auto 18px;
}
.ptab {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.ptab:hover { border-color: var(--ink); color: var(--ink); }
.ptab:focus-visible { outline: 2px solid var(--signal-amber); outline-offset: 2px; }
.ptab.on { background: var(--ink); color: var(--signal-amber); border-color: var(--ink); }
.section--ink .ptab { border-color: var(--hairline-dark); color: var(--body-on-dark); }
.section--ink .ptab.on { background: var(--signal-amber); color: var(--ink); border-color: var(--signal-amber); }

/* The reserved state for a trade with no client site live yet. It blanks the
   frame rather than leaving the previous trade's site under a caption naming a
   different business. */
.proof-pending {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; background: var(--drafting-paper-alt);
  background-image:
    linear-gradient(to right, var(--gridline-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline-light) 1px, transparent 1px);
  background-size: 24px 24px;
}
.proof-pending[hidden] { display: none; }
.proof-pending .pp-stamp {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal-amber); margin: 0;
}
.proof-pending .pp-line {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 4vw, 30px); letter-spacing: -0.03em; color: var(--ink); margin: 0;
}

@media (max-width: 720px) {
  .proof-tabs { gap: 6px; }
  .ptab { padding: 9px 12px; font-size: 10px; letter-spacing: 0.1em; }
}

/* ---------- 27.9 Desktop / mobile modal ------------------ */
/* Lifted from the old free-website.html rather than rewritten. */
.fw-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 10, 14, 0.86);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.fw-modal.open { display: flex; }
/* "Contain" in pure CSS. 1.6 is 1280/800, so the dialog takes whichever of the
   viewport's width or height runs out first and the stage's aspect-ratio does the
   rest. 150px is the header, the browser bar and the modal padding. */
/* 175px is the measured furniture: the header row, the browser bar, the hint
   line and the modal's own padding. Subtract it, multiply the remaining height
   by 1.6 (which is 1280/800) and you have the widest the dialog can be while
   still fitting top to bottom. */
.fw-dialog { width: min(100%, 1180px, calc((100vh - 175px) * 1.6)); margin: 0 auto; }
.fw-dhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.fw-dhead .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--offwhite); }
.fw-dclose {
  background: var(--signal-amber); color: var(--ink); border: none;
  font-weight: 700; padding: 9px 16px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; border-radius: 0;
}
.fw-dclose:hover { background: var(--signal-amber-hover); }
/* The stage renders a REAL 1280x800 desktop viewport and is drawn to fit, the
   same technique and the same --fw-scale variable as the inline frames, so a
   client's site never reflows into its own mobile layout in here either.
   setupFrameScale() in main.js measures it. */
.fw-bview {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 800;
  height: auto;
  overflow: hidden;
  background: #fff;
}
.fw-bview iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 800px;
  transform: scale(var(--fw-scale, 1));
  transform-origin: top left;
  border: 0; display: block;
}
.fw-hint {
  display: none;
  margin: 12px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--body-on-dark);
}

/* Phones that will not rotate for us. iOS Safari has NO element fullscreen and
   NO orientation lock, so rather than pretend, the dialog takes a quarter turn
   and the visitor turns the phone. This works either way round: with rotation
   lock ON they turn the phone and it reads correctly, and with it OFF the
   browser reports landscape, this rule stops matching, and the dialog lands
   upright at the same size. Set by syncRot() in main.js, not by the media query
   alone, so a desktop window that happens to be tall and narrow is left alone.

   The width is the same contain trick with the axes swapped: whichever of the
   phone's long or short edge binds first. */
/* A phone held sideways has about 390px of height, and the standard 175px of
   furniture would eat half of it. Landscape on a short screen is exactly the
   case this feature exists for, so the chrome gets out of the way: tighter
   padding, no hint (they have already turned it), and the solve re-run against
   what is left. Worth roughly 120px of extra width. */
@media (orientation: landscape) and (max-height: 500px) {
  .fw-modal { padding: 8px; }
  .fw-dhead { margin-bottom: 6px; }
  .fw-hint { display: none; }
  .fw-dialog { width: min(100%, 1180px, calc((100vh - 100px) * 1.6)); }
}

@media (orientation: portrait) {
  /* Sideways, the furniture costs the same as it does in landscape and the
     budget is the phone's SHORT edge, so it gets the same trim. */
  .fw-modal.is-rot { padding: 8px; }
  .fw-modal.is-rot .fw-dhead { margin-bottom: 6px; }
  .fw-modal.is-rot .fw-hint { margin-top: 6px; }
  .fw-modal.is-rot .fw-dialog {
    position: absolute; top: 50%; left: 50%;
    max-width: none;
    /* Same solve with the axes swapped, because the dialog is on its side: its
       HEIGHT has to fit the phone's width. 128px is the trimmed furniture,
       MEASURED not estimated: at 390x844 the dialog comes out 419x382 and the
       382 is what has to clear the 390. Re-measure if the header or hint
       changes; guessing this number overflows the screen edge. */
    width: min(calc(100vh - 32px), calc((100vw - 128px) * 1.6));
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  .fw-modal.is-rot .fw-hint { display: block; }
}
/* Mobile look: a real phone viewport in a shell, rendered 1:1.
   An earlier version rendered 390px wide and scaled it down to fit a smaller
   shell. Do not go back to that: a transformed iframe inside a position:fixed
   overlay is exactly the case Chromium fails to composite, and it showed up as
   a blank white phone. Full size, no transform, no scaling blur. */


/* ---------- 27.10 Referrals capture ---------------------- */
.ref-capture { margin-top: 36px; max-width: 520px; }
.ref-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ref-row input[type=email] {
  flex: 1 1 240px;
  background: var(--ink-elevated); border: 1px solid #262626; border-radius: 0;
  padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--offwhite); outline: none;
}
.ref-row input[type=email]::placeholder { color: var(--muted-on-dark); }
.ref-row input[type=email]:focus { border-color: var(--signal-amber); }
.ref-micro {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-on-dark); margin-top: 16px;
}
.ref-ok { display: none; color: var(--won-green); font-size: 15px; margin-top: 16px; }
.ref-ok.on { display: block; }

@media (max-width: 640px) {
  .fw-modal { padding: 14px; }
  /* The old fixed-height pair lived here. Removed 2026-08-13: the stage is
     aspect-ratio driven now and a vh height silently beat it, so the desktop
     viewport came out the wrong shape on phones. */
}

@media (prefers-reduced-motion: reduce) {
  .q-on .q-step.active, .claim-done { animation: none; }
  .q-bar > span { transition: none; }
}

/* ---------- 27.11 Intake on a light canvas --------------- */
/* The same form runs on Home (Ink) and Contact (Drafting Paper). Rather than
   fork the markup, the paper canvas re-points the colours. Everything else,
   including the step transitions, is shared. */
.section--paper .claim-form input[type=text],
.section--paper .claim-form input[type=tel],
.section--paper .claim-form input[type=email],
.section--paper .claim-form select {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--body-ink);
}
.section--paper .claim-form input::placeholder { color: var(--muted); }
.section--paper .claim-form input:focus,
.section--paper .claim-form select:focus { border-color: var(--signal-amber); }
.section--paper .claim-form label { color: var(--muted); }
.section--paper .q-step > label[for] { color: var(--ink); }
.section--paper .q-bar { background: var(--edge); }
.section--paper .q-back { color: var(--muted); border-color: var(--edge); }
.section--paper .q-back:hover { border-color: var(--signal-amber); color: var(--ink); }
.section--paper .consent-box,
.section--paper .consent-note,
.section--paper .sms-note { color: var(--muted); }
.section--paper .call-alt { color: var(--body-ink); }
.section--paper .call-alt a { color: var(--ink); border-bottom-color: rgba(10, 14, 20, 0.45); }
.section--paper .claim-done h2 { color: var(--ink); }
.section--paper .claim-done .lead { color: var(--body-ink); }
.section--paper .done-phone { color: var(--ink); }
.section--paper .done-phone:hover { color: var(--signal-amber-hover); }
.section--paper .terms-box { color: var(--muted); border-color: var(--edge); }
.section--paper .tst-inline { border-left-color: var(--edge); }
.section--paper .tst-inline-q { color: var(--muted); }
.section--paper .tst-inline-q em { color: var(--body-ink); }

/* Anchor targets have to clear the sticky header. setupSmoothAnchors offsets
   in-page clicks, but a direct hit on /#claim or a back button does not go
   through it, so the header would sit on top of the heading. */
[id] { scroll-margin-top: 110px; }

/* .btn-link is Signal Amber, which clears AA comfortably on Ink and fails it
   badly on Drafting Paper: #F5A524 on #F4F4EE is 1.85:1 against a 4.5:1
   requirement. On a light canvas the label goes to Ink and the amber stays as
   the underline, so the brand device survives and the text is readable. */
.section--paper .btn-link,
.section--paper-alt .btn-link { color: var(--ink); }
.section--paper .btn-link:hover,
.section--paper-alt .btn-link:hover { color: var(--signal-amber-hover); }


/* =========================================================
   28. How It Works, the animated three-step sequence
   Ported whole from offer.priebebridge.com/excavation, which is where this
   was built and proven. Every selector is prefixed #hiw, so none of it can
   reach the rest of the site; verified zero collisions with sections 1-27
   before it came over. The LP's own token names are mapped onto ours here
   rather than left on their hex fallbacks, so the section themes with the
   rest of the site.
   The markup is driven by js/hiw.js.
   ========================================================= */
/* ============================================================================
   HOW IT WORKS  ·  three separate blocks, one animation each
   Nothing pins and nothing swaps in place. Each step is an ordinary block with
   its own stage next to it, so the page scrolls straight through all three the
   way the rest of the page does. Desktop alternates the sides; a phone stacks
   the animation over its words.
   Schematic tokens only. Signal Amber on Ink. No em dashes in visible copy.
   ============================================================================ */
#hiw{position:relative;padding:56px 0 40px}
#hiw .hiw-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
#hiw .hiw-head{max-width:760px}
#hiw .hiw-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,6.5vw,48px);line-height:1.02;letter-spacing:-.04em;color:var(--offwhite,#F4F4EE)}
#hiw .hiw-head p.hiw-sub{margin-top:16px;font-size:17px;color:var(--body-on-dark,#A8B5C7);max-width:600px}

/* ---- one block per step, in normal flow ---- */
.hiw-body{margin-top:36px}
.hiw-block{display:flex;flex-direction:column;padding:30px 0 34px}
.hiw-block+.hiw-block{border-top:1px solid var(--hairline-dark,rgba(201,205,211,.16))}
.hiw-block:first-child{padding-top:0}
/* animation first, its words underneath, the way it reads on a phone. The cap
   matters on a tablet: without it a 900px window hands the stage the full
   column and fit() returns an 830px tall box, three times over. */
.hiw-block .hiw-visual{order:1;margin-bottom:18px;width:100%;max-width:560px}
.hiw-block .hiw-copy{order:2}

@media(min-width:960px){
  .hiw-body{margin-top:52px}
  .hiw-block{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:56px;
    align-items:center;padding:62px 0}
  .hiw-block .hiw-copy{grid-column:1;grid-row:1;margin:0}
  .hiw-block .hiw-visual{grid-column:2;grid-row:1;margin:0}
  /* every other step swaps sides: it gives the scroll a rhythm and stops three
     blocks in a row reading as one repeated layout */
  .hiw-block:nth-of-type(even){grid-template-columns:540px minmax(0,1fr)}
  .hiw-block:nth-of-type(even) .hiw-copy{grid-column:2}
  .hiw-block:nth-of-type(even) .hiw-visual{grid-column:1}
}

/* ---- step copy ---- */
.hiw-step .sn{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted,#5C6470);transition:color .4s ease}
.hiw-step.on .sn{color:var(--signal-amber,#F5A524)}
.hiw-step .sn i{display:block;height:1px;width:26px;background:currentColor;font-style:normal}
.hiw-step h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,4.4vw,30px);line-height:1.08;
  letter-spacing:-.03em;color:var(--offwhite,#F4F4EE);margin-top:12px}
.hiw-step p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--body-on-dark,#A8B5C7);max-width:460px}
.hiw-step .sbar{height:2px;background:#20252c;margin-top:18px;max-width:460px;overflow:hidden}
.hiw-step .sbar i{display:block;height:100%;width:0;background:var(--signal-amber,#F5A524)}

/* ---- stage ---- */
.hiw-stage{position:relative;width:100%;overflow:hidden;background:#0A0E14;
  background-image:linear-gradient(rgba(168,181,199,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(168,181,199,.05) 1px,transparent 1px);
  background-size:24px 24px;border:1px solid var(--hairline-dark,rgba(201,205,211,.16))}
.hiw-canvas{position:absolute;left:0;top:0;width:620px;height:600px;transform-origin:top left}
.hiw-canvas *{box-sizing:border-box}

/* corner ticks + stamps, straight off the ad */
.hiw-tick{position:absolute;width:12px;height:12px;border:1px solid rgba(168,181,199,.24)}
.hk1{top:10px;left:10px;border-right:0;border-bottom:0}
.hk2{top:10px;right:10px;border-left:0;border-bottom:0}
.hk3{bottom:10px;left:10px;border-right:0;border-top:0}
.hk4{bottom:10px;right:10px;border-left:0;border-top:0}
.hiw-stamp{position:absolute;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:#4a525e}
.hs-tl{top:16px;left:24px;color:var(--signal-amber,#F5A524);opacity:.85}
.hs-tr{top:16px;right:24px}

/* ============================ PHONE ============================ */
.hiwph{position:absolute;left:160px;top:8px;width:300px;height:440px;transform-origin:top left;
  transition:transform 1.05s cubic-bezier(.55,0,.25,1),opacity .75s ease}
.hiwph-dev{position:absolute;inset:0;background:#05070a;border:2px solid #23272e;border-radius:26px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.92)}
.hiwph-scr{position:absolute;inset:7px;border-radius:20px;overflow:hidden;background:#0A0E14;display:flex;flex-direction:column}
.hp-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:82px;height:14px;background:#05070a;border-radius:0 0 9px 9px;z-index:9}
.hp-head{flex:0 0 auto;background:rgba(10,14,20,.96);border-bottom:1px solid rgba(168,181,199,.14);padding:14px 12px 0}
.hp-hrow{display:flex;align-items:center;gap:8px;padding-bottom:9px}
.hp-av{width:26px;height:26px;flex:0 0 26px;background:#181C22;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(245,165,36,.55)}
.hp-av img{width:100%;height:100%;object-fit:cover;display:block}
.hp-nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.01em;color:#F4F4EE;line-height:1.05}
.hp-sb{font-family:'Inter',sans-serif;font-size:8px;letter-spacing:0;color:#5C6470;margin-top:2px}
.hp-st{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#5C6470}
.hp-st.done{color:var(--signal-amber,#F5A524)}
.hp-bar{height:3px;background:#20242b;position:relative;overflow:hidden}
.hp-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--signal-amber,#F5A524)}
.hp-wrap{flex:1 1 auto;position:relative;overflow:hidden;
  /* The transcript scrolls under the header, and a shorter phone means a
     message is more often caught half way off the top. Fading the first few
     pixels turns a hard cut through a line of text into it sliding away. */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 13px,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 13px,#000 100%)}
.hp-col{position:absolute;left:0;top:0;width:100%;padding:12px 11px 14px;will-change:transform}
.hp-dock{flex:0 0 auto;border-top:1px solid rgba(168,181,199,.14);background:#0A0E14;display:flex;gap:6px;padding:9px 10px 11px}
.hp-att{flex:0 0 30px;height:30px;border:1px solid #2f3640;color:#A8B5C7;display:flex;align-items:center;justify-content:center}
.hp-att.on{border-color:var(--signal-amber,#F5A524);color:var(--signal-amber,#F5A524)}
.hp-att svg{width:14px;height:14px}
.hp-tin{flex:1;background:#181C22;border:1px solid #262626;padding:8px 10px;font-size:11px;color:#5C6470;display:flex;align-items:center}
.hp-send{flex:0 0 30px;height:30px;background:var(--signal-amber,#F5A524);color:#0A0E14;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* chat rows */
.cr{display:flex;gap:7px;margin-bottom:9px;opacity:0}
.cr .cav{width:19px;height:19px;flex:0 0 19px;background:var(--signal-amber,#F5A524);color:#0A0E14;display:flex;align-items:center;justify-content:center;margin-top:1px}
.cr .cav svg{width:74%;height:74%}
.cb{max-width:86%;background:#181C22;border:1px solid #262626;padding:8px 10px;color:#F4F4EE;font-size:11.5px;line-height:1.45}
.cb b{color:#fff}
.cr.me{justify-content:flex-end}
.cr.me .cb{max-width:84%;background:rgba(245,165,36,.09);border-color:rgba(245,165,36,.5)}
.cthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:186px;max-width:100%}
.cth{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid #262626;opacity:0}
.cth img{width:100%;height:100%;object-fit:cover;display:block;transition:none}
.cth.sent{border-style:dashed;border-color:rgba(168,181,199,.22);
  background-image:repeating-linear-gradient(-45deg,rgba(168,181,199,.06) 0 4px,transparent 4px 9px)}
/* select cards */
.ccard{margin:0 0 9px 26px;background:#181C22;border:1px solid #262626;opacity:0}
.ccard.live{border-color:var(--signal-amber,#F5A524)}
.ccb{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;border-bottom:1px solid #262626;
  font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#5C6470}
.ccard.live .ccb .tg{color:var(--signal-amber,#F5A524)}
.cclk{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;color:var(--signal-amber,#F5A524);opacity:0}
.copts{padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.copts.one{grid-template-columns:1fr}
.copt{position:relative;background:#141920;border:1px solid #2f3640;color:#F4F4EE;font-size:10.5px;font-weight:600;
  padding:8px 9px;text-align:left;overflow:hidden;line-height:1.25}
.copt.sel{background:var(--signal-amber,#F5A524);border-color:var(--signal-amber,#F5A524);color:#0A0E14}
.copt.oth{color:#A8B5C7;font-weight:500}
.copt .tk{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;opacity:0}
.copt.sel .tk{opacity:1}
.rip{position:absolute;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.55);left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;mix-blend-mode:overlay}
.cconf{display:block;margin:1px 8px 9px;padding:9px;width:calc(100% - 16px);background:var(--signal-amber,#F5A524);color:#0A0E14;
  font-weight:700;font-size:10.5px;text-align:center;border:0;opacity:0;position:relative;overflow:hidden}

/* ============================ SITE FRAMES ============================ */
.hf{position:absolute;transform-origin:top left;opacity:0;
  transition:transform 1.05s cubic-bezier(.55,0,.25,1),opacity .7s ease,
             width 1.05s cubic-bezier(.55,0,.25,1),height 1.05s cubic-bezier(.55,0,.25,1),
             left 1.05s cubic-bezier(.55,0,.25,1),top 1.05s cubic-bezier(.55,0,.25,1)}
.hf-shell{position:absolute;inset:0;border:1px solid #222;box-shadow:0 26px 70px -22px rgba(0,0,0,.9);overflow:hidden;background:#0c0f14}
.hf-chrome{display:flex;align-items:center;gap:7px;padding:6px 9px;background:#11151b;border-bottom:1px solid #20242b;height:26px}
.hf-dots{display:flex;gap:4px}
.hf-dots i{width:6px;height:6px;border-radius:50%;background:#2b3038;display:block}
.hf-addr{flex:1;display:flex;align-items:center;gap:5px;background:#0a0d12;border:1px solid #222;color:#8a93a0;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;padding:3px 7px;overflow:hidden;white-space:nowrap;position:relative}
.hf-addr svg{width:8px;height:8px;color:#5f6a76;flex:0 0 auto}
.hf-addr .caret{display:inline-block;width:1px;height:9px;background:var(--signal-amber,#F5A524);margin-left:1px;vertical-align:-1px;opacity:0}
.hf-load{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--signal-amber,#F5A524);opacity:0}
.hf-view{position:absolute;top:26px;left:0;right:0;bottom:0;overflow:hidden}
/* The site is laid out once at MINIW and scaled to whatever the frame is,
   so a frame that grows zooms its page instead of re-flowing it. MINIW is
   the widest the frame ever gets, so every scale is a down scale and the
   type stays crisp. Visual size is identical to laying out at the frame
   width: 2.55cqw of MINIW, scaled by frameW/MINIW, is 2.55% of frameW. */
.hf-scroll{position:absolute;left:0;top:0;width:568px;transform-origin:top left;
  container-type:inline-size;will-change:transform}
.hf-tag{position:absolute;left:0;top:-17px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:#5C6470;opacity:0;transition:opacity .4s ease}
.hf-tag b{color:var(--signal-amber,#F5A524);font-weight:500}
.hf.show .hf-tag{opacity:1}
.hf-shell{will-change:clip-path}
.hf-wipe{position:absolute;left:-3px;right:-3px;height:3px;top:0;background:var(--signal-amber,#F5A524);
  box-shadow:0 0 20px 4px rgba(245,165,36,.7);opacity:0;pointer-events:none;z-index:6}
.hf-pick{position:absolute;left:0;right:0;bottom:-30px;height:24px;background:var(--signal-amber,#F5A524);color:#0A0E14;
  font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;
  transition:opacity .35s ease;overflow:hidden}
.hf-pick .rip{background:rgba(10,14,20,.4)}
.hf-glow{position:absolute;inset:-3px;border:2px solid var(--signal-amber,#F5A524);opacity:0;pointer-events:none;transition:opacity .3s ease}
/* the site is on its domain and answering */
.hf-live{position:absolute;top:-18px;right:0;z-index:9;display:flex;align-items:center;gap:5px;
  background:rgba(10,14,20,.94);border:1px solid var(--signal-amber,#F5A524);padding:4px 9px;opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal-amber,#F5A524);box-shadow:0 6px 20px -6px rgba(0,0,0,.9);
  transform-origin:100% 0}
.hf-live i{width:5px;height:5px;border-radius:50%;background:var(--signal-amber,#F5A524);display:block;
  box-shadow:0 0 7px var(--signal-amber,#F5A524)}

/* ---------- shared mini site ---------- */
.mini{font-size:2.55cqw;line-height:1.35;font-family:'Inter',sans-serif}
.mini .osw{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.005em}
.mslot{position:relative;overflow:hidden;background:#11151b}
.mslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.mslot .fl{position:absolute;inset:0;background:var(--signal-amber,#F5A524);opacity:0}
.mskel{display:inline-block;background:currentColor;opacity:.16;height:.8em;border-radius:1px;vertical-align:middle}
.mtxt{opacity:0}

/* ---------- A: dark Caliche Creek mold ---------- */
.mini-a{background:#0d0c0a;color:#f7f4ee}
.mini-a .mnav{display:flex;align-items:center;gap:.7em;padding:.55em .9em;background:#0d0c0a;border-bottom:1px solid rgba(242,162,12,.16)}
.mini-a .mmark{width:1.9em;height:1.9em;flex:0 0 auto;background:#f2a20c;color:#0d0c0a;display:flex;align-items:center;justify-content:center;font-size:1em}
.mini-a .mmark svg{width:70%;height:70%}
.mini-a .mbrand b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15em;letter-spacing:.08em;line-height:1}
.mini-a .mbrand small{display:block;font-family:'JetBrains Mono',monospace;font-size:.6em;letter-spacing:.3em;color:#f2a20c;margin-top:.25em}
.mini-a .mmenu{display:flex;gap:.9em;margin-left:.8em;font-size:.72em;color:#8a8378;letter-spacing:.06em;text-transform:uppercase}
.mini-a .mcta{margin-left:auto;background:#f2a20c;color:#0d0c0a;font-weight:700;font-size:.68em;padding:.5em .8em;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mini-a .mhero{position:relative;height:12.2em;overflow:hidden;background:#11100e}
.mini-a .mhero .mslot{position:absolute;inset:0}
.mini-a .mhgrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,.25) 0%,rgba(13,12,10,.55) 48%,rgba(13,12,10,.94) 100%)}
.mini-a .mhcap{position:absolute;left:1.1em;right:1.1em;bottom:1em;text-align:center}
.mini-a .meye{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.24em;text-transform:uppercase;
  color:#f2a20c;border:1px solid rgba(242,162,12,.5);padding:.32em .7em}
.mini-a .mh1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.35em;line-height:.98;letter-spacing:-.005em;
  text-transform:uppercase;margin-top:.58em;color:#fff}
.mini-a .mh1 i{font-style:normal;color:#f2a20c}
.mini-a .mbtn{display:inline-block;margin-top:.7em;background:#f2a20c;color:#0d0c0a;font-weight:700;font-size:.72em;
  padding:.6em 1.1em;letter-spacing:.1em;text-transform:uppercase}
.mini-a .mhaz{height:.55em;background:repeating-linear-gradient(-45deg,#0d0c0a 0 .5em,#f2a20c .5em 1em)}
.mini-a .mstrip{display:flex;align-items:center;justify-content:space-between;gap:.6em;background:#f2a20c;color:#0d0c0a;
  font-family:'JetBrains Mono',monospace;font-size:.53em;letter-spacing:.09em;text-transform:uppercase;
  padding:.66em .8em;min-height:2em;overflow:hidden}
.mini-a .mstrip span{white-space:nowrap;opacity:0}
.mini-a .mstats{display:flex;background:#14120f;border-bottom:1px solid rgba(242,162,12,.16)}
.mini-a .mstats div{flex:1;text-align:center;padding:.7em .2em}
.mini-a .mstats b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5em;color:#f2a20c;line-height:1}
.mini-a .mstats span{display:block;font-family:'JetBrains Mono',monospace;font-size:.55em;letter-spacing:.16em;text-transform:uppercase;color:#8a8378;margin-top:.35em}
.mini-a .mwork{padding:1em .9em 1.2em}
.mini-a .mwork .meye2{font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.24em;text-transform:uppercase;color:#f2a20c}
.mini-a .mwork h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.7em;text-transform:uppercase;
  color:#f7f4ee;margin-top:.25em;line-height:1}
.mini-a .mwork h4 i{font-style:normal;color:#f2a20c}
.mini-a .mgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55em;margin-top:.8em}
.mini-a .mcell{background:#14120f;border:1px solid rgba(247,244,238,.08)}
.mini-a .mcell .mslot{aspect-ratio:4/3}
.mini-a .mcell .mcap{padding:.45em .5em .6em}
.mini-a .mcell .mcap b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.78em;
  text-transform:uppercase;color:#f7f4ee;letter-spacing:.02em}
.mini-a .mcell .mcap i{display:block;height:.3em;background:#8a8378;opacity:.28;margin-top:.4em;width:80%}

/* ---------- B: light Ironline mold, Caliche Creek content ---------- */
.mini-b{background:#F6F4EF;color:#161514}
.mini-b .mtop{background:#161514;color:#C9C4BB;font-family:'JetBrains Mono',monospace;font-size:.5em;letter-spacing:.08em;
  padding:.55em .8em;display:flex;justify-content:space-between;gap:.7em;text-transform:uppercase;min-height:1.9em;overflow:hidden}
.mini-b .mtop span{white-space:nowrap;opacity:0}
.mini-b .mnav{display:flex;align-items:center;gap:.7em;padding:.55em .9em;background:#fff;border-bottom:1px solid #E4DFD6}
.mini-b .mmark{width:1.8em;height:1.8em;flex:0 0 auto;background:#161514;color:#F2A20C;display:flex;align-items:center;justify-content:center}
.mini-b .mmark svg{width:70%;height:70%}
.mini-b .mbrand b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1em;letter-spacing:.09em;line-height:1;color:#161514}
.mini-b .mbrand small{display:block;font-family:'JetBrains Mono',monospace;font-size:.55em;letter-spacing:.2em;color:#5B564F;margin-top:.25em}
.mini-b .mmenu{display:flex;gap:.85em;margin-left:.8em;font-size:.72em;color:#5B564F}
.mini-b .mcta{margin-left:auto;background:#F2A20C;color:#161514;font-weight:700;font-size:.68em;padding:.5em .8em;white-space:nowrap}
.mini-b .mhero{position:relative;height:11.4em;overflow:hidden;background:#ded9d0}
.mini-b .mhero .mslot{position:absolute;inset:0;background:#ded9d0}
.mini-b .mhgrad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,21,20,.86) 0%,rgba(22,21,20,.55) 46%,rgba(22,21,20,.05) 82%)}
.mini-b .mhcap{position:absolute;left:1.1em;bottom:1.1em;right:35%}
.mini-b .meye{font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.22em;text-transform:uppercase;color:#F2A20C}
.mini-b .mh1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.2em;line-height:.98;text-transform:uppercase;color:#fff;margin-top:.35em}
.mini-b .mh1 i{font-style:normal;color:#F2A20C}
.mini-b .mbtns{display:flex;gap:.5em;margin-top:.75em}
.mini-b .mbtn{background:#F2A20C;color:#161514;font-weight:700;font-size:.68em;padding:.55em .9em}
.mini-b .mbtn.gh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.mini-b .mstrip{display:flex;align-items:center;justify-content:space-between;gap:.6em;background:#fff;border-bottom:1px solid #E4DFD6;
  font-family:'JetBrains Mono',monospace;font-size:.51em;letter-spacing:.08em;text-transform:uppercase;color:#5B564F;padding:.7em .7em;min-height:2em}
.mini-b .mstrip span{white-space:nowrap;opacity:0}
.mini-b .mstrip b{color:#F2A20C}
.mini-b .mwork{padding:1em .9em 1.1em}
.mini-b .mwork .meye2{font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.22em;text-transform:uppercase;color:#5B564F}
.mini-b .mwork h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6em;text-transform:uppercase;color:#161514;margin-top:.25em;line-height:1}
.mini-b .mgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5em;margin-top:.8em}
.mini-b .mcell{position:relative}
.mini-b .mcell .mslot{aspect-ratio:4/3;background:#e6e1d8}
.mini-b .mcell .mlab{position:absolute;left:.4em;bottom:.4em;right:.4em;color:#fff;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.72em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.9);opacity:0}
.mini-b .mband{display:flex;background:#2E3742;padding:.8em 0}
.mini-b .mband div{flex:1;text-align:center}
.mini-b .mband b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5em;color:#F2A20C;line-height:1}
.mini-b .mband span{display:block;font-family:'JetBrains Mono',monospace;font-size:.52em;letter-spacing:.14em;text-transform:uppercase;color:#B9C0C8;margin-top:.35em}

/* ============================ FLYING LAYER ============================ */
.hiw-fly{position:absolute;inset:0;pointer-events:none;z-index:12}
.flyimg{position:absolute;left:0;top:0;object-fit:cover;opacity:0;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.85)}
.flychip{position:absolute;left:0;top:0;background:#181C22;border:1px solid var(--signal-amber,#F5A524);color:#F4F4EE;
  font-size:10px;font-weight:600;padding:5px 9px;white-space:nowrap;opacity:0;line-height:1.45;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.9)}
.flychip.wide{white-space:normal;max-width:232px}
.flychip .cl{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-amber,#F5A524);display:block;margin-bottom:2px}

/* cursor */
.hiw-cur{position:absolute;left:0;top:0;width:17px;height:22px;z-index:20;opacity:0;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.hiw-cur svg{width:100%;height:100%;display:block}
.hiw-cur .ring{position:absolute;left:2px;top:3px;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid var(--signal-amber,#F5A524);
  border-radius:50%;opacity:0;transform:scale(.3)}

/* domain stamp */
.hiw-note{position:absolute;left:20px;right:20px;bottom:14px;display:flex;align-items:center;gap:8px;
  background:rgba(24,28,34,.94);border:1px solid rgba(245,165,36,.5);padding:8px 11px;opacity:0;z-index:14}
.hiw-note svg{width:13px;height:13px;color:var(--signal-amber,#F5A524);flex:0 0 auto}
.hiw-note b{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-amber,#F5A524);font-weight:500}
.hiw-note span{font-size:10.5px;color:#F4F4EE}



/* ============================ BEAT POSES ============================
   The frame WIDTH never changes, so the container-query sized mini site never
   reflows mid animation. Only left / top / height move. --bw --bh --bl --bt are
   the step 02 build pose, --fh --fl --fat --fbt the stacked pose. fit() writes
   both once it has measured how tall the mini page is at that width.
   ==================================================================== */
.hiw-stage[data-beat="0"] .hiwph{transform:translate(0,72px) scale(1);opacity:1}
.hiw-stage[data-beat="0"] .hf{opacity:0;pointer-events:none}
.hiw-stage[data-beat="0"] .hf-a,
.hiw-stage[data-beat="0"] .hf-b{left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh)}

/* step 02: phone left at working size, one frame right showing the whole page */
/* Step 1 runs the short 300x440 device so its camera box, which follows the
   phone's aspect, stays near the other two stages. Step 2 is framed on the
   two sites rather than on the phone, so it can afford the real proportions
   and the phone reads as a phone while it empties out. */
.hiw-stage[data-beat="1"] .hiwph{height:584px;transform:translate(-136px,52px) scale(.82);opacity:1}
.hiw-stage[data-beat="1"] .hiwph.out{transform:translate(-214px,150px) scale(.72);opacity:0}
.hiw-stage[data-beat="1"] .hf-a{left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh);opacity:1}
.hiw-stage[data-beat="1"] .hf-b{left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh);opacity:0}
/* The settled pose is beat 2's opening pose, exactly. Stacking them put site B
   below the bottom of the camera box on a phone, so its hero was cut in half;
   side by side also means step 2 hands off to step 3 without the pair jumping. */
.hiw-stage[data-beat="1"] .hf-a.up{left:8px;top:86px;width:300px;height:340px}
.hiw-stage[data-beat="1"] .hf-b.up{left:312px;top:86px;width:300px;height:340px;opacity:1}

/* step 03: two panels, then the pick expands */
.hiw-stage[data-beat="2"] .hiwph{transform:translate(-40px,760px) scale(.5);opacity:0}
.hiw-stage[data-beat="2"] .hf{opacity:1}
.hiw-stage[data-beat="2"] .hf-a{left:8px;top:86px;width:300px;height:340px}
.hiw-stage[data-beat="2"] .hf-b{left:312px;top:86px;width:300px;height:340px}
.hiw-stage[data-beat="2"] .hf-a.big{left:26px;top:56px;width:568px;height:452px;z-index:8}
.hiw-stage[data-beat="2"] .hf-b.gone{opacity:0}
.hiw-stage[data-beat="2"] .hf.big .hf-tag{opacity:0}

@media(prefers-reduced-motion:reduce){
  .hiw-step,.hf,.hiwph,.hf-tag,.hf-pick,.hf-glow{transition:none}
}


/* slots read as empty plates while the build is happening */
.mini.building .mslot{outline:1px dashed rgba(168,181,199,.24);outline-offset:-1px;
  background-image:repeating-linear-gradient(-45deg,rgba(168,181,199,.055) 0 5px,transparent 5px 11px)}
.mini-b.building .mslot{outline-color:rgba(22,21,20,.22)}

/* ============================ NARROW CANVAS (phones) ============================ */
.hiw-stage.narrow .hiw-canvas{width:440px;height:640px}
.hiw-stage.narrow[data-beat="0"] .hiwph{transform:translate(-90px,26px) scale(1);opacity:1}
.hiw-stage.narrow[data-beat="1"] .hiwph{transform:translate(-156px,196px) scale(.42);opacity:1}
.hiw-stage.narrow[data-beat="1"] .hiwph.out{transform:translate(-196px,300px) scale(.36);opacity:0}
.hiw-stage.narrow[data-beat="2"] .hiwph{transform:translate(9px,780px) scale(.3);opacity:0}
.hiw-stage.narrow[data-beat="1"] .hf-a.up{left:8px;top:104px;width:210px;height:250px}
.hiw-stage.narrow[data-beat="1"] .hf-b.up{left:226px;top:104px;width:210px;height:250px}
.hiw-stage.narrow[data-beat="2"] .hf-a{left:8px;top:104px;width:210px;height:250px}
.hiw-stage.narrow[data-beat="2"] .hf-b{left:226px;top:104px;width:210px;height:250px}
.hiw-stage.narrow[data-beat="2"] .hf-a.big{left:14px;top:60px;width:412px;height:452px;z-index:8}
.hiw-stage.narrow .hf-tag{font-size:8px;top:-15px}
.hiw-stage.narrow .hf-live{top:-16px;font-size:8px;padding:3px 7px}
.hiw-stage.narrow .hf-pick{height:22px;font-size:9px;bottom:-27px}
.hiw-stage.narrow .hiw-note{left:14px;right:14px;bottom:22px}

/* ---------- extra sections, so the final scroll has more site to reveal ---------- */
.mrev{padding:1em .9em 1.2em}
.mrev h4,.mcta h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6em;
  text-transform:uppercase;margin-top:.25em;line-height:1}
.mcta h4 i{font-style:normal}
.mrgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55em;margin-top:.8em}
.mrcard{padding:.7em .65em;display:flex;flex-direction:column;gap:.45em}
.mstars{font-size:.66em;letter-spacing:.14em;line-height:1}
.mrcard p{font-size:.66em;line-height:1.5;margin:0}
.mrwho{display:flex;align-items:center;gap:.4em;margin-top:auto}
.mg{width:1.25em;height:1.25em;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.7em;border-radius:50%}
.mrwho b{font-size:.62em;font-weight:600}
.mcta{padding:1.1em .9em 1.4em}
.mctarow{display:flex;gap:1em;margin-top:.85em}
.mctarow div{flex:1;min-width:0}
.mctarow b{display:block;font-family:'JetBrains Mono',monospace;font-size:.52em;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500}
.mctarow span{display:block;font-size:.66em;margin-top:.25em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtn2{display:inline-block;margin-top:1em;font-weight:700;font-size:.72em;padding:.75em 1.3em;
  letter-spacing:.08em;text-transform:uppercase}

/* dark mold */
.mini-a .mrev{background:#0d0c0a;border-top:1px solid rgba(242,162,12,.16)}
.mini-a .mrev h4,.mini-a .mcta h4{color:#f7f4ee}
.mini-a .mcta h4 i{color:#f2a20c}
.mini-a .mrcard{background:#14120f;border:1px solid rgba(247,244,238,.08);border-left:2px solid #f2a20c}
.mini-a .mstars{color:#f2a20c}
.mini-a .mrcard p{color:#8a8378}
.mini-a .mg{background:#f2a20c;color:#0d0c0a}
.mini-a .mrwho b{color:#f7f4ee}
.mini-a .mcta{background:#14120f;border-top:1px solid rgba(242,162,12,.16)}
/* the estimate block carries the beat's pause, so it gets room to breathe */
.mini-a .mcta[data-t]{padding:1.5em .9em 1.75em}
.mini-a .mctarow b{color:#f2a20c}
.mini-a .mctarow span{color:#f7f4ee}
.mini-a .mbtn2{background:#f2a20c;color:#0d0c0a}

/* light mold */
.mini-b .mrev{background:#fff;border-top:1px solid #E4DFD6}
.mini-b .mrev h4,.mini-b .mcta h4{color:#161514}
.mini-b .mcta h4 i{color:#F2A20C}
.mini-b .mrcard{background:#F6F4EF;border:1px solid #E4DFD6}
.mini-b .mstars{color:#F2A20C}
.mini-b .mrcard p{color:#5B564F}
.mini-b .mg{background:#161514;color:#F2A20C}
.mini-b .mrwho b{color:#161514}
.mini-b .mcta{background:#2E3742}
.mini-b .mcta h4{color:#fff}
.mini-b .mctarow b{color:#F2A20C}
.mini-b .mctarow span{color:#E6EAEE}
.mini-b .mbtn2{background:#F2A20C;color:#161514}
.mini-a .mrev .meye2,.mini-a .mcta .meye2{font-family:'JetBrains Mono',monospace;font-size:.62em;
  letter-spacing:.24em;text-transform:uppercase;color:#f2a20c}
.mini-b .mrev .meye2{font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.22em;
  text-transform:uppercase;color:#5B564F}
.mini-b .mcta .meye2{font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.22em;
  text-transform:uppercase;color:#F2A20C}

/* ============================================================================
   HOW IT WORKS  ·  site A, the rest of the Caliche Creek page.
   Added so the step 03 finale scrolls a finished product instead of a stub.
   Dark mold tokens only, the same ones the sections above already use.
   ========================================================================== */
.mini-a .mba .meye2,.mini-a .mwhy .meye2,.mini-a .mabout .meye2{
  font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.24em;
  text-transform:uppercase;color:#f2a20c}
.mini-a .mba h4,.mini-a .mwhy h4,.mini-a .mabout h4{
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  color:#f7f4ee;margin-top:.25em;line-height:1}
.mini-a .mba h4 i,.mini-a .mwhy h4 i,.mini-a .mabout h4 i{font-style:normal;color:#f2a20c}
/* These photos never join a flight, so they carry their own class instead of
   .mslot, which starts at opacity 0 on purpose and is driven by setBuilt(). */
.mini-a .mphoto{display:block;width:100%;height:100%;object-fit:cover}

/* ---- 02 the proof ---- */
.mini-a .mba{padding:1.1em .9em 1.3em;background:#100f0c;border-top:1px solid rgba(242,162,12,.16)}
.mini-a .mba .meye2{display:block;text-align:center}
.mini-a .mba h4{font-size:1.6em;text-align:center}
.mini-a .mbawrap{position:relative;aspect-ratio:16/9;margin-top:.85em;overflow:hidden;background:#14120f}
.mini-a .mbapane{position:absolute;inset:0}
.mini-a .mbapane-b{clip-path:inset(0 0 0 50%)}
.mini-a .mbatag{position:absolute;left:.5em;top:.5em;font-family:'JetBrains Mono',monospace;
  font-size:.5em;letter-spacing:.18em;text-transform:uppercase;padding:.35em .6em;
  background:rgba(13,12,10,.82);color:#f7f4ee}
.mini-a .mbatag-r{left:auto;right:.5em}
.mini-a .mbahandle{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#f2a20c}
.mini-a .mbahandle i{position:absolute;left:50%;top:50%;display:block;width:1.5em;height:1.5em;
  margin:-.75em 0 0 -.75em;background:#f2a20c}
.mini-a .mbacap{margin-top:.7em;text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:.55em;letter-spacing:.1em;text-transform:uppercase;color:#8a8378}

/* ---- 03 why caliche creek ---- */
.mini-a .mwhy{display:grid;grid-template-columns:.86fr 1fr;gap:1.1em;align-items:center;
  padding:1.3em .9em 1.4em;background:#0d0c0a;border-top:1px solid rgba(247,244,238,.08)}
.mini-a .mwart{position:relative;aspect-ratio:4/3}
.mini-a .mwbig{position:absolute;inset:0}
.mini-a .mwbadge{position:absolute;right:-.45em;bottom:-.55em;background:#f2a20c;color:#0d0c0a;
  padding:.5em .75em;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.5em;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.25}
.mini-a .mwbadge b{display:block;font-family:'Space Grotesk',sans-serif;font-size:2.1em;line-height:1}
.mini-a .mwhy h4{font-size:1.5em}
.mini-a .mwrow{display:flex;gap:.55em;margin-top:.85em}
.mini-a .mwtick{position:relative;flex:0 0 auto;width:.85em;height:.85em;margin-top:.2em;border:1px solid #f2a20c}
.mini-a .mwtick:after{content:"";position:absolute;left:50%;top:50%;width:.32em;height:.32em;
  margin:-.16em 0 0 -.16em;background:#f2a20c}
.mini-a .mwrow b{display:block;font-size:.72em;font-weight:700;color:#f7f4ee}
.mini-a .mwrow p{margin:.25em 0 0;font-size:.62em;line-height:1.5;color:#8a8378}

/* ---- 05 our story ---- */
.mini-a .mabout{display:grid;grid-template-columns:1fr .78fr;gap:1.1em;align-items:center;
  padding:1.3em .9em 1.5em;background:#100f0c;border-top:1px solid rgba(242,162,12,.16)}
.mini-a .mabout h4{font-size:1.5em}
.mini-a .mabcopy p{margin-top:.6em;font-size:.64em;line-height:1.6;color:#8a8378}
.mini-a .mabcheck{display:flex;align-items:flex-start;gap:.45em;margin-top:.45em;font-size:.62em;color:#f7f4ee}
.mini-a .mabcheck i{flex:0 0 auto;width:.7em;height:.7em;margin-top:.28em;background:#f2a20c}
.mini-a .mabbtn{display:inline-block;margin-top:.95em;border:1px solid #f2a20c;color:#f2a20c;
  font-family:'JetBrains Mono',monospace;font-size:.56em;letter-spacing:.14em;
  text-transform:uppercase;padding:.6em 1em}
.mini-a .mabart{position:relative;aspect-ratio:3/4}
.mini-a .mabart .mphoto{position:absolute;inset:0}

/* ---- 06 the estimate form, built to match the real demo's contact section ---- */
.mini-a .mctin{display:grid;grid-template-columns:1fr 1.15fr;gap:1.1em;margin-top:.95em;align-items:start}
.mini-a .mctitem{display:flex;gap:.55em;margin-bottom:.9em}
.mini-a .mctitem>i{position:relative;flex:0 0 auto;width:1.5em;height:1.5em;border:1px solid rgba(242,162,12,.34)}
.mini-a .mctitem>i:after{content:"";position:absolute;left:50%;top:50%;width:.4em;height:.4em;
  margin:-.2em 0 0 -.2em;background:#f2a20c}
.mini-a .mctitem b{display:block;font-family:'JetBrains Mono',monospace;font-size:.52em;
  letter-spacing:.14em;text-transform:uppercase;color:#f2a20c}
.mini-a .mctitem span{display:block;font-size:.64em;line-height:1.45;color:#f7f4ee;margin-top:.28em}
.mini-a .mform{display:flex;flex-wrap:wrap;gap:.58em}
.mini-a .mfield{display:block;flex:1 1 0;min-width:0;background:#0d0c0a;
  border:1px solid rgba(247,244,238,.13);padding:.82em .75em;font-size:.62em;line-height:1.3;
  color:#6b655c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-a .mfield.full{flex:1 1 100%}
.mini-a .msel{position:relative;padding-right:1.7em}
.mini-a .msel>i{position:absolute;right:.7em;top:50%;margin-top:-.14em;
  border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.34em solid #6b655c}
.mini-a .mta{height:4.3em;white-space:normal}
.mini-a .mform .mbtn2{flex:1 1 100%;margin-top:.2em;padding:.95em 1.3em;text-align:center}

/* ---- footer ---- */
.mini-a .mfoot{position:relative;overflow:hidden;padding:1.5em .9em 0;background:#0d0c0a;
  border-top:1px solid rgba(242,162,12,.16)}
.mini-a .mfmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3.5em;
  line-height:.88;text-transform:uppercase;color:rgba(247,244,238,.055);white-space:nowrap;
  letter-spacing:.005em;margin-bottom:-.08em}
.mini-a .mfcols{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.6fr;
  gap:.9em;padding-top:1em}
.mini-a .mfcols>div>b{display:block;font-family:'JetBrains Mono',monospace;font-size:.52em;
  letter-spacing:.18em;text-transform:uppercase;color:#f2a20c;margin-bottom:.5em}
.mini-a .mfcols>div>span{display:block;font-size:.6em;line-height:1.75;color:#8a8378;
  overflow:hidden;text-overflow:ellipsis}
.mini-a .mfcols>.mfbrand b{font-family:'Space Grotesk',sans-serif;font-size:.95em;
  letter-spacing:.02em;color:#f7f4ee;margin-bottom:0}
.mini-a .mfbrand small{display:block;font-family:'JetBrains Mono',monospace;font-size:.5em;
  letter-spacing:.3em;color:#f2a20c}
.mini-a .mfbrand p{margin-top:.55em;font-size:.6em;line-height:1.6;color:#8a8378}
.mini-a .mfbar{display:flex;justify-content:space-between;gap:1em;margin-top:1.2em;padding:.8em 0;
  border-top:1px solid rgba(247,244,238,.08);font-family:'JetBrains Mono',monospace;
  font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:#5c564e}

/* ============================================================================
   HOW IT WORKS  ·  landing page tuning. Added at merge time, not in the mockup.
   ========================================================================== */
/* Skip layout and paint for the whole block until it is near the viewport. The
   remembered size keeps the scrollbar honest after the first pass. Three
   blocks side by side make the section taller than the old pinned version, so
   the guess is bigger too. */
#hiw{content-visibility:auto;contain-intrinsic-size:auto 2225px}
/* Two of the three stages are empty until boot fills them from the first one.
   The ratio holds their space so the page does not jump when they land. An
   explicit height from fit() overrides this the moment it is set. */
.hiw-stage{aspect-ratio:31/30}
/* One CTA under the last block. It sits outside the blocks on purpose: each
   block is a plain container now, but keeping the button out of them means the
   section still ends on a single call to action rather than three. */
.hiw-cta{margin-top:4px;padding-top:26px;border-top:1px solid var(--hairline-dark,rgba(201,205,211,.16))}

/* ===== straight answers ============================================
   Sits between the last how-it-works CTA and the form on purpose, and stays
   grid-dark rather than switching to a light band: a hard contrast change
   right before the form would read as a new page and give people somewhere
   to stop. Three questions, no accordion. Everything here is a fact the page
   did not state anywhere else. ==================================== */
@media(max-width:759px){.faq{padding:40px 0 4px}.faq-row h3{font-size:17px}.faq-row p{font-size:15px}}


/* ---------- 27.12 Post-submit handoff -------------------- */
/* Two paths instead of a thank-you dead end. Ported from the ad LP. The chat
   is the recommended one because it is what actually gets the designers what
   they need; the phone is the alternative, not the fallback. */
.paths { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 30px; max-width: 720px; }
@media (min-width: 700px) { .paths { grid-template-columns: 1fr 1fr; gap: 14px; } }
.path {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  background: var(--ink-elevated);
  border: 1px solid #262626;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: var(--body-on-dark);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast);
}
.path:hover, .path:focus-visible { border-color: var(--signal-amber); outline: none; }
.path-band {
  display: block; padding: 9px 14px;
  border-bottom: 1px solid #262626;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.path-body { display: block; flex: 1; padding: 18px 14px 16px; }
.path-icon { display: block; width: 30px; height: 30px; color: var(--signal-amber); margin-bottom: 12px; }
.path-icon svg { width: 100%; height: 100%; display: block; }
.path h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.025em; color: var(--offwhite); margin: 0;
}
.path h4 .rec {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: 0; color: var(--signal-amber); white-space: nowrap;
}
.path p { font-size: 14px; line-height: 1.55; margin-top: 8px; display: none; }
.path-foot {
  display: block; padding: 11px 14px; border-top: 1px solid #262626;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-amber);
  white-space: nowrap;
}
.path-foot .foot-x { display: none; color: var(--muted-on-dark); }
@media (min-width: 700px) {
  .path p { display: block; }
  .path-foot .foot-x { display: inline; }
  .path-body { padding: 22px 18px 18px; }
  .path-band, .path-foot { padding-left: 18px; padding-right: 18px; }
  .path h4 { font-size: 21px; }
  .path-icon { width: 34px; height: 34px; }
}
.calling { max-width: 560px; animation: sPanel 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.calling[hidden] { display: none; }
.calling h2 { color: var(--offwhite); }
.calling .lead { margin-top: 14px; color: var(--body-on-dark); font-size: 17px; }
.h-alt {
  background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  color: var(--signal-amber); text-align: left;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  border-bottom: 1px solid rgba(245, 165, 36, 0.42);
}
.h-alt:hover { border-bottom-color: var(--signal-amber); }
@media (prefers-reduced-motion: reduce) { .calling { animation: none; } }