/* ============ LUNA LXD · v3 layer ============
   Roomier layout system + component patterns adapted from
   Aceternity (timeline/tracing beam, card spotlight) and
   Magic UI (marquee, bento grid) — vanilla implementations. */

/* ---- global rhythm: triple the air ---- */
body[data-v3] .section{padding:clamp(90px,12vw,150px) 0}
body[data-v3] .section--tight{padding:clamp(60px,8vw,96px) 0}
body[data-v3] .wrap{max-width:1200px}
body[data-v3] p.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65}

/* ---- preloader ---- */
.pre{position:fixed;inset:0;z-index:200;background:#0E0E14;display:flex;align-items:center;justify-content:center;transition:transform .7s cubic-bezier(.77,0,.18,1),visibility 0s .7s;will-change:transform}
.pre.done{transform:translateY(-101%);visibility:hidden}
.pre-in{position:relative;text-align:center}
.pre-mark{font:700 clamp(1.6rem,4vw,2.4rem)/1 var(--f-head,Poppins,sans-serif);letter-spacing:.02em;color:#fff}
.pre-mark b{background:linear-gradient(110deg,#FFBD59,#FF784D,#FF66C4);-webkit-background-clip:text;background-clip:text;color:transparent}
.pre-orbit{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border:1px dashed rgba(255,255,255,.22);border-radius:50%;animation:preSpin 7s linear infinite}
.pre-orbit::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:linear-gradient(110deg,#FFBD59,#FF66C4);box-shadow:0 0 14px #FF784D}
.pre-bar{width:150px;height:2px;margin:56px auto 0;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:linear-gradient(110deg,#FFBD59,#FF784D,#FF66C4);animation:preFill 1.15s ease forwards}
@keyframes preSpin{to{transform:rotate(360deg)}}
@keyframes preFill{to{width:100%}}
@media (prefers-reduced-motion:reduce){.pre{display:none}}

/* ---- hero ---- */
.hero-v3{min-height:82vh;display:flex;align-items:center}
.hero-v3 h1{font-size:clamp(2.8rem,6.4vw,4.9rem);line-height:1.06;letter-spacing:-.015em;max-width:15ch}
.hero-v3 .lead{margin-top:26px;max-width:52ch;color:var(--comet,#B9B9C6)}
.hero-v3 .btn-row{margin-top:38px}
.hero-orbits{position:absolute;right:-160px;top:50%;width:640px;height:640px;margin-top:-320px;pointer-events:none;opacity:.5}
.hero-orbits i{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.14);border-radius:50%}
.hero-orbits i:nth-child(2){inset:70px;animation:preSpin 26s linear infinite}
.hero-orbits i:nth-child(3){inset:150px;border-color:rgba(255,189,89,.25)}
.hero-orbits i:nth-child(2)::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:linear-gradient(110deg,#FFBD59,#FF66C4);box-shadow:0 0 16px #FF784D}
@media(max-width:900px){.hero-orbits{display:none}}

/* ---- marquee (Magic UI pattern) ---- */
.mq{overflow:hidden;padding:26px 0;border-top:1px solid var(--edge,#23232E);border-bottom:1px solid var(--edge,#23232E);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;gap:0;animation:mqMove 34s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{font:700 .78rem var(--f-mono,'Space Mono',monospace);letter-spacing:.28em;color:var(--t-dim,#8F8FA0);white-space:nowrap;padding:0 34px;display:flex;align-items:center;gap:34px}
.mq-track span::after{content:"◀";font-size:.55rem;color:#FF784D;opacity:.7}
@keyframes mqMove{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ---- bento grid (Magic UI pattern) ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bento-cell{position:relative;display:block;padding:34px 32px;border-radius:20px;background:linear-gradient(160deg,#16161F,#101018);border:1px solid var(--edge,#23232E);overflow:hidden;transition:transform .35s,border-color .35s}
.bento-cell:hover{transform:translateY(-4px);border-color:rgba(255,120,77,.45)}
.bento-cell::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,120,77,.13),transparent 60%);opacity:0;transition:opacity .3s}
.bento-cell:hover::before{opacity:1}
.bento-cell.big{grid-row:span 2}
.bento-cell.wide{grid-column:span 2}
.bento-k{font:700 .68rem var(--f-mono,'Space Mono',monospace);letter-spacing:.22em;color:#FFBD59;text-transform:uppercase}
.bento-cell h3{margin:14px 0 10px;font-size:1.25rem;color:#fff}
.bento-cell p{color:var(--comet,#B9B9C6);font-size:.95rem;line-height:1.6;max-width:40ch}
.bento-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 .85rem var(--f-body,Inter,sans-serif);color:#fff}
.bento-go svg{transition:transform .3s}
.bento-cell:hover .bento-go svg{transform:translateX(5px)}
.bento-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bento-tags b{font:400 .7rem var(--f-mono,'Space Mono',monospace);letter-spacing:.08em;color:var(--comet,#B9B9C6);border:1px solid var(--edge,#23232E);border-radius:99px;padding:5px 12px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento-cell.big{grid-row:auto}.bento-cell.wide{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.bento-cell.wide{grid-column:auto}}

/* ---- process timeline (Aceternity timeline / tracing-beam pattern) ---- */
.tl{position:relative;max-width:880px;margin:60px auto 0;padding-left:56px}
.tl-beam{position:absolute;left:17px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.tl-beam i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,#FFBD59,#FF784D,#FF66C4);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .12s linear}
.tl-step{position:relative;padding:0 0 74px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-47px;top:4px;width:22px;height:22px;border-radius:50%;background:#0E0E14;border:2px solid rgba(255,255,255,.22);transition:border-color .4s,box-shadow .4s}
.tl-step.on .tl-dot{border-color:#FF784D;box-shadow:0 0 0 5px rgba(255,120,77,.14),0 0 18px rgba(255,120,77,.5)}
.tl-num{font:700 .7rem var(--f-mono,'Space Mono',monospace);letter-spacing:.26em;color:#FFBD59}
.tl-step h3{margin:10px 0 8px;font-size:clamp(1.35rem,2.4vw,1.8rem);color:#fff}
.tl-step p{color:var(--comet,#B9B9C6);max-width:56ch;line-height:1.65}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tl-tags b{font:400 .68rem var(--f-mono,'Space Mono',monospace);letter-spacing:.08em;color:var(--t-dim,#8F8FA0);border:1px solid var(--edge,#23232E);border-radius:99px;padding:4px 11px}
.tl-step{opacity:.38;transition:opacity .5s}
.tl-step.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tl-step{opacity:1}.tl-beam i{transform:scaleY(1)}}

/* ---- spotlight work cards (Aceternity card-spotlight pattern) ---- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.spot{position:relative;display:block;border-radius:22px;background:linear-gradient(160deg,#15151E,#101017);border:1px solid var(--edge,#23232E);overflow:hidden;transition:transform .4s,border-color .4s}
.spot:hover{transform:translateY(-6px);border-color:rgba(255,120,77,.5)}
.spot::after{content:"";position:absolute;inset:0;background:radial-gradient(560px circle at var(--mx,50%) var(--my,30%),rgba(255,189,89,.10),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.spot:hover::after{opacity:1}
.spot-media{aspect-ratio:16/10;overflow:hidden;background:#0B0B10}
.spot-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.spot:hover .spot-media img{transform:scale(1.045)}
.spot-media .device{border:0;border-radius:0;box-shadow:none;height:100%}
.spot-body{padding:26px 28px 30px}
.spot-k{font:700 .66rem var(--f-mono,'Space Mono',monospace);letter-spacing:.24em;color:#FFBD59;text-transform:uppercase}
.spot-body h3{margin:12px 0 8px;font-size:clamp(1.25rem,2vw,1.55rem);color:#fff}
.spot-body p{color:var(--comet,#B9B9C6);font-size:.95rem;line-height:1.6;max-width:52ch}
.spot-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 .85rem var(--f-body,Inter,sans-serif);color:#fff}
.spot-go svg{transition:transform .3s}
.spot:hover .spot-go svg{transform:translateX(5px)}
@media(max-width:820px){.works{grid-template-columns:1fr}}

/* ---- row lists (experience / journal / included) ---- */
.rows{margin-top:44px;border-top:1px solid var(--edge,#23232E)}
.rowi{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--edge,#23232E);text-decoration:none;transition:background .3s;position:relative}
a.rowi:hover{background:rgba(255,255,255,.025)}
.rowi .rk{font:400 .72rem var(--f-mono,'Space Mono',monospace);letter-spacing:.14em;color:var(--t-dim,#8F8FA0)}
.rowi .rt{color:#fff;font-weight:600;font-size:1.06rem;line-height:1.4}
.rowi .rt small{display:block;font-weight:400;color:var(--comet,#B9B9C6);font-size:.9rem;margin-top:6px;max-width:64ch}
.rowi .ra{color:#FF784D;font-size:1.05rem;transition:transform .3s}
a.rowi:hover .ra{transform:translate(4px,-4px)}
@media(max-width:680px){.rowi{grid-template-columns:1fr auto}.rowi .rk{grid-column:1/-1}}

/* ---- case-study title band + hero image ---- */
.titleband{display:grid;grid-template-columns:1.5fr .9fr;gap:48px;align-items:end}
.titleband h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.08;letter-spacing:-.01em}
.tmeta{display:grid;gap:0;border-top:1px solid var(--edge,#23232E)}
.tmeta div{display:flex;justify-content:space-between;gap:18px;padding:13px 2px;border-bottom:1px solid var(--edge,#23232E);font-size:.9rem}
.tmeta b{font:700 .66rem var(--f-mono,'Space Mono',monospace);letter-spacing:.18em;color:var(--t-dim,#8F8FA0);text-transform:uppercase;padding-top:3px}
.tmeta span{color:#fff;text-align:right}
@media(max-width:860px){.titleband{grid-template-columns:1fr}}
.heroimg{margin-top:60px;border-radius:22px;overflow:hidden;border:1px solid var(--edge,#23232E);box-shadow:var(--shadow-2,0 30px 80px rgba(0,0,0,.5))}
.heroimg img{display:block;width:100%;height:auto}
.imgpair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.imgpair .heroimg{margin-top:0}
@media(max-width:760px){.imgpair{grid-template-columns:1fr}}

/* ---- prose ---- */
.prose{max-width:70ch;margin-top:54px}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:60px 0 18px;color:#fff}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--comet,#B9B9C6);line-height:1.75;margin:0 0 18px;font-size:1.02rem}
.prose .grad-text{font-weight:600}

/* ---- next link ---- */
.next-link{display:block;text-decoration:none;margin-top:30px}
.next-link .nk{font:700 .7rem var(--f-mono,'Space Mono',monospace);letter-spacing:.24em;color:var(--t-dim,#8F8FA0);text-transform:uppercase}
.next-link b{display:inline-flex;align-items:center;gap:16px;margin-top:12px;font-size:clamp(1.7rem,4vw,2.7rem);font-weight:700;background:linear-gradient(110deg,#FFBD59,#FF784D,#FF66C4);-webkit-background-clip:text;background-clip:text;color:transparent}
.next-link svg{stroke:#FF66C4;transition:transform .35s}
.next-link:hover svg{transform:translateX(10px)}

/* ---- stats airy ---- */
body[data-v3] .grid.cols-2{gap:18px}
body[data-v3] .stat{padding:30px 26px}

/* ---- video frame ---- */
.vidframe{position:relative;aspect-ratio:16/9;background:#0B0B10;border-radius:22px;overflow:hidden;border:1px solid var(--edge,#23232E);box-shadow:var(--shadow-2,0 30px 80px rgba(0,0,0,.5));margin-top:60px}
.vidframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- v3.1: Nasalization display numerals ---- */
body[data-v3] .num{font-family:'Nasalization Rg','Nasalization',var(--f-head,Poppins,sans-serif);font-weight:400;letter-spacing:.035em}

/* ---- v3.1: roomy click-to-reveal (restyled .disc accordions) ---- */
body[data-v3] .discs{max-width:none;border-top:1px solid var(--edge,#23232E)}
body[data-v3] .disc{border:0;border-bottom:1px solid var(--edge,#23232E);background:transparent;border-radius:0}
body[data-v3] .disc__btn{padding:26px 6px;gap:20px;align-items:center}
body[data-v3] .disc__btn:hover .disc__t{color:#fff}
body[data-v3] .disc__n{font:700 .68rem var(--f-mono,'Space Mono',monospace);letter-spacing:.24em;color:#FFBD59;min-width:34px}
body[data-v3] .disc__t{font-size:clamp(1.1rem,2vw,1.4rem);transition:color .3s}
body[data-v3] .disc__inner{max-width:72ch}
body[data-v3] .disc__inner>*{padding:0 6px 24px}
body[data-v3] .disc__inner>*:last-child{padding-bottom:32px}
body[data-v3] .disc__inner p{color:var(--comet,#B9B9C6);line-height:1.75;margin:0}
body[data-v3] .disc .svc-ic-wrap{margin:0}
body[data-v3] .disc__inner ul{margin:0 0 16px;padding-left:18px;color:var(--comet,#B9B9C6);line-height:1.9}

/* ---- v3.1: service icons ---- */
.svc-ic{width:34px;height:34px;fill:none;stroke:#FFBD59;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.svc-ic .alt{stroke:#FF66C4}
.svc-ic .dot{fill:#FF66C4;stroke:none}
.svc-ic-wrap{display:inline-flex;padding:11px;border-radius:13px;background:rgba(255,189,89,.07);border:1px solid rgba(255,189,89,.22);margin-bottom:16px}
.bento-cell .svc-ic{width:28px;height:28px}

/* ---- v3.1: proof image card on service pages ---- */
.proofcard{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid var(--edge,#23232E);margin-top:22px;max-width:680px;box-shadow:var(--shadow-2,0 30px 80px rgba(0,0,0,.5))}
.proofcard img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.proofcard:hover img{transform:scale(1.045)}
.proofcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(9,9,15,.88))}
.proofcard b{position:absolute;left:24px;right:24px;bottom:20px;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:14px;color:#fff;font-weight:600;font-size:1.05rem}
.proofcard b svg{stroke:#FF66C4;transition:transform .3s}
.proofcard:hover b svg{transform:translateX(6px)}

/* ---- v3.2: illustrated service reveals ---- */
.svc-split{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.svc-art{border-radius:18px;overflow:hidden;border:1px solid var(--edge,#23232E);background:#0E0E14;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.svc-art img{display:block;width:100%;height:auto}
@media(max-width:760px){.svc-split{grid-template-columns:1fr}.svc-art{max-width:420px}}

/* ---- v3.3: about — portrait & duo columns ---- */
.me-card{border-radius:24px;overflow:hidden;border:1px solid var(--edge,#23232E);box-shadow:var(--shadow-2,0 30px 80px rgba(0,0,0,.5));max-width:420px;margin-left:auto}
.me-card img{display:block;width:100%;height:auto}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:48px}
.duo h3{font-size:1.15rem;color:#fff;margin:0 0 6px;display:flex;align-items:center;gap:12px}
.duo .rowi{grid-template-columns:112px 1fr;padding:20px 2px}
.duo .rowi .rt{font-size:.98rem}
.duo .rowi .rt small{font-size:.85rem}
@media(max-width:880px){.duo{grid-template-columns:1fr;gap:40px}.me-card{margin:36px auto 0}}

/* ---- v3.5: centred portrait + parallax ---- */
.me-card--center{margin:0 auto}
@media(prefers-reduced-motion:no-preference){
  .me-card--center{overflow:hidden}
  .me-card--center img.plx{transform:translateY(var(--ty,0)) scale(1.14);will-change:transform;transition:transform .08s linear}
}

/* ============ v3.3 · Flight Log: post banners + further reading ============ */
.post-banner{margin:clamp(24px,4vw,34px) 0 0}
.post-banner svg{display:block;width:100%;height:auto;border-radius:18px}
.refs{margin-top:clamp(42px,6vw,64px);padding-top:34px;border-top:1px solid var(--edge,rgba(255,255,255,.09))}
.refs-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.refs-head .refs-pointer{color:var(--coral,#FF784D);font-size:.72rem;transform:translateY(-1px)}
.refs-head h2{font:700 .8rem var(--f-mono,'Space Mono',monospace);letter-spacing:.22em;text-transform:uppercase;color:var(--comet,#A9A9B8);margin:0}
.refs-list{list-style:none;margin:0;padding:0;counter-reset:ref}
.refs-list li{border-bottom:1px dashed var(--edge,rgba(255,255,255,.09))}
.refs-list li:last-child{border-bottom:0}
.refs-list a{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:baseline;padding:15px 2px;text-decoration:none;transition:background .3s}
.refs-list a::before{counter-increment:ref;content:counter(ref,decimal-leading-zero);font:400 .72rem var(--f-mono,'Space Mono',monospace);color:var(--comet-dk,#8F8FA0)}
.refs-list a:hover{background:rgba(255,255,255,.03)}
.refs-b{min-width:0}
.refs-t{display:block;color:#fff;font-weight:600;font-size:.97rem;line-height:1.45}
.refs-s{display:block;font:400 .7rem var(--f-mono,'Space Mono',monospace);letter-spacing:.12em;color:var(--comet-dk,#8F8FA0);margin-top:5px}
.refs-a{color:var(--coral,#FF784D);font-size:1rem;transition:transform .3s}
.refs-list a:hover .refs-a{transform:translate(3px,-3px)}
@media(max-width:480px){.refs-list a{grid-template-columns:26px 1fr auto;gap:10px}}
/* v3.3 fix: 4-across stat rows (inline template) wrap to 2x2 on small screens */
@media(max-width:640px){.grid.cols-2[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}}
/* v3.3 fix: stat cards fit two-up on 320-380px screens */
@media(max-width:380px){
  body[data-v3] .stat{padding:22px 12px}
  .stat .num{font-size:1.55rem}
}

/* ---- v3.4: flight-log hero — title lives inside the gradient banner ---- */
.post-banner--hero{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(280px,32vw,360px);display:flex;align-items:center;border:1px solid rgba(255,255,255,.08)}
.post-banner--hero svg{position:absolute;inset:0;width:100%;height:100%;border-radius:0;transform:translate3d(0,var(--ty,0),0) scale(1.10);transform-origin:100% 50%;will-change:transform;transition:transform .08s linear}
.post-banner--hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(13,13,19,.58),rgba(13,13,19,0) 62%);pointer-events:none}
.banner-copy{position:relative;z-index:1;padding:clamp(26px,4.5vw,54px);max-width:min(700px,74%);text-shadow:0 1px 18px rgba(8,8,14,.5)}
.banner-copy h1{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.16;max-width:none}
.banner-copy .eyebrow,.banner-copy .a-meta{margin-bottom:14px}
.banner-copy .lead{margin-top:14px;max-width:48ch;font-size:clamp(1rem,1.4vw,1.12rem)}
@media (max-width:900px){.post-banner--hero::after{background:linear-gradient(90deg,rgba(13,13,19,.7),rgba(13,13,19,.36) 90%)}}
@media (max-width:640px){.banner-copy{max-width:100%;padding:26px 20px}}

/* ---- v3.4: orbit-ring service icons (flight-log banner style) ---- */
.svc-orb-wrap{display:inline-flex;flex:none}
.svc-orb{width:66px;height:66px;flex:none}
@media (max-width:640px){.svc-orb{width:52px;height:52px}}

/* ---- v3.4: glow CTA inside service accordions (was inheriting .disc__inner>* padding) ---- */
body[data-v3] .disc__inner .btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1;padding:14px 26px;min-height:48px;margin:2px 6px 28px;border:0;color:#FFC985;background:rgba(255,169,77,.09);box-shadow:inset 0 0 0 1.5px rgba(255,189,89,.7),0 0 24px rgba(255,150,60,.22);transition:box-shadow .3s,background .3s,color .2s}
body[data-v3] .disc__inner .btn--ghost svg{stroke:currentColor}
body[data-v3] .disc__inner .btn--ghost:hover{color:#161016;background:linear-gradient(110deg,#FFBD59,#FF9A4D);box-shadow:0 0 34px rgba(255,160,70,.5);padding:14px 26px;border:0}

/* ---- v3.5: about photo chip anchored to the image ---- */
.me-wrap{position:relative;max-width:420px;margin:0 auto}
.me-wrap .me-card{margin:0}
.me-wrap .float-card.br{bottom:24px;right:-14px}

/* ---- v3.5: showcase sections + carousel ---- */
.show-sec{padding:38px 0;border-bottom:1px solid var(--edge,#23232E);scroll-margin-top:110px}
.show-sec:last-child{border-bottom:0}
.show-sec h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:8px 0 10px}
.show-sec>p{color:var(--comet,#B9B9C6);line-height:1.75;max-width:64ch}
.car{position:relative;margin-top:22px;max-width:860px}
.car-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}
.car-slide{flex:0 0 100%;scroll-snap-align:start;margin:0}
.car-ph{position:relative;aspect-ratio:16/9;border-radius:18px;border:1.5px dashed rgba(255,189,89,.4);background:radial-gradient(90% 90% at 18% 0%,rgba(255,189,89,.09),transparent 60%),radial-gradient(90% 90% at 92% 100%,rgba(255,102,196,.09),transparent 60%),#14141D;display:grid;place-items:center;overflow:hidden}
.car-ph span{font:700 .68rem var(--f-mono,'Space Mono',monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--comet,#B9B9C6);text-align:center;padding:0 18px;line-height:2}
.car-slide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.car-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.car-btn{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,169,77,.1);box-shadow:inset 0 0 0 1.5px rgba(255,189,89,.6);color:#FFC985;display:grid;place-items:center;transition:background .25s,box-shadow .25s,color .2s}
.car-btn svg{width:17px;height:17px;stroke:currentColor;fill:none}
.car-btn:hover{background:linear-gradient(110deg,#FFBD59,#FF9A4D);color:#161016;box-shadow:0 0 22px rgba(255,160,70,.45)}
.car-dots{display:flex;gap:8px}
.car-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .25s,transform .25s}
.car-dot.on{background:var(--amber,#FFBD59);transform:scale(1.25)}
.show-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--edge,#23232E);margin-top:22px}
.show-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btn--glow{color:#FFC985;background:rgba(255,169,77,.09);box-shadow:inset 0 0 0 1.5px rgba(255,189,89,.7),0 0 24px rgba(255,150,60,.22)}
.btn--glow:hover{color:#161016;background:linear-gradient(110deg,#FFBD59,#FF9A4D);box-shadow:0 0 34px rgba(255,160,70,.5)}

/* ============================================================
   v3.4 · Mobile type pass — raises the small-UI tier on phones.
   Desktop rendering unchanged (applies at 600px and under only).
   ============================================================ */
@media (max-width:600px){
  body[data-v3] p.lead,.lead{font-size:1.14rem}
  .eyebrow{font-size:.88rem}
  .mono-label{font-size:.8rem}
  .crumb{font-size:.82rem}
  .btn{font-size:1rem}
  .svc-card p,.pf-body p,.proc-step p,.value-card p,.csm li,.post p,.bento-cell p,.spot-body p{font-size:1rem}
  .foot-col a{font-size:1rem}
  .foot-col .mono{font-size:.92rem}
  .foot-col h4{font-size:.74rem}
  .drawer-contact{font-size:.82rem}
  .af-by{font-size:.95rem}
  .form-note{font-size:.95rem}
  .form-status{font-size:1rem}
  .tmeta div{font-size:.95rem}
  .rowi .rt small{font-size:.95rem}
  .refs-t{font-size:1rem}
  .pn .mono-label{font-size:.7rem}
  .dv{font-size:1rem}
  .fc-v{font-size:.85rem}
  .car-ph span{font-size:.74rem}
}

/* v3.4 · Social links (About) — placeholder hrefs until live URLs supplied */
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.soc{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--t-body);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1.5px var(--edge-hi,rgba(255,255,255,.16));transition:color .25s,box-shadow .3s,background .25s,transform .25s var(--ease,ease)}
.soc svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.soc:hover{color:#161016;background:linear-gradient(110deg,#FFBD59,#FF9A4D);box-shadow:0 0 22px rgba(255,160,70,.4);transform:translateY(-2px)}
.soc:focus-visible{outline:2px solid var(--amber,#FFBD59);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.soc{transition:none}.soc:hover{transform:none}}

/* v3.6 · Project showreel (portfolio) — GSAP marquee with static fallback */
.reel{padding:6px 0 30px;overflow:hidden}
.reel-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reel-track{display:flex;gap:18px;width:max-content;padding:8px 0 12px;will-change:transform}
.reel-card{position:relative;display:block;flex:0 0 auto;width:400px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#15151E,#101017);border:1px solid var(--edge,#23232E);text-decoration:none;transition:transform .4s var(--ease,ease),border-color .4s,box-shadow .4s}
.reel-card:hover,.reel-card:focus-visible{transform:translateY(-6px);border-color:rgba(255,189,89,.45);box-shadow:0 18px 44px -18px rgba(255,120,77,.3)}
.reel-card:focus-visible{outline:2px solid var(--amber,#FFBD59);outline-offset:3px}
.reel-media{aspect-ratio:16/9.5;background:#101017}
.reel-media img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.reel-art{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(120% 90% at 84% -12%,rgba(255,102,196,.16),transparent 55%),radial-gradient(110% 90% at 6% 112%,rgba(255,189,89,.14),transparent 55%),#14141D}
.reel-art svg{width:88px;height:88px}
.reel-cap{display:flex;align-items:baseline;gap:12px;padding:13px 18px;border-top:1px solid var(--edge,#23232E)}
.reel-cap b{font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber,#FFBD59);white-space:nowrap}
.reel-cap span{font-family:var(--disp,'Poppins',sans-serif);font-weight:700;font-size:.98rem;color:var(--t-hi,#EDEDF3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* static fallback: no GSAP or reduced motion — native scroll with snap */
.reel--static .reel-mask{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding-bottom:8px;scrollbar-width:thin}
.reel--static .reel-track{padding-left:max(24px,calc((100vw - 1120px)/2));padding-right:24px}
.reel--static .reel-card{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.reel-card{transition:none}.reel-card:hover{transform:none}}
@media (max-width:768px){.reel-card{width:330px}}
@media (max-width:600px){.reel-card{width:280px}.reel-cap span{font-size:1rem}.reel-cap b{font-size:.7rem}}
@media (max-width:360px){.reel-card{width:246px}}
/* v3.9.1 · subtle build-version stamp in footer */
.foot-ver{margin-left:12px;color:rgba(255,255,255,.26);text-transform:none;letter-spacing:.06em}

/* ============================================================
   v3.8 · MOTION & DEPTH — hero orbit system, tilt cards,
   magnetic buttons, sky twinkle. All gated for reduced motion.
   ============================================================ */

/* ---- Hero orbit system: flat rings → 3D orbital scene ---- */
.hero-orbits{opacity:.62;transform:perspective(1100px) rotateX(var(--hx,0deg)) rotateY(var(--hy,0deg));transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hero-orbits i{inset:auto;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg)}
.hero-orbits i:nth-of-type(1){width:100%;height:100%;border:1.5px dashed rgba(255,255,255,.16);animation:orbSpin 30s linear infinite}
.hero-orbits i:nth-of-type(2){width:70%;height:70%;border:1.5px dashed rgba(255,189,89,.28);animation:orbSpin 46s linear infinite reverse}
.hero-orbits i:nth-of-type(3){width:44%;height:44%;border:1.5px dashed rgba(255,102,196,.24);animation:orbSpin 19s linear infinite}
.hero-orbits i::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:linear-gradient(110deg,#FFBD59,#FF784D);box-shadow:0 0 12px rgba(255,150,90,.85)}
.hero-orbits i:nth-of-type(2)::before{background:linear-gradient(110deg,#FFBD59,#FFDD9A);box-shadow:0 0 10px rgba(255,200,110,.8)}
.hero-orbits i:nth-of-type(3)::before{width:6px;height:6px;background:linear-gradient(110deg,#FF784D,#FF66C4);box-shadow:0 0 10px rgba(255,110,180,.8)}
.hero-orbits::after{content:"";position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFDD9A 0%,#FFBD59 34%,#FF784D 72%,rgba(255,102,196,.65) 100%);box-shadow:0 0 44px rgba(255,150,90,.5),0 0 110px rgba(255,120,140,.28);animation:orbPulse 5.5s ease-in-out infinite}
@keyframes orbSpin{from{transform:translate(-50%,-50%) rotateX(68deg) rotate(0deg)}to{transform:translate(-50%,-50%) rotateX(68deg) rotate(360deg)}}
@keyframes orbPulse{0%,100%{box-shadow:0 0 44px rgba(255,150,90,.5),0 0 110px rgba(255,120,140,.28)}50%{box-shadow:0 0 58px rgba(255,150,90,.68),0 0 140px rgba(255,120,140,.4)}}

/* ---- Sky: gentle star twinkle + container pointer-drift ---- */
.sky{transform:translate3d(var(--skx,0px),var(--sky,0px),0);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.stars-a{animation:twinkA 7s ease-in-out infinite}
.stars-b{animation:twinkB 11s ease-in-out infinite}
@keyframes twinkA{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes twinkB{0%,100%{opacity:.9}50%{opacity:.62}}

/* ---- 3D tilt cards (class applied by JS on fine pointers only) ---- */
.tiltable{position:relative}
[data-tilt]{transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--tl,0px)) scale(var(--sc,1)) !important;will-change:transform}
[data-tilt].tilt-ease{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.tilt-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(340px circle at var(--shx,50%) var(--shy,50%),rgba(255,255,255,.10),rgba(255,189,89,.05) 42%,transparent 68%);mix-blend-mode:screen;z-index:3}
[data-tilt] .tilt-sheen{opacity:1}

/* ---- Buttons: press feedback (touch + keyboard get this too) ---- */
.btn:active,.to-top:active{transform:scale(.96)}

/* ---- Reveal: subtle 3D rise (overrides base translate-only) ---- */
.reveal{transform:perspective(750px) translateY(24px) rotateX(5deg);transform-origin:50% 100%}

/* ---- Reduced motion: kill it all ---- */
@media (prefers-reduced-motion:reduce){
  .hero-orbits i:nth-of-type(n),.hero-orbits::after,.stars-a,.stars-b{animation:none}
  .hero-orbits,.sky{transition:none;transform:none}
  [data-tilt]{transform:none !important}
  .reveal{transform:translateY(26px)}
}

/* ---- v3.9.1 · mobile orbit composition (overrides the old display:none)
       + scroll-linked system rotation on all inputs ---- */
.hero-orbits{transform:perspective(1100px) rotateX(var(--hx,0deg)) rotateY(var(--hy,0deg)) rotate(var(--osp,0deg))}
@media(max-width:900px){
  .hero-orbits{display:block;right:-130px;top:-64px;width:440px;height:440px;margin-top:0;opacity:.58}
  .hero-orbits::after{width:52px;height:52px}
  .hero-orbits i::before{width:6px;height:6px;margin-left:-3px}
}
@media(max-width:480px){
  .hero-orbits{right:-150px;top:-78px;width:390px;height:390px}
}
@media (prefers-reduced-motion:reduce){
  .hero-orbits{transform:none}
}

/* ---- v3.9.1 · hero stability: flat paint order (kills satellite z-popping),
       glow pulse moved to transform/opacity, legacy ring-2 dot retired ---- */
.hero-orbits{transform-style:flat}
.hero-orbits i:nth-child(2)::after{content:none}
.hero-orbits::after{animation:none}
.hero-orbits::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,90,.32),rgba(255,120,140,.12) 55%,transparent 72%);animation:orbGlow 5.5s ease-in-out infinite;pointer-events:none;will-change:transform,opacity}
@keyframes orbGlow{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.14);opacity:1}}
@media(max-width:900px){.hero-orbits::before{width:112px;height:112px;margin:-56px 0 0 -56px}}
@media (prefers-reduced-motion:reduce){.hero-orbits::before{animation:none}}


/* ---- v4.1.0 — journal lede (dark prose template) ----
   Opening paragraph raised toward the heading treatment: larger, bolder, white. */
body[data-page="journal"] .prose > p:first-child{font:600 clamp(1.2rem,2vw,1.5rem)/1.55 Poppins,sans-serif;color:#fff;margin:0 0 34px}