/* clicrite homepage.
   Day ("power on.") is the default; html.night is after hours: the outside goes dark, the offices stay lit. */
:root{--day-sky-1:#9ec5d9;--day-sky-2:#c4dde6;--night-sky-1:#121838;--night-sky-2:#25335c;--tn:1.2s}
html.night{--tn:1.2s}
:root{--corr:linear-gradient(180deg,#eef3f7 0%,#e7eef3 70%,#eef3f7 100%);--corr-floor:linear-gradient(180deg,#d9e3ea,#e3eaf0 30%,#edf2f5)}
html.night{--corr:linear-gradient(180deg,#1b1e42 0%,#20244c 70%,#1a1d3f 100%);--corr-floor:linear-gradient(180deg,#2a2f60,#1c1f44 30%,#0d0a4a)}
.home{background:var(--bg)}

/* ---------- header over the daytime sky ---------- */
html:not(.night) .home .hdr:not(.solid) .logo,html:not(.night) .home .hdr:not(.solid) .nav-btn{color:var(--navy)}
html:not(.night) .home .hdr:not(.solid) .nav-btn:hover,html:not(.night) .home .hdr:not(.solid) .nav-btn[aria-expanded=true]{background:rgba(9,0,87,.08);color:var(--navy)}
html:not(.night) .home .hdr:not(.solid) .phone-pill{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(9,0,87,.12);color:var(--navy)}
html:not(.night) .home .hdr:not(.solid) .menu-btn{background:rgba(255,255,255,.6)}
html:not(.night) .home .hdr:not(.solid) .menu-btn span,html:not(.night) .home .hdr:not(.solid) .menu-btn span::before,html:not(.night) .home .hdr:not(.solid) .menu-btn span::after{background:var(--navy)}
.home .hdr .logo,.home .hdr .nav-btn{transition:color .5s,background .25s}

/* ---------- outside ---------- */
.s-hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;color:var(--navy);background:linear-gradient(180deg,var(--day-sky-1) 0%,var(--day-sky-2) 70%,#d9e8ee 100%);transition:color var(--tn)}
.sky{position:absolute;inset:0;pointer-events:none}
.sky::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night-sky-1) 0%,#1a2349 55%,var(--night-sky-2) 100%);opacity:0;transition:opacity var(--tn) ease}
.stars{position:absolute;inset:0 0 30% 0;opacity:0;transition:opacity 1.6s ease .2s;background-image:radial-gradient(1.6px 1.6px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 17% 9%,#fffc,transparent),radial-gradient(1.2px 1.2px at 26% 31%,#fffa,transparent),radial-gradient(1.6px 1.6px at 37% 14%,#fff,transparent),radial-gradient(1px 1px at 46% 26%,#fff9,transparent),radial-gradient(1.4px 1.4px at 58% 7%,#fffd,transparent),radial-gradient(1px 1px at 66% 19%,#fff9,transparent),radial-gradient(1.6px 1.6px at 77% 11%,#fff,transparent),radial-gradient(1px 1px at 86% 25%,#fffa,transparent),radial-gradient(1.3px 1.3px at 94% 6%,#fffd,transparent),radial-gradient(1px 1px at 4% 40%,#fff8,transparent),radial-gradient(1px 1px at 52% 40%,#fff7,transparent),radial-gradient(1px 1px at 71% 36%,#fff8,transparent)}
.stars::after{content:"";position:absolute;inset:0;background:inherit;background-position:3% 5%;opacity:.6;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.15}}
.moon{position:absolute;right:9vw;top:15vh;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 36% 38%,#fffbea 0%,#f7ecc8 55%,#e6d7a7 100%);box-shadow:0 0 50px 12px rgba(255,240,200,.18);opacity:0;transform:translateY(30px);transition:opacity 1.4s ease .3s,transform 1.6s var(--ease) .3s}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 64% 60%,rgba(200,184,140,.35) 0 9%,transparent 10%),radial-gradient(circle at 40% 70%,rgba(200,184,140,.3) 0 6%,transparent 7%)}
.cloud{position:absolute;height:34px;border-radius:40px;background:#fff;opacity:.85;filter:blur(.3px);transition:opacity var(--tn)}
.cloud::before,.cloud::after{content:"";position:absolute;bottom:40%;border-radius:50%;background:#fff}
.cloud::before{left:18%;width:46%;aspect-ratio:1}.cloud::after{left:48%;width:34%;aspect-ratio:1}
.c1{left:6%;top:16%;width:150px;animation:drift 80s linear infinite}.c2{left:52%;top:9%;width:110px;opacity:.7;animation:drift 110s linear infinite -40s}.c3{left:30%;top:28%;width:90px;opacity:.6;animation:drift 95s linear infinite -20s}
@keyframes drift{from{transform:translateX(-10vw)}to{transform:translateX(30vw)}}
html.night .sky::before,html.night .stars{opacity:1}
html.night .moon{opacity:1;transform:none}
html.night .cloud{opacity:0}
html.night .s-hero{color:#fff}

.hero-scene{position:absolute;right:-11vw;bottom:0;width:min(82vw,calc((100svh - 30px) * 1.79));aspect-ratio:2752/1536;transform-origin:50% 76%;will-change:transform}
.ground{position:absolute;left:0;right:0;bottom:0;height:calc(min(82vw,(100svh - 30px) * 1.79) / 1.79 * .1);background:linear-gradient(180deg,#958289,#93808a)}
.ground::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#25335f,#1d2a54);opacity:0;transition:opacity var(--tn)}
html.night .ground::after{opacity:1}
.hero-art{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%);mask-composite:intersect}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-art .night-img{opacity:0;transition:opacity var(--tn) ease}
html.night .hero-art .night-img{opacity:1}
.windows{position:absolute;inset:0;pointer-events:none}
.win{position:absolute;overflow:hidden;border-radius:2px}
.win .glow{position:absolute;inset:0;opacity:0;transition:opacity var(--tn)}
.win .glow::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 70%,rgba(111,240,247,.22),transparent 70%);animation:screen 4.6s ease-in-out infinite alternate}
html.night .win .glow{opacity:1}
@keyframes screen{40%{opacity:1}100%{opacity:.72}}
.wk{position:absolute;bottom:-14%;width:17%;aspect-ratio:40/46;opacity:.38;transition:opacity var(--tn)}
.wk svg,.wk-walk svg{display:block;width:100%;height:100%;fill:#0d1030}
.wk svg .cap,.wk-walk svg .cap{fill:#05061a}
html.night .wk,html.night .wk-walk{opacity:.92}
.wk-a svg{animation:type 1.1s ease-in-out infinite alternate;transform-origin:50% 100%}
.wk-b svg{animation:look 7s ease-in-out infinite;transform-origin:50% 100%}
.wk-c svg{animation:lean 9s ease-in-out infinite;transform-origin:50% 100%}
@keyframes type{to{transform:translateY(2.5%) scaleY(.985)}}
@keyframes look{0%,62%,100%{transform:none}70%,88%{transform:rotate(-5deg) translateX(-3%)}}
@keyframes lean{0%,40%,100%{transform:none}52%,80%{transform:translateX(6%) rotate(3deg)}}
.wk-walk{position:absolute;bottom:-6%;width:8.5%;aspect-ratio:40/92;opacity:.38;left:-12%;animation:cross 18s linear infinite;transition:opacity var(--tn)}
.wk-walk svg{animation:bob .5s ease-in-out infinite alternate}
.wk-walk .leg{transform-box:fill-box;transform-origin:50% 0;animation:stride .5s ease-in-out infinite alternate}
.wk-walk .leg.r{animation-direction:alternate-reverse}
@keyframes cross{0%{left:-12%}45%{left:104%}100%{left:104%}}
@keyframes bob{to{transform:translateY(-2%)}}
@keyframes stride{from{transform:rotate(12deg)}to{transform:rotate(-12deg)}}
.after{position:absolute;left:21%;top:24%;display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(7,5,44,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(111,240,247,.3);color:#e6fbfc;font:600 13px/1 var(--display);letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform .8s var(--ease);pointer-events:none;white-space:nowrap}
.after i{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.35}}
html.night .after{opacity:1;transform:none;transition-delay:.9s}

.s-hero .hero-boy{--bw:calc(min(82vw,(100svh - 30px) * 1.79) * .1);right:calc(min(82vw,(100svh - 30px) * 1.79) * .75 - 11vw);bottom:calc(min(82vw,(100svh - 30px) * 1.79) / 1.79 * .03);z-index:6}
.hero-copy{position:absolute;z-index:5;left:max(24px,calc((100vw - 1360px)/2 + 20px));top:var(--hdr);bottom:4vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:min(540px,36vw)}
.power{display:inline-flex;align-items:center;gap:12px;font:650 16px/1 var(--display);letter-spacing:-.01em;margin-bottom:28px;color:inherit}
.power-dot{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:#2fb4bd;box-shadow:0 0 0 5px rgba(2,211,224,.2);transition:background var(--tn),box-shadow var(--tn)}
.power-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(2,211,224,.6);animation:pdot 2.4s ease-out infinite}
@keyframes pdot{from{transform:scale(.6);opacity:1}to{transform:scale(2);opacity:0}}
html.night .power-dot{background:var(--glow);box-shadow:0 0 0 5px rgba(111,240,247,.14),0 0 14px var(--glow)}
.pw-t{position:relative;display:inline-grid}
.pw-t>span{grid-area:1/1;transition:opacity .45s,transform .45s var(--ease)}
.off-t{opacity:0;transform:translateY(8px)}
html.night .on-t{opacity:0;transform:translateY(-8px)}
html.night .off-t{opacity:1;transform:none}
.hero-copy.gone{pointer-events:none}.hero-copy.gone>:not(h1){visibility:hidden}
.hero-copy h1{font-size:clamp(46px,5.8vw,92px);font-weight:750;letter-spacing:-.045em;line-height:.95}
.rot{position:relative;display:inline-block;color:#00a3b2;min-width:1ch;transition:color var(--tn)}   /* owner r29 (5:18 PM, option 1): a deeper cyan #00A3B2 in light mode for contrast; night keeps #02D3E0. Was r25: the brand light blue exactly (#02D3E0), light and dark, desktop and phone (was the darker #1f9aa3 in light mode) */
html.night .rot{color:var(--teal)}
.rot span{display:inline-block}
/* Instinct round 1: every word sits in the same grid cell, so the box is always as wide as the longest word (compliant.) and the headline never re-wraps or jumps */
.rot{display:inline-grid;white-space:nowrap}
.rot>span{grid-area:1/1;justify-self:start}
.rot>.rot-g{visibility:hidden}
.hero-copy .lead{margin-top:24px;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:rgba(9,0,87,.78);max-width:30em;transition:color var(--tn)}
html.night .hero-copy .lead{color:var(--soft)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.s-hero .btn-ghost{--b-bg:rgba(255,255,255,.55);--b-fg:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(9,0,87,.18);transition:background .5s,color .5s,box-shadow .5s,transform .35s var(--ease)}
html.night .s-hero .btn-ghost{--b-bg:rgba(255,255,255,.06);--b-fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.scroll-cue{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%)}
.scroll-cue i{display:block;width:24px;height:38px;border-radius:14px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.45;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--teal);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

/* ---------- front desk ---------- */
.s-desk{position:relative;display:grid;grid-template-columns:1.7fr 1fr;align-items:center;gap:56px;padding:120px max(24px,calc((100vw - 1360px)/2 + 20px));background:var(--bg);overflow:hidden}
.desk-art{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--art-sh);isolation:isolate}
.desk-art img{width:100%;height:auto}
.ring{position:absolute;width:0;height:0}
.ring i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px rgba(111,240,247,.8);animation:ring 2.4s ease-out infinite}
.ring i+i{animation-delay:1.2s}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(2.2);opacity:0}}
.desk-copy p{margin-top:22px;color:var(--soft);font-size:clamp(17px,1.3vw,19px);max-width:26em}
.desk-num{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font:750 clamp(30px,2.8vw,44px)/1 var(--display);letter-spacing:-.03em;text-decoration:none;color:var(--fg);font-variant-numeric:tabular-nums}
.desk-num svg{width:26px;height:26px;color:var(--accent)}
.desk-num:hover{color:var(--accent)}
.sec-h{font-size:clamp(40px,4.6vw,72px);font-weight:750;letter-spacing:-.045em;line-height:.98;margin-top:16px}
.sec-top p{margin-top:20px;color:var(--soft);font-size:clamp(17px,1.3vw,19px);max-width:34em}

/* ---------- services: inside the building ---------- */
.s-services{position:relative;background:var(--bg-2)}
.s-services .sec-top{padding:110px 0 40px}
.corr{position:relative;height:100vh;height:100svh;overflow:hidden;--floor-y:78%;background:var(--corr)}
.corr::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,rgba(255,236,190,.12),transparent 70%);transition:opacity var(--tn)}
html.night .corr::before{opacity:.25}
.corr-ceil{position:absolute;left:0;right:0;top:0;height:10px;display:flex;justify-content:space-around;pointer-events:none}
.corr-ceil i{width:120px;height:4px;border-radius:0 0 4px 4px;background:#fff6dd;box-shadow:0 0 30px 8px rgba(255,236,190,.35);transition:opacity var(--tn),box-shadow var(--tn)}
html.night .corr-ceil i{opacity:.25;box-shadow:none}
.corr-track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:flex-start;will-change:transform}
.room{flex:none;width:100vw;padding:calc(var(--hdr) + 3vh) max(24px,calc((100vw - 1360px)/2 + 20px)) 0 7vw;display:grid;grid-template-columns:auto minmax(260px,1fr);gap:3.6vw;align-items:center}
.room-art{display:block;position:relative;width:min(60vw,calc((100svh - var(--hdr) - 3vh - 20vh) * 1.5));aspect-ratio:3/2;border-radius:22px;overflow:hidden;box-shadow:var(--art-sh);transition:box-shadow .5s var(--ease);isolation:isolate}
.room-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.room-art:hover img{transform:scale(1.025)}
.room-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(111,240,247,0);transition:box-shadow .5s}
.room.on .room-art::after{box-shadow:inset 0 0 0 1.5px rgba(111,240,247,.35)}
.room-copy{max-width:440px}
.room-no{display:flex;align-items:center;gap:12px;font:650 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.room-no b{font-weight:700;color:var(--dim);letter-spacing:0}
.room-copy h3{font-size:clamp(28px,2.6vw,42px);letter-spacing:-.035em;line-height:1.02;margin:16px 0 14px}
.room-copy p{color:var(--soft);font-size:16.5px;line-height:1.55}
.room-copy ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:9px}
.room-copy li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--fg)}
.room-copy li svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}
.corr-floor{position:absolute;left:0;right:0;top:var(--floor-y);bottom:0;background:var(--corr-floor);box-shadow:inset 0 1px 0 rgba(2,211,224,.35)}
.tiles{position:absolute;top:0;bottom:0;left:0;right:-120px;will-change:transform;background-image:linear-gradient(90deg,rgba(var(--fg-rgb),.06) 1px,transparent 1px);background-size:120px 100%;-webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%)}
.corr .walker{--bw:clamp(84px,7.4vw,128px);left:1.2vw;top:calc(var(--floor-y) - var(--bw) / .52 + 6px);z-index:8}
.corr-hud{position:absolute;right:max(24px,calc((100vw - 1360px)/2 + 20px));bottom:max(18px,3vh);display:flex;align-items:center;gap:20px;z-index:9}
.dots{display:flex;gap:7px}
.dots button{width:8px;height:8px;border-radius:50%;background:rgba(var(--fg-rgb),.22);transition:background .3s,transform .3s}
.dots button.on{background:var(--teal);transform:scale(1.35)}
.now{font:600 14px/1 var(--display);color:var(--soft);min-width:170px;text-align:right}
.now b{color:var(--accent);margin-right:8px}

/* ---------- industries: the street ---------- */
.s-street{position:relative;padding:120px 0 130px;color:var(--navy);background:linear-gradient(180deg,#cfe3ec 0%,#e6f0f4 46%,#eef3f5 100%);transition:color var(--tn);overflow:hidden}
.street-sky{position:absolute;inset:0;background:linear-gradient(180deg,#0f1430 0%,#18204a 50%,#141b3d 100%);opacity:0;transition:opacity var(--tn);pointer-events:none}
.street-sky .stars{inset:0 0 55% 0}
html.night .s-street{color:#fff;background:linear-gradient(180deg,#0f1430 0%,#18204a 50%,#141b3d 100%)}   /* Instinct round 2: the night street (its sky layer is gone since the doors) */
html.night .street-sky,html.night .street-sky .stars{opacity:1}
.s-street .wrap{position:relative}
.s-street .sec-top p{color:rgba(9,0,87,.72);transition:color var(--tn)}
html.night .s-street .sec-top p{color:var(--soft)}
.s-street .kicker{color:#00747c}
html.night .s-street .kicker{color:var(--teal)}
.street{margin-top:56px}
.shops{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,40px);align-items:end;padding:0 2%}
.shop{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:center;transition:transform .5s var(--ease)}
.shop .roof{height:14px;margin:0 -6px;border-radius:5px 5px 0 0;background:var(--sc);filter:brightness(.82)}
.shop .facade{position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:end;gap:10px;padding:14px 16px 0;min-height:var(--fh);background:var(--sc);transition:filter var(--tn)}
.shop .w{border-radius:4px;height:46px;background:linear-gradient(160deg,#d4eef3,#9fd0da);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);transition:background var(--tn),box-shadow var(--tn)}
.shop .door{grid-column:1/-1;justify-self:center;align-self:end;width:30%;height:56px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#9fd0da,#6eaeb9);transition:background var(--tn)}
.shop .sign{grid-column:1/-1;display:block;padding:8px 4px;font-size:13px!important;margin:0 -2px 2px;border-radius:4px;background:rgba(255,255,255,.1);font:700 12px/1.1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s,background .4s}
.shop .ss{display:none}
.shop .awn{grid-column:1/-1;justify-self:center;align-self:end;width:56%;height:12px;margin-bottom:-10px;border-radius:3px 3px 8px 8px;background:repeating-linear-gradient(90deg,var(--teal) 0 12px,#e9fbfc 12px 24px);box-shadow:0 6px 10px -6px rgba(0,0,0,.4);z-index:1}
.shop:hover{transform:translateY(-4px)}
.shop[aria-selected=true] .sign{background:var(--teal);color:var(--ink)}
.shop .facade{box-shadow:0 30px 40px -30px rgba(20,24,60,.45)}
.shop-1{--sc:#2e3b6e;--fh:200px}.shop-2{--sc:#090057;--fh:250px}.shop-3{--sc:#3a4a76;--fh:186px}.shop-4{--sc:#24525b;--fh:222px}
html.night .shop .w{background:linear-gradient(160deg,#ffe3a3,#f4b860);box-shadow:0 0 16px rgba(255,207,122,.45)}
html.night .shop .w:nth-child(3n){background:linear-gradient(160deg,#a9f6fa,#02d3e0);box-shadow:0 0 16px rgba(111,240,247,.4)}
html.night .shop .door{background:linear-gradient(180deg,#ffd98f,#e6a24c)}
.walk-lane{position:relative;height:0;z-index:3}
.street-boy{--bw:clamp(64px,5.6vw,96px);left:0;bottom:-30px;z-index:4}
.curb{position:relative;height:56px;margin:0 -50vw;background:linear-gradient(180deg,#b9c7cf 0,#a9b8c1 14px,#c9d4da 15px,#d6dfe4 100%);transition:filter var(--tn)}
.curb i{position:absolute;bottom:56px;width:4px;height:120px;background:#5d6b86;border-radius:2px}
.curb i::before{content:"";position:absolute;left:-9px;top:-6px;width:22px;height:10px;border-radius:6px 6px 2px 2px;background:#46507a}
.curb i::after{content:"";position:absolute;left:-60px;top:4px;width:124px;height:150px;background:radial-gradient(50% 60% at 50% 0%,rgba(255,220,150,.42),transparent 70%);opacity:0;transition:opacity var(--tn)}
.curb i:nth-child(1){left:calc(50vw - 22px)}.curb i:nth-child(2){left:50%}.curb i:nth-child(3){right:calc(50vw - 22px)}
html.night .curb{filter:brightness(.38) saturate(.7)}
html.night .curb i::after{opacity:1}
.stages{position:relative;margin-top:56px;display:grid}
.stage{grid-area:1/1;display:grid;grid-template-columns:1.65fr 1fr;gap:52px;align-items:center}
.stage[hidden]{display:none}
.stage-art{display:block;border-radius:24px;overflow:hidden;aspect-ratio:9/5;box-shadow:0 40px 80px -40px rgba(20,24,60,.55)}
.stage-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.stage-art:hover img{transform:scale(1.02)}
.stage-copy h3{font-size:clamp(28px,2.6vw,42px);letter-spacing:-.035em;margin:14px 0 14px}
.stage-copy p{font-size:17px;color:rgba(9,0,87,.75);transition:color var(--tn)}
html.night .stage-copy p{color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.chips span{padding:8px 13px;border-radius:999px;font:600 13px/1.2 var(--display);background:rgba(9,0,87,.06);box-shadow:inset 0 0 0 1px rgba(9,0,87,.1);transition:background var(--tn),box-shadow var(--tn)}
html.night .chips span{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.s-street .link-arrow{color:#00747c}
html.night .s-street .link-arrow{color:var(--teal)}

/* ---------- how we work ---------- */
.s-rite{position:relative;padding:130px 0 120px;background:var(--bg);overflow:hidden}
.clock-band{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-top:1px solid var(--line)}
.clock-band div{padding:30px 10px 0;display:grid;gap:8px}
.clock-band b{font:750 clamp(36px,3.6vw,56px)/1 var(--display);letter-spacing:-.04em;color:var(--accent)}
.clock-band span{font:600 15px/1.2 var(--display);color:var(--soft)}
.rite-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.rite{position:relative;padding:30px 26px 30px;border-radius:24px;background:linear-gradient(180deg,rgba(var(--fg-rgb),.045),rgba(var(--fg-rgb),.015));box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .5s var(--ease),box-shadow .4s}
.rite:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(2,211,224,.45)}
.rite .L{font:800 128px/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--stroke);margin-bottom:22px;transition:color .4s}
.rite:hover .L{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.rite h3{font-size:24px;margin-bottom:8px}
.rite p{color:var(--soft);font-size:15.5px;line-height:1.5}
/* library */
.s-library{position:relative;padding:140px 0 150px;background:var(--bg-2)}
.lib{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:end}
.lib-copy p{color:var(--soft);font-size:18px;margin-bottom:28px}
.shelf{position:relative;padding:0 0 0 0}
.shelf .boy{--bw:clamp(92px,7.4vw,124px);right:-1%;bottom:-58px;z-index:3}
.books{position:relative;display:flex;align-items:flex-end;gap:10px;height:330px;padding:0 140px 0 14px}
.books::after{content:"";position:absolute;left:-18px;right:-18px;bottom:-20px;height:20px;border-radius:5px;background:linear-gradient(180deg,#3a3f75,#262951);box-shadow:inset 0 1px 0 rgba(111,240,247,.35),0 30px 40px -20px rgba(0,0,0,.8)}
.book{--h:88%;--c:#2b3a7a;position:relative;flex:1;max-width:64px;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 20%,rgba(255,255,255,.1) 50%,transparent 80%,rgba(0,0,0,.32)),var(--c);text-decoration:none;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:visible}
.book span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 15px/1 var(--display);letter-spacing:.02em;color:#fff;white-space:nowrap}
.book::before,.book::after{content:"";position:absolute;left:14%;right:14%;height:2px;background:rgba(255,255,255,.35)}
.book::before{top:16px}.book::after{bottom:16px}
.book:hover,.book:focus-visible{transform:translateY(-22px)}
.book .pop{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);width:230px;padding:12px 14px;border-radius:14px;background:#fff;color:var(--navy);font:650 14px/1.3 var(--display);font-style:normal;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:5;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.book:hover .pop,.book:focus-visible .pop{opacity:1;transform:translateX(-50%)}
/* call */
.s-call{position:relative;padding:150px 0 130px;overflow:hidden;background:radial-gradient(70% 60% at 50% 0%,rgba(2,211,224,.16),transparent 70%),var(--bg)}
.call-top{text-align:center;position:relative}
.call-top .boy{--bw:clamp(120px,11vw,180px);position:relative;display:block;margin:0 auto -6px;pointer-events:auto}
.bignum{display:block;max-width:100%;margin:20px auto 10px;font:800 clamp(56px,11.5vw,190px)/.9 var(--display);letter-spacing:-.05em;text-decoration:none;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.bignum:hover{color:var(--accent)}
.bignum .d{display:inline-block}
.call-sub{font:600 clamp(18px,1.6vw,24px)/1.3 var(--display);color:var(--soft)}
.call-sub b{color:var(--fg)}
.call-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;margin-top:100px;align-items:start}
.call-info{display:grid;gap:14px}
.ci{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;background:rgba(var(--fg-rgb),.035);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:background .25s,box-shadow .25s}
a.ci:hover{background:rgba(2,211,224,.08);box-shadow:inset 0 0 0 1px rgba(2,211,224,.35)}
.ci .ico{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;background:rgba(2,211,224,.14);color:var(--accent)}
.ci .ico svg{width:20px;height:20px}
.ci small{display:block;font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.ci b{font:600 17px/1.25 var(--display)}
.form{padding:34px;border-radius:26px;background:linear-gradient(180deg,rgba(var(--fg-rgb),.045),rgba(var(--fg-rgb),.02));box-shadow:inset 0 0 0 1px var(--line)}
.form h3{font-size:30px;margin-bottom:6px}
.form>p{color:var(--soft);margin-bottom:22px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font:600 13px/1 var(--display);color:var(--soft)}
.field input,.field textarea{width:100%;padding:14px 15px;border-radius:13px;border:0;background:var(--field-bg);box-shadow:inset 0 0 0 1px rgba(var(--fg-rgb),.16);color:var(--fg);font:400 16px/1.4 var(--body);transition:box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:2px;box-shadow:inset 0 0 0 1.5px var(--accent)}   /* C2: >= 3:1 in light (5.5:1) and dark (10:1) */
.form .btn{margin-top:18px}
.form-note{margin-top:14px;font-size:14.5px;color:var(--soft)}
.form-note:empty{display:none}
.form-note a,.form>p a{color:var(--accent);font-weight:650;text-underline-offset:3px}
.form-fine{margin-top:12px;font-size:13.5px;color:var(--dim)}
.field label i{font-style:normal;color:var(--accent)}
.field.err input,.field.err textarea{box-shadow:inset 0 0 0 1.5px var(--danger-ink)}
.form-note.show{padding:12px 14px;border-radius:12px;background:rgba(2,211,224,.1);box-shadow:inset 0 0 0 1px rgba(2,211,224,.3);color:var(--fg)}


.s-call .sec-h{margin:16px auto 0}
html.night .s-desk,html.night .s-rite{background:#070533}
html.night .s-services{background:#0d0a4a}
html.night .s-library{background:linear-gradient(180deg,#0b0840,#0a0838)}
html.night{--corr:linear-gradient(180deg,#14163a 0%,#181b42 70%,#131536 100%)}

/* ---------- phones & tablets ---------- */
@media (max-width:899px){
  .s-hero{min-height:620px}
  .hero-copy{left:20px;right:20px;width:auto;top:calc(var(--hdr) + 18px);bottom:auto;display:block}
  .power{margin-bottom:18px;font-size:15px}
  .hero-copy h1{font-size:clamp(38px,10.6vw,58px)}
  .hero-copy .lead{margin-top:14px;font-size:16px;line-height:1.5}
  .hero-ctas{margin-top:20px;gap:10px}
  .hero-ctas .btn{height:48px;padding:0 18px;font-size:15px}
  .hero-scene{right:auto;left:50%;width:160vw;margin-left:-80vw;bottom:0}
  .ground{height:calc(180vw / 1.79 * .1)}
  .s-hero .hero-boy{--bw:calc(160vw * .085);right:auto;left:calc(50vw - 160vw * .25);bottom:calc(160vw / 1.79 * .025)}
  .after{left:28%;top:20%;font-size:12px}
  .moon{right:10vw;top:auto;bottom:calc(180vw / 1.79 + 40px);width:48px;height:48px}
  .c1,.c3{display:none}.c2{left:58%;top:52%}
  .s-desk{grid-template-columns:1fr;gap:30px;padding:80px 20px}
  .desk-art{border-radius:18px}
  .s-services .sec-top{padding:80px 0 26px}
  .corr{--floor-y:60%}
  .corr-track{padding-left:0}
  .room{width:100vw;grid-template-columns:1fr;gap:0;padding:calc(var(--hdr) + 12px) 20px 0;align-content:start}
  .room-art{width:100%;border-radius:16px}
  .room-copy{padding-top:calc(var(--bw-m,88px) * 1.08)}
  .room-copy h3{font-size:clamp(23px,6.6vw,30px);margin:10px 0 8px}
  .room-copy p{font-size:15px;line-height:1.5}
  .room-copy ul{margin:12px 0 14px;gap:6px}
  .room-copy li{font-size:14px}
  .room-copy li svg{width:17px;height:17px}
  .corr-floor{height:26px;bottom:auto}
  .tiles{background-size:70px 100%}
  .corr .walker{--bw:46px;left:22px}
  .corr-hud{left:20px;right:20px;bottom:12px;justify-content:space-between}
  .now{min-width:0;font-size:13px}
  .s-street{padding:80px 0 90px}
  .street{margin-top:34px}
  .shops{gap:10px;padding:0}
  .shop .roof{height:8px;margin:0 -3px}
  .shop .facade{gap:6px;padding:7px 7px 0;min-height:calc(var(--fh) * .58)}
  .shop .w{height:22px}
  .shop .door{height:28px;width:38%}
  .shop .sign{font-size:10px!important;letter-spacing:.06em;padding:5px 2px}
  .shop .sl{display:none}.shop .ss{display:inline}
  .street-boy{--bw:42px;bottom:-18px}
  .curb{height:36px}
  .curb i{bottom:36px;height:70px}
  .stages{margin-top:30px}
  .stage{grid-template-columns:1fr;gap:22px}
  .stage-art{border-radius:16px}
  .s-rite{padding:90px 0 80px}
  .rite-grid{grid-template-columns:1fr 1fr}
  .rite{padding:22px 18px}
  .rite .L{font-size:84px;margin-bottom:12px}
  .rite h3{font-size:20px}
  .clock-band{grid-template-columns:1fr 1fr;row-gap:26px;margin-top:40px}
  .s-library{padding:90px 0 110px}
  .lib{grid-template-columns:1fr;gap:50px}
  .books{height:240px;padding-right:90px;gap:6px}
  .book span{font-size:12px}
  .book .pop{display:none}
  .shelf .boy{--bw:84px;bottom:-40px}
  .s-call{padding:90px 0 90px}
  .call-grid{grid-template-columns:1fr;gap:30px;margin-top:56px}
  .fgrid{grid-template-columns:1fr}
  .form{padding:24px 18px}
}
@media (max-width:899px) and (max-height:700px){.hero-copy .lead{display:none}}
@media (min-width:900px) and (max-height:760px){.hero-copy h1{font-size:clamp(40px,5vw,72px)}.hero-copy .lead{margin-top:16px}.power{margin-bottom:18px}}

/* reduced motion: a calm normal page */
@media (prefers-reduced-motion:reduce){
  .stars::after,.power-dot::after,.cloud,.wk svg,.wk-walk,.wk-walk svg,.wk-walk .leg,.win .glow,.ring i,.after i,.scroll-cue i::after{animation:none!important}
  .wk-walk{left:40%}
  .corr{height:auto;overflow:visible}
  .corr-track{position:relative;flex-direction:column;padding:0 0 60px}
  .room{width:auto;margin:0 auto 60px;max-width:1240px;padding:0 24px}
  .corr-floor,.corr .walker,.corr-hud,.corr-ceil{display:none}
  .room-copy{padding-top:24px}
}

/* keep the corridor's room counter clear of the fixed power button (bottom right below 1280px) */
/* owner r2: the dark-mode button is in the header now, the hallway dots no longer make room for it */

/* ---------- the entrance (revision 3): walk up, the doors open, in he goes, the doors close, inside ----------
   The building, the doors and the boy share one layer (.hero-zoom) drawn at --hz times its size and scaled
   down, so the camera can move in on the door and stay sharp. All motion is transforms only. */
.hero-scene{will-change:auto;transform:none!important}
.hero-zoom{--hz:2;position:absolute;width:calc(var(--hz) * 100%);height:calc(var(--hz) * 100%);left:calc(50% * (1 - var(--hz)));top:calc(74.6% * (1 - var(--hz)));transform-origin:50% 74.6%;transform:scale(calc(1 / var(--hz)));will-change:transform;backface-visibility:hidden}
.hero-zoom .hero-art{z-index:1}
.door,.door-leaves{position:absolute;z-index:2;left:45.583%;top:64.9%;width:8.833%;height:19.343%;pointer-events:none}
.door-leaves{z-index:3} /* owner r2: the leaves sit above the boy once he is inside, so they close BEHIND him */
.door-in{position:absolute;inset:0;overflow:hidden;background:#fff6e6}
.door-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 46%;filter:saturate(.9) brightness(1.08)}
.door-glow{position:absolute;inset:-10%;background:radial-gradient(60% 55% at 50% 58%,rgba(255,247,228,.95),rgba(255,240,210,.35) 55%,rgba(255,236,200,0) 80%);opacity:.55}
html.night .door-in img{filter:saturate(.95) brightness(.95)}
html.night .door-glow{background:radial-gradient(60% 55% at 50% 58%,rgba(255,232,190,.9),rgba(255,214,150,.3) 55%,rgba(255,210,140,0) 80%);opacity:.7}
.leaf{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;will-change:transform}
.leaf-l{left:0;transform-origin:0 50%}
.leaf-r{right:0;transform-origin:100% 50%}
.leaf i{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.leaf-l .lf-d{background-image:url(../img/art/door-l-day.webp)}
.leaf-r .lf-d{background-image:url(../img/art/door-r-day.webp)}
.leaf-l .lf-n{background-image:url(../img/art/door-l-night.webp)}
.leaf-r .lf-n{background-image:url(../img/art/door-r-night.webp)}
.leaf .lf-n{opacity:0;transition:opacity var(--tn)}
html.night .leaf .lf-n{opacity:1}
.leaf .lf-s{background:linear-gradient(90deg,rgba(9,0,40,.55),rgba(9,0,40,.15));opacity:0}
.leaf-r .lf-s{background:linear-gradient(270deg,rgba(9,0,40,.55),rgba(9,0,40,.15))}
.door-spill{position:absolute;z-index:2;left:41.6%;top:84.6%;width:16.9%;height:6.4%;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,244,220,.85),rgba(255,240,210,0));opacity:0;pointer-events:none;mix-blend-mode:soft-light}
html.night .door-spill{mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,226,170,.75),rgba(255,214,150,0))}
.hero-zoom .hero-boy{--bw:10%;left:15%;right:auto;bottom:5%;z-index:5;transform-origin:50% 100%;will-change:transform}
.hero-zoom .hero-boy.inside{z-index:2}
.hero-zoom .hero-boy.inside .clic-shadow{opacity:0}
.clic-back{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:284/480;transform:translateX(-50%);background-repeat:no-repeat;background-size:5000% 100%;background-position:0 0;opacity:0;filter:drop-shadow(0 16px 16px rgba(0,0,0,.24))}
.hero-fade{position:absolute;inset:0;z-index:8;background:var(--bg);opacity:0;pointer-events:none}
@media (max-width:899px){
  .hero-zoom{--hz:2.4}
  .hero-scene{width:180vw!important;margin-left:-90vw!important}
  .hero-zoom .hero-boy{--bw:8.5%;left:27%;bottom:4%}
}
@media (prefers-reduced-motion:reduce){
  .hero-zoom .hero-boy{left:38%}
}
.hero-zoom::after{content:"";position:absolute;left:-50%;right:-50%;top:91%;height:130%;background-color:#958288;transition:background-color var(--tn);z-index:0}
html.night .hero-zoom::after{background-color:#1a2755}
.hero-zoom .hero-boy .clic-shadow{bottom:-1.2%}
@media (min-width:600px) and (max-width:899px){
  .hero-scene{width:128vw!important;margin-left:-64vw!important}
  .hero-zoom .hero-boy{left:21%}
  .ground{height:calc(128vw / 1.79 * .1)}
}
.hero-zoom .windows{z-index:1}
.win{contain:paint}
.hero-fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 46%;transform-origin:50% 52%;will-change:transform}
.hero-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(rgba(255,255,255,0),var(--bg))}
html.night .hero-fade img{filter:brightness(.62) saturate(.85) hue-rotate(-8deg)}
html.night .hero-fade::after{background:linear-gradient(rgba(9,0,87,0),var(--bg))}
.door-in img.ln,.hero-fade img.ln{opacity:0;transition:opacity var(--tn)}
html.night .door-in img.ln,html.night .hero-fade img.ln{opacity:1;filter:none}

/* ---- revision 6: industries are doors you step through ---- */
.s-doors .doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 26px;padding-top:10px;padding-bottom:40px}
.dcard{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--fg);-webkit-tap-highlight-color:transparent}
.dc-frame{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:10px 10px 4px 4px;background:#090057;padding:9px 9px 0;
  box-shadow:0 0 0 2px rgba(2,211,224,.55),0 22px 40px -18px rgba(9,0,87,.55);perspective:900px}
.dc-room{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:4px 4px 0 0;background:#0d0a3f}
.dc-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .6s var(--ease)}
.dc-leaf{position:absolute;top:9px;bottom:0;width:calc(50% - 9px);background:linear-gradient(110deg,rgba(225,246,250,.55),rgba(190,230,240,.30));
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(9,0,87,.12);transition:transform .7s var(--ease);backface-visibility:hidden}
.dc-leaf::after{content:"";position:absolute;top:46%;width:4px;height:44px;border-radius:2px;background:#02d3e0}
.dc-leaf.l{left:9px;transform-origin:0 50%;transform:rotateY(-38deg)}
.dc-leaf.l::after{right:8px}
.dc-leaf.r{right:9px;transform-origin:100% 50%;transform:rotateY(38deg)}
.dc-leaf.r::after{left:8px}
.dc-light{position:absolute;left:9px;right:9px;bottom:-26px;height:26px;background:radial-gradient(60% 100% at 50% 0,rgba(255,240,200,.55),transparent);pointer-events:none}
.dc-plaque{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.dc-plaque b{font:800 18px/1.15 var(--display);letter-spacing:-.01em}
.dc-plaque small{font-size:13px;color:var(--soft)}
.dc-go{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font:800 14px var(--display);color:#090057;background:#02d3e0;padding:7px 14px;border-radius:99px;transition:transform .3s var(--ease)}
.dc-go svg{width:14px;height:14px}
html.night .dc-go{color:#090057}
.dcard:hover .dc-leaf.l,.dcard:focus-visible .dc-leaf.l{transform:rotateY(-78deg)}
.dcard:hover .dc-leaf.r,.dcard:focus-visible .dc-leaf.r{transform:rotateY(78deg)}
.dcard:hover .dc-room img,.dcard:focus-visible .dc-room img{transform:scale(1.12)}
.dcard:hover .dc-go,.dcard:focus-visible .dc-go{transform:translateX(4px)}
.dcard:active .dc-room img{transform:scale(1.16)}
@media (max-width:1100px){.s-doors .doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:759px){
  .s-doors .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .dc-plaque{margin-top:24px}.dc-plaque b{font-size:16px}.dc-plaque small{font-size:12px}
  .dc-go{font-size:13px;padding:6px 12px}
  .dc-leaf.l{transform:rotateY(-55deg)}.dc-leaf.r{transform:rotateY(55deg)}
}
@media (prefers-reduced-motion:reduce){.dc-leaf,.dc-room img{transition:none}}

/* rev6: phones skip layout/paint of sections far below the fold (fewer layers per frame while scrolling) */
.s-desk,.s-street,.s-rite,.s-library,.s-call{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---- Instinct round 1: consultation form states ---- */
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-test{margin:-8px 0 18px!important;padding:10px 12px;border-radius:10px;font-size:13.5px;background:rgba(255,184,0,.12);box-shadow:inset 0 0 0 1px rgba(255,184,0,.45);color:var(--fg)!important}
.form .btn[disabled]{opacity:.75;cursor:progress}
.form.sent .btn{--b-bg:#0d8a56}
.form-note.show.ok{background:rgba(13,160,96,.12);box-shadow:inset 0 0 0 1.5px rgba(13,160,96,.55)}
.form-note.show.bad{background:rgba(214,48,49,.09);box-shadow:inset 0 0 0 1.5px rgba(214,48,49,.6)}
.form-note.show.warn{background:rgba(255,184,0,.12);box-shadow:inset 0 0 0 1px rgba(255,184,0,.5)}
.form-note b{color:var(--fg)}
.form-note:focus{outline:none}
.form-alt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.form-alt .btn{margin:0!important;padding:10px 14px;font-size:14px;min-height:44px;color:var(--fg);text-decoration:none}
.form-note .spin{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(var(--fg-rgb),.25);border-top-color:var(--accent);animation:fspin .8s linear infinite}
@keyframes fspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.form-note .spin{animation:none}}

/* ---- Instinct round 1: Skip to services ---- */
.hero-skip{position:absolute;z-index:6;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px 0 20px;border-radius:99px;
  font:700 15px/1 var(--display);letter-spacing:-.005em;color:var(--navy);text-decoration:none;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 10px 26px -10px rgba(9,0,87,.45),inset 0 0 0 1.5px rgba(9,0,87,.14);transition:opacity .35s,transform .35s var(--ease),visibility .35s}
.hero-skip svg{width:18px;height:18px;animation:skipnudge 2.2s ease-in-out infinite}
.hero-skip:hover{background:#fff}
.hero-skip.gone{opacity:0;visibility:hidden;transform:translate(-50%,12px);pointer-events:none}
html.night .hero-skip{color:#fff;background:rgba(12,9,64,.78);box-shadow:0 10px 26px -10px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(111,240,247,.35)}
@keyframes skipnudge{0%,100%{transform:none}50%{transform:translateY(3px)}}
@media (min-width:900px){.hero-skip{left:auto;right:110px;transform:none;bottom:34px}.hero-skip.gone{transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.hero-skip{display:none}}

/* Instinct round 3: the big phone number always fits its column. 12 characters of tabular digits at -.05em spacing are
   about 5.75em wide, so on narrow phones the size follows the column (320px: ~45px) instead of a 56px floor; wider screens
   keep the clamp above unchanged. */
.bignum{font-size:min(clamp(56px,11.5vw,190px),calc((100vw - 52px) / 5.9))}

/* smooth pass (Yoel, walkthrough 27-41 s: "this picture doesn't make sense. It should stay here and as you scroll, just the
   words should appear ... the picture should be greyed out in the back"): the hero now holds on the lobby it fades into
   for one more screen (home.js HOLD); the lobby stays put, dims, and the "Call us" words rise and fade in over it. Then the
   whole scene carries on up the page together. The desk section is only the words now (its picture card is gone). */
.s-desk{display:block;position:relative;z-index:4;margin-top:-46vh;margin-top:-46svh;padding:0 max(24px,calc((100vw - 1360px)/2 + 20px)) 8vh;background:transparent!important;overflow:visible;content-visibility:visible;pointer-events:none}
.s-desk .desk-copy{pointer-events:auto;max-width:620px;opacity:0;will-change:opacity,transform}
.s-desk .desk-art{display:none}
.lobby-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 48%,rgba(255,255,255,0) 62%);opacity:0;pointer-events:none;will-change:opacity}
html.night .lobby-veil{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 48%,rgba(8,5,47,0) 62%)}
.hero-dim{position:absolute;inset:0;z-index:2;background:var(--bg);opacity:0;pointer-events:none;will-change:opacity}
/* lobby fix (Oct 23): the dim is a scrim, light over the backlit wordmark (top ~45%), solid under the words (lower half), so the logo stays crisp above and the "Call us" block sits on the desk/floor with clear space. The words land at 54% (56% on phones). */
/* lobby r4: the solid part under the words is .hero-fog, which home.js moves with the words (transform only), so the lobby is
   never covered where there are no words; .hero-dim is now only a light even dim. */
.hero-fogwrap{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.hero-fog{position:absolute;left:0;right:0;top:0;height:100%;--fg:120px;background:var(--bg);transform:translate3d(0,100%,0);will-change:transform;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.2) calc(var(--fg) * .45),rgba(0,0,0,.62) calc(var(--fg) * .75),#000 var(--fg),#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.2) calc(var(--fg) * .45),rgba(0,0,0,.62) calc(var(--fg) * .75),#000 var(--fg),#000 100%)}
/* lobby r4, wide screens: the words sit in a left column, so the fog fades out to the right of it and the lobby stays visible on the right (no wide blank band beside the words) */
@media (min-width:900px){ .hero-fogwrap{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--fx,760px),rgba(0,0,0,0) calc(var(--fx,760px) + 28vw));mask-image:linear-gradient(90deg,#000 0,#000 var(--fx,760px),rgba(0,0,0,0) calc(var(--fx,760px) + 28vw))} }
@media (max-width:899px){ .s-desk{margin-top:-44vh;margin-top:-44svh;padding:0 22px 7vh} }
@media (prefers-reduced-motion:reduce){ .s-desk{margin-top:0;padding:60px 22px;pointer-events:auto} .s-desk .desk-art{display:block} .s-desk .desk-copy{opacity:1} }

/* journey round: the hallway's "Everything IT. One team. One bill." holds over the corridor (home.js hallRender) */
.hall-hold .corr-intro{position:absolute;inset:0;z-index:7;display:flex;align-items:center;pointer-events:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.hall-hold .corr-intro .sec-top{padding:0 max(24px,calc((100vw - 1360px)/2 + 20px));max-width:900px;margin:0;pointer-events:auto}
.hall-hold .corr-intro .sec-h{font-size:clamp(44px,6.4vw,92px)}
.hall-hold .corr-intro p{font-size:clamp(17px,1.6vw,21px);max-width:560px}
.corr-dim{position:absolute;inset:0;z-index:6;background:var(--bg);opacity:0;pointer-events:none;will-change:opacity}
@media (max-width:899px){ .hall-hold .corr-intro .sec-top{padding:0 22px} }

/* journey round: the home guide has a soft contact shadow and a little depth (static filter, never animated) */
.hero-boy .clic-img,.walker .clic-img{filter:drop-shadow(0 10px 9px rgba(9,0,87,.22)) drop-shadow(0 2px 2px rgba(9,0,87,.18))}
html.night .hero-boy .clic-img,html.night .walker .clic-img{filter:drop-shadow(0 10px 10px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(111,240,247,.35))}
.hall-hold .corr-dim{z-index:30}
.hall-hold .corr-intro{z-index:31}

/* r13: "Call us" fades in, in place, over the fading lobby (home.js moves .desk-copy into .hero-call) */
.hero-call{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:0 max(24px,calc((100vw - 1360px)/2 + 20px));opacity:0;visibility:hidden;pointer-events:none;will-change:opacity}
.hero-call .desk-copy{opacity:1!important;max-width:640px;text-align:center;pointer-events:auto;transform-origin:50% 50%}
.hero-call .desk-copy p{margin-left:auto;margin-right:auto}
.hero-call .desk-num{justify-content:center}
.s-desk.desk-moved{display:none}
.hero-dim{opacity:0}
@media (max-width:899px){.hero-call{padding:0 24px}.hero-call .sec-h{font-size:clamp(40px,11vw,56px)}}
/* owner r2: his own headline, longer than the old two-liner: sized so it sets in 3-4 calm lines */
.desk-h2{font-size:clamp(34px,3.9vw,58px)!important;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.hero-call .desk-copy{max-width:760px}
@media (max-width:899px){.desk-h2{font-size:clamp(28px,7.6vw,36px)!important;line-height:1.12}}

/* r13 Google reviews: styles moved to site.css (owner r2) */
/* r13: How we start (home) */
.s-hws{padding:90px 0;background:var(--bg)}
.s-hws .hws-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.s-hws .hws-steps li{padding:26px;border-radius:20px;background:rgba(9,0,87,.04);box-shadow:inset 0 0 0 1px rgba(9,0,87,.08)}
html.night .s-hws .hws-steps li{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.s-hws .hws-n{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#090057;color:#02d3e0;font:800 24px/1 var(--display);margin-bottom:14px}
html.night .s-hws .hws-n{background:#02d3e0;color:#090057}
.s-hws h3,.s-hws .hws-h{font:800 21px/1.2 var(--display);margin:0 0 8px}.s-hws .hws-steps p{color:var(--soft);margin:0}
.hws-note{margin-top:22px;color:var(--soft)}.hws-note a{color:var(--accent);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px}.hws-note svg{width:13px;height:13px}
@media (max-width:899px){.s-hws{padding:64px 0}.s-hws .hws-steps{grid-template-columns:1fr}}

/* owner r11: the hallway's service dots end to the left of the bottom-right power button (r4 had them start right of a bottom-left one) */
@media (max-width:899px){.corr-hud{right:calc(70px + env(safe-area-inset-right,0px))}}
@media (min-width:900px){.corr-hud{right:max(84px,calc((100vw - 1360px)/2 + 20px))}}
/* owner r4: the guide waits (hidden) only for the moment his front-facing pose takes to decode, then fades in with the copy */
#hero-boy{transition:opacity .45s ease-out}#hero-boy.boy-wait{opacity:0}
/* owner r11: the r4 nudge (phones: guide at left:32%, clear of a bottom-left button) is gone; he starts at his natural spot again */

/* final QA (Oct 25): <=370px phones: the value-card titles ("Transparency") were clipped and the blog shelf ran 12px past the screen; fit both */
@media (max-width:370px){.rite{padding:22px 14px}.rite h3{font-size:17px}.lib{grid-template-columns:minmax(0,1fr)}.books{gap:6px;padding:0 96px 0 4px}}

/* owner r23 (phones): the walk sheet stays painted at an invisible .3% while hidden, so it is decoded before his first step (see home.js) */
@media (max-width:899.98px){#hero-boy.boy-warm .clic-walk:not(.on){opacity:.003}#hero-boy.boy-warm .clic-walk,#hero-boy.boy-warm .clic-back{will-change:opacity}}

/* owner r24: shift-change clips over the building and the lobby (home.js "r24"). Hidden until a clip plays; the static picture stays under it. */
.shift-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:transparent;transition:opacity .22s linear}
.shift-v.on{opacity:1;transition:none}
.hero-fade .shift-v{object-position:52% 46%;transform-origin:50% 52%;will-change:transform}
.shift-hide{opacity:0!important;transition:opacity .15s linear!important}
@media (prefers-reduced-motion:reduce){.shift-v{display:none!important}}

/* owner r27 (Oct 25 2026): the guide's AI speech bubble. Homepage only; ~2 s after load if still at the top, gone for good once you scroll > 40 px (home.js "r27"). */
.ai-say{position:absolute;left:0;top:0;z-index:30;display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:260px;padding:8px 12px 8px 11px;background:#fff;color:#090057;border-radius:13px;font:600 14px/1.25 var(--display);letter-spacing:0;text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(9,0,87,.42),0 2px 6px rgba(9,0,87,.12);opacity:0;transform:scale(.82);transform-origin:0 50%;pointer-events:none;
  transition:opacity .25s ease-out,transform .25s cubic-bezier(.2,.9,.3,1.25),box-shadow .2s}
.ai-say[hidden]{display:none}
.ai-say.on{opacity:1;transform:none;pointer-events:auto}
.ai-say.out{opacity:0;transform:scale(.94);pointer-events:none;transition:opacity .2s ease-in,transform .2s ease-in}
.ai-say::before{content:"";position:absolute;width:11px;height:11px;background:#fff;left:-4px;top:var(--ty,50%);margin-top:-5.5px;transform:rotate(45deg);border-radius:2px}
.ai-say.tr{transform-origin:100% 50%}.ai-say.tr::before{left:auto;right:-4px}
.ai-say.tb{transform-origin:var(--tx,20px) 100%}.ai-say.tb::before{top:auto;bottom:-4px;margin-top:0;left:var(--tx,20px);margin-left:-5.5px}
.ai-say b{font-weight:800}
.ai-say-t{min-width:0}
.ai-say-dot{width:7px;height:7px;border-radius:50%;background:#02D3E0;flex:none;box-shadow:0 0 0 3px rgba(2,211,224,.2)}
.ai-say svg{width:15px;height:15px;flex:none;color:#02D3E0;stroke-width:2.8;transition:transform .2s}
.ai-say:hover{box-shadow:0 14px 30px -10px rgba(9,0,87,.5),0 2px 6px rgba(9,0,87,.14)}
.ai-say:hover svg{transform:translateX(2px)}
.ai-say:focus-visible{outline:2px solid #090057;outline-offset:3px}
html.night .ai-say{box-shadow:0 12px 28px -10px rgba(0,0,0,.65),0 0 0 1px rgba(111,240,247,.25)}
html.night .ai-say:focus-visible{outline-color:#02D3E0}
@media (max-width:899.98px){.ai-say{font-size:13px;padding:7px 11px 7px 10px;gap:6px;border-radius:12px}.ai-say svg{width:14px;height:14px}}
@media (prefers-reduced-motion:reduce){.ai-say,.ai-say.on,.ai-say.out{transition:none;transform:none}}

/* owner r28 (Oct 25 2026): PHONES ONLY (< 900 px) - the AI bubble pops more: navy fill, white 15.5 px text, cyan "AI" badge + cyan arrow, springy bounce-in (~.42 s),
   then two soft cyan pulse rings (1.2 s each), then still. Desktop keeps the r27 white card (the new spans are display:none there). */
.ai-say-ai,.ai-say-m{display:none}
@media (max-width:899.98px){
  .ai-say{background:#090057;color:#fff;font-size:15.5px;font-weight:700;padding:9px 13px 9px 9px;gap:8px;border-radius:14px;
    box-shadow:0 12px 28px -10px rgba(9,0,87,.6),0 3px 8px rgba(9,0,87,.25);transform:scale(.5);transition:opacity .15s ease-out,box-shadow .2s}
  .ai-say::before{background:#090057;width:12px;height:12px;margin-top:-6px;left:-4.5px}
  .ai-say.tr::before{right:-4.5px}.ai-say.tb::before{bottom:-4.5px;margin-left:-6px}
  .ai-say-dot,.ai-say-t{display:none}
  .ai-say-ai{display:inline-flex;align-items:center;justify-content:center;flex:none;height:22px;padding:0 6px;border-radius:7px;background:#02D3E0;color:#090057;font:800 12px/1 var(--display);letter-spacing:.03em}
  .ai-say-m{display:inline;min-width:0;white-space:nowrap}
  .ai-say svg{width:16px;height:16px;color:#02D3E0}
  .ai-say::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(2,211,224,0)}
  .ai-say.on{transform:none;animation:aiSayPop .42s cubic-bezier(.3,.7,.4,1) both}
  .ai-say.on.pulse::after{animation:aiSayRing 1.2s ease-out .42s 2}
  .ai-say.out{animation:none;opacity:0;transform:scale(.9);transition:opacity .2s ease-in,transform .2s ease-in}
  .ai-say:focus-visible{outline:2px solid #02D3E0;outline-offset:3px}
  html.night .ai-say{box-shadow:0 12px 28px -10px rgba(0,0,0,.7),0 0 0 1.5px rgba(2,211,224,.6)}
}
@media (max-width:359.98px){.ai-say{font-size:15px;gap:7px;padding:8px 11px 8px 8px}}
@keyframes aiSayPop{0%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1.12)}70%{transform:scale(.95)}86%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes aiSayRing{0%{box-shadow:0 0 0 0 rgba(2,211,224,.75)}70%{box-shadow:0 0 0 11px rgba(2,211,224,0)}100%{box-shadow:0 0 0 11px rgba(2,211,224,0)}}
@media (prefers-reduced-motion:reduce){.ai-say.on,.ai-say.on.pulse::after{animation:none}.ai-say,.ai-say.on,.ai-say.out{transition:none;transform:none}}