:root{
  --canvas:#F7F7F5;
  --panel:#EFEDE7;
  --surface:#FFFFFF;
  --ink:#1A1A18;
  --ink-strong:#0B0B0B;
  --accent:#A60F1B;
  --accent-hover:#73101A;
  --accent-wash:#FBE6E1;
  --gold:#E6A231;
  --text-secondary:#5b5b56;
  --text-quiet:#6E6B68;
  --hero-dark:#17120F;
  --hero-dark-2:#241A16;
  --line:rgba(26,26,24,.10);
  --line-strong:rgba(26,26,24,.28);
  --ease-out:cubic-bezier(.22,.8,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --display:"Dosis","Trebuchet MS",sans-serif;
  --body:"Roboto",system-ui,-apple-system,sans-serif;
  --mono:"Source Code Pro",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .9s var(--ease-soft)}
body.ready{opacity:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:999px;z-index:200;font-weight:500}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* environment layer */
.env{position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 30% 30%,rgba(166,15,27,.06),transparent 70%),radial-gradient(ellipse 50% 40% at 75% 70%,rgba(230,162,49,.07),transparent 70%);animation:envdrift 90s var(--ease-soft) -30s infinite alternate}
@keyframes envdrift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,2%,0)}}

/* type roles */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;line-height:1.05;color:var(--ink-strong);text-wrap:balance}
.kicker{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-quiet)}
.kicker.accent{color:var(--accent)}
.wm{display:block;height:auto}
.nav .wm{width:clamp(140px,14vw,180px);transition:filter .4s}
.nav.solid .wm{filter:invert(1)}
.band.settle .wm{width:min(62vw,400px);margin:0 auto 18px;filter:drop-shadow(0 2px 8px rgba(5,5,10,.7))}
.static .wm{width:min(70vw,300px);margin:14px 0 10px}
.final .wm{width:min(62vw,380px);margin:0 auto 20px}
.pagehead .wm{width:min(50vw,260px);margin-bottom:16px;filter:drop-shadow(0 2px 8px rgba(5,5,10,.7))}
footer .wm{width:200px}
.lede{font-size:18px;line-height:1.65;color:var(--text-secondary);max-width:58ch}
.small{font-size:14.5px;color:var(--text-secondary)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-family:var(--body);font-weight:500;font-size:16px;border:0;cursor:pointer;transition:background .25s var(--ease-soft),transform .25s var(--ease-out),box-shadow .25s var(--ease-soft),color .25s}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.9}
.btn-outline:hover{background:rgba(26,26,24,.05)}
.on-dark .btn-outline:hover{background:rgba(255,255,255,.08)}
.btn svg,.btn img.icn{width:18px;height:18px;flex:none}
.textlink{display:inline-block;font-weight:500;font-size:14.5px;color:inherit;opacity:.8;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s}
.textlink:hover{opacity:1}
@media (pointer:coarse){.btn{min-height:44px}.textlink{padding:8px 0}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,48px);color:#fff;transition:background .4s var(--ease-soft),color .4s var(--ease-soft),box-shadow .4s}
.nav .brand{display:flex;align-items:center}
.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;align-items:center}
.nav ul a{opacity:.85;transition:opacity .25s}
.nav ul a:hover,.nav ul a[aria-current="page"]{opacity:1}
.nav .navcta{display:flex;align-items:center;gap:18px}
.nav .btn-nav{height:40px;padding:0 20px;font-size:12.5px}
.nav.solid{background:rgba(247,247,245,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}

/* mobile hamburger + panel */
.navbtn{display:none;width:40px;height:40px;border:0;background:transparent;color:inherit;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.navbtn span{display:block;width:21px;height:2px;background:currentColor;transition:transform .3s var(--ease-out),opacity .3s}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navpanel{position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--canvas);color:var(--ink);box-shadow:0 16px 34px rgba(0,0,0,.18);transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .3s var(--ease-out),opacity .3s;max-height:calc(100vh - 64px);overflow-y:auto}
.navpanel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.navpanel ul{list-style:none;margin:0;padding:8px clamp(20px,6vw,48px) 24px;display:flex;flex-direction:column}
.navpanel a{display:block;padding:15px 0;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.navpanel .btn{margin-top:18px;width:100%}
@media (max-width:980px){
  .nav{height:64px}
  .nav ul{display:none}
  .nav .navcta .btn-nav{display:none}
  .navbtn{display:flex}
}
@media (min-width:981px){.navpanel{display:none}}

/* ============ HERO (scrub, index.html only) ============ */
.hero{position:relative;height:400vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--hero-dark);color:#fff}
.stage .poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity 1.2s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles i{position:absolute;width:4px;height:4px;border-radius:999px;background:var(--gold);opacity:0;animation:pfloat 14s linear infinite}
@keyframes pfloat{0%{transform:translate3d(0,20vh,0) scale(.6);opacity:0}15%{opacity:.28}85%{opacity:.18}100%{transform:translate3d(6vw,-30vh,0) scale(1);opacity:0}}
.ring{position:absolute;right:28px;bottom:28px;width:36px;height:36px;color:rgba(255,255,255,.7);transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .2s linear}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:var(--tshadow);opacity:1;transition:opacity .5s}
.cue svg{width:18px;height:18px;animation:cuebob 2.4s var(--ease-soft) infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.stage.scrolled .cue{opacity:0}
@media (max-height:560px){.cue,.ring{display:none}}

/* bands */
.band{position:absolute;opacity:0;pointer-events:none;text-shadow:var(--tshadow);--k:0}
.band .btn{text-shadow:none}
.band::before{content:"";position:absolute;inset:-14%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,var(--peak,.66)) 0%,rgba(5,5,10,calc(var(--peak,.66)*.66)) 46%,rgba(5,5,10,0) 76%)}
.band>*{position:relative}
.band.side{right:clamp(20px,6vw,90px);top:13vh;width:min(42vw,600px);text-align:right}
.band.side .kicker{color:rgba(255,255,255,.72);margin-bottom:16px}
.band.side .line{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(32px,4.2vw,60px);line-height:1.04;color:#fff}
@media (max-height:700px){.band.side{top:11vh}.band.side .line{font-size:clamp(28px,3.6vw,48px)}}
.band.settle{left:50%;top:20vh;transform:translateX(-50%);width:min(92vw,760px);text-align:center;--peak:.86}
.band.settle::before{inset:-22% -30% -10% -30%;background:radial-gradient(ellipse 78% 66% at 50% 42%,rgba(5,5,10,var(--peak)) 0%,rgba(5,5,10,calc(var(--peak)*.8)) 44%,rgba(5,5,10,0) 80%)}
.band.settle .sub{margin:20px auto 0;max-width:46ch;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:rgba(255,255,255,.86)}
.band.settle .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.band.settle .ctas .btn-outline{color:#fff}
.band.settle .sub,.band.settle .ctas{--ks:clamp(0,(var(--k,0) - .62)*4,1);--kb:clamp(0,(var(--k,0) - .76)*5,1)}
.band.settle .sub{opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.band.settle .ctas{opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

/* entrances */
.w{display:inline-block;white-space:pre}
.c{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-blur{position:relative}
.fx-blur .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.fx-blur .sharp{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0))*10px))}
.fx-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6;color:#F2C15F}
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}

/* static hero (index.html) */
.static{display:none;position:absolute;inset:0;padding:110px clamp(20px,6vw,56px) 40px;flex-direction:column;justify-content:flex-end;color:#fff;text-shadow:var(--tshadow);background:linear-gradient(180deg,rgba(23,18,15,.35),rgba(23,18,15,.2) 40%,rgba(23,18,15,.86) 100%)}
.static .kicker{color:rgba(255,255,255,.75);font-size:11px;letter-spacing:.16em}
.static .line{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(30px,8vw,48px);line-height:1.06}
.static .sub{margin-top:14px;max-width:44ch;color:rgba(255,255,255,.88);font-size:16px}
.static .ctas{display:flex;flex-direction:column;gap:12px;margin-top:22px;max-width:360px}
.static .ctas .btn{text-shadow:none;width:100%}
.static .ctas .btn-outline{color:#fff}

/* THE FIVE GATES: identical strings in home.js's GATES array */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:100svh;min-height:560px}
  .stage video,.stage .band,.stage .ring,.stage .cue,.stage .scrim,.stage .particles{display:none}
  .stage .poster{background-image:url("hero-ending.jpg")}
  .static{display:flex}
}

/* ============ page head (static banner, subpages) ============ */
.pagehead{position:relative;min-height:50vh;display:flex;align-items:flex-end;padding:126px clamp(20px,6vw,56px) 60px;color:#fff;background:var(--hero-dark) center/cover no-repeat;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,15,.5),rgba(23,18,15,.3) 45%,rgba(23,18,15,.9) 100%)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead .kicker{color:rgba(255,255,255,.75)}
.pagehead h1{margin-top:16px;font-size:clamp(32px,5.2vw,60px);color:#fff}
.pagehead .lede{margin-top:16px;color:rgba(255,255,255,.88);max-width:62ch}
.pagehead .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pagehead .ctas .btn-outline{color:#fff}
@media (max-width:720px){.pagehead{min-height:40vh;padding-top:104px}}

/* ============ SECTIONS ============ */
section.block{position:relative;z-index:1;padding:clamp(72px,10vw,120px) clamp(20px,6vw,72px)}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.panel{background:var(--panel)}
.on-dark{background:var(--hero-dark);color:#F5EFEC}
.on-dark .display{color:#fff}
.on-dark .lede,.on-dark .small{color:rgba(245,239,236,.78)}
.on-dark .kicker{color:rgba(245,239,236,.6)}
.on-dark .kicker.accent{color:#FF9E8C}
.h2{font-size:clamp(28px,3.4vw,46px);margin-top:16px}
.h3{font-size:clamp(20px,2.2vw,28px);margin-top:14px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* choreography */
.in-view .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.in-view.in .part{opacity:1;transform:none}
.in-view.in .part:nth-child(2){transition-delay:.1s}
.in-view.in .part:nth-child(3){transition-delay:.2s}
.in-view.in .part:nth-child(4){transition-delay:.3s}
.in-view.in .part:nth-child(5){transition-delay:.4s}
.in-view.in .part:nth-child(6){transition-delay:.5s}
.in-view.in.done .part:nth-child(n){transition-delay:0s}

/* self-drawing hairline */
.rule{height:1px;background:transparent;position:relative;overflow:hidden}
.rule i{position:absolute;inset:0;background:var(--line-strong);transform:scaleX(var(--d,0));transform-origin:left;transition:transform 1.4s var(--ease-out)}
.on-dark .rule i{background:rgba(255,255,255,.22)}

/* three-entry pillars (home) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:56px}
.pillar{text-align:center;padding:0 8px}
.pillar svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.5;margin:0 auto 18px;display:block}
.pillar h3{font-size:19px;letter-spacing:.14em}
.pillar p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--text-secondary)}
.pillar .textlink{margin-top:14px;font-size:13.5px}
.pillar .glow{position:relative;display:inline-block}
.pillar .glow::after{content:"";position:absolute;inset:-14px;border-radius:999px;background:radial-gradient(circle,rgba(166,15,27,.16),transparent 70%);opacity:.6;animation:breathe 5.5s var(--ease-soft) -2s infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.7;transform:scale(1.05)}}
@media (max-width:820px){.pillars{grid-template-columns:1fr;gap:36px}}

/* app phone mockups (platform page) */
.apphead{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.features{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:var(--surface);color:var(--text-secondary);box-shadow:0 1px 3px rgba(20,16,14,.06)}
.phones{display:flex;gap:clamp(18px,3vw,40px);justify-content:center;margin-top:64px;align-items:flex-start}
.phone{width:272px;height:566px;border-radius:44px;background:#0D0A09;padding:9px;flex:none;box-shadow:0 30px 60px -28px rgba(20,16,14,.55),0 8px 20px -10px rgba(20,16,14,.3);position:relative}
.phone:nth-child(2){transform:translateY(38px)}
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F3F1F0;display:flex;flex-direction:column;position:relative;color:#181614;font-size:13px}
.sbar{display:flex;justify-content:space-between;padding:12px 22px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.scr{flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ph-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#6E6B68}
.ph-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:21px;line-height:1.05;color:#070504}
.pcard{position:relative;border-radius:22px;overflow:hidden;height:170px;background:#3E2521 center/cover no-repeat;box-shadow:0 12px 26px -12px rgba(20,16,14,.35)}
.pcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72))}
.pcard .body{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff}
.pcard .body b{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:15px;display:block}
.pcard .body span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-size:11.5px;font-weight:500;padding:7px 12px;border-radius:999px;background:#fff;color:#5F5D5B;box-shadow:0 1px 3px rgba(20,16,14,.05)}
.chips span.on{background:#17120F;color:#FBF7F5}
.card{background:#fff;border-radius:20px;box-shadow:0 2px 6px rgba(20,16,14,.04),0 12px 26px -12px rgba(20,16,14,.13);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.row+.row{border-top:1px solid rgba(20,16,14,.09)}
.dtile{width:46px;height:46px;border-radius:14px;background:#EBE7E4;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}
.dtile b{font-family:var(--display);font-size:17px;color:#070504}
.dtile span{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--accent);margin-top:3px;text-transform:uppercase}
.row .t{font-size:12.5px;font-weight:500;color:#181614;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:10.5px;color:#6E6B68;margin-top:2px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.row .txt{flex:1;min-width:0}
.pill{height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;width:100%}
.av{width:30px;height:30px;border-radius:999px;background:linear-gradient(140deg,#E4DFDA,#C6BDB6);border:2px solid #fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:11px;color:#6B635D}
.duo{display:inline-flex}
.duo .av+.av{margin-left:-10px}
.post{padding:12px 14px}
.post .ph{display:flex;align-items:center;gap:10px}
.post .ph .n{font-size:12px;font-weight:500}
.post .ph .m{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6E6B68}
.post .pb{font-size:12.5px;line-height:1.45;margin-top:10px;color:#181614}
.poll{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.poll div{position:relative;height:30px;border-radius:999px;background:#EBE7E4;overflow:hidden;font-size:11px;display:flex;align-items:center;padding:0 12px;justify-content:space-between;color:#181614}
.poll div i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--accent-wash);z-index:0}
.poll div span,.poll div b{position:relative;z-index:1}
.tabbar{margin:auto 0 0;display:flex;justify-content:space-between;background:#fff;border-radius:22px;padding:9px 10px 7px;box-shadow:0 10px 26px -8px rgba(20,16,14,.3)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#6E6B68;font-size:9px;font-weight:500;flex:1}
.tabbar a.on{color:var(--accent)}
.tabbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.phonecap{text-align:center;margin-top:16px}
.phonecap b{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:13px;display:block;color:var(--ink-strong)}
.phonecap span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet)}
@media (max-width:1000px){.apphead{grid-template-columns:1fr}.features{justify-content:flex-start}.phones{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:8px 4px 24px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.phone{scroll-snap-align:center}.phone:nth-child(2){transform:none}}

/* image + text 2-col (events, about, generic) */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.split .img{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--hero-dark-2) center/cover no-repeat;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);position:relative}
.split .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(23,18,15,.55))}
.split.reverse{grid-template-columns:1fr 1.15fr}
.split.reverse .img{order:2}
.split.light .img{background-color:var(--panel);box-shadow:0 2px 8px rgba(20,16,14,.04),0 24px 50px -20px rgba(20,16,14,.2)}
.split.light .img::after{display:none}
@media (max-width:900px){.split,.split.reverse{grid-template-columns:1fr}.split.reverse .img{order:-1}}

/* event/format list rows (light by default, .on-dark inverts) */
.formats{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.fmt{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 8px rgba(20,16,14,.04);transition:transform .4s var(--ease-out),box-shadow .3s;color:inherit}
.fmt:hover{transform:translateX(4px);box-shadow:0 8px 20px -6px rgba(20,16,14,.14)}
.fthumb{width:118px;height:118px;border-radius:16px;background:#3E2521 center/cover no-repeat;flex:none}
.fmt h3{font-size:17px;letter-spacing:.08em;color:var(--ink-strong)}
.fmt p{font-size:14px;line-height:1.55;color:var(--text-secondary);margin-top:6px}
.fmt .textlink{margin-top:10px;font-size:13px}
.on-dark .fmt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);box-shadow:none}
.on-dark .fmt:hover{background:rgba(255,255,255,.07)}
.on-dark .fmt h3{color:#fff}
.on-dark .fmt p{color:rgba(245,239,236,.72)}
@media (max-width:640px){.fmt{grid-template-columns:1fr}.fthumb{width:100%;height:140px}}

.upcoming{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.on-dark .upcoming{border-top:1px solid rgba(255,255,255,.1)}
.urow{display:flex;align-items:center;gap:16px;padding:14px 4px;color:inherit;border-radius:14px;transition:background .25s}
.urow:hover{background:rgba(20,16,14,.04)}
.on-dark .urow:hover{background:rgba(255,255,255,.05)}
.urow+.urow{border-top:1px solid var(--line)}
.on-dark .urow+.urow{border-top:1px solid rgba(255,255,255,.08)}
.udate{width:52px;flex:none;text-align:center;line-height:1.1}
.udate b{font-family:var(--display);font-size:22px;color:var(--ink-strong);display:block}
.on-dark .udate b{color:#fff}
.udate span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet)}
.on-dark .udate span{color:rgba(245,239,236,.6)}
.utxt{flex:1;display:flex;flex-direction:column;gap:3px}
.ut{font-size:15.5px;font-weight:500;color:var(--ink)}
.on-dark .ut{color:#fff}
.us{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-quiet)}
.on-dark .us{color:rgba(245,239,236,.6)}
.urow svg{flex:none;opacity:.5;transition:transform .25s}
.urow:hover svg{transform:translateX(4px);opacity:.9}

/* checklist (platform capabilities) */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin-top:40px;list-style:none;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink)}
.checklist li::before{content:"";width:18px;height:18px;border-radius:6px;background:var(--accent-wash);flex:none;margin-top:3px;position:relative}
.checklist li::after{content:"";position:absolute}
.on-dark .checklist li{color:#F5EFEC}
@media (max-width:720px){.checklist{grid-template-columns:1fr}}

/* callout (quoted rule, accent tint) */
.callout{background:var(--accent-wash);border-radius:20px;padding:26px 30px;margin-top:28px}
.callout p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.callout p strong{color:var(--accent-hover)}

/* value/step triples */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.values h3{font-size:15px;letter-spacing:.1em}
.values p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-secondary)}
@media (max-width:640px){.values{grid-template-columns:1fr;gap:18px}}

/* funnel steps (home events-first) */
.funnel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:44px}
.funnel .step{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:999px;background:var(--surface);box-shadow:0 1px 3px rgba(20,16,14,.06)}
.on-dark .funnel .step{background:rgba(255,255,255,.06);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.funnel .arrow{color:var(--accent);opacity:.6;font-size:16px}

/* contact form */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.cform{display:flex;flex-direction:column;gap:18px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:flex;flex-direction:column;gap:8px}
.field .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-quiet)}
.field input,.field textarea{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;resize:vertical;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.cform .btn{align-self:flex-start;margin-top:4px}
.cform .btn[disabled]{opacity:.6;cursor:not-allowed}
.cform-msg{font-size:14px;min-height:20px}
.cform-msg.ok{color:#2F6B4F}
.cform-msg.err{color:var(--accent)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* spaces: self-drawing mark, hold interaction, cards */
.spaces-hero{position:relative}
.spaces-hero .mark{position:absolute;right:-6%;top:-10%;width:min(58vw,720px);opacity:.09;pointer-events:none}
.spaces-hero .mark path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hold{margin:56px auto 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.holdbtn{position:relative;width:132px;height:132px;border-radius:999px;border:0;background:var(--surface);cursor:pointer;box-shadow:0 18px 44px rgba(20,16,14,.12),0 3px 10px rgba(20,16,14,.05);display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .3s var(--ease-out)}
.holdbtn:active{transform:scale(.97)}
.holdbtn svg.arc{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.holdbtn svg.arc circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:439.8;stroke-dashoffset:calc(439.8*(1 - var(--p,0)))}
.holdbtn .door{width:34px;height:46px;border:2px solid var(--ink);border-radius:6px 6px 2px 2px;position:relative;transition:transform .5s var(--ease-out),border-color .3s}
.holdbtn .door::after{content:"";position:absolute;right:6px;top:50%;width:4px;height:4px;border-radius:999px;background:var(--accent)}
.hold.open .holdbtn .door{transform:perspective(200px) rotateY(-42deg);border-color:var(--accent)}
.hold .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-quiet)}
.spacecards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.spc{background:var(--surface);border-radius:24px;padding:24px;box-shadow:0 2px 8px rgba(20,16,14,.04),0 14px 32px -14px rgba(20,16,14,.14);opacity:.18;transform:translateY(12px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.spc .emoji{font-size:28px;display:block;margin-bottom:10px}
.spc h3{font-size:16px;letter-spacing:.12em}
.spc p{margin-top:8px;font-size:14px;color:var(--text-secondary)}
.hold.open ~ .spacecards .spc{opacity:1;transform:none}
.hold.open ~ .spacecards .spc:nth-child(2){transition-delay:.15s}
.hold.open ~ .spacecards .spc:nth-child(3){transition-delay:.3s}
@media (max-width:820px){.spacecards{grid-template-columns:1fr}}

/* dating toggle */
.dating{max-width:600px;margin:0 auto;text-align:center}
.dating .h3{margin-top:14px}
.dating p{margin-top:16px;color:var(--text-secondary)}
.dating .toggle{margin:26px auto 0;width:52px;height:30px;border-radius:999px;background:#E2DDD9;position:relative;display:block}
.dating .toggle i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);animation:toggledrift 7s var(--ease-soft) -3s infinite}
@keyframes toggledrift{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(22px)}100%{transform:translateX(0)}}
.dating .toggle::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--accent);opacity:0;animation:togglecolor 7s var(--ease-soft) -3s infinite;z-index:-1}
@keyframes togglecolor{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.dating .toggle{z-index:0;isolation:isolate}

/* numbered feature list (safety, platform) */
.safety{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:56px}
.saf{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line)}
.saf .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);padding-top:6px}
.saf h3{font-size:16px;letter-spacing:.12em}
.saf p{margin-top:8px;color:var(--text-secondary);font-size:15.5px}
@media (max-width:820px){.safety{grid-template-columns:1fr;gap:0}}

/* verification ladder (safety) */
.ladder{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.ladder .step{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border-radius:14px;background:var(--surface);box-shadow:0 1px 3px rgba(20,16,14,.06);text-align:center}
.ladder .step.on{background:var(--accent);color:#fff;box-shadow:none}
.ladder .arrow{color:var(--text-quiet)}

/* simple data table (spaces) */
.tblwrap{margin-top:40px;overflow-x:auto;border-radius:20px;box-shadow:0 2px 8px rgba(20,16,14,.04),0 14px 32px -14px rgba(20,16,14,.14)}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;background:var(--surface)}
table.tbl th,table.tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet);background:var(--panel);font-weight:500}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.name{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-strong)}

/* quote/illustrative cards */
.disclose{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 16px;border-radius:999px;background:var(--surface);font-size:13.5px;color:var(--text-secondary);box-shadow:0 1px 3px rgba(20,16,14,.06)}
.disclose i{width:8px;height:8px;border-radius:999px;background:var(--gold);flex:none}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.q{background:var(--surface);border-radius:24px;padding:30px 28px;box-shadow:0 2px 8px rgba(20,16,14,.04),0 14px 32px -14px rgba(20,16,14,.14)}
.q:nth-child(2){transform:translateY(26px)}
.q blockquote{margin:0;font-size:18px;line-height:1.55;color:var(--ink)}
.q blockquote::before{content:"\201C";font-family:var(--display);font-size:48px;line-height:0;color:var(--accent);display:block;margin:18px 0 10px}
.q .who{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-quiet)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}.q:nth-child(2){transform:none}}

/* final CTA */
.final{position:relative;overflow:hidden;text-align:center}
.final .bg{position:absolute;inset:-6%;background:var(--hero-dark) center/cover no-repeat;filter:blur(14px) brightness(.55);transform:scale(1.04)}
.final .wrap{position:relative;z-index:1;max-width:820px}
.final .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.final .ctas .btn-outline{color:#fff}
.final .lede{margin-top:18px}

/* footer */
footer{position:relative;z-index:1;padding:64px clamp(20px,6vw,72px) 56px;background:var(--canvas)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
footer .brand{display:flex;align-items:center}
footer .kicker{margin-top:10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
footer ul a{opacity:.75;transition:opacity .25s}
footer ul a:hover{opacity:1}
footer .ai{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-quiet);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr}}

/* reduced motion: everything final, nothing moves */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .in-view .part{opacity:1;transform:none}
  .rule i{transform:scaleX(1)}
  .spc{opacity:1;transform:none}
  .band .sub,.band .ctas{opacity:1;transform:none}
  .spaces-hero .mark path{stroke-dashoffset:0!important}
  .holdbtn svg.arc circle{stroke-dashoffset:0}
  .q:nth-child(2){transform:none}
  .phone:nth-child(2){transform:translateY(38px)}
  @media (max-width:1000px){.phone:nth-child(2){transform:none}}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
body.pinned .in-view .part{opacity:1;transform:none}
body.pinned .rule i{transform:scaleX(1)}
body.pinned .spc{opacity:1;transform:none}
body.pinned .spaces-hero .mark path{stroke-dashoffset:0!important}