/* Layout: a cinematic, single dark world. Luxury hotel editorial (full-bleed photography,
   light serif, generous air) with an AI layer drawn over it: cyan = the intelligence,
   champagne gold = the hospitality. Scroll drives the story: pinned wipe, horizontal day,
   word-by-word reveals. Deliberately dark-only. */
:root{
  color-scheme:dark;
  --obsidian:#07090D; --night:#0C1017; --deep:#121722; --glass:rgba(255,255,255,.045); --hair:rgba(243,238,230,.12);
  --ivory:#F3EEE6; --mist:#A8A399; --dim:#6D6A64;
  --gold:#C9A86A; --gold-2:#E9D5A6; --ai:#6FE3E1; --ai-dim:rgba(111,227,225,.16); --fault:#E0675B; --ok:#79D6A1;
  --f-serif:"Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --f-sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
body{background:var(--obsidian); color:var(--ivory); font-family:var(--f-sans); font-weight:300; font-size:17px; line-height:1.65; margin:0; padding-inline:16px; overflow-x:hidden}
a{color:inherit} button{font:inherit; color:inherit}
img{display:block; max-width:100%; width:auto; height:auto}
:focus-visible{outline:1px solid var(--gold); outline-offset:4px}
::selection{background:var(--gold); color:var(--obsidian)}
h1,h2,h3{font-family:var(--f-serif); font-weight:300; margin:0; line-height:1.02; letter-spacing:-.01em; text-wrap:balance}
h2{font-size:clamp(2.6rem,6vw,5.2rem)}
h2 em, h1 em{font-style:italic; color:var(--gold-2)}
p{margin:0}
.wrap{max-width:1240px; margin:0 auto}
.bleed{margin-inline:-16px}
.label{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.label.ai{color:var(--ai)}
.lede{color:var(--mist); font-size:1.12rem; max-width:56ch}
.sec{padding-block:clamp(90px,13vw,170px)}
.head{display:grid; gap:22px; margin-bottom:64px; max-width:900px}
.head.center{margin-inline:auto; text-align:center; justify-items:center}
i[data-lucide], svg.lucide{width:20px; height:20px; stroke-width:1.4; flex:none}
.grain{position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05; 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }

/* cursor + progress */
.cursor{position:fixed; left:0; top:0; width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid var(--gold); border-radius:50%; pointer-events:none; z-index:80; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; mix-blend-mode:difference; display:none}
.cursor.big{width:76px; height:76px; margin:-38px 0 0 -38px; background:rgba(233,213,166,.9); border-color:transparent}
@media (pointer:fine){ .cursor{display:block} }
.progress{position:fixed; left:0; top:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--gold),var(--ai)); z-index:70}

/* nav */
.nav{position:fixed; left:0; right:0; top:0; z-index:50; padding:calc(18px + env(safe-area-inset-top,0px)) 24px 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; transition:background .5s, padding .5s, backdrop-filter .5s}
.nav.solid{background:rgba(7,9,13,.72); backdrop-filter:blur(16px); padding-block:calc(12px + env(safe-area-inset-top,0px)) 12px; border-bottom:1px solid var(--hair)}
.menu-btn{justify-self:start; display:flex; align-items:center; gap:12px; background:none; border:0; cursor:pointer; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase}
.menu-btn .bars{display:grid; gap:6px; width:26px}
.menu-btn .bars span{height:1px; background:var(--ivory); transition:transform .4s var(--ease)}
.menu-btn .bars span:last-child{width:60%}
.wordmark{text-decoration:none; text-align:center; display:grid; justify-items:center; line-height:1}
.wordmark b{font-family:var(--f-serif); font-weight:400; font-size:1.6rem; letter-spacing:.02em}
.wordmark small{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.42em; color:var(--gold); margin-top:4px}
.nav .cta-mini{justify-self:end}
@media (max-width:700px){ .nav{padding-inline:16px} .nav .cta-mini{display:none} .wordmark b{font-size:1.3rem} .menu-btn span.t{display:none} }

.btn{display:inline-flex; align-items:center; gap:12px; padding:16px 28px; border-radius:999px; border:1px solid var(--hair); background:transparent; text-decoration:none; cursor:pointer; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; transition:background .4s, color .4s, border-color .4s; will-change:transform}
.btn:hover{border-color:var(--gold)}
.btn.gold{background:var(--gold-2); color:var(--obsidian); border-color:var(--gold-2)}
.btn.gold:hover{background:var(--ivory)}
.btn svg{width:16px; height:16px}

/* overlay menu */
.overlay{position:fixed; inset:0; z-index:90; background:var(--night); display:grid; grid-template-columns:1.2fr 1fr; clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); visibility:hidden}
.overlay.open{clip-path:inset(0); visibility:visible}
.overlay nav{display:grid; align-content:center; gap:4px; padding:80px 8vw; overflow-y:auto; overscroll-behavior:contain}
.overlay nav a{font-family:var(--f-serif); font-size:clamp(2rem,min(3.6vw,7vh),4.6rem); white-space:nowrap; text-decoration:none; line-height:1.15; display:flex; gap:22px; align-items:baseline; transform:translateY(30px); opacity:0; transition:transform .8s var(--ease), opacity .8s, color .3s}
.overlay nav a small{flex:none; min-width:3.6em; font-family:var(--f-mono); font-size:.7rem; color:var(--gold); letter-spacing:.2em}
.overlay nav a:hover{color:var(--gold-2)}
@media (hover:hover){ .overlay nav a:hover{font-style:italic} }
.overlay.open nav a{transform:none; opacity:1}
.overlay aside{position:relative; overflow:hidden}
.overlay aside img{width:100%; height:100%; object-fit:cover; opacity:.6; transform:scale(1.1); transition:transform 1.6s var(--ease)}
.overlay.open aside img{transform:scale(1)}
.overlay .close{position:absolute; top:calc(22px + env(safe-area-inset-top,0px)); left:24px; z-index:2}
@media (max-width:800px){ .overlay{grid-template-columns:1fr} .overlay aside{display:none} .overlay nav{padding:80px 24px 40px} .overlay nav a{font-size:clamp(1.9rem,8vw,3rem); white-space:normal} }

/* hero */
.hero{position:relative; min-height:min(100svh,980px); display:grid; align-items:end; overflow:hidden; margin-inline:-16px; padding:140px 24px 72px}
.hero .bg{position:absolute; inset:0; z-index:0}
.hero .bg img{width:100%; height:100%; object-fit:cover; animation:kb 28s ease-in-out infinite alternate; transform-origin:60% 40%}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-1.5%,1%)}}
.hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.15) 35%, rgba(7,9,13,.75) 78%, var(--obsidian) 100%)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.hero .content{position:relative; z-index:2; max-width:1240px; width:100%; margin:0 auto; display:grid; gap:30px}
.hero h1{font-size:clamp(3.2rem,9.4vw,8.6rem); line-height:.92; letter-spacing:-.02em; max-width:12ch}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.w > span{display:inline-block}
.hero .row{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:end; justify-content:space-between}
.hero .lede{color:rgba(243,238,230,.82)}
.scramble{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; color:var(--ai); display:flex; align-items:center; gap:10px; min-height:1.4em}
.scramble::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ai); box-shadow:0 0 14px var(--ai); animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.hud{position:absolute; z-index:2; right:24px; top:calc(110px + env(safe-area-inset-top,0px)); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:rgba(243,238,230,.6); text-align:right; display:grid; gap:6px}
.hud b{color:var(--ai); font-weight:400}
.scroll-cue{position:absolute; z-index:2; left:50%; bottom:22px; width:1px; height:56px; background:var(--hair); overflow:hidden}
.scroll-cue::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--gold); animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
@media (max-width:700px){ .hud{display:none} }

/* manifesto */
.manifesto p{font-family:var(--f-serif); font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.18; max-width:1000px; letter-spacing:-.005em}
.manifesto .wd{opacity:.16; transition:opacity .2s}
.manifesto .wd.on{opacity:1}
.manifesto em{color:var(--gold-2)}

/* logos */
.logos{display:grid; gap:28px; justify-items:center; padding-block:10px 40px}
.marquee{width:100%; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .row{display:flex; gap:72px; align-items:center; width:max-content; animation:slide 60s linear infinite}
.marquee img{height:42px; width:auto; filter:invert(1) sepia(.55) saturate(1.2) brightness(1.05); opacity:.72; transition:opacity .3s}
.marquee img.tall{height:52px}
.marquee:hover .row{animation-play-state:paused}
.marquee img:hover{opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* today -> tomorrow wipe */
.wipe{position:relative; height:100svh; min-height:560px; margin-inline:-16px; overflow:hidden}
.wipe .layer{position:absolute; inset:0}
.wipe .layer img{width:100%; height:100%; object-fit:cover}
.wipe .today img{filter:grayscale(1) contrast(1.05) brightness(.55)}
.wipe .today::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px)}
.wipe .tmrw{clip-path:inset(0 0 0 var(--cut,50%))}
.wipe .tmrw img{filter:saturate(1.1) brightness(.78)}
.wipe .scan{position:absolute; top:0; bottom:0; left:var(--cut,50%); width:2px; background:var(--gold-2); box-shadow:0 0 24px 4px rgba(233,213,166,.6), 0 0 80px 20px rgba(111,227,225,.25); z-index:3}
.wipe .scan::before{content:"SCANNING"; position:absolute; top:50%; left:12px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; color:var(--gold-2); writing-mode:vertical-rl}
.tag{position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; backdrop-filter:blur(10px); max-width:280px; line-height:1.4}
.today .tag{background:rgba(224,103,91,.12); border:1px solid rgba(224,103,91,.5); color:#F3C9C3}
.today .tag svg{color:var(--fault); width:16px; height:16px}
.tmrw .tag{background:rgba(111,227,225,.1); border:1px solid rgba(111,227,225,.5); color:#CFF6F5}
.tmrw .tag svg{color:var(--ai); width:16px; height:16px}
.wipe .titles{position:absolute; z-index:4; left:24px; right:24px; bottom:48px; display:flex; justify-content:space-between; align-items:end; pointer-events:none; gap:24px}
.wipe .titles h2{font-size:clamp(2.4rem,7vw,6rem)}
.wipe .titles .r{text-align:right}
.wipe .titles .l h2{color:rgba(243,238,230,.85)}
.wipe .intro{position:absolute; z-index:4; top:calc(110px + env(safe-area-inset-top,0px)); left:0; right:0; text-align:center; display:grid; gap:10px; justify-items:center; padding-inline:24px}
.wipe .intro p{color:var(--mist); max-width:46ch}
@media (max-width:700px){ .tag{font-size:.62rem; max-width:190px; padding:8px 10px} .wipe .titles{bottom:28px} }

/* horizontal day */
.day{position:relative; margin-inline:-16px; overflow:hidden}
.day-track{display:flex; gap:28px; padding:0 24px 40px; width:max-content}
.day-intro{width:min(520px,82vw); flex:none; display:grid; align-content:center; gap:22px; padding-right:40px}
.panel{position:relative; flex:none; width:min(440px,82vw); height:min(70vh,620px); min-height:440px; border-radius:6px; overflow:hidden; display:grid; align-content:end}
.panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.2s var(--ease)}
.panel:hover img{transform:scale(1.04)}
.panel::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,13,.1), rgba(7,9,13,.25) 40%, rgba(7,9,13,.92))}
.panel .txt{position:relative; z-index:1; padding:28px; display:grid; gap:12px}
.panel time{font-family:var(--f-serif); font-size:4.4rem; line-height:.9; color:var(--gold-2); font-variant-numeric:tabular-nums}
.panel h3{font-size:1.75rem; line-height:1.12}
.panel .was{font-size:.86rem; color:var(--mist); display:flex; gap:8px; border-top:1px solid var(--hair); padding-top:12px}
.panel .was b{font-family:var(--f-mono); font-weight:400; font-size:.66rem; letter-spacing:.18em; color:var(--fault); flex:none; padding-top:3px}
.panel .chip{position:absolute; z-index:1; top:18px; left:18px; display:flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px; border-radius:999px; background:rgba(7,9,13,.55); border:1px solid rgba(111,227,225,.45); color:var(--ai); backdrop-filter:blur(8px)}
.panel .chip svg{width:14px; height:14px}
.day.native{overflow-x:auto; scroll-snap-type:x mandatory}
.day.native .panel{scroll-snap-align:center}

/* explorer */
.explorer{display:grid; gap:36px}
.pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.pill{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; border:1px solid var(--hair); background:var(--glass); cursor:pointer; font-size:.88rem; color:var(--mist); transition:all .3s}
.pill svg{width:17px; height:17px}
.pill:hover{color:var(--ivory); border-color:var(--gold)}
.pill[aria-pressed="true"]{background:var(--gold-2); color:var(--obsidian); border-color:var(--gold-2)}
.stage-box{overflow-x:auto; margin-inline:-16px; padding:8px 16px 4px}
.stages{display:flex; justify-content:space-between; position:relative; min-width:680px}
.stages::before{content:""; position:absolute; left:34px; right:34px; top:30px; height:1px; background:var(--hair)}
.stages .fill{position:absolute; left:34px; top:30px; height:1px; background:linear-gradient(90deg,var(--gold),var(--ai)); box-shadow:0 0 12px var(--ai); transition:width .7s var(--ease)}
.sb{all:unset; cursor:pointer; position:relative; width:68px; display:grid; justify-items:center; gap:12px; text-align:center}
.sb .o{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--hair); background:var(--night); color:var(--mist); transition:all .4s var(--ease)}
.sb small{font-size:.74rem; color:var(--dim); line-height:1.25; transition:color .3s}
.sb.done .o{border-color:var(--gold); color:var(--gold)}
.sb[aria-current="step"] .o{border-color:var(--ai); color:var(--ai); box-shadow:0 0 0 6px var(--ai-dim), 0 0 30px rgba(111,227,225,.4); transform:scale(1.08)}
.sb[aria-current="step"] small{color:var(--ivory)}
.sb:focus-visible .o{outline:1px solid var(--gold); outline-offset:4px}
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.cmp > div{background:var(--night); padding:clamp(24px,3.5vw,44px); display:grid; gap:16px; align-content:start; min-height:260px; position:relative}
.cmp .t{background:linear-gradient(180deg, rgba(224,103,91,.06), var(--night))}
.cmp .f{background:linear-gradient(180deg, rgba(111,227,225,.07), var(--night))}
.cmp .k{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; display:flex; align-items:center; gap:10px}
.cmp .t .k{color:var(--fault)} .cmp .f .k{color:var(--ai)}
.cmp .k svg{width:16px; height:16px}
.cmp .big{font-family:var(--f-serif); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.2}
.cmp .f .big{min-height:2.4em}
.cmp .small{color:var(--mist); font-size:.95rem}
.sys{display:flex; flex-wrap:wrap; gap:6px}
.sys span{font-family:var(--f-mono); font-size:.66rem; padding:4px 9px; border-radius:4px; border:1px solid rgba(224,103,91,.4); color:#E9B3AC; text-decoration:line-through}
.caret{display:inline-block; width:2px; height:1em; background:var(--ai); vertical-align:-.12em; margin-left:2px; animation:pulse .9s infinite}
.howbar{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; border:1px solid var(--hair); border-radius:8px; padding:22px 26px; background:var(--glass)}
.howbar .tx{flex:1 1 340px; min-width:0; color:var(--mist)}
.howbar .tx b{color:var(--ivory); font-weight:500}
.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px; border-radius:999px; white-space:nowrap}
.badge svg{width:14px; height:14px}
.badge.automate{border:1px solid var(--ai); color:var(--ai)}
.badge.redesign{border:1px solid var(--gold); color:var(--gold-2)}
.badge.build{border:1px solid var(--ivory); color:var(--ivory)}
.badge.soon{border:1px dashed var(--mist); color:var(--mist)}
.arrows{display:flex; gap:10px; margin-left:auto}
.arrows button{width:48px; height:48px; border-radius:50%; border:1px solid var(--hair); background:none; cursor:pointer; display:grid; place-items:center; transition:border-color .3s}
.arrows button:hover:not(:disabled){border-color:var(--gold)}
.arrows button:disabled{opacity:.3; cursor:default}
@media (max-width:760px){ .cmp{grid-template-columns:1fr} }

/* robotics */
.robo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center}
.frame{position:relative; aspect-ratio:4/5; max-width:100%; overflow:hidden; border-radius:4px}
.frame img{width:100%; height:120%; object-fit:cover; will-change:transform}
.frame .scanline{position:absolute; left:0; right:0; height:120px; top:-120px; background:linear-gradient(180deg, transparent, rgba(111,227,225,.22), transparent); animation:scanv 4.5s linear infinite}
@keyframes scanv{to{top:100%}}
.frame .br{position:absolute; width:28px; height:28px; border:1px solid var(--ai)}
.frame .br.a{top:16px; left:16px; border-right:0; border-bottom:0} .frame .br.b{top:16px; right:16px; border-left:0; border-bottom:0}
.frame .br.c{bottom:16px; left:16px; border-right:0; border-top:0} .frame .br.d{bottom:16px; right:16px; border-left:0; border-top:0}
.frame .meta{position:absolute; left:24px; bottom:24px; right:24px; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; color:var(--ai)}
.frame .reticle{position:absolute; top:34%; left:46%; width:110px; height:110px; border:1px solid rgba(111,227,225,.7); border-radius:50%; transform:translate(-50%,-50%); animation:ret 3s ease-in-out infinite}
.frame .reticle::after{content:"GUEST REQUEST · TOWELS · RM 1207"; position:absolute; left:120px; top:40px; white-space:nowrap; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; color:var(--ai); background:rgba(7,9,13,.6); padding:4px 8px}
@keyframes ret{50%{transform:translate(-50%,-50%) scale(1.15); opacity:.6}}
.caps{display:grid; gap:0; border-top:1px solid var(--hair); margin-top:36px}
.cap{display:grid; grid-template-columns:40px 1fr auto; gap:16px; align-items:start; padding:20px 0; border-bottom:1px solid var(--hair)}
.cap svg{color:var(--gold); margin-top:4px}
.cap b{font-weight:500; display:block}
.cap p{color:var(--mist); font-size:.94rem}
@media (max-width:860px){ .robo{grid-template-columns:1fr} .frame .reticle::after{display:none} }

/* products */
.prods{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:1200px}
.prod{position:relative; border:1px solid var(--hair); border-radius:8px; padding:36px 30px; background:linear-gradient(160deg, var(--deep), var(--night)); display:grid; gap:18px; align-content:start; transform-style:preserve-3d; transition:transform .5s var(--ease), border-color .4s; overflow:hidden; min-height:420px}
.prod::before{content:""; position:absolute; inset:0; background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%), rgba(233,213,166,.13), transparent 45%); opacity:0; transition:opacity .4s; pointer-events:none}
.prod:hover{border-color:rgba(201,168,106,.6)}
.prod:hover::before{opacity:1}
.prod .ic{width:56px; height:56px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-2); transform:translateZ(40px)}
.prod h3{font-size:2.8rem; transform:translateZ(30px)}
.prod h3 small{font-family:var(--f-mono); font-size:.8rem; color:var(--ai); letter-spacing:.1em}
.prod p{color:var(--mist)}
.prod ul{list-style:none; margin:auto 0 0; padding:18px 0 0; border-top:1px solid var(--hair); display:grid; gap:10px; font-size:.92rem}
.prod li{display:flex; gap:10px; align-items:flex-start}
.prod li svg{width:16px; height:16px; color:var(--gold); margin-top:4px}
@media (max-width:960px){ .prods{grid-template-columns:1fr} .prod{min-height:0} }

/* method */
.method{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:90px}
.mcard{border:1px solid var(--hair); border-radius:8px; padding:40px; display:grid; gap:16px; background:var(--glass)}
.mcard h3{font-size:2.6rem}
.mcard p{color:var(--mist)}
.mcard .badge{justify-self:start}
.steps{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.steps svg.line{position:absolute; left:0; top:28px; width:100%; height:2px; overflow:visible}
.steps svg.line line{stroke:url(#gl); stroke-width:1.5}
.step{display:grid; gap:12px; align-content:start; position:relative}
.step .o{width:56px; height:56px; border-radius:50%; border:1px solid var(--gold); background:var(--obsidian); display:grid; place-items:center; color:var(--gold-2)}
.step small{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; color:var(--dim)}
.step h3{font-size:1.9rem}
.step p{color:var(--mist); font-size:.93rem}
@media (max-width:900px){ .method{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .steps svg.line{display:none} .step{grid-template-columns:56px 1fr; column-gap:18px} .step .o{grid-row:span 3} }

/* trust */
.counters{display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--hair); margin-bottom:80px}
.counter{padding:36px 20px; display:grid; gap:6px; text-align:center; border-right:1px solid var(--hair)}
.counter:last-child{border-right:0}
.counter b{font-family:var(--f-serif); font-weight:300; font-size:clamp(3rem,6vw,4.8rem); line-height:1; color:var(--gold-2); font-variant-numeric:tabular-nums}
.counter span{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist)}
.principles{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-bottom:80px}
.pr{display:grid; gap:12px; align-content:start}
.pr svg{color:var(--gold); width:26px; height:26px}
.pr h3{font-size:1.7rem}
.pr p{color:var(--mist); font-size:.94rem}
.proof{display:grid; grid-template-columns:1fr 1.3fr; gap:20px}
.proof > div{border:1px solid var(--hair); border-radius:8px; padding:34px; display:grid; gap:18px; align-content:start; background:var(--glass)}
.proof h3{font-size:2rem}
.proof p{color:var(--mist)}
.names{display:flex; flex-wrap:wrap; gap:10px}
.names span{display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; padding:9px 14px; border:1px solid var(--hair); border-radius:999px}
.names span svg{width:15px; height:15px; color:var(--ai)}
.names.big span{font-family:var(--f-serif); font-size:1.3rem; letter-spacing:0; padding:8px 20px}
@media (max-width:960px){ .counters{grid-template-columns:repeat(2,1fr)} .counter:nth-child(2){border-right:0} .counter:nth-child(-n+2){border-bottom:1px solid var(--hair)} .principles{grid-template-columns:repeat(2,1fr)} .proof{grid-template-columns:1fr} }
@media (max-width:520px){ .principles{grid-template-columns:1fr} }

/* globe */
.globe-sec{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.globe{position:relative; aspect-ratio:1/1; max-width:100%}
.globe canvas{width:100%; height:100%}
.globe .num{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; text-align:center}
.globe .num b{font-family:var(--f-serif); font-weight:300; font-size:clamp(5rem,12vw,9rem); line-height:.8; color:var(--ivory); text-shadow:0 0 40px rgba(7,9,13,.9)}
.globe .num small{display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.3em; color:var(--gold); margin-top:10px}
@media (max-width:860px){ .globe-sec{grid-template-columns:1fr} }

/* describe */
.describe{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start}
.form{display:grid; gap:16px; border:1px solid var(--hair); border-radius:8px; padding:30px; background:rgba(12,16,23,.66); backdrop-filter:blur(14px)}
label{display:grid; gap:8px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist)}
input, select, textarea{font:inherit; font-family:var(--f-sans); font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ivory); background:rgba(7,9,13,.6); border:1px solid var(--hair); border-radius:6px; padding:14px 16px; width:100%; transition:border-color .3s}
input:focus, select:focus, textarea:focus{border-color:var(--gold); outline:none}
textarea{min-height:130px; resize:vertical}
.status{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; color:var(--ai); min-height:1.2em}
.out{display:grid; gap:14px; min-width:0}
.out .note{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.oc{border:1px solid var(--hair); border-radius:8px; padding:22px 24px; display:grid; gap:12px; background:var(--night)}
.oc header{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.oc header b{font-family:var(--f-serif); font-weight:400; font-size:1.6rem; margin-right:auto}
.oc .tf{display:grid; grid-template-columns:1fr 1fr; gap:18px; font-size:.93rem}
.oc .tf small{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; margin-bottom:4px}
.oc .tf div:first-child{color:var(--mist)} .oc .tf div:first-child small{color:var(--fault)} .oc .tf div:last-child small{color:var(--ai)}
.oc .h{font-size:.88rem; color:var(--gold-2); border-top:1px solid var(--hair); padding-top:10px}
.thinking{display:flex; gap:6px} .thinking i{width:6px; height:6px; border-radius:50%; background:var(--ai); animation:pulse 1s infinite} .thinking i:nth-child(2){animation-delay:.2s} .thinking i:nth-child(3){animation-delay:.4s}
@media (max-width:860px){ .describe{grid-template-columns:1fr} .oc .tf{grid-template-columns:1fr} }

/* final */
.final{position:relative; margin-inline:-16px; overflow:hidden; padding:clamp(100px,14vw,180px) 24px}
.final .bg{position:absolute; inset:-10% 0; z-index:0}
.final .bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(.9)}
.final .inner{position:relative; z-index:1; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center}
.final h2{font-size:clamp(3rem,7.4vw,6.6rem)}
.final .lede{color:rgba(243,238,230,.82)}
.contact{display:grid; gap:10px; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em}
.contact span{display:flex; gap:12px; align-items:center; user-select:all}
.contact svg{width:16px; height:16px; color:var(--gold)}
.sent{font-family:var(--f-mono); font-size:.76rem; color:var(--ai)}
@media (max-width:860px){ .final .inner{grid-template-columns:minmax(0,1fr)} .final .quick .btn{max-width:100%; text-align:left} }


/* live ops feed (hero) */
.feed{position:absolute; z-index:2; right:24px; top:calc(104px + env(safe-area-inset-top,0px)); width:320px; border:1px solid var(--hair); border-radius:10px; background:rgba(7,9,13,.5); backdrop-filter:blur(14px); padding:14px 16px; display:grid; gap:10px}
.feed header{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; color:var(--mist)}
.feed header b{color:var(--ai); font-weight:400; display:flex; gap:6px; align-items:center}
.feed header b::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ai); box-shadow:0 0 10px var(--ai); animation:pulse 1.4s infinite}
.feed ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; height:172px; overflow:hidden; mask-image:linear-gradient(180deg,#000 70%,transparent)}
.feed li{display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:.78rem; line-height:1.35; color:rgba(243,238,230,.88); animation:feedIn .6s var(--ease)}
.feed li time{font-family:var(--f-mono); font-size:.62rem; color:var(--gold); padding-top:2px; font-variant-numeric:tabular-nums}
.feed li span{display:flex; gap:8px} .feed li svg{width:14px; height:14px; color:var(--ai); margin-top:1px}
@keyframes feedIn{from{transform:translateY(-14px); opacity:0}}
@media (max-width:980px){ .feed{display:none} }

/* kinetic band */
.band{margin-inline:-16px; overflow:hidden; border-block:1px solid var(--hair); padding-block:28px; white-space:nowrap}
.band .inner{display:inline-flex; gap:48px; font-family:var(--f-serif); font-size:clamp(3rem,9vw,8rem); line-height:1; will-change:transform}
.band .inner span{display:inline-flex; gap:48px; align-items:center}
.band em{color:var(--gold-2)}
.band i.dot{width:14px; height:14px; border-radius:50%; background:var(--ai); box-shadow:0 0 20px var(--ai); display:inline-block}
.band .outline{color:transparent; -webkit-text-stroke:1px rgba(243,238,230,.55)}

/* image reveal */
.reveal-img{clip-path:inset(0 0 0 0)}

/* FIX STUDIO */
.studio{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr); gap:28px; align-items:start}
.ctrl{display:grid; gap:26px; border:1px solid var(--hair); border-radius:10px; padding:28px; background:var(--glass)}
.ctrl h4{margin:0; font-family:var(--f-mono); font-weight:400; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); display:flex; gap:10px; align-items:center}
.ctrl h4 b{width:22px; height:22px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; font-weight:400; font-size:.62rem; letter-spacing:0}
.ptypes, .areas{display:flex; flex-wrap:wrap; gap:8px}
.ptypes button, .areas button{border:1px solid var(--hair); background:none; border-radius:999px; padding:8px 14px; font-size:.82rem; color:var(--mist); cursor:pointer; display:inline-flex; gap:8px; align-items:center; transition:all .25s}
.ptypes button svg, .areas button svg{width:15px; height:15px}
.ptypes button[aria-pressed="true"]{background:var(--gold-2); color:var(--obsidian); border-color:var(--gold-2)}
.areas button[aria-pressed="true"]{border-color:var(--ai); color:var(--ai)}
.areas button .ct{font-family:var(--f-mono); font-size:.62rem; min-width:18px; height:18px; border-radius:9px; background:var(--fault); color:var(--obsidian); display:grid; place-items:center; padding-inline:5px}
.areas button .ct:empty{display:none}
.symps{display:grid; gap:8px}
.sym{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; text-align:left; border:1px solid var(--hair); border-radius:8px; padding:12px 14px; background:rgba(7,9,13,.4); cursor:pointer; font-size:.9rem; color:var(--mist); transition:all .25s}
.sym .bx{width:20px; height:20px; border-radius:5px; border:1px solid var(--dim); display:grid; place-items:center; margin-top:1px}
.sym .bx svg{width:14px; height:14px; opacity:0}
.sym[aria-pressed="true"]{border-color:rgba(224,103,91,.55); color:var(--ivory); background:rgba(224,103,91,.07)}
.sym[aria-pressed="true"] .bx{background:var(--fault); border-color:var(--fault); color:var(--obsidian)}
.sym[aria-pressed="true"] .bx svg{opacity:1}
.sysgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sysgrid label{gap:6px}
.sysgrid select{padding:10px 12px; font-size:.9rem}
.mapwrap{position:sticky; top:90px; display:grid; gap:16px}
.map{position:relative; aspect-ratio:5/4; max-width:100%; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:radial-gradient(80% 70% at 50% 50%, rgba(111,227,225,.05), transparent 70%), var(--night)}
.map::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(243,238,230,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(243,238,230,.035) 1px, transparent 1px); background-size:32px 32px}
.map canvas{position:absolute; inset:0; width:100%; height:100%}
.node{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border-radius:999px; border:1px solid var(--hair); background:rgba(12,16,23,.92); font-size:.74rem; white-space:nowrap; transition:opacity .6s, border-color .6s, transform .6s var(--ease), filter .6s}
.node svg{width:15px; height:15px; color:var(--mist)}
.node.hot{border-color:rgba(224,103,91,.7); animation:jit 2.2s infinite}
.node.hot svg{color:var(--fault)}
.node.legacy{border-style:dashed}
@keyframes jit{20%{transform:translate(calc(-50% + 1px),-50%)}40%{transform:translate(calc(-50% - 1px),calc(-50% + 1px))}60%{transform:translate(-50%,-50%)}}
.map.fixed .node{animation:none; border-color:rgba(111,227,225,.5)}
.map.fixed .node svg{color:var(--ai)}
.map.fixed .node.legacy{opacity:.22; filter:grayscale(1); transform:translate(-50%,-50%) scale(.85)}
.map.fixed .node.legacy::after{content:"RETIRED"; position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:4px; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.2em; color:var(--fault)}
.core{position:absolute; left:50%; top:50%; width:96px; height:96px; transform:translate(-50%,-50%) scale(.4); opacity:0; border-radius:50%; display:grid; place-items:center; text-align:center; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em; color:var(--obsidian); background:radial-gradient(circle, var(--gold-2), var(--gold)); box-shadow:0 0 0 10px rgba(233,213,166,.08), 0 0 60px rgba(233,213,166,.45); transition:all .9s var(--ease); line-height:1.3}
.map.fixed .core{opacity:1; transform:translate(-50%,-50%) scale(1)}
.core::after{content:""; position:absolute; inset:-22px; border-radius:50%; border:1px dashed rgba(111,227,225,.45); animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.map .stamp{position:absolute; left:16px; top:14px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; color:var(--fault); display:flex; gap:8px; align-items:center}
.map.fixed .stamp{color:var(--ai)}
.map .empty{position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:.9rem; text-align:center; padding:40px; pointer-events:none}
.mstats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden}
.mstats div{background:var(--night); padding:16px 18px; display:grid; gap:2px}
.mstats b{font-family:var(--f-serif); font-weight:300; font-size:2.4rem; line-height:1; color:var(--fault); font-variant-numeric:tabular-nums; transition:color .6s}
.map-fixed-on .mstats b{color:var(--ai)}
.mstats span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
.fixbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.fixbar .btn{padding:14px 24px}
.plan{margin-top:56px; display:grid; gap:22px}
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.phase{border:1px solid var(--hair); border-radius:10px; padding:24px; display:grid; gap:14px; align-content:start; background:var(--glass)}
.phase header{display:grid; gap:4px}
.phase header small{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em; color:var(--gold)}
.phase header b{font-family:var(--f-serif); font-weight:400; font-size:1.8rem; line-height:1.1}
.phase header p{color:var(--mist); font-size:.86rem}
.fx{border-top:1px solid var(--hair); padding-top:12px; display:grid; gap:6px}
.fx .was{font-size:.82rem; color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(224,103,91,.6)}
.fx .now{font-size:.94rem; color:var(--ivory)}
.fx .meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.fx .meta .badge{padding:5px 10px; font-size:.58rem}
.fx .meta em{font-style:normal; font-family:var(--f-mono); font-size:.66rem; color:var(--gold-2)}
.phase .none{color:var(--dim); font-size:.88rem}
.deeper{border:1px solid var(--hair); border-radius:10px; padding:24px 28px; background:var(--night); display:grid; gap:14px}
.deeper .txt{white-space:pre-wrap; color:var(--ivory); font-size:.98rem; line-height:1.7; max-width:80ch}
@media (max-width:1020px){ .studio{grid-template-columns:1fr} .mapwrap{position:relative; top:0} .phases{grid-template-columns:1fr} }
@media (max-width:560px){ .map{aspect-ratio:4/5} .node{font-size:.62rem; padding:5px 9px 5px 7px} .node svg{width:12px; height:12px} .core{width:74px; height:74px; font-size:.48rem} .sysgrid{grid-template-columns:1fr} }


/* autonomous hotel */
.analogy{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden; margin-bottom:72px}
.analogy > div{background:var(--night); padding:clamp(24px,3.5vw,44px); display:grid; gap:18px; align-content:start}
.analogy .seq{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.analogy .seq span{display:grid; justify-items:center; gap:8px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); text-align:center}
.analogy .seq span i, .analogy .seq span svg{width:26px; height:26px}
.analogy .seq .o{width:62px; height:62px; border-radius:50%; border:1px solid var(--hair); display:grid; place-items:center}
.analogy .seq .o.now{border-color:var(--ai); color:var(--ai); box-shadow:0 0 24px rgba(111,227,225,.3)}
.analogy .seq .arr{color:var(--gold); width:18px; height:18px}
.analogy h3{font-size:clamp(1.7rem,2.8vw,2.4rem)}
.analogy p{color:var(--mist)}
@media (max-width:860px){ .analogy{grid-template-columns:1fr} }
.auto{position:relative; margin-inline:-16px; padding-inline:16px}
.auto-grid{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:36px; align-items:center; max-width:1240px; margin:0 auto; min-height:min(100svh,860px); padding-block:90px 40px}
.auto-side{display:grid; gap:22px; align-content:center}
.ctrls{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.seg{display:inline-grid; grid-template-columns:1fr 1fr; border:1px solid var(--hair); border-radius:999px; padding:3px}
.seg button{border:0; background:none; padding:8px 16px; border-radius:999px; cursor:pointer; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist)}
.seg button[aria-pressed="true"]{background:var(--gold-2); color:var(--obsidian)}
.seg button.t[aria-pressed="true"]{background:var(--fault); color:var(--obsidian)}
.lyr{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--hair); background:none; border-radius:999px; padding:8px 14px; font-size:.78rem; color:var(--mist); cursor:pointer}
.lyr svg{width:15px; height:15px}
.lyr[aria-pressed="true"]{border-color:var(--ai); color:var(--ai)}
.lyr.en[aria-pressed="true"]{border-color:var(--gold); color:var(--gold-2)}
.caps2{list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:c}
.caps2 li{display:grid; grid-template-columns:34px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--hair); color:var(--dim); transition:color .4s; font-size:.98rem; line-height:1.45}
.caps2 li::before{counter-increment:c; content:"0" counter(c); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; padding-top:4px}
.caps2 li.on{color:var(--ivory)}
.caps2 li.on::before{color:var(--ai)}
.mode-today .caps2 li.on::before{color:var(--fault)}
.stage{position:relative; aspect-ratio:1000/680; max-width:100%; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:radial-gradient(90% 70% at 50% 30%, rgba(111,227,225,.06), transparent 70%), var(--night)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%}
.stage .read{position:absolute; left:14px; top:12px; right:14px; display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); pointer-events:none}
.stage .read b{font-weight:400; color:var(--ai)}
.mode-today .stage .read b{color:var(--fault)}
.stage .bar{position:absolute; left:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--ai)); width:0}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1240px; margin:40px auto 0}
.pillar{border-top:1px solid var(--hair); padding-top:22px; display:grid; gap:12px; align-content:start}
.pillar .o{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ai); color:var(--ai)}
.pillar.en .o{border-color:var(--gold); color:var(--gold-2)}
.pillar h3{font-size:2rem}
.pillar p{color:var(--mist); font-size:.95rem}
@media (max-width:900px){ .auto-grid{grid-template-columns:1fr; min-height:0; padding-block:40px} .pillars{grid-template-columns:1fr} }


/* real logos */
.prod .lockup{display:flex; align-items:center; gap:12px; min-height:56px; transform:translateZ(36px)}
.prod .lockup .wm{font-family:var(--f-sans); font-weight:700; font-size:2rem; letter-spacing:-.02em; color:var(--ivory)}
.prod .for{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ai)}
.prod .plink{display:inline-flex; gap:6px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold-2); text-decoration:none}
.prod .plink svg{width:14px; height:14px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.logowall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.logowall .lg{background:var(--night); height:92px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; transition:background .4s}
.logowall .lg:hover{background:var(--deep)}
.logowall img{width:auto; max-width:100%; filter:brightness(0) invert(1); opacity:.78; transition:opacity .3s}
.logowall .lg:hover img, .logowall .lg:hover .txtlogo{opacity:1}
.logowall small{font-family:var(--f-sans); font-weight:600; font-size:.95rem; color:var(--ivory); opacity:.78}
.txtlogo{font-family:var(--f-sans); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ivory); opacity:.78}


/* stack */
.stack-rows{display:grid; gap:18px; margin:0 -16px 56px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.srow{display:flex; gap:18px; width:max-content; animation:slide 70s linear infinite}
.srow.rev{animation-direction:reverse; animation-duration:80s}
.stack-rows:hover .srow{animation-play-state:paused}
.chipl{display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border:1px solid var(--hair); border-radius:999px; background:var(--glass); white-space:nowrap; font-size:.92rem; color:var(--mist)}
.chipl img{height:22px; width:22px; filter:brightness(0) invert(1); opacity:.85}
.cats{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 -16px 40px; padding:14px 16px; position:sticky; top:calc(64px + env(safe-area-inset-top,0px)); z-index:20; background:rgba(7,9,13,.86); backdrop-filter:blur(14px); border-block:1px solid var(--hair)}
.cats button{display:inline-flex; align-items:center; gap:6px}
.cats button svg{width:14px; height:14px}
@media (max-width:700px){ .cats{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start} .cats button{flex:none} }
.cats button{border:1px solid var(--hair); background:none; border-radius:999px; padding:8px 16px; font-size:.82rem; color:var(--mist); cursor:pointer; transition:all .25s}
.cats button:hover{color:var(--ivory); border-color:var(--gold)}
.cats button[aria-pressed="true"]{background:var(--gold-2); color:var(--obsidian); border-color:var(--gold-2)}
.cats button span{font-family:var(--f-mono); font-size:.66rem; opacity:.7; margin-left:6px}
#sgrid{display:grid; gap:56px}
.sgroup{display:grid; gap:18px; scroll-margin-top:150px}
.sgroup header{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--hair)}
.sgroup .ci{width:46px; height:46px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-2); display:grid; place-items:center; flex:none}
.sgroup header > div{flex:1 1 260px; min-width:0}
.sgroup h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.sgroup header p{color:var(--mist); font-size:.92rem}
.sgroup .cnt{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
.sgroup .cnt b{color:var(--gold-2); font-weight:400}
.sgrid-in{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0; background:var(--night); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.st-tile{position:relative; background:var(--night); box-shadow:inset -1px -1px 0 var(--hair); min-height:118px; padding:18px 12px 14px; display:grid; justify-items:center; align-content:center; gap:10px; text-align:center; transition:background .35s}
.st-tile:hover{background:var(--deep)}
.st-tile img{height:30px; width:auto; max-width:110px; filter:brightness(0) invert(1); opacity:.82; transition:opacity .3s, transform .4s var(--ease)}
.st-tile:hover img{opacity:1; transform:translateY(-2px) scale(1.06)}
.st-tile .nm{font-size:.8rem; color:var(--mist); line-height:1.3}
.st-tile .wmk{font-family:var(--f-sans); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; color:var(--ivory); opacity:.85; line-height:30px}
.st-tile .ok{position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px var(--gold)}
.st-tile.in{animation:tileIn .5s var(--ease) both}
@keyframes tileIn{from{opacity:.1; transform:translateY(10px)}}
.legend{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin-top:18px; font-size:.82rem; color:var(--mist)}
.legend span{display:inline-flex; gap:8px; align-items:center}
.legend i.d{width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px var(--gold); display:inline-block}
.legend i.c{width:8px; height:8px; border-radius:50%; border:1px solid var(--mist); display:inline-block}


/* what we do: services + products */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:90px}
.door{position:relative; border:1px solid var(--hair); border-radius:10px; padding:clamp(28px,4vw,48px); display:grid; gap:18px; align-content:start; overflow:hidden; background:linear-gradient(160deg, var(--deep), var(--night))}
.door::after{content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(111,227,225,.16), transparent 70%); pointer-events:none}
.door.prod-door::after{background:radial-gradient(circle, rgba(233,213,166,.18), transparent 70%)}
.door .tag2{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ai); display:flex; gap:10px; align-items:center}
.door.prod-door .tag2{color:var(--gold)}
.door .tag2 svg{width:16px; height:16px}
.door h3{font-size:clamp(2.2rem,4vw,3.4rem)}
.door p{color:var(--mist); max-width:46ch}
.door ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.door li{display:flex; gap:12px; align-items:flex-start; font-size:.96rem}
.door li svg{width:18px; height:18px; color:var(--ai); margin-top:3px}
.door.prod-door li svg{color:var(--gold)}
.door .plogos{display:flex; flex-wrap:wrap; gap:22px; align-items:center; padding-block:6px}
.door .plogos img{height:30px; width:auto}
.door .plogos .sq{display:inline-flex; gap:8px; align-items:center; font-weight:700; font-size:1.3rem; letter-spacing:-.02em}
.door .btn{justify-self:start; margin-top:6px}
@media (max-width:900px){ .doors{grid-template-columns:1fr} }

.loop-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center; margin-bottom:100px}
.loop{position:relative; aspect-ratio:1/1; max-width:560px; width:100%; margin:0 auto}
.loop svg.ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.loop .ln{position:absolute; transform:translate(-50%,-50%); width:min(150px,30%); display:grid; justify-items:center; gap:8px; text-align:center}
.loop .ln .o{width:58px; height:58px; border-radius:50%; border:1px solid var(--hair); background:var(--night); display:grid; place-items:center; color:var(--mist); transition:all .5s var(--ease)}
.loop .ln b{font-weight:500; font-size:.86rem; line-height:1.3; color:var(--mist); transition:color .5s; background:var(--obsidian); padding:2px 6px; border-radius:4px}
.loop .ln small{background:var(--obsidian); padding:0 4px}
.loop .ln small{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.loop .ln.on .o{border-color:var(--ai); color:var(--ai); box-shadow:0 0 0 6px var(--ai-dim), 0 0 30px rgba(111,227,225,.35); transform:scale(1.08)}
.loop .ln.on.p .o{border-color:var(--gold); color:var(--gold-2); box-shadow:0 0 0 6px rgba(233,213,166,.12), 0 0 30px rgba(233,213,166,.35)}
.loop .ln.on b{color:var(--ivory)}
.loop .center{position:absolute; inset:30%; border-radius:50%; display:grid; place-items:center; text-align:center; padding:10px}
.loop .center b{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.1}
.loop .center b em{color:var(--gold-2)}
.loop .center small{display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.22em; color:var(--ai); margin-top:8px}
.loop-copy{display:grid; gap:22px}
.loop-steps{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--hair)}
.loop-steps li{display:grid; grid-template-columns:28px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--hair); color:var(--dim); transition:color .4s; cursor:pointer}
.loop-steps li svg{width:18px; height:18px; margin-top:3px}
.loop-steps li b{display:block; font-weight:500}
.loop-steps li.on{color:var(--ivory)}
.loop-steps li.on svg{color:var(--ai)}
.loop-steps li.on.p svg{color:var(--gold)}
.loop-steps li span{font-size:.92rem}
@media (max-width:900px){ .loop-wrap{grid-template-columns:1fr} .loop .ln b{font-size:.72rem} .loop .ln small{display:none} .loop .ln .o{width:46px; height:46px} }

.svc-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px}
.svcs{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden}
.svc{background:var(--night); padding:28px; display:grid; gap:12px; align-content:start; transition:background .4s; position:relative}
.svc:hover{background:var(--deep)}
.svc .o{width:48px; height:48px; border-radius:50%; border:1px solid var(--ai); color:var(--ai); display:grid; place-items:center}
.svc h4{margin:0; font-family:var(--f-serif); font-weight:400; font-size:1.7rem; line-height:1.1}
.svc p{color:var(--mist); font-size:.93rem}
.svc .ex{font-size:.82rem; color:var(--gold-2); border-top:1px solid var(--hair); padding-top:12px; display:flex; gap:8px}
.svc .ex b{font-family:var(--f-mono); font-weight:400; font-size:.6rem; letter-spacing:.18em; color:var(--dim); padding-top:3px; flex:none}
.svc .num{position:absolute; top:22px; right:24px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:var(--dim)}
.svc.feature{background:linear-gradient(160deg, rgba(111,227,225,.08), var(--night))}
.svc.cta{background:linear-gradient(160deg, rgba(233,213,166,.12), var(--night)); text-decoration:none; color:inherit}
.svc.cta .o{border-color:var(--gold); color:var(--gold-2)}
.svc.cta:hover{background:linear-gradient(160deg, rgba(233,213,166,.2), var(--deep))}
.spin-ring{transform-box:fill-box; transform-origin:center; animation:spin 40s linear infinite}


/* futures: fully automated industries */
.fut-tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:30px}
.fut-tabs button{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); background:var(--glass); border-radius:999px; padding:10px 16px; font-size:.86rem; color:var(--mist); cursor:pointer; transition:all .3s}
.fut-tabs button svg{width:16px; height:16px}
.fut-tabs button:hover{color:var(--ivory); border-color:var(--gold)}
.fut-tabs button[aria-pressed="true"]{background:var(--gold-2); color:var(--obsidian); border-color:var(--gold-2)}
.player{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:22px; align-items:stretch}
.screen{position:relative; min-height:560px; border-radius:10px; overflow:hidden; border:1px solid var(--hair); background:var(--night); display:grid; align-content:end}
.screen .ph{position:absolute; inset:0}
.screen .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s var(--ease); transform:scale(1.08)}
.screen .ph img.on{opacity:1; animation:kb2 14s ease-out forwards}
@keyframes kb2{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.screen::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,13,.5) 0%, rgba(7,9,13,.1) 30%, rgba(7,9,13,.6) 62%, rgba(7,9,13,.95) 100%); pointer-events:none}
.screen .bars{position:absolute; z-index:2; top:16px; left:16px; right:16px; display:flex; gap:6px}
.screen .bars button{flex:1; height:3px; border:0; padding:0; background:rgba(243,238,230,.22); border-radius:2px; cursor:pointer; overflow:hidden; position:relative}
.screen .bars button i{position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--gold-2),var(--ai))}
.screen .bars button.done i{width:100%}
.screen .top{position:absolute; z-index:2; top:34px; left:22px; right:22px; display:flex; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(243,238,230,.75)}
.screen .top b{color:var(--ai); font-weight:400}
.screen .scan2{position:absolute; z-index:1; left:0; right:0; height:90px; top:-90px; background:linear-gradient(180deg, transparent, rgba(111,227,225,.12), transparent); animation:scanv 6s linear infinite; pointer-events:none}
.screen .body{position:relative; z-index:2; padding:28px; display:grid; gap:14px}
.screen .scn{font-family:var(--f-serif); font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--gold-2); font-style:italic}
.screen .when{font-family:var(--f-serif); font-weight:300; font-size:clamp(3rem,6vw,5rem); line-height:.9; color:var(--ivory)}
.screen h3{font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1.12; max-width:24ch}
.screen .desc{color:rgba(243,238,230,.82); max-width:52ch; min-height:3.2em}
.chips2{display:flex; flex-wrap:wrap; gap:8px}
.chips2 span{display:inline-flex; gap:6px; align-items:center; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid rgba(243,238,230,.25); background:rgba(7,9,13,.45); backdrop-filter:blur(8px)}
.chips2 span svg{width:13px; height:13px}
.chips2 .t-robot{color:var(--ai); border-color:rgba(111,227,225,.5)}
.chips2 .t-ai{color:#CFF6F5}
.chips2 .t-data{color:#B9C7FF; border-color:rgba(185,199,255,.4)}
.chips2 .t-energy{color:var(--gold-2); border-color:rgba(233,213,166,.5)}
.st-now{color:var(--ok)!important; border-color:rgba(121,214,161,.55)!important}
.st-em{color:var(--gold-2)!important; border-color:rgba(233,213,166,.5)!important}
.st-vi{color:var(--mist)!important; border-style:dashed!important}
.side2{border:1px solid var(--hair); border-radius:10px; background:var(--night); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden}
.side2 header{padding:22px 24px 16px; border-bottom:1px solid var(--hair); display:grid; gap:6px}
.side2 header h3{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.side2 header p{color:var(--mist); font-size:.9rem}
.scenes{list-style:none; margin:0; padding:6px 0; display:grid; align-content:start}
.scenes li{display:grid; grid-template-columns:62px 1fr auto; gap:12px; align-items:start; padding:11px 24px; cursor:pointer; color:var(--dim); border-left:2px solid transparent; transition:all .35s}
.scenes li time{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; padding-top:3px}
.scenes li b{font-weight:500; font-size:.92rem; line-height:1.35}
.scenes li .dot{width:8px; height:8px; border-radius:50%; margin-top:6px}
.scenes li .dot.now{background:var(--ok)} .scenes li .dot.em{background:var(--gold-2)} .scenes li .dot.vi{border:1px solid var(--mist)}
.scenes li:hover{color:var(--mist)}
.scenes li.on{color:var(--ivory); border-left-color:var(--ai); background:linear-gradient(90deg, rgba(111,227,225,.07), transparent)}
.scenes li.on time{color:var(--ai)}
.side2 footer{border-top:1px solid var(--hair); padding:18px 24px; display:grid; gap:12px}
.side2 footer .lbl{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.side2 footer p{font-size:.92rem; color:var(--ivory)}
.side2 footer .btn{justify-self:start; padding:12px 20px}
.legend2{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin-top:20px; font-size:.82rem; color:var(--mist)}
.legend2 span{display:inline-flex; gap:8px; align-items:center}
.legend2 i{width:8px; height:8px; border-radius:50%; display:inline-block}
@media (max-width:980px){ .player{grid-template-columns:1fr} .screen{min-height:520px} }


/* ===== the journey map ===== */
body{position:relative}
main{position:relative; z-index:1}
footer{position:relative; z-index:1}
#route{position:absolute; left:0; top:0; width:100%; z-index:0; pointer-events:none; overflow:visible}
#route .base{fill:none; stroke:rgba(243,238,230,.10); stroke-width:1.2; stroke-dasharray:3 9}
#route .prog{fill:none; stroke:url(#routeGrad); stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(111,227,225,.55))}
#route .mk circle.r{fill:var(--obsidian); stroke:rgba(243,238,230,.25); stroke-width:1.2; transition:all .4s}
#route .mk.passed circle.r{stroke:var(--gold-2); fill:var(--gold)}
#route .mk text{font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; fill:rgba(243,238,230,.35); text-transform:uppercase}
#route .mk.passed text{fill:var(--gold-2)}
#route .trav .halo{fill:rgba(111,227,225,.18)}
#route .trav .dot{fill:var(--ai)}
#route .trav .pl{fill:var(--gold-2)}
.atmo{position:fixed; inset:0; z-index:0; pointer-events:none; transition:opacity 1.2s}
.atmo i{position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--ease)}
.atmo .a-now{background:radial-gradient(60% 50% at 0% 100%, rgba(233,213,166,.07), transparent 70%)}
.atmo .a-next{background:radial-gradient(60% 55% at 100% 0%, rgba(111,227,225,.09), transparent 70%)}
.atmo .a-future{background:radial-gradient(70% 60% at 50% 0%, rgba(111,227,225,.11), transparent 65%), radial-gradient(60% 50% at 100% 100%, rgba(233,213,166,.09), transparent 70%)}
body[data-era="now"] .atmo .a-now, body[data-era="arrive"] .atmo .a-now{opacity:1}
body[data-era="next"] .atmo .a-next{opacity:1}
body[data-era="future"] .atmo .a-future{opacity:1}

.gate h2, .gate .lede, .gate .label, .gate .cue, .head h2, .head .lede, .head .label{text-shadow:0 0 10px var(--obsidian), 0 0 22px var(--obsidian), 0 0 40px var(--obsidian)}
/* era gates */
.gate{position:relative; padding-block:clamp(110px,16vw,200px); text-align:center; overflow:hidden}
.gate::before{content:""; position:absolute; left:50%; top:50%; width:min(900px,120vw); aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(111,227,225,.08), transparent 60%); pointer-events:none}
.gate[data-era="now"]::before{background:radial-gradient(circle, rgba(233,213,166,.08), transparent 60%)}
.gate-in{position:relative; display:grid; gap:22px; justify-items:center}
.gyear{font-family:var(--f-serif); font-weight:300; font-size:clamp(5rem,17vw,15rem); line-height:.85; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1px rgba(243,238,230,.35); position:relative; font-variant-numeric:tabular-nums}
.gyear .fill{position:absolute; inset:0; color:var(--gold-2); -webkit-text-stroke:0; clip-path:inset(0 100% 0 0)}
.gate[data-era="future"] .gyear .fill{color:var(--ai)}
.gate h2{font-size:clamp(2.4rem,5.4vw,4.6rem)}
.gate .lede{margin-inline:auto; text-align:center}
.eras{position:relative; display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:14px; width:min(620px,92%); margin-top:18px}
.eras span.er{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); display:grid; justify-items:center; gap:8px}
.eras span.er::before{content:""; width:12px; height:12px; border-radius:50%; border:1px solid var(--dim); background:var(--obsidian)}
.eras span.er.on{color:var(--gold-2)}
.eras span.er.on::before{border-color:var(--gold-2); background:var(--gold); box-shadow:0 0 14px var(--gold)}
.eras span.er.here::before{border-color:var(--ai); background:var(--ai); box-shadow:0 0 18px var(--ai)}
.eras span.er.here{color:var(--ai)}
.eras i{height:1px; background:linear-gradient(90deg, var(--gold), var(--ai)); opacity:.5; margin-top:-20px}
.gate .cue{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; color:var(--mist); display:flex; gap:10px; align-items:center}
.gate .cue svg{width:15px; height:15px}

/* route HUD */
.rhud{position:fixed; z-index:45; right:18px; top:50%; transform:translateY(-50%); display:none; grid-template-columns:auto; gap:10px; padding:16px 12px; border:1px solid var(--hair); border-radius:14px; background:rgba(7,9,13,.62); backdrop-filter:blur(14px); width:46px; overflow:hidden; transition:width .5s var(--ease)}
.rhud:hover, .rhud:focus-within{width:236px}
@media (min-width:1180px){ .rhud{display:grid} }
.rhud .yr{font-family:var(--f-serif); font-weight:300; font-size:1.05rem; color:var(--gold-2); white-space:nowrap; text-align:left; padding-left:2px}
.rhud .yr small{display:block; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.22em; color:var(--ai); margin-top:2px}
.rhud ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; position:relative}
.rhud ol::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--hair)}
.rhud li button{all:unset; cursor:pointer; display:flex; align-items:center; gap:12px; padding:4px 0; white-space:nowrap; font-size:.78rem; color:var(--dim); width:100%}
.rhud li button i{width:9px; height:9px; border-radius:50%; border:1px solid var(--dim); background:var(--obsidian); flex:none; margin-left:4px; position:relative; z-index:1; transition:all .3s}
.rhud li.era button{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-top:8px}
.rhud li.era button i{width:13px; height:13px; margin-left:2px; border-color:var(--gold)}
.rhud li.passed button i{background:var(--gold); border-color:var(--gold-2)}
.rhud li.on button{color:var(--ivory)}
.rhud li.on button i{background:var(--ai); border-color:var(--ai); box-shadow:0 0 12px var(--ai)}
.rhud li button:focus-visible{outline:1px solid var(--gold); outline-offset:2px}
.rhud .lb{opacity:0; transition:opacity .3s}
.rhud:hover .lb, .rhud:focus-within .lb{opacity:1}
@media (min-width:1180px){ .feed{right:84px} }
/* mobile pill */
.rpill{position:fixed; z-index:45; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px; border:1px solid var(--hair); background:rgba(7,9,13,.75); backdrop-filter:blur(14px); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden}
.rpill b{color:var(--gold-2); font-weight:400}
.rpill .pb{width:60px; height:2px; background:var(--hair); border-radius:2px; overflow:hidden; flex:none}
.rpill .pb i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--ai))}
@media (min-width:1180px){ .rpill{display:none} }

footer{padding-block:56px 64px; color:var(--dim); font-size:.85rem}
footer .wrap{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end}
footer .big{font-family:var(--f-serif); font-size:clamp(2.6rem,9vw,8rem); line-height:.9; color:var(--ivory); opacity:.92; grid-column:1/-1; letter-spacing:-.02em}
footer .big em{color:var(--gold-2)}
footer nav{display:flex; flex-wrap:wrap; gap:8px 26px}
footer a{text-decoration:none} footer a:hover{color:var(--ivory)}
@media (max-width:700px){ footer .wrap{grid-template-columns:1fr} }

/* products: four tabs + connected suite */
.ptabs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden; margin-bottom:22px}
.ptabs button{position:relative; display:grid; justify-items:start; gap:10px; padding:20px 22px 18px; border:0; background:var(--night); cursor:pointer; text-align:left; transition:background .4s}
.ptabs button::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--gold-2),var(--ai)); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.ptabs button:hover{background:var(--deep)}
.ptabs button[aria-selected="true"]{background:linear-gradient(160deg, rgba(233,213,166,.10), var(--deep))}
.ptabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ptabs .lk{display:flex; align-items:center; gap:8px; height:34px; opacity:.6; transition:opacity .3s}
.ptabs button:hover .lk, .ptabs button[aria-selected="true"] .lk{opacity:1}
.ptabs .lk img{height:28px; width:auto}
.ptabs .lk .wm{font-family:var(--f-sans); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; color:var(--ivory)}
.ptabs small{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist)}
.pst{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid rgba(121,214,161,.5); color:var(--ok)}
.pst::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:blink 2.4s ease-in-out infinite}
.pst.pilot{border-color:rgba(233,213,166,.5); color:var(--gold-2)}
.ppanel{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:22px; align-items:stretch}
.ppanel[hidden]{display:none}
.pinfo{border:1px solid var(--hair); border-radius:10px; background:linear-gradient(160deg, var(--deep), var(--night)); padding:clamp(26px,3.4vw,44px); display:grid; gap:22px; align-content:start}
.pinfo .for{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ai)}
.pinfo h3{font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.06}
.pinfo h3 em{font-style:italic; color:var(--gold-2)}
.pinfo > p{color:var(--mist)}
.pwhy{border-left:2px solid var(--gold); padding:4px 0 4px 18px; display:grid; gap:6px}
.pwhy b{font-family:var(--f-mono); font-weight:400; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.pwhy p{font-family:var(--f-serif); font-style:italic; font-size:1.3rem; line-height:1.35; color:var(--ivory)}
.phow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; counter-reset:ph}
.phow li{counter-increment:ph; display:grid; grid-template-columns:30px 1fr; gap:2px 12px; font-size:.9rem; color:var(--mist)}
.phow li::before{content:counter(ph,decimal-leading-zero); grid-row:span 2; font-family:var(--f-mono); font-size:.66rem; color:var(--ai); padding-top:4px}
.phow li b{font-weight:500; color:var(--ivory)}
.pfoot{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid var(--hair)}
.pints{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pints > span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-right:4px}
.pints i{font-style:normal; font-size:.8rem; padding:5px 12px; border-radius:999px; border:1px solid var(--hair); color:var(--mist)}
.plink2{display:inline-flex; gap:6px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold-2); text-decoration:none}
.plink2 svg{width:14px; height:14px}
.pside{display:grid; gap:22px; grid-template-rows:1fr auto}
.vig{position:relative; border:1px solid var(--hair); border-radius:10px; background:radial-gradient(90% 80% at 80% 0%, rgba(111,227,225,.08), transparent 60%), var(--night); padding:58px 22px 34px; overflow:hidden; display:grid; gap:14px; align-content:center; min-height:360px}
.vig .vt{position:absolute; top:22px; left:22px; right:22px; display:flex; justify-content:space-between; gap:10px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist)}
.vig .vt b{font-weight:400; color:var(--ai)}
.vig .ex{position:absolute; right:14px; bottom:12px; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.2em; color:var(--dim)}
.vrow{display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; padding:14px 16px; border:1px solid var(--hair); border-radius:8px; background:var(--glass); transition:border-color .5s, background .5s}
.vrow small{display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--mist)}
.vrow .why{grid-column:1/-1; font-size:.8rem; color:var(--ai); opacity:0; max-height:0; transition:opacity .5s, max-height .5s}
.vrow.focus{border-color:rgba(233,213,166,.6); background:rgba(233,213,166,.06)}
.vrow.focus .why{opacity:1; max-height:40px}
.vprice{display:flex; gap:10px; align-items:baseline; font-variant-numeric:tabular-nums}
.vprice s{color:var(--dim); font-size:.9rem}
.vprice b{font-family:var(--f-serif); font-weight:400; font-size:1.6rem; color:var(--gold-2)}
.vbtn{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px; border-radius:999px; border:1px solid var(--gold-2); color:var(--gold-2); white-space:nowrap; transition:all .4s}
.vbtn.done{background:var(--ok); border-color:var(--ok); color:var(--obsidian)}
.vjar{display:grid; justify-items:center; gap:4px; padding:12px; text-align:center}
.vjar b{font-family:var(--f-serif); font-weight:300; font-size:3.2rem; line-height:1; color:var(--gold-2); font-variant-numeric:tabular-nums}
.vjar small{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist)}
.vsplit{display:grid; gap:8px}
.vsplit .c{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--hair); border-radius:8px; background:var(--glass)}
.vsplit .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:.7rem; background:rgba(111,227,225,.12); color:var(--ai)}
.vsplit .bar{height:3px; border-radius:2px; background:var(--hair); overflow:hidden; margin-top:6px}
.vsplit .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-2),var(--ai)); transition:width 1.2s var(--ease)}
.vsplit .amt{font-family:var(--f-mono); font-size:.8rem; color:var(--ivory); font-variant-numeric:tabular-nums; display:flex; gap:6px; align-items:center}
.vsplit .amt svg{width:14px; height:14px; color:var(--ok); opacity:0; transition:opacity .4s}
.vsplit .c.paid .amt svg{opacity:1}
.vnote{font-size:.8rem; color:var(--mist); display:flex; gap:8px; align-items:center}
.vnote svg{width:15px; height:15px; color:var(--ai)}
.vlist{display:grid; gap:8px}
.vlist .c{display:grid; grid-template-columns:24px 34px 1fr auto; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--hair); border-radius:8px; background:var(--glass); transition:all .5s}
.vlist .n{font-family:var(--f-mono); font-size:.7rem; color:var(--dim)}
.vlist .sc{font-family:var(--f-serif); font-size:1.5rem; color:var(--gold-2); font-variant-numeric:tabular-nums}
.vlist .tags{font-size:.72rem; color:var(--mist)}
.vlist .tags .warn{color:var(--gold-2)} .vlist .tags .no{color:var(--fault)}
.vlist .c.top{border-color:rgba(121,214,161,.55); background:rgba(121,214,161,.06)}
.vlist .c.out{opacity:.45}
.vstat{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 14px; border-radius:8px; border:1px dashed var(--hair); font-size:.82rem; color:var(--mist); transition:all .5s}
.vstat b{font-weight:500; color:var(--ivory)}
.vstat.ok{border-style:solid; border-color:rgba(121,214,161,.55); color:var(--ok)}
.vheat{display:grid; gap:10px}
.vheat .tm{display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; font-size:.78rem; color:var(--mist)}
.vheat .tiles{display:grid; grid-template-columns:repeat(6,minmax(0,42px)); gap:6px}
.vheat .tiles i{aspect-ratio:1; border-radius:6px; display:grid; place-items:center; font-style:normal; font-family:var(--f-mono); font-size:.58rem; color:rgba(7,9,13,.75); transition:background .8s}
.h-g{background:var(--ok)} .h-a{background:var(--gold-2)} .h-r{background:var(--fault)} .h-x{background:#3A3F48; color:var(--mist)!important}
.vlegend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.7rem; color:var(--mist)}
.vlegend span{display:inline-flex; gap:6px; align-items:center}
.vlegend i{width:8px; height:8px; border-radius:2px; display:inline-block}
.pstats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden}
.pstats div{background:var(--night); padding:18px 14px; display:grid; gap:6px; align-content:start}
.pstats b{font-family:var(--f-serif); font-weight:300; font-size:clamp(1.8rem,2.6vw,2.4rem); line-height:1; color:var(--gold-2); font-variant-numeric:tabular-nums}
.pstats span{font-size:.72rem; line-height:1.4; color:var(--mist)}
.ppanel.in .pinfo > *, .ppanel.in .pside > *{animation:pin .8s var(--ease) both}
.ppanel.in .pinfo > *:nth-child(2){animation-delay:.05s} .ppanel.in .pinfo > *:nth-child(3){animation-delay:.1s} .ppanel.in .pinfo > *:nth-child(4){animation-delay:.15s} .ppanel.in .pinfo > *:nth-child(5){animation-delay:.2s} .ppanel.in .pinfo > *:nth-child(6){animation-delay:.25s}
.ppanel.in .pside > *:nth-child(2){animation-delay:.15s}
.mq{transform:scale(1.3); transform-origin:left center}
@keyframes blink{50%{opacity:.35}}
@keyframes pin{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@media (max-width:1020px){ .ppanel{grid-template-columns:1fr} .ptabs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .phow{grid-template-columns:1fr} .pstats{grid-template-columns:repeat(2,1fr)} .vheat .tm{grid-template-columns:1fr} .ptabs button{padding:16px 14px} .ptabs .lk img{height:22px} .ptabs .lk .wm{font-size:1.05rem} }

/* connected suite */
.suite{margin-top:90px}
.suite .head{margin-bottom:40px}
.sgraph{position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:34px clamp(120px,14vw,190px); align-items:center; padding:34px; border:1px solid var(--hair); border-radius:12px; background:radial-gradient(70% 60% at 50% 40%, rgba(111,227,225,.06), transparent 70%), var(--night)}
.sgraph svg.wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.sgraph .wire{fill:none; stroke:rgba(243,238,230,.18); stroke-width:1}
.sgraph .flow{fill:none; stroke:url(#wg); stroke-width:1.6; stroke-dasharray:4 10; animation:dash 1.6s linear infinite}
.sgraph .wl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; fill:var(--mist)}
@keyframes dash{to{stroke-dashoffset:-28}}
.scol{display:grid; gap:18px; position:relative; z-index:1}
.snode{position:relative; border:1px solid var(--hair); border-radius:10px; background:var(--deep); padding:16px 18px; display:grid; gap:6px}
.snode .lk{display:flex; align-items:center; gap:8px; height:30px}
.snode .lk img{height:24px; width:auto}
.snode .lk .wm{font-weight:700; font-size:1.15rem; letter-spacing:-.02em}
.snode p{font-size:.8rem; color:var(--mist); line-height:1.45}
.snode.ext{background:var(--glass); border-style:dashed}
.snode.ext b{font-weight:500; font-size:.95rem}
.snode.hub{border-color:rgba(233,213,166,.45); box-shadow:0 0 40px rgba(233,213,166,.06)}
.sbase{grid-column:1/-1; position:relative; z-index:1; border:1px dashed rgba(233,213,166,.45); border-radius:10px; padding:18px 22px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; background:linear-gradient(90deg, rgba(233,213,166,.06), transparent)}
.sbase .lk{display:flex; align-items:center; gap:8px}
.sbase .lk img{height:24px} .sbase .lk .wm{font-weight:700; font-size:1.15rem; letter-spacing:-.02em}
.sbase p{color:var(--mist); font-size:.9rem; flex:1; min-width:240px}
.flows{display:none; list-style:none; margin:20px 0 0; padding:0; gap:10px}
.flows li{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; font-size:.82rem; color:var(--mist); padding:10px 14px; border:1px solid var(--hair); border-radius:8px}
.flows li b{font-weight:500; color:var(--ivory)} .flows li em{font-style:normal; font-family:var(--f-mono); font-size:.6rem; color:var(--ai); text-align:center}
@media (max-width:900px){ .sgraph{grid-template-columns:1fr; gap:14px; padding:18px} .sgraph svg.wires{display:none} .flows{display:grid} }

/* how we built them */
.bprin{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden; margin-bottom:70px}
.bprin div{background:var(--night); padding:22px 20px; display:grid; gap:8px}
.bprin small{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:var(--ai)}
.bprin b{font-family:var(--f-serif); font-weight:400; font-size:1.35rem; line-height:1.15}
.bprin p{font-size:.84rem; color:var(--mist)}
.blanes{display:grid; gap:26px}
.blane{border:1px solid var(--hair); border-radius:12px; background:linear-gradient(160deg, var(--deep), var(--night)); padding:26px clamp(18px,2.6vw,32px) 30px; display:grid; gap:26px}
.blane header{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.blane header .lk{display:flex; align-items:center; gap:8px; height:34px}
.blane header .lk img{height:28px; width:auto}
.blane header .lk .wm{font-weight:700; font-size:1.35rem; letter-spacing:-.02em}
.blane header p{font-family:var(--f-serif); font-style:italic; font-size:1.25rem; color:var(--gold-2); flex:1; min-width:220px}
.btrack{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:22px}
.btrack .ln{position:absolute; left:6px; right:6px; top:6px; height:1px; background:var(--hair)}
.btrack .ln i{position:absolute; inset:0; background:linear-gradient(90deg,var(--gold),var(--ai)); transform-origin:0 50%; transform:scaleX(1)}
.bch{position:relative; display:grid; gap:8px; align-content:start; padding-top:30px}
.bch::before{content:""; position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:var(--obsidian); border:1px solid var(--gold)}
.bch:last-child::before{background:var(--ai); border-color:var(--ai); box-shadow:0 0 14px var(--ai)}
.bch small{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.bch:last-child small{color:var(--ai)}
.bch b{font-family:var(--f-serif); font-weight:400; font-size:1.3rem; line-height:1.15}
.bch p{font-size:.84rem; color:var(--mist); line-height:1.55}
.bclose{margin-top:60px; text-align:center; display:grid; gap:20px; justify-items:center}
.bclose p{font-family:var(--f-serif); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.25; max-width:30ch}
.bclose p em{font-style:italic; color:var(--gold-2)}
@media (max-width:1020px){ .bprin{grid-template-columns:repeat(2,1fr)} .btrack{grid-template-columns:1fr; gap:18px; padding-left:28px} .btrack .ln{left:6px; right:auto; top:6px; bottom:6px; width:1px; height:auto} .btrack .ln i{transform-origin:50% 0} .bch{padding-top:0} .bch::before{left:-28px; top:4px} }
@media (max-width:520px){ .bprin{grid-template-columns:1fr} }

[hidden]{display:none!important}
.hero h1{font-size:clamp(3rem,7.4vw,6.8rem); max-width:15ch}
.lg-dim{filter:brightness(0) invert(1); opacity:.4}
.lg-chip{border-radius:6px}
/* audience switch (hero + ops) */
.aud{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.aud > span{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-right:6px}
.aud button{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(243,238,230,.28); background:rgba(7,9,13,.4); backdrop-filter:blur(8px); border-radius:999px; padding:10px 16px; font-size:.88rem; color:rgba(243,238,230,.85); cursor:pointer; transition:all .3s}
.aud button svg{width:16px; height:16px}
.aud button:hover{border-color:var(--gold-2); color:var(--ivory)}
.aud button[aria-checked="true"]{background:var(--gold-2); border-color:var(--gold-2); color:var(--obsidian)}
.audproof{display:flex; gap:10px; align-items:center; font-size:.92rem; color:rgba(243,238,230,.78); min-height:1.6em}
.audproof svg{width:16px; height:16px; color:var(--ai); flex:none}
.hero .audwrap{display:grid; gap:14px}

/* the whole operation */
.ops-bar{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; margin-bottom:26px}
.ops-mode{display:inline-flex; padding:4px; border:1px solid var(--hair); border-radius:999px; background:var(--glass)}
.ops-mode button{border:0; background:none; border-radius:999px; padding:9px 18px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); cursor:pointer; display:inline-flex; gap:8px; align-items:center; transition:all .35s}
.ops-mode button svg{width:14px; height:14px}
.ops-mode button[aria-pressed="true"]{background:var(--ivory); color:var(--obsidian)}
.ops-mode button[data-m="fix"][aria-pressed="true"]{background:var(--ai); color:var(--obsidian)}
.opsgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:12px; overflow:hidden}
.opc{position:relative; background:var(--night); padding:22px 20px 20px; display:grid; gap:10px; align-content:start; min-height:210px; transition:background .6s}
.opc header{display:flex; gap:10px; align-items:center}
.opc header .ic{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(224,103,91,.5); color:var(--fault); transition:all .6s; flex:none}
.opc header .ic svg{width:17px; height:17px}
.opc header b{font-weight:500; font-size:.98rem; line-height:1.25}
.opc .ost{position:relative; min-height:4.6em}
.opc .ost p{position:absolute; inset:0 0 auto 0; font-size:.86rem; line-height:1.5; transition:opacity .5s, transform .6s var(--ease)}
.opc .ost .t{color:var(--mist)}
.opc .ost .f{color:var(--ivory); opacity:0; transform:translateY(10px)}
.opc .otag{justify-self:start; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--hair); color:var(--dim); transition:all .5s}
.opsgrid.fix .opc{background:linear-gradient(160deg, rgba(111,227,225,.05), var(--night))}
.opsgrid.fix .opc header .ic{border-color:rgba(111,227,225,.55); color:var(--ai); box-shadow:0 0 18px rgba(111,227,225,.15)}
.opsgrid.fix .opc .ost .t{opacity:0; transform:translateY(-10px)}
.opsgrid.fix .opc .ost .f{opacity:1; transform:none}
.opsgrid.fix .opc .otag{color:var(--ai); border-color:rgba(111,227,225,.45)}
.opsgrid.fix .opc .otag.isp{color:var(--gold-2); border-color:rgba(233,213,166,.55)}
.ops-sum{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; margin-top:24px; font-size:.9rem; color:var(--mist)}
.ops-sum b{font-family:var(--f-serif); font-weight:400; font-size:1.5rem; color:var(--gold-2); margin-right:6px}
@media (max-width:1100px){ .opsgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .opsgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .opsgrid{grid-template-columns:1fr} .opc{min-height:0} .opc .ost{min-height:3.4em} }

/* who we build with */
.wfeat{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:linear-gradient(160deg, var(--deep), var(--night)); margin-bottom:22px}
.wfeat .ph{position:relative; min-height:380px}
.wfeat .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; filter:grayscale(.15)}
.wfeat .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 55%, var(--deep)), linear-gradient(0deg, rgba(7,9,13,.6), transparent 40%)}
.wfeat .tx{padding:clamp(26px,4vw,52px); display:grid; gap:20px; align-content:center}
.wfeat blockquote{margin:0; font-family:var(--f-serif); font-weight:300; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.15}
.wfeat blockquote::before{content:"\201C"; color:var(--gold); margin-right:4px}
.wfeat blockquote::after{content:"\201D"; color:var(--gold)}
.wfeat cite{font-style:normal; display:flex; gap:14px; align-items:center}
.wfeat cite img{height:44px; width:auto; filter:brightness(0) invert(1); opacity:.85}
.wfeat cite b{display:block; font-weight:500}
.wfeat cite small{display:block; font-size:.82rem; color:var(--mist)}
.wfeat ul{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--hair); display:grid; gap:10px; font-size:.9rem; color:var(--mist)}
.wfeat li{display:flex; gap:10px; align-items:flex-start}
.wfeat li svg{width:16px; height:16px; color:var(--gold); margin-top:4px}
.wfeat li b{color:var(--ivory); font-weight:500}
.wgroups{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:22px}
.wg{border:1px solid var(--hair); border-radius:12px; background:var(--night); padding:24px; display:grid; gap:16px; align-content:start}
.wg .label{display:flex; gap:8px; align-items:center}
.wg .label svg{width:15px; height:15px}
.wg h3{font-size:1.7rem; line-height:1.1}
.wg > p{font-size:.88rem; color:var(--mist)}
.wlogos{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.wlogos span{background:var(--deep); min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 10px; text-align:center}
.wlogos img{max-width:100%; width:auto}
.wlogos small{font-size:.66rem; line-height:1.3; color:var(--mist)}
.wlogos .tx{font-weight:600; font-size:.95rem; color:var(--ivory)}
.lg-ink{filter:brightness(0) invert(1); opacity:.82}
.lg-gray{filter:grayscale(1) invert(1) contrast(1.2); opacity:.8; mix-blend-mode:screen}
.lg-color{opacity:.95}
.wcases{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:12px; overflow:hidden; margin-bottom:22px}
.wcases div{background:var(--night); padding:22px 24px; display:grid; gap:4px}
.wcases b{font-family:var(--f-serif); font-weight:300; font-size:clamp(2.6rem,4.4vw,3.6rem); line-height:1; color:var(--gold-2)}
.wcases strong{font-weight:500}
.wcases small{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
.wwall{border:1px solid var(--hair); border-radius:12px; background:var(--night); padding:26px 0; display:grid; gap:18px; margin-bottom:22px; overflow:hidden}
.wwall header{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; justify-content:space-between; padding:0 26px}
.wwall header b{font-family:var(--f-serif); font-weight:300; font-size:2.6rem; line-height:1; color:var(--gold-2); margin-right:10px}
.wwall header span{color:var(--mist); font-size:.9rem}
.wrow{display:flex; gap:44px; width:max-content; align-items:center; animation:slide 80s linear infinite; padding-inline:22px}
.wrow.rev{animation-direction:reverse; animation-duration:70s}
.wrows{display:grid; gap:22px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wrows:hover .wrow{animation-play-state:paused}
.wrow img{width:auto; flex:none}
.winvite{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:30px; align-items:center; border:1px solid rgba(233,213,166,.45); border-radius:12px; padding:clamp(26px,4vw,48px); overflow:hidden; background:radial-gradient(70% 90% at 100% 0%, rgba(233,213,166,.12), transparent 60%), var(--night)}
.winvite h3{font-size:clamp(2rem,3.6vw,3rem); line-height:1.08}
.winvite h3 em{font-style:italic; color:var(--gold-2)}
.winvite p{color:var(--mist)}
.winvite ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.winvite li{display:flex; gap:12px; align-items:flex-start}
.winvite li svg{width:18px; height:18px; color:var(--ai); margin-top:3px}
@media (max-width:980px){ .wfeat{grid-template-columns:1fr} .wfeat .ph{min-height:280px} .wfeat .ph::after{background:linear-gradient(0deg, var(--deep), transparent 60%)} .wgroups{grid-template-columns:1fr} .winvite{grid-template-columns:1fr} }
@media (max-width:640px){ .wcases{grid-template-columns:1fr} }

/* v16: calmer layout + phone */
.phero{padding:calc(150px + env(safe-area-inset-top,0px)) 0 30px}
.phero .head{margin-bottom:0}
.phero h1{font-size:clamp(2.6rem,6vw,4.8rem); line-height:1}
.phero h1 em{font-style:italic; color:var(--gold-2)}
.phero .back{display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); text-decoration:none}
.phero .back svg{width:15px; height:15px}
.trusted{display:grid; gap:18px; padding-block:clamp(40px,6vw,70px) 10px}
.trusted .label{text-align:center}
.trusted{overflow:hidden; margin-inline:-16px; max-width:none; padding-inline:16px}
.svc-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc-chips li{font-size:.82rem; padding:7px 12px; border-radius:999px; border:1px solid var(--hair); color:var(--mist)}
.pbuilt{font-size:.92rem; color:var(--mist); line-height:1.55}
.pbuilt b{font-family:var(--f-mono); font-weight:400; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ai); display:block; margin-bottom:4px}
.nexts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:34px}
.nx{position:relative; min-height:380px; border-radius:12px; overflow:hidden; border:1px solid var(--hair); display:grid; align-content:end; padding:24px; isolation:isolate}
.nx img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.nx::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(7,9,13,.1), rgba(7,9,13,.92) 70%)}
.nx small{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--gold)}
.nx h3{font-size:2.2rem; margin:6px 0 8px}
.nx p{color:rgba(243,238,230,.82); font-size:.95rem}
.nx .chips2{margin-top:14px}
.center-cta{display:flex; justify-content:center}
.pagecards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pagecards a{display:grid; gap:10px; padding:24px; border:1px solid var(--hair); border-radius:12px; background:var(--night); text-decoration:none; transition:border-color .3s}
.pagecards a:hover{border-color:var(--gold)}
.pagecards svg{width:22px; height:22px; color:var(--gold-2)}
.pagecards b{font-family:var(--f-serif); font-weight:400; font-size:1.6rem}
.pagecards span{color:var(--mist); font-size:.9rem}
.ops-more{display:none; margin:18px auto 0}
.mcta{display:none}
.rhud{display:none!important}
@media (max-width:900px){ .nexts, .pagecards{grid-template-columns:1fr} .nx{min-height:300px} }
@media (max-width:700px){
  #route, .rpill{display:none!important}
  .sec{padding-block:72px}
  .head{margin-bottom:36px}
  h2{font-size:clamp(2.1rem,9vw,2.8rem)}
  .lede{font-size:1rem}
  /* nothing smaller than 12px, nothing too small to tap */
  .label, .for, .pst, .otag, .vt, .ex, .badge, .chips2 span, small, .counter span, .wcases small, .bch small, .pbuilt b, .pwhy b, .pints > span, .vlegend, .vrow small, .stamp, .gate .cue, .scramble, .btn, .aud > span, .ops-mode button, .tag2, .form label, .studio h4, .vbtn, .plink2, .back, .note, .tag, .er, .chip, .seg button, .lyr, .read span, .top, .top b, .scenes time, .was b, .meta span, .seq span, .core, .menu-btn, .vsplit .amt, .vlist .tags, .wlogos small, .gate .label{font-size:12px!important; letter-spacing:.12em}
  .btn{min-height:48px; padding:14px 22px}
  .menu-btn, .plink2, .back, .seg button, .lyr, .seg .t, footer nav a{min-height:44px; display:inline-flex; align-items:center}
  footer nav{row-gap:0}
  .wordmark{min-height:44px; align-content:center}
  .aud button, .ptabs button, .ops-mode button, .fut-tabs button, .pill, .ptypes button, .areas button, .sym, .cats button, select, input, textarea{min-height:44px}
  .aud{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding:2px 16px}
  .aud::-webkit-scrollbar{display:none}
  .aud > span{flex:none}
  .aud button{flex:none; font-size:.86rem; padding:10px 14px}
  .ops-bar{flex-direction:column; align-items:stretch}
  .ops-mode{align-self:flex-start}
  .opsgrid:not(.all) .opc:nth-child(n+7){display:none}
  .ops-more{display:inline-flex}
  .mcta{display:flex; position:fixed; z-index:45; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); justify-content:center; transition:transform .4s var(--ease), opacity .4s}
  .mcta.hide{transform:translateY(140%); opacity:0}
  .mcta .btn{width:100%; justify-content:center; box-shadow:0 10px 40px rgba(0,0,0,.5)}
  footer{padding-bottom:90px}
  .ops-bar{display:grid; grid-template-columns:minmax(0,1fr); justify-items:start}
  .ops-bar .aud{margin-inline:0; padding-inline:0; width:100%; max-width:100%}
  .pstats span, .flows em, .sysgrid label, .areas .ct, .cnt, .cnt b{font-size:12px!important}
  .phow{display:none}
  .sgraph{display:none} .flows{display:grid}
  .suite{margin-top:56px}
  .wg:nth-child(2) .wlogos, .logowall, .sgrid-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-tile{grid-template-columns:minmax(0,1fr)} .st-tile img{max-width:100%!important; object-fit:contain} .st-tile .nm, .st-tile .wmk{overflow-wrap:anywhere}
  .logowall .lg{height:72px; min-width:0; flex-wrap:wrap; align-content:center; row-gap:2px; padding:8px} .logowall .lg img{min-width:0}
  .wfeat .ph{min-height:220px}
  .wfeat blockquote{font-size:1.6rem}
  .vig{min-height:0}
  .hero{padding-top:120px}
}

/* v17: every client + software by area */
.olg{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding-top:12px; margin-top:auto; border-top:1px solid var(--hair)}
.olg img{height:17px; width:auto; max-width:74px; object-fit:contain; filter:brightness(0) invert(1); opacity:.55; transition:opacity .3s}
.opc:hover .olg img{opacity:.9}
.opc{grid-template-rows:auto auto auto 1fr}
.works{margin-top:56px; border:1px solid var(--hair); border-radius:12px; background:var(--night); padding:clamp(20px,3vw,32px); display:grid; grid-template-columns:minmax(0,1fr); gap:20px}
.works header{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:end; justify-content:space-between}
.works h3{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:8px}
.wk-key{display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--mist)}
.okd{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px var(--gold)}
.wk-chips, .cw-tabs{display:flex; flex-wrap:wrap; gap:8px}
.wk-chips button, .cw-tabs button{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); background:var(--glass); border-radius:999px; padding:9px 14px; font-size:.85rem; color:var(--mist); cursor:pointer; transition:all .3s}
.wk-chips button span, .cw-tabs button span{font-family:var(--f-mono); font-size:.7rem; opacity:.7}
.cw-tabs button svg{width:15px; height:15px}
.wk-chips button:hover, .cw-tabs button:hover{color:var(--ivory); border-color:var(--gold)}
.wk-chips button[aria-pressed="true"], .cw-tabs button[aria-pressed="true"]{background:var(--gold-2); border-color:var(--gold-2); color:var(--obsidian)}
.wk-pane{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0; background:var(--deep); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.wk{position:relative; min-width:0; box-shadow:inset -1px -1px 0 var(--hair); background:var(--deep); min-height:92px; display:grid; justify-items:center; align-content:center; gap:8px; padding:12px 8px; text-align:center}
.wk img{height:26px; width:auto; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.82}
.wk small{font-size:.72rem; color:var(--mist); line-height:1.25}
.wk .okd{position:absolute; top:9px; right:9px}
.works > .btn{justify-self:start}
.cwall-wrap{margin-top:22px; border:1px solid var(--hair); border-radius:12px; background:var(--night); padding:clamp(20px,3vw,32px); display:grid; gap:18px}
.cwall-wrap h3{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:8px}
.cwall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0; background:var(--deep); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.cw{min-width:0; box-shadow:inset -1px -1px 0 var(--hair); background:var(--deep); min-height:104px; display:grid; justify-items:center; align-content:center; gap:8px; padding:14px 10px; text-align:center}
.cw img{max-width:100%; width:auto; object-fit:contain}
.cw small{font-size:.72rem; color:var(--mist); line-height:1.25}
.cw.out{display:none}
.cw-more{display:none; justify-self:center}
.wseeall{justify-self:start; display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); background:none; border:0; padding:0; cursor:pointer}
.wseeall svg{width:14px; height:14px}
@media (max-width:700px){
  .wk-chips, .cw-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-20px; padding-inline:20px}
  .wk-chips::-webkit-scrollbar, .cw-tabs::-webkit-scrollbar{display:none}
  .wk-chips button, .cw-tabs button{flex:none; min-height:44px}
  .wk-pane{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cwall[data-g="all"]:not(.open) .cw:nth-child(n+13){display:none}
  .cw-more{display:inline-flex!important}
  .wk{min-height:84px}
  .cwall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cw{min-height:92px; padding:10px 6px}
  .cw img{height:26px!important; max-width:88px}
  .wk small, .cw small, .wk-chips button span, .cw-tabs button span{font-size:12px!important}
  .olg img{height:16px}
  .wseeall{min-height:44px; font-size:12px}
}

/* v18: start-here chooser, service pages, finder, FAQ, need-aware contact */
.needs{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.nd{position:relative; display:grid; gap:14px; align-content:start; padding:26px 22px; border:1px solid var(--hair); border-radius:12px; background:linear-gradient(160deg, var(--deep), var(--night)); text-decoration:none; transition:border-color .35s, transform .5s var(--ease)}
.nd:hover{border-color:var(--gold); transform:translateY(-4px)}
.nd .ic{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-2)}
.nd h3{font-size:1.75rem; line-height:1.08}
.nd p{color:var(--mist); font-size:.92rem}
.nd .ex{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding-top:14px; border-top:1px solid var(--hair); font-size:.8rem; color:var(--mist)}
.nd .ex img{height:18px; width:auto; filter:brightness(0) invert(1); opacity:.7}
.nd .go{display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-top:auto}
.nd .go svg{width:14px; height:14px}
.need-foot{margin-top:26px; text-align:center; color:var(--mist)}
.need-foot a{color:var(--gold-2)}
/* finder */
.finder{display:grid; gap:14px; padding:22px; border:1px solid rgba(111,227,225,.35); border-radius:12px; background:radial-gradient(80% 120% at 0% 0%, rgba(111,227,225,.08), transparent 60%), var(--deep)}
.finder .fq{display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; gap:10px; align-items:center}
.finder .fq span{color:var(--mist); font-size:.95rem}
.finder input{font:inherit; color:var(--ivory); background:var(--night); border:1px solid var(--hair); border-radius:999px; padding:12px 18px; min-width:0}
.finder input:focus{outline:none; border-color:var(--ai)}
.finder .btn{padding:13px 22px}
.fres{display:none; gap:12px; padding:18px; border-radius:10px; border:1px solid var(--hair); background:var(--night)}
.fres.on{display:grid}
.fres .pair{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-weight:500}
.fres .pair img{height:24px; width:auto; filter:brightness(0) invert(1)}
.fres .pair svg{width:18px; height:18px; color:var(--ai)}
.fres h4{margin:0; font-family:var(--f-serif); font-weight:400; font-size:1.5rem}
.fres p{color:var(--mist); font-size:.92rem}
.fres .ok{color:var(--gold-2); font-size:.85rem; display:flex; gap:8px; align-items:center}
.fres .btn{justify-self:start}
/* service pages */
.svc-sec{padding-block:clamp(56px,8vw,100px)}
.saying{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.saying p{font-family:var(--f-serif); font-style:italic; font-size:1.35rem; line-height:1.3; padding:20px 22px; border:1px solid var(--hair); border-radius:12px; background:var(--night)}
.saying p::before{content:"\201C"; color:var(--gold)}
.saying p::after{content:"\201D"; color:var(--gold)}
.flowlist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.flw{display:grid; gap:10px; padding:20px 22px; border:1px solid var(--hair); border-radius:12px; background:var(--night)}
.flw .pair{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-weight:500}
.flw .pair img{height:22px; width:auto; filter:brightness(0) invert(1); opacity:.85}
.flw .pair svg{width:16px; height:16px; color:var(--ai)}
.flw p{color:var(--mist); font-size:.92rem}
.steps5{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:s}
.steps5 li{counter-increment:s; display:grid; gap:8px; align-content:start; padding:20px; border:1px solid var(--hair); border-radius:12px; background:var(--night)}
.steps5 li::before{content:counter(s,decimal-leading-zero); font-family:var(--f-mono); font-size:.7rem; color:var(--ai)}
.steps5 b{font-family:var(--f-serif); font-weight:400; font-size:1.35rem; line-height:1.15}
.steps5 p{color:var(--mist); font-size:.88rem}
.getneed{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.getneed > div{padding:24px; border:1px solid var(--hair); border-radius:12px; background:var(--night); display:grid; gap:14px; align-content:start}
.getneed ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.getneed li{display:flex; gap:10px; align-items:flex-start; color:var(--ivory); font-size:.95rem}
.getneed li svg{width:17px; height:17px; color:var(--gold); margin-top:3px}
.proofrow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.proofrow > div{padding:22px; border:1px solid var(--hair); border-radius:12px; background:var(--night); display:grid; gap:8px; align-content:start}
.proofrow b.n{font-family:var(--f-serif); font-weight:300; font-size:3rem; line-height:1; color:var(--gold-2)}
.proofrow strong{font-weight:500}
.proofrow p{color:var(--mist); font-size:.88rem}
.proofrow .lgs{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.proofrow .lgs img{height:20px; width:auto; filter:brightness(0) invert(1); opacity:.8}
.cando{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cando > div{padding:22px; border:1px solid var(--hair); border-radius:12px; background:var(--night); display:grid; gap:10px; align-content:start}
.cando svg{width:22px; height:22px; color:var(--gold-2)}
.cando b{font-family:var(--f-serif); font-weight:400; font-size:1.4rem}
.cando p{color:var(--mist); font-size:.9rem}
/* faq */
.faq{display:grid; gap:10px; max-width:900px; margin:0 auto}
.faq details{border:1px solid var(--hair); border-radius:12px; background:var(--night); padding:0 22px}
.faq summary{cursor:pointer; list-style:none; display:flex; gap:14px; justify-content:space-between; align-items:center; padding:20px 0; font-weight:500; font-size:1.02rem; min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); color:var(--gold); font-size:1.2rem; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist); padding:0 0 20px; font-size:.95rem}
.tbc{display:inline-flex; margin-left:8px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px dashed var(--gold); color:var(--gold-2); vertical-align:middle}
/* free systems map + need-aware form */
.mapget{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:10px}
.mapget li{display:flex; gap:12px; align-items:flex-start; color:rgba(243,238,230,.9)}
.mapget li svg{width:18px; height:18px; color:var(--ai); margin-top:3px}
.quick{display:flex; flex-wrap:wrap; gap:10px}
.quick .btn{padding:12px 18px}
.nf{display:none; gap:14px}
.nf.on{display:grid}
.reply{font-size:.85rem; color:rgba(243,238,230,.75)}
.planmail{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px}
.planmail input{font:inherit; color:var(--ivory); background:var(--night); border:1px solid var(--hair); border-radius:999px; padding:12px 18px; min-width:240px; flex:1}
@media (max-width:1020px){ .needs{grid-template-columns:repeat(2,1fr)} .steps5{grid-template-columns:repeat(2,1fr)} .cando, .proofrow{grid-template-columns:1fr 1fr} }
@media (max-width:700px){
  .needs, .flowlist, .getneed, .cando, .proofrow, .steps5{grid-template-columns:1fr}
  .finder .fq{grid-template-columns:1fr}
  .finder .fq span{display:none}
  .finder input, .planmail input{min-height:48px}
  .saying p{font-size:1.15rem}
  .tbc, .nd .go{font-size:12px!important}
  .nd .ex{font-size:12px}
}

/* phone polish: logo+name pairs stay together, tidy logo grids, swipe hint on sideways rows, readable reply line */
.pair .lgn{display:inline-flex; align-items:center; gap:10px; white-space:nowrap}
.final .reply{text-shadow:0 1px 3px rgba(7,9,13,.85), 0 0 14px rgba(7,9,13,.75)}
@media (max-width:700px){
  .proofrow .lgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:18px 12px; justify-items:center; align-items:center}
  .proofrow .lgs img{height:26px!important; max-width:100%; object-fit:contain}
  .aud, .wk-chips, .cw-tabs, .stage-box, .cats, #dayWrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .aud.at-end, .wk-chips.at-end, .cw-tabs.at-end, .stage-box.at-end, .cats.at-end, #dayWrap.at-end{-webkit-mask-image:none; mask-image:none}
}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}