:root{--navy:#0d1b36;--ice:#bfe3ff;--text:#f2f6fb;--cyan:#00b7eb;--blue:#3b82ff;--sky:#6fd0f5;
--logo:url(/img/brand/logo.webp);--hl:url(/img/brand/hero-light.webp);--hd:url(/img/brand/hero-dark.webp);
color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:70px;background:var(--navy);-webkit-text-size-adjust:100%}
body{color:var(--text);font:300 1rem/1.6 'Manrope',system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(60vw 60vw at var(--gx,10%) var(--gy,0%),rgba(120,170,255,.28),transparent 65%),radial-gradient(40vw 40vw at 90% 45%,rgba(0,183,235,.1),transparent 60%),linear-gradient(calc(105deg + var(--ga,0deg)),#1d3054 0%,#182a4d 22%,#101d3c 55%,#0d1b36 100%)}
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.d{font-family:'Bricolage Grotesque','Arial Black',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;text-shadow:0 0 38px rgba(120,175,255,.28)}
.t{font-size:clamp(2rem,4.6vw,3.8rem)}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(34vw 34vw at var(--px,50%) var(--py,30%),rgba(120,175,255,.14),transparent 70%)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(18px + env(safe-area-inset-top,0px)) 5vw 18px;transition:background .3s,backdrop-filter .3s}
nav.sc{background:rgba(13,27,54,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav b{font-weight:500;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}
nav ul{display:flex;gap:1.8rem;list-style:none;align-items:center}
nav ul a{font-size:.9rem;color:var(--ice);transition:color .25s;padding:6px 0}
nav ul a:hover{color:#fff}
nav .login{border:1px solid rgba(191,227,255,.5);border-radius:30px;padding:7px 16px;color:var(--ice)}
nav .login:hover{background:var(--ice);color:var(--navy)}

.mark{background:linear-gradient(100deg,#bfe3ff 0%,#fff 38%,#bfe3ff 62%,#6fd0f5 100%);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;aspect-ratio:838/401}

/* HERO */
.hero{height:100vh;height:100svh;min-height:520px;display:grid;place-items:center;align-content:center;gap:2rem;text-align:center;position:relative;padding:0 5vw}
.hero p{color:var(--ice);max-width:34ch;font-size:1.05rem}
.cue{position:absolute;bottom:26px;font-size:.8rem;color:var(--ice);opacity:.7;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}
.bloom{position:absolute;left:50%;top:44%;width:min(115vw,1400px);height:min(72vh,720px);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(120,185,255,.43) 0%,rgba(110,170,250,.17) 40%,transparent 70%);filter:blur(10px);pointer-events:none}
.lw{will-change:transform,opacity;perspective:1300px;width:min(88vw,1100px)}
.stage{position:relative;width:100%;aspect-ratio:838/401;transform-style:preserve-3d;will-change:transform}
.ly{position:absolute;inset:0;background:center/contain no-repeat;pointer-events:none}
.fr{background-image:var(--hl)}
.bk{background-image:var(--hd)}
.gl1{background-image:var(--hl);filter:blur(16px) brightness(1.85) saturate(1.25);opacity:.68}
.gl2{background-image:var(--hl);filter:blur(55px) brightness(2.2) saturate(1.5);opacity:.55;animation:pulse 4.5s ease-in-out infinite}
.sh{background-image:var(--hd);inset:7% 0 -7% 0;filter:blur(34px) brightness(.25);opacity:.6}
.sheen{-webkit-mask:var(--hl) center/contain no-repeat;mask:var(--hl) center/contain no-repeat;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.63) 50%,transparent 70%);background-size:260% 100%;background-position:var(--sx,30%) 0}
@keyframes pulse{50%{opacity:.85}}

/* COLLAGE */
.collage{margin-top:-10vh;padding-bottom:14vh}
.ghost{white-space:nowrap;font-size:clamp(3.6rem,13vw,12rem);color:transparent;-webkit-text-stroke:1px rgba(191,227,255,.32);will-change:transform;pointer-events:none;margin-bottom:5vh;text-shadow:none}
.gw{position:relative}
.spot{position:absolute;inset:-4vh 0;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),transparent 0%,rgba(5,12,30,.62) 100%)}
.gw.lit .spot{opacity:1}
.grid{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:12px;padding:0 3vw;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;position:relative;will-change:transform}
.col:nth-child(2){margin-top:7vh}.col:nth-child(3){margin-top:2vh}.col:nth-child(4){margin-top:11vh}
.pic{position:relative;overflow:hidden;border-radius:6px;cursor:zoom-in;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s,box-shadow .55s}
.ph{position:absolute;inset:0;background:#0c1832;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.2,.7,.2,1) var(--dl,0s),transform .7s cubic-bezier(.2,.7,.2,1)}
.ph img{width:100%;height:100%;object-fit:cover}
.pic.in .ph{clip-path:inset(0)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(5,12,30,.85));opacity:0;transform:translateY(8px);transition:all .4s .05s}
@media(hover:hover){
 .col:has(.pic:hover){z-index:5}
 .pic:hover .cap{opacity:1;transform:none}
 .pic:hover{transform:scale(1.13);z-index:5;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 64px rgba(90,160,255,.4)}
 .pic:hover .ph{transform:scale(1.07)}
 .grid:has(.pic:hover) .pic:not(:hover){opacity:.45}
}

/* STATEMENT */
.say{padding:18vh 5vw;max-width:1300px;margin:auto}
.say p{font:600 clamp(1.7rem,4.2vw,3.4rem)/1.18 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.say span{opacity:.16;transition:opacity .35s}
.say span.on{opacity:1}

/* INSTAGRAM */
.hs{position:relative;background:linear-gradient(180deg,rgba(5,12,30,0),rgba(5,12,30,.55) 30%,rgba(5,12,30,.55) 70%,rgba(5,12,30,0))}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:3rem}
.stick header{padding:0 5vw;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.track{display:flex;gap:1.6rem;padding:0 5vw;width:max-content;will-change:transform}
.post{flex:0 0 min(62vw,360px);aspect-ratio:4/5;border-radius:3px;position:relative;overflow:hidden;transition:transform .3s;background:#0c1832 center/cover no-repeat}
.post::after{content:'Open on Instagram';position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(transparent,rgba(7,13,31,.9));color:var(--ice);font-size:.85rem;opacity:0;transform:translateY(8px);transition:all .3s}
.post:hover{transform:translateY(-6px)}
.post:hover::after,.post:focus-visible::after{opacity:1;transform:none}
.post:active{transform:scale(.985)}

/* BUTTONS */
.btn{display:inline-block;padding:13px 28px;border:1px solid var(--ice);border-radius:40px;color:var(--ice);font:500 .9rem 'Manrope',sans-serif;background:transparent;cursor:pointer;transition:all .25s;text-align:center}
.btn:hover{background:var(--ice);color:var(--navy);box-shadow:-3px 3px 0 var(--cyan),3px -3px 0 var(--blue)}
.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(120deg,#1f6fff,#00b7eb);border-color:transparent;color:#fff}
.btn.p:hover{background:linear-gradient(120deg,#3b82ff,#33c9f5);color:#fff}
.btn[disabled]{opacity:.6;pointer-events:none}

/* GLASS PANELS */
.quotes,.about,form.glass{margin:0 3vw;border:1px solid rgba(191,227,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 90px rgba(90,150,255,.09),inset 0 1px 0 rgba(255,255,255,.08)}
.quotes{padding:10vh 4vw}
.quotes h2{margin-bottom:4rem}
.q{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:2.2rem 0;border-top:1px solid rgba(191,227,255,.18);opacity:var(--o,1);transition:opacity .2s}
.q p{font:600 clamp(1.4rem,3.4vw,2.7rem)/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.q span{color:var(--ice);font-size:.95rem;white-space:nowrap}
.vf{vertical-align:-2px;margin-left:5px}

/* MARQUEE */
.mq{padding:10vh 0 12vh}
.mk{padding:0 5vw;margin-bottom:2rem;color:var(--ice);font-size:.9rem}
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;width:max-content;animation:mq 120s linear infinite;will-change:transform}
.mrow{display:flex;align-items:center;flex-shrink:0;gap:clamp(2rem,5vw,4.5rem);padding-right:clamp(2rem,5vw,4.5rem)}
.mn{font:800 clamp(3rem,8.5vw,7.5rem)/1 'Big Shoulders Display','Arial Narrow',sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(191,227,255,.55);transition:color .35s,text-shadow .35s}
.mn:hover{color:var(--ice);text-shadow:0 0 34px rgba(120,175,255,.5)}
.md{flex:none;width:12px;height:12px;border:1.5px solid rgba(191,227,255,.55);transform:rotate(45deg)}
.marq:hover .mtrack{animation-play-state:paused}
@keyframes mq{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ABOUT */
.about{padding:9vh 4vw;display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:center}
.pw{aspect-ratio:3/4;overflow:hidden;border-radius:10px;position:relative}
.pw img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:50% 30%;will-change:transform}
.about p{max-width:56ch;margin:1.2rem 0;color:#dbe6f3}
.stats{display:flex;gap:2.8rem;flex-wrap:wrap;margin-top:2rem}
.stats b{display:block;font-size:2.8rem;color:var(--ice)}
.stats small{color:#9fb4cf}

/* BOOK */
.book{padding:14vh 5vw 10vh;text-align:center}
.book>.d{font-size:clamp(2.8rem,9vw,8rem)}
.orb{display:grid;place-items:center;width:170px;height:170px;margin:3rem auto;border-radius:50%;border:1px solid var(--ice);color:var(--ice);transition:background .3s,color .3s,box-shadow .3s;will-change:transform}
.orb:hover{background:var(--ice);color:var(--navy);box-shadow:-5px 5px 0 var(--cyan),5px -5px 0 var(--blue)}
.reach{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.reach small{display:block;color:var(--cyan)}
.reach a{font-size:1.2rem;color:var(--ice);border-bottom:1px solid transparent;word-break:break-all}
.reach a:hover{border-bottom-color:var(--blue)}
form.glass{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;max-width:960px;margin:5rem auto 0;text-align:left;padding:2.4rem}
.f{grid-column:1/-1}
label{display:block;font-size:.85rem;color:var(--ice);margin-bottom:.4rem}
input,select,textarea{width:100%;padding:13px 15px;background:rgba(13,23,51,.8);border:1px solid #1d2d5c;color:var(--text);font:300 1rem 'Manrope',sans-serif;border-radius:6px;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23bfe3ff' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
textarea{min-height:120px;resize:vertical}
.ck{display:flex;flex-wrap:wrap;gap:.6rem}
.ck label{display:flex;align-items:center;gap:.5rem;margin:0;padding:10px 15px;border:1px solid #1d2d5c;border-radius:30px;cursor:pointer;color:var(--text)}
.ck label:hover{border-color:var(--blue)}
.ck input{width:auto;accent-color:var(--cyan);-webkit-appearance:auto;appearance:auto}
.note{font-size:.9rem;color:#9fb4cf;margin-top:.8rem;min-height:1.4em}
.note.ok{color:#7be0a8}.note.err{color:#ff9aa8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
[hidden]{display:none!important}

footer{padding:8vh 5vw calc(5vh + env(safe-area-inset-bottom,0px));text-align:center}
footer .lw{margin:0 auto 2rem;width:min(40vw,450px)}
footer .mark{width:100%}
footer a{color:var(--ice);margin:0 .8rem}
footer small{display:block;margin-top:1.5rem;color:#7d92b3}

/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:rgba(5,12,30,.94);backdrop-filter:blur(8px);cursor:zoom-out;touch-action:pan-y}
.lb.on{display:grid}
.lb img{max-height:86vh;max-width:94vw;border-radius:6px;box-shadow:0 0 90px rgba(90,160,255,.3);object-fit:contain}
.lb .btn{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:4vw;padding:10px 20px}
.lb .nv{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(191,227,255,.5);background:rgba(13,27,54,.6);color:var(--ice);font-size:1.2rem;cursor:pointer}
.lb .pv{left:3vw}.lb .nx{right:3vw}

.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ================= MOBILE / TOUCH ================= */
@media(max-width:800px){
 nav{padding-left:4vw;padding-right:4vw}
 nav b{font-size:.95rem}
 nav ul{gap:.9rem}
 nav ul a{font-size:.8rem}
 nav .login{padding:6px 12px}
 nav li.hide-m{display:none}
 .hero{gap:1.4rem}
 .lw{width:92vw}
 .hero p{font-size:.98rem}
 .gl2{animation:none}
 .collage{margin-top:-4vh;padding-bottom:9vh}
 .grid{gap:8px;padding:0 3vw}.col{gap:8px}
 .col:nth-child(2){margin-top:4vh}
 .say{padding:12vh 6vw}
 /* Instagram strip becomes a native swipe carousel (no sticky scroll-jacking on phones) */
 .hs{background:none;padding:6vh 0}
 .stick{position:static;height:auto;overflow:visible;gap:1.6rem}
 .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 5vw 8px;gap:12px;scrollbar-width:none}
 .track::-webkit-scrollbar{display:none}
 .post{flex:0 0 74vw;scroll-snap-align:center}
 .post::after{opacity:1;transform:none;padding:10px 12px;font-size:.78rem}
 .quotes,.about{margin:0 3vw;border-radius:22px}
 .quotes{padding:7vh 6vw}
 .quotes h2{margin-bottom:2rem}
 .q{flex-direction:column;gap:.5rem;padding:1.5rem 0}
 .about{grid-template-columns:1fr;padding:6vh 6vw;gap:2rem}
 .pw{max-width:420px;width:100%;margin:0 auto}
 .stats{gap:1.6rem}.stats b{font-size:2.2rem}
 .book{padding:10vh 5vw 8vh}
 .orb{width:140px;height:140px;margin:2rem auto}
 .reach{gap:1.4rem;flex-direction:column}
 form.glass{grid-template-columns:1fr;padding:1.4rem;margin-top:3rem;border-radius:22px}
 input,select,textarea{font-size:16px;padding:14px 15px} /* 16px stops iOS zoom on focus */
 .ck label{padding:11px 14px}
 .btn{padding:14px 26px}
 footer .lw{width:56vw}
 .lb .nv{display:none}
}
@media(max-width:380px){nav b{display:none}nav{justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cue,.gl2{animation:none}.ph{clip-path:none;transition:none}.say span{opacity:1}.q{opacity:1}.rv{opacity:1;transform:none;transition:none}.mtrack{animation:none}.marq{overflow-x:auto;-webkit-mask:none;mask:none}}

/* stop any decorative element from creating sideways scroll (important on iOS) */
html,body{overflow-x:clip;max-width:100%}
.hero,.collage,.book,.mq,.hs{overflow-x:clip}
@supports not (overflow-x:clip){html,body,.hero,.collage,.book,.mq,.hs{overflow-x:hidden}}

/* Instagram posts are real <img> tags now so they load lazily (same look as before) */
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* On phones the frosted-glass blur sits over a plain gradient, so it looks the same
   without it but scrolls much smoother. Remove these two lines to bring it back. */
@media(max-width:800px){.quotes,.about,form.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* grid: a tile only reacts to the mouse once its photo is showing; photos fade in when they arrive */
.pic:not(.in){pointer-events:none}
.pic:not(.in) .cap{display:none}
.ph img{opacity:0;transition:opacity .5s}
.ph img.ok{opacity:1}
.ghost{position:relative;z-index:1}