/* ═══════════════════════════════════════════════════════════════════
   EVERGROW ATELIER · Design + Motion System (2026)
   Loaded AFTER styles.css. Owns: type roles, kinetic motion, the
   light mega menu, editorial components, and the two rebuilt sections.

   Psychological design notes are inline. Principles used throughout:
   · Processing fluency  — high contrast reads as more credible/true
   · Von Restorff        — one isolated gold accent per view is remembered
   · Gestalt (common region, proximity) — bounded cards group meaning
   · Anchoring           — the number lands before its label
   · Zeigarnik           — visible progress creates completion drive
   · Peak-End            — the strongest moments sit mid-page and at the end
   · Miller's law        — content chunked into 3 to 5 units
   · Motion causality    — elements enter from their conceptual source
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Extended surface palette (green + gold remain canonical) */
    --ink: #12161F;
    --ink-soft: #1F2635;
    --paper: #FAF9F6;
    --paper-warm: #F4F1EA;
    --sage: #E8EAE3;
    --gold: #D5B473;
    --gold-soft: #F0E6D2;
    --gold-deep: #B8965A;
    /* Gold that still reads as gold but clears AA on paper (5.9:1) */
    --gold-ink: #7C6432;
    /* Lifted gold for SMALL type on green/dark surfaces (5.1:1 on green).
       Plain --gold is only ~4.2:1 there, which fails AA below 18px. */
    --gold-lift: #E3C88C;
    --green: #45523E;
    --green-deep: #2A3226;
    --warm: #B87333;

    /* Accessible text tokens on light surfaces (all >= 4.5:1 on paper) */
    --t-primary: #1A202C;   /* 15.5:1 */
    --t-body: #414B5C;      /* 7.9:1  */
    --t-muted: #5A6577;     /* 5.4:1  */
    --t-faint: #6B7688;     /* 4.5:1  minimum for small text */

    /* Text tokens on dark/green surfaces */
    --t-on-dark: #FAF9F6;
    --t-on-dark-soft: rgba(250, 249, 246, 0.78);
    --t-on-dark-muted: rgba(250, 249, 246, 0.60);

    /* Motion */
    --e-out: cubic-bezier(0.23, 1, 0.32, 1);
    --e-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --rail: 1px;
}

/* ── Type roles ────────────────────────────────────────────────────
   playfair  : headings (brand)
   jakarta   : body + UI (brand)
   mono      : data, telemetry, micro-labels, section numbers
               (monospace reads as instrument output = precision)
   display   : oversized editorial statements + italic accents only
   ────────────────────────────────────────────────────────────────── */
.font-mono-ui {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-feature-settings: "tnum" 1;
}
.font-display {
    font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    font-weight: 400;
}

/* Micro-label: the repeating system motif (mere-exposure anchor) */
.eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(9px, 0.72vw, 11px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
}
.eyebrow::before {
    content: "";
    width: 1.9em;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    flex-shrink: 0;
}
/* On light surfaces the eyebrow must use --gold-ink: --gold-deep is only
   2.6:1 on paper and fails AA. --gold-ink reads as the same gold at 5.4:1. */
.eyebrow-gold { color: var(--gold-ink); }
.eyebrow-on-dark { color: var(--gold); }
.eyebrow-plain::before { display: none; }

/* Section index numeral (orientation + Zeigarnik progress cue) */
.sec-index {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(10px, 0.8vw, 12px);
    letter-spacing: 0.2em;
    color: var(--gold-ink);
    font-weight: 600;
}

/* Fluid display scale */
.d-hero { font-size: clamp(2.6rem, 6.2vw, 6.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.d-xl   { font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1.03; letter-spacing: -0.015em; }
.d-lg   { font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; }
.d-md   { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.15; }

/* ── Legibility correction layer ───────────────────────────────────
   Brand gold (#D5B473) is legible on dark surfaces and fails badly on
   paper (about 1.9:1 at small sizes). The original markup uses
   .text-bespoke-gold on both. Rather than edit hundreds of call sites,
   remap gold TEXT to --gold-ink inside light sections, then restore
   true gold inside the dark panels nested within them.
   Measured, not assumed: verified with an in-page contrast sweep.
   ────────────────────────────────────────────────────────────────── */
/* NOTE: scoped by section id, never by .bg-bespoke-paper: <body> itself
   carries that class, so using it would repaint the dark sections too. */
:is(#methodology-section, #industry-verticals, #scoreboard-section, #convert,
    #faq-section, #founders-section, #ideology-section, #clients-section,
    .mega-panel-light)
:is(.text-bespoke-gold, .text-bespoke-gold\/70, .text-bespoke-gold\/60) {
    color: var(--gold-ink);
}
/* Restore true gold where the local surface is actually dark */
:is(#methodology-section, #industry-verticals, #scoreboard-section, #convert,
    #faq-section, #founders-section, #ideology-section, #clients-section)
:is(.bg-bespoke-green, .bg-bespoke-dark, .ind-media, .mm-cta, .stage-layer,
    .step-img-host, [class*="from-bespoke-green"], [class*="from-\[\#45523E\]"])
:is(.text-bespoke-gold, .text-bespoke-gold\/70, .text-bespoke-gold\/60) {
    color: var(--gold);
}

/* Faint utility greys used for hints and labels fail AA on paper.
   Raise them to the accessible muted token. These only ever sit on light
   surfaces, so no dark-surface restore is needed.
   Prefixed with `body` on purpose: the Tailwind Play CDN injects its
   utilities AFTER this file, so an equal-specificity rule would lose. */
body :is(.text-bespoke-dark\/30, .text-bespoke-dark\/35, .text-bespoke-dark\/40,
    .text-bespoke-dark\/45, .text-bespoke-dark\/50, .text-bespoke-dark\/55,
    .text-bespoke-dark\/60, .text-bespoke-dark\/65,
    .text-\[\#2D3748\]\/50, .text-\[\#1A202C\]\/50, .text-\[\#1A202C\]\/60) {
    color: var(--t-muted);
}

/* Low-alpha labels on DARK surfaces: raise toward the readable tokens. */
body :is(.text-bespoke-paper\/35, .text-bespoke-paper\/40, .text-bespoke-paper\/45,
    .text-\[\#FAF9F6\]\/30, .text-\[\#FAF9F6\]\/35, .text-\[\#FAF9F6\]\/40,
    .text-white\/40, .text-white\/50) {
    color: var(--t-on-dark-muted);
}
/* Small gold type on the dark hero / green fields: plain gold is ~4.2:1
   there, so lift it. Large display gold is left untouched. */
body :is(.text-bespoke-gold\/60, .text-bespoke-gold\/70) { color: var(--gold-lift); }
body :is(.bg-hero-shader, .bg-bespoke-green, .bg-bespoke-dark, #relay, #close-section)
:is(.text-\[10px\], .text-\[9px\], .text-xs, .text-sm).text-bespoke-gold { color: var(--gold-lift); }
/* /55 and /60 whites on dark land at ~4.0:1; lift to the readable token. */
body :is(.text-\[\#FAF9F6\]\/55, .text-bespoke-paper\/55, .text-white\/55,
    .text-\[\#FAF9F6\]\/60, .text-bespoke-paper\/60, .text-white\/60,
    .text-\[\#FAF9F6\]\/65, .text-bespoke-paper\/65) {
    color: rgba(250, 249, 246, 0.75);
}

/* ── Surface textures ──────────────────────────────────────────────
   Quiet, printed-matter surfaces. Texture gives a page depth without
   adding elements to read, so the eye rests between content blocks.
   All are pure CSS gradients: no image requests, no layout cost.
   ────────────────────────────────────────────────────────────────── */

/* Architectural blueprint: fine grid with a heavier rule every 5th line */
.tex-blueprint {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(26, 32, 44, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 32, 44, 0.055) 1px, transparent 1px),
        linear-gradient(rgba(26, 32, 44, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 32, 44, 0.028) 1px, transparent 1px);
    background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 35%, transparent 100%);
}
.tex-blueprint-dark {
    background-image:
        linear-gradient(rgba(213, 180, 115, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(213, 180, 115, 0.10) 1px, transparent 1px),
        linear-gradient(rgba(250, 249, 246, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 249, 246, 0.04) 1px, transparent 1px);
}

/* Topographic contours: concentric rings, like a survey map */
.tex-topo {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-radial-gradient(
        circle at 22% 30%,
        transparent 0 38px,
        rgba(69, 82, 62, 0.075) 38px 39px
    );
    -webkit-mask-image: linear-gradient(120deg, #000 5%, transparent 62%);
    mask-image: linear-gradient(120deg, #000 5%, transparent 62%);
}
.tex-topo-alt {
    background-image: repeating-radial-gradient(
        circle at 82% 76%,
        transparent 0 46px,
        rgba(213, 180, 115, 0.10) 46px 47px
    );
    -webkit-mask-image: linear-gradient(300deg, #000 5%, transparent 58%);
    mask-image: linear-gradient(300deg, #000 5%, transparent 58%);
}

/* Engraved hatching: fine diagonal rule, like a banknote or certificate */
.tex-hatch {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(26, 32, 44, 0.035) 0 1px,
        transparent 1px 9px
    );
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
    mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.tex-hatch-gold {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(213, 180, 115, 0.12) 0 1px,
        transparent 1px 10px
    );
}

/* Editorial column rules: vertical guides from a print grid */
.tex-columns {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(26, 32, 44, 0.045) 0 1px,
        transparent 1px calc(100% / 12)
    );
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

/* Paper grain: fractal noise, adds tooth to flat colour */
.tex-grain-fine {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ── Inline heading image chips ────────────────────────────────────
   Images set INSIDE a headline. Concrete imagery inside an abstract
   claim raises recall and comprehension (picture-superiority effect).
   ────────────────────────────────────────────────────────────────── */
.head-img {
    display: inline-block;
    vertical-align: middle;
    height: 1.01em;                       /* 30% larger than the original 0.78em */
    width: calc(1.01em * 4 / 3);
    border-radius: 0.16em;
    object-fit: cover;
    margin: 0 0.18em;
    transform: translateY(-0.06em) rotate(-1.4deg);
    box-shadow: 0 6px 20px -8px rgba(26, 32, 44, 0.45), 0 0 0 1px rgba(213, 180, 115, 0.28);
    transition: transform 420ms var(--e-spring), box-shadow 420ms var(--e-out);
    will-change: transform;
}
/* Portrait sources keep their portrait crop instead of being squeezed wide */
.head-img-portrait { width: calc(1.01em * 3 / 4); }
.head-img-sq { width: 1.01em; border-radius: 50%; }
.head-img-alt { transform: translateY(-0.06em) rotate(1.8deg); }
h1:hover .head-img, h2:hover .head-img, .head-img:hover {
    transform: translateY(-0.14em) rotate(0deg) scale(1.06);
    box-shadow: 0 12px 30px -10px rgba(26, 32, 44, 0.5), 0 0 0 1px rgba(213, 180, 115, 0.55);
}
@media (max-width: 640px) {
    .head-img { height: 0.91em; width: calc(0.91em * 4 / 3); margin: 0 0.12em; }
    .head-img-portrait { width: calc(0.91em * 3 / 4); }
    .head-img-sq { width: 0.91em; }
}

/* ── Kinetic marquee (scroll-velocity reactive) ────────────────────
   JS writes --mq-skew / --mq-boost from scroll velocity. Motion that
   responds to input feels physical rather than decorative.
   ────────────────────────────────────────────────────────────────── */
.mq {
    --mq-dur: 42s;
    --mq-skew: 0deg;
    overflow: hidden;
    display: flex;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--mq-gap, 3.5rem);
    padding-right: var(--mq-gap, 3.5rem);
    animation: mq-run var(--mq-dur) linear infinite;
    transform: skewX(var(--mq-skew));
    transition: transform 500ms var(--e-out);
    will-change: transform;
}
.mq-rev .mq-track { animation-direction: reverse; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq-run { from { transform: translate3d(0,0,0) skewX(var(--mq-skew)); } to { transform: translate3d(-50%,0,0) skewX(var(--mq-skew)); } }

.mq-word {
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-size: clamp(2.4rem, 7vw, 7.5rem);
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.mq-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(250, 249, 246, 0.34);
}
.mq-star { color: var(--gold); font-size: 0.42em; opacity: 0.85; }

/* ── Floating / depth cards ────────────────────────────────────────
   Parallax depth + tilt. Depth cues imply importance hierarchy.
   ────────────────────────────────────────────────────────────────── */
.float-y { will-change: transform; }
.tilt {
    transform-style: preserve-3d;
    transition: transform 500ms var(--e-out);
    will-change: transform;
}
.tilt-inner { transform: translateZ(38px); }

/* Ambient drifting shapes */
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(14px,-22px,0) rotate(6deg); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-18px,16px,0) rotate(-5deg); } }
.drift-a { animation: drift-a 17s ease-in-out infinite; }
.drift-b { animation: drift-b 22s ease-in-out infinite; }

/* ── Magnetic + pressable controls (Fitts's law: big, forgiving) ─── */
.magnetic { will-change: transform; transition: transform 380ms var(--e-out); }
.btn-atelier {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    padding: 1.05em 2.3em;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 180ms var(--e-out), color 320ms var(--e-out), border-color 320ms var(--e-out), box-shadow 320ms var(--e-out);
}
.btn-atelier::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateY(101%);
    transition: transform 480ms var(--e-in-out);
}
.btn-atelier:hover::before { transform: translateY(0); }
.btn-atelier:active { transform: scale(0.975); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 26px -10px rgba(213,180,115,0.75); }
.btn-gold::before { background: var(--ink); }
.btn-gold:hover { color: var(--gold); box-shadow: 0 14px 34px -12px rgba(26,32,44,0.6); }
.btn-ghost-light { border-color: rgba(26,32,44,0.22); color: var(--t-primary); }
.btn-ghost-light::before { background: var(--ink); }
.btn-ghost-light:hover { color: var(--paper); border-color: var(--ink); }
.btn-ghost-dark { border-color: rgba(213,180,115,0.5); color: var(--gold); }
.btn-ghost-dark::before { background: var(--gold); }
.btn-ghost-dark:hover { color: var(--green-deep); border-color: var(--gold); }
.btn-atelier .fa-solid, .btn-atelier .fa-regular, .btn-atelier .fa-brands {
    transition: transform 380ms var(--e-spring);
}
.btn-atelier:hover .fa-arrow-right { transform: translateX(5px); }

/* Link with sweeping gold rule */
.link-sweep {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-weight: 600;
}
.link-sweep::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 480ms var(--e-in-out);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }
.link-sweep .fa-arrow-right { transition: transform 380ms var(--e-spring); }
.link-sweep:hover .fa-arrow-right { transform: translateX(4px); }

/* ── Scroll progress rail (Zeigarnik: visible completion state) ──── */
#scroll-rail {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    z-index: 10000;
    background: transparent;
    pointer-events: none;
}
#scroll-rail span {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
    will-change: transform;
}

/* ── Section frame: hairline + index (repeating motif) ───────────── */
.sec-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(213,180,115,0.55) 18%, rgba(213,180,115,0.55) 82%, transparent);
}
.sec-rule-dark {
    background: linear-gradient(90deg, transparent, rgba(26,32,44,0.16) 18%, rgba(26,32,44,0.16) 82%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA MENU · light, accessible, richer
   Every text token below clears WCAG AA on the paper surface.
   ═══════════════════════════════════════════════════════════════════ */
.mega-menu-panel.mega-panel-light {
    background: linear-gradient(168deg, #FFFFFF 0%, var(--paper) 46%, var(--paper-warm) 100%);
    border: 1px solid rgba(26, 32, 44, 0.10);
    box-shadow:
        0 40px 90px -30px rgba(26, 32, 44, 0.30),
        0 4px 14px -6px rgba(26, 32, 44, 0.10);
}
.mega-panel-light .mm-label { color: var(--green); }          /* 7.9:1 */
.mega-panel-light .mm-kicker { color: var(--t-muted); }        /* 5.4:1 */
.mega-panel-light .mm-title { color: var(--t-primary); }       /* 15.5:1 */
.mega-panel-light .mm-desc { color: var(--t-body); }           /* 7.9:1 */
.mega-panel-light .mm-meta { color: var(--t-muted); }          /* 5.4:1 */
.mega-panel-light .mm-num {
    color: var(--gold-ink);            /* 5.9:1 on paper */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.mega-panel-light .mega-link {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color 320ms var(--e-out), border-color 320ms var(--e-out), transform 320ms var(--e-out);
}
.mega-panel-light .mega-link:hover {
    background: #FFFFFF;
    border-color: rgba(213, 180, 115, 0.6);
    transform: translateX(3px);
    box-shadow: 0 10px 26px -14px rgba(26, 32, 44, 0.35);
}
.mega-panel-light .mega-link:hover .mm-title { color: var(--green); }
.mega-panel-light .mega-link .mm-icon {
    color: var(--gold-ink);
    transition: transform 380ms var(--e-spring), color 320ms var(--e-out);
}
.mega-panel-light .mega-link:hover .mm-icon { transform: translateX(4px); color: var(--green); }
/* Neutralize the legacy dark-theme underline sweep */
.mega-panel-light .mega-link::after { display: none; }

.mm-measure-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.42em 0.85em;
    border-radius: 999px;
    border: 1px solid rgba(26, 32, 44, 0.14);
    background: rgba(255, 255, 255, 0.75);
    color: var(--t-body);
    font-size: 11px;
    font-weight: 600;
    transition: border-color 300ms var(--e-out), color 300ms var(--e-out), background-color 300ms var(--e-out);
}
.mm-measure-chip i { color: var(--gold-ink); font-size: 10px; }
.mm-measure-chip:hover { border-color: rgba(213,180,115,0.75); color: var(--t-primary); background: #fff; }

.mm-cta {
    position: relative;
    background: linear-gradient(158deg, var(--green) 0%, var(--green-deep) 100%);
    border: 1px solid rgba(213, 180, 115, 0.3);
    overflow: hidden;
}
.mm-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 82% 0%, rgba(213,180,115,0.22), transparent 62%);
    pointer-events: none;
}
.mm-cta-title { color: var(--paper); }
.mm-cta-body { color: rgba(250, 249, 246, 0.74); }

/* ═══════════════════════════════════════════════════════════════════
   SECTION · The Agent Roster  (replaces "YOUR AI GROWTH TEAM" bento)
   Pinned horizontal gallery. Sequential reveal chunks 7 agents into a
   guided path rather than a wall of cards (Miller's law + closure).
   ═══════════════════════════════════════════════════════════════════ */
#roster {
    background: linear-gradient(172deg, var(--green) 0%, var(--green-deep) 62%, #232B20 100%);
    position: relative;
    overflow: clip;
}
.roster-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(213,180,115,0.10) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    pointer-events: none;
}
#roster-viewport { overflow: hidden; }
#roster-track {
    display: flex;
    gap: clamp(1.1rem, 2vw, 2rem);
    will-change: transform;
}
.agent-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(270px, 27vw, 380px);
    min-height: clamp(400px, 47vh, 520px);
    border-radius: 26px;
    padding: clamp(1.6rem, 2.2vw, 2.3rem);
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(250,249,246,0.085) 0%, rgba(250,249,246,0.03) 100%);
    border: 1px solid rgba(250, 249, 246, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 520ms var(--e-out), background-color 520ms var(--e-out), transform 520ms var(--e-out);
}
.agent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(213,180,115,0.16), transparent 65%);
    opacity: 0;
    transition: opacity 560ms var(--e-out);
    pointer-events: none;
}
.agent-card:hover { border-color: rgba(213,180,115,0.55); transform: translateY(-8px); }
.agent-card:hover::before { opacity: 1; }
/* Von Restorff: the hero agent is visually isolated from its siblings */
.agent-card.is-feature {
    background: linear-gradient(158deg, rgba(213,180,115,0.20) 0%, rgba(213,180,115,0.06) 60%, rgba(250,249,246,0.03) 100%);
    border-color: rgba(213, 180, 115, 0.52);
    width: clamp(300px, 32vw, 440px);
}
.agent-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: rgba(213, 180, 115, 0.85);
    font-weight: 600;
}
.agent-icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: rgba(213, 180, 115, 0.13);
    border: 1px solid rgba(213, 180, 115, 0.32);
    color: var(--gold);
    font-size: 20px;
    transition: transform 520ms var(--e-spring), background-color 420ms var(--e-out);
}
.agent-card:hover .agent-icon { transform: scale(1.08) rotate(-5deg); background: rgba(213,180,115,0.22); }
.agent-name { color: var(--paper); }
.agent-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(213, 180, 115, 0.9);
}
.agent-body { color: var(--t-on-dark-soft); }
.agent-foot {
    border-top: 1px solid rgba(250, 249, 246, 0.13);
    color: var(--t-on-dark-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
}
#roster-progress { height: 2px; background: rgba(250,249,246,0.14); border-radius: 2px; overflow: hidden; }
#roster-progress span {
    display: block; height: 100%; width: 100%;
    transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    will-change: transform;
}
/* Mobile / no-pin fallback: natural swipe gallery */
.roster-scroll-fallback {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}
.roster-scroll-fallback .agent-card { scroll-snap-align: center; }
.roster-scroll-fallback::-webkit-scrollbar { height: 0; }

/* ═══════════════════════════════════════════════════════════════════
   SECTION · Conversion Engine (replaces "HOW YOUR CONTENT CONVERTS")
   Sticky stage + scroll-activated acts. Scroll-driven state change
   keeps hands off the mouse and eyes on the argument.
   ═══════════════════════════════════════════════════════════════════ */
#convert { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 55%, var(--paper) 100%); }
.act {
    position: relative;
    padding: clamp(2rem, 4vw, 3.2rem) 0;
    border-top: 1px solid rgba(26, 32, 44, 0.12);
    /* Inactive acts are de-emphasised but must stay readable: at 0.42 the
       body text fell to ~2.5:1 when two acts shared the viewport. */
    opacity: 0.68;
    transition: opacity 620ms var(--e-out);
}
.act.is-live { opacity: 1; }
.act-index {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--t-muted);
    transition: color 500ms var(--e-out);
}
.act.is-live .act-index { color: var(--gold-ink); }
.act-title { color: var(--t-primary); }
.act-body { color: var(--t-body); }
.act-bar {
    position: absolute;
    left: 0; top: -1px;
    height: 1px; width: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--e-in-out);
}
.act.is-live .act-bar { transform: scaleX(1); }
.act-proof {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.5em 1em;
    border-radius: 999px;
    background: rgba(69, 82, 62, 0.07);
    border: 1px solid rgba(69, 82, 62, 0.18);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}
.act-proof i { color: var(--gold-ink); }

/* Sticky stage: each act gets its OWN colour world so the change on
   scroll is unmissable. A shared surface made the transition invisible. */
#convert-stage {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(213, 180, 115, 0.28);
    box-shadow: 0 40px 90px -40px rgba(26, 32, 44, 0.55);
    aspect-ratio: 4 / 5;
    background: var(--ink);
    transition: background-color 760ms var(--e-out), box-shadow 760ms var(--e-out);
}
#convert-stage[data-stage="0"] { background: #141926; box-shadow: 0 40px 90px -40px rgba(20, 25, 38, 0.6); }
#convert-stage[data-stage="1"] { background: #2C3627; box-shadow: 0 40px 90px -40px rgba(44, 54, 39, 0.65); }
#convert-stage[data-stage="2"] { background: #D5B473; box-shadow: 0 40px 90px -40px rgba(213, 180, 115, 0.6); }

/* Progress pips: a visible, countable indicator that state changed */
.stage-pips {
    position: absolute;
    top: clamp(1.1rem, 2vw, 1.7rem);
    right: clamp(1.1rem, 2vw, 1.7rem);
    z-index: 6;
    display: flex;
    gap: 6px;
}
.stage-pips i {
    width: 22px; height: 3px;
    border-radius: 3px;
    background: rgba(250, 249, 246, 0.26);
    transition: background-color 520ms var(--e-out), width 520ms var(--e-out);
}
.stage-pips i.on { width: 38px; background: var(--gold); }
#convert-stage[data-stage="2"] .stage-pips i { background: rgba(26, 32, 44, 0.28); }
#convert-stage[data-stage="2"] .stage-pips i.on { background: var(--ink); }

.stage-layer {
    position: absolute;
    inset: 0;
    padding: clamp(1.4rem, 2.4vw, 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: opacity 560ms var(--e-out), transform 760ms var(--e-out);
    pointer-events: none;
}
.stage-layer.is-live {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 90ms;
}

/* Act 03 flips to a light-on-gold world: maximum perceptual contrast */
.stage-layer[data-stage-theme="gold"] .stage-chip {
    color: var(--ink);
    border-color: rgba(26, 32, 44, 0.32);
    background: rgba(26, 32, 44, 0.10);
}
.stage-layer[data-stage-theme="gold"] .stage-metric { color: var(--ink); }
.stage-layer[data-stage-theme="gold"] .stage-metric span { color: var(--green-deep) !important; }
.stage-layer[data-stage-theme="gold"] .stage-caption { color: rgba(26, 32, 44, 0.86); } /* 5.6:1 on gold */
.stage-layer[data-stage-theme="gold"] .stage-bar { background: rgba(26, 32, 44, 0.16); }
.stage-layer[data-stage-theme="gold"] .stage-bar i { background: linear-gradient(90deg, var(--green), var(--green-deep)); }
.stage-layer[data-stage-theme="gold"] .font-mono-ui { color: rgba(26, 32, 44, 0.78) !important; }
.stage-layer[data-stage-theme="gold"] .flex span:first-child { color: rgba(26, 32, 44, 0.88) !important; }
.stage-layer[data-stage-theme="gold"] .flex span:last-child { color: var(--green-deep) !important; }
.stage-chip {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold);
    padding: 0.45em 0.9em;
    border: 1px solid rgba(213,180,115,0.34);
    border-radius: 999px;
    background: rgba(213,180,115,0.08);
}
.stage-metric { color: var(--paper); }
.stage-caption { color: var(--t-on-dark-muted); }
.stage-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85em 0;
    border-bottom: 1px solid rgba(250,249,246,0.10);
    color: var(--t-on-dark-soft);
    font-size: 13px;
}
.stage-row b { color: var(--gold); font-family: 'JetBrains Mono', monospace; }
.stage-bar { height: 4px; border-radius: 4px; background: rgba(250,249,246,0.12); overflow: hidden; }
.stage-bar i {
    display: block; height: 100%; width: var(--w, 40%);
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    border-radius: 4px;
    transform-origin: left;
    animation: bar-in 1.1s var(--e-out) both;
}
@keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER · designed finale (Peak-End rule)
   ═══════════════════════════════════════════════════════════════════ */
#atelier-footer {
    position: relative;
    background: linear-gradient(180deg, var(--green-deep) 0%, #1F2619 60%, var(--ink) 100%);
    color: var(--paper);
    overflow: clip;
}
.foot-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(213,180,115,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.foot-col-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}
.foot-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: rgba(250, 249, 246, 0.72);
    font-size: 0.94rem;
    padding: 0.32rem 0;
    transition: color 300ms var(--e-out), transform 340ms var(--e-out);
}
.foot-link:hover { color: var(--gold); transform: translateX(5px); }
.foot-link i { opacity: 0; transform: translateX(-6px); transition: opacity 300ms var(--e-out), transform 340ms var(--e-spring); font-size: 0.7em; }
.foot-link:hover i { opacity: 1; transform: translateX(0); }

.foot-social {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(250, 249, 246, 0.2);
    color: rgba(250, 249, 246, 0.8);
    transition: background-color 340ms var(--e-out), color 340ms var(--e-out), border-color 340ms var(--e-out), transform 340ms var(--e-spring);
}
.foot-social:hover { background: var(--gold); color: var(--green-deep); border-color: var(--gold); transform: translateY(-4px); }

/* ── Reveal primitives (fail-open: visible unless JS arms them) ────
   will-change is applied only while armed and released once the
   element has landed, so we never hold GPU layers for the whole page. */
.rise-armed:not(.is-in), .stagger-armed:not(.is-in) > *, .kin-fade:not(.is-in) { will-change: transform, opacity; }
.rise-armed.is-in, .stagger-armed.is-in > * { will-change: auto; }
.rise-armed { opacity: 0; transform: translateY(26px); }
.rise-armed.is-in {
    opacity: 1; transform: translateY(0);
    transition: opacity 780ms var(--e-out), transform 900ms var(--e-out);
}
/* No stagger delays: every child lands together the moment the group
   enters. Sequenced delays made later cards arrive after the reader had
   already scrolled past them. */
.stagger-armed > * { opacity: 0; transform: translateY(14px); }
.stagger-armed.is-in > * {
    opacity: 1; transform: translateY(0);
    transition: opacity 420ms var(--e-out), transform 480ms var(--e-out);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    #convert-stage { aspect-ratio: 5 / 4; }
    .agent-card, .agent-card.is-feature { width: min(80vw, 340px); min-height: 430px; }
}
@media (max-width: 640px) {
    .btn-atelier { width: 100%; padding: 1.05em 1.6em; }
    .mq-word { font-size: clamp(2rem, 12vw, 3.4rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   KINETIC LAYER · cursor, advanced marquees, carousel, live footer
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cursor system ─────────────────────────────────────────────────
   Two bodies with different inertia (dot = instant, ring = lagged).
   The lag reads as physical mass; the state changes give every
   interactive surface an affordance before it is clicked.
   ────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    body.atelier-cursor { cursor: none; }
    body.atelier-cursor a, body.atelier-cursor button,
    body.atelier-cursor input, body.atelier-cursor textarea,
    body.atelier-cursor [role="tab"], body.atelier-cursor .cursor-pointer { cursor: none; }
}
#ac-dot, #ac-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 100000;
    will-change: transform;
    opacity: 0;
    transition: opacity 320ms var(--e-out);
}
#ac-dot {
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--gold);
    mix-blend-mode: difference;
}
#ac-ring {
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 1px solid rgba(213, 180, 115, 0.85);
    display: grid;
    place-items: center;
    transition: opacity 320ms var(--e-out), width 420ms var(--e-out),
                height 420ms var(--e-out), margin 420ms var(--e-out),
                background-color 380ms var(--e-out), border-color 380ms var(--e-out),
                backdrop-filter 380ms var(--e-out);
}
body.ac-ready #ac-dot, body.ac-ready #ac-ring { opacity: 1; }

/* Ring label (appears inside the ring on rich targets) */
#ac-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 260ms var(--e-out), transform 320ms var(--e-spring);
    white-space: nowrap;
    font-weight: 600;
}

/* States */
body.ac-link #ac-ring {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    background: rgba(213, 180, 115, 0.16);
    border-color: rgba(213, 180, 115, 0.6);
    backdrop-filter: blur(2px);
}
body.ac-link #ac-dot { opacity: 0.35; }

body.ac-cta #ac-ring {
    width: 78px; height: 78px; margin: -39px 0 0 -39px;
    background: var(--gold);
    border-color: var(--gold);
}
body.ac-cta #ac-dot { opacity: 0; }
body.ac-cta #ac-label { opacity: 1; transform: scale(1); }

body.ac-drag #ac-ring {
    width: 88px; height: 88px; margin: -44px 0 0 -44px;
    background: rgba(250, 249, 246, 0.14);
    border-color: rgba(250, 249, 246, 0.55);
    backdrop-filter: blur(3px);
}
body.ac-drag #ac-label { opacity: 1; transform: scale(1); color: var(--paper); }
body.ac-drag #ac-dot { opacity: 0; }

body.ac-text #ac-ring { width: 3px; height: 30px; margin: -15px 0 0 -1.5px; border-radius: 2px; background: var(--gold); border-color: transparent; }
body.ac-text #ac-dot { opacity: 0; }

body.ac-press #ac-ring { transform-origin: center; }
body.ac-hide #ac-dot, body.ac-hide #ac-ring { opacity: 0; }

/* ── Advanced marquee ──────────────────────────────────────────────
   JS-driven infinite loop: reacts to scroll direction and velocity,
   so the band feels dragged by the page rather than looping blindly.
   ────────────────────────────────────────────────────────────────── */
.mq-adv { position: relative; overflow: hidden; display: block; width: 100%; }
.mq-adv-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mq-adv-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}
.mq-adv-item {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    padding-right: var(--mq-gap, 2.6rem);
    white-space: nowrap;
}
.mq-huge {
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-size: clamp(2.6rem, 8.5vw, 9rem);
    line-height: 0.92;
    letter-spacing: -0.015em;
}
.mq-fill { color: var(--paper); }
.mq-stroke {
    color: transparent;
    -webkit-text-stroke: 1px rgba(250, 249, 246, 0.38);
    transition: -webkit-text-stroke-color 500ms var(--e-out), color 500ms var(--e-out);
}
.mq-adv:hover .mq-stroke { color: rgba(213, 180, 115, 0.14); -webkit-text-stroke-color: rgba(213, 180, 115, 0.75); }
.mq-dot {
    width: 0.16em; height: 0.16em;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    margin: 0 0.3em;
}
.mq-chip {
    height: 0.62em;
    width: calc(0.62em * 4 / 3);
    border-radius: 0.14em;
    object-fit: cover;
    margin: 0 0.24em;
    box-shadow: 0 0 0 1px rgba(213, 180, 115, 0.4);
    transform: rotate(-2deg);
}
/* Telemetry ticker variant (mono, small, data-like) */
.mq-tick .mq-adv-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 249, 246, 0.55);
    padding-right: 3rem;
}
.mq-tick .mq-adv-item b { color: var(--gold); font-weight: 600; }

/* ── Kinetic scroll utilities ──────────────────────────────────────
   FAIL-OPEN: [data-kin] itself never hides anything. JS adds .kin-fade
   only to elements that are below the fold, and the reveal is driven by
   IntersectionObserver (which keeps working when rAF is throttled).
   The rAF loop only ever writes the parallax transform, so if it stalls
   the page is still fully readable. */
/* JS fallback path (browsers without scroll-driven animation) */
.kin-fade { opacity: 0; }
.kin-fade.is-in { opacity: 1; transition: opacity 460ms var(--e-out); }

/* PRIMARY path: native scroll-driven animation. Progress is bound to the
   element's own position in the scrollport, so it is literally tied to
   scrolling: no timers, no delays, no JS, and it runs on the compositor.
   Opacity only, so it never fights the parallax transform.
   Unsupported browsers simply never see .kin-css and fall back above. */
@supports (animation-timeline: view()) {
    .kin-css {
        animation: kin-enter linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
    @keyframes kin-enter { from { opacity: 0; } to { opacity: 1; } }
}

/* ── Industry carousel ─────────────────────────────────────────────
   Centre-focused coverflow. Peripheral cards stay partly visible so
   the set reads as continuous (closure) and invites lateral travel.
   ────────────────────────────────────────────────────────────────── */
#ind-stage { position: relative; }
#ind-viewport {
    overflow: hidden;
    padding: 2.5rem 0 3rem;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
#ind-viewport.is-grabbing { cursor: grabbing; }
@media (max-width: 767px) {
    #ind-viewport { -webkit-mask-image: none; mask-image: none; }
}
#ind-track {
    display: flex;
    align-items: stretch;
    gap: clamp(1rem, 1.8vw, 1.8rem);
    will-change: transform;
    touch-action: pan-y;
}
.ind-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(280px, 33vw, 480px);
    border-radius: 26px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(26, 32, 44, 0.10);
    box-shadow: 0 18px 50px -28px rgba(26, 32, 44, 0.35);
    opacity: 0.45;
    transform: scale(0.9);
    transition: opacity 620ms var(--e-out), transform 720ms var(--e-out),
                box-shadow 620ms var(--e-out), border-color 620ms var(--e-out);
    will-change: transform, opacity;
}
.ind-card.is-active {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(213, 180, 115, 0.6);
    box-shadow: 0 40px 90px -40px rgba(26, 32, 44, 0.5), 0 0 0 1px rgba(213, 180, 115, 0.18);
}
.ind-card.is-near { opacity: 0.72; transform: scale(0.95); }
.ind-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--green-deep);
}
.ind-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1200ms var(--e-out);
    will-change: transform;
}
.ind-card.is-active .ind-media img { transform: scale(1); }
.ind-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,32,44,0.05) 0%, rgba(26,32,44,0.55) 100%);
}
.ind-media-label {
    position: absolute;
    left: 1.2rem; bottom: 1.1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ind-media-label i { color: var(--gold); }
.ind-stat {
    position: absolute;
    right: 1rem; top: 1rem;
    z-index: 2;
    background: rgba(26, 32, 44, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(213, 180, 115, 0.35);
    border-radius: 14px;
    padding: 0.7rem 0.95rem;
    text-align: right;
}
.ind-stat b { display: block; font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold); line-height: 1; }
.ind-stat span { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,249,246,0.7); }
.ind-body { padding: clamp(1.3rem, 2vw, 1.9rem); }
.ind-title { color: var(--t-primary); }
.ind-copy { color: var(--t-body); }
.ind-q {
    display: flex; align-items: center; gap: 0.6em;
    padding: 0.6em 0.9em;
    border-radius: 10px;
    background: rgba(69, 82, 62, 0.05);
    border: 1px solid rgba(69, 82, 62, 0.12);
    color: var(--t-body);
    font-size: 12.5px;
    transition: background-color 320ms var(--e-out), border-color 320ms var(--e-out), transform 320ms var(--e-out);
}
.ind-q i { color: var(--gold-ink); font-size: 10px; }
.ind-q:hover { background: var(--green); border-color: var(--green); color: var(--paper); transform: translateX(3px); }
.ind-q:hover i { color: var(--gold); }

.ind-nav-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(26, 32, 44, 0.18);
    color: var(--t-primary);
    background: rgba(255, 255, 255, 0.8);
    transition: background-color 320ms var(--e-out), color 320ms var(--e-out),
                border-color 320ms var(--e-out), transform 320ms var(--e-spring);
}
.ind-nav-btn:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); transform: scale(1.08); }
.ind-nav-btn:active { transform: scale(0.95); }
.ind-nav-btn:disabled { opacity: 0.3; pointer-events: none; }

.ind-dot {
    height: 3px; width: 26px;
    border-radius: 3px;
    background: rgba(26, 32, 44, 0.16);
    overflow: hidden;
    transition: width 520ms var(--e-out), background-color 420ms var(--e-out);
}
.ind-dot.is-active { width: 62px; background: rgba(26, 32, 44, 0.12); }
.ind-dot i { display: block; height: 100%; width: 100%; background: var(--gold-ink); transform: scaleX(0); transform-origin: left; }
.ind-dot.is-active i { animation: ind-fill var(--ind-dur, 7s) linear forwards; }
@keyframes ind-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#ind-stage.is-paused .ind-dot.is-active i { animation-play-state: paused; }

/* ── Footer: living surface ───────────────────────────────────────── */
#atelier-footer .foot-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(ellipse 50% 60% at 20% 30%, rgba(213, 180, 115, 0.16), transparent 62%),
        radial-gradient(ellipse 45% 55% at 78% 18%, rgba(69, 82, 62, 0.5), transparent 66%);
    filter: blur(28px);
    pointer-events: none;
    animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
    0%   { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.85; }
    100% { transform: translate3d(4%, 3%, 0) scale(1.12); opacity: 1; }
}

/* ── Footer wordmark · halftone that fills with light ──────────────
   The word is drawn as a field of dots clipped to its own letterforms.
   Gold light fills those dots solid under the pointer, and sweeps once
   on entry so touch users (who never produce a pointer) still see the
   thing happen. Three stacked copies of one word: no per-letter DOM,
   no canvas, and nothing animated but background-position.
   ────────────────────────────────────────────────────────────────── */
@property --fm-r {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
.foot-mark {
    position: relative;
    display: block;
    text-align: center;
    user-select: none;
    --fm-x: 50%;
    --fm-y: 50%;
    --fm-r: 0px;
    transition: --fm-r 560ms var(--e-out);
}
.foot-mark > span {
    display: block;
    font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(3.1rem, 14.6vw, 15rem);
    line-height: 0.84;
    letter-spacing: -0.012em;
    white-space: nowrap;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
}
/* the first copy holds the box; the rest stack on top of it */
.foot-mark > span + span { position: absolute; inset: 0; }

/* 1 · the halftone itself, inside an outline that is ALWAYS drawn. The
      stroke is what makes the word read as a word at rest; the dots give
      it its texture. The cell is em-based so the dot density reads the
      same at 48px as at 240px, with a px floor so it never degenerates
      into mush on a phone. */
.fm-dots {
    background-image:
        radial-gradient(circle at center,
            rgba(250, 249, 246, 0.66) 20%, rgba(250, 249, 246, 0) 27%);
    background-size: clamp(5px, 0.05em, 13px) clamp(5px, 0.05em, 13px);
    background-position: center;
    background-repeat: repeat;
    -webkit-text-stroke: 1.1px rgba(250, 249, 246, 0.4);
}
@media (max-width: 640px) {
    .fm-dots { -webkit-text-stroke-width: 0.7px; }
}
/* 2 · the pointer light: dots fill solid gold inside the halo */
.fm-halo {
    background-image: radial-gradient(circle var(--fm-r) at var(--fm-x) var(--fm-y),
        rgba(236, 208, 148, 1) 0%,
        rgba(213, 180, 115, 0.94) 54%,
        rgba(213, 180, 115, 0) 84%);
}
/* 3 · the entry sweep: one pass of gold, left to right, then done */
.fm-sweep {
    background-image: linear-gradient(102deg,
        rgba(213, 180, 115, 0) 41%,
        rgba(243, 219, 168, 0.98) 49%,
        rgba(213, 180, 115, 0.82) 54%,
        rgba(213, 180, 115, 0) 61%);
    background-size: 260% 100%;
    background-position: 95% 0;
}
.foot-mark.is-lit .fm-sweep { animation: fm-sweep 2000ms var(--e-out) forwards; }
@keyframes fm-sweep {
    from { background-position: 95% 0; }
    to   { background-position: 8% 0; }
}
.foot-mark-caption {
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(8.5px, 0.74vw, 10.5px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(250, 249, 246, 0.62);
    margin-top: clamp(0.7rem, 1.5vw, 1.5rem);
}

.foot-stat b { font-family: 'Playfair Display', serif; color: var(--gold); }
.foot-stat span { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,249,246,0.5); }

/* ═══════════════════════════════════════════════════════════════════
   SECTION · THE RELAY  ("Eight specialists in one relay")
   Kinetic type band with floating, rotated cards laid over it. Each
   card holds its identity face-up and swaps to its description on
   hover/focus, so the grid stays scannable until you show intent.
   No scroll hijack: the page keeps moving normally.
   ═══════════════════════════════════════════════════════════════════ */
#relay {
    position: relative;
    background:
        radial-gradient(ellipse 60% 45% at 12% 4%, rgba(213,180,115,0.12), transparent 62%),
        linear-gradient(176deg, var(--green) 0%, var(--green-deep) 62%, #1C231A 100%);
    overflow: clip;
}
.relay-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(213,180,115,0.085) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
/* The background type band was removed: on a translucent, blurred card
   stack it caused visible flicker as the two composited layers fought.
   The blueprint texture carries the background on its own. */

/* ── Relay line: zigzag rail ───────────────────────────────────────
   One card per row, alternating side. An SVG baton path stitches them
   together behind the cards and draws itself as you scroll, so the
   sequence is legible as a handoff chain rather than a grid.
   ────────────────────────────────────────────────────────────────── */
.rl-rail { position: relative; z-index: 2; }
.rl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 6vh, 5.5rem);
}
.rl-row.is-right > .rl-slot { grid-column: 2; }
.rl-row.is-left  > .rl-slot { grid-column: 1; }

/* Connector layer sits behind the cards */
#rl-thread {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
#rl-thread path {
    fill: none;
    stroke: url(#rl-grad);
    stroke-width: 2;
    stroke-linecap: round;
}
#rl-thread .rl-thread-ghost { stroke: rgba(250, 249, 246, 0.09); stroke-width: 1.5; }
#rl-thread circle { fill: var(--gold); }

/* Handoff marker between rows */
.rl-baton {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0.85em;
    border-radius: 999px;
    background: rgba(18, 22, 31, 0.72);
    border: 1px solid rgba(213, 180, 115, 0.34);
    backdrop-filter: blur(8px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
    pointer-events: none;
}

/* One consistent dossier treatment. The earlier paper/ink/gold patchwork
   made the rail read as unrelated cards rather than one system. */
.rl-card {
    --rot: 0deg;
    position: relative;
    border-radius: 26px;
    padding: clamp(1.9rem, 2.6vw, 2.7rem);
    padding-left: clamp(2.2rem, 3vw, 3.1rem);
    min-height: clamp(300px, 34vh, 400px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(158deg, rgba(250, 249, 246, 0.085) 0%, rgba(250, 249, 246, 0.025) 100%);
    border: 1px solid rgba(250, 249, 246, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.65);
    transition: box-shadow 520ms var(--e-out), border-color 520ms var(--e-out),
                background-color 520ms var(--e-out);
    will-change: transform;
    cursor: pointer;
}
/* Gold spine down the leading edge; grows to full height on hover */
.rl-card::before {
    content: "";
    position: absolute;
    left: 0; top: 18%;
    width: 3px; height: 34%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    transition: top 620ms var(--e-out), height 620ms var(--e-out), opacity 420ms var(--e-out);
    opacity: 0.75;
}
.rl-card:hover::before, .rl-card:focus-within::before { top: 6%; height: 88%; opacity: 1; }
/* Warm wash from the leading edge on hover */
.rl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 90% at 0% 50%, rgba(213, 180, 115, 0.14), transparent 62%);
    opacity: 0;
    transition: opacity 560ms var(--e-out);
    pointer-events: none;
    z-index: 0;
}
.rl-card:hover::after, .rl-card:focus-within::after { opacity: 1; }
/* Big ghosted ordinal, anchoring the card in the sequence */
.rl-ghost-num {
    position: absolute;
    right: -0.08em;
    bottom: -0.32em;
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-size: clamp(7rem, 12vw, 11rem);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.rl-ghost-num { color: rgba(250, 249, 246, 0.055); }
.rl-card > *:not(.rl-ghost-num):not(.rl-reveal) { position: relative; z-index: 1; }

/* Floating satellite chips around a card */
.rl-sat {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.8em;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(250, 249, 246, 0.96);
    color: var(--green-deep);
    border: 1px solid rgba(213, 180, 115, 0.55);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    will-change: transform;
    transition: transform 560ms var(--e-spring), box-shadow 460ms var(--e-out),
                background-color 460ms var(--e-out), color 460ms var(--e-out);
}
.rl-sat i { color: var(--gold-ink); font-size: 9px; }
.rl-slot:hover .rl-sat {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    box-shadow: 0 18px 36px -14px rgba(213, 180, 115, 0.75);
}
.rl-slot:hover .rl-sat-a { transform: translate(-6px, -10px) rotate(-4deg) scale(1.06); }
.rl-slot:hover .rl-sat-b { transform: translate(8px, 8px) rotate(3deg) scale(1.06); }
.rl-sat-a { top: -14px; left: -10px; }
.rl-sat-b { bottom: -14px; right: -8px; }
@media (max-width: 767px) {
    .rl-sat-a { top: -12px; left: 8px; }
    .rl-sat-b { bottom: -12px; right: 8px; }
}
.rl-card:hover, .rl-card:focus-within {
    background: linear-gradient(158deg, rgba(250, 249, 246, 0.12) 0%, rgba(250, 249, 246, 0.04) 100%);
    box-shadow: 0 44px 84px -28px rgba(0, 0, 0, 0.72);
    border-color: rgba(213, 180, 115, 0.55);
    z-index: 5;
}

.rl-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    font-weight: 600;
    color: var(--gold-lift);
}
.rl-step {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: rgba(250, 249, 246, 0.62);   /* 5.2:1 on the card surface */
}
.rl-icon {
    width: 58px; height: 58px;
    border-radius: 18px;
    display: grid; place-items: center;
    font-size: 21px;
    background: rgba(213, 180, 115, 0.13);
    border: 1px solid rgba(213, 180, 115, 0.34);
    color: var(--gold);
    transition: transform 560ms var(--e-spring), background-color 460ms var(--e-out),
                border-color 460ms var(--e-out);
}
.rl-card:hover .rl-icon {
    transform: scale(1.08) rotate(-5deg);
    background: rgba(213, 180, 115, 0.22);
    border-color: rgba(213, 180, 115, 0.6);
}
.rl-name { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.14; color: var(--paper); }
.rl-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-lift);
}
.rl-body { color: rgba(250, 249, 246, 0.78); }

/* Always-visible proof strip: the card carries evidence without hover */
.rl-proof {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
}
.rl-proof span {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(250, 249, 246, 0.72);
}
.rl-proof b { color: var(--gold-lift); font-weight: 600; }
.rl-proof i { color: var(--gold); font-size: 9px; }


/* Hover reveal: the agent's OUTPUT slides up over the lower half.
   Identity and description stay readable at rest, so the card is never
   dependent on hover to make sense (touch, keyboard, print all fine). */
.rl-reveal {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(1.3rem, 2vw, 1.9rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: linear-gradient(180deg, rgba(23, 29, 20, 0) 0%, var(--green-deep) 22%, #141A12 100%);
    transform: translateY(101%);
    transition: transform 620ms var(--e-in-out);
    z-index: 3;
    border-top: 1px solid rgba(213, 180, 115, 0.28);
}
.rl-card:hover .rl-reveal, .rl-card:focus-within .rl-reveal { transform: translateY(0); }
.rl-out-line {
    display: flex; align-items: center; gap: 0.6em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: rgba(250, 249, 246, 0.7);
}
.rl-out-line b { color: var(--gold); font-weight: 600; }
.rl-out-line .ok { color: #8FBF7A; }
.rl-reveal p { color: rgba(250, 249, 246, 0.86); }
.rl-reveal .rl-cap {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}
.rl-reveal a, .rl-reveal button {
    color: var(--gold);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
}

@media (max-width: 900px) {
    .rl-row, .rl-row.is-right > .rl-slot, .rl-row.is-left > .rl-slot {
        display: block;
        grid-column: auto;
    }
    .rl-row { margin-bottom: 2.5rem; }
    .rl-card { min-height: 0; }
    #rl-thread, .rl-baton { display: none; }
    /* Touch has no hover: output sits inline instead of behind a gesture */
    .rl-reveal {
        position: static; transform: none; border-radius: 18px;
        margin-top: 1.1rem; padding: 1rem; border-top: 0;
        background: rgba(20, 26, 18, 0.72);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION · THE WORKFORCE  (legacy pinned relay, retained for reuse)
   A pinned control room. The left rail is the sequence; the right
   stage renders that agent's actual output. Showing the relay rather
   than a grid makes the system legible as a process, not a feature list.
   ═══════════════════════════════════════════════════════════════════ */
#workforce {
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(213,180,115,0.10), transparent 60%),
        linear-gradient(174deg, var(--green) 0%, var(--green-deep) 58%, #1D241A 100%);
    position: relative;
}
.wf-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(213,180,115,0.09) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.wf-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.wf-steps { margin-top: -100vh; position: relative; z-index: 1; pointer-events: none; }
.wf-step { height: 78vh; }

/* Left rail */
.wf-rail { position: relative; }
.wf-spine {
    position: absolute;
    left: 13px; top: 6px; bottom: 6px;
    width: 1px;
    background: rgba(250, 249, 246, 0.16);
    overflow: hidden;
}
.wf-spine i {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 700ms var(--e-out);
}
.wf-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 1rem;
    padding: 0.62rem 0;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}
.wf-node {
    width: 27px; height: 27px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(250, 249, 246, 0.22);
    background: var(--green-deep);
    color: rgba(250, 249, 246, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    transition: background-color 460ms var(--e-out), color 460ms var(--e-out),
                border-color 460ms var(--e-out), transform 520ms var(--e-spring);
    flex-shrink: 0;
    z-index: 2;
}
.wf-item.is-on .wf-node,
.wf-item.is-done .wf-node { background: var(--gold); color: var(--green-deep); border-color: var(--gold); }
.wf-item.is-on .wf-node { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(213, 180, 115, 0.16); }
.wf-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: rgba(250, 249, 246, 0.42);
    font-size: clamp(1rem, 1.35vw, 1.32rem);
    line-height: 1.25;
    transition: color 460ms var(--e-out), transform 520ms var(--e-out);
}
.wf-item.is-on .wf-name { color: var(--paper); transform: translateX(4px); }
.wf-item.is-done .wf-name { color: rgba(250, 249, 246, 0.62); }
.wf-item:hover .wf-name { color: rgba(250, 249, 246, 0.85); }
.wf-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(213, 180, 115, 0);
    display: block;
    margin-top: 0.2rem;
    transition: color 460ms var(--e-out);
}
.wf-item.is-on .wf-role { color: rgba(213, 180, 115, 0.9); }

/* Right stage */
.wf-stage {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(158deg, rgba(250,249,246,0.075), rgba(250,249,246,0.02));
    border: 1px solid rgba(250, 249, 246, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 46px 90px -46px rgba(0, 0, 0, 0.66);
    aspect-ratio: 16 / 11;
    max-height: 62vh;
}
.wf-panel {
    position: absolute;
    inset: 0;
    padding: clamp(1.3rem, 2.2vw, 2.2rem);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition: opacity 560ms var(--e-out), transform 720ms var(--e-out);
    pointer-events: none;
}
.wf-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wf-chip {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
    padding: 0.42em 0.85em;
    border: 1px solid rgba(213,180,115,0.32);
    border-radius: 999px;
    background: rgba(213,180,115,0.08);
    align-self: flex-start;
}
.wf-out {
    flex: 1;
    margin-top: 1.1rem;
    border-radius: 16px;
    background: rgba(18, 22, 31, 0.5);
    border: 1px solid rgba(250, 249, 246, 0.10);
    padding: clamp(0.9rem, 1.5vw, 1.35rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wf-line {
    display: flex; align-items: center; gap: 0.7em;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(9.5px, 0.85vw, 11.5px);
    color: rgba(250, 249, 246, 0.62);
    padding: 0.42em 0;
    border-bottom: 1px solid rgba(250, 249, 246, 0.06);
    opacity: 0;
    transform: translateY(6px);
}
.wf-panel.is-on .wf-line { animation: wf-line-in 520ms var(--e-out) forwards; }
.wf-panel.is-on .wf-line:nth-child(1) { animation-delay: 120ms; }
.wf-panel.is-on .wf-line:nth-child(2) { animation-delay: 210ms; }
.wf-panel.is-on .wf-line:nth-child(3) { animation-delay: 300ms; }
.wf-panel.is-on .wf-line:nth-child(4) { animation-delay: 390ms; }
.wf-panel.is-on .wf-line:nth-child(5) { animation-delay: 480ms; }
@keyframes wf-line-in { to { opacity: 1; transform: none; } }
.wf-line b { color: var(--gold); font-weight: 600; }
.wf-line .ok { color: #8FBF7A; }
.wf-desc { color: rgba(250, 249, 246, 0.76); }
.wf-metric { font-family: 'Playfair Display', serif; color: var(--paper); }
.wf-bar { height: 3px; border-radius: 3px; background: rgba(250,249,246,0.12); overflow: hidden; }
.wf-bar i { display: block; height: 100%; width: var(--w, 50%); background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transform-origin: left; }
.wf-panel.is-on .wf-bar i { animation: bar-in 900ms var(--e-out) both; }

/* Mobile: no pin, sequential cards */
@media (max-width: 1023px) {
    .wf-viewport { position: static; height: auto; display: block; }
    .wf-steps { margin-top: 0; }
    .wf-step { height: auto; }
    .wf-stage { aspect-ratio: 4 / 3; max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION · WHY MOST AI CONTENT FAILS  (#ideology-section)
   The claim used to be asserted in one paragraph and left there. It is
   now DEMONSTRATED: the category's copy is set beside ours and struck
   through line by line as you scroll, so the reader arrives at the
   verdict before they read it. Concrete contrast beats an assertion.
   ═══════════════════════════════════════════════════════════════════ */
.idl-stage {
    position: relative;
    border-radius: clamp(18px, 2.4vw, 34px);
    border: 1px solid rgba(213, 180, 115, 0.5);
    background:
        radial-gradient(ellipse 70% 60% at 84% 98%, rgba(213, 180, 115, 0.12), transparent 62%),
        linear-gradient(158deg, var(--green) 0%, #343E2F 44%, #222A1C 100%);
    box-shadow: 0 30px 84px -34px rgba(26, 32, 44, 0.55);
    /* clip, NOT hidden: `hidden` makes this a scroll container, and every
       animation-timeline: view() inside would then resolve against a box
       that never scrolls, so the strike-throughs would never play. `clip`
       crops identically (rounded corners included) without that. The
       `hidden` line above it is the fallback for browsers without clip. */
    overflow: hidden;
    overflow: clip;
    padding: clamp(2.4rem, 5vw, 5.4rem) clamp(1.3rem, 4vw, 4.4rem);
}
.idl-stage-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(250, 249, 246, 0.16) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 34%, transparent 12%, #000 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 34%, transparent 12%, #000 78%);
    opacity: 0.55;
}
.idl-head {
    font-size: clamp(2.2rem, 5.4vw, 5rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: rgba(250, 249, 246, 0.74);
}
.idl-head .idl-em {
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}
/* The bright duplicate rides a halo mask driven by the pointer (and by
   scroll on touch). Position comes from --sx/--sy, set in JS. */
.idl-spot {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 340ms var(--e-out);
    mix-blend-mode: plus-lighter;
    -webkit-mask-image: radial-gradient(340px circle at var(--sx, -600px) var(--sy, -600px), #000 0%, transparent 100%);
    mask-image: radial-gradient(340px circle at var(--sx, -600px) var(--sy, -600px), #000 0%, transparent 100%);
}
.idl-spot .idl-head { color: #FFFFFF; text-shadow: 0 0 26px rgba(255, 255, 255, 0.55); }
.idl-spot .idl-head .idl-em { color: #FFF0D2; }
.idl-sub {
    font-size: clamp(0.98rem, 1.5vw, 1.22rem);
    line-height: 1.65;
    color: rgba(250, 249, 246, 0.78);
}

/* ── The demonstration ───────────────────────────────────────────── */
.idl-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
    margin-top: clamp(2.4rem, 4.6vw, 4.4rem);
    align-items: stretch;
}
@media (min-width: 1024px) {
    .idl-compare { grid-template-columns: 1fr auto 1fr; gap: 1.4rem; }
}
.idl-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    border: 1px solid rgba(250, 249, 246, 0.14);
    background: linear-gradient(160deg, rgba(250, 249, 246, 0.06), rgba(250, 249, 246, 0.02));
    transition: transform 520ms var(--e-out), border-color 420ms var(--e-out);
}
.idl-panel-proof {
    border-color: rgba(213, 180, 115, 0.42);
    background: linear-gradient(160deg, rgba(213, 180, 115, 0.13), rgba(213, 180, 115, 0.035));
}
@media (hover: hover) and (pointer: fine) {
    .idl-panel:hover { transform: translateY(-5px); }
    .idl-panel-proof:hover { border-color: rgba(213, 180, 115, 0.75); }
}
.idl-tag {
    display: inline-flex; align-items: center; gap: 0.6em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
}
.idl-tag-bad  { color: rgba(250, 249, 246, 0.68); }
.idl-tag-good { color: var(--gold); }
.idl-p-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    color: var(--paper);
    margin: 0.7rem 0 1.2rem;
}

/* Left: the sameness trap. Every line is struck through as it scrolls
   past, so the panel physically cancels itself out while you read it. */
.idl-lines { list-style: none; margin: 0; padding: 0; }
.idl-lines li {
    position: relative;
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-size: clamp(1.02rem, 1.55vw, 1.3rem);
    line-height: 1.35;
    color: rgba(250, 249, 246, 0.7);
    padding: 0.52rem 0;
}
.idl-lines li::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 52%;
    height: 1px;
    background: rgba(213, 180, 115, 0.85);
    transform: scaleX(1);
    transform-origin: left;
}
/* Right: evidence. Each badge locks in as its row arrives. */
.idl-facts { list-style: none; margin: 0; padding: 0; }
.idl-facts li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 0.72rem 0;
    border-bottom: 1px solid rgba(250, 249, 246, 0.09);
}
.idl-facts li:last-child { border-bottom: 0; }
.idl-chk {
    width: 27px; height: 27px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 10px;
    color: var(--gold);
    border: 1px solid rgba(213, 180, 115, 0.6);
    background: rgba(213, 180, 115, 0.16);
}
.idl-src {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-lift);
    margin-bottom: 0.28rem;
}
.idl-facts p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(250, 249, 246, 0.82);
    margin: 0;
}
.idl-facts p b { color: var(--paper); font-weight: 700; }

.idl-verdict {
    margin-top: auto;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(250, 249, 246, 0.13);
    display: flex; align-items: center; gap: 0.7rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: rgba(250, 249, 246, 0.78);
}
.idl-verdict b { color: var(--paper); }
.idl-verdict-good b { color: var(--gold); }
.idl-verdict i { font-size: 11px; opacity: 0.75; }

.idl-vs {
    display: grid; place-items: center;
    position: relative;
    font-family: 'Instrument Serif', 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.35rem;
    color: rgba(250, 249, 246, 0.6);
    padding: 0.4rem 0;
}
.idl-vs::before, .idl-vs::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 249, 246, 0.2), transparent);
}
.idl-vs::before { top: 12%; }
.idl-vs::after  { bottom: 12%; }
@media (min-width: 1024px) {
    .idl-vs { width: 3.4rem; padding: 0; }
    .idl-vs::before, .idl-vs::after {
        left: 50%; right: auto; top: auto; bottom: auto;
        width: 1px; height: 34%;
        background: linear-gradient(180deg, transparent, rgba(250, 249, 246, 0.24), transparent);
    }
    .idl-vs::before { top: 4%; }
    .idl-vs::after  { bottom: 4%; }
}
.idl-close {
    text-align: center;
    margin-top: clamp(1.8rem, 3vw, 2.8rem);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    line-height: 1.5;
    color: rgba(250, 249, 246, 0.78);
}
.idl-close b { color: var(--gold); font-weight: 600; }

/* Scroll-driven, zero JS. Defaults above are the FINISHED state, so a
   browser without view() timelines simply shows the completed panel. */
@supports (animation-timeline: view()) {
    .idl-lines li::after {
        transform: scaleX(0);
        animation: idl-strike linear both;
        animation-timeline: view();
        animation-range: entry 26% entry 88%;
    }
    .idl-chk {
        animation: idl-lock linear both;
        animation-timeline: view();
        animation-range: entry 18% entry 74%;
    }
}
@keyframes idl-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes idl-lock {
    from { transform: scale(0.82); background-color: rgba(213, 180, 115, 0); border-color: rgba(213, 180, 115, 0.18); }
    to   { transform: scale(1);    background-color: rgba(213, 180, 115, 0.16); border-color: rgba(213, 180, 115, 0.6); }
}

/* NOTE: #close-section carries no kinetic type band. Two attempts lived
   here (a centred rAF marquee, then edge-anchored scroll-tied bands) and
   both were rejected: moving type behind a centred CTA competes with the
   copy no matter how it is tuned. The section's depth now comes from the
   topographic rings, the radial glow and the drifting outlines. Do not
   reintroduce a marquee here. */

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .foot-mark.is-lit .fm-sweep { animation: none; background-image: none; }
    .idl-lines li::after { animation: none !important; transform: scaleX(1) !important; }
    .idl-chk { animation: none !important; transform: none !important; }
    .idl-panel:hover { transform: none; }
    .wf-line { opacity: 1 !important; transform: none !important; animation: none !important; }
    .wf-panel { transition-duration: 1ms; }
    .mq-track, .mq-adv-track { animation: none !important; transform: none !important; }
    .drift-a, .drift-b, .stage-bar i, .foot-aurora { animation: none !important; }
    .rise-armed, .stagger-armed > *, .kin-fade { opacity: 1 !important; transform: none !important; }
    .head-img { transform: none !important; }
    .act { opacity: 1 !important; }
    .stage-layer { transition-duration: 1ms; }
    .agent-card:hover, .foot-link:hover, .foot-social:hover { transform: none !important; }
    .ind-card { opacity: 1 !important; transform: none !important; }
    .ind-dot.is-active i { animation: none !important; transform: scaleX(1); }
    #ac-dot, #ac-ring { display: none !important; }
    body.atelier-cursor, body.atelier-cursor a, body.atelier-cursor button { cursor: auto !important; }
}