/* The one stylesheet the layout imports (build specification 2026-10-10, section 7.2): tokens, fonts,
   base, components, motion, in that cascade order, emitted by Astro as one hashed file. Nothing is
   inlined, so the content policy can forbid inline style. *//* i-tecsol — "Signal Ground" foundation tokens (consult of 2026-10-10, FINAL section a, verbatim).
   Every ratio is WCAG 2.x relative-luminance contrast, recomputed per pair.
   Rule: a token may be used as text or as a meaningful boundary only on a
   background it is verified against in the comment beside it. */

:root {
  /* ---------- Families ---------- */
  --font-display: "Manrope Variable", Manrope, "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Inter Variable", Inter, "Inter Fallback", "Segoe UI", Arial, sans-serif;

  /* ---------- Type scale (phone values; desktop overrides below) ---------- */
  --t-label: 0.8125rem;  /* 13px, uppercase only, 0.08em, weight 700 */
  --t-small: 0.9375rem;  /* 15px */
  --t-ui:    1rem;       /* 16px */
  --t-body:  1.125rem;   /* 18px, phone and desktop */
  --t-lead:  1.1875rem;  /* 19px */
  --t-h4:    1.375rem;   /* 22px */
  --t-h3:    1.75rem;    /* 28px */
  --t-h2:    2.25rem;    /* 36px */
  --t-h1:    2.75rem;    /* 44px, interior pages */
  --t-hero:  3.25rem;    /* 52px, home hero */

  --lh-hero: 1.00; --lh-head: 1.08; --lh-sub: 1.20;
  --lh-lead: 1.50; --lh-body: 1.70; --lh-label: 1.25;
  --tr-head: -0.035em; --tr-label: 0.08em; --tr-word: -0.03em;
  --w-reg: 400; --w-med: 500; --w-ui: 620; --w-head: 720; --w-display: 780;

  /* ---------- Spacing ---------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
  --s-32: 8rem;   --s-40: 10rem;

  --chapter-pad: var(--s-20);      /* 80px phone */
  --gutter: 1.25rem;               /* 20px phone */
  --spine-w: 12px;                 /* chapter spine */
  --measure-body: 68ch;
  --measure-lead: 36ch;
  --w-reading: 51rem;  /* 816px */
  --w-wide: 80rem;     /* 1280px */
  --w-max: 96rem;      /* 1536px */
  --header-h: 9rem;            /* 144px phone: wordmark+controls row, two nav rows */
  --header-h-condensed: 7.5rem;/* 120px */
  --target: 2.75rem;           /* 44px */

  /* ---------- Radius ---------- */
  --r-1: 4px; --r-2: 10px; --r-3: 18px; --r-slab: 28px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  --d-xs: 160ms; --d-s: 240ms; --d-m: 420ms; --d-l: 520ms;
  --d-xl: 700ms; --d-xxl: 900ms; --d-hero: 1200ms; --d-trace: 1400ms;
  --stagger-1: 70ms; --stagger-2: 90ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-stage: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Elevation (decorative only; never a boundary) ---------- */
  --shadow-1: 0 2px 8px rgba(6, 5, 16, 0.08);
  --shadow-2: 0 18px 48px rgba(6, 5, 16, 0.14);
  --shadow-stage: 0 32px 80px rgba(0, 0, 0, 0.45);
}

/* ===================== LIGHT (default and explicit) ===================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-page:       #FBFAF6;
  --bg-surface:    #F3F1EB;
  --bg-band:       #E7E4F4;
  --bg-stage:      #0C0A1B;
  --bg-stage-deep: #060510;
  --bg-action:     #FFB54A;   /* brand constant, same in dark */
  --bg-field:      #FFFFFF;   /* form inputs */

  --ink:             #15122B; /* 17.4:1 page | 16.1:1 surface | 14.6:1 band */
  --ink-muted:       #4A4660; /*  8.6:1 page |  8.0:1 surface |  7.2:1 band */
  --ink-stage:       #F6F4FF; /* 18.0:1 stage | 18.6:1 stage-deep */
  --ink-stage-muted: #C6BFDE; /* 11.1:1 stage | 11.5:1 stage-deep */
  --ink-action:      #15122B; /* 10.4:1 on #FFB54A */

  --link:       #4A31C8; /* 7.8:1 page | 7.3:1 surface | 6.6:1 band; #FFFFFF on it 8.2:1 */
  --link-stage: #B4A6FF; /* 9.2:1 stage | 9.5:1 stage-deep */
  --accent:     #FFB54A; /* 1.7:1 on page — FILL ONLY on light surfaces; never text or border there */

  --border:        #787188; /* 4.5:1 page | 4.1:1 surface | 3.7:1 band | 4.7:1 field (≥3:1 ✓) */
  --border-strong: #55506A; /* 7.3:1 page */
  --border-stage:  #6E6796; /* 3.8:1 stage | 3.9:1 stage-deep (≥3:1 ✓) */
  --border-action: #15122B; /* 10.4:1 on action band */

  --success: #15664A; /* 6.6:1 page; #FFFFFF on it 6.9:1 */
  --danger:  #A4222E; /* 7.1:1 page; #FFFFFF on it 7.4:1 */
  /* No warning token exists: amber is an action, never an alert. */

  --focus:            #15122B; /* 17.4:1 page | 16.1:1 surface | 14.6:1 band | 10.4:1 action */
  --focus-stage:      #FFB54A; /* 11.1:1 stage | 11.5:1 stage-deep */
  --focus-halo:       #FBFAF6;
  --focus-halo-stage: #060510;

  --scrim-stage: linear-gradient(to top,
      #060510 0%, rgba(6,5,16,.95) 34%, rgba(6,5,16,.55) 68%, rgba(6,5,16,0) 100%);
  --scrim-side: linear-gradient(to right,
      #060510 0%, rgba(6,5,16,.88) 38%, rgba(6,5,16,.25) 70%, rgba(6,5,16,0) 100%);
}

/* ===================== DARK ===================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:       #0C0A1B;
  --bg-surface:    #161327;
  --bg-band:       #211C3A;
  --bg-stage:      #060510;
  --bg-stage-deep: #030208;
  --bg-action:     #FFB54A;
  --bg-field:      #161327;

  --ink:             #F6F4FF; /* 18.0:1 page | 16.7:1 surface | 14.9:1 band */
  --ink-muted:       #C6BFDE; /* 11.1:1 page | 10.3:1 surface |  9.2:1 band */
  --ink-stage:       #F6F4FF; /* 18.6:1 stage | 19.0:1 stage-deep */
  --ink-stage-muted: #C6BFDE; /* 11.5:1 stage | 11.8:1 stage-deep */
  --ink-action:      #15122B; /* 10.4:1 on #FFB54A */

  --link:       #B4A6FF; /* 9.2:1 page | 8.5:1 surface | 7.6:1 band; #15122B on it 8.5:1 */
  --link-stage: #B4A6FF; /* 9.5:1 stage */
  --accent:     #FFB54A; /* 11.1:1 page | 10.3:1 surface | 9.3:1 band — valid as text, border, fill */

  --border:        #7E76A0; /* 4.6:1 page | 4.3:1 surface & field | 3.9:1 band | 4.8:1 stage (≥3:1 ✓) */
  --border-strong: #A99FD0; /* 8.0:1 page */
  --border-stage:  #7E76A0; /* 4.8:1 stage | 5.0:1 stage-deep */
  --border-action: #15122B; /* 10.4:1 on action band */

  --success: #6FE0B4; /* 12.1:1 page */
  --danger:  #FF9AA6; /*  9.7:1 page */

  --focus:            #FFB54A; /* 11.1:1 page | 10.3:1 surface | 9.3:1 band */
  --focus-stage:      #FFB54A; /* 11.5:1 stage */
  --focus-halo:       #0C0A1B;
  --focus-halo-stage: #030208;

  --scrim-stage: linear-gradient(to top,
      #030208 0%, rgba(3,2,8,.95) 34%, rgba(3,2,8,.55) 68%, rgba(3,2,8,0) 100%);
  --scrim-side: linear-gradient(to right,
      #030208 0%, rgba(3,2,8,.88) 38%, rgba(3,2,8,.25) 70%, rgba(3,2,8,0) 100%);

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* ===================== SYSTEM DEFAULT (no stored choice) ===================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-page: #0C0A1B; --bg-surface: #161327; --bg-band: #211C3A;
    --bg-stage: #060510; --bg-stage-deep: #030208;
    --bg-action: #FFB54A; --bg-field: #161327;
    --ink: #F6F4FF; --ink-muted: #C6BFDE;
    --ink-stage: #F6F4FF; --ink-stage-muted: #C6BFDE; --ink-action: #15122B;
    --link: #B4A6FF; --link-stage: #B4A6FF; --accent: #FFB54A;
    --border: #7E76A0; --border-strong: #A99FD0; --border-stage: #7E76A0;
    --border-action: #15122B;
    --success: #6FE0B4; --danger: #FF9AA6;
    --focus: #FFB54A; --focus-stage: #FFB54A;
    --focus-halo: #0C0A1B; --focus-halo-stage: #030208;
    --scrim-stage: linear-gradient(to top,
        #030208 0%, rgba(3,2,8,.95) 34%, rgba(3,2,8,.55) 68%, rgba(3,2,8,0) 100%);
    --scrim-side: linear-gradient(to right,
        #030208 0%, rgba(3,2,8,.88) 38%, rgba(3,2,8,.25) 70%, rgba(3,2,8,0) 100%);
    --shadow-1: 0 2px 8px rgba(0,0,0,.5);
    --shadow-2: 0 18px 48px rgba(0,0,0,.6);
  }
}

/* ===================== Responsive scale ===================== */
@media (min-width: 48rem) {              /* 768px */
  :root {
    --t-lead: 1.375rem;  /* 22px */
    --t-h3: 2rem;        /* 32px */
    --t-h2: 3rem;        /* 48px */
    --t-h1: 4.5rem;      /* 72px */
    --t-hero: 6rem;      /* 96px */
    --gutter: 2rem;      /* 32px */
    --chapter-pad: var(--s-24);   /* 96px */
    --header-h: 5.5rem;           /* 88px single row */
    --header-h-condensed: 4rem;   /* 64px */
  }
}
@media (min-width: 90rem) {              /* 1440px */
  :root { --gutter: 3rem; --chapter-pad: var(--s-32); } /* 48px, 128px */
}

/* ===================== Motion gating ===================== */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --d-xs:1ms; --d-s:1ms; --d-m:1ms; --d-l:1ms; --d-xl:1ms;
    --d-xxl:1ms; --d-hero:1ms; --d-trace:1ms; --stagger-1:0ms; --stagger-2:0ms;
  }
}
[data-motion="reduced"] {
  --d-xs:1ms; --d-s:1ms; --d-m:1ms; --d-l:1ms; --d-xl:1ms;
  --d-xxl:1ms; --d-hero:1ms; --d-trace:1ms; --stagger-1:0ms; --stagger-2:0ms;
}
/* Self-hosted type, Latin subset only, served from this origin (the content policy allows no other).
   Manrope (display) and Inter (text), both variable; files in public/fonts/ (copied from Fontsource,
   consult of 2026-10-10, foundation section b). The two "Fallback" faces are Arial with its metrics
   adjusted to each web font (measured by scripts/font-fallbacks.mjs), so the swap from the fallback
   to the web font moves nothing. No monospace face anywhere. */
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Measured 2026-10-10: Manrope width 1.0064 x Arial, ascent 1.070em, descent 0.300em. */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 100.64%; ascent-override: 106.32%; descent-override: 29.81%; line-gap-override: 0%; }
/* Measured 2026-10-10: Inter width 1.0691 x Arial, ascent 0.970em, descent 0.240em. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.91%; ascent-override: 90.73%; descent-override: 22.45%; line-gap-override: 0%; }
/* i-tecsol - "Signal Ground" (consults of 2026-10-10: foundation and build specification).
   Near-black indigo stages carrying full-bleed imagery, warm paper chapters for reading, one amber
   action colour identical in both themes, Manrope for headings and Inter for text, motion that moves
   fields and images and never hides text. The cascade order is set in index.css. Nothing is inlined (astro.config inlineStylesheets: never),
   so the content policy can forbid inline code. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-page); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="reduced"] { scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg-page); color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-reg);
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: inherit; letter-spacing: var(--tr-head); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; font-weight: var(--w-display); }
h2 { font-size: var(--t-h2); line-height: var(--lh-head); font-weight: var(--w-head); letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.12; font-weight: var(--w-head); letter-spacing: -0.015em; }
h4 { font-size: var(--t-h4); line-height: var(--lh-sub); font-weight: var(--w-ui); letter-spacing: 0; }
p, ul, ol, dl, address, figure { margin: 0; }
address { font-style: normal; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
.stage a, .site-footer a, .site-header a { color: var(--link-stage); }
img, svg, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: var(--w-ui); }
::selection { background: var(--bg-action); color: var(--ink-action); }

/* focus: 3px ring and a halo in the ground's own colour, on every ground */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 2px; }
.stage :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-stage); box-shadow: 0 0 0 5px var(--focus-halo-stage); }
.cta :focus-visible { outline-color: var(--ink-action); box-shadow: 0 0 0 5px var(--bg-action); }

.container { width: min(100% - 2 * var(--gutter), var(--w-max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); background: var(--bg-action); color: var(--ink-action); border-radius: var(--r-2); font-weight: var(--w-ui); text-decoration: none; }
.skip-link:focus { left: 8px; }
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.header-spacer { height: var(--header-h-condensed); background: var(--bg-stage); }
main { display: block; }

/* ---------------------------------------------------------------- type roles */
.eyebrow { font-family: var(--font-text); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; line-height: var(--lh-label); color: var(--ink-muted); margin: 0 0 var(--s-4); }
.stage .eyebrow { color: var(--ink-stage-muted); }
.hero-lead, .lead { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: var(--measure-lead); }
.meta { font-size: var(--t-small); line-height: 1.55; color: var(--ink-muted); }
.prose { max-width: var(--measure-body); }
.prose p + p { margin-top: var(--s-5); }
.text-link { font-weight: var(--w-ui); display: inline-block; padding-block: 10px; }

.prose h2 { margin: 0 0 var(--s-5); }
.prose h2:not(:first-child) { margin-top: var(--s-12); }
.prose a { font-weight: var(--w-ui); }
/* Components, in the order a page meets them (build specification 2026-10-10, sections 3 to 5).
   Every colour comes from tokens.css; nothing is inlined. The structure the motions depend on (stage,
   stage media, scrims, spine, overtake, header bar height, operations rail geometry) lives in
   motion.css, verbatim from the specification; this file lays out everything around it. */

/* ---------------------------------------------------------------- header
   ADAPTED from the specification (section 4.1): the FINAL puts the lockup and both labelled controls on
   one 56px row at 390px, which measures wider than the 350px available. On a phone the header is
   therefore four rows (lockup, controls, two rows of three links) and is not fixed: it sits over the
   hero and scrolls away, so it never covers a fifth of the screen or a focused element at 200% zoom
   (WCAG 2.2, 2.4.11). From 768px it is fixed and condenses as specified: two rows up to 1359px, one
   row from 1360px. */
:root { --hdr-clear: 13.25rem; }                                  /* phone: room above the hero copy */
@media (min-width: 48rem) and (max-width: 84.99rem) { :root { --header-h: 7.25rem; --header-h-condensed: 6.25rem; } }
@media (min-width: 48rem) { :root { --hdr-clear: var(--header-h); } html { scroll-padding-top: calc(var(--header-h-condensed) + 16px); } }

.site-header { color: var(--ink-stage); }
@media (max-width: 47.99rem) { .site-header.site-header--static { position: relative; } .header-spacer { display: none; } }
.site-header__bar { padding-block: 8px; }
/* phone: row 1 lockup and Theme, row 2 Motion, rows 3 and 4 the six links */
.site-header__inner { height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "lockup theme" "motion motion" "nav nav"; row-gap: 4px; column-gap: 8px; align-content: center; }
.lockup { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.site-header .lockup { grid-area: lockup; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink-stage); text-decoration: none; justify-self: start; }
.lockup:hover .lockup__word { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
.lockup__mark { flex: none; width: 28px; height: 28px; }
.lockup__word { font-family: var(--font-display); font-weight: var(--w-display); font-size: 24px; letter-spacing: var(--tr-word); line-height: 1; }
.mark__node { fill: var(--accent); }
.site-header__prefs { display: contents; }
.site-header__prefs > .pref:first-child { grid-area: theme; justify-self: end; }
.site-header__prefs > .pref:last-child { grid-area: motion; justify-self: end; }
.site-nav { grid-area: nav; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6px; }
.site-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 2px; text-align: center; color: var(--ink-stage); text-decoration: none; font-weight: var(--w-ui); font-size: var(--t-ui); line-height: 1.15; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; text-decoration-color: var(--accent); }
html.motion-ok .site-nav a:active { transform: translateY(1px); }
@media (max-width: 22.4rem) { .lockup__word { font-size: 22px; } .site-nav a { font-size: var(--t-small); } }
@media (min-width: 48rem) {
  .site-header__bar { padding-block: 0; }
  .site-header__inner { grid-template-columns: auto 1fr; grid-template-areas: "lockup prefs" "nav nav"; row-gap: 0; }
  .site-header__prefs { display: flex; grid-area: prefs; }
  .site-header__prefs > .pref:first-child, .site-header__prefs > .pref:last-child { grid-area: auto; }
  .lockup__mark { width: 32px; height: 32px; }
  .lockup { gap: 10px; }
  .lockup__word { font-size: 27px; }
  .site-header__prefs { justify-self: end; flex-wrap: nowrap; gap: 12px; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .site-nav a { justify-content: flex-start; padding: 12px 0; }
}
@media (min-width: 85rem) {
  .site-header__inner { display: flex; align-items: center; gap: 24px; }
  .site-nav { margin-left: auto; }
  .site-nav ul { flex-wrap: nowrap; gap: 0 24px; }
}

/* the two controls (section 4.2) */
.pref { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--border-stage); border-radius: var(--r-pill); padding: 1px 1px 1px 10px; }
.pref__label { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-stage-muted); margin-right: 2px; white-space: nowrap; }
.pref__seg { min-width: 44px; min-height: 44px; padding: 0 9px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: transparent; color: var(--ink-stage); font-weight: var(--w-ui); font-size: var(--t-small); line-height: 1.25; cursor: pointer; }
.pref__seg:hover { border-color: var(--border-stage); }
.pref__seg[aria-pressed="true"] { background: var(--bg-action); color: var(--ink-action); }
@media (min-width: 48rem) { .pref { gap: 8px; padding: 2px 2px 2px 12px; } .pref__label { letter-spacing: var(--tr-label); } .pref__seg { padding: 0 14px; font-size: var(--t-ui); } }

/* ---------------------------------------------------------------- the hero stage */
.stage { color: var(--ink-stage); }
img[data-plate="s01"] { object-position: 58% 42%; }
img[data-plate="s02"] { object-position: 50% 40%; }
img[data-plate="s03"] { object-position: 62% 50%; }
img[data-plate="s04"], img[data-plate="s05"], img[data-plate="s06"], img[data-plate="s07"] { object-position: 60% 45%; }
img[data-plate="s08"] { object-position: 70% 45%; }
img[data-plate="s09"] { object-position: 62% 50%; }
/* phone: the copy fills the lower two thirds of the stage, so the scrim rises to meet its first line;
   the image reads in the band behind the header. Measured by scripts/text-over-image.mjs. */
@media (max-width: 47.99rem) {
  .stage .stage-scrim--header { background: linear-gradient(to top, var(--bg-stage-deep) 0%, rgba(6, 5, 16, .96) 62%, rgba(6, 5, 16, .9) 72%, rgba(6, 5, 16, .55) 84%, rgba(6, 5, 16, .62) 100%); }
}
@media (min-width: 48rem) { .hero--home img[data-plate="s01"] { object-position: 62% 50%; } .hero--compact img[data-plate="s08"] { object-position: 72% 50%; } }

.hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: max(100dvh, 720px); min-height: max(100svh, 720px); padding: var(--hdr-clear) 0 calc(32px + env(safe-area-inset-bottom)); }
.hero--page { min-height: max(86dvh, 760px); min-height: max(86svh, 760px); }
.hero--short { min-height: max(82dvh, 720px); min-height: max(82svh, 720px); }
.hero--compact { min-height: max(40dvh, 280px); min-height: max(40svh, 280px); padding-bottom: 56px; }
.hero--text { min-height: max(60dvh, 480px); min-height: max(60svh, 480px); }
.hero--notfound { min-height: max(70dvh, 520px); min-height: max(70svh, 520px); }
.hero-copy { display: grid; }
.hero .eyebrow { margin-bottom: var(--s-4); color: var(--ink-stage); }
.hero-h1 { font-size: var(--t-h1); line-height: 1.04; color: var(--ink-stage); }
.hero--home .hero-h1 { font-size: var(--t-hero); line-height: var(--lh-hero); }
.hero-lead { color: var(--ink-stage-muted); margin-top: var(--s-6); }
.hero-actions { margin-top: var(--s-6); }
.hero .text-link { color: var(--ink-stage); }
.hero-rule { margin-top: var(--s-5); }
@media (min-width: 48rem) {
  .hero { justify-content: center; padding: calc(var(--header-h) + 24px) 0 64px; }
  .hero--home { min-height: clamp(760px, 92svh, 980px); }
  .hero--page, .hero--short { min-height: 760px; }
  .hero--compact { min-height: max(40svh, 280px); padding-top: calc(var(--header-h) + 48px); padding-bottom: 56px; }
  .hero--text { min-height: 540px; }
  .hero--notfound { min-height: 630px; }
  .hero-copy { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero-copy > * { grid-column: 1 / 7; }
  .hero-copy > .hero-h1 { grid-column: 1 / 9; }
  .hero--home .hero-copy > .hero-h1 { grid-column: 1 / 10; }
  .hero-copy > .hero-lead { grid-column: 1 / 6; }
  .hero--home .hero-copy > .hero-lead { grid-column: 1 / 7; max-width: 56ch; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: var(--s-8); }
  .hero-actions .button { width: auto; min-width: 272px; }
  .hero-rule { margin-top: var(--s-12); }
}
@media (min-width: 90rem) { .hero-copy { column-gap: 32px; } }

/* ---------------------------------------------------------------- actions and buttons */
.actions { display: grid; gap: 12px; margin: 0; }
.actions .button { width: 100%; }
@media (min-width: 40rem) { .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .actions .button { width: auto; min-width: 220px; } }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: var(--r-2); font-weight: var(--w-ui); font-size: var(--t-ui); line-height: 1.25; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.button--primary { background: var(--bg-action); color: var(--ink-action); }
.stage a.button--primary { color: var(--ink-action); }
.button--primary:hover { background: #F2A63C; color: var(--ink-action); }
.button--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.button--secondary:hover { border-color: var(--ink); color: var(--ink); }
.stage .button--secondary { color: var(--ink-stage); border-color: var(--border-stage); }
.stage .button--secondary:hover { border-color: var(--ink-stage); color: var(--ink-stage); }
.button--stage { background: var(--bg-stage); color: var(--ink-stage); }
.button--stage:hover { background: #161327; color: var(--ink-stage); }
.button[disabled] { background: var(--bg-surface); color: var(--ink-muted); cursor: not-allowed; }
html.motion-ok .button:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- operations stage (Home) */
.ops-stage { padding: 80px 0 calc(80px + var(--overtake)); }
.stage .stage-scrim--ops { background: var(--bg-stage-deep); opacity: 0.94; }
.ops-track { position: relative; z-index: 2; }
.ops-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ops-step { display: grid; grid-template-columns: 15px 44px 1fr; column-gap: 16px; align-items: center; height: var(--ops-step-h); }
.ops-step__code { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); color: var(--accent); line-height: 1.25; }
.ops-step__label { font-size: var(--t-body); line-height: 1.3; }
.ops-rail--h, .ops-node--h { display: none; }
@media (min-width: 48rem) {
  .ops-stage { padding: 96px 0 calc(96px + var(--overtake)); }
  .stage .stage-scrim--ops { opacity: 0.82; }
  .ops-rail--v, .ops-node--v { display: none; }
  .ops-rail--h, .ops-node--h { display: block; }
  .ops-list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ops-step { grid-template-columns: 1fr; grid-template-rows: 15px auto auto; justify-items: center; text-align: center; height: auto; row-gap: 0; padding-inline: 6px; }
  .ops-step__code { margin-top: 12px; }
  .ops-step__label { margin-top: 8px; text-wrap: balance; }
}

/* ---------------------------------------------------------------- chapters */
.chapter { padding-block: var(--chapter-pad); background: var(--bg-page); }
.chapter--surface { background: var(--bg-surface); }
.chapter--band { background: var(--bg-band); padding-top: calc(var(--chapter-pad) + 32px); }
.chapter__inner { display: grid; gap: 40px; }
.section-head { display: grid; gap: var(--s-5); }
.section-head .eyebrow { margin-bottom: 0; }
.section-head h2 { max-width: 22ch; }
.section-head__intro { color: var(--ink-muted); max-width: var(--measure-body); }
.stage .section-head h2 { color: var(--ink-stage); }
.stage .section-head__intro { color: var(--ink-stage-muted); }
@media (min-width: 48rem) {
  .chapter__inner { gap: 56px; }
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .section-head > * { grid-column: 1 / 11; }
  .section-head > .section-head__intro { grid-column: 1 / 6; }
}
@media (min-width: 90rem) { .chapter__inner { gap: 64px; } .section-head { column-gap: 32px; } }

/* a chapter's content placed on the 12 columns from 768px */
.place { display: grid; }
@media (min-width: 48rem) {
  .place { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .place > * { grid-column: 1 / -1; }
  .place--c3 > * { grid-column: 3 / -1; } .place--c4 > * { grid-column: 4 / -1; } .place--c5 > * { grid-column: 5 / -1; }
  .place--c2-11 > * { grid-column: 2 / 12; } .place--c3-10 > * { grid-column: 3 / 11; } .place--c3-11 > * { grid-column: 3 / 12; }
}
@media (min-width: 90rem) { .place { column-gap: 32px; } }

/* grouped cells: one H2 over several full-bleed colour groups */
.groups__group { padding-block: 64px; }
.groups__group--surface { background: var(--bg-surface); }
.groups__group--band { background: var(--bg-band); }
.groups__group--page { background: var(--bg-page); }
.groups__head { padding-block: var(--chapter-pad) 0; }
.groups__head + .groups__group { margin-top: 40px; }
@media (min-width: 48rem) { .groups__group { padding-block: 72px; } .groups__head + .groups__group { margin-top: 56px; } }

/* cells */
.cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px 32px; }
.cells > li { display: grid; gap: 12px; align-content: start; }
.cells .eyebrow { margin-bottom: 0; }
.cells h3 { max-width: 20ch; }
.cells p:not(.eyebrow) { color: var(--ink-muted); }
.stage .cells p:not(.eyebrow) { color: var(--ink-stage-muted); }
@media (min-width: 40rem) { .cells--2, .cells--3, .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps > li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps__num { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); color: var(--ink-muted); line-height: 1.25; padding-top: 5px; position: relative; }
.steps__num::after { content: ""; position: absolute; left: 0; top: 26px; width: 28px; height: 3px; background: var(--accent); border-radius: 2px; }
.steps strong { display: block; font-family: var(--font-display); font-weight: var(--w-ui); font-size: var(--t-h4); line-height: var(--lh-sub); letter-spacing: 0; color: var(--ink); }
.steps p { margin-top: var(--s-2); color: var(--ink-muted); }
@media (min-width: 48rem) {
  .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
  .steps--3 > li, .steps--2 > li { grid-template-columns: 1fr; gap: 20px; }
}

/* cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
.card { background: var(--bg-surface); border-radius: var(--r-3); padding: 32px; display: grid; gap: 16px; align-content: start; }
.chapter--surface .card, .chapter--band .card { background: var(--bg-page); }
.card h3 { max-width: 22ch; }
.card p { color: var(--ink-muted); }
.card__role { color: var(--ink) !important; font-weight: var(--w-ui); }
.card__detail { display: grid; gap: 4px; }
.card__detail dt { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.card__detail dd { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-muted); }
.card__link { margin: 0; }
@media (min-width: 48rem) { .cards { gap: 32px; } .card { padding: 40px; } .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* text split, prose chapter, checklist split */
.text-split { display: grid; gap: 24px; }
.text-split__body { max-width: var(--measure-body); }
.text-split__body p + p { margin-top: var(--s-5); }
.text-split__body .text-link { margin-top: var(--s-2); }
.stage .text-split__body { color: var(--ink-stage-muted); }
@media (min-width: 48rem) {
  .text-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
  .text-split > .section-head { display: block; }
  .text-split--start > .section-head, .text-split--start > .text-split__body { grid-column: 1 / 8; }
  .text-split--end > .section-head, .text-split--end > .text-split__body { grid-column: 5 / 13; }
  .text-split--beside > .section-head { grid-column: 1 / 8; } .text-split--beside > .text-split__body { grid-column: 8 / 13; grid-row: 1; }
  .text-split--prose > .section-head { grid-column: 1 / 9; } .text-split--prose > .text-split__body { grid-column: 6 / 13; }
}
@media (min-width: 90rem) { .text-split { column-gap: 32px; } }
.checklist-split { display: grid; gap: 32px; }
.checklist-split__prose .prose { margin-top: var(--s-6); }
.checklist-split__link { margin-top: var(--s-4); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; align-content: start; }
.checklist li { display: grid; grid-template-columns: 15px 1fr; gap: 16px; align-items: start; line-height: 1.5; }
.checklist__dot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); margin-top: 0.3em; }
@media (min-width: 48rem) {
  .checklist-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .checklist-split__prose { grid-column: 1 / 7; }
  .checklist-split > .checklist { grid-column: 8 / 13; }
}
@media (min-width: 90rem) { .checklist-split { column-gap: 32px; } .checklist-split > .checklist--two { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* assurance and notice */
.assurance { position: relative; padding: 0 0 0 calc(var(--spine-w) + 24px); max-width: 62ch; }
.assurance .m-spine { border-radius: var(--r-pill); }
.assurance__body { margin-top: var(--s-5); color: var(--ink-muted); }
.assurance__body p + p { margin-top: var(--s-4); }
.stage .assurance__body { color: var(--ink-stage-muted); }
@media (min-width: 48rem) { .assurance { padding-left: calc(var(--spine-w) + 48px); padding-block: 16px; } }
.notice { position: relative; padding: 0 0 0 calc(var(--spine-w) + 24px); max-width: 62ch; }
.notice__spine { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--spine-w); background: var(--danger); border-radius: var(--r-pill); }
.notice__title { display: flex; align-items: flex-start; gap: 12px; }
.notice__icon { flex: none; width: 28px; height: 28px; margin-top: 4px; color: var(--danger); }
.notice__body { margin-top: var(--s-4); }
.notice__body p + p { margin-top: var(--s-4); }
@media (min-width: 48rem) { .notice { max-width: none; padding-left: calc(var(--spine-w) + 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .notice > h2 { grid-column: 1 / 6; } .notice__body { grid-column: 6 / 13; margin-top: 0; } }

/* definition list */
.dl { margin: 0; display: grid; }
.dl > div { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid var(--border); }
.dl > div:last-child { border-bottom: 1px solid var(--border); }
.dl dt { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.dl dd { margin: 0; }
.stage .dl > div { border-color: var(--border-stage); }
.stage .dl dt { color: var(--accent); }
.stage .dl dd { color: var(--ink-stage); }
@media (min-width: 48rem) { .dl--split > div { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); column-gap: 32px; align-items: baseline; } }

/* ---------------------------------------------------------------- stage chapters (a plate beside copy) */
.stage-chapter { padding-block: var(--chapter-pad); }
.stage-chapter.stage--overtaken { padding-block-end: calc(var(--chapter-pad) + var(--overtake)); }
.stage-chapter--tall { min-height: 760px; display: flex; flex-direction: column; justify-content: flex-end; }
.stage .stage-scrim--plate { background: var(--bg-stage); opacity: 0.9; }
.stage-chapter__inner { position: relative; z-index: 2; display: grid; gap: 40px; }
.stage-chapter__body { display: grid; gap: var(--s-5); max-width: var(--measure-body); color: var(--ink-stage-muted); }
@media (min-width: 48rem) {
  .stage-chapter--tall { min-height: 780px; justify-content: center; }
  /* outrank motion.css's .stage-media { inset: 0 } (same specificity, later file) */
  .stage .stage-media--side { left: 46%; }
  .stage .stage-media--side-60 { left: 60%; }
  .stage .stage-scrim--plate { opacity: 1; background: var(--scrim-side); }
  .stage-chapter__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .stage-chapter__inner > .section-head { grid-column: 1 / 6; display: block; }
  .stage-chapter__inner > .section-head h2 { max-width: 14ch; }
  .stage-chapter__inner > .section-head .section-head__intro { margin-top: var(--s-5); }
  .stage-chapter__inner > .dl { grid-column: 7 / 13; }
  .stage-chapter__inner > .stage-chapter__copy { grid-column: 1 / 7; }
  .stage-chapter--narrow .stage-chapter__inner > .stage-chapter__copy { grid-column: 1 / 8; }
  .stage-chapter--sticky .stage-chapter__inner > .section-head { position: sticky; top: calc(var(--header-h-condensed) + 48px); }
  /* a list that sits over the plate gets its own deep panel, so every row clears 4.5:1 over the image */
  .stage-chapter .stage-chapter__inner > .dl { background: rgba(6, 5, 16, 0.9); border-radius: var(--r-3); padding: 8px 32px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .stage-chapter .stage-chapter__inner > .dl > div:first-child { border-top: 0; }
  .stage-chapter .stage-chapter__inner > .dl > div:last-child { border-bottom: 0; }
}
@media (min-width: 90rem) { .stage-chapter__inner { column-gap: 32px; } }
.stage-chapter__copy { display: grid; gap: var(--s-5); max-width: var(--measure-body); }
.stage-chapter__copy .eyebrow { margin-bottom: 0; }
.stage-chapter__copy h2 { color: var(--ink-stage); }
.stage-chapter__copy p { color: var(--ink-stage-muted); }
.stage-chapter__copy .text-link { color: var(--link-stage); }

/* ---------------------------------------------------------------- call to action (amber, both themes) */
.cta { background: var(--bg-action); color: var(--ink-action); padding-block: 80px; }
.cta__inner { display: grid; gap: 32px; }
.cta h2 { color: var(--ink-action); max-width: 20ch; }
.cta p { color: var(--ink-action); margin-top: 16px; max-width: 52ch; }
.cta__action { margin: 0; }
.cta__action .button { width: 100%; }
@media (min-width: 48rem) {
  .cta { padding-block: 96px; }
  .cta__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .cta__copy { grid-column: 2 / 9; }
  .cta__action { grid-column: 10 / 13; justify-self: end; }
  .cta__action .button { width: auto; min-width: 272px; }
}

/* ---------------------------------------------------------------- text hero (privacy), routes (404), more links */
.text-hero { background: var(--bg-surface); padding: 64px 0 80px; }
.text-hero__inner { display: grid; gap: 24px; }
.text-hero h1 { max-width: 16ch; }
.text-hero .hero-lead { color: var(--ink); margin-top: 0; }
@media (min-width: 48rem) { .text-hero { padding: 96px 0 112px; } .text-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .text-hero__inner > * { grid-column: 1 / 9; } .text-hero__inner > .hero-lead { grid-column: 1 / 6; } }
.routes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (min-width: 48rem) { .routes ul { display: flex; flex-wrap: wrap; gap: 4px 32px; } }
.more { margin: 0; }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: 64px; }
.contact-grid__form { display: grid; gap: 24px; }
.contact-aside { display: grid; gap: 48px; align-content: start; background: var(--bg-band); border-radius: var(--r-3); padding: 32px; }
.aside-block { display: grid; gap: 16px; }
.aside-block p, .aside-block address { color: var(--ink-muted); }
.aside-block address { line-height: 1.7; }
@media (min-width: 48rem) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .contact-grid__form { grid-column: 1 / 8; }
  .contact-aside { grid-column: 9 / 13; padding: 40px; gap: 40px; }
  .aside-block h2 { font-size: var(--t-h3); }
}
@media (min-width: 90rem) { .contact-grid { column-gap: 32px; } }

/* form */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; grid-template-columns: 1fr; }
.field { display: grid; gap: 8px; }
.field label { font-weight: var(--w-ui); font-size: var(--t-ui); line-height: 1.25; color: var(--ink); }
.field .hint { font-size: var(--t-small); line-height: 1.55; color: var(--ink-muted); margin: 0; }
/* direct children only: the proof-of-work widget keeps its own inner controls */
.field > input, .field > select, .field > textarea { width: 100%; min-height: 52px; color: var(--ink); background: var(--bg-field); border: 1.5px solid var(--border); border-radius: var(--r-2); padding: 0 14px; font-size: var(--t-ui); }
.field > textarea { min-height: 176px; padding: 14px; resize: vertical; line-height: 1.5; }
.field > input:hover, .field > select:hover, .field > textarea:hover { border-color: var(--border-strong); }
.field > input:user-invalid, .field > textarea:user-invalid, .field > select:user-invalid { border-color: var(--danger); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; min-height: 56px; }
.field--check > input { width: 24px; height: 24px; min-height: 0; padding: 0; margin: 2px 0 0; accent-color: var(--bg-action); }
.field--check label { font-weight: var(--w-reg); font-size: var(--t-ui); line-height: 1.5; color: var(--ink); }
.form__status { position: relative; padding: 4px 0 4px calc(var(--spine-w) + 20px); color: var(--ink); }
.form__status::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--spine-w); background: var(--danger); border-radius: var(--r-pill); }
.form__status[hidden] { display: none; }
.form__status ul { margin: 12px 0 0; padding-left: 1.1em; }
.form .actions { margin-top: 8px; }
.form > .hint { font-size: var(--t-small); line-height: 1.55; color: var(--ink-muted); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--bg-action); }
altcha-widget { display: block; min-height: 52px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink-muted); }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .form .actions .button { width: auto; min-width: 272px; } }

/* ---------------------------------------------------------------- footer (stage-deep, both themes) */
.site-footer { background: var(--bg-stage-deep); color: var(--ink-stage-muted); padding: 80px 0 40px; font-size: var(--t-small); line-height: 1.55; }
.site-footer__inner { display: grid; gap: 48px; }
.site-footer .lockup { color: var(--ink-stage); margin-bottom: 24px; }
.site-footer .lockup__mark { width: 40px; height: 40px; }
.site-footer .lockup__word { font-size: 34px; }
.site-footer__name { font-size: var(--t-body); color: var(--ink-stage); }
.site-footer__brand p { max-width: 42ch; }
.site-footer__brand p + p { margin-top: 12px; }
.site-footer__brand address { margin-top: 20px; }
.site-footer__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.site-footer__group h2 { font-family: var(--font-text); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-stage-muted); margin: 0 0 8px; }
.site-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer__group a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-stage); text-decoration: none; font-size: var(--t-ui); }
.site-footer__group a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
.site-footer__legal { grid-column: 1 / -1; margin: 8px 0 0; color: var(--ink-stage-muted); }
@media (min-width: 48rem) {
  .site-footer { padding: 120px 0 48px; }
  .site-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .site-footer__brand { grid-column: 1 / 6; }
  .site-footer__groups { grid-column: 7 / 13; grid-template-columns: repeat(3, 1fr); }
  .site-footer__legal { margin-top: 64px; }
}
/* i-tecsol motion.css - verbatim from the build specification of 2026-10-10 (binding FINAL, section 2.2),
   with two documented adaptations marked ADAPTED: the phone header is not fixed, and the condense
   motion runs from 768px only. */
/* ============================================================================
   i-tecsol motion.css — Signal Ground
   • Rest state in delivered HTML is the final state. Nothing here hides anything.
   • Motion runs only while <html class="motion-ok"> (set pre-paint by /s/state.js).
   • <html class="motion-off"> and prefers-reduced-motion kill every timeline.
   • Transform and clip-path only, plus stroke-dashoffset on the ops rail and the
     fixed header bar's own height/background (out of flow, no layout shift).
   ========================================================================== */

:root { --ops-step-h: 76px; --ops-steps: 7; --overtake: 56px; }

/* ---------- structure the motions depend on ---------- */
.stage { position: relative; isolation: isolate; overflow: clip; background: var(--bg-stage); }
.stage--deep { background: var(--bg-stage-deep); }
.stage--overtaken { padding-block-end: calc(var(--chapter-pad) + var(--overtake)); }
.stage-media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.stage-media__in { position: absolute; inset: 0; }
.stage-media picture, .stage-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--scrim-stage); }
.stage-scrim--header {
  background: linear-gradient(to bottom, rgba(6, 5, 16, .80) 0, rgba(6, 5, 16, 0) 180px), var(--scrim-stage);
}
.stage > .stage-copy { position: relative; z-index: 2; }

.hero-h1 .line { display: block; overflow: hidden; padding-block-end: .08em; margin-block-end: -.08em; }
.hero-h1 .line > span { display: block; }
.hero-rule { display: block; height: 3px; width: 100%; background: var(--accent);
  border-radius: 2px; transform-origin: left center; }

.chapter { position: relative; }
.m-overtake { position: relative; z-index: 2; margin-block-start: calc(-1 * var(--overtake)); }
.m-spine { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--spine-w);
  background: var(--ink); transform-origin: top center; pointer-events: none; }
.stage .m-spine { background: var(--ink-stage); }

/* ADAPTED (build 3, see header.css note): absolute on a phone, fixed and condensing from 768px. */
.site-header { position: absolute; inset-inline: 0; top: 0; z-index: 100; }
.site-header__bar { background-color: transparent; border-bottom: 1px solid transparent; }
.site-header--static .site-header__bar { background-color: var(--bg-stage); border-bottom-color: var(--border-stage); }
@media (min-width: 48rem) {
  .site-header { position: fixed; }
  .site-header__bar { height: var(--header-h); }
  .site-header--static .site-header__bar,
  .site-header__bar.is-condensed {
    height: var(--header-h-condensed); background-color: var(--bg-stage); border-bottom-color: var(--border-stage);
  }
}

/* operations rail — rest = rail drawn, node at the end, every step full ink */
.ops-track { position: relative; }
.ops-rail { position: absolute; display: block; overflow: visible; }
.ops-rail__path { fill: none; stroke: var(--border-stage); stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ops-node { position: absolute; inline-size: 14px; block-size: 14px; border-radius: 50%;
  background: var(--accent); will-change: transform; }
.ops-step { color: var(--ink-stage); }
.ops-step__dot { inline-size: 15px; block-size: 15px; border-radius: 50%; background: var(--accent);
  flex: 0 0 auto; transform: scale(1); }
.ops-rail--v { inset-block-start: 38px; inset-inline-start: 7px; inline-size: 2px;
  block-size: calc((var(--ops-steps) - 1) * var(--ops-step-h)); }
.ops-node--v { inset-block-start: 31px; inset-inline-start: 1px;
  transform: translateY(calc((var(--ops-steps) - 1) * var(--ops-step-h))); }
@media (min-width: 48rem) {
  .ops-track { container-type: inline-size; }
  .ops-rail--h { inset-inline: calc(100cqw / 14); inset-block-start: 7px; block-size: 2px;
    inline-size: calc(100cqw * 12 / 14); }
  .ops-node--h { inset-block-start: 1px; inset-inline-start: calc(100cqw / 14 - 7px);
    transform: translateX(calc(100cqw * 12 / 14)); }
}

/* ---------- keyframes ---------- */
@keyframes ig-media { from { transform: translateY(-2%) scale(1.08); } to { transform: none; } }
@keyframes ig-line  { from { transform: translateY(110px); } to { transform: none; } }
@keyframes ig-block { from { transform: translateY(56px); }  to { transform: none; } }
@keyframes ig-rule  { from { transform: scaleX(0); }         to { transform: scaleX(1); } }
@keyframes descent  { from { transform: none; } to { transform: translateY(14vh) scale(.92); } }
@keyframes overtake {
  from { transform: translateY(var(--overtake));
         border-start-start-radius: var(--r-slab); border-start-end-radius: var(--r-slab); }
  to   { transform: none; border-start-start-radius: 0; border-start-end-radius: 0; }
}
@keyframes rise64 { from { transform: translateY(64px); } to { transform: none; } }
@keyframes rise40 { from { transform: translateY(40px); } to { transform: none; } }
@keyframes drift  { from { transform: translateY(6vh); }  to { transform: translateY(-6vh); } }
@keyframes unmask { from { clip-path: inset(0 0 18% 0); } to { clip-path: inset(0); } }
@keyframes trace  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes node-v { from { transform: translateY(0); }
                    to   { transform: translateY(calc((var(--ops-steps) - 1) * var(--ops-step-h))); } }
@keyframes node-h { from { transform: translateX(0); } to { transform: translateX(calc(100cqw * 12 / 14)); } }
@keyframes step-on { from { color: var(--ink-stage-muted); } to { color: var(--ink-stage); } }
@keyframes dot-on  { from { transform: scale(.8); background-color: var(--border-stage); }
                     to   { transform: scale(1);  background-color: var(--accent); } }
@keyframes spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes condense {
  0%   { height: var(--header-h); background-color: transparent; border-bottom-color: transparent; }
  20%  { background-color: var(--bg-stage); border-bottom-color: var(--border-stage); }
  100% { height: var(--header-h-condensed); background-color: var(--bg-stage); border-bottom-color: var(--border-stage); }
}

/* ---------- 1. Ignition — time-based, identical in both paths ---------- */
html.motion-ok .stage-media__in { animation: ig-media var(--d-hero) var(--ease-stage) both; }
html.motion-ok .hero-h1 .line:nth-child(1) > span { animation: ig-line var(--d-xl) var(--ease-out) both; }
html.motion-ok .hero-h1 .line:nth-child(2) > span { animation: ig-line var(--d-xl) var(--ease-out) var(--stagger-2) both; }
html.motion-ok .hero-h1 .line:nth-child(3) > span { animation: ig-line var(--d-xl) var(--ease-out) calc(var(--stagger-2) * 2) both; }
html.motion-ok .hero-lead    { animation: ig-block var(--d-l) var(--ease-out) 160ms both; }
html.motion-ok .hero-actions { animation: ig-block var(--d-l) var(--ease-out) 240ms both; }
html.motion-ok .hero-rule    { animation: ig-rule var(--d-xxl) var(--ease-inout) 300ms both; }

/* ---------- 2. Scroll-driven path ---------- */
@supports (animation-timeline: view()) {
  html.motion-ok .m-descent { animation: descent linear both; animation-timeline: view();
    animation-range: exit 0% exit 100%; }
  html.motion-ok .m-overtake { animation: overtake linear both; animation-timeline: view();
    animation-range: entry 0% cover 28%; }
  html.motion-ok .m-rise { animation: rise64 linear both; animation-timeline: view();
    animation-range: entry 0% cover 35%; }

  /* Card Cascade: phone = each child on its own view(); ≥768 = one parent timeline,
     shifted ranges per child (delay is ignored on progress timelines). */
  html.motion-ok .m-cascade > * { animation: rise40 linear both; animation-timeline: view();
    animation-range: entry 0% cover 30%; }
  @media (min-width: 48rem) {
    .m-cascade { view-timeline-name: --cascade; view-timeline-axis: block; }
    html.motion-ok .m-cascade > *               { animation-timeline: --cascade; animation-range: entry 10% cover 30%; }
    html.motion-ok .m-cascade > :nth-child(2)   { animation-range: entry 16% cover 36%; }
    html.motion-ok .m-cascade > :nth-child(3)   { animation-range: entry 22% cover 42%; }
    html.motion-ok .m-cascade > :nth-child(4)   { animation-range: entry 28% cover 48%; }
    html.motion-ok .m-cascade > :nth-child(5)   { animation-range: entry 34% cover 54%; }
    html.motion-ok .m-cascade > :nth-child(n+6) { animation-range: entry 40% cover 60%; }
  }

  html.motion-ok .m-drift  { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  html.motion-ok .m-unmask { animation: unmask linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  html.motion-ok .m-drift.m-unmask {
    animation: drift linear both, unmask linear both;
    animation-timeline: view(), view();
    animation-range: cover 0% cover 100%, entry 0% cover 38%;
  }
  html.motion-ok .m-spine { animation: spine linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }

  html.motion-ok .m-trace .ops-rail__path { animation: trace linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  html.motion-ok .m-trace .ops-node--v    { animation: node-v linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  html.motion-ok .m-trace .ops-node--h    { animation: node-h linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  html.motion-ok .ops-step       { animation: step-on linear both; animation-timeline: view(); animation-range: entry 12% cover 30%; }
  html.motion-ok .ops-step__dot  { animation: dot-on  linear both; animation-timeline: view(); animation-range: entry 12% cover 30%; }

  @media (min-width: 48rem) {
    html.motion-ok .site-header--overlay .site-header__bar {
      animation: condense linear both; animation-timeline: scroll(root); animation-range: 0px 120px;
    }
  }
}

/* ---------- 3. IntersectionObserver fallback ----------
   .is-pending is added by /s/motion.js only to elements entirely below the viewport,
   200 ms after DOMContentLoaded. Without it nothing is offset.                    */
@supports not (animation-timeline: view()) {
  html.motion-ok.io .m-rise.is-pending { transform: translateY(64px); transition: transform var(--d-xl) var(--ease-out); }
  html.motion-ok.io .m-rise.is-pending.is-in { transform: none; }

  html.motion-ok.io .m-overtake.is-pending {
    transform: translateY(var(--overtake));
    border-start-start-radius: var(--r-slab); border-start-end-radius: var(--r-slab);
    transition: transform var(--d-xl) var(--ease-out),
                border-start-start-radius var(--d-xl) var(--ease-out),
                border-start-end-radius var(--d-xl) var(--ease-out);
  }
  html.motion-ok.io .m-overtake.is-pending.is-in { transform: none;
    border-start-start-radius: 0; border-start-end-radius: 0; }

  html.motion-ok.io .m-cascade.is-pending > * { transform: translateY(40px); transition: transform var(--d-l) var(--ease-out); }
  html.motion-ok.io .m-cascade.is-pending.is-in > * { transform: none; }
  html.motion-ok.io .m-cascade.is-pending > :nth-child(2)   { transition-delay: var(--stagger-1); }
  html.motion-ok.io .m-cascade.is-pending > :nth-child(3)   { transition-delay: calc(var(--stagger-1) * 2); }
  html.motion-ok.io .m-cascade.is-pending > :nth-child(4)   { transition-delay: calc(var(--stagger-1) * 3); }
  html.motion-ok.io .m-cascade.is-pending > :nth-child(5)   { transition-delay: calc(var(--stagger-1) * 4); }
  html.motion-ok.io .m-cascade.is-pending > :nth-child(n+6) { transition-delay: calc(var(--stagger-1) * 5); }

  html.motion-ok.io .m-unmask.is-pending { clip-path: inset(0 0 18% 0); transition: clip-path var(--d-xl) var(--ease-out); }
  html.motion-ok.io .m-unmask.is-pending.is-in { clip-path: inset(0); }

  html.motion-ok.io .m-spine.is-pending { transform: scaleY(0); transition: transform var(--d-xl) var(--ease-out); }
  html.motion-ok.io .m-spine.is-pending.is-in { transform: scaleY(1); }

  html.motion-ok.io .m-trace.is-pending .ops-rail__path { stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-xxl) var(--ease-inout); }
  html.motion-ok.io .m-trace.is-pending.is-in .ops-rail__path { stroke-dashoffset: 0; }
  html.motion-ok.io .m-trace.is-pending .ops-node--v { transform: translateY(0); transition: transform var(--d-trace) var(--ease-stage); }
  html.motion-ok.io .m-trace.is-pending.is-in .ops-node--v { transform: translateY(calc((var(--ops-steps) - 1) * var(--ops-step-h))); }
  html.motion-ok.io .m-trace.is-pending .ops-node--h { transform: translateX(0); transition: transform var(--d-trace) var(--ease-stage); }
  html.motion-ok.io .m-trace.is-pending.is-in .ops-node--h { transform: translateX(calc(100cqw * 12 / 14)); }

  html.motion-ok.io .ops-step.is-pending { color: var(--ink-stage-muted); transition: color var(--d-s) var(--ease-out); }
  html.motion-ok.io .ops-step.is-pending .ops-step__dot { transform: scale(.8); background-color: var(--border-stage);
    transition: transform var(--d-s) var(--ease-out), background-color var(--d-s) var(--ease-out); }
  html.motion-ok.io .ops-step.is-pending.is-in { color: var(--ink-stage); }
  html.motion-ok.io .ops-step.is-pending.is-in .ops-step__dot { transform: scale(1); background-color: var(--accent); }

  html.motion-ok.io .site-header--overlay .site-header__bar {
    transition: height var(--d-m) var(--ease-out), background-color var(--d-m) var(--ease-out),
                border-bottom-color var(--d-m) var(--ease-out);
  }
  /* Stage Descent and Drift have no fallback: they degrade to nothing, a valid rest state. */
}

/* ---------- 4. Switched off: html.motion-off ---------- */
html.motion-off .stage-media__in,
html.motion-off .hero-h1 .line > span,
html.motion-off .hero-lead,
html.motion-off .hero-actions,
html.motion-off .hero-rule,
html.motion-off .m-descent,
html.motion-off .m-overtake,
html.motion-off .m-rise,
html.motion-off .m-cascade > *,
html.motion-off .m-drift,
html.motion-off .m-unmask,
html.motion-off .m-spine,
html.motion-off .m-trace .ops-rail__path,
html.motion-off .ops-node,
html.motion-off .ops-step,
html.motion-off .ops-step__dot,
html.motion-off .site-header__bar,
html.motion-off .card {
  animation: none !important;
  animation-timeline: none !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
}
html.motion-off .stage-media__in, html.motion-off .hero-h1 .line > span, html.motion-off .hero-lead,
html.motion-off .hero-actions, html.motion-off .m-descent, html.motion-off .m-overtake,
html.motion-off .m-rise, html.motion-off .m-cascade > *, html.motion-off .m-drift, html.motion-off .card { transform: none; }
html.motion-off .hero-rule  { transform: scaleX(1); }
html.motion-off .m-spine    { transform: scaleY(1); }
html.motion-off .m-unmask   { clip-path: inset(0); }
html.motion-off .m-overtake { border-start-start-radius: 0; border-start-end-radius: 0; }
html.motion-off .ops-rail__path { stroke-dashoffset: 0; }
html.motion-off .ops-node--v { transform: translateY(calc((var(--ops-steps) - 1) * var(--ops-step-h))); }
html.motion-off .ops-node--h { transform: translateX(calc(100cqw * 12 / 14)); }
html.motion-off .ops-step { color: var(--ink-stage); }
html.motion-off .ops-step__dot { transform: scale(1); background-color: var(--accent); }
html.motion-off .site-header__bar { background-color: var(--bg-stage); border-bottom-color: var(--border-stage); }
@media (min-width: 48rem) { html.motion-off .site-header__bar { height: var(--header-h-condensed); } }

/* ---------- 5. OS preference when the site switch is not explicitly Full ----------
   /s/state.js resolves this before paint; this block covers a storage-denied or
   script-blocked browser. Same list, same outcome.                               */
@media (prefers-reduced-motion: reduce) and (min-width: 48rem) {
  :root:not([data-motion="full"]) .site-header__bar { height: var(--header-h-condensed); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .stage-media__in,
  :root:not([data-motion="full"]) .hero-h1 .line > span,
  :root:not([data-motion="full"]) .hero-lead,
  :root:not([data-motion="full"]) .hero-actions,
  :root:not([data-motion="full"]) .hero-rule,
  :root:not([data-motion="full"]) .m-descent,
  :root:not([data-motion="full"]) .m-overtake,
  :root:not([data-motion="full"]) .m-rise,
  :root:not([data-motion="full"]) .m-cascade > *,
  :root:not([data-motion="full"]) .m-drift,
  :root:not([data-motion="full"]) .m-unmask,
  :root:not([data-motion="full"]) .m-spine,
  :root:not([data-motion="full"]) .m-trace .ops-rail__path,
  :root:not([data-motion="full"]) .ops-node,
  :root:not([data-motion="full"]) .ops-step,
  :root:not([data-motion="full"]) .ops-step__dot,
  :root:not([data-motion="full"]) .site-header__bar,
  :root:not([data-motion="full"]) .card {
    animation: none !important;
    animation-timeline: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  :root:not([data-motion="full"]) .hero-rule  { transform: scaleX(1); }
  :root:not([data-motion="full"]) .m-spine    { transform: scaleY(1); }
  :root:not([data-motion="full"]) .m-unmask   { clip-path: inset(0); }
  :root:not([data-motion="full"]) .m-overtake { border-start-start-radius: 0; border-start-end-radius: 0; }
  :root:not([data-motion="full"]) .ops-rail__path { stroke-dashoffset: 0; }
  :root:not([data-motion="full"]) .site-header__bar { background-color: var(--bg-stage); border-bottom-color: var(--border-stage); }
}

/* ---------- 6. Hover lift is motion too ---------- */
@media (hover: hover) {
  html.motion-ok .card { transition: transform var(--d-s) var(--ease-out); }
  html.motion-ok .card:hover { transform: translateY(-4px); }
}