/* Raedhelm site stylesheet. One file for every page; the tokens here are the
   ones the Connection Snapshot app extracted, so the two surfaces stay one
   brand. Edit tokens here, nowhere else. */

/* Fonts, served from this site rather than from Google, so a visit sends no
   request to a third party. Variable files, latin subset, the same three the
   Snapshot app serves, plus DM Sans italic because this site sets italics.
   SIL Open Font License 1.1; the license is fonts/OFL.txt. */
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/Syne-600.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(fonts/DMSans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;
  src:url(fonts/DMSans-400-italic.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Outfit-300.woff2) format('woff2')}

:root {
    --bg-hero: #0a0a0a;
    --bg-1: #121212;
    --bg-2: #171717;
    --bg-3: #0e0e0e;
    --bg-footer: #070707;
    --text-primary: #e8e6e3;
    --text-secondary: #a09b94;   /* 6.5:1 or better on every background */
    --text-muted: #84807a;       /* 4.6:1 on the lightest background; little margin, recheck if changed */
    --accent: #c8bfb0;
    --accent-warm: #d4c5a9;
    --border: #1e1e1e;
    --border-light: #2a2a2a;
    --heading: 'Outfit', -apple-system, sans-serif;
    --sans: 'DM Sans', -apple-system, sans-serif;
    --brand: 'Syne', sans-serif;
    --nav-h: 60px;
    /* The Snapshot report's band palette; the relationship headings and the privacy draft tag use it. */
    --strong-key: #6fc2a0;
    --partial-key: #5f7d99;
    --partial-band: #8fb0cb;
    --weak-key: #c8a06a;
    --plot-bg: #26262d;
    --ink-quiet: #b0aba2;
}

/* ===== TYPE STRUCTURE =====
   Four roles, used everywhere, all full container width:
   heading  the sticky section heading (Outfit 300, clamp 1.6 to 2.2rem)
   lede     one paragraph that carries the section's claim (Outfit 300, clamp 1.15 to 1.35rem)
   body     everything else in prose and lists (DM Sans 350, 1rem)
   small    captions, sources and notes (DM Sans 350, 0.8rem, muted)
   Card text inside grids uses body at 0.95rem (.body--compact); tracked
   capitals never go below 0.75rem. Thin weights stay for headings and ledes. */
.lede { font-family: var(--heading); font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.7; color: var(--text-secondary); font-weight: 300; margin-bottom: 1.5rem; }
.lede strong { color: var(--text-primary); font-weight: 400; }
.hero-tagline { font-style: italic; }
.lede em { color: var(--accent-warm); font-style: italic; }
.body { font-family: var(--sans); font-size: 1rem; line-height: 1.75; color: var(--text-secondary); font-weight: 350; margin-bottom: 1.25rem; }
.body strong { color: var(--text-primary); font-weight: 400; }
.body--compact { font-size: 0.95rem; line-height: 1.65; font-weight: 350; }
.small { font-size: 0.8rem; color: var(--text-muted); font-weight: 350; line-height: 1.5; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; font-size: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    font-family: var(--sans); background: var(--bg-hero); color: var(--text-primary);
    line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ===== RADAR BG ===== */
.radar-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.03; }
.radar-bg svg { width: 100%; height: 100%; }
.radar-sweep { animation: sweep 8s linear infinite; transform-origin: 50% 50%; }
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== GRAIN (z-index below the nav's 1000: iOS Safari compositor fix) ===== */
body::after {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 999; opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 256px 256px;
}

/* ===== NAV ===== */
nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 1rem 0; transition: all 0.4s ease; background: var(--bg-hero); }
nav.scrolled { background: #0a0a0a; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0.65rem 0; }
nav .container { display: flex; justify-content: space-between; align-items: center; }
.nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); margin-right: 1.5rem; }
.nav-logo .logo-full { height: 30px; width: auto; }
.footer-logo .logo-icon { height: 24px; width: auto; opacity: 0.4; }
.nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; white-space: nowrap; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; font-family: var(--heading); transition: color 0.3s ease; }
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { color: var(--accent) !important; border: 1px solid var(--border-light); padding: 0.45rem 1.15rem; border-radius: 2px; transition: all 0.3s ease !important; }
.nav-cta:hover { border-color: var(--accent) !important; background: rgba(200, 191, 176, 0.05); }
.cta-short { display: none; }
@media (max-width: 1100px) and (min-width: 769px) { .cta-long { display: none; } .cta-short { display: inline; } .nav-links { gap: 1.4rem; } }
.nav-toggle { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text-primary); margin: 5px 0; }

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-block; padding: 0.8rem 1.8rem; background: var(--text-primary); color: var(--bg-hero);
    text-decoration: none; font-family: var(--heading); font-size: 0.8125rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500; border-radius: 2px; transition: all 0.3s ease; border: 1px solid var(--text-primary);
}
.btn-primary:hover { background: transparent; color: var(--text-primary); }
.btn-secondary {
    display: inline-block; padding: 0.8rem 1.8rem; background: transparent; color: var(--text-primary);
    text-decoration: none; font-family: var(--heading); font-size: 0.8125rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500; border-radius: 2px; transition: all 0.3s ease; border: 1px solid var(--border-light);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ===== ACCESSIBILITY (proposal of 30 September 2026, accepted) ===== */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; } /* a section focused after an in-page jump is a landing spot, not a control */
.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 2000;
    background: var(--text-primary); color: var(--bg-hero);
    padding: 0.6rem 1rem; font-family: var(--heading); font-size: 0.875rem;
    text-decoration: none; border-radius: 2px;
}
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* If the script never runs, the page must not stay blank. index.html adds .js in its first line. */
html:not(.js) .reveal { opacity: 1; transform: none; }
/* On a short viewport (200% zoom, a phone on its side) sticky headers would cover what has focus. */
@media (max-height: 600px) { .section-sticky-header { position: static; } }

/* ===== SECTIONS ===== */
.content-section { position: relative; z-index: 1; border-top: 1px solid var(--border); }
.content-section > .container { position: relative; z-index: 1; }
.section-sticky-header { position: sticky; top: 0; z-index: 10; padding: calc(var(--nav-h) + 1.5rem) 2rem 2rem; box-shadow: 0 1px 0 var(--border); background: inherit; }
.section-sticky-header-inner { display: flex; align-items: baseline; gap: 3rem; max-width: 1200px; margin: 0 auto; }
.section-label { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; width: 140px; flex: 0 0 140px; line-height: 1.5; padding-top: 0.35rem; }
.section-label::after { content: ''; display: block; width: 100%; height: 1px; background: var(--border); margin-top: 0.75rem; }
.section-label strong { color: var(--accent); font-weight: 600; }
.section-heading { font-family: var(--heading); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; }
.section-heading strong { color: var(--accent-warm); font-weight: 400; }
/* Every section body starts under the heading, not under the label: the label's 140px plus the 3rem gap
   beside it, less the container's own 2rem padding. The live site had this in the hero by accident; here
   it is every section. Below 768px the label sits above the heading, so the indent goes. */
.section-body { padding: 0 0 5rem; margin-left: calc(140px + 3rem); }
/* From 1264px the sticky header's inner box and the container both sit at 1200px, but the container
   carries 2rem of padding inside that box and the header's padding is outside it, so the heading
   starts 2rem nearer the edge than the body content does. */
@media (min-width: 1264px) { .section-body { margin-left: calc(140px + 1rem); } }
.section-intro { margin-bottom: 3rem; }
.bg-hero { background: var(--bg-hero); }
.bg-1 { background: var(--bg-1); }
.bg-2 { background: var(--bg-2); }
.bg-3 { background: var(--bg-3); }

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.hero .section-sticky-header { padding-top: calc(var(--nav-h) + 5rem); }
.hero .section-heading { font-size: clamp(2.2rem, 5vw, 3.4rem); }
/* The hero is a flex column, so its container must be told to take the full width or it shrinks to its content. */
.hero .container { width: 100%; }
.hero-body { padding-top: 2rem; padding-bottom: 5rem; }
/* The live site's hero: text beside the book cover, as it was there. */
.hero-intro { display: grid; grid-template-columns: minmax(0, 580px) 160px; justify-content: start; gap: 0 3rem; align-items: start; }
.hero-cover { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.hero-cover img { width: 100%; height: auto; display: block; box-shadow: 6px 6px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--border); }
.hero-sub { font-family: var(--sans); font-size: 1.05rem; line-height: 1.7; font-weight: 350; margin-bottom: 2.5rem; }
.hero-sub strong { color: var(--text-primary); font-weight: 400; }
.hero-ctas, .contact-ctas { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.hero-line { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); width: 1px; height: 200px; background: linear-gradient(to bottom, transparent, var(--border-light), transparent); }

/* ===== THE ARGUMENT: three pillars ===== */
.argument-grid { display: block; }
.argument-grid .lede { margin-bottom: 0; }
.argument-points { list-style: none; display: grid; gap: 0.85rem; }
.argument-points li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; }
.point-num { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; text-decoration: none; display: inline-block; padding: 0.5rem 0; }
.point-num:hover { color: var(--text-primary); }
.pillar-close { margin-top: 2.5rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }

/* Evidence grid, pillar two */
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); margin-top: 1.75rem; }
.evidence-stat { padding: 1rem 1rem 0.9rem; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.evidence-stat:nth-child(3n) { border-right: none; }
.evidence-stat:nth-last-child(-n+3) { border-bottom: none; }
.evidence-stat-number { font-family: var(--heading); font-size: 2.4rem; font-weight: 200; color: var(--strong-key); line-height: 1; margin-bottom: 0.35rem; }
.evidence-stat-label { font-size: 1rem; color: var(--text-secondary); font-weight: 300; line-height: 1.5; }
.evidence-stat-source { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; font-family: var(--heading); letter-spacing: 0.05em; }
.evidence-note { font-size: 0.8rem; color: var(--text-muted); font-weight: 350; margin-top: 1.25rem; }

/* The four relationships */
.relationships { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 3rem; }
.relationship { background: var(--bg-3); padding: 2rem; }
.relationship h3 { font-family: var(--heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.6rem; color: var(--text-primary); }
.relationship h3 span { color: var(--text-primary); }
.relationship p { margin: 0; }
.relationship p em { color: var(--accent-warm); font-style: normal; }
.relationships-lede { margin-top: 3rem; }

/* ===== SNAPSHOT ===== */
.snapshot-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
.snapshot-list { list-style: none; margin: 1.5rem 0 2rem; border-top: 1px solid var(--border); }
.snapshot-list li { padding: 0.2rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; line-height: 1.5; color: var(--text-primary); font-weight: 300; display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; }
.snapshot-list li::before { content: '·'; color: var(--accent); font-weight: 700; }
.snapshot-ctas { display: flex; gap: 1rem; align-items: center; flex-wrap: nowrap; }
.snapshot-ctas a { padding-left: 1.25rem; padding-right: 1.25rem; white-space: nowrap; }
/* Two pages from the Snapshot report, stacked and centred. */
.snapshot-pictures { margin: 0; display: flex; flex-direction: column; align-items: center; }
.snapshot-pictures img { display: block; height: auto; box-shadow: 24px 24px 60px rgba(0,0,0,0.65); }
.snapshot-pictures .pic-top { width: 93%; }
.snapshot-pictures .pic-bottom { width: 98%; margin-top: 1.25rem; position: relative; z-index: 2; }

/* Pillar three's AI figures, set as one sentence in the heading type with the numbers large. */
.ai-figures { font-family: var(--heading); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.55; color: var(--text-secondary); margin: 2rem 0 0.75rem; }
.ai-figures b { font-weight: 300; font-size: 1.5em; line-height: 1; vertical-align: -0.08em; letter-spacing: -0.02em; }
.ai-figures b.is-strong { color: var(--strong-key); }
.ai-figures b.is-weak { color: var(--weak-key); }
.ai-figures b.is-partial { color: var(--partial-key); }
.ai-figures em { font-style: normal; color: var(--text-primary); }
.ai-figures + .small { margin-bottom: 2.5rem; }


/* ===== BOOK ===== */
.book-grid { display: grid; grid-template-columns: 165px 1fr; gap: 4rem; align-items: start; }
.book-cover-img { width: 100%; max-width: 165px; height: auto; display: block; box-shadow: 12px 12px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--border); }
.book-text em { color: var(--text-primary); font-style: italic; }
.book-cta { margin-top: 1.5rem; }

/* ===== SERVICES: three bands ===== */
.band { margin-bottom: 4rem; }
.band:last-child { margin-bottom: 0; }
.band-head { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1.5rem; }
.band-num { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; white-space: nowrap; }
.band-title { font-family: var(--heading); font-size: 1.3rem; font-weight: 300; color: var(--text-primary); }
.band-lede { margin-bottom: 1.75rem; }

.start-card { border: 1px solid var(--accent); border-radius: 2px; padding: 2.25rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: rgba(200,191,176,0.03); }
.start-card h4 { font-family: var(--heading); font-size: 1.3rem; font-weight: 400; margin-bottom: 0.5rem; }
.start-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; font-weight: 350; }
.start-card .price { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.75rem; }

.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.step { background: var(--bg-2); padding: 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; transition: background 0.4s ease; }
.step:hover { background: #1e1e1e; }
.ladder--three { grid-template-columns: repeat(3, 1fr); }
.ladder--one { grid-template-columns: 1fr; margin-top: 1.75rem; border-color: var(--accent); }
.step--wide { display: grid; grid-template-columns: 1fr 2fr; gap: 0 2.5rem; align-items: center; }
.step--wide > div { display: flex; flex-direction: column; }
.step--wide .step-when { margin-bottom: 0; }
.step--wide .step-what { margin-bottom: 0; }
.ladder-cta { margin-top: 1.75rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.step-num { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: 1rem; }
.step-name { font-family: var(--heading); font-size: 1.05rem; font-weight: 400; line-height: 1.3; margin-bottom: 0.35rem; }
.step-when { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.step-what { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; font-weight: 350; }
.ladder-axis { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding: 0 0.25rem; gap: 0.5rem; flex-wrap: wrap; }
.ladder-axis span { font-family: var(--heading); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ladder-axis span.arrow { color: var(--accent); flex: 1; height: 1px; background: linear-gradient(to right, var(--border), var(--accent)); min-width: 2rem; }
.ladder-caption { font-size: 0.8rem; color: var(--text-muted); font-weight: 300; margin: 1.5rem 0 0.75rem; text-align: center; }
.caps { font-family: var(--heading); letter-spacing: 0.15em; text-transform: uppercase; font-style: normal; }

.beyond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.beyond-card { border: 1px solid var(--border); border-radius: 2px; padding: 1.75rem; display: flex; flex-direction: column; min-height: 200px; transition: all 0.4s ease; }
.beyond-card:hover { border-color: var(--border-light); background: rgba(255,255,255,0.015); }
.beyond-card h4 { font-family: var(--heading); font-size: 1.05rem; font-weight: 400; margin-bottom: 0.6rem; }
.beyond-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; font-weight: 350; }
.beyond-card .for { margin-top: auto; padding-top: 1.25rem; font-size: 0.8rem; color: var(--text-secondary); font-style: italic; font-weight: 350; } /* secondary, not muted: muted fails contrast on the card's hover background */

/* ===== CASE STUDIES ===== */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.case-card { border: 1px solid var(--border); border-radius: 2px; padding: 2.25rem; transition: all 0.4s ease; display: flex; flex-direction: column; min-height: 240px; }
.case-card:hover { border-color: var(--border-light); background: rgba(255,255,255,0.015); }
.case-sector { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; font-weight: 500; }
.case-title { font-family: var(--heading); font-size: 1.15rem; font-weight: 400; margin-bottom: 0.75rem; line-height: 1.35; }
.case-summary { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; font-weight: 350; }
.case-outcome { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; font-weight: 350; }
.case-outcome strong { color: var(--text-secondary); font-weight: 400; }

/* ===== CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; }
.contact-text { margin-bottom: 2.25rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.75rem; padding-top: 0.5rem; }
.contact-item { border-left: 1px solid var(--border-light); padding-left: 1.5rem; }
.contact-item p.contact-item-label { font-family: var(--heading); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 500; }
.contact-item a, .contact-item p { color: var(--text-primary); text-decoration: none; font-size: 0.95rem; font-weight: 350; transition: color 0.3s ease; }
.contact-item a:hover { color: var(--accent); }

/* ===== FOOTER ===== */
footer { position: relative; z-index: 1; padding: 2.5rem 0; border-top: 1px solid var(--border); background: var(--bg-footer); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-left { display: flex; align-items: center; gap: 2rem; }
.footer-legal { font-size: 0.75rem; color: var(--text-muted); font-weight: 350; }
.footer-right a { font-family: var(--heading); font-size: 0.75rem; color: var(--text-muted); text-decoration: none; display: inline-block; padding: 0.5rem 0; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s ease; }
.footer-right a:hover { color: var(--text-secondary); }

/* ===== ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .radar-sweep { animation: none; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1023px) {
    .snapshot-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 1024px) {
    .ladder { grid-template-columns: repeat(2, 1fr); }
    .ladder--three, .ladder--one { grid-template-columns: 1fr; }
    .hero-intro { grid-template-columns: 1fr; }
    .hero-cover { grid-row: auto; grid-column: auto; justify-self: center; max-width: 180px; margin: 1.5rem 0; }
    .beyond-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (max-width: 768px) {
    :root { --nav-h: 64px; }
    .start-card .btn-primary { justify-self: start; text-align: center; }
    .nav-links { display: none; }
    .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #0a0a0a; backdrop-filter: blur(20px); padding: 2rem; gap: 1.5rem; border-bottom: 1px solid var(--border); }
    .nav-toggle { display: block; }
    .hero { min-height: auto; }
    .hero .section-sticky-header { padding-top: calc(var(--nav-h) + 3rem); }
    .hero .section-heading { font-size: 1.8rem; }
    .hero-line { display: none; }
    .hero-ctas, .snapshot-ctas, .contact-ctas { flex-direction: column; align-items: flex-start; }
    .ladder-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .pillar-close { flex-direction: column; align-items: center; }
    .section-sticky-header-inner { flex-direction: column; gap: 0.75rem; }
    .section-label { width: auto; flex: none; }
    .section-body { margin-left: 0; }
    .evidence-grid { grid-template-columns: 1fr; }
    .evidence-stat { border-right: none; border-bottom: 1px solid var(--border); }
    .evidence-stat:last-child { border-bottom: none; }
    .evidence-stat.optional { display: none; }
    .relationships { grid-template-columns: 1fr; }
    .start-card { grid-template-columns: 1fr; }
    .ladder { grid-template-columns: 1fr; }
    .step--wide { grid-template-columns: 1fr; gap: 1rem 0; }
    .step { min-height: auto; }
    .ladder-axis { display: none; }
    .beyond-grid { grid-template-columns: 1fr; }
    .beyond-card { min-height: auto; }
    .cases-grid { grid-template-columns: 1fr; }
    .book-grid { grid-template-columns: 1fr; }
    .book-cover-img { max-width: 200px; }
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .footer-inner { flex-direction: column; gap: 1.25rem; text-align: center; }
    .footer-left { flex-direction: column; }
    .found-chart { grid-template-columns: 1fr; gap: 1.25rem 0; }
    .ring { margin: 0 auto; }
    .counts { grid-template-columns: 1fr; gap: 0.5rem; }
}