/* ═══════════════════════════════════════════════
   LOOM style.css
   Visual system: infrastructure under observation
   ═══════════════════════════════════════════════ */

:root{
    /* Palette */
    --black:#000000;
    --obsidian:#0a0a0a;
    --teal:#4dd4a8;
    --teal-deep:#0e7a5e;
    --teal-dark:#043828;
    --teal-glow:rgba(77,212,168,.12);
    --teal-ghost:rgba(77,212,168,.04);
    --text-1:rgba(245,245,247,.88);
    --text-2:rgba(245,245,247,.52);   /* 5.31:1 on obsidian (WCAG AA) */
    --text-3:rgba(245,245,247,.48);   /* 4.67:1 on obsidian (WCAG AA) */
    --text-4:rgba(245,245,247,.08);
    --line-faint:rgba(245,245,247,.18); /* decorative lines only, never text */

    /* Typography */
    --font-display:"Syne",system-ui,sans-serif;
    --font-body:"DM Sans",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",monospace;

    /* Easing */
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    /* Spacing */
    --section-pad:clamp(80px,12vh,140px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
    height:100%;
    scroll-behavior:smooth;
}
body{
    min-height:100%;
    background:var(--black);
    color:var(--text-1);
    font-family:var(--font-body);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
body.is-booting{overflow:hidden}
body.is-booting .content{pointer-events:none}

::selection{background:rgba(77,212,168,.2);color:#fff}


/* ═══ NAV MARK (fixed top-left) ══════════════ */

.nav-mark{
    position:fixed;
    top:clamp(20px,3vh,36px);
    /* Spine is at clamp(24px,4vw,56px), center the mark just right of it */
    left:clamp(28px,4.3vw,62px);
    width:clamp(52px,6vw,76px);
    height:clamp(52px,6vw,76px);
    z-index:80;
    display:block;
    text-decoration:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out),transform .4s var(--ease-out);
    filter:drop-shadow(0 0 8px rgba(77,212,168,.15));
    animation:breathe-nav 8s ease-in-out infinite;
}
body:not(.is-booting) .nav-mark{opacity:1}
.nav-mark svg{width:100%;height:100%;display:block;overflow:visible}
.nav-mark:hover{transform:scale(1.08)}

@keyframes breathe-nav{
    0%,100%{filter:drop-shadow(0 0 4px rgba(77,212,168,.15))}
    50%{filter:drop-shadow(0 0 10px rgba(77,212,168,.3))}
}


/* ═══ CANVAS ══════════════════════════════════ */

#bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}


/* ═══ NOISE OVERLAY ═══════════════════════════ */

.noise{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.035;
    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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:256px 256px;
}


/* ═══ VERTICAL SPINE ══════════════════════════ */

.spine{
    position:fixed;
    left:clamp(24px,4vw,56px);
    top:0;bottom:0;
    width:1px;
    z-index:50;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out);
}
body:not(.is-booting) .spine{opacity:1}

.spine-line{
    position:absolute;
    inset:0;
    width:1px;
    background:var(--text-4);
}

.spine-fill{
    position:absolute;
    top:0;left:0;
    width:1px;
    height:0%;
    background:linear-gradient(to bottom,var(--teal),var(--teal-deep));
    transition:height .1s linear;
    box-shadow:0 0 8px var(--teal-glow);
}


/* ═══ SECTION MARKERS ═════════════════════════ */

.section-markers{
    position:fixed;
    right:clamp(20px,3vw,48px);
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:24px;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out);
}
body:not(.is-booting) .section-markers{opacity:1}

.marker{
    display:flex;
    align-items:center;
    gap:8px;
    opacity:.15;
    transition:opacity .5s;
}
.marker.is-active{opacity:1}

.marker::before{
    content:'';
    width:16px;height:1px;
    background:var(--line-faint);
    transition:background .5s,width .5s;
}
.marker.is-active::before{
    width:28px;
    background:var(--teal);
}

.marker-num{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:300;
    letter-spacing:.1em;
    color:var(--text-3);
    transition:color .5s;
}
.marker.is-active .marker-num{color:var(--teal)}


/* ═══ BOOT ════════════════════════════════════ */

.boot{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:var(--black);
    transition:opacity .4s var(--ease-out),visibility .4s;
}
.boot.is-done{opacity:0;pointer-events:none;visibility:hidden}

/* Keep the LeadConnector chat widget out of the boot splash. It injects at a very
   high z-index, so it would otherwise float over the loading screen. */
body.is-booting chat-widget,
body.is-booting [id^="lc_"],
body.is-booting [class*="lc_text-widget"],
body.is-booting [class*="chat-widget"],
body.is-booting iframe[src*="leadconnectorhq"]{
    opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
}

.boot-mark{width:clamp(180px,28vw,320px);height:clamp(180px,28vw,320px)}
.boot-mark svg{width:100%;height:100%;overflow:visible}

.m-stroke{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-dasharray:1800;stroke-dashoffset:1800;filter:url(#glow);opacity:0}
.m-stroke-i{stroke-dasharray:1000;stroke-dashoffset:1000}
.m-glow{fill:none;stroke:var(--teal);stroke-width:6;stroke-dasharray:1800;stroke-dashoffset:1800;opacity:0;filter:blur(8px)}
.m-glow-i{stroke-dasharray:1000;stroke-dashoffset:1000}
.m-fill{opacity:0}

.draw-outer .m-stroke:not(.m-stroke-i),
.draw-outer .m-glow:not(.m-glow-i){
    opacity:1;stroke-dashoffset:0;
    transition:stroke-dashoffset .85s cubic-bezier(.4,0,.2,1),opacity .2s;
}
.draw-inner .m-stroke-i,
.draw-inner .m-glow-i{
    opacity:1;stroke-dashoffset:0;
    transition:stroke-dashoffset .55s .05s cubic-bezier(.4,0,.2,1),opacity .2s;
}
.fill-in .m-fill{opacity:1;transition:opacity .4s var(--ease-out)}
.fill-in .m-stroke,.fill-in .m-glow{opacity:0;transition:opacity .3s .1s}
.mark-pulse .boot-mark{animation:pulse .6s ease-in-out}

/* ═══ WEAVE SPLASH (canvas) ═══════════════════ */
.boot-weave{
    position:fixed;inset:0;width:100%;height:100%;
    display:block;pointer-events:none;
}

.boot-text{
    position:fixed;left:0;right:0;bottom:6%;text-align:center;z-index:2;
    font-family:var(--font-display);
    font-size:clamp(13px,1.5vw,16px);
    font-weight:400;
    letter-spacing:.5em;
    color:var(--text-2);
    opacity:0;transform:translateY(10px);
}
.boot-text.is-on{
    opacity:1;transform:translateY(0);
    transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}

.boot-skip{
    position:absolute;bottom:clamp(20px,3vh,40px);left:50%;transform:translateX(-50%);
    background:none;border:none;cursor:pointer;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--text-3);opacity:0;
    transition:opacity .5s,color .3s;
}
.boot-skip.is-on{opacity:1}
.boot-skip:hover{color:var(--text-2)}


/* ═══ CONTENT ═════════════════════════════════ */

.content{
    position:relative;
    z-index:2;
    opacity:0;
    transition:opacity 1.4s var(--ease-out);
}
.content.is-visible{opacity:1}


/* ═══ SECTIONS (shared) ══════════════════════ */

.s{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--section-pad) clamp(32px,8vw,120px);
    overflow:hidden;
}

.s-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1100px;
}

.s-centered{text-align:center}

.s-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(48px,6vw,96px);
    align-items:center;
}

.s-label{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:400;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:24px;
    padding-left:2px;
}

h2{
    font-family:var(--font-display);
    font-size:clamp(32px,5vw,64px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--text-1);
}
h2 + h2{margin-top:4px}

.accent{color:var(--teal)}

.s-body{
    margin-top:28px;
    font-size:clamp(15px,1.1vw,18px);
    line-height:1.7;
    color:var(--text-2);
    max-width:520px;
}
.s-centered .s-body{margin-left:auto;margin-right:auto}


/* ═══ HERO ════════════════════════════════════ */

.s-hero{min-height:100vh;padding-bottom:0}

.hero-mark{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:clamp(340px,50vw,680px);
    pointer-events:none;
    opacity:.06;
    filter:drop-shadow(0 0 80px rgba(77,212,168,.04));
    animation:breathe 10s ease-in-out infinite;
}
.hero-mark-svg{width:100%;height:auto;display:block}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.hero-wordmark{
    font-family:var(--font-display);
    font-size:clamp(56px,9vw,120px);
    font-weight:800;
    letter-spacing:.08em;
    line-height:1;
    margin-bottom:clamp(20px,3vh,40px);
    background:linear-gradient(180deg,rgba(245,245,247,.95) 0%,rgba(77,212,168,.5) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 40px rgba(77,212,168,.08));
}

.hero-headline{
    font-family:var(--font-display);
    font-size:clamp(28px,4.5vw,62px);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.035em;
    color:var(--text-1);
}

.hero-lede{
    margin-top:clamp(16px,2.2vh,26px);
    font-family:var(--font-body);
    font-size:clamp(15px,1.5vw,19px);
    line-height:1.5;
    color:var(--text-2);
}

.hero-sub{
    margin-top:20px;
    font-family:var(--font-mono);
    font-size:clamp(11px,.8vw,13px);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--text-3);
}

.scroll-cue{
    position:fixed;
    bottom:clamp(24px,3vh,48px);
    right:clamp(24px,3vw,56px);
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:cue-in 1s 1.2s var(--ease-out) forwards;
    pointer-events:none;
    transition:opacity .5s var(--ease-out);
}
.scroll-cue.is-hidden{opacity:0 !important}

.scroll-cue-text{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--text-3);
}

.scroll-cue-line{
    width:1px;
    height:40px;
    background:linear-gradient(to bottom,var(--teal),transparent);
    animation:cue-pulse 2.5s ease-in-out infinite;
}


/* ═══ CHAOS-TO-LOGO OVERLAY ══════════════════ */

.viz-chaos-wrap{
    position:absolute;
    left:0;right:0;
    z-index:3;
    pointer-events:none;
    /* top and height set by JS to span pages 2 & 3 */
}

.viz-chaos{
    position:absolute;
    inset:0;
}


/* ═══ FLOATING MARKS (root level) ════════════ */

.float-field{
    position:fixed;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}

.float-mark{
    position:absolute;
    color:var(--teal);
    animation:rise linear infinite;
    will-change:transform;
}
.float-mark svg{width:100%;height:100%;display:block}

/* Stagger positions, sizes, opacity, speed: each mark unique */
.fm-1 {width:18px;left:8%;--fm-o:.06;animation-duration:18s;animation-delay:-2s}
.fm-2 {width:24px;left:18%;--fm-o:.08;animation-duration:22s;animation-delay:-8s}
.fm-3 {width:14px;left:28%;--fm-o:.05;animation-duration:16s;animation-delay:-12s}
.fm-4 {width:30px;left:38%;--fm-o:.10;animation-duration:24s;animation-delay:-4s}
.fm-5 {width:16px;left:48%;--fm-o:.06;animation-duration:19s;animation-delay:-15s}
.fm-6 {width:22px;left:56%;--fm-o:.07;animation-duration:21s;animation-delay:-7s}
.fm-7 {width:12px;left:65%;--fm-o:.04;animation-duration:17s;animation-delay:-10s}
.fm-8 {width:26px;left:74%;--fm-o:.09;animation-duration:23s;animation-delay:-1s}
.fm-9 {width:15px;left:82%;--fm-o:.05;animation-duration:18s;animation-delay:-14s}
.fm-10{width:20px;left:90%;--fm-o:.07;animation-duration:20s;animation-delay:-6s}
.fm-11{width:10px;left:14%;--fm-o:.04;animation-duration:15s;animation-delay:-11s}
.fm-12{width:28px;left:43%;--fm-o:.08;animation-duration:25s;animation-delay:-3s}
.fm-13{width:13px;left:70%;--fm-o:.05;animation-duration:17s;animation-delay:-9s}

/* Additional distribution marks */
.fm-s1 {width:36px;left:5%;--fm-o:.10;animation-duration:26s;animation-delay:-5s}
.fm-s2 {width:14px;left:15%;--fm-o:.04;animation-duration:16s;animation-delay:-13s}
.fm-s3 {width:22px;left:25%;--fm-o:.07;animation-duration:20s;animation-delay:-2s}
.fm-s4 {width:10px;left:35%;--fm-o:.03;animation-duration:14s;animation-delay:-9s}
.fm-s5 {width:32px;left:45%;--fm-o:.09;animation-duration:24s;animation-delay:-7s}
.fm-s6 {width:16px;left:55%;--fm-o:.05;animation-duration:18s;animation-delay:-15s}

@keyframes rise{
    0%{transform:translateY(110vh) rotate(0deg);opacity:0}
    5%{opacity:var(--fm-o,.06)}
    90%{opacity:var(--fm-o,.06)}
    100%{transform:translateY(-20vh) rotate(12deg);opacity:0}
}


/* ═══ PROTOCOL CARDS ═════════════════════════ */

.protocol-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,2vw,32px);
    margin-top:clamp(40px,5vh,72px);
    text-align:left;
}
.protocol-grid.grid-4{grid-template-columns:repeat(2,1fr)}

.proto-card{
    position:relative;
    padding:clamp(24px,2.5vw,40px);
    border:1px solid var(--text-4);
    border-radius:12px;
    background:rgba(10,10,10,.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:border-color .5s,transform .5s var(--ease-out),box-shadow .5s;
}
.proto-card:hover{
    border-color:rgba(77,212,168,.2);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(77,212,168,.08);
}

.proto-icon{
    width:48px;height:48px;
    color:var(--teal);
    margin-bottom:20px;
}
.proto-icon svg{width:100%;height:100%}

.proto-card h3{
    font-family:var(--font-display);
    font-size:clamp(20px,1.6vw,26px);
    font-weight:600;
    letter-spacing:-.02em;
    color:var(--text-1);
    margin-bottom:12px;
}

.proto-card p{
    font-size:clamp(13px,.95vw,15px);
    line-height:1.65;
    color:var(--text-2);
}

.proto-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--teal);
    text-decoration:none;
    transition:gap .3s var(--ease-out),color .3s;
}
.proto-link:hover{gap:12px;color:var(--text-1)}


/* ═══ WORK / PORTFOLIO CARDS ══════════════════ */

.work-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(18px,2.2vw,32px);
    margin-top:clamp(40px,5vh,72px);
    text-align:left;
}

.work-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--text-4);
    border-radius:14px;
    overflow:hidden;
    background:rgba(10,10,10,.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-decoration:none;
    color:inherit;
    transition:border-color .5s,transform .5s var(--ease-out),box-shadow .5s;
}
.work-card:hover{
    border-color:rgba(77,212,168,.35);
    transform:translateY(-6px);
    box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(77,212,168,.12),0 0 40px rgba(77,212,168,.08);
}

.work-shot{
    position:relative;
    aspect-ratio:1200/630;
    overflow:hidden;
    border-bottom:1px solid var(--text-4);
    background:var(--obsidian);
}
.work-shot img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    filter:saturate(.92);
    transition:transform .6s var(--ease-out),filter .6s var(--ease-out);
}
.work-card:hover .work-shot img{transform:scale(1.045);filter:saturate(1.05)}
.work-shot::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.4));
    pointer-events:none;
}

.work-body{
    flex:1;
    padding:clamp(20px,2vw,28px);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.work-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.work-card h3{
    font-family:var(--font-display);
    font-size:clamp(19px,1.5vw,24px);
    font-weight:600;
    letter-spacing:-.02em;
    color:var(--text-1);
}
.work-tag{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--teal);
    border:1px solid rgba(77,212,168,.25);
    border-radius:100px;
    padding:3px 10px;
    white-space:nowrap;
}
.work-card p{
    font-size:clamp(13px,.95vw,15px);
    line-height:1.6;
    color:var(--text-2);
}
.work-cue{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--teal);
    transition:gap .3s var(--ease-out);
}
.work-card:hover .work-cue{gap:12px}


/* ═══ CTA SECTION ════════════════════════════ */

.cta-mark{
    width:clamp(60px,8vw,100px);
    margin:0 auto clamp(28px,3vh,48px);
    opacity:.3;
    animation:breathe 10s ease-in-out infinite;
}
.cta-mark-svg{width:100%;height:auto;display:block}

.cta-links{
    display:flex;
    gap:16px;
    justify-content:center;
    margin-top:clamp(32px,4vh,56px);
    flex-wrap:wrap;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border:1px solid var(--text-4);
    border-radius:8px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:400;
    color:var(--text-2);
    text-decoration:none;
    letter-spacing:.02em;
    transition:all .4s var(--ease-out);
}
.cta-btn svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.cta-btn:hover{
    color:var(--text-1);
    border-color:var(--line-faint);
    transform:translateY(-2px);
}
.cta-btn:hover svg{transform:translate(2px,-2px)}

.cta-btn-primary{
    background:var(--teal-deep);
    border-color:var(--teal-deep);
    color:rgba(245,245,247,.95);
}
.cta-btn-primary:hover{
    background:var(--teal);
    border-color:var(--teal);
    color:var(--black);
    box-shadow:0 0 32px var(--teal-glow);
}

.cta-note{
    margin-top:24px;
    font-size:clamp(11px,.8vw,13px);
    color:var(--text-3);
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.6;
}


/* ═══ FOOTER ═════════════════════════════════ */

.foot{
    position:relative;
    z-index:2;
    padding:40px clamp(32px,8vw,120px);
    border-top:1px solid var(--text-4);
}

.foot-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.1em;
    color:var(--text-3);
}

.foot-brand{
    letter-spacing:.3em;
    color:var(--text-2);
}

.foot-sep{opacity:.3}


/* ═══ FLOATING GEOMETRY ══════════════════════ */

.geo{
    position:absolute;
    pointer-events:none;
    will-change:transform;
}

/* Diamond shapes at different sizes */
.geo::before{
    content:'';
    display:block;
    border:1px solid var(--teal);
    opacity:.06;
    transform:rotate(45deg);
    border-radius:2px;
}

.geo-1{top:15%;right:12%;z-index:1}
.geo-1::before{width:120px;height:120px}

.geo-2{bottom:20%;left:8%;z-index:1}
.geo-2::before{width:80px;height:80px;border-color:var(--line-faint)}

.geo-3{top:60%;right:25%;z-index:1}
.geo-3::before{width:40px;height:40px}

.geo-4{top:10%;right:8%;z-index:1}
.geo-4::before{width:60px;height:60px}

.geo-5{bottom:15%;left:5%;z-index:1}
.geo-5::before{width:100px;height:100px;border-color:var(--line-faint)}

.geo-6{bottom:10%;right:15%;z-index:1}
.geo-6::before{width:50px;height:50px}

.geo-7{top:20%;left:6%;z-index:1}
.geo-7::before{width:70px;height:70px}

.geo-8{bottom:8%;right:6%;z-index:1}
.geo-8::before{width:90px;height:90px;border-color:var(--line-faint)}


/* ═══ REVEAL ANIMATIONS ══════════════════════ */

/* Text reveal: word-by-word */
.reveal-line{
    display:block;
    overflow:hidden;
}

.reveal-word{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
    transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);
}

.is-revealed .reveal-word{
    transform:translateY(0);
    opacity:1;
}

/* Stagger words within a line */
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(1){transition-delay:.05s}
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(2){transition-delay:.1s}
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(3){transition-delay:.15s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(1){transition-delay:.15s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(2){transition-delay:.2s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(3){transition-delay:.25s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(1){transition-delay:.25s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(2){transition-delay:.3s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(3){transition-delay:.35s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(1){transition-delay:.35s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(2){transition-delay:.4s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(3){transition-delay:.45s}

/* Second h2 blocks + individual elements use JS-set inline transition-delay */

/* Fade reveal */
.reveal-fade{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.is-revealed .reveal-fade{
    opacity:1;
    transform:translateY(0);
}
.is-revealed .reveal-fade[data-delay="0.5"]{transition-delay:.5s}
.is-revealed .reveal-fade[data-delay="0.6"]{transition-delay:.6s}
.is-revealed .reveal-fade[data-delay="0.7"]{transition-delay:.7s}

/* Card reveal */
.reveal-card{
    opacity:0;
    transform:translateY(40px) scale(.97);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.is-revealed .reveal-card{
    opacity:1;
    transform:translateY(0) scale(1);
}
.is-revealed .reveal-card[data-delay="0"]{transition-delay:.1s}
.is-revealed .reveal-card[data-delay="0.15"]{transition-delay:.25s}
.is-revealed .reveal-card[data-delay="0.3"]{transition-delay:.4s}
.is-revealed .reveal-card[data-delay="0.45"]{transition-delay:.55s}


/* ═══ KEYFRAMES ═══════════════════════════════ */

@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}

@keyframes breathe{
    0%,100%{opacity:.06;filter:drop-shadow(0 0 80px rgba(77,212,168,.04))}
    50%{opacity:.09;filter:drop-shadow(0 0 100px rgba(77,212,168,.06))}
}

@keyframes cue-in{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes cue-pulse{
    0%,100%{opacity:.3;height:40px}
    50%{opacity:.7;height:52px}
}

@keyframes float-gentle{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}


/* ═══ SECTION-SPECIFIC TWEAKS ════════════════ */

/* Problem section: body text alignment */
.s-problem .s-body{margin-top:28px}

/* Wedge section: overlay text on orbit */
.s-wedge .s-inner{z-index:3}

/* Surface section: needs more vertical space */
.s-surface{min-height:100vh;padding-top:clamp(100px,14vh,180px);padding-bottom:clamp(100px,14vh,180px)}

/* CTA section */
.s-cta{min-height:90vh}


/* ═══ RESPONSIVE ══════════════════════════════ */

@media(max-width:900px){
    .s-split{
        grid-template-columns:1fr;
        gap:40px;
    }
    /* Plain 3-up grid stacks; the 4-up grid stays a 2x2 on tablets */
    .protocol-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .protocol-grid.grid-4{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .spine{display:none}
    .section-markers{display:none}
}

@media(max-width:600px){
    .s{padding:clamp(60px,10vh,100px) 24px}
    .hero-mark{width:90vw}
    .hero-headline br{display:none}
    .cta-links{flex-direction:column;align-items:center}
    .cta-btn{width:100%;max-width:280px;justify-content:center}
    .geo{display:none}

    /* Single column on phones */
    .protocol-grid.grid-4{grid-template-columns:1fr}
    .work-grid{grid-template-columns:1fr}

    /* Smaller display type so headlines never clip the reveal mask on narrow screens */
    .hero-wordmark{font-size:clamp(44px,12vw,72px)}
    .hero-headline{font-size:clamp(30px,8.5vw,46px)}
    h2{font-size:clamp(26px,8vw,40px)}
    .hero-sub{letter-spacing:.14em}

    .fm-3,.fm-7,.fm-11,.fm-13,.fm-s2,.fm-s4{display:none}

    /* Scroll cue clear of mobile browser chrome */
    .scroll-cue{bottom:max(20px,env(safe-area-inset-bottom,12px));right:20px}

    /* Protocol cards tighter */
    .proto-card{padding:20px}

    /* Ensure viz overlay doesn't interfere with touch */
    .viz-chaos-wrap{z-index:1}
}

/* iOS viewport height fix */
@supports(height:100dvh){
    .s-hero{min-height:100dvh}
    .boot{height:100dvh}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition-duration:0s!important}
    .boot{display:none}
    body.is-booting .content{pointer-events:auto}
    .content{opacity:1!important}
    .reveal-word{transform:none!important;opacity:1!important}
    .reveal-fade{transform:none!important;opacity:1!important}
    .reveal-card{transform:none!important;opacity:1!important}
    .hero-mark{animation:none;opacity:.06}
    #bg{display:none}
    body{background:var(--obsidian)}
    .scroll-cue{animation:none;opacity:1}
}

/* ═══ FAQ ═════════════════════════════════════ */
.s-faq{ min-height:auto; padding-top:clamp(90px,14vh,150px); padding-bottom:clamp(90px,14vh,150px); }
.faq-list{ width:100%; max-width:720px; margin:44px auto 0; text-align:left; }
.faq-q{ border-top:1px solid var(--text-4); }
.faq-q:last-of-type{ border-bottom:1px solid var(--text-4); }
.faq-q > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:22px 2px;
    font-family:var(--font-display); font-size:clamp(16px,1.55vw,20px); font-weight:500; line-height:1.35;
    color:var(--text-1); transition:color .3s var(--ease-out);
}
.faq-q > summary::-webkit-details-marker{ display:none; }
.faq-q > summary:hover{ color:var(--teal); }
.faq-q > summary:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; border-radius:2px; }
.faq-mk{ position:relative; flex:0 0 auto; width:15px; height:15px; }
.faq-mk::before,.faq-mk::after{
    content:""; position:absolute; top:50%; left:50%;
    width:13px; height:1.5px; background:var(--teal);
    transform:translate(-50%,-50%);
    transition:transform .3s var(--ease-out),opacity .3s var(--ease-out);
}
.faq-mk::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-q[open] .faq-mk::after{ opacity:0; transform:translate(-50%,-50%) rotate(0deg); }
.faq-a{ padding:0 2px 24px; max-width:620px; }
.faq-a p{ margin:0; font-family:var(--font-body); font-size:clamp(14px,1.05vw,16px); line-height:1.72; color:var(--text-2); }
.faq-foot{ margin-top:40px; text-align:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--text-3); }
.faq-foot a{ color:var(--teal); text-decoration:none; border-bottom:1px solid var(--text-4); padding-bottom:1px; transition:border-color .3s var(--ease-out); }
.faq-foot a:hover{ border-color:var(--teal); }