/* ============================================================================
   FERRUCO MARKETING landing page stylesheet
   Built on the Pinovio base system. Brand layer swapped at the Phase 1 gate.

   Brand layer decisions:
     Display  Archivo        the typeface the logo itself is set in
     Body     Hanken Grotesk warm humanist, reads right for trades
     Mono     Geist Mono     indices + eyebrow labels only
     Accent   #C9A227 gold from the logo kit (7.85:1 on the charcoal, AAA)
     Vibe     medium weight / SHARP radius / cool-dark canvas / light annotation
   ========================================================================== */

/* ============================================================================
   1. BRAND LAYER
   ========================================================================== */
:root {
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Gold ramp derived from the mark. --accent-300 is the lockup's own
     "MARKETING" gold, so the tints stay inside the identity. */
  --accent-050: #fbf7ea;
  --accent-100: #f3e7bd;
  --accent-300: #e0bc5b;
  --accent-500: #c9a227;
  --accent-600: #ab8a1d;
  --accent-700: #866a15;
  --accent-soft: color-mix(in srgb, var(--accent-500) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent-500) 40%, transparent);

  /* The mark's lower bars. Structural only, at 3.55:1 on the charcoal it is
     never used for text. See --d-muted for readable secondary copy. */
  --brand-grey: #6a6a72;

  /* Dark side, the page's home. Charcoal from the logo kit, not pure black. */
  --d-bg:        #111114;
  --d-surface:   #17171d;
  --d-surface-2: #1f1f27;
  --d-text:      #f5f4f1;
  --d-muted:     #9a9aa2;
  --d-line:      color-mix(in srgb, #9a9aa2 20%, transparent);

  /* Light side, one warm off-white section for pace. Never pure white. */
  --l-bg:        #f7f5f0;
  --l-surface:   #fcfaf5;
  --l-surface-2: #efebe2;
  --l-text:      #16161a;
  --l-muted:     #5c5c64;
  --l-line:      #e3ded3;
}

/* ============================================================================
   1.5 VIBE LAYER
   ========================================================================== */
:root {
  --display-weight: 600;          /* matches the wordmark's own weight */
  --btn-radius: 2px;              /* SHARP, the mark is hard rectangles */
}

/* ============================================================================
   2. SYSTEM LAYER — brand-agnostic craft. Leave the structure intact.
   ========================================================================== */
:root {
  /* --- Type scale (Major third, 1.25). Use TOKENS, never raw rem/px. ----- */
  --step--2: 0.694rem;   /* 11px — micro labels, legal */
  --step--1: 0.833rem;   /* 13px — captions, fine print */
  --step-0:  1.0625rem;  /* 17px — body (reads warmer than 16 for marketing) */
  --step-1:  1.25rem;    /* 20px — lead paragraph */
  --step-2:  1.5rem;     /* 24px — card titles, small headings */
  --step-3:  clamp(1.75rem, 2.4vw, 2.1rem);   /* section headings */
  --step-4:  clamp(2.25rem, 4vw, 3rem);       /* page headings */
  --step-5:  clamp(2.9rem, 5.6vw, 5rem);      /* hero display */
  --step-6:  clamp(3.6rem, 8vw, 6rem);        /* oversize hero */

  --leading-solid:  0.95;   /* hero display at step-5/6 — award-tier is 0.88–1.05 */
  --leading-tight:  1.08;   /* large headings */
  --leading-snug:   1.2;
  --leading-normal: 1.6;    /* body */
  --tracking-display: -0.025em; /* step-5/6 display wants -2%…-3% */
  --tracking-tight: -0.02em;   /* large headings */
  --tracking-wide:  0.08em;    /* uppercase eyebrows/labels */

  /* --- Spacing (4px base on an 8px rhythm). Every gap comes from here. ---- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96  — section breathing room */
  --space-10: 8rem;    /* 128 — hero / big section */

  /* --- Radius — a SCALE, not one value. Uniform radius reads templated. --- */
  --radius-xs:   2px;    /* inputs, small chips */
  --radius-sm:   2px;    /* buttons, small cards */
  --radius-md:   3px;   /* cards */
  --radius-lg:   4px;   /* feature panels */
  --radius-xl:   6px;   /* hero panels, large media */
  --radius-pill: 999px;  /* pills, nav chips */

  /* --- Shadows — subtle + LAYERED (border-first à la Linear/Vercel).
     No single big blurry drop (0 28px 68px …) — that's the 2019 Bootstrap tell.
     Prefer a hairline border for resting state; use shadow for elevation only. */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06), 0 2px 6px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 12px 28px rgba(16,24,40,0.06);
  --shadow-lg: 0 8px 24px rgba(16,24,40,0.10), 0 24px 48px rgba(16,24,40,0.08);

  /* --- Motion tokens — one vocabulary, reused. ---------------------------- */
  --dur-fast: 150ms;   /* press feedback, small state changes */
  --dur:      220ms;   /* default transition */
  --dur-slow: 420ms;   /* reveals, larger moves */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* the workhorse */
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); /* playful entrances */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* --- Layout ------------------------------------------------------------- */
  --container: 1760px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --measure: 62ch;   /* max body line length */
}


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--d-text);
  background: var(--d-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--display-weight);   /* vibe axis 1 — see VIBE LAYER */
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 {
  font-size: var(--step-5);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
}
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

p  { margin: 0 0 var(--space-4); max-width: var(--measure); }
a  { color: var(--accent-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / kicker — uppercase, tracked, mono-ish. Big "not-AI" signal. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-600);
  margin: 0 0 var(--space-3);
}

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

/* Sections breathe. Vary the rhythm — don't make every section the same height. */
.section        { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--tall  { padding-block: var(--space-10); }

/* Dark/light section skins (Option B: dark hero → light content) */
.section--dark  { background: var(--d-bg);  color: var(--d-text); }
.section--dark .eyebrow { color: var(--accent-300); }
.section--dark a { color: var(--accent-300); }


/* ---------------------------------------------------------------------------
   Buttons — variants + sizes + real states. ONE system, reused everywhere.
   Do NOT locally override .btn per page (that's how the site drifted before).
   ------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.75rem;
  --btn-px: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--btn-radius);   /* vibe axis 2 — see VIBE LAYER */
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
/* Press feedback: quick scale-down reads instant + tactile (Emil Kowalski). */
.btn:active { transform: scale(0.97); }

/* Accessible focus ring on keyboard nav only. */
.btn:focus-visible,
a:focus-visible,
.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.btn--sm { --btn-py: 0.5rem;  --btn-px: 0.875rem; font-size: var(--step--1); }
.btn--lg { --btn-py: 0.95rem; --btn-px: 1.6rem;   font-size: var(--step-1); }
.btn--pill { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }

/* Primary — the ONE clear action per section. */
.btn--primary {
  background: var(--accent-500);
  color: #f7faff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary — supporting action. Border-first, not a second loud fill. */
.btn--secondary {
  background: var(--accent-soft);
  color: var(--accent-700);
  border-color: color-mix(in srgb, var(--accent-500) 24%, transparent);
}
.btn--secondary:hover {
  background: color-mix(in srgb, var(--accent-500) 18%, transparent);
  transform: translateY(-1px);
}

/* Ghost — tertiary / low-emphasis. */
.btn--ghost {
  background: transparent;
  color: var(--l-text);
  border-color: var(--l-line);
}
.btn--ghost:hover {
  background: var(--l-surface-2);
  border-color: color-mix(in srgb, var(--l-text) 20%, transparent);
}
.section--dark .btn--ghost { color: var(--d-text); border-color: var(--d-line); }
.section--dark .btn--ghost:hover { background: var(--d-surface-2); }


/* ---------------------------------------------------------------------------
   Cards — hairline border + subtle layered shadow, hover lift. Not a big blur.
   ------------------------------------------------------------------------- */
.card {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent-500) 22%, transparent);
}
/* Lit surface: a 1px top highlight so the card catches light. */
.card--lit { position: relative; }
.card--lit::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, #fff 70%, transparent), transparent);
  border-radius: inherit;
}

.section--dark .card {
  background: var(--d-surface);
  border-color: var(--d-line);
  box-shadow: none;
}
.section--dark .card:hover { background: var(--d-surface-2); }


/* ---------------------------------------------------------------------------
   Forms — inputs share the radius/focus system.
   ------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--l-muted);
}
.input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--l-text);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.input:focus { outline: none; border-color: var(--accent-500); }
.input[aria-invalid="true"] { border-color: #e5484d; }
.field__error { color: #e5484d; font-size: var(--step--1); }


/* ---------------------------------------------------------------------------
   Media frames — media is never naked. Every reference site (8/8, 2026-07
   Awwwards audit) sets photography/video/canvas inside a framed container
   inset on the canvas, not raw edge-to-edge. Radius follows the vibe axis.
   ------------------------------------------------------------------------- */
.media-frame {
  --media-radius: var(--radius-xl);   /* sharp vibe: 2px · round vibe: keep */
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  border: 1px solid var(--l-line);
  background: var(--l-surface-2);
}
.section--dark .media-frame { border-color: var(--d-line); background: var(--d-surface); }
.media-frame > img,
.media-frame > video,
.media-frame > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ---------------------------------------------------------------------------
   Annotation kit — the "engineered" layer that separates award-tier pages
   from clean-but-flat ones: numbered indices, ruler lines, corner HUD
   details, typographic utility links. Use per chrome-density axis: minimal
   pages take .index only; HUD-dense pages use the full kit. Never half-HUD.
   ------------------------------------------------------------------------- */

/* Numbered index — "01", "02" beside section titles / cards / nav items. */
.index {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-600);
}
.section--dark .index { color: var(--accent-300); }

/* Ruler line — full-width dotted rule with labels at each end.
   <div class="annot-line"><span>PRODUCT 01</span><span>NAME</span></div>   */
.annot-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--l-muted);
}
.annot-line > span { flex: none; }
.annot-line::after {
  content: '';
  flex: 1;
  order: 1;
  border-top: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.annot-line > span:last-child { order: 2; }
.section--dark .annot-line { color: var(--d-muted); }

/* Corner HUD label — tiny mono caps pinned to a corner of a relative parent.
   The device behind Elva's credits, Sakazuki's clock, Balmoral's season.   */
.hud-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--l-muted);
  margin: var(--space-5);
}
.hud-corner--tl { top: 0; left: 0; }
.hud-corner--tr { top: 0; right: 0; text-align: right; }
.hud-corner--bl { bottom: 0; left: 0; }
.hud-corner--br { bottom: 0; right: 0; text-align: right; }
.section--dark .hud-corner { color: var(--d-muted); }

/* Typographic utility link — "(X)" "(IG)" instead of icon buttons. */
.txt-link {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.txt-link::before { content: '('; }
.txt-link::after  { content: ')'; }
.txt-link:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------------------------------------------------------------------------
   Grain — film-grain overlay for any large flat field (hero, CTA, dark
   sections). Every audited site textures its flat areas; untextured flat
   dark = the "cheap" tell. ~4% opacity: felt, not seen.
   ------------------------------------------------------------------------- */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   CTA affordance — trailing arrow-in-circle. A filled/outlined circle with
   an arrow after the label out-converts a bare text button and reads crafted.
   <a class="btn btn--primary">Book a call <span class="btn__circle">→</span></a>
   ------------------------------------------------------------------------- */
.btn__circle {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 0.85em;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__circle { transform: translateX(2px); }


/* ---------------------------------------------------------------------------
   Motion — scroll reveals DEFAULT-ON via native CSS scroll-driven animation.
   Zero JS. Any page that links this file gets motion (fixes "6 pages had none").
   Progressive: browsers without support just show content (no broken state).
   ------------------------------------------------------------------------- */
.reveal { opacity: 1; }   /* fallback: fully visible if no scroll-timeline */

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  /* Vary the axis/timing so it doesn't read as one repeated fade-up. */
  .reveal--left  { transform: translateX(-24px); }
  .reveal--right { transform: translateX(24px); }
  .reveal--scale { transform: scale(0.96); }
  .reveal[data-delay="1"] { animation-range: entry 10% cover 35%; }
  .reveal[data-delay="2"] { animation-range: entry 15% cover 40%; }
  .reveal[data-delay="3"] { animation-range: entry 20% cover 45%; }
}
@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}

/* Hover-lift utility for any element that should confirm interactivity. */
.lift { transition: transform var(--dur) var(--ease-out); }
.lift:hover { transform: translateY(-2px); }


/* ---------------------------------------------------------------------------
   Accessibility — reduced motion kills ALL of the above cleanly.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================================================
   3. PAGE LAYER, Ferruco landing page components
   ========================================================================== */

/* Archivo carries a width axis. The hero uses it expanded so the display voice
   is distinct from body copy without pulling in a fourth typeface. */
h1, .display-wide { font-stretch: 112%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-500); color: #111114;
  padding: var(--space-3) var(--space-5); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Nav: logo chip + single CTA (pattern d). Not logo-left-links-right. --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--d-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-4);
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand svg { display: block; width: 26px; height: 26px; flex: none; }
.brand__text { display: grid; gap: 1px; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0); letter-spacing: 0.06em; color: var(--d-text);
}
.brand__sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.32em; color: var(--accent-300);
}

/* --- Buttons: gold fill takes charcoal text. White on gold is 1.9:1. ------ */
.btn--primary {
  background: var(--d-text); color: #111114;
  box-shadow: none; border-color: var(--d-text);
  font-weight: 700; letter-spacing: 0.01em;
}
.btn--primary:hover {
  background: #ffffff; border-color: #ffffff;
  transform: translateY(-1px); box-shadow: none;
}
.btn--quiet {
  background: transparent; color: var(--d-text);
  border-color: color-mix(in srgb, var(--d-text) 24%, transparent);
}
.btn--quiet:hover { border-color: var(--accent-500); color: var(--accent-300); }

/* --- Hero: left statement, asset void right (recipe 1). ------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-9) var(--space-8); }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--accent-500) 4%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, #000 30%, transparent));
}
.hero__grid {
  position: relative; display: grid; gap: var(--space-8);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
}
.hero h1 { margin-bottom: var(--space-5); }
.hero__lede {
  font-size: var(--step-1); color: var(--d-muted);
  max-width: 52ch; margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero__note {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--d-muted); margin: var(--space-4) 0 0;
  max-width: 44ch; text-wrap: balance;
}

/* --- Signature moment: the lead trace. A labelled schematic, not a fake UI. */
.trace {
  position: relative; border: 1px solid var(--d-line);
  background: linear-gradient(180deg, var(--d-surface), var(--d-bg));
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6) var(--space-6);
}
.trace__head {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--d-muted); margin-bottom: var(--space-6);
}
.trace__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.trace__row { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); }
/* The rail is drawn per-row so it stops cleanly at the final node. */
.trace__row:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 22px; bottom: calc(var(--space-5) * -1 - 2px);
  width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--d-text) 40%, transparent), color-mix(in srgb, var(--d-text) 12%, transparent));
}
.trace__node { position: relative; width: 28px; height: 20px; display: grid; place-items: center; }
.trace__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--d-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-text) 12%, transparent);
}
.trace__check { display: block; width: 16px; height: 16px; color: var(--d-text); }
.trace__label { display: block; color: var(--d-text); font-weight: 500; margin: 3px 0 0; }

/* --- Why us --------------------------------------------------------------- */
.why { background: var(--l-bg); color: var(--l-text); padding-block: var(--space-8); }
.why h2 { color: var(--l-text); }
.why__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .why__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-9); align-items: start;
  }
}
.why__head h2 { margin-bottom: 0; }
.why__story p:last-child { margin-bottom: 0; }
.why__story p { color: var(--l-text); max-width: 70ch; }
/* --- Final CTA ------------------------------------------------------------ */
.close { position: relative; overflow: hidden; text-align: left; padding-block: var(--space-8); }
.close::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 80% 100%, color-mix(in srgb, var(--accent-500) 5%, transparent), transparent 70%);
}
.close__inner { position: relative; max-width: 50ch; margin-top: var(--space-5); }
/* The closing CTA is the last thing they read; at full width a section
   heading was too small to carry it. */
.close h2 {
  font-size: var(--step-5);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  font-stretch: 108%;
}
.close .annot-line { position: relative; }

/* --- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--d-line); padding-block: var(--space-7); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5);
}
.footer__links { display: flex; gap: var(--space-5); }
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--d-muted);
  transition: color var(--dur) var(--ease-out);
}
.social:hover { color: var(--d-text); }
.social svg { width: 20px; height: 20px; display: block; }
.footer__legal { font-family: var(--font-mono); font-size: var(--step--2); color: var(--d-muted); margin: 0; letter-spacing: 0.04em; }

/* --- Motion: distinct entrance per role, not one recipe everywhere. ------- */
@supports (animation-timeline: view()) {
}

/* The hero trace draws itself once on load, the page's one autoplay moment.
   The rail extends downward first, then the node it arrives at lands, then
   the label. Nothing pops in as a whole block. */
.trace__row:not(:last-child)::before {
  transform: scaleY(0);
  transform-origin: top;
  animation: rail-draw 420ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.trace__node > * {
  transform: scale(0);
  opacity: 0;
  animation: node-land 380ms var(--ease-out) forwards;
}
.trace__row > span:last-child {
  opacity: 0;
  animation: label-in 460ms var(--ease-out) forwards;
}

/* Each rail segment finishes exactly as the next node lands. */
.trace__row:nth-child(1) .trace__node > *  { animation-delay: 200ms; }
.trace__row:nth-child(1) > span:last-child { animation-delay: 300ms; }
.trace__row:nth-child(1)::before           { animation-delay: 480ms; }

.trace__row:nth-child(2) .trace__node > *  { animation-delay: 900ms; }
.trace__row:nth-child(2) > span:last-child { animation-delay: 1000ms; }
.trace__row:nth-child(2)::before           { animation-delay: 1160ms; }

.trace__row:nth-child(3) .trace__node > *  { animation-delay: 1580ms; }
.trace__row:nth-child(3) > span:last-child { animation-delay: 1680ms; }
.trace__row:nth-child(3)::before           { animation-delay: 1840ms; }

.trace__row:nth-child(4) .trace__node > *  { animation-delay: 2260ms; }
.trace__row:nth-child(4) > span:last-child { animation-delay: 2360ms; }
.trace__row:nth-child(4)::before           { animation-delay: 2520ms; }

.trace__row:nth-child(5) .trace__node > *  { animation-delay: 2940ms; }
.trace__row:nth-child(5) > span:last-child { animation-delay: 3040ms; }

@keyframes rail-draw { to { transform: scaleY(1); } }
@keyframes node-land { to { transform: scale(1); opacity: 1; } }
@keyframes label-in  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .trace__row::before,
  .trace__node > *,
  .trace__row > span:last-child {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Tap targets: everything interactive clears 44px. The nav CTA is the
   primary mobile conversion action and was landing at 31px tall. ---------- */
.nav__inner { padding-block: var(--space-3); }
.nav .btn { min-height: 44px; }
.brand { min-height: 44px; }
.footer__links { gap: var(--space-1); }

/* --- Contrast corrections found by measuring rendered text ---------------- */

/* This page's default canvas is dark, but the base .annot-line colour is
   tuned for light sections, so it landed at 2.85:1 in the closing CTA. */
.annot-line { color: var(--d-muted); }

/* accent-600 gold measures 3.02:1 on the warm off-white, acceptable for
   large text, short of AA for 13px labels. The light section takes the
   deeper stop, which measures 4.71:1. */
.why .eyebrow { color: var(--l-muted); }

/* --- Hold the hero sequence until it is actually seen (mobile) -----------
   On mobile the panel sits below the fold, so the animation would finish
   before the visitor ever scrolls to it. `await-view` is added by JS, so
   with no JS nothing is held back and the sequence simply runs on load.
   That way the panel can never be stranded invisible. Desktop is untouched:
   the panel is above the fold there. */
@media (max-width: 899px) {
  .trace.await-view .trace__row::before      { animation: none; transform: scaleY(0); }
  .trace.await-view .trace__node > *         { animation: none; transform: scale(0); opacity: 0; }
  .trace.await-view .trace__row > span:last-child { animation: none; opacity: 0; }
}

/* --- Footer contact row --------------------------------------------------- */
.footer__contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--space-6);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.02em;
  margin-top: var(--space-2);
}
.footer__contact a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--d-muted); text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.footer__contact a:hover { color: var(--d-text); text-decoration: underline; text-underline-offset: 4px; }
.footer__base {
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--d-line);
}
.footer__base .footer__legal { margin: 0; }