/* ==========================================================================
   Enetsec – Cybercrime & Digital Forensics
   site.css — shared design system + homepage (.page-home) layer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- type families --- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- surfaces --- */
  --color-bg: #FFFFFF;
  --color-bg-tint: #F6F8FB;
  --color-bg-tint-2: #F9FBFD;
  --color-bg-panel: #F2F5F9;
  --color-bg-plate: #EAF0F6;
  --color-bg-shade: #EEF2F7;
  --color-surface: #FFFFFF;
  --color-surface-warm: #FBF7F3;

  /* --- dark grounds --- */
  --color-ink: #0B1D33;
  --color-ink-strong: #071526;
  --color-ink-deep: #050F1C;
  --color-ink-mid: #122A46;
  --color-ink-mid-alt: #0E2440;
  --color-ink-lift: #123050;
  --color-ink-panel: rgba(16, 38, 66, 0.55);
  --color-ink-panel-2: rgba(7, 21, 38, 0.6);

  /* --- ink & text --- */
  --color-heading: #0B1D33;
  --color-text: #44586F;
  --color-text-strong: #2B4059;
  --color-link: #122A46;

  /* --- text on dark --- */
  --color-on-dark: #D7E2EE;
  --color-on-dark-strong: #FFFFFF;
  --color-on-dark-body: #A9BCD1;
  --color-on-dark-body-2: #C7D6E5;
  --color-on-dark-muted: #8FA6C0;
  --color-on-dark-muted-2: #8FA0B4;
  --color-on-dark-mono: #6B84A0;
  --color-on-dark-mono-2: #6B7F96;
  --color-on-dark-faint: #44586F;

  /* --- lines --- */
  --color-border-faint: #E4EAF1;
  --color-border: #D9E1EA;
  --color-border-strong: #C9D5E2;
  --color-border-plate: #B7C5D4;
  --color-border-hard: #9FB1C4;
  --color-line-dark: #16304E;
  --color-line-dark-2: #10243C;
  --color-border-dark: #24405F;
  --color-border-dark-soft: #2E4A6B;
  --color-border-dark-lift: #3A5573;

  /* --- accent --- */
  --color-accent: #EA5B0C;
  --color-accent-hover: #C24A08;
  --color-accent-tint: #EA9A5A;
  --color-accent-wash: rgba(234, 91, 12, 0.06);
  --color-accent-wash-2: rgba(234, 91, 12, 0.10);
  --color-accent-wash-3: rgba(234, 91, 12, 0.14);
  --color-accent-wash-4: rgba(234, 91, 12, 0.22);
  --color-accent-thread: rgba(234, 91, 12, 0.55);
  --color-accent-edge: rgba(234, 91, 12, 0.65);
  --color-accent-halo: rgba(234, 91, 12, 0.20);

  /* --- decorative fills --- */
  --color-scanline: rgba(18, 42, 70, 0.055);
  --color-scanline-soft: rgba(18, 42, 70, 0.04);
  --color-vignette: rgba(11, 29, 51, 0.16);
  --color-glow-cool: rgba(64, 110, 160, 0.38);
  --color-glow-cool-2: rgba(64, 110, 160, 0.32);
  --color-glow-warm: rgba(234, 91, 12, 0.09);
  --color-glow-warm-2: rgba(234, 91, 12, 0.08);
  --color-sheen: rgba(173, 203, 232, 0.055);
  --color-sheen-2: rgba(173, 203, 232, 0.05);
  --color-floor: rgba(3, 10, 18, 0.55);
  --color-hexfield: rgba(143, 166, 192, 0.06);
  --color-hexline: rgba(143, 166, 192, 0.4);
  --color-hexline-lit: rgba(215, 226, 238, 0.75);

  /* --- type scale --- */
  --text-3xs: 8px;
  --text-2xs: 8.5px;
  --text-xs: 9px;
  --text-xs-plus: 9.5px;
  --text-sm: 10px;
  --text-sm-plus: 10.5px;
  --text-md: 11px;
  --text-md-plus: 11.5px;
  --text-lg: 12px;
  --text-lg-plus: 13px;
  --text-base: 13.5px;
  --text-base-plus: 14px;
  --text-body: 14.5px;
  --text-body-plus: 15px;
  --text-body-lg: 15.5px;
  --text-lead: 16px;
  --text-quote: 17px;
  --text-quote-lg: 18px;
  --text-title-sm: 19px;
  --text-title: 22px;
  --text-title-lg: 24px;
  --text-stat-sm: 26px;
  --text-stat: 42px;
  --text-kicker: clamp(12px, 1.2vw, 14px);
  --text-tagline: clamp(20px, 2vw, 25px);
  --text-pull: clamp(19px, 1.8vw, 23px);
  --text-section: clamp(32px, 3.4vw, 46px);
  --text-closing: clamp(34px, 4.2vw, 58px);
  --text-hero: clamp(52px, 6.6vw, 92px);

  /* --- tracking --- */
  --track-xs: 0.02em;
  --track-sm: 0.06em;
  --track-md: 0.09em;
  --track-lg: 0.12em;
  --track-xl: 0.14em;
  --track-2xl: 0.16em;
  --track-3xl: 0.18em;
  --track-4xl: 0.20em;
  --track-5xl: 0.22em;
  --track-6xl: 0.24em;
  --track-7xl: 0.28em;
  --track-8xl: 0.35em;
  --track-9xl: 0.55em;

  /* --- leading --- */
  --leading-tight: 1.1;
  --leading-snug: 1.45;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* --- spacing --- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 26px;
  --space-13: 28px;
  --space-14: 30px;
  --space-15: 32px;
  --space-16: 36px;
  --space-17: 40px;
  --space-18: 44px;
  --space-19: 48px;
  --space-20: 56px;
  --space-21: 64px;
  --space-22: 76px;
  --space-23: 84px;
  --space-24: 88px;
  --space-25: 96px;
  --space-26: 100px;

  /* --- structure --- */
  --measure: 1280px;
  --measure-narrow: 980px;
  --gutter: 32px;

  /* --- radii --- */
  --radius-none: 0;
  --radius-bar: 3px;
  --radius-device: 22px;
  --radius-circle: 50%;

  /* --- shadows --- */
  --shadow-on-dark: 0 26px 60px -28px rgba(0, 0, 0, 0.65);
  --shadow-on-dark-deep: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 18px 40px -28px rgba(11, 29, 51, 0.4);
  --shadow-card-sm: 0 14px 30px -22px rgba(11, 29, 51, 0.4);
  --shadow-card-xs: 0 12px 28px -24px rgba(11, 29, 51, 0.4);
  --shadow-nugget: 0 14px 34px -24px rgba(11, 29, 51, 0.35);
  --shadow-lift: 0 26px 50px -24px rgba(11, 29, 51, 0.45);
  --shadow-limit: 0 22px 46px -30px rgba(11, 29, 51, 0.45);
  --shadow-portrait: 14px 14px 0 0 #0B1D33, 0 34px 70px -26px rgba(11, 29, 51, 0.5);
  --shadow-seal: 0 10px 24px -10px rgba(234, 91, 12, 0.6);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-hover: 0.18s;
  --dur-step: 7s;
}

/* --------------------------------------------------------------------------
   2. Minimal reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base-plus);
  line-height: var(--leading-relaxed);
  color: var(--color-link);
  background: var(--color-bg-tint);
}

h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote { margin: 0; }

img,
svg,
canvas { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   3. Accessibility primitives
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-7);
  top: var(--space-7);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: var(--color-on-dark-strong);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--track-lg);
  padding: var(--space-5) var(--space-9);
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Shared system components
   -------------------------------------------------------------------------- */
.wrap {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--narrow { max-width: var(--measure-narrow); }

/* mono labels ------------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.mono--accent {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: var(--track-5xl);
}

.mono--muted { color: var(--color-on-dark-mono-2); }

.fig-caption {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
  margin-top: var(--space-4);
}

/* exhibit tag + custody thread -------------------------------------------- */
.exhibit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-9);
}

.exhibit-thread {
  display: block;
  height: var(--space-22);
  border-left: 1px dashed var(--color-accent-thread);
  margin: 0 0 var(--space-4) 5px;
}

.exhibit-thread--short { height: var(--space-17); }

.exhibit-tag {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.exhibit-node {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  flex: none;
}

.exhibit-node::after {
  content: "";
  width: 3px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-circle);
}

.exhibit-label {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
}

/* headings ---------------------------------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-section);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.section-title--dark { color: var(--color-on-dark-strong); }
.section-title--light { color: var(--color-heading); }

.section-lede {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.section-lede--dark { color: var(--color-on-dark-body); }
.section-lede--light { color: var(--color-text); }

/* corner ticks ------------------------------------------------------------ */
.tick {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.tick--lg { width: 18px; height: 18px; }
.tick--md { width: 16px; height: 16px; }

.tick--tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.tick--tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}

.tick--bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.tick--br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}

/* buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-base-plus);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: var(--space-7) var(--space-13);
  text-decoration: none;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-dark-strong);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-hover);
  color: var(--color-on-dark-strong);
}

.btn--ghost {
  border: 1px solid var(--color-border-hard);
  color: var(--color-link);
  background: rgba(255, 255, 255, 0.85);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--onDark {
  border: 1px solid var(--color-border-dark-lift);
  color: var(--color-on-dark);
  font-family: var(--font-mono);
}

.btn--onDark:hover,
.btn--onDark:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--lg {
  padding: var(--space-8) 34px;
  font-size: var(--text-body-plus);
}

.btn-arrow { font-family: var(--font-mono); }

/* evidence plate ---------------------------------------------------------- */
.plate {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  padding: var(--space-4);
  box-shadow: var(--shadow-on-dark);
}

.plate-inner {
  position: relative;
  width: 100%;
  background: var(--color-bg-panel);
}

.plate-badge {
  position: absolute;
  top: var(--space-10);
  right: 0;
  background: var(--color-accent);
  color: var(--color-on-dark-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-2xl);
  padding: 7px var(--space-5);
  pointer-events: none;
}

.plate-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, var(--color-scanline) 0, var(--color-scanline) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}

.plate-scanlines--soft {
  background: repeating-linear-gradient(180deg, var(--color-scanline-soft) 0, var(--color-scanline-soft) 1px, transparent 1px, transparent 4px);
}

.plate-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 95% at 50% 28%, transparent 58%, var(--color-vignette) 100%);
  pointer-events: none;
}

/* dark textured band ------------------------------------------------------ */
.band-dark {
  position: relative;
  background: linear-gradient(158deg, var(--color-ink-lift) 0%, var(--color-ink) 46%, var(--color-ink-strong) 100%);
  overflow: hidden;
}

.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1400px 700px at 82% -12%, var(--color-glow-cool), transparent 62%),
    radial-gradient(900px 600px at -8% 110%, var(--color-glow-warm), transparent 65%),
    radial-gradient(140% 90% at 50% 118%, var(--color-floor), transparent 55%);
  pointer-events: none;
}

.band-dark::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, var(--color-sheen) 50%, transparent 58%);
  animation: es-sheen 26s ease-in-out infinite alternate;
  pointer-events: none;
}

.band-dots {
  position: relative;
  background-color: var(--color-bg-tint);
  background-image: radial-gradient(var(--color-scanline) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Site header (page-agnostic)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.utility-bar {
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
  padding: var(--space-3) var(--gutter);
  position: relative;
  z-index: 60;
}

.utility-group {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.utility-mark { color: var(--color-accent); }
.utility-sep { color: var(--color-border-dark-lift); }
.utility-phone { color: var(--color-on-dark); text-decoration: none; }
.utility-phone:hover,
.utility-phone:focus-visible { color: var(--color-accent); }

.masthead {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding: var(--space-7) var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-ink-mid);
  border-right-color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-lg-plus);
  font-weight: 600;
  color: var(--color-ink-mid);
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-weight: 800;
  font-size: var(--text-title-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-ink-mid);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-7xl);
  color: var(--color-on-dark-mono-2);
  margin-top: var(--space-1);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-13);
  flex-wrap: wrap;
  font-size: var(--text-base-plus);
  font-weight: 600;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--color-accent); }

.site-nav a[aria-current="page"] {
  color: var(--color-ink-mid);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

.nav-cta {
  background: var(--color-accent);
  padding: var(--space-5) var(--space-9);
  font-size: var(--text-lg-plus);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 var(--color-accent-hover);
}

.site-nav .nav-cta { color: var(--color-on-dark-strong); }

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  background: var(--color-accent-hover);
  color: var(--color-on-dark-strong);
}

/* --------------------------------------------------------------------------
   6. Site footer (page-agnostic)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink-deep);
  border-top: 1px solid var(--color-line-dark);
  color: var(--color-on-dark-muted);
}

.footer-grid {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-21) var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-18) var(--space-21);
}

.footer-brand { flex: 1.4 1 280px; min-width: 0; }
.footer-col { flex: 1 1 190px; min-width: 0; }

.footer-logo {
  width: 180px;
  height: auto;
  margin-bottom: var(--space-8);
}

.footer-blurb {
  margin: 0 0 var(--space-9);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-mono);
  max-width: 40ch;
  text-wrap: pretty;
}

.footer-certs {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-lg);
  color: var(--color-on-dark-faint);
  line-height: 2;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 var(--space-8);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-size: var(--text-base-plus);
}

.footer-links a {
  color: var(--color-on-dark-body-2);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: var(--color-accent); }

/* NAP --------------------------------------------------------------------- */
.nap {
  font-style: normal;
  font-size: var(--text-base-plus);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-body-2);
}

.nap-name {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--color-on-dark-strong);
}

.nap-street,
.nap-hours { margin: 0; }

.nap-geo,
.nap-hours {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-lg);
  color: var(--color-on-dark-mono);
}

.nap-geo { margin-top: var(--space-2); }
.nap-hours { margin-top: var(--space-4); }

.nap-contact {
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nap-contact a {
  color: var(--color-on-dark-body-2);
  text-decoration: none;
}

.nap-contact a:hover,
.nap-contact a:focus-visible { color: var(--color-accent); }

.cta-call {
  color: var(--color-on-dark-strong);
  font-weight: 700;
  font-size: var(--text-quote);
  text-decoration: none;
}

.cta-call:hover,
.cta-call:focus-visible { color: var(--color-accent); }

.footer-legal {
  max-width: var(--measure);
  margin: var(--space-16) auto 0;
  padding: var(--space-9) var(--gutter) var(--space-12);
  border-top: 1px solid var(--color-line-dark-2);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-lg);
  color: var(--color-on-dark-faint);
}

/* ==========================================================================
   7. HOMEPAGE LAYER — everything below is scoped to .page-home
   ========================================================================== */

/* --- 7.1 Hero ------------------------------------------------------------ */
.page-home .s-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-tint) 70%, var(--color-bg-shade) 100%);
  padding-bottom: var(--space-17);
}

.page-home .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-home .hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0.25) 58%, rgba(255, 255, 255, 0) 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

.page-home .hero-grid {
  padding-top: var(--space-18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-19);
  align-items: start;
}

.page-home .hero-copy { min-width: 0; }

.page-home .hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--track-4xl);
  color: var(--color-text);
  margin-bottom: var(--space-9);
}

.page-home .hero-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--color-heading);
}

.page-home .hero-tagline {
  font-family: var(--font-display);
  font-size: var(--text-tagline);
  line-height: 1.4;
  color: var(--color-ink-mid);
  margin: var(--space-9) 0 0;
  max-width: 44ch;
  text-wrap: balance;
}

.page-home .hero-tagline em {
  font-style: italic;
  border-bottom: 3px solid var(--color-accent);
}

.page-home .aeo-nugget {
  margin: var(--space-13) 0 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-7) var(--space-9);
  max-width: 600px;
  box-shadow: var(--shadow-nugget);
}

.page-home .aeo-nugget-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-3);
}

.page-home .aeo-nugget-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .aeo-nugget-ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-muted-2);
}

.page-home .aeo-nugget-body {
  margin: 0;
  font-size: var(--text-base-plus);
  line-height: 1.65;
  color: var(--color-text-strong);
  text-wrap: pretty;
}

.page-home .hero-actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin: var(--space-14) 0 0;
}

.page-home .hero-stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  margin-top: var(--space-17);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

.page-home .hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-home .hero-stat::before {
  content: "\25AA";
  color: var(--color-accent);
}

.page-home .hero-portrait-col {
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-left: var(--space-3);
}

.page-home .hero-portrait {
  position: relative;
  width: min(420px, 100%);
}

.page-home .hero-portrait-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .hero-portrait-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.page-home .hero-portrait-plate {
  position: relative;
  border: 1px solid var(--color-border-plate);
  background: var(--color-surface);
  padding: var(--space-4);
  margin: 0 var(--space-6) var(--space-6) 0;
  box-shadow: var(--shadow-portrait);
}

.page-home .hero-portrait-frame {
  position: relative;
  width: 100%;
  height: 420px;
  background: var(--color-bg-plate);
  outline: 1px dashed var(--color-border-hard);
  outline-offset: -8px;
}

.page-home .hero-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.page-home .hero-meta {
  border-top: 1px solid var(--color-border-strong);
  margin-top: var(--space-4);
  padding: var(--space-4) 2px 2px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-home .hero-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  flex: none;
}

.page-home .hero-meta-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-md);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.page-home .hero-role {
  margin: var(--space-7) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-base-plus);
  font-weight: 700;
  letter-spacing: var(--track-xs);
  color: var(--color-text-strong);
  line-height: var(--leading-snug);
}

/* --- 7.2 Exhibit 01 · The Record ---------------------------------------- */
.page-home .s-record .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-home .s-record .exhibit-thread--short { margin-top: calc(-1 * var(--space-24)); }

.page-home .s-record .section-title {
  margin-bottom: var(--space-18);
  max-width: 24ch;
}

.page-home .proof-band {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border-dark);
  border-left: 1px solid var(--color-border-dark);
  margin-bottom: var(--space-20);
}

.page-home .proof-stat {
  border-right: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  padding: var(--space-12) var(--space-11);
  flex: 1 1 220px;
  min-width: 0;
}

.page-home .proof-figure {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  color: var(--color-on-dark-strong);
  line-height: 1;
}

.page-home .proof-star {
  color: var(--color-accent);
  font-size: var(--text-title-lg);
  margin-left: var(--space-2);
}

.page-home .proof-source {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-2xl);
  color: var(--color-accent-tint);
  margin: var(--space-5) 0 var(--space-3);
}

.page-home .proof-note {
  margin: 0;
  font-size: var(--text-lg-plus);
  line-height: 1.55;
  color: var(--color-on-dark-body);
  text-wrap: pretty;
}

.page-home .case-file {
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-panel);
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.page-home .case-file-head {
  padding: var(--space-13) var(--space-14);
  flex: 1 1 260px;
  max-width: 340px;
  border-right: 1px solid var(--color-border-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

.page-home .case-file-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .case-file-title {
  font-family: var(--font-display);
  font-size: var(--text-title-lg);
  font-weight: 600;
  color: var(--color-on-dark-strong);
  line-height: 1.25;
}

.page-home .case-file-ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.page-home .case-file-body {
  padding: var(--space-13) var(--space-14);
  flex: 1 1 340px;
  min-width: 0;
}

.page-home .case-file-text {
  margin: 0 0 var(--space-6);
  font-size: var(--text-body-plus);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-body-2);
  text-wrap: pretty;
}

.page-home .case-file-claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-quote-lg);
  line-height: 1.5;
  color: var(--color-on-dark-strong);
}

.page-home .case-file-caveat { color: var(--color-on-dark-muted); }

.page-home .public-record {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-17);
  margin-top: var(--space-21);
  align-items: stretch;
}

.page-home .public-record-press {
  flex: 1.7 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-home .public-record-books {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-home .record-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.page-home .press-plate { flex: 1; }

.page-home .press-plate .plate-inner {
  height: 100%;
  min-height: 250px;
}

.page-home .press-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-home .book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  flex: 1;
}

.page-home .book-plate {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  padding: var(--space-2);
}

.page-home .book-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--color-bg-panel);
}

.page-home .book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 7.3 Exhibit 02 · Four doors ---------------------------------------- */
.page-home .s-doors .wrap { padding-bottom: var(--space-23); }

.page-home .doors-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-16);
  align-items: end;
  margin-bottom: var(--space-19);
}

.page-home .doors-head .section-title { max-width: 16ch; }
.page-home .doors-head .section-lede { max-width: 56ch; }
.page-home .doors-head strong { color: var(--color-heading); }

.page-home .door-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-home .door-pair {
  flex: 1 1 480px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
}

.page-home .door {
  display: block;
  background: var(--color-surface);
  padding: var(--space-15) var(--space-14);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease, background var(--dur-hover) ease;
}

.page-home .door:hover,
.page-home .door:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.page-home .door-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .door-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--color-heading);
  margin: var(--space-6) 0 var(--space-5);
}

.page-home .door-text {
  margin: 0 0 var(--space-10);
  font-size: var(--text-base-plus);
  line-height: 1.65;
  color: var(--color-text);
  text-wrap: pretty;
}

.page-home .door-action {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  color: var(--color-accent);
  font-weight: 600;
}

/* acquisition log strip (schematic set-dressing) --------------------------- */
.page-home .log-strip {
  border: 1px solid var(--color-border);
  border-top: none;
  background: var(--color-ink);
  overflow: hidden;
  position: relative;
}

.page-home .log-track {
  display: flex;
  width: max-content;
  animation: es-log-scroll 42s linear infinite;
}

.page-home .log-run {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: var(--space-5) var(--space-7);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.page-home .log-mark { color: var(--color-accent); }
.page-home .log-lit { color: var(--color-on-dark); }
.page-home .log-sep { color: var(--color-border-dark-soft); }

.page-home .log-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
}

.page-home .log-fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--color-ink), transparent);
}

.page-home .log-fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--color-ink), transparent);
}

/* --- 7.4 Exhibit 03 · Method / lab console ------------------------------ */
.page-home .s-method {
  background: linear-gradient(160deg, var(--color-ink-mid-alt) 0%, var(--color-ink) 48%, var(--color-ink-strong) 100%);
}

.page-home .s-method::before {
  background:
    radial-gradient(1200px 640px at 85% -10%, var(--color-glow-cool-2), transparent 62%),
    radial-gradient(860px 560px at -6% 108%, var(--color-glow-warm-2), transparent 65%);
}

.page-home .s-method::after {
  background: linear-gradient(115deg, transparent 42%, var(--color-sheen-2) 50%, transparent 58%);
  animation-duration: 28s;
}

.page-home .s-method .wrap { padding-bottom: var(--space-24); }

.page-home .s-method .section-title { margin-bottom: var(--space-8); }

.page-home .s-method .section-lede {
  margin-bottom: var(--space-20);
  max-width: 68ch;
}

.page-home .console-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-bottom: var(--space-20);
  align-items: stretch;
}

.page-home .console-steps {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-panel-2);
}

.page-home .console-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-9);
  border-bottom: 1px solid var(--color-line-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-4xl);
  color: var(--color-on-dark-mono);
}

.page-home .console-bar-accent { color: var(--color-accent); }

.page-home .step {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-line-dark);
  padding: var(--space-7) var(--space-9) var(--space-6);
  cursor: pointer;
  color: var(--color-on-dark);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}

.page-home .step:last-of-type { border-bottom: none; }

.page-home .step:hover,
.page-home .step:focus-visible {
  background: var(--color-accent-wash);
  color: var(--color-on-dark-strong);
}

.page-home .step-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
}

.page-home .step-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .step-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  flex: 1;
}

.page-home .step-live {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent);
  visibility: hidden;
}

.page-home .step[aria-selected="true"] .step-live { visibility: visible; }

.page-home .step-track {
  display: block;
  height: 2px;
  background: var(--color-line-dark);
  margin-top: var(--space-5);
}

.page-home .step-bar {
  display: block;
  height: 2px;
  width: 0;
  background: var(--color-accent);
}

.page-home .step-bar.is-running { animation: es-progress var(--dur-step) linear forwards; }

.page-home .console-steps-spacer { flex: 1; }

.page-home .console-steps-foot {
  padding: var(--space-6) var(--space-9);
  border-top: 1px dashed var(--color-line-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-2xl);
  color: var(--color-on-dark-faint);
  line-height: 1.9;
}

/* console stage ----------------------------------------------------------- */
.page-home .console-stage {
  flex: 2.4 1 480px;
  min-width: 0;
  position: relative;
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-strong);
  display: flex;
  flex-direction: column;
}

.page-home .console-stage .tick { z-index: 1; }

.page-home .console-stage-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-10);
  border-bottom: 1px solid var(--color-line-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-4xl);
  color: var(--color-on-dark-mono);
}

.page-home .console-stage-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.page-home .console-stage-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  animation: es-blink 1.6s infinite;
}

.page-home .panel { display: none; }

.page-home .panel.is-active {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  flex: 1;
}

.page-home .panel-body {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-17) var(--space-11) var(--space-13);
}

.page-home .panel-caption {
  border-top: 1px dashed var(--color-border-dark);
  padding: var(--space-8) var(--space-11);
  display: flex;
  gap: var(--space-3) var(--space-8);
  align-items: baseline;
  flex-wrap: wrap;
}

.page-home .panel-caption-step {
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-home .panel-caption-title {
  font-family: var(--font-display);
  font-size: var(--text-quote-lg);
  font-weight: 600;
  color: var(--color-on-dark-strong);
}

.page-home .panel-caption-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-on-dark-body);
  flex: 1 1 260px;
}

/* step 01 — identify & preserve */
.page-home .seize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.page-home .device {
  position: relative;
  width: 132px;
  height: 232px;
  border: 2px solid var(--color-border-dark-lift);
  border-radius: var(--radius-device);
  background: var(--color-ink);
  display: grid;
  place-items: center;
}

.page-home .device-notch {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  background: var(--color-line-dark);
  border-radius: var(--radius-bar);
}

.page-home .device-screen { text-align: center; }

.page-home .device-clock {
  font-family: var(--font-mono);
  font-size: var(--text-lg-plus);
  color: var(--color-on-dark-mono);
}

.page-home .device-mode {
  margin-top: var(--space-4);
  font-size: var(--space-9);
  color: var(--color-accent);
}

.page-home .device-state {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--track-4xl);
  color: var(--color-on-dark-faint);
  margin-top: var(--space-4);
}

.page-home .device-seal {
  position: absolute;
  top: 44%;
  left: -34px;
  right: -34px;
  background: var(--color-accent);
  color: var(--color-ink-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-7xl);
  font-weight: 700;
  padding: 7px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-8deg);
  animation: es-seal 0.9s var(--ease-out) both;
  box-shadow: var(--shadow-seal);
}

.page-home .chips {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}

.page-home .chip {
  border: 1px solid var(--color-border-dark);
  padding: 7px var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-3xl);
  color: var(--color-on-dark-body);
  animation: es-fadeup 0.5s both;
}

.page-home .chip:nth-of-type(1) { animation-delay: 0.7s; }
.page-home .chip:nth-of-type(2) { animation-delay: 1.1s; }

.page-home .chip--accent {
  border-color: var(--color-accent-edge);
  background: var(--color-accent-wash-2);
  color: var(--color-accent-tint);
  animation-delay: 1.5s;
}

/* step 02 — image & hash */
.page-home .panel-body--hash {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-14);
  padding: var(--space-16) var(--space-13) var(--space-11);
  place-items: stretch;
}

.page-home .acquire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.page-home .acquire-block {
  width: 128px;
  border: 1px solid var(--color-border-dark-lift);
  background: var(--color-ink);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.page-home .acquire-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-4xl);
  color: var(--color-on-dark-mono);
  margin-bottom: var(--space-3);
}

.page-home .acquire-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-on-dark);
}

.page-home .acquire-state {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-faint);
  margin-top: var(--space-3);
}

.page-home .acquire-link {
  flex: 0 1 150px;
  min-width: 90px;
}

.page-home .acquire-link-label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 7px;
}

.page-home .acquire-link-flow {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-accent) 0 10px, transparent 10px 20px);
  animation: es-flow 0.7s linear infinite;
}

.page-home .hashes {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-sm);
}

.page-home .hash-row {
  color: var(--color-on-dark-mono);
  margin-bottom: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.page-home .hash-row:last-of-type { margin-bottom: 0; }

.page-home .hash-value {
  color: var(--color-on-dark);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
  animation: es-type 1.6s steps(30) both;
}

.page-home .hash-row--acq .hash-value { animation-delay: 0.4s; }
.page-home .hash-row--ver .hash-value { animation-delay: 2.2s; }

.page-home .hash-stamp {
  display: inline-block;
  margin-top: var(--space-7);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  padding: 7px var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: var(--track-6xl);
  font-weight: 700;
  animation: es-stamp 0.5s 4s both;
}

/* step 03 — examine */
.page-home .panel-body--examine {
  position: relative;
  overflow: hidden;
  padding: var(--space-14) var(--space-13);
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: stretch;
}

.page-home .hexdump {
  font-family: var(--font-mono);
  font-size: var(--text-md-plus);
  line-height: 2.3;
  letter-spacing: var(--track-2xl);
  color: var(--color-border-dark-lift);
  word-break: break-all;
}

.page-home .hex-hit {
  color: var(--color-ink-strong);
  background: var(--color-accent);
  padding: 2px 5px;
  font-weight: 700;
}

.page-home .hex-hit--cool {
  color: var(--color-on-dark);
  background: var(--color-border-dark);
  font-weight: 400;
}

.page-home .flags {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-xl);
}

.page-home .flag {
  color: var(--color-on-dark-body);
  animation: es-fadeup 0.5s both;
}

.page-home .flag::before {
  content: "\25AA ";
  color: var(--color-accent);
}

.page-home .flag--primary { color: var(--color-accent-tint); animation-delay: 1s; }
.page-home .flag--secondary { animation-delay: 1.6s; }

.page-home .scan-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--color-accent-wash-3), rgba(234, 91, 12, 0.45), transparent);
  animation: es-scan 3.6s linear infinite;
  pointer-events: none;
}

/* step 04 — document */
.page-home .panel-body--log {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: 34px var(--space-14);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-sm);
  place-items: stretch;
}

.page-home .log-line {
  display: flex;
  gap: var(--space-7);
  animation: es-fadeup 0.5s both;
}

.page-home .log-line:nth-of-type(1) { animation-delay: 0.2s; }
.page-home .log-line:nth-of-type(2) { animation-delay: 0.9s; }
.page-home .log-line:nth-of-type(3) { animation-delay: 1.6s; }
.page-home .log-line:nth-of-type(4) { animation-delay: 2.3s; }

.page-home .log-offset {
  color: var(--color-accent);
  flex: none;
}

.page-home .log-text { color: var(--color-on-dark-body); }

.page-home .log-text--final {
  color: var(--color-on-dark-strong);
  font-weight: 700;
}

.page-home .log-rule {
  height: 1px;
  background: var(--color-line-dark);
  margin-top: var(--space-2);
}

.page-home .log-foot {
  color: var(--color-on-dark-faint);
  font-size: var(--text-xs);
  letter-spacing: var(--track-3xl);
  animation: es-fadeup 0.5s 2.9s both;
}

/* step 05 — write findings */
.page-home .panel-body--report { padding: 34px var(--space-11); }

.page-home .report {
  position: relative;
  width: min(340px, 100%);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-13) var(--space-10);
  box-shadow: var(--shadow-on-dark-deep);
  animation: es-fadeup 0.6s both;
}

.page-home .report-matter {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--track-4xl);
  color: var(--color-on-dark-muted-2);
  margin-bottom: var(--space-3);
}

.page-home .report-title {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-7);
}

.page-home .report-bar {
  height: 6px;
  background: var(--color-border-faint);
  margin-bottom: var(--space-3);
}

.page-home .report-bar--b { width: 92%; }
.page-home .report-bar--c { width: 96%; margin-bottom: var(--space-8); }

.page-home .report-bar--redacted {
  background: var(--color-ink-mid);
  width: 64%;
}

.page-home .report-sign {
  border-top: 1px solid var(--color-border-strong);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-xl);
  color: var(--color-text);
}

.page-home .report-stamp {
  position: absolute;
  top: var(--space-7);
  right: var(--space-8);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-4xl);
  font-weight: 700;
  padding: 7px var(--space-4);
  text-align: center;
  animation: es-stamp 0.5s 1s both;
}

/* method closing row ------------------------------------------------------ */
.page-home .method-close {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-16);
  align-items: stretch;
}

.page-home .method-pull {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-pull);
  line-height: 1.55;
  color: var(--color-on-dark);
  text-wrap: pretty;
  align-self: center;
}

.page-home .method-pull-accent { color: var(--color-accent); }

.page-home .limit-card {
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-tint);
  padding: var(--space-13) var(--space-14);
  position: relative;
  box-shadow: var(--shadow-limit);
}

.page-home .limit-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.page-home .limit-text {
  margin: 0 0 var(--space-5);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-strong);
  text-wrap: pretty;
}

.page-home .limit-text--emphatic {
  margin-bottom: 0;
  color: var(--color-heading);
  font-weight: 600;
}

/* --- 7.5 Exhibit 04 · Testimony ----------------------------------------- */
.page-home .s-testimony {
  position: relative;
  background: var(--color-bg-tint);
  overflow: hidden;
}

.page-home .s-testimony .wrap { padding-bottom: var(--space-23); }

.page-home .testimony-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-11);
  flex-wrap: wrap;
  margin-bottom: var(--space-18);
}

.page-home .testimony-head .section-title { max-width: 18ch; }

.page-home .rating-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-8);
  box-shadow: var(--shadow-card-sm);
}

.page-home .rating-score {
  font-family: var(--font-display);
  font-size: var(--text-stat-sm);
  font-weight: 700;
  color: var(--color-heading);
}

.page-home .rating-stars {
  color: var(--color-accent);
  font-size: var(--text-body-plus);
  letter-spacing: 2px;
}

.page-home .rating-source {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono-2);
}

.page-home .review-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-11);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .review-item {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
}

.page-home .review {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.page-home .review-docket {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px dashed var(--color-border-strong);
  padding: var(--space-5) var(--space-11);
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-muted-2);
}

.page-home .review-docket-no { color: var(--color-accent); }

.page-home .review-quote {
  margin: 0;
  padding: var(--space-11) var(--space-11) var(--space-9);
  border-left: 3px solid var(--color-accent);
  flex: 1;
}

.page-home .review-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.65;
  color: var(--color-ink-mid);
  text-wrap: pretty;
}

.page-home .review-attrib {
  padding: 0 var(--space-11) var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

.page-home .review-redaction {
  display: inline-block;
  width: 92px;
  height: 11px;
  background: var(--color-ink-mid);
  flex: none;
}

.page-home .testimony-note {
  margin: var(--space-8) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-muted-2);
}

/* --- 7.6 Hex divider ----------------------------------------------------- */
.page-home .hex-divider {
  background: var(--color-ink);
  border-top: 2px solid var(--color-accent);
  overflow: hidden;
  padding: var(--space-8) 0;
  position: relative;
}

.page-home .hex-divider-stream {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-8xl);
  color: var(--color-hexline);
  text-align: center;
}

.page-home .hex-word {
  color: var(--color-accent);
  background: var(--color-accent-wash-3);
  padding: 2px var(--space-1);
}

.page-home .hex-word--cool { color: var(--color-hexline-lit); background: none; }

/* --- 7.7 Exhibit 05 · Jurisdiction -------------------------------------- */
.page-home .s-jurisdiction .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-home .s-jurisdiction .exhibit-thread--short { margin-top: calc(-1 * var(--space-24)); }

.page-home .jurisdiction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-19);
  align-items: start;
}

.page-home .jurisdiction-col { min-width: 0; }

.page-home .s-jurisdiction .section-title {
  margin-bottom: var(--space-8);
  max-width: 16ch;
}

.page-home .s-jurisdiction .section-lede {
  margin-bottom: var(--space-14);
  max-width: 56ch;
}

.page-home .city-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .city-list > li { display: flex; }

.page-home .city {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--color-border-dark);
  padding: var(--space-5) var(--space-7);
  min-width: 132px;
  text-decoration: none;
  transition: border-color var(--dur-hover) ease, background var(--dur-hover) ease;
}

.page-home a.city:hover,
.page-home a.city:focus-visible { border-color: var(--color-accent); }

.page-home .city--hq {
  border-color: var(--color-accent-edge);
  background: var(--color-accent-wash-2);
}

.page-home a.city--hq:hover,
.page-home a.city--hq:focus-visible {
  background: var(--color-accent-wash-4);
  border-color: var(--color-accent);
}

.page-home .city-name {
  font-size: var(--text-base-plus);
  font-weight: 700;
  color: var(--color-on-dark);
}

.page-home .city--hq .city-name { color: var(--color-on-dark-strong); }

.page-home .city-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-lg);
  color: var(--color-on-dark-mono);
}

.page-home .city--hq .city-meta { color: var(--color-accent-tint); }

.page-home .jurisdiction-note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.page-home .jurisdiction-note::before {
  content: "\25AA";
  color: var(--color-accent);
}

.page-home .map-plate .plate-inner {
  height: 380px;
  background: var(--color-bg-plate);
}

.page-home .map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 7.8 Exhibit 06 · Interrogatories ----------------------------------- */
.page-home .s-faq .wrap { padding-bottom: var(--space-23); }

.page-home .s-faq .section-title { margin-bottom: var(--space-18); }

.page-home .faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.page-home .faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-xs);
}

.page-home .faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-12);
}

.page-home .faq-q::-webkit-details-marker { display: none; }

.page-home .faq-no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent);
  font-weight: 600;
  flex: none;
}

.page-home .faq-text {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  color: var(--color-heading);
  flex: 1;
}

.page-home .faq-sign {
  font-family: var(--font-mono);
  color: var(--color-accent);
  flex: none;
}

.page-home .faq-item[open] .faq-sign { transform: rotate(45deg); }

.page-home .faq-a {
  margin: 0;
  padding: 0 var(--space-12) var(--space-10) 84px;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}

/* --- 7.9 Closing CTA ----------------------------------------------------- */
.page-home .s-cta {
  position: relative;
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-strong) 100%);
  overflow: hidden;
}

.page-home .cta-hexfield {
  position: absolute;
  inset: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg-plus);
  letter-spacing: var(--track-9xl);
  line-height: 2.6;
  color: var(--color-hexfield);
  white-space: nowrap;
  overflow: hidden;
  padding: var(--space-9);
  pointer-events: none;
}

.page-home .s-cta .wrap {
  padding-top: var(--space-25);
  padding-bottom: var(--space-26);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-home .cta-node-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-14);
}

.page-home .cta-thread {
  display: block;
  height: var(--space-20);
  border-left: 1px dashed var(--color-accent-thread);
  margin: calc(-1 * var(--space-25)) 0 var(--space-5);
}

.page-home .cta-node {
  display: block;
  width: 15px;
  height: 15px;
  background: var(--color-accent);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 0 5px var(--color-accent-halo);
}

.page-home .cta-node-label {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-6xl);
  color: var(--color-accent);
  font-weight: 600;
  margin-top: var(--space-6);
}

.page-home .cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-closing);
  line-height: 1.08;
  color: var(--color-on-dark-strong);
  margin: 0 0 var(--space-9);
  max-width: 22ch;
  text-wrap: balance;
}

.page-home .cta-text {
  margin: 0 0 var(--space-16);
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-body);
  max-width: 54ch;
  text-wrap: pretty;
}

.page-home .cta-actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

.page-home .s-cta .cta-call {
  font-size: var(--text-body-plus);
  font-weight: 700;
}

.page-home .cta-trust {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.page-home .cta-trust-sep { color: var(--color-border-dark-lift); }

/* --------------------------------------------------------------------------
   8. Keyframes
   -------------------------------------------------------------------------- */
@keyframes es-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes es-sheen {
  0% { transform: translateX(-14%); }
  100% { transform: translateX(14%); }
}

@keyframes es-log-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes es-progress {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes es-type {
  from { max-width: 0; }
  to { max-width: 100%; }
}

@keyframes es-scan {
  0% { left: -12%; }
  100% { left: 104%; }
}

@keyframes es-fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes es-stamp {
  0% { opacity: 0; transform: scale(1.7) rotate(-4deg); }
  70% { opacity: 1; transform: scale(0.94) rotate(-9deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

@keyframes es-flow {
  to { background-position: 20px 0; }
}

@keyframes es-seal {
  from { opacity: 0; transform: rotate(-8deg) translateX(-45%); }
  to { opacity: 1; transform: rotate(-8deg) translateX(0); }
}

/* --------------------------------------------------------------------------
   9. Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .site-header { position: static; }

  .page-home .hero-portrait-col { padding-left: 0; }

  .page-home .faq-a { padding-left: var(--space-12); }

  .page-home .case-file-head {
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border-dark);
  }
}

@media (max-width: 600px) {
  .page-home .hero-portrait-frame { height: 340px; }

  .page-home .console-stage-bar,
  .page-home .console-bar { letter-spacing: var(--track-lg); }
}

/* --------------------------------------------------------------------------
   10. Reduced motion — freeze every loop
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .band-dark::after,
  .page-home .log-track,
  .page-home .scan-beam,
  .page-home .acquire-link-flow,
  .page-home .console-stage-live::before,
  .page-home .step-bar.is-running {
    animation: none;
  }

  .page-home .scan-beam { display: none; }

  .page-home .chip,
  .page-home .flag,
  .page-home .log-line,
  .page-home .log-foot,
  .page-home .report,
  .page-home .device-seal,
  .page-home .hash-value,
  .page-home .hash-stamp,
  .page-home .report-stamp {
    animation: none;
    opacity: 1;
    max-width: 100%;
    transform: none;
  }

  .page-home .device-seal { transform: rotate(-8deg); }
  .page-home .hash-stamp,
  .page-home .report-stamp { transform: rotate(-8deg); }

  .page-home .door {
    transition: none;
  }

  .page-home .door:hover,
  .page-home .door:focus-visible { transform: none; }
}

/* Anchor targets clear the sticky header */
:target,
[id] { scroll-margin-top: calc(var(--header-height, 72px) + var(--space-4, 16px)); }