:root {
  --bg: #0a0a0a; --bg-el: #111; --bg-card: #141414;
  --tp: #f0f0f0; --ts: #888; --tm: #555;
  --ac: #9B7FCD; --acb: #B49AE3; --acd: rgba(155,127,205,0.15);
  --acg: rgba(155,127,205,0.08); --acdp: #6B4F9E;
  --brd: rgba(255,255,255,0.08); --brdh: rgba(155,127,205,0.4);
  --fd: 'Clash Display','Syne',sans-serif;
  --fb: 'Plus Jakarta Sans',sans-serif;
  --fm: 'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#333 #0a0a0a}
body{font-family:var(--fb);background:var(--bg);color:var(--tp);overflow-x:hidden;-webkit-font-smoothing:antialiased}

.loader{position:fixed;inset:0;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
.loader.h{opacity:0;visibility:hidden;pointer-events:none}
.loader-i{width:46px;height:46px;border:2px solid rgba(155,127,205,.15);border-top-color:var(--ac);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(10,10,10,.95),rgba(10,10,10,.5) 80%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nl{display:flex;align-items:center;gap:12px}
.nl svg{height:28px}
.nw{font-family:var(--fd);font-weight:500;font-size:16px;letter-spacing:6px;text-transform:uppercase}
.nk{display:flex;gap:28px;align-items:center}
.nk a{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ts);text-decoration:none;transition:color .3s}
.nk a:hover{color:var(--acb)}
.nc{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff!important;background:var(--acdp);padding:9px 20px;border:1px solid var(--ac);cursor:pointer;text-decoration:none;transition:all .3s}
.nc:hover{background:var(--ac)}

/* HERO */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.2fr;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 62% 50%,var(--acg),transparent 60%),var(--bg);z-index:0}
.hero-ghost{position:absolute;top:50%;left:20%;transform:translate(-50%,-50%);width:280px;opacity:.02;z-index:1;animation:gs 60s linear infinite}
@keyframes gs{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hc{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 48px}
.hl{font-family:var(--fm);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--ac);margin-bottom:18px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1s forwards}
.hc h1{font-family:var(--fd);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:22px;opacity:0;transform:translateY(24px);animation:fu .8s ease 1.2s forwards}
.hc h1 em{font-style:normal;font-weight:600;background:linear-gradient(135deg,#fff 20%,var(--acb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs{font-size:15px;font-weight:300;color:var(--ts);max-width:400px;line-height:1.7;margin-bottom:32px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1.4s forwards}
.hcr{display:flex;gap:12px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1.6s forwards}
.hb1{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--acdp);border:1px solid var(--ac);padding:12px 26px;cursor:pointer;transition:all .3s;text-decoration:none}
.hb1:hover{background:var(--ac);box-shadow:0 4px 20px rgba(155,127,205,.3)}
.hb2{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ts);background:none;border:1px solid var(--brd);padding:12px 26px;cursor:pointer;transition:all .3s;text-decoration:none}
.hb2:hover{border-color:var(--ts);color:var(--tp)}

.hcol{position:relative;z-index:2;display:flex;align-items:center;padding:80px 40px 80px 0;opacity:0;animation:fi 1.2s ease 1s forwards}
.colw{position:relative;width:100%;height:72vh;min-height:400px}
.colm{width:100%;height:100%;background:linear-gradient(135deg,#1a1030,#2d1b55,#1a2a4a);border-radius:4px;position:relative;overflow:hidden}
.colm::after{content:'';position:absolute;inset:0;border:1px solid rgba(155,127,205,.08);border-radius:4px}
.colf{position:absolute;border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:transform .4s}
.colf:hover{transform:translateY(-6px) scale(1.03)!important}
.colf::after{content:'';position:absolute;inset:0;border:1px solid rgba(155,127,205,.1);border-radius:4px}
.cf1{width:46%;height:36%;bottom:-8%;left:-7%;background:linear-gradient(135deg,#251a40,#1a3545);transform:rotate(-2deg);z-index:3}
.cf2{width:38%;height:28%;top:6%;right:-5%;background:linear-gradient(135deg,#0f2847,#3d1e55);transform:rotate(1.5deg);z-index:3}
.cf3{width:30%;height:22%;bottom:14%;right:7%;background:linear-gradient(135deg,#1e1535,#1a3040);transform:rotate(-1deg);z-index:4}
.ctag{position:absolute;bottom:12px;left:12px;font-family:var(--fm);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(0,0,0,.6);padding:4px 10px;backdrop-filter:blur(8px);border-radius:2px;z-index:5}

/* LOGOS */
.logos{padding:44px 0;border-bottom:1px solid var(--brd);overflow:hidden}
.logos p{text-align:center;font-family:var(--fm);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--tm);margin-bottom:28px}
.ltk{display:flex;gap:72px;align-items:center;animation:ls 25s linear infinite;width:max-content}
.li{flex-shrink:0;opacity:.2;font-family:var(--fd);font-weight:500;font-size:17px;letter-spacing:3px;text-transform:uppercase;color:#fff;cursor:default;transition:opacity .4s}
.li:hover{opacity:.55}
@keyframes ls{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SHARED */
.sec{padding:100px 48px}
.sl{font-family:var(--fm);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.st{font-family:var(--fd);font-weight:400;font-size:clamp(28px,3.2vw,48px);letter-spacing:-.5px;line-height:1.1;margin-bottom:16px}
.st em{font-style:normal;font-weight:600;background:linear-gradient(135deg,#fff 20%,var(--acb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* SAND TEXT */
.sand .ch{display:inline-block;opacity:0;filter:blur(3px)}
.sand .ch.sp{width:.3em}
.sand.go .ch{animation:grain .7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes grain{
  0%{opacity:0;transform:translateY(calc(var(--dy))) translateX(calc(var(--dx))) rotate(var(--dr)) scale(.85);filter:blur(3px)}
  30%{opacity:.4;filter:blur(1.5px)}
  50%{opacity:.65;filter:blur(.8px)}
  70%{transform:translateY(-1px) translateX(0) rotate(0deg) scale(1.01);filter:blur(.3px)}
  85%{opacity:.9;transform:translateY(1px) scale(.995)}
  100%{opacity:1;transform:translateY(0) translateX(0) rotate(0deg) scale(1);filter:blur(0)}
}

/* WHAT WE CREATE - COMPACT 2x2 */
.wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:48px}
.wc-item{display:grid;grid-template-columns:1fr 1fr;min-height:280px;background:var(--bg-card);transition:background .3s;overflow:hidden}
.wc-item:nth-child(even) .wc-vis{order:-1}
.wc-vis{position:relative;overflow:hidden;cursor:pointer}
.wc-vis-in{width:100%;height:100%;min-height:200px;transition:transform .4s}
.wc-item:hover .wc-vis-in{transform:scale(1.04)}
.wc-vis:hover .wc-glow{opacity:1}
.wc-glow{position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(155,127,205,.12),transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);z-index:2}
.wv1{background:#1a1030 url('/__l5e/assets-v1/9d01938b-5c2b-47df-a191-54a83e81d775/haskell_jumper.png') center/cover no-repeat}
.wv2{background:#1a1030 url('/__l5e/assets-v1/acf56660-dec1-49e3-b368-36aeb7b55493/peacock_plates.png') center/cover no-repeat}
.wv3{background:#1a1030 url('/__l5e/assets-v1/9b4e6f24-4964-4d19-8993-6f9f3867b16e/drift_cars.jpg') center/cover no-repeat}
.wv4{background:#1a1030 url('/__l5e/assets-v1/d2ee92ae-7b21-4749-ab30-3748e7d3120c/ao_puppy.png') center/cover no-repeat}
.wv5{background:#1a1030;position:relative}
.wv5 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wv6{background:#1a1030 url('/__l5e/assets-v1/99ffc7d1-b629-42a9-856d-dba0cff57d29/data_visualisation.png') center/cover no-repeat}
.wc-info{display:flex;flex-direction:column;justify-content:center;padding:36px 32px}
.wc-info .wn{font-family:var(--fd);font-weight:300;font-size:48px;color:var(--ac);opacity:.07;line-height:1;margin-bottom:8px}
.wc-info h3{font-family:var(--fd);font-weight:500;font-size:22px;margin-bottom:10px}
.wc-info p{font-size:13px;font-weight:300;color:var(--ts);line-height:1.6;margin-bottom:14px}
.wc-pills{display:flex;gap:5px;flex-wrap:wrap}
.wc-pill{font-family:var(--fm);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--ac);border:1px solid var(--acd);padding:4px 10px;border-radius:16px;transition:all .3s}
.wc-pill:hover{background:var(--acd);border-color:var(--ac)}

/* PORTFOLIO */
.pf{padding:100px 48px}
.pfh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.pflt{display:flex;gap:4px}
.fb{font-family:var(--fm);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tm);background:none;border:1px solid transparent;padding:6px 12px;cursor:pointer;transition:all .3s}
.fb:hover{color:var(--tp);border-color:var(--brd)}
.fb.on{color:var(--ac);border-color:var(--ac)}
.pg{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:6px;perspective:1200px}
.pi{position:relative;overflow:hidden;background:var(--bg-card);cursor:pointer;transition:transform .15s,box-shadow .3s;transform-style:preserve-3d;will-change:transform}
.pi:hover .po{opacity:1}
.pi:hover .pig{opacity:1}
.pig{position:absolute;width:180px;height:180px;background:radial-gradient(circle,rgba(155,127,205,.15),transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);z-index:5}
.p1{grid-column:span 7;grid-row:span 2;background:linear-gradient(135deg,#1a1030,#1e1545,#0f2847)}
.p2{grid-column:span 5;grid-row:span 1;background:linear-gradient(135deg,#251a40,#1a3545)}
.p3{grid-column:span 5;grid-row:span 1;background:linear-gradient(135deg,#0f2847,#2a1845)}
.p4{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#1a1030,#3d1e55)}
.p5{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#16203e,#1a1030)}
.p6{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#1a2a45,#251a40)}
.po{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,15,.9),rgba(10,10,15,.3) 40%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity .4s;z-index:3}
.po h3{font-family:var(--fd);font-weight:500;font-size:18px;margin-bottom:3px}
.po span{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ac)}

/* CASE STUDIES - TINY CARDS */
.css{padding:0 48px 100px}
.csg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.csc{background:var(--bg-card);padding:24px;cursor:pointer;position:relative;overflow:hidden;transition:all .35s;border:1px solid transparent;border-radius:3px}
.csc::after{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--ac);transition:width .4s}
.csc:hover::after{width:100%}
.csc:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.35);border-color:var(--brdh);background:var(--bg-el)}
.csc-s{font-family:var(--fd);font-weight:600;font-size:28px;color:var(--ac);line-height:1}
.csc-sl{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tm);margin-bottom:14px;margin-top:2px}
.csc-n{font-family:var(--fd);font-weight:500;font-size:17px;margin-bottom:10px}
.csc-a{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;gap:6px;transition:gap .3s}
.csc:hover .csc-a{gap:12px}

/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(14px);z-index:9000;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;display:flex;align-items:center;justify-content:center}
.mo.open{opacity:1;visibility:visible}
.mm{background:var(--bg-el);width:88vw;max-width:860px;max-height:82vh;overflow-y:auto;border:1px solid var(--brd);border-radius:4px;transform:translateY(24px) scale(.97);transition:transform .4s;scrollbar-width:thin;scrollbar-color:#333 var(--bg-el)}
.mo.open .mm{transform:translateY(0) scale(1)}
.mx{position:absolute;top:16px;right:20px;font-size:26px;color:var(--tm);cursor:pointer;z-index:10;background:none;border:none;transition:color .3s}
.mx:hover{color:var(--tp)}
.mh{width:100%;height:260px;position:relative}
.mhi{width:100%;height:100%}
.mhg{position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,var(--bg-el),transparent)}
.mb{padding:32px 40px 40px}
.mb .mc{font-family:var(--fd);font-weight:600;font-size:32px;margin-bottom:6px}
.mb .mt{font-family:var(--fm);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--ac);margin-bottom:28px}
.mss{display:flex;gap:40px;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--brd)}
.msi .mv{font-family:var(--fd);font-weight:500;font-size:28px;color:var(--ac)}
.msi .ml{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tm)}
.mcc{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.mcc h5{font-family:var(--fm);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--ac);margin-bottom:10px}
.mcc p{font-size:13px;color:var(--ts);font-weight:300;line-height:1.7}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:28px}
.mgi{height:140px;border-radius:3px}
.md{margin-top:28px}
.md .mp{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mpl{font-family:var(--fm);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--ts);border:1px solid var(--brd);padding:4px 10px;border-radius:16px}

/* STATS */
.sbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.si{padding:48px 40px;border-right:1px solid var(--brd);text-align:center}
.si:last-child{border-right:none}
.sn{font-family:var(--fd);font-weight:500;font-size:46px;letter-spacing:-2px;margin-bottom:4px;background:linear-gradient(135deg,#fff 20%,var(--acb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.slb{font-family:var(--fm);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--tm)}

/* SERVICES - COMPACT STRIP */
.svs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px}
.sv{background:var(--bg-card);padding:32px 28px;position:relative;overflow:hidden;cursor:pointer;transition:all .35s}
.sv:hover{background:var(--bg-el);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.2)}
.sv::before{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--ac);transition:width .5s}
.sv:hover::before{width:100%}
.sv-n{font-family:var(--fm);font-size:9px;color:var(--ac);letter-spacing:2px;margin-bottom:16px;opacity:.4;transition:all .3s}
.sv:hover .sv-n{opacity:1}
.sv h3{font-family:var(--fd);font-weight:500;font-size:18px;margin-bottom:8px}
.sv p{font-size:12px;color:var(--ts);font-weight:300;line-height:1.6}
.sv-pills{display:flex;flex-wrap:wrap;gap:4px;max-height:0;overflow:hidden;opacity:0;transition:all .35s;margin-top:0}
.sv:hover .sv-pills{max-height:60px;opacity:1;margin-top:12px}
.sv-pl{font-family:var(--fm);font-size:7px;letter-spacing:1px;text-transform:uppercase;color:var(--ac);border:1px solid var(--acd);padding:3px 8px;border-radius:12px}

/* PROCESS */
.pnav{display:flex;border-bottom:1px solid var(--brd);margin-top:48px}
.ptab{flex:1;padding:18px 20px;cursor:pointer;font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tm);background:none;border:none;border-bottom:2px solid transparent;transition:all .4s}
.ptab:hover{color:var(--ts)}
.ptab.on{color:var(--ac);border-bottom-color:var(--ac);background:linear-gradient(to bottom,var(--acg),transparent)}
.ptab .tn{display:block;font-family:var(--fd);font-weight:300;font-size:34px;color:rgba(255,255,255,.03);margin-bottom:4px;transition:all .4s;line-height:1}
.ptab.on .tn{color:var(--ac);opacity:.12}
.ptab .tt{display:block;font-family:var(--fd);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;margin-top:3px;transition:color .4s}
.ptab.on .tt{color:var(--tp)}
.ppnl{padding:36px 28px;background:var(--bg-card);border:1px solid var(--brd);border-top:none;display:none;animation:pi .4s ease}
.ppnl.on{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.ppnl .pt h4{font-family:var(--fd);font-weight:500;font-size:24px;margin-bottom:12px}
.ppnl .pt p{font-size:13px;color:var(--ts);font-weight:300;line-height:1.7}
.pd{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-el);border-left:2px solid var(--brd);transition:all .3s}
.pd:hover{border-left-color:var(--ac);background:rgba(155,127,205,.04)}
.pd .di{width:30px;height:30px;border:1px solid var(--acd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:10px;color:var(--ac);flex-shrink:0;transition:all .3s}
.pd:hover .di{background:var(--acd)}
.pd .dt{font-size:12px;color:var(--ts);font-weight:300}
.ppnl .pv{display:flex;flex-direction:column;gap:8px}
@keyframes pi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* CTA */
.cta{padding:120px 48px;text-align:center;position:relative}
.cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,var(--acg),transparent 60%);border-radius:50%}
.cta h2{font-family:var(--fd);font-weight:400;font-size:clamp(32px,4.5vw,56px);letter-spacing:-.5px;margin-bottom:18px;position:relative}
.cta p{font-size:14px;color:var(--ts);font-weight:300;margin-bottom:36px;position:relative}
.ctab{font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--acdp);border:1px solid var(--ac);padding:15px 40px;cursor:pointer;transition:all .3s;position:relative}
.ctab:hover{background:var(--ac);transform:translateY(-2px);box-shadow:0 8px 36px rgba(155,127,205,.25)}

footer{padding:36px 48px;border-top:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center}
.fl{font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--tm)}
.fr{display:flex;gap:24px}
.fr a{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tm);text-decoration:none;transition:color .3s}
.fr a:hover{color:var(--ac)}

@keyframes fu{to{opacity:1;transform:translateY(0)}}
@keyframes fi{to{opacity:1}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.rv.v{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}.hc{padding:120px 24px 30px}.hcol{padding:0 24px 50px}.hero-ghost{display:none}
  .wc-grid{grid-template-columns:1fr}.wc-item{grid-template-columns:1fr}.wc-item:nth-child(even) .wc-vis{order:0}.wc-vis-in{min-height:220px}.wc-info{padding:28px 20px}
  .csg{grid-template-columns:1fr}.mcc{grid-template-columns:1fr}.mg{grid-template-columns:1fr}
}
@media(max-width:768px){
  nav{padding:12px 20px}.nk{display:none}
  .sec,.pf,.css{padding:60px 20px}
  .pg{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;perspective:none}
  .p1,.p2,.p3,.p4,.p5,.p6{grid-column:span 1;grid-row:span 1}.p1{grid-column:span 2}
  .svs{grid-template-columns:1fr}
  .pnav{flex-direction:column}.ppnl.on{grid-template-columns:1fr}
  .sbar{grid-template-columns:repeat(2,1fr)}.si:nth-child(2){border-right:none}
  .pfh{flex-direction:column;align-items:flex-start;gap:16px}
  .mb{padding:24px 20px 32px}.mss{flex-direction:column;gap:16px}
}

/* HERO COLLAGE V2 OVERRIDES */
.hero{height:100vh;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 58% 50%,var(--acg),transparent 55%),var(--bg);z-index:0}
.hero .hc{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 48px}
.hero .hl{font-family:var(--fm);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--ac);margin-bottom:18px;opacity:0;transform:translateY(16px);animation:fu .8s ease .6s forwards}
.hero .hc h1{font-family:var(--fd);font-weight:500;font-size:clamp(36px,4.5vw,64px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:20px;opacity:0;transform:translateY(24px);animation:fu .8s ease .8s forwards}
.hero .hc h1 em{font-style:normal;font-weight:600;background:linear-gradient(135deg,#fff 20%,var(--acb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .hs{font-size:14px;font-weight:300;color:var(--ts);max-width:380px;line-height:1.7;margin-bottom:28px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1s forwards}
.hero .hcr{display:flex;gap:12px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1.2s forwards}
.hero .hb1{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--acdp);border:1px solid var(--ac);padding:11px 24px;cursor:pointer;transition:all .3s;text-decoration:none}
.hero .hb1:hover{background:var(--ac);box-shadow:0 4px 20px rgba(155,127,205,.3)}
.hero .hb2{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ts);background:none;border:1px solid var(--brd);padding:11px 24px;cursor:pointer;transition:all .3s;text-decoration:none}
.hero .hb2:hover{border-color:var(--ts);color:var(--tp)}
.col-area{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:80px 32px 80px 0;cursor:none;opacity:0;animation:fi 1s ease .8s forwards}
.col-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;width:100%;max-width:520px;height:min(65vh,520px)}
.col-cell{position:relative;overflow:hidden;border-radius:3px;transition:transform .2s,box-shadow .3s;transform-style:preserve-3d}
.col-cell::after{content:'';position:absolute;inset:0;border:1px solid rgba(155,127,205,.06);border-radius:3px;pointer-events:none;transition:border-color .3s}
.col-cell:hover::after{border-color:rgba(155,127,205,.15)}
.cc0{grid-column:span 2;background:linear-gradient(135deg,#1a1030,#2d1b55,#1a2a4a)}
.cc1{background:linear-gradient(135deg,#251a40,#1a3545)}
.cc2{background:linear-gradient(135deg,#0f2847,#3d1e55)}
.cc3{grid-column:span 2;background:linear-gradient(135deg,#1e1535,#0f3060,#1a3040)}
.col-area .ctag{position:absolute;bottom:10px;left:10px;font-family:var(--fm);font-size:7px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);padding:3px 9px;backdrop-filter:blur(6px);border-radius:2px;z-index:6;opacity:0;transition:opacity .3s}
.col-glow{position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(155,127,205,.12) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);z-index:5}
.logo-cursor{position:fixed;z-index:9999;pointer-events:none;width:52px;height:52px;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;animation:curBreathe 3s ease-in-out infinite}
.logo-cursor.active{opacity:1}
.logo-cursor img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes curBreathe{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}50%{transform:translate(-50%,-50%) scale(1.1) rotate(2.5deg)}}
.cursor-glow{position:fixed;z-index:9997;pointer-events:none;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(155,127,205,.1) 0%,transparent 70%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor-glow.active{opacity:1}
.cursor-ring{position:fixed;z-index:9996;pointer-events:none;width:80px;height:80px;border-radius:50%;border:1px solid rgba(155,127,205,.08);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
.cursor-ring.active{opacity:1}
@media(max-width:900px){.hero{height:auto;min-height:100vh;grid-template-columns:1fr}.hero .hc{padding:120px 24px 28px}.col-area{padding:0 24px 52px;cursor:auto}.col-grid{max-width:none;height:52vh;min-height:360px}.logo-cursor,.cursor-glow,.cursor-ring{display:none}}
@media(max-width:520px){.col-grid{height:430px;min-height:430px}.hero .hcr{flex-direction:column;align-items:flex-start}}
/* END HERO COLLAGE V2 OVERRIDES */


/* V4 POLISH OVERRIDES */
nav{padding:22px 56px;background:linear-gradient(180deg,rgba(5,5,8,.78),rgba(5,5,8,.42) 72%,rgba(5,5,8,0));backdrop-filter:blur(16px)}
.nk{gap:24px}
.nk a{color:rgba(255,255,255,.84);font-size:11px;letter-spacing:1.6px;font-weight:600;text-shadow:0 0 22px rgba(0,0,0,.55)}
.nk a:hover{color:#fff}
.nk .nc{padding:13px 18px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.loader{background:radial-gradient(circle at center,rgba(35,24,70,.55),transparent 42%),#070709}
.loader-i{width:120px;height:120px;border:none;background:none;position:relative}
.loader-mark{position:absolute;inset:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.12),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 18px 60px rgba(0,0,0,.45)}
.loader-mark svg{width:34px;height:38px;opacity:.95}
.loader-orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.72);border-right-color:rgba(138,92,255,.55);animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{padding:146px 56px 72px;min-height:100svh;grid-template-columns:minmax(0,1.1fr) minmax(520px,.9fr);gap:46px;align-items:center}
.hero .hc{max-width:700px;padding-right:8px}
.hero .hl{margin-bottom:18px;font-size:11px;letter-spacing:2.6px;color:rgba(255,255,255,.78)}
.hero h1{font-size:clamp(56px,7vw,92px);line-height:.93;letter-spacing:-3px;margin-bottom:24px;max-width:9.2ch;text-wrap:balance}
.hero h1 em{display:inline-block;background:linear-gradient(135deg,#fff 0%,#8c7bd9 55%,#6fd3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .hs{font-size:17px;line-height:1.7;color:rgba(255,255,255,.74);max-width:610px;margin-bottom:30px}
.hero .hcr{gap:14px}
.hero .hb1,.hero .hb2{min-height:54px;padding:0 22px}
.col-area{padding-left:0}
.col-grid{height:min(76vh,820px);min-height:620px;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr);gap:12px;position:relative;filter:drop-shadow(0 30px 70px rgba(0,0,0,.32))}
.col-grid::before{content:'';position:absolute;inset:-24px;background:radial-gradient(circle at 20% 20%,rgba(102,77,174,.18),transparent 30%),radial-gradient(circle at 80% 70%,rgba(67,149,211,.14),transparent 26%);pointer-events:none}
.col-cell{border-radius:22px;border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.col-cell::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.26));pointer-events:none}
.col-cell:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 24px 60px rgba(0,0,0,.34);border-color:rgba(255,255,255,.18)}
.cc0{grid-column:1 / span 3;grid-row:1 / span 3}
.cc1{grid-column:4 / span 3;grid-row:1 / span 3}
.cc2{grid-column:1 / span 3;grid-row:4 / span 3}
.cc3{grid-column:4 / span 3;grid-row:4 / span 3}
.cc4{grid-column:1 / span 2;grid-row:7 / span 2}
.cc5{grid-column:3 / span 4;grid-row:7 / span 2}
.ctag{opacity:1;bottom:16px;left:16px;padding:8px 12px;background:rgba(10,10,12,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.92)}
.hero-badge{position:absolute;top:-10px;left:18px;z-index:3;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero-mark-float{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.3);animation:markPulse 4s ease-in-out infinite;z-index:4}
.hero-mark-float svg{width:34px;height:38px;opacity:.94}
@keyframes markPulse{0%,100%{transform:translateY(-50%) rotate(0deg)}50%{transform:translateY(-54%) rotate(8deg)}}
.hero-orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.hero-orbit-a{width:170px;height:170px;top:-28px;right:84px;animation:spin 18s linear infinite}
.hero-orbit-b{width:120px;height:120px;bottom:28px;left:-28px;animation:spin 14s linear infinite reverse}
.logos{padding-top:18px}
.pg{grid-template-columns:repeat(12,1fr);grid-auto-rows:72px;gap:10px}
.p1,.p2,.p3{grid-column:span 4;grid-row:span 4}
.p4{grid-column:span 6;grid-row:span 4}
.p5,.p6{grid-column:span 3;grid-row:span 3}
.sect-stamp{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px auto 0;max-width:1180px;padding:0 22px}
.sect-stamp-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.sect-stamp-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.82);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.1),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.sect-stamp-mark img{width:24px;height:24px;object-fit:contain;opacity:.9}
.scroll-med{position:fixed;right:24px;bottom:24px;width:72px;height:72px;border-radius:50%;border:none;background:rgba(9,9,12,.78);backdrop-filter:blur(14px);display:grid;place-items:center;z-index:2500;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08) inset}
.scroll-med-ring{position:absolute;inset:0;width:72px;height:72px;transform:rotate(-90deg)}
.scroll-med-track,.scroll-med-progress{fill:none;stroke-width:4}
.scroll-med-track{stroke:rgba(255,255,255,.09)}
.scroll-med-progress{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .2s ease}
.scroll-med-core{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(255,255,255,.04));animation:spin 10s linear infinite reverse}
.scroll-med-core svg{width:18px;height:20px}
.case-splash{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,5,8,.7);backdrop-filter:blur(14px);z-index:9200;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.case-splash.show{opacity:1;visibility:visible}
.case-splash-inner{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.case-splash-mark{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.15),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.case-splash-mark::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-top-color:#fff;border-right-color:rgba(138,92,255,.5);animation:spin 1.1s linear infinite}
.case-splash-mark svg{width:26px;height:30px;position:relative;z-index:1}
@media(max-width:1100px){.hero{grid-template-columns:1fr;padding:132px 32px 60px}.hero .hc{max-width:unset}.col-grid{min-height:560px;height:620px}.hero-mark-float{right:0}}
@media(max-width:760px){nav{padding:18px 20px}.nk{gap:12px;flex-wrap:wrap;justify-content:flex-end}.nk a{font-size:10px}.hero{padding:120px 20px 48px;gap:28px}.hero h1{font-size:clamp(42px,14vw,68px);letter-spacing:-2px}.hero .hs{font-size:15px}.col-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(10,1fr);gap:8px;min-height:500px;height:500px}.cc0{grid-column:1 / span 2;grid-row:1 / span 3}.cc1{grid-column:3 / span 2;grid-row:1 / span 3}.cc2{grid-column:1 / span 2;grid-row:4 / span 3}.cc3{grid-column:3 / span 2;grid-row:4 / span 3}.cc4{grid-column:1 / span 2;grid-row:7 / span 2}.cc5{grid-column:3 / span 2;grid-row:7 / span 2}.hero-mark-float{width:68px;height:68px;top:auto;bottom:-12px;right:6px;transform:none}.hero-mark-float svg{width:26px;height:30px}.hero-badge{top:auto;bottom:-16px;left:6px;font-size:9px}.pg{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.p1,.p2,.p3,.p4,.p5,.p6{grid-column:span 1;grid-row:span 2}.scroll-med{width:62px;height:62px;right:16px;bottom:16px}.scroll-med-ring{width:62px;height:62px}}
/* END V4 POLISH OVERRIDES */


/* V5 CREATIVE MAGNETIC UPDATE */
.nav-logo-lockup{display:block;width:360px;max-width:34vw;height:auto;filter:drop-shadow(0 0 12px rgba(255,255,255,.06))}
.nw,.nl svg{display:none}
nav{padding:18px 50px;background:linear-gradient(180deg,rgba(0,0,0,.76),rgba(0,0,0,.28) 80%,transparent)}
.loader{background:radial-gradient(circle at center,rgba(155,127,205,.2),transparent 38%),#050505}
.loader-i{width:min(420px,70vw);height:120px;border:0;background:transparent;position:relative;display:grid;place-items:center;animation:none}
.loader-lockup{position:relative;z-index:3;width:min(340px,64vw);height:auto;filter:drop-shadow(0 0 24px rgba(255,255,255,.12));animation:loaderLock 2.2s ease-in-out infinite}
.loader-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(155,127,205,.2),transparent 62%);filter:blur(18px)}
.loader-orbit{position:absolute;width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.16);border-top-color:#fff;left:50%;top:50%;transform:translate(-50%,-50%);animation:spin 1.8s linear infinite}
@keyframes loaderLock{0%,100%{opacity:.86;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.hero{min-height:88svh;padding:124px 56px 52px;grid-template-columns:minmax(460px,.95fr) minmax(560px,1.05fr);gap:30px;align-items:center}
.hero .hc{max-width:760px}
.hero .hl{font-size:12px;color:rgba(255,255,255,.8);letter-spacing:2.8px}
.hero h1{font-size:clamp(60px,7.7vw,106px);line-height:.88;max-width:8.8ch;letter-spacing:-4px;margin-bottom:26px}
.hero .hs{font-size:18px;max-width:660px;color:rgba(255,255,255,.76)}
.hero .hb1,.hero .hb2{min-height:56px;display:inline-flex;align-items:center}
.col-area{position:relative;min-height:620px;height:70vh;max-height:720px;display:block;padding:0;cursor:auto}
.col-grid{position:absolute;inset:4% 0 0 2%;height:auto;min-height:0;filter:none;display:block}
.col-grid::before{content:'';position:absolute;inset:10% 6%;background:radial-gradient(circle at 50% 44%,rgba(155,127,205,.22),transparent 50%),radial-gradient(circle at 80% 65%,rgba(59,177,255,.12),transparent 28%);filter:blur(34px)}
.col-cell{position:absolute;border-radius:24px;border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.34);will-change:transform;transition:box-shadow .25s,border-color .25s;animation:tilePop .9s cubic-bezier(.22,1,.36,1) both}
.col-cell:hover{box-shadow:0 34px 100px rgba(0,0,0,.45),0 0 40px rgba(155,127,205,.1);border-color:rgba(255,255,255,.22)}
.col-cell::before{content:'';position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 50%,transparent 66%);transform:translateX(-85%) rotate(8deg);animation:tileSweep 9s ease-in-out infinite}
.col-cell::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.28));pointer-events:none}
.cc0{width:34%;aspect-ratio:1/1;left:23%;top:16%;z-index:4;background:linear-gradient(135deg,#201136,#5f3caf 45%,#123d65)}
.cc1{width:24%;aspect-ratio:1/1;left:0;top:3%;z-index:2;background:linear-gradient(135deg,#0e2c4e,#31205e)}
.cc2{width:27%;aspect-ratio:1/1;right:8%;top:6%;z-index:3;background:linear-gradient(135deg,#3a1b58,#141834,#3976a9)}
.cc3{width:24%;aspect-ratio:4/5;left:8%;bottom:9%;z-index:5;background:linear-gradient(135deg,#1d1435,#0e5570)}
.cc4{width:18%;aspect-ratio:9/16;right:0;bottom:6%;z-index:5;background:linear-gradient(135deg,#0c1c38,#6b4f9e)}
.cc5{width:41%;aspect-ratio:16/7;right:18%;bottom:0;z-index:1;background:linear-gradient(135deg,#30164b,#14395f,#192034)}
.ctag{opacity:1;font-size:8px;color:rgba(255,255,255,.92);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.11)}
.hero-badge{top:3%;left:48%;background:rgba(255,255,255,.1);z-index:7}
.hero-logo-chip{position:absolute;right:8%;top:47%;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,14,.72);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.38);z-index:8;pointer-events:none;animation:chipFloat 5s ease-in-out infinite}
.hero-logo-chip img{width:48px;height:48px;object-fit:contain}
.hero-mark-float,.hero-orbit,.hero-orbit-a,.hero-orbit-b{display:none}
@keyframes tilePop{from{opacity:0;transform:translateY(24px) scale(.94) rotate(-1deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes tileSweep{0%,30%{transform:translateX(-90%) rotate(8deg)}45%,100%{transform:translateX(115%) rotate(8deg)}}
@keyframes chipFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(6deg)}}
.logo-trail-layer{position:fixed;inset:0;pointer-events:none;z-index:2400;overflow:hidden}
.logo-trail{position:fixed;width:34px;height:34px;transform:translate(-50%,-50%) scale(.82);opacity:.22;animation:trailFade .7s ease-out forwards;filter:drop-shadow(0 0 12px rgba(155,127,205,.28));mix-blend-mode:screen}
.logo-trail img{width:100%;height:100%;object-fit:contain}
@keyframes trailFade{to{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(18deg)}}
.scroll-med-core img,.case-splash-mark img{width:70%;height:70%;object-fit:contain;mix-blend-mode:screen}
.case-splash-mark img{width:44px;height:44px}
.pg{grid-template-columns:repeat(12,1fr);grid-auto-rows:72px;gap:12px;transition:opacity .28s ease,filter .28s ease,transform .35s ease}
.pg.switching{opacity:.2;filter:blur(6px);transform:scale(.985)}
.pi{border-radius:18px;border:1px solid rgba(255,255,255,.08)}
.pi.hide{display:none}
.pi.showing{animation:galleryIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes galleryIn{from{opacity:0;transform:translateY(24px) rotate(.7deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3{grid-column:span 4;grid-row:span 4}
.pg.layout-all .p4{grid-column:span 4;grid-row:span 4}
.pg.layout-all .p5,.pg.layout-all .p6{grid-column:span 4;grid-row:span 3}
.pg.layout-all .p7{grid-column:span 2;grid-row:span 4}
.pg.layout-all .p8{grid-column:span 6;grid-row:span 2}
.pg.layout-product .p1{grid-column:span 3;grid-row:span 3}
.pg.layout-product .p2{grid-column:span 4;grid-row:span 4}
.pg.layout-product .p3{grid-column:span 3;grid-row:span 3}
.pg.layout-product .p5{grid-column:span 4;grid-row:span 4}
.pg.layout-product .p8{grid-column:span 6;grid-row:span 2}
.pg.layout-lifestyle .p1{grid-column:span 4;grid-row:span 4}
.pg.layout-lifestyle .p3{grid-column:span 4;grid-row:span 4}
.pg.layout-lifestyle .p4{grid-column:span 4;grid-row:span 4}
.pg.layout-lifestyle .p7{grid-column:span 3;grid-row:span 5}
.pg.layout-campaign .p1{grid-column:span 4;grid-row:span 4}
.pg.layout-campaign .p3{grid-column:span 4;grid-row:span 4}
.pg.layout-campaign .p4{grid-column:span 4;grid-row:span 4}
.pg.layout-campaign .p6{grid-column:span 3;grid-row:span 4}
.pg.layout-campaign .p8{grid-column:span 6;grid-row:span 2}
.pg.layout-motion .p6{grid-column:span 4;grid-row:span 4}
.pg.layout-motion .p7{grid-column:span 3;grid-row:span 5}
.pg.layout-motion .p1{grid-column:span 4;grid-row:span 4}
@media(max-width:1120px){.hero{grid-template-columns:1fr;min-height:auto;padding-bottom:80px}.col-area{height:620px;max-height:none}.nav-logo-lockup{width:300px;max-width:48vw}}
@media(max-width:760px){nav{padding:16px 18px}.nav-logo-lockup{width:220px;max-width:60vw}.nk{display:none}.hero{padding:108px 20px 54px}.hero h1{font-size:clamp(46px,15vw,72px)}.col-area{height:520px;min-height:520px}.cc0{width:48%;left:20%;top:15%}.cc1{width:32%;left:0;top:4%}.cc2{width:34%;right:0;top:6%}.cc3{width:36%;left:2%;bottom:12%}.cc4{width:26%;right:3%;bottom:10%}.cc5{width:58%;right:16%;bottom:0}.hero-logo-chip{width:68px;height:68px;right:8%;top:50%}.hero-logo-chip img{width:38px;height:38px}.pg{grid-template-columns:repeat(2,1fr);grid-auto-rows:138px}.pg[class*="layout-"] .pi{grid-column:span 1;grid-row:span 2}.pg[class*="layout-"] .p8{grid-column:span 2;grid-row:span 1}}
/* END V5 CREATIVE MAGNETIC UPDATE */


/* ==== MIRAZZLE V6 REFINEMENTS ==== */
.hero{grid-template-columns:minmax(0,1fr) minmax(430px,580px);align-items:center;gap:18px}
.hc{padding:0 56px 0 48px}
.hs{max-width:560px;margin-bottom:18px}
.hero-inline-mark{display:flex;align-items:center;gap:18px;margin:0 0 30px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1.5s forwards}
.hero-inline-mark-shell{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(155,127,205,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 46px rgba(0,0,0,.28);overflow:hidden;backdrop-filter:blur(14px)}
.hero-inline-mark-shell::before{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 48%,transparent 70%);transform:translateX(-115%) rotate(8deg);animation:logoSweep 5.8s ease-in-out infinite}
.hero-inline-mark-shell::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.hero-inline-mark img{position:relative;z-index:1;width:232px;max-width:44vw;display:block;filter:drop-shadow(0 0 22px rgba(155,127,205,.18))}
.hero-inline-copy{font-family:var(--fm);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.68);white-space:nowrap}
@keyframes logoSweep{0%,18%{transform:translateX(-115%) rotate(8deg)}35%,100%{transform:translateX(135%) rotate(8deg)}}

.col-area{padding:78px 40px 78px 0;cursor:default!important}
.col-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:14px;width:min(100%,560px);max-width:560px;height:auto!important;aspect-ratio:2/3}
.col-cell{min-height:0;border-radius:16px;box-shadow:0 20px 44px rgba(0,0,0,.35);overflow:hidden;position:relative;background-size:cover;background-position:center}
.col-cell::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%,rgba(8,8,12,.22) 100%);pointer-events:none}
.col-cell::after{border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important}
.col-cell:hover{box-shadow:0 28px 56px rgba(0,0,0,.46)}
.cc0{background:linear-gradient(135deg,#27174a 0%,#6f3fb2 55%,#1b2c48 100%)}
.cc1{background:linear-gradient(135deg,#201434 0%,#223c67 55%,#8c5fd2 100%)}
.cc2{background:linear-gradient(135deg,#0f2847 0%,#5c2a79 52%,#24153d 100%)}
.cc3{background:linear-gradient(135deg,#271941 0%,#7c49b9 45%,#0f2f60 100%)}
.cc4{background:linear-gradient(135deg,#1f3159 0%,#294a76 35%,#8b55d0 100%)}
.cc5{background:linear-gradient(135deg,#1a1030 0%,#4d2a78 52%,#265a7a 100%)}
.col-area .ctag{left:14px;bottom:14px;padding:7px 11px;border-radius:999px;font-size:8px;letter-spacing:1.8px;color:rgba(255,255,255,.85);background:rgba(8,10,16,.5);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);opacity:1!important}
.col-glow{width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,rgba(155,127,205,.18) 26%,transparent 72%)}
.hero-badge{top:14px;left:14px;padding:10px 14px;border-radius:999px;background:rgba(10,12,18,.45);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.hero-logo-chip{display:none!important}

.pfh{align-items:end;gap:18px}
.pflt{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.fb{padding:8px 14px;border-radius:999px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.fb.on{background:rgba(155,127,205,.1)}
.pg{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto!important;gap:14px}
.pi{aspect-ratio:1 / 1;min-height:0;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.26);transform-style:preserve-3d;overflow:hidden}
.pi::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 36%);pointer-events:none;z-index:1}
.pi:hover{box-shadow:0 26px 48px rgba(0,0,0,.34)}
.pig{z-index:4}
.po{opacity:1!important;background:linear-gradient(to top,rgba(8,10,15,.92),rgba(8,10,15,.58) 42%,rgba(8,10,15,.08) 72%,transparent 100%);padding:22px}
.po h3{font-size:20px;margin-bottom:6px}
.po span{font-size:9px;letter-spacing:1.8px;color:rgba(255,255,255,.68)}
.pg.switching{opacity:.35;filter:blur(4px);transform:scale(.992)}

.pg.layout-all .p1,.pg.layout-all .p4,.pg.layout-all .p8,
.pg.layout-product .p2,.pg.layout-product .p5,
.pg.layout-lifestyle .p1,.pg.layout-lifestyle .p4,
.pg.layout-campaign .p3,.pg.layout-campaign .p6,
.pg.layout-motion .p6,.pg.layout-motion .p7{grid-column:span 2;aspect-ratio:2 / 1.08}
.pg.layout-all .pi,.pg.layout-product .pi,.pg.layout-lifestyle .pi,.pg.layout-campaign .pi,.pg.layout-motion .pi{grid-row:auto!important}
.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p5,.pg.layout-all .p6,.pg.layout-all .p7,
.pg.layout-product .p1,.pg.layout-product .p3,.pg.layout-product .p4,.pg.layout-product .p6,.pg.layout-product .p7,.pg.layout-product .p8,
.pg.layout-lifestyle .p2,.pg.layout-lifestyle .p3,.pg.layout-lifestyle .p5,.pg.layout-lifestyle .p6,.pg.layout-lifestyle .p7,.pg.layout-lifestyle .p8,
.pg.layout-campaign .p1,.pg.layout-campaign .p2,.pg.layout-campaign .p4,.pg.layout-campaign .p5,.pg.layout-campaign .p7,.pg.layout-campaign .p8,
.pg.layout-motion .p1,.pg.layout-motion .p2,.pg.layout-motion .p3,.pg.layout-motion .p4,.pg.layout-motion .p5,.pg.layout-motion .p8{grid-column:span 1;aspect-ratio:1 / 1}

@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:112px}
  .hc{padding:0 24px}
  .col-area{padding:0 24px 28px;justify-content:flex-start}
  .col-grid{width:min(100%,520px)}
}
@media (max-width:760px){
  .hero-inline-mark{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-inline-mark img{width:min(300px,74vw);max-width:74vw}
  .hero-inline-copy{white-space:normal;line-height:1.5}
  .col-area{padding:0 20px 24px}
  .col-grid{gap:10px;width:100%;max-width:none}
  .pg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pg[class*="layout-"] .pi{grid-column:span 1!important;aspect-ratio:1 / 1!important}
  .pg[class*="layout-"] .p1,.pg[class*="layout-"] .p8{grid-column:span 2!important;aspect-ratio:2 / 1.08!important}
}




/* ==== MIRAZZLE V7 CLEAN GRID REFINEMENT ==== */
.hero-inline-mark{margin:4px 0 34px !important}
.hero-inline-mark-shell{
  padding:16px 22px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,rgba(120,85,210,.20),rgba(33,46,88,.18),rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.03) inset !important;
  animation:v7LockFloat 6s ease-in-out infinite;
}
.hero-inline-mark-shell::before{opacity:.95 !important}
.hero-inline-mark img{
  width:250px !important;
  max-width:min(50vw,250px) !important;
  filter:drop-shadow(0 0 26px rgba(145,112,230,.22)) !important;
}
.hero-inline-copy{color:rgba(255,255,255,.82) !important}
@keyframes v7LockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.hero-logo-chip,
.hero-badge,
.hero-mark-float,
.scroll-med,
.logo-trail-layer .hero-only,
.col-area .ctag{display:none !important}

.col-area{
  padding:72px 40px 72px 0 !important;
}
.col-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  width:min(100%,560px) !important;
  max-width:560px !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  gap:18px !important;
}
.col-grid .cc4,
.col-grid .cc5{display:none !important}
.col-grid .cc0,
.col-grid .cc1,
.col-grid .cc2,
.col-grid .cc3{
  grid-column:auto !important;
  grid-row:auto !important;
}
.col-cell{
  border-radius:22px !important;
  box-shadow:0 24px 54px rgba(0,0,0,.34) !important;
  background-size:cover !important;
  background-position:center !important;
}
.col-cell::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 34%,rgba(10,10,18,.16) 100%);
}
.col-cell::after{
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:22px !important;
}
.col-cell:hover{box-shadow:0 30px 64px rgba(0,0,0,.42) !important}
.cc0{background:linear-gradient(135deg,#251747 0%,#5a34a7 52%,#17365a 100%) !important}
.cc1{background:linear-gradient(135deg,#1e294a 0%,#5f48b6 52%,#23375f 100%) !important}
.cc2{background:linear-gradient(135deg,#27153f 0%,#213d67 48%,#7b4cc4 100%) !important}
.cc3{background:linear-gradient(135deg,#132744 0%,#4f2c77 55%,#232043 100%) !important}
.col-glow{
  width:260px !important;
  height:260px !important;
  background:radial-gradient(circle,rgba(162,121,255,.18) 0%,rgba(90,141,255,.10) 28%,transparent 70%) !important;
}

.pg{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:clamp(70px,6.4vw,88px) !important;
  gap:16px !important;
  grid-auto-flow:dense !important;
}
.pi{
  border-radius:20px !important;
  box-shadow:0 16px 42px rgba(0,0,0,.24) !important;
}
.pi::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.pi:hover{box-shadow:0 24px 52px rgba(0,0,0,.33) !important}
.po{opacity:1 !important;background:linear-gradient(to top,rgba(8,9,14,.80),rgba(8,9,14,.28) 44%,transparent 72%) !important}
.po h3{font-size:20px !important}
.po span{font-size:8px !important;letter-spacing:1.7px !important}
.p1{background:#0f0a1a url('/__l5e/assets-v1/cf6d4262-06a4-4cc2-b7da-1a004cb57ab5/playgro_kid.png') center/cover no-repeat !important}
.p2{background:#0f0a1a url('/__l5e/assets-v1/74acf57c-2573-480d-8294-e7714f89ba3e/mochi_dog.jpg') center/cover no-repeat !important}
.p3{background:#0f0a1a url('/__l5e/assets-v1/2bea9f2c-1b2d-47bf-a7d9-0dc2353d6b2b/appliances_fridge.jpg') center/cover no-repeat !important}
.p4{background:#0f0a1a url('/__l5e/assets-v1/34423942-5dee-4320-86fc-c6dbaf8437a0/granthelp_einstein.jpg') center/cover no-repeat !important}
.p5{background:#0f0a1a url('/__l5e/assets-v1/a9b58955-3114-440e-a260-cdef58664614/iyd_lavalamp.jpg') center/cover no-repeat !important}
.p6{background:#0f0a1a url('/__l5e/assets-v1/7818e02b-051c-49d0-9ac5-1da25089bcf4/jll_laptop.png') center/cover no-repeat !important}
.p7{background:#0f0a1a url('/__l5e/assets-v1/665f927b-72da-4ce1-ae79-a983ddac0c2b/ppi_ocd_conops.png') center/cover no-repeat !important}
.p8{background:#0f0a1a url('/__l5e/assets-v1/3e76c82c-aefc-443d-9057-e6054f269793/motorsport_sim.jpg') center/cover no-repeat !important}

.pg.layout-all .p1{grid-column:span 2 !important;grid-row:span 4 !important}
.pg.layout-all .p2,
.pg.layout-all .p3,
.pg.layout-all .p4,
.pg.layout-all .p5,
.pg.layout-all .p6,
.pg.layout-all .p7{grid-column:span 1 !important;grid-row:span 2 !important}
.pg.layout-all .p8{grid-column:span 2 !important;grid-row:span 2 !important}

.pg.layout-product .p2{grid-column:span 2 !important;grid-row:span 4 !important}
.pg.layout-product .p1,
.pg.layout-product .p3,
.pg.layout-product .p5{grid-column:span 1 !important;grid-row:span 2 !important}
.pg.layout-product .p8{grid-column:span 2 !important;grid-row:span 2 !important}

.pg.layout-lifestyle .p4{grid-column:span 2 !important;grid-row:span 4 !important}
.pg.layout-lifestyle .p1,
.pg.layout-lifestyle .p3,
.pg.layout-lifestyle .p7{grid-column:span 1 !important;grid-row:span 2 !important}

.pg.layout-campaign .p1{grid-column:span 2 !important;grid-row:span 4 !important}
.pg.layout-campaign .p3,
.pg.layout-campaign .p4,
.pg.layout-campaign .p6{grid-column:span 1 !important;grid-row:span 2 !important}
.pg.layout-campaign .p8{grid-column:span 2 !important;grid-row:span 2 !important}

.pg.layout-motion .p7{grid-column:span 2 !important;grid-row:span 4 !important}
.pg.layout-motion .p6{grid-column:span 2 !important;grid-row:span 2 !important}

@media (max-width: 980px){
  .col-area{padding:0 24px 44px !important}
  .col-grid{width:min(100%,520px) !important;gap:14px !important}
  .pg{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:clamp(76px,12vw,102px) !important;gap:12px !important}
  .pg.layout-all .p1,
  .pg.layout-product .p2,
  .pg.layout-lifestyle .p4,
  .pg.layout-campaign .p1,
  .pg.layout-motion .p7{grid-column:span 2 !important;grid-row:span 4 !important}
  .pg.layout-all .p8,
  .pg.layout-product .p8,
  .pg.layout-campaign .p8,
  .pg.layout-motion .p6{grid-column:span 2 !important;grid-row:span 2 !important}
}

@media (max-width: 640px){
  .hero-inline-mark{margin-bottom:24px !important}
  .hero-inline-mark-shell{padding:14px 16px !important}
  .hero-inline-mark img{width:214px !important;max-width:70vw !important}
  .col-grid{gap:12px !important}
  .col-cell{border-radius:18px !important}
  .col-cell::after{border-radius:18px !important}
  .pg{gap:10px !important}
  .pi,.pi::after{border-radius:16px !important}
}

/* ===== V8 MIRAZZLE FIXES ===== */

/* --- HERO COLLAGE: clean 2x2 grid --- */
.col-area {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 32px 80px 0 !important;
  cursor: none !important;
  height: auto !important;
  min-height: 0 !important;
}
.col-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 8px !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  position: relative !important;
  filter: none !important;
}
.col-cell {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;
  transition: transform 0.2s, box-shadow 0.3s !important;
  cursor: none !important;
  animation: tilePop 0.9s cubic-bezier(.22,1,.36,1) both !important;
  will-change: transform !important;
}
.col-cell::before { display: none !important; }
.col-cell::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(155,127,205,0.08) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}
.cc0 { background: linear-gradient(135deg,#1a1030,#2d1b55,#1a2a4a) !important; grid-column: auto !important; grid-row: auto !important; }
.cc1 { background: linear-gradient(135deg,#251a40,#1a3545) !important; }
.cc2 { background: linear-gradient(135deg,#0f2847,#3d1e55) !important; }
.cc3 { background: linear-gradient(135deg,#1e1535,#0f3060,#1a3040) !important; }
.cc4, .cc5 { display: none !important; }
.ctag {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  font-family: var(--fm) !important;
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  background: rgba(0,0,0,0.55) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px) !important;
  z-index: 6 !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.col-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle,rgba(155,127,205,0.15) 0%,transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%,-50%);
  z-index: 5;
}
/* Remove floating cells that GPT added */
.hero-badge, .hero-logo-chip, .hero-mark-float, .hero-orbit, .hero-orbit-a, .hero-orbit-b, .hero-inline-mark, .hero-inline-mark-shell { display:none !important; }

/* --- LOGO CURSOR (mix-blend-mode:screen removes black bg) --- */
.logo-cursor-v8 {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  width: 52px;
  height: 52px;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: screen;
  animation: curBreathe 3s ease-in-out infinite;
}
.logo-cursor-v8.active { opacity: 1; }
.logo-cursor-v8 img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cursor-glow-v8 {
  position: fixed;
  z-index: 9996;
  pointer-events: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(155,127,205,0.08) 0%,transparent 70%);
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor-glow-v8.active { opacity: 1; }
@keyframes curBreathe {
  0%,100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%,-50%) scale(1.12) rotate(3deg); }
}

/* --- PORTFOLIO GRID: proper 1:1 with dynamic layout --- */
.pg {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  grid-auto-flow: dense !important;
}
.pi {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.28) !important;
  overflow: hidden !important;
  position: relative !important;
}
.pi:hover { box-shadow: 0 24px 52px rgba(0,0,0,0.38) !important; }
/* Default: every tile is 1:1 */
.pg .pi { grid-column: span 1; aspect-ratio: 1/1; }

/* ALL layout: p1 wide, p6 tall, rest 1:1 */
.pg.layout-all .p1 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
.pg.layout-all .p6 { grid-row: span 1 !important; aspect-ratio: 4/5 !important; }

/* PRODUCT layout: p2 wide, p5 tall */
.pg.layout-product .p2 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
.pg.layout-product .p5 { aspect-ratio: 4/5 !important; }

/* LIFESTYLE layout: p4 wide, p7 tall */
.pg.layout-lifestyle .p4 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
.pg.layout-lifestyle .p7 { aspect-ratio: 4/5 !important; }

/* CAMPAIGN layout: p3 wide, p6 tall */
.pg.layout-campaign .p3 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
.pg.layout-campaign .p6 { aspect-ratio: 4/5 !important; }

/* MOTION layout: p7 wide, p1 tall */
.pg.layout-motion .p7 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
.pg.layout-motion .p1 { aspect-ratio: 4/5 !important; }

/* Hide filtered-out items cleanly */
.pi.hide { display: none !important; }

/* --- LEGIBILITY BUBBLES: semi-transparent bg behind text --- */
/* What We Create info panels */
.wc-info {
  background: linear-gradient(135deg, rgba(20,12,40,0.82), rgba(15,25,55,0.78)) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(155,127,205,0.12) !important;
  border-radius: 0 !important;
}
/* Service cards */
.sv {
  background: linear-gradient(135deg, rgba(18,10,36,0.80), rgba(12,22,50,0.75)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(155,127,205,0.10) !important;
}
/* Process panels */
.ppnl {
  background: linear-gradient(135deg, rgba(15,10,32,0.82), rgba(12,20,48,0.78)) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(155,127,205,0.10) !important;
  border-radius: 8px !important;
  padding: 28px !important;
}
/* Stats bar */
.sbar {
  background: linear-gradient(135deg, rgba(18,10,36,0.85), rgba(10,20,50,0.82)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(155,127,205,0.12) !important;
  border-bottom: 1px solid rgba(155,127,205,0.12) !important;
}
/* Case study cards */
.csc {
  background: linear-gradient(135deg, rgba(20,12,40,0.78), rgba(15,25,55,0.72)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(155,127,205,0.12) !important;
}
/* Section header text areas */
.sec > .rv:first-child, .pf > .pfh {
  background: linear-gradient(135deg, rgba(10,10,24,0.60), rgba(8,16,40,0.55)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  padding: 20px 28px !important;
  margin-bottom: 32px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  display: inline-block !important;
}
/* CTA section */
.cta {
  background: linear-gradient(135deg, rgba(20,10,42,0.88), rgba(10,18,52,0.84)) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
/* Portfolio overlay text */
.po {
  background: linear-gradient(to top, rgba(6,6,18,0.92), rgba(6,6,18,0.55) 46%, transparent 78%) !important;
}

/* Logo trail: keep it but slightly reduce opacity */
.logo-trail { opacity: 0.14 !important; }

/* Ensure process tabs have bubble bg */
.pnav {
  background: rgba(14,8,30,0.65) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(155,127,205,0.08) !important;
}

/* Scroll medallion stays */
.scroll-med { display: grid !important; }

/* Hero section readable */
.hc {
  background: linear-gradient(135deg, rgba(10,10,20,0.55), rgba(8,14,36,0.42)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  padding: 36px 40px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

@media(max-width:1100px) {
  .col-area { padding: 0 24px 28px !important; justify-content: flex-start !important; }
  .col-grid { width: min(100%,480px) !important; }
  .hc { padding: 28px 24px !important; }
}
@media(max-width:760px) {
  .pg { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .pg .pi { grid-column: span 1 !important; aspect-ratio: 1/1 !important; }
  .pg.layout-all .p1, .pg.layout-product .p2, .pg.layout-lifestyle .p4,
  .pg.layout-campaign .p3, .pg.layout-motion .p7 { grid-column: span 2 !important; aspect-ratio: 2/1 !important; }
}
/* END V8 */




/* ==== V9 LAYOUT FIX: CLEAN HERO + CONTROLLED WORK GRID ==== */
.hero-inline-copy,
.hero-inline-mark,
.hero-logo-chip,
.hero-badge,
.hero-mark-float,
.logo-cursor,
.cursor-glow,
.cursor-ring,
.scroll-med,
.sect-stamp{display:none!important}

.hero{
  min-height:92svh!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr)!important;
  align-items:center!important;
  gap:42px!important;
  padding:118px 56px 64px!important;
  position:relative!important;
  overflow:hidden!important;
}
.hero-bg{
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(ellipse 48% 58% at 68% 48%,rgba(155,127,205,.12),transparent 62%),
    radial-gradient(ellipse 32% 42% at 50% 68%,rgba(51,107,160,.08),transparent 62%),
    #0a0a0a!important;
}
.hero .hc{
  position:relative!important;
  z-index:3!important;
  padding:0!important;
  max-width:760px!important;
}
.hero .hl{
  font-family:var(--fm)!important;
  font-size:11px!important;
  letter-spacing:3px!important;
  color:rgba(255,255,255,.78)!important;
  margin-bottom:20px!important;
}
.hero .hc h1,
.hero h1{
  font-family:var(--fd)!important;
  font-weight:500!important;
  font-size:clamp(58px,7.4vw,104px)!important;
  line-height:.91!important;
  letter-spacing:-4px!important;
  max-width:8.8ch!important;
  margin-bottom:28px!important;
  text-wrap:balance!important;
}
.hero .hc h1 em,
.hero h1 em{
  font-style:normal!important;
  font-weight:600!important;
  background:linear-gradient(135deg,#fff 0%,#b49ae3 62%,#7dbdff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}
.hero .hs{
  font-size:18px!important;
  line-height:1.75!important;
  color:rgba(255,255,255,.74)!important;
  max-width:680px!important;
  margin-bottom:34px!important;
}
.hero .hcr{display:flex!important;gap:12px!important;position:relative!important;z-index:5!important}
.hero .hb1,.hero .hb2{
  min-height:56px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 28px!important;
  border-radius:0!important;
}

.hcol{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  opacity:1!important;
  animation:fi 1s ease .5s both!important;
  min-height:620px!important;
}
.colw{
  position:relative!important;
  width:min(100%,760px)!important;
  height:min(72vh,680px)!important;
  min-height:520px!important;
  transform:translateZ(0)!important;
}
.colm,
.colf{
  position:absolute!important;
  overflow:hidden!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.45)!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;
  will-change:transform!important;
}
.colm{
  inset:6% 10% 10% 4%!important;
  background:linear-gradient(135deg,#21123e 0%,#273a67 52%,#6e45af 100%)!important;
}
.colf::before,.colm::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%,rgba(8,9,16,.24) 100%)!important;
  pointer-events:none!important;
}
.colf::after,.colm::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  border:1px solid rgba(155,127,205,.12)!important;
  pointer-events:none!important;
}
.cf1{
  width:42%!important;
  aspect-ratio:1/1!important;
  left:-2%!important;
  bottom:0!important;
  z-index:4!important;
  background:linear-gradient(135deg,#2b174b 0%,#5e39a8 48%,#143b60 100%)!important;
  transform:rotate(-2.5deg)!important;
}
.cf2{
  width:34%!important;
  aspect-ratio:1/1!important;
  right:2%!important;
  top:0!important;
  z-index:4!important;
  background:linear-gradient(135deg,#132b4c 0%,#2f245b 48%,#8958d2 100%)!important;
  transform:rotate(2deg)!important;
}
.cf3{
  width:30%!important;
  aspect-ratio:4/5!important;
  right:8%!important;
  bottom:4%!important;
  z-index:5!important;
  background:linear-gradient(135deg,#1e1538 0%,#0e4d6d 52%,#7047b5 100%)!important;
  transform:rotate(-1.2deg)!important;
}
.colm:hover,.colf:hover{border-color:rgba(255,255,255,.22)!important;box-shadow:0 38px 110px rgba(0,0,0,.55),0 0 42px rgba(155,127,205,.10)!important}
.col-glow{display:block!important;position:absolute!important;width:260px!important;height:260px!important;background:radial-gradient(circle,rgba(155,127,205,.22) 0%,rgba(72,146,214,.11) 30%,transparent 70%)!important;pointer-events:none!important;opacity:0!important;transition:opacity .25s!important;transform:translate(-50%,-50%)!important;z-index:4!important}

.pf{padding:100px 48px!important}
.pfh{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:28px!important;
  margin-bottom:42px!important;
}
.pflt{display:flex!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
.fb{
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.025)!important;
  border-radius:999px!important;
  padding:9px 16px!important;
}
.fb.on{color:#fff!important;border-color:rgba(155,127,205,.65)!important;background:rgba(155,127,205,.12)!important}
.pg{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-rows:clamp(64px,6.2vw,88px)!important;
  grid-auto-flow:dense!important;
  gap:16px!important;
  perspective:1200px!important;
  transition:opacity .24s ease,filter .24s ease,transform .3s ease!important;
}
.pg.switching{opacity:.25!important;filter:blur(5px)!important;transform:scale(.99)!important}
.pi{
  position:relative!important;
  grid-column:span 3!important;
  grid-row:span 3!important;
  aspect-ratio:auto!important;
  min-height:0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.26)!important;
  transition:transform .18s ease,box-shadow .28s ease,border-color .28s ease!important;
}
.pi.hide{display:none!important}
.pi.showing{animation:galleryIn .48s cubic-bezier(.22,1,.36,1) both!important}
.pi::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 40%,rgba(6,8,13,.18) 100%)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.pi:hover{box-shadow:0 28px 62px rgba(0,0,0,.36),0 0 34px rgba(155,127,205,.08)!important;border-color:rgba(255,255,255,.20)!important}
.po{
  opacity:1!important;
  background:linear-gradient(to top,rgba(7,8,13,.86),rgba(7,8,13,.42) 42%,transparent 76%)!important;
  padding:24px!important;
  z-index:3!important;
}
.po h3{font-size:20px!important;margin-bottom:6px!important}
.po span{font-size:8px!important;letter-spacing:1.7px!important;color:rgba(255,255,255,.72)!important}
.pig{z-index:4!important}

.p1{background:linear-gradient(135deg,#21123d,#293767,#6d46b5)!important}
.p2{background:linear-gradient(135deg,#182a4d,#33215d,#8154c9)!important}
.p3{background:linear-gradient(135deg,#2a1644,#1f3c64,#5f3ea1)!important}
.p4{background:linear-gradient(135deg,#1c2548,#372260,#7e50c0)!important}
.p5{background:linear-gradient(135deg,#20143a,#283c65,#4e2d78)!important}
.p6{background:linear-gradient(135deg,#132743,#2d3764,#6f47af)!important}
.p7{background:linear-gradient(135deg,#291845,#164463,#7a4fc3)!important}
.p8{background:linear-gradient(135deg,#1e294d,#473069,#224766)!important}

.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p5,.pg.layout-all .p6,.pg.layout-all .p7{grid-column:span 3!important;grid-row:span 3!important}
.pg.layout-all .p4{grid-column:span 6!important;grid-row:span 3!important}
.pg.layout-all .p8{grid-column:span 6!important;grid-row:span 2!important}

.pg.layout-product .p2,.pg.layout-product .p3,.pg.layout-product .p5,.pg.layout-product .p1{grid-column:span 3!important;grid-row:span 3!important}
.pg.layout-product .p8{grid-column:span 6!important;grid-row:span 2!important}

.pg.layout-lifestyle .p1,.pg.layout-lifestyle .p3,.pg.layout-lifestyle .p4{grid-column:span 3!important;grid-row:span 3!important}
.pg.layout-lifestyle .p7{grid-column:span 3!important;grid-row:span 4!important}

.pg.layout-campaign .p1,.pg.layout-campaign .p3,.pg.layout-campaign .p6{grid-column:span 3!important;grid-row:span 3!important}
.pg.layout-campaign .p4,.pg.layout-campaign .p8{grid-column:span 6!important;grid-row:span 3!important}

.pg.layout-motion .p6{grid-column:span 6!important;grid-row:span 3!important}
.pg.layout-motion .p7{grid-column:span 3!important;grid-row:span 4!important}
.pg.layout-motion .p1{grid-column:span 3!important;grid-row:span 3!important}

@media(max-width:1120px){
  .hero{grid-template-columns:1fr!important;gap:34px!important;padding:112px 32px 64px!important}
  .hcol{min-height:520px!important;justify-content:flex-start!important}
  .colw{width:min(100%,680px)!important;height:540px!important;min-height:480px!important}
}
@media(max-width:760px){
  .hero{padding:104px 20px 52px!important;gap:26px!important}
  .hero h1,.hero .hc h1{font-size:clamp(46px,15vw,74px)!important;letter-spacing:-2.6px!important}
  .hero .hs{font-size:16px!important}
  .hcol{min-height:420px!important}
  .colw{height:420px!important;min-height:420px!important}
  .pf{padding:68px 20px!important}
  .pfh{align-items:flex-start!important;flex-direction:column!important}
  .pflt{justify-content:flex-start!important}
  .pg{grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-rows:clamp(58px,14vw,86px)!important;gap:12px!important}
  .pi,.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p5,.pg.layout-all .p6,.pg.layout-all .p7,
  .pg.layout-product .p1,.pg.layout-product .p2,.pg.layout-product .p3,.pg.layout-product .p5,
  .pg.layout-lifestyle .p1,.pg.layout-lifestyle .p3,.pg.layout-lifestyle .p4,
  .pg.layout-campaign .p1,.pg.layout-campaign .p3,.pg.layout-campaign .p6,
  .pg.layout-motion .p1{grid-column:span 3!important;grid-row:span 3!important}
  .pg.layout-all .p4,.pg.layout-all .p8,.pg.layout-product .p8,.pg.layout-campaign .p4,.pg.layout-campaign .p8,.pg.layout-motion .p6{grid-column:span 6!important;grid-row:span 2!important}
}



/* ==== MIRAZZLE V10 - SCROLL WHEEL + LEGIBILITY + HERO LAYOUT ==== */

/* ── 1. RESTORE SCROLL PROGRESS MEDALLION ─────────────────────────── */
.scroll-med {
  display: flex !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 9997 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(8,8,18,0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(155,127,205,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: visible !important;
}
.scroll-med:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 14px 44px rgba(155,127,205,0.28), 0 0 0 1px rgba(155,127,205,0.22) !important;
}
.scroll-med-ring {
  position: absolute !important;
  inset: -4px !important;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  transform: rotate(-90deg) !important;
  pointer-events: none !important;
}
.scroll-med-track {
  fill: none !important;
  stroke: rgba(255,255,255,0.07) !important;
  stroke-width: 2.5 !important;
}
.scroll-med-progress {
  fill: none !important;
  stroke: var(--ac) !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 0.12s linear !important;
  filter: drop-shadow(0 0 4px rgba(155,127,205,0.6)) !important;
}
.scroll-med-core {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
}
.scroll-med-core img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 8px rgba(155,127,205,0.45)) !important;
}

/* ── 2. GLOBAL LEGIBILITY FIXES ───────────────────────────────────── */

/* Nav */
.nw { color: #fff !important; }
.nk a { color: rgba(255,255,255,0.68) !important; }
.nk a:hover { color: var(--acb) !important; }

/* Hero text */
.hl { color: rgba(155,127,205,0.92) !important; }
.hero .hs { color: rgba(255,255,255,0.84) !important; font-weight: 300 !important; }

/* Make gradient heading work properly */
.hc h1 em, .hero h1 em {
  background: linear-gradient(125deg, #fff 0%, #c4aaff 52%, #8ecfff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Plain text part of h1 - ensure white */
.hc h1, .hero h1 {
  color: #fff !important;
}

/* Section labels */
.sl { color: var(--acb) !important; opacity: 1 !important; letter-spacing: 3.5px !important; }

/* Section headings */
.st { color: #fff !important; }
.st em {
  background: linear-gradient(125deg, #fff 0%, var(--acb)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* What We Create */
.wc-info h3 { color: #fff !important; }
.wc-info p { color: rgba(255,255,255,0.80) !important; }
.wn { color: var(--ac) !important; opacity: 0.14 !important; }

/* Services */
.sv h3 { color: #fff !important; }
.sv p { color: rgba(255,255,255,0.78) !important; }
.sv-n { color: var(--ac) !important; font-weight: 600 !important; font-size: 11px !important; margin-bottom: 8px !important; }

/* Process */
.ptab { color: rgba(255,255,255,0.55) !important; }
.ptab.on { color: #fff !important; }
.tn { color: var(--acb) !important; }
.tt { color: inherit !important; font-size: 12px !important; letter-spacing: 0.5px !important; }
.pt h4 { color: #fff !important; font-size: 20px !important; margin-bottom: 10px !important; }
.pt p { color: rgba(255,255,255,0.76) !important; }
.pd .di { color: var(--ac) !important; font-weight: 600 !important; }
.pd .dt { color: rgba(255,255,255,0.80) !important; font-size: 14px !important; }

/* Stats bar */
.sn { color: #fff !important; font-family: var(--fd) !important; font-weight: 600 !important; }
.slb { color: rgba(255,255,255,0.64) !important; font-family: var(--fm) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; }

/* Case studies */
.csc-s { color: var(--acb) !important; font-family: var(--fd) !important; font-size: clamp(28px,4vw,48px) !important; font-weight: 600 !important; }
.csc-sl { color: rgba(255,255,255,0.55) !important; font-family: var(--fm) !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; }
.csc-n { color: #fff !important; font-weight: 500 !important; font-size: 18px !important; margin: 8px 0 !important; }
.csc-a { color: rgba(255,255,255,0.48) !important; font-family: var(--fm) !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; cursor: pointer !important; transition: color .2s !important; }
.csc-a:hover { color: var(--acb) !important; }

/* Portfolio overlays */
.po h3 { color: #fff !important; font-size: 18px !important; }
.po span { color: rgba(255,255,255,0.72) !important; }

/* Filter tabs */
.fb { color: rgba(255,255,255,0.56) !important; }
.fb.on { color: #fff !important; }
.fb:hover { color: rgba(255,255,255,0.88) !important; }

/* Portfolio header */
.pfh .sl { color: var(--acb) !important; }
.pfh .st { color: #fff !important; }

/* CTA */
.cta h2 { color: #fff !important; }
.cta p { color: rgba(255,255,255,0.74) !important; font-size: 18px !important; margin-top: 12px !important; }
.ctab {
  margin-top: 32px !important;
  color: #fff !important;
  background: var(--acdp) !important;
  border: 1px solid rgba(155,127,205,.5) !important;
  font-family: var(--fm) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  cursor: pointer !important;
  transition: background .3s, box-shadow .3s !important;
  display: inline-block !important;
}
.ctab:hover {
  background: var(--ac) !important;
  box-shadow: 0 6px 24px rgba(155,127,205,.35) !important;
}

/* Footer */
.fl, .fr { color: rgba(255,255,255,0.42) !important; font-family: var(--fm) !important; font-size: 10px !important; letter-spacing: 1.5px !important; }
.fr a { color: rgba(255,255,255,0.42) !important; text-decoration: none !important; transition: color .2s !important; }
.fr a:hover { color: rgba(255,255,255,0.72) !important; }

/* Logo ticker */
.logos p { color: rgba(255,255,255,0.38) !important; }
.li { opacity: 0.32 !important; }
.li:hover { opacity: 0.62 !important; }

/* ── 3. HERO LAYOUT - BALANCED COLUMNS + CLEAN COLLAGE ──────────────── */
.hero {
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  padding: 116px 56px 72px !important;
  align-items: center !important;
}

/* Hero text column: max width for readability */
.hero .hc {
  max-width: 640px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Hero collage - centered in its column */
.hcol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-height: 500px !important;
}

.colw {
  width: min(100%, 520px) !important;
  height: min(72vh, 540px) !important;
  min-height: 440px !important;
  max-height: 560px !important;
}

/* Floating cards - tighter, more deliberate composition */
.colm {
  inset: 8% 8% 12% 6% !important;
}
.cf1 {
  width: 44% !important;
  left: -4% !important;
  bottom: 2% !important;
}
.cf2 {
  width: 36% !important;
  right: 0% !important;
  top: 2% !important;
}
.cf3 {
  width: 28% !important;
  right: 6% !important;
  bottom: 8% !important;
}

/* Portfolio section: filter buttons alignment */
.pfh {
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.pflt {
  align-items: center !important;
}

@media(max-width:1100px){
  .hero { grid-template-columns:1fr !important; gap:40px !important; padding:112px 32px 64px !important; }
  .hcol { min-height: 420px !important; }
  .colw { width: min(100%,480px) !important; height: 460px !important; }
  .hero .hc { max-width: none !important; }
}
@media(max-width:760px){
  .hero { padding: 104px 20px 56px !important; gap: 32px !important; }
  .ctab { padding: 14px 32px !important; }
}



/* ══════════════════════════════════════════════════════
   V11 - FIXED GRID + FULL LEGIBILITY PASS
══════════════════════════════════════════════════════ */

/* ── PORTFOLIO GRID: single fixed layout, all tabs ── */
#workGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  transition: opacity .22s ease, filter .22s ease !important;
}
#workGrid.switching {
  opacity: 0.2 !important;
  filter: blur(5px) !important;
}

/* Hero card - first visible card spans full width */
#workGrid .pi {
  aspect-ratio: 1 / 1 !important;
  grid-column: span 1 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .3s ease !important;
}
#workGrid .pi:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(155,127,205,0.2) !important;
}
/* First card always hero: 2 cols wide, 16:9 */
#workGrid .pi.p1 {
  grid-column: span 2 !important;
  aspect-ratio: 16 / 9 !important;
}
/* Any single-item filtered result goes full width */
#workGrid .pi.hide { display: none !important; }
#workGrid .pi.showing {
  animation: gridIn .48s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes gridIn {
  from { opacity:0; transform: translateY(18px) scale(.97); }
  to   { opacity:1; transform: translateY(0)   scale(1); }
}

/* Overlay text */
#workGrid .po {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 22px !important;
  background: linear-gradient(to top, rgba(6,6,16,0.88), rgba(6,6,16,0.35) 52%, transparent 80%) !important;
  opacity: 1 !important;
  z-index: 3 !important;
}
#workGrid .po h3 {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}
#workGrid .po span {
  color: rgba(255,255,255,0.62) !important;
  font-family: var(--fm) !important;
  font-size: 9px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
}

  #workGrid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #workGrid .pi.p1 {
    grid-column: span 2 !important;
    aspect-ratio: 16/9 !important;
  }
}

/* ── FILTER BUTTONS ── */
.pfh {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 42px !important;
}
.pflt {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.fb {
  font-family: var(--fm) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.52) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
.fb:hover {
  color: rgba(255,255,255,0.82) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.fb.on {
  color: #fff !important;
  background: rgba(155,127,205,0.16) !important;
  border-color: rgba(155,127,205,0.55) !important;
}

/* ══════════════════════════════════════════════════
   GLOBAL LEGIBILITY - every text element lifted
══════════════════════════════════════════════════ */

/* Section labels */
.sl {
  color: var(--acb) !important;
  opacity: 1 !important;
  font-size: 9px !important;
  letter-spacing: 3.5px !important;
}
/* Section headings */
.st { color: #fff !important; }
.st em {
  background: linear-gradient(120deg, #fff 0%, #c4aaff 55%, #8ecfff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Body copy everywhere - main fix */
.hs, .wc-info p, .sv p, .pt p, .pd .dt, .cta p, .csc-sl, .logos p {
  color: rgba(255,255,255,0.84) !important;
}
/* Service cards body */
.sv p { font-size: 14px !important; line-height: 1.65 !important; }

/* Service number */
.sv-n {
  color: var(--acb) !important;
  opacity: 1 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}

/* What We Create ghost number */
.wn {
  color: var(--ac) !important;
  opacity: 0.12 !important;
}
/* What We Create body */
.wc-info h3 { color: #fff !important; }
.wc-info p { color: rgba(255,255,255,0.84) !important; }

/* Process tabs */
.ptab { color: rgba(255,255,255,0.52) !important; }
.ptab.on { color: #fff !important; }
.ptab:hover { color: rgba(255,255,255,0.82) !important; }
.tn { color: var(--acb) !important; }
.tt { font-size: 12px !important; letter-spacing: 0.3px !important; }

/* Process panel text */
.pt h4 { color: #fff !important; font-size: 20px !important; }
.pt p { color: rgba(255,255,255,0.82) !important; line-height: 1.7 !important; }
.pd .di { color: var(--ac) !important; font-weight: 700 !important; }
.pd .dt { color: rgba(255,255,255,0.82) !important; font-size: 14px !important; }

/* Stats bar */
.sn { color: #fff !important; font-weight: 600 !important; }
.slb { color: rgba(255,255,255,0.60) !important; font-size: 10px !important; letter-spacing: 2px !important; }

/* Case study cards */
.csc-s {
  color: var(--acb) !important;
  font-family: var(--fd) !important;
  font-size: clamp(30px,4vw,52px) !important;
  font-weight: 600 !important;
}
.csc-sl { color: rgba(255,255,255,0.52) !important; font-size: 9px !important; letter-spacing: 2px !important; }
.csc-n { color: #fff !important; font-size: 18px !important; font-weight: 500 !important; }
.csc-a { color: rgba(255,255,255,0.46) !important; font-size: 9px !important; letter-spacing: 1.5px !important; }
.csc-a:hover { color: var(--acb) !important; }
/* Placeholder case study cards */
.csc-placeholder { opacity: 0.35 !important; pointer-events: none !important; }
.csc-placeholder .csc-s { color: rgba(255,255,255,0.28) !important; }
.csc-placeholder .csc-n { color: rgba(255,255,255,0.38) !important; font-style: italic !important; }
.csc-placeholder .csc-a { color: rgba(255,255,255,0.18) !important; }

/* CTA */
.cta p { color: rgba(255,255,255,0.80) !important; font-size: 18px !important; }
.ctab { color: #fff !important; }

/* Logo ticker */
.logos p { color: rgba(255,255,255,0.36) !important; }
.li { opacity: 0.30 !important; }
.li:hover { opacity: 0.60 !important; }

/* Footer */
.fl, .fr, .fr a { color: rgba(255,255,255,0.40) !important; }
.fr a:hover { color: rgba(255,255,255,0.70) !important; }

/* Portfolio section header */
.pfh .sl { color: var(--acb) !important; }
.pfh .st { color: #fff !important; }

/* Nav */
.nw { color: #fff !important; }
.nk a { color: rgba(255,255,255,0.65) !important; }
.nk a:hover { color: #fff !important; }
/* ══════════════════════════════════════════════
   CONSTELLATION HERO - replaces old collage
══════════════════════════════════════════════ */
.hcol {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 540px !important;
  padding: 0 !important;
  opacity: 0;
  animation: fi 1.2s ease 1s forwards;
}

.constellation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* SVG lines layer */
.cst-lines {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Individual nodes - CSS positions them, JS animates them */
.cst-node {
  position: absolute !important;
  width: 152px !important;
  height: 152px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), z-index 0s !important;
  will-change: transform !important;
}
/* Default CSS positions (fallback if JS slow) - % of container */
.cst-node[data-i="0"] { left: 12% !important; top: 8%  !important; }
.cst-node[data-i="1"] { left: 56% !important; top: 4%  !important; }
.cst-node[data-i="2"] { left: 74% !important; top: 46% !important; }
.cst-node[data-i="3"] { left: 36% !important; top: 72% !important; }
.cst-node[data-i="4"] { left: 4%  !important; top: 52% !important; }

.cst-node:hover {
  transform: scale(1.13) !important;
  z-index: 10 !important;
}

/* Card inner */
.cst-inner {
  width: 100% !important;
  height: 100% !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.cst-inner::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 38% 36%, rgba(255,255,255,0.06) 0%, transparent 68%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
.cst-node:hover .cst-inner {
  box-shadow: 0 28px 72px rgba(0,0,0,0.52), 0 0 36px rgba(155,127,205,0.16), 0 0 0 1px rgba(155,127,205,0.18) inset !important;
  border-color: rgba(155,127,205,0.28) !important;
}

/* Per-node gradients */
.cst-node[data-i="0"] .cst-inner { background: linear-gradient(138deg,#1e1040,#2d1b60,#1a2a4e) !important; }
.cst-node[data-i="1"] .cst-inner { background: linear-gradient(148deg,#251840,#1a3048,#3a1e58) !important; }
.cst-node[data-i="2"] .cst-inner { background: linear-gradient(128deg,#0e1c3c,#26124a,#1a2e50) !important; }
.cst-node[data-i="3"] .cst-inner { background: linear-gradient(155deg,#1a1238,#2a2060,#162840) !important; }
.cst-node[data-i="4"] .cst-inner { background: linear-gradient(132deg,#200e40,#1a2c50,#301858) !important; }

@media(max-width:1100px){
  .hcol { min-height: 440px !important; }
  .cst-node { width: 128px !important; height: 128px !important; }
}
@media(max-width:760px){
  .hcol { min-height: 340px !important; }
  .cst-node { width: 100px !important; height: 100px !important; }
}



/* ═══ HERO LAYOUT - matches reference ═══ */
.hero{
  height:100vh!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:none!important;
  padding:0!important;
  gap:0!important;
  position:relative!important;
  overflow:hidden!important;
}
.hero .hc{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:0 48px!important;
  max-width:none!important;
}
.hero .hc h1,.hero h1{
  font-family:var(--fd)!important;
  font-weight:500!important;
  font-size:clamp(36px,4.5vw,64px)!important;
  line-height:1.05!important;
  letter-spacing:-1.5px!important;
  max-width:none!important;
  text-wrap:unset!important;
  margin-bottom:20px!important;
}
.hero .hc h1 em,.hero h1 em{
  font-style:normal!important;
  font-weight:600!important;
  background:linear-gradient(135deg,#fff 20%,var(--acb))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
.hero .hs{
  font-size:14px!important;
  font-weight:300!important;
  color:rgba(255,255,255,0.72)!important;
  max-width:380px!important;
  line-height:1.7!important;
  margin-bottom:28px!important;
}

/* ═══ COLLAGE GRID - bigger cells, fills column ═══ */
.col-area{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:60px 56px 60px 0!important;
  cursor:none!important;
  height:100%!important;
  min-height:unset!important;
  max-height:none!important;
  opacity:0;
  animation:fi 1s ease .8s forwards;
}
.col-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr 1fr!important;
  gap:8px!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  max-height:680px!important;
  min-height:unset!important;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,0.35))!important;
  position:relative!important;
}
.col-grid::before{display:none!important}
.col-cell{
  position:relative!important;
  overflow:hidden!important;
  border-radius:6px!important;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .35s!important;
  transform-style:preserve-3d!important;
  left:auto!important;top:auto!important;width:auto!important;bottom:auto!important;right:auto!important;
  box-shadow:0 8px 24px rgba(0,0,0,0.25)!important;
}
.col-cell::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  border:1px solid rgba(155,127,205,.08)!important;
  border-radius:6px!important;
  pointer-events:none!important;
  transition:border-color .3s!important;
}
.col-cell:hover::after{border-color:rgba(155,127,205,.25)!important}
.cc0{grid-column:span 2!important;grid-row:span 1!important;background:linear-gradient(135deg,#1a1030,#2d1b55,#1a2a4a)!important}
.cc1{grid-column:span 1!important;grid-row:span 1!important;background:linear-gradient(135deg,#251a40,#1a3545)!important}
.cc2{grid-column:span 1!important;grid-row:span 1!important;background:linear-gradient(135deg,#0f2847,#3d1e55)!important}
.cc3{grid-column:span 2!important;grid-row:span 1!important;background:linear-gradient(135deg,#1e1535,#0f3060,#1a3040)!important}

.col-cell .ctag{
  position:absolute!important;
  bottom:14px!important;
  left:14px!important;
  font-family:var(--fm)!important;
  font-size:9px!important;
  letter-spacing:1.8px!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,.85)!important;
  background:rgba(8,10,16,.7)!important;
  padding:5px 10px!important;
  backdrop-filter:blur(8px)!important;
  border-radius:3px!important;
  z-index:6!important;
  opacity:0!important;
  transition:opacity .3s!important;
  border:1px solid rgba(255,255,255,0.08)!important;
}
.col-glow{
  position:absolute!important;
  width:280px!important;
  height:280px!important;
  background:radial-gradient(circle,rgba(155,127,205,.20) 0%,transparent 65%)!important;
  pointer-events:none!important;
  opacity:0!important;
  transition:opacity .3s!important;
  transform:translate(-50%,-50%)!important;
  z-index:5!important;
}

/* ═══ CURSOR - 3 layers: logo + glow + ring ═══ */
.logo-cursor-v8{
  position:fixed!important;
  z-index:9999!important;
  pointer-events:none!important;
  width:46px!important;
  height:46px!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  transition:opacity .3s!important;
  mix-blend-mode:normal!important;
  animation:curBreathe 2.8s ease-in-out infinite!important;
}
.logo-cursor-v8.active{opacity:1!important}
.logo-cursor-v8 img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.4)) drop-shadow(0 0 14px rgba(155,127,205,0.5))!important;
}
.cursor-glow-v8{
  position:fixed!important;
  z-index:9997!important;
  pointer-events:none!important;
  width:160px!important;
  height:160px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(155,127,205,.20) 0%,rgba(155,127,205,.05) 40%,transparent 70%)!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  transition:opacity .3s!important;
}
.cursor-glow-v8.active{opacity:1!important}
.cursor-ring-v8{
  position:fixed!important;
  z-index:9998!important;
  pointer-events:none!important;
  width:90px!important;
  height:90px!important;
  border-radius:50%!important;
  border:1px solid rgba(180,154,227,0.35)!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  transition:opacity .35s!important;
}
.cursor-ring-v8.active{opacity:1!important}
@keyframes curBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  50%{transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr!important;height:auto!important;min-height:100vh!important}
  .hero .hc{padding:120px 24px 28px!important}
  .col-area{padding:0 24px 52px!important;cursor:auto!important;height:auto!important}
  .col-grid{max-height:none!important;height:60vh!important;min-height:420px!important}
  .hero h1{font-size:clamp(36px,8vw,56px)!important}
  .logo-cursor-v8,.cursor-glow-v8,.cursor-ring-v8{display:none!important}
}
@media(max-width:520px){
  .col-grid{height:480px!important}
}



body{background:#030207!important;color:#f2eef7;position:relative;overflow-x:hidden}
body>:not(#spaceBgFluid):not(style):not(script){position:relative;z-index:1}
.loader,.loader *{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#spaceBgFluid{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#0a0711 0%,#09050f 28%,#06040a 58%,#020104 100%)}
#spaceBgFluid .core{position:absolute;inset:0;background:radial-gradient(circle at 18% 10%, rgba(79,34,152,.18), transparent 24%),radial-gradient(circle at 82% 12%, rgba(255,118,44,.11), transparent 20%),radial-gradient(circle at 62% 38%, rgba(143,82,255,.10), transparent 18%),radial-gradient(circle at 40% 86%, rgba(255,137,57,.06), transparent 18%),linear-gradient(180deg, rgba(10,6,18,.18) 0%, rgba(7,4,11,.16) 26%, rgba(4,2,7,.38) 56%, rgba(0,0,0,.74) 100%),linear-gradient(120deg, rgba(22,10,34,.9) 0%, rgba(9,6,14,.92) 42%, rgba(23,7,12,.88) 100%);filter:saturate(108%)}
#spaceBgFluid .core::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% -12%, rgba(255,173,98,.10), transparent 34%),linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%, transparent 80%, rgba(0,0,0,.18) 100%)}
#spaceBgFluid .depth{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(2,1,4,.06) 18%, rgba(3,2,6,.16) 42%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.82) 100%);opacity:.10;transition:opacity .18s ease-out}
#spaceBgFluid .spine{position:absolute;left:53%;top:-10vh;bottom:-10vh;width:18vw;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(250,185,122,.05) 42%,rgba(255,131,57,.08) 50%,rgba(143,82,255,.05) 58%,transparent);filter:blur(18px);opacity:.22;mix-blend-mode:screen}
#spaceBgFluid .dune{position:absolute;left:-8vw;right:-8vw;height:26vh;border-radius:50%;filter:blur(42px);opacity:.22;mix-blend-mode:screen;transition:transform .22s ease-out}
#spaceBgFluid .d1{bottom:18vh;background:radial-gradient(ellipse at center, rgba(135,70,255,.18), rgba(135,70,255,0) 70%)}
#spaceBgFluid .d2{bottom:2vh;background:radial-gradient(ellipse at center, rgba(255,128,48,.12), rgba(255,128,48,0) 70%)}
#spaceBgFluid .d3{bottom:-12vh;background:radial-gradient(ellipse at center, rgba(92,48,170,.14), rgba(92,48,170,0) 70%)}
#spaceBgFluid .layer,#spaceBgFluid .streams,#spaceBgFluid .cursorSand{position:absolute;inset:0;pointer-events:none}
#spaceBgFluid .layer,#spaceBgFluid .streams{transition:transform .18s ease-out}
#spaceBgFluid .grain{position:absolute;border-radius:62% 38% 58% 42%/60% 46% 54% 40%;background:rgba(255,214,168,.82);box-shadow:0 0 3px rgba(255,190,110,.12);opacity:var(--op,.6);animation:sandDrift var(--dur,12s) linear infinite;animation-delay:var(--delay,0s);transform:rotate(var(--rot,0deg))}
#spaceBgFluid .back .grain{background:rgba(198,144,255,.34);box-shadow:0 0 3px rgba(161,101,255,.08)}
#spaceBgFluid .front .grain{background:rgba(255,188,126,.84);box-shadow:0 0 4px rgba(255,143,66,.12)}
#spaceBgFluid .stream{position:absolute;width:2px;height:28px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,204,145,.74) 34%, rgba(255,141,63,.58) 72%, rgba(255,255,255,0));opacity:.28;filter:blur(.25px);animation:sandStream var(--dur,8s) linear infinite;animation-delay:var(--delay,0s)}
#spaceBgFluid .cursor-grain{position:absolute;border-radius:62% 38% 58% 42%/60% 46% 54% 40%;background:rgba(255,196,132,.9);box-shadow:0 0 4px rgba(255,155,71,.16);opacity:.72;animation:cursorSandFall var(--dur,1.6s) ease-out forwards;transform:rotate(var(--rot,0deg))}
#spaceBgFluid .cursor-stream{position:absolute;width:2px;height:20px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,209,149,.8) 36%, rgba(255,137,58,.6) 74%, rgba(255,255,255,0));opacity:.56;animation:cursorStreamFall 1.2s ease-out forwards}
#spaceBgFluid .haze{position:absolute;inset:0;background:radial-gradient(circle at 50% 14%, rgba(255,180,110,.03), transparent 26%),radial-gradient(circle at 50% 52%, rgba(147,78,255,.04), transparent 24%),linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 100%)}
nav{background:linear-gradient(to bottom,rgba(10,7,16,.72),rgba(10,7,16,.22) 76%,transparent)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid rgba(255,184,116,.05)!important}
.logos,.sec,.pf,.css,.cta,footer{background:transparent!important;position:relative}
.sect-stamp-line,.sbar,.pnav,.ppnl,footer,.logos{border-color:rgba(255,173,108,.07)!important}
.logos p,.fl,.fr a,.slb,.msi .ml,.csc-sl,.sv-n,.ptab,.pd .dt,.wc-info p,.csc p,.sv p,.mcc p,.li,.si,.hs,.ts,.tm{color:rgba(238,229,245,.62)!important}
.sl,.sv-n,.csc-a,.wc-pill,.sv-pl,.fb.on,.ptab.on,.mcc h5,.mpl,.fb:hover,.nk a:hover{color:#f2ab72!important}
.st,.st em,.csc-n,.sv h3,.wc-info h3,.po h3,.mb .mc,.cta h2,.sn,.nw{color:#f6f0fa!important}
.hero-bridge,.cta::before{display:none!important}
.wc-item,.csc,.sv,.ppnl,.si,.mm,.pd{background:rgba(16,9,20,.34)!important;border-color:rgba(255,173,108,.08)!important;box-shadow:0 10px 28px rgba(0,0,0,.14)}
.wc-item:hover,.csc:hover,.sv:hover,.pd:hover{background:rgba(18,10,24,.48)!important}
.pi{background:rgba(16,9,20,.26)!important;box-shadow:0 10px 28px rgba(0,0,0,.08)!important}
.pi:hover{background:rgba(18,10,24,.42)!important}
.po{background:linear-gradient(to top,rgba(12,7,16,.92),rgba(12,7,16,.22) 42%,transparent 68%)!important}
.pf{padding:92px 48px!important}.pg{grid-auto-rows:148px!important;gap:5px!important}
.ctab,.nc{background:linear-gradient(135deg, rgba(110,62,191,.92), rgba(214,98,40,.86))!important;border-color:rgba(255,175,118,.28)!important;box-shadow:0 10px 28px rgba(135,74,39,.18)!important}
.fb,.wc-pill,.sv-pl,.mpl,.ctab,.nc{backdrop-filter:blur(10px)}
.sand-zone{position:relative;isolation:isolate;--sand-top-op:.25;--sand-bottom-op:.36;--sand-drip-op:.28}
.sand-zone .sand-top,.sand-zone .sand-bottom,.sand-zone .sand-drips,.sand-zone .sand-drifts{position:absolute;left:0;right:0;pointer-events:none;z-index:3}
.sand-zone .sand-top{top:0;height:22px;opacity:var(--sand-top-op);background:radial-gradient(ellipse at 14% 100%, rgba(255,182,118,.26), transparent 34%),radial-gradient(ellipse at 32% 100%, rgba(255,128,58,.14), transparent 28%),radial-gradient(ellipse at 50% 100%, rgba(255,194,139,.18), transparent 28%),radial-gradient(ellipse at 74% 100%, rgba(155,88,255,.14), transparent 30%),radial-gradient(ellipse at 92% 100%, rgba(255,182,118,.22), transparent 30%)}
.sand-zone .sand-bottom{bottom:0;height:38px;opacity:var(--sand-bottom-op);background:radial-gradient(ellipse at 12% 0%, rgba(255,182,118,.28), transparent 34%),radial-gradient(ellipse at 28% 0%, rgba(255,128,58,.18), transparent 30%),radial-gradient(ellipse at 46% 0%, rgba(255,182,118,.24), transparent 36%),radial-gradient(ellipse at 66% 0%, rgba(155,88,255,.18), transparent 30%),radial-gradient(ellipse at 82% 0%, rgba(255,128,58,.18), transparent 32%)}
.sand-zone .sand-drips{bottom:0;height:76px;overflow:hidden;opacity:var(--sand-drip-op)}
.sand-zone .sand-drop{position:absolute;top:0;width:2px;height:var(--h,28px);background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,205,146,.86) 36%, rgba(255,141,63,.62) 72%, rgba(255,255,255,0));border-radius:999px;transform:translateY(-18px);animation:sectionSandDrop var(--dur,5.8s) linear infinite;animation-delay:var(--delay,0s);filter:blur(.18px)}
.sand-zone .sand-drop.thick{width:3px;filter:blur(.24px)}
.sand-zone .sand-drifts{bottom:5px;height:18px;opacity:.42}
.sand-zone .sand-mound{position:absolute;bottom:0;width:var(--w,90px);height:18px;border-radius:999px;background:radial-gradient(ellipse at center, rgba(255,191,129,.26), rgba(255,191,129,0) 72%);filter:blur(1px)}
.sand-zone.sand-live{--sand-top-op:.34;--sand-bottom-op:.48;--sand-drip-op:.42}
.sand-card{position:relative;isolation:isolate;overflow:hidden}
.sand-card::before{content:'';position:absolute;inset:auto 0 0 0;height:14px;background:radial-gradient(ellipse at 16% 0%, rgba(255,186,120,.12), transparent 30%),radial-gradient(ellipse at 44% 0%, rgba(255,128,58,.10), transparent 28%),radial-gradient(ellipse at 72% 0%, rgba(155,88,255,.10), transparent 30%);pointer-events:none;z-index:2}
.sand-card::after{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(180deg, rgba(255,195,138,.08), transparent);pointer-events:none;z-index:2}
@keyframes sandDrift{0%{transform:translate3d(var(--dx0,0px),-14vh,0) scale(.96) rotate(var(--rot,0deg))}100%{transform:translate3d(var(--dx1,0px),118vh,0) scale(1.04) rotate(calc(var(--rot,0deg) + 12deg))}}
@keyframes sandStream{0%{opacity:0;transform:translate3d(var(--sx0,0px),-12vh,0)}14%{opacity:.34}84%{opacity:.22}100%{opacity:0;transform:translate3d(var(--sx1,0px),112vh,0)}}
@keyframes sectionSandDrop{0%{opacity:0;transform:translateY(-18px)}18%{opacity:.30}78%{opacity:.22}100%{opacity:0;transform:translateY(82px)}}
@keyframes cursorSandFall{0%{opacity:.72;transform:translate3d(0,0,0) scale(1) rotate(var(--rot,0deg))}100%{opacity:0;transform:translate3d(var(--tx,0px),120px,0) scale(.82) rotate(calc(var(--rot,0deg) + 18deg))}}
@keyframes cursorStreamFall{0%{opacity:.56;transform:translateY(0)}100%{opacity:0;transform:translateY(68px)}}
@media(max-width:900px){#spaceBgFluid .dune{height:24vh}.pg{grid-auto-rows:136px!important}.sand-zone .sand-drips{height:54px}.sand-zone .sand-top{height:14px}.sand-zone .sand-bottom{height:28px}}



/* Polished case study modal for deep-space theme */
.case-splash{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.mo{
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:36px 22px!important;
  background:rgba(1,3,10,.72)!important;
  backdrop-filter:blur(22px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(120%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .28s ease,visibility .28s ease!important;
}
.mo.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.mo::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 16%,rgba(80,166,255,.10),transparent 26%),
    radial-gradient(circle at 78% 20%,rgba(155,88,255,.10),transparent 28%),
    radial-gradient(circle at 50% 88%,rgba(255,135,56,.035),transparent 24%);
  pointer-events:none;
}
.mm{
  position:relative!important;
  width:min(940px,92vw)!important;
  max-height:min(84vh,820px)!important;
  overflow:auto!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(12,18,34,.94),rgba(5,8,18,.96))!important;
  border:1px solid rgba(165,190,255,.16)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.035) inset,0 0 70px rgba(94,91,255,.08)!important;
  transform:translateY(18px) scale(.985)!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s ease!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(141,181,255,.28) rgba(255,255,255,.04)!important;
}
.mo.open .mm{transform:translateY(0) scale(1)!important}
.mm::-webkit-scrollbar{width:9px}.mm::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}.mm::-webkit-scrollbar-thumb{background:rgba(141,181,255,.28);border-radius:999px}
.mx{
  position:sticky!important;
  top:14px!important;
  float:right!important;
  margin:14px 14px -48px 0!important;
  z-index:20!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(2,5,14,.58)!important;
  color:rgba(245,248,255,.88)!important;
  font-size:28px!important;
  line-height:1!important;
  cursor:pointer!important;
  backdrop-filter:blur(12px)!important;
}
.mx:hover{background:rgba(141,181,255,.13)!important;color:#fff!important;border-color:rgba(141,181,255,.3)!important}
.mh{
  height:250px!important;
  border-radius:22px 22px 0 0!important;
  overflow:hidden!important;
  position:relative!important;
  background:#10172c!important;
}
.mhi{
  width:100%!important;
  height:100%!important;
  opacity:.92!important;
  filter:saturate(105%) contrast(102%)!important;
}
.mh::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 16%,rgba(137,194,255,.18),transparent 28%),
    radial-gradient(circle at 76% 24%,rgba(169,105,255,.16),transparent 32%),
    linear-gradient(to bottom,rgba(0,0,0,.02),rgba(5,8,18,.86));
  pointer-events:none;
}
.mhg{display:none!important}
.mb{padding:34px 42px 42px!important;background:linear-gradient(180deg,rgba(8,12,24,.18),rgba(4,6,14,.38))!important}
.mb .mc{font-size:clamp(30px,4vw,46px)!important;line-height:1!important;letter-spacing:-.8px!important;margin:0 0 8px!important;color:#f4f6ff!important}
.mb .mt{font-size:10px!important;letter-spacing:2.4px!important;color:#91baff!important;margin:0 0 26px!important}
.mss{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 0 28px!important;padding:0 0 28px!important;border-bottom:1px solid rgba(145,178,255,.12)!important}
.msi{padding:16px 18px!important;border:1px solid rgba(145,178,255,.11)!important;background:rgba(255,255,255,.035)!important;border-radius:14px!important}
.msi .mv{font-size:30px!important;color:#d8e5ff!important;line-height:1!important;margin-bottom:6px!important}
.msi .ml{font-size:8px!important;letter-spacing:1.6px!important;color:rgba(225,232,250,.55)!important}
.mcc{display:grid!important;grid-template-columns:1fr 1fr!important;gap:28px!important;margin-top:2px!important}
.mcc h5,.md h5{font-family:var(--fm)!important;font-size:9px!important;letter-spacing:2px!important;text-transform:uppercase!important;color:#8db5ff!important;margin:0 0 10px!important}
.mcc p{font-size:14px!important;line-height:1.78!important;color:rgba(235,239,250,.68)!important;margin:0!important}
.mg{grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-top:30px!important}
.mgi{height:auto!important;aspect-ratio:1/1!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 40px rgba(0,0,0,.18) inset!important;background-size:cover!important;background-position:center!important}
.md{margin-top:30px!important}
.md .mp{gap:7px!important;margin-top:12px!important}
.mpl{border:1px solid rgba(145,178,255,.16)!important;background:rgba(141,181,255,.06)!important;color:rgba(238,242,255,.76)!important;padding:6px 11px!important;border-radius:999px!important;font-size:8px!important;letter-spacing:1.1px!important}
@media(max-width:760px){
  .mo{padding:18px 12px!important;align-items:flex-end!important}
  .mm{width:100%!important;max-height:88vh!important;border-radius:20px 20px 0 0!important}
  .mh{height:190px!important;border-radius:20px 20px 0 0!important}
  .mb{padding:28px 22px 32px!important}
  .mss{grid-template-columns:1fr!important}
  .mcc{grid-template-columns:1fr!important;gap:22px!important}
  .mg{grid-template-columns:1fr 1fr!important}.mgi{height:auto!important;aspect-ratio:1/1!important}
}



:host{
  display:block;
  position:relative;
  z-index:1;
  --bg:#060814;
  --ac:#9B7FCD;
  --acb:#B49AE3;
  --acdp:#6B4F9E;
  --brd:rgba(255,255,255,0.08);
  --fd:'Clash Display','Syne',sans-serif;
  --fb:'Plus Jakarta Sans',sans-serif;
  --fm:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
.wrap{font-family:var(--fb);background:transparent;color:#f0f0f0;overflow:hidden;-webkit-font-smoothing:antialiased;position:relative}
.hero{height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 18% 14%, rgba(31,133,255,.11), transparent 24%),
  radial-gradient(circle at 72% 18%, rgba(130,44,255,.13), transparent 28%),
  radial-gradient(circle at 55% 88%, rgba(255,112,19,.045), transparent 22%),
  linear-gradient(180deg,rgba(5,10,22,.14) 0%,rgba(5,10,22,.08) 45%,rgba(5,10,22,0) 100%),
  linear-gradient(115deg,rgba(22,10,34,.62) 0%, rgba(10,6,14,.34) 40%, rgba(23,7,12,.20) 78%, rgba(34,11,7,.10) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
.hero-bg::before{content:'';position:absolute;inset:-10%;background:
  radial-gradient(circle at 30% 50%, rgba(255,159,92,.08), transparent 18%),
  radial-gradient(circle at 78% 36%, rgba(155,88,255,.10), transparent 20%),
  radial-gradient(circle at 62% 78%, rgba(255,129,58,.08), transparent 18%);
  filter:blur(16px);opacity:.95}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 72%, rgba(3,4,10,.22) 100%),radial-gradient(circle at center, transparent 46%, rgba(1,1,8,.14) 100%)}
.nebula{position:absolute;border-radius:50%;filter:blur(42px);pointer-events:none;mix-blend-mode:screen;opacity:.55;transition:transform .25s ease-out}
.nebula-a{width:32vw;height:32vw;left:-8vw;top:20vh;background:radial-gradient(circle, rgba(139,82,255,.18), rgba(139,82,255,0) 68%)}
.nebula-b{width:28vw;height:28vw;right:6vw;top:5vh;background:radial-gradient(circle, rgba(255,128,56,.16), rgba(255,128,56,0) 68%)}
.nebula-c{width:24vw;height:24vw;right:22vw;bottom:-4vw;background:radial-gradient(circle, rgba(117,72,214,.14), rgba(117,72,214,0) 68%)}
.star-field,.network,.shooting-layer{position:absolute;inset:0;pointer-events:none}
.star-field{transition:transform .2s ease-out}
.star{position:absolute;border-radius:62% 38% 58% 42%/60% 46% 54% 40%;background:rgba(255,214,168,.86);box-shadow:0 0 4px rgba(255,160,82,.12);animation:sandFloat var(--twinkle,5.8s) ease-in-out infinite;opacity:var(--opacity,.8);transform:rotate(var(--rot,0deg))}
.stars-back .star{background:rgba(195,142,255,.28);box-shadow:0 0 3px rgba(155,88,255,.08)}
.stars-front .star{background:rgba(255,188,126,.82);box-shadow:0 0 4px rgba(255,141,63,.10)}
.network{display:none;opacity:0;transition:none}
.network line{stroke:url(#lineGrad);stroke-width:1}
.network circle{fill:rgba(255,167,94,.34)}
.shooting-star{position:absolute;width:2px!important;height:26px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,210,160,.88) 34%, rgba(255,132,62,.60) 72%, rgba(255,255,255,0));box-shadow:0 0 6px rgba(255,143,66,.14);transform:rotate(0deg);animation:sandfall var(--dur,5.6s) linear infinite;animation-delay:var(--delay,0s);opacity:0}
.hc{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 48px}
.hl{font-family:var(--fm);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#f0ab72;margin-bottom:18px;opacity:0;transform:translateY(16px);animation:fu .8s ease .6s forwards}
.hc h1{font-family:var(--fd);font-weight:500;font-size:clamp(36px,4.5vw,64px);line-height:1.05;letter-spacing:-1.5px;margin:0 0 20px 0;opacity:0;transform:translateY(24px);animation:fu .8s ease .8s forwards;text-shadow:0 10px 45px rgba(0,0,0,.35)}
.hc h1 em{font-style:normal;font-weight:600;background:linear-gradient(135deg,#fff 12%,#efc5ff 48%,#ffb06e 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs{font-size:14px;font-weight:300;color:rgba(244,234,244,.64);max-width:400px;line-height:1.75;margin:0 0 28px 0;opacity:0;transform:translateY(16px);animation:fu .8s ease 1s forwards}
.hcr{display:flex;gap:12px;opacity:0;transform:translateY(16px);animation:fu .8s ease 1.2s forwards}
.hb1,.hb2{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;backdrop-filter:blur(10px)}
.hb1{color:#fff;background:linear-gradient(135deg, rgba(113,63,192,.95), rgba(219,104,42,.88));border:1px solid rgba(255,181,118,.30);box-shadow:0 10px 30px rgba(135,74,39,.20)}
.hb1:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(79,72,161,.30)}
.hb2{color:rgba(236,236,255,.85);background:rgba(10,14,30,.22);border:1px solid rgba(255,255,255,.10)}
.hb2:hover{border-color:rgba(160,197,255,.45);color:#fff;background:rgba(14,20,44,.32)}
.col-area{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:80px 32px 80px 0;cursor:none;opacity:0;animation:fi 1s ease .8s forwards}
.col-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;width:100%;max-width:520px;height:min(65vh,520px)}
.col-cell{position:relative;overflow:hidden;border-radius:3px;transition:transform .2s,box-shadow .3s;transform-style:preserve-3d;background-color:rgba(255,255,255,.03)}
.col-cell::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));pointer-events:none}
.col-cell::after{content:'';position:absolute;inset:0;border:1px solid rgba(150,180,255,.08);border-radius:3px;pointer-events:none;transition:border-color .3s}
.col-cell:hover::after{border-color:rgba(173,200,255,.16)}
.cc0{grid-column:span 2;background:linear-gradient(135deg,rgba(56,24,117,.92),rgba(48,38,119,.88),rgba(29,58,109,.84))}
.cc1{background:linear-gradient(135deg,rgba(41,33,92,.88),rgba(28,68,96,.84))}
.cc2{background:linear-gradient(135deg,rgba(13,45,93,.9),rgba(61,30,85,.82))}
.cc3{grid-column:span 2;background:linear-gradient(135deg,rgba(32,26,104,.92),rgba(22,58,103,.9),rgba(18,76,97,.86))}
.ctag{position:absolute;bottom:10px;left:10px;font-family:var(--fm);font-size:7px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.78);background:rgba(6,10,26,.56);padding:3px 9px;backdrop-filter:blur(8px);border-radius:2px;z-index:6;opacity:0;transition:opacity .3s;border:1px solid rgba(255,255,255,.08)}
.col-glow{position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(141,176,255,.18) 0%,rgba(122,94,255,.12) 24%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);z-index:5}
.logo-cursor{position:fixed;z-index:9999;pointer-events:none;width:54px;height:54px;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;animation:curBreathe 3s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,255,255,.12))}
.logo-cursor.active{opacity:1}
.logo-cursor img{width:100%;height:100%;object-fit:contain;display:block}
.cursor-glow{position:fixed;z-index:9997;pointer-events:none;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,rgba(145,178,255,.18) 0%,rgba(110,96,255,.10) 38%,transparent 72%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor-glow.active{opacity:1}
.cursor-ring{position:fixed;z-index:9996;pointer-events:none;width:84px;height:84px;border-radius:50%;border:1px solid rgba(145,178,255,.12);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
.cursor-ring.active{opacity:1}
@keyframes curBreathe{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}50%{transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}}
@keyframes fu{to{opacity:1;transform:translateY(0)}}
@keyframes fi{to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:var(--opacity,.8);transform:scale(1)}50%{opacity:calc(var(--opacity,.8) * .45);transform:scale(.72)}}
@keyframes sandfall{0%{opacity:0;transform:translate3d(0,-10vh,0)}14%{opacity:.34}84%{opacity:.20}100%{opacity:0;transform:translate3d(0,74vh,0)}}
@media(max-width:900px){.hero{height:auto;min-height:100vh;grid-template-columns:1fr}.hc{padding:120px 24px 28px}.col-area{padding:0 24px 52px;cursor:auto}.col-grid{max-width:none;height:52vh;min-height:360px}.logo-cursor,.cursor-glow,.cursor-ring{display:none}.nebula-a{width:52vw;height:52vw;left:-12vw;top:18vh}.nebula-b{width:48vw;height:48vw;right:-4vw;top:2vh}.nebula-c{width:38vw;height:38vw;right:12vw;bottom:-8vw}}
@media(max-width:520px){.col-grid{height:430px;min-height:430px}.hcr{flex-direction:column;align-items:flex-start}}



/* MORE PRONOUNCED GOLD / PURPLE REFINEMENT */
nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,186,123,.28) 22%,rgba(174,101,255,.26) 52%,rgba(255,141,63,.24) 78%,transparent);pointer-events:none}
.hb1,.ctab,.nc{
  background:linear-gradient(135deg, rgba(126,70,215,.96), rgba(255,159,79,.92))!important;
  border-color:rgba(255,195,140,.36)!important;
  box-shadow:0 14px 34px rgba(118,69,183,.22), 0 10px 28px rgba(164,86,46,.16)!important;
}
.hb2,.fb,.wc-pill,.sv-pl,.mpl,.ptab.on,.fb.on{
  background:linear-gradient(135deg, rgba(61,30,86,.46), rgba(34,19,42,.54))!important;
  border-color:rgba(255,183,118,.16)!important;
  color:#f6c18a!important;
}
.hl,.sl,.sv-n,.csc-a,.mpl,.mcc h5,.wc-pill,.sv-pl,.fb.on,.ptab.on{color:#f6c18a!important}
.st,.st em,.sn,.nw,.cta h2,.po h3,.wc-info h3,.sv h3,.csc-n{color:#fbf4ff!important;text-shadow:0 0 18px rgba(166,98,255,.08)}
.hc h1 em,.hero-inline-mark-shell strong,.hero-inline-mark strong{
  background:linear-gradient(135deg,#fff 10%, #f0c4ff 40%, #f6c18a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-inline-mark-shell{border-color:rgba(255,197,140,.18)!important;box-shadow:0 22px 56px rgba(97,50,162,.18),0 18px 40px rgba(119,65,36,.14)!important}
.pi,.wc-item,.csc,.sv,.ppnl,.pd,.si,.mm{
  border:1px solid rgba(255,180,117,.10)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.015)!important;
}
.pi:hover,.wc-item:hover,.csc:hover,.sv:hover,.pd:hover{
  border-color:rgba(255,196,138,.18)!important;
  box-shadow:0 18px 44px rgba(80,42,132,.18), 0 14px 32px rgba(132,73,42,.12)!important;
}
.po{background:linear-gradient(to top,rgba(20,10,24,.94),rgba(22,12,28,.64) 34%,rgba(25,13,29,.08) 70%,transparent 100%)!important}
.sand-zone .sand-bottom,
.sand-zone .sand-top{filter:saturate(112%)}

/* SELECTED WORK - MASSIVELY TIDIED */
.pf{padding:84px 48px 72px!important}
.pg{grid-auto-rows:92px!important;gap:6px!important;align-items:stretch!important}
.pg .pi{min-height:0!important}
.pg[class*="layout-"] .pi{grid-column:span 3!important;grid-row:span 2!important}
.pg[class*="layout-"] .p8{grid-column:span 6!important;grid-row:span 1!important}
.pg[class*="layout-"] .p7{grid-column:span 3!important;grid-row:span 2!important}
.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p4,.pg.layout-all .p5,.pg.layout-all .p6{grid-column:span 4!important;grid-row:span 2!important}
.pg.layout-all .p7,.pg.layout-all .p8{grid-column:span 6!important;grid-row:span 1!important}
.pi .po{padding:28px!important}
.pi .po h3{font-size:44px!important;line-height:1.1!important;margin-bottom:10px!important}
.pi .po span{font-size:22px!important;letter-spacing:3.2px!important}

/* SAND INTERACTION WITH SECTIONS / CARDS */
.sand-zone,.sand-card{--sand-hit-x:50%;--sand-hit-op:0;--sand-hit-w:140px}
.sand-zone .sand-impact,
.sand-card .sand-impact{
  position:absolute;left:0;right:0;bottom:0;height:54px;pointer-events:none;z-index:4;opacity:var(--sand-hit-op);
  background:
    radial-gradient(ellipse var(--sand-hit-w) 20px at var(--sand-hit-x) 100%, rgba(255,196,134,.34), transparent 62%),
    radial-gradient(ellipse calc(var(--sand-hit-w) * .85) 14px at var(--sand-hit-x) 100%, rgba(156,90,255,.16), transparent 62%);
  transition:opacity .22s ease, background-position .14s ease;
}
.sand-zone .sand-rivulets,
.sand-card .sand-rivulets{position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;z-index:4;overflow:hidden}
.sand-zone .sand-rivulet,
.sand-card .sand-rivulet{
  position:absolute;top:0;width:2px;height:var(--h,30px);border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,210,160,.92) 34%, rgba(255,142,62,.66) 72%, rgba(255,255,255,0));
  opacity:.34;filter:blur(.18px);animation:sandElementDrop var(--dur,2.3s) ease-out forwards;
}
.sand-zone .sand-rivulet.thick,
.sand-card .sand-rivulet.thick{width:3px;filter:blur(.25px);opacity:.42}
.sand-zone.sand-touched .sand-bottom,
.sand-card.sand-touched::before{opacity:.58}
.sand-card{overflow:hidden}
.sand-card::before{height:16px!important;background:
  radial-gradient(ellipse at 16% 0%, rgba(255,186,120,.18), transparent 30%),
  radial-gradient(ellipse at 44% 0%, rgba(255,128,58,.15), transparent 28%),
  radial-gradient(ellipse at 72% 0%, rgba(155,88,255,.16), transparent 30%)!important}
.sand-card::after{height:10px!important;background:linear-gradient(180deg, rgba(255,195,138,.12), transparent)!important}
@keyframes sandElementDrop{0%{opacity:0;transform:translateY(-16px)}20%{opacity:.38}84%{opacity:.26}100%{opacity:0;transform:translateY(92px)}}
@media(max-width:900px){
  .pg{grid-auto-rows:78px!important}
  .pg[class*="layout-"] .pi,.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p4,.pg.layout-all .p5,.pg.layout-all .p6{grid-column:span 1!important;grid-row:span 2!important}
  .pg[class*="layout-"] .p8,.pg.layout-all .p7,.pg.layout-all .p8{grid-column:span 2!important;grid-row:span 1!important}
}



/* BUTTON INTERACTIVITY - MAIN DOCUMENT */
.nc,.ctab,.hbx,.sand-interactive-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  will-change:transform, box-shadow;
}
.nc::before,.ctab::before,.sand-interactive-btn::before,
.nc::after,.ctab::after,.sand-interactive-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
}
.nc::before,.ctab::before,.sand-interactive-btn::before{
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,223,171,.24), rgba(243,168,97,.14) 34%, rgba(165,92,255,.14) 60%, transparent 74%);
  opacity:0;transition:opacity .22s ease;
}
.nc::after,.ctab::after,.sand-interactive-btn::after{
  box-shadow:inset 0 0 0 1px rgba(255,236,208,.1), 0 18px 36px rgba(115,60,176,.12), 0 10px 26px rgba(183,101,49,.12);
  opacity:.0;transition:opacity .22s ease;
}
.nc:hover,.ctab:hover,.sand-interactive-btn:hover{
  transform:translateY(-3px) scale(1.015);
}
.nc:hover::before,.ctab:hover::before,.sand-interactive-btn:hover::before,
.nc:hover::after,.ctab:hover::after,.sand-interactive-btn:hover::after{opacity:1}

/* SELECTED WORK - MUCH SMALLER / TIDIER */
.pf{padding:76px 48px 58px!important}
.pf .st{margin-bottom:10px!important}
.pg{grid-auto-rows:68px!important;gap:6px!important;align-items:stretch!important}
.pg .pi{min-height:0!important;border-radius:10px!important}
.pg .po{padding:12px!important}
.pg .po h3{font-size:14px!important;line-height:1.12!important;margin-bottom:2px!important}
.pg .po span{font-size:7px!important;letter-spacing:1.1px!important}
/* default and layout overrides */
.pg .p1,.pg .p2,.pg .p3,.pg .p4,.pg .p5,.pg .p6{grid-column:span 4!important;grid-row:span 2!important}
.pg .p7,.pg .p8{grid-column:span 6!important;grid-row:span 1!important}
.pg.layout-product .p1,.pg.layout-product .p2,.pg.layout-product .p3,.pg.layout-product .p4,.pg.layout-product .p5,.pg.layout-product .p6,
.pg.layout-lifestyle .p1,.pg.layout-lifestyle .p2,.pg.layout-lifestyle .p3,.pg.layout-lifestyle .p4,.pg.layout-lifestyle .p5,.pg.layout-lifestyle .p6,
.pg.layout-campaign .p1,.pg.layout-campaign .p2,.pg.layout-campaign .p3,.pg.layout-campaign .p4,.pg.layout-campaign .p5,.pg.layout-campaign .p6,
.pg.layout-motion .p1,.pg.layout-motion .p2,.pg.layout-motion .p3,.pg.layout-motion .p4,.pg.layout-motion .p5,.pg.layout-motion .p6,
.pg.layout-all .p1,.pg.layout-all .p2,.pg.layout-all .p3,.pg.layout-all .p4,.pg.layout-all .p5,.pg.layout-all .p6{grid-column:span 4!important;grid-row:span 2!important}
.pg.layout-product .p7,.pg.layout-product .p8,
.pg.layout-lifestyle .p7,.pg.layout-lifestyle .p8,
.pg.layout-campaign .p7,.pg.layout-campaign .p8,
.pg.layout-motion .p7,.pg.layout-motion .p8,
.pg.layout-all .p7,.pg.layout-all .p8{grid-column:span 6!important;grid-row:span 1!important}
@media(max-width:900px){
  .pg{grid-auto-rows:62px!important}
}



/* ---------- 1) THEME LIFT ---------- */
:root{
  --bg:#13111d !important;
  --bg-el:#1a1727 !important;
  --bg-card:#1f1b30 !important;
  --tp:#f4eeff !important;
  --ts:#a89fc4 !important;        /* was #888 - much more visible */
  --tm:#6a6388 !important;
  --ac:#b89cef !important;        /* slightly brighter purple */
  --acb:#d6c0fc !important;
  --acd:rgba(184,156,239,.18) !important;
  --acg:rgba(184,156,239,.10) !important;
  --acdp:#7a5cb8 !important;
  --brd:rgba(255,255,255,.10) !important;
  --brdh:rgba(184,156,239,.45) !important;
}
body{
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%, rgba(184,156,239,.08), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 92%, rgba(255,180,120,.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(184,156,239,.035), transparent 70%),
    #13111d !important;
}
nav{background:linear-gradient(to bottom,rgba(19,17,29,.95),rgba(19,17,29,.55) 80%,transparent) !important}
/* Lift card surfaces slightly */
.sv, .csc, .ppnl, .wc-info, .cta{
  background:linear-gradient(135deg, rgba(34,28,56,.85), rgba(28,32,68,.80)) !important;
  border-color:rgba(184,156,239,.16) !important;
}
.pi{border-color:rgba(255,255,255,.12) !important}
/* Secondary text more legible */
.hs, .wc-info p, .sv p, p.sl, .nk a{color:var(--ts) !important}
.po span{color:rgba(255,255,255,.78) !important}

/* ---------- 2) SELECTED WORK - SIMPLE UNIFORM GALLERY ---------- */
/* Throw out all the layout-X / span-4 / row-span-4 chaos from earlier patches.
   A portfolio gallery should look like a contact sheet: uniform thumbnails,
   tight gaps, filter buttons drive show/hide. That's it. */

/* Use #work for high specificity so this wins against every earlier .pg rule */
section#work.pf{padding:80px 48px 72px !important}
section#work .pfh{margin-bottom:24px !important}
section#work .pflt{gap:6px !important; flex-wrap:wrap}
section#work .fb{
  font-size:10px !important; letter-spacing:1.5px !important;
  padding:8px 16px !important;
}

section#work .pg,
section#work .pg.rv,
section#work .pg.rv.v,
section#work .pg.switching{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  grid-auto-flow:row !important;
  gap:10px !important;
  perspective:none !important;
}

/* EVERY tile is identical: 1 column, square, fixed thumbnail size.
   Selector hits every possible variant of pi class (p1..p8) and overrides
   all earlier span-4 / row-span-4 declarations. */
section#work .pg > .pi,
section#work .pg > .p1, section#work .pg > .p2,
section#work .pg > .p3, section#work .pg > .p4,
section#work .pg > .p5, section#work .pg > .p6,
section#work .pg > .p7, section#work .pg > .p8{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
  aspect-ratio:1/1 !important;
  min-height:0 !important;
  height:auto !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

/* Tile overlay text - compact */
section#work .pg .pi .po{
  padding:12px 14px !important;
  background:linear-gradient(to top, rgba(8,6,18,.94), rgba(8,6,18,.55) 50%, transparent 85%) !important;
}
section#work .pg .pi .po h3{
  font-size:13px !important;
  line-height:1.2 !important;
  margin-bottom:2px !important;
  font-weight:500 !important;
}
section#work .pg .pi .po span{
  font-size:8px !important;
  letter-spacing:1.4px !important;
  opacity:.78 !important;
}

/* Hidden tiles really hide and don't reserve space */
section#work .pg .pi.hide{display:none !important}

/* Responsive: 3 cols on tablet, 2 cols on mobile */
@media(max-width:1100px){
  section#work .pg, section#work .pg.rv, section#work .pg.rv.v{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}
@media(max-width:700px){
  section#work.pf{padding:60px 24px 56px !important}
  section#work .pg, section#work .pg.rv, section#work .pg.rv.v{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
  }
}

/* ---------- 3) SAND SYSTEM - turn off the old gradient/rivulet noise ---------- */
/* The old CSS sand was just radial-gradient glows + hover line drips. Mute it so
   the new canvas particles read clearly. We keep a faint base for section
   dividers (sand "settled at bottom") which the canvas pile sits on top of. */
.sand-zone .sand-top{opacity:.08 !important}
.sand-zone .sand-bottom{opacity:.16 !important}
.sand-zone .sand-drips{display:none !important}
.sand-zone .sand-drifts{display:none !important}
.sand-zone .sand-impact{display:none !important}
.sand-zone .sand-rivulets{display:none !important}
.sand-card::before{opacity:.45 !important}
.sand-card::after{opacity:.45 !important}
.sand-card .sand-impact{display:none !important}
.sand-card .sand-rivulets{display:none !important}

/* Canvas overlay */
#sandCanvas{
  position:fixed; inset:0; pointer-events:none; z-index:6;
  mix-blend-mode:screen; opacity:.92;
}
@media (prefers-reduced-motion: reduce){
  #sandCanvas{display:none}
}



/* === v11: What We Create card height alignment === */
/* Root cause: cards have min-height 280 but content varies, so different cards expand differently.
   Fix: lock all grid rows to equal height with grid-auto-rows:1fr and stretch the items. */
section#wc .wc-grid,
.wc-grid{
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}
section#wc .wc-item,
.wc-item{
  height: 100% !important;
  min-height: 300px !important;
  align-self: stretch !important;
}
section#wc .wc-info,
.wc-info{
  height: 100% !important;
  box-sizing: border-box !important;
}
section#wc .wc-vis,
.wc-vis{
  height: 100% !important;
  min-height: 100% !important;
}
section#wc .wc-vis-in,
.wc-vis-in{
  height: 100% !important;
}

/* === v11: New ecosystem strip === */
/* Quieter visual treatment than What We Create. Smaller cards, less padding,
   reads as a supplementary credibility signal rather than a co-equal pillar. */
section#ecosystem{
  padding: 70px 22px 110px !important;
  position: relative;
}
section#ecosystem .eco-head{
  max-width: 1180px;
  margin: 0 auto 32px;
  text-align: left;
}
section#ecosystem .eco-sl{
  margin-bottom: 12px !important;
  opacity: .55;
  font-size: 11px;
  letter-spacing: .22em;
}
section#ecosystem .eco-h{
  font-family: var(--fd);
  font-size: clamp(28px,3.2vw,48px) !important;
  line-height: 1.1 !important;
  margin: 0 0 16px !important;
  font-weight: 400 !important;
  color: #f0e8f7 !important;
  letter-spacing: -.5px;
  opacity: 1;
}
.eco-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.eco-card{
  background: rgba(20, 14, 28, .42);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
.eco-card:hover{
  background: rgba(28, 19, 38, .58);
  border-color: rgba(184, 156, 239, .18);
  transform: translateY(-2px);
}
.eco-icon{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(184, 156, 239, .12), rgba(255, 173, 108, .08));
  border: 1px solid rgba(184, 156, 239, .18);
  color: #d6c4f0;
  flex-shrink: 0;
}
.eco-icon svg{
  width: 20px;
  height: 20px;
}
.eco-card h3{
  font-family: var(--fd);
  font-weight: 500;
  font-size: 17px;
  color: #f6f0fa;
  margin: 0;
  letter-spacing: .2px;
  line-height: 1.3;
}
.eco-card p{
  font-size: 13px;
  font-weight: 300;
  color: rgba(238, 229, 245, .62);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 880px){
  .eco-grid{ grid-template-columns: 1fr !important; gap: 10px; }
  section#ecosystem{ padding: 50px 18px 36px !important; }
  section#ecosystem .eco-h{ font-size: 26px !important; }
  .eco-card{ padding: 20px 18px; }
}



/* ============================================================
   v12: Typography sizing, ecosystem center, button hover clean,
        footer space trim, case study placeholder interactivity.
   Sand floor accumulator is the separate canvas below.
   ============================================================ */

/* --- 1. NAV TYPOGRAPHY: bigger and more legible --- */
/* Nav links - was 11px 1.6px letter-spacing, now larger and more readable */
nav .nk a,
.nk a{
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
  font-weight: 500 !important;
}
/* "Get in touch" pill - was 13px 18px padding, now chunkier */
nav .nk .nc,
.nk .nc{
  padding: 14px 22px !important;
  font-size: 12px !important;
  letter-spacing: 1.4px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
@media (max-width: 760px){
  nav .nk a, .nk a{ font-size: 11px !important; }
  nav .nk .nc, .nk .nc{ padding: 10px 16px !important; font-size: 11px !important; }
}

/* --- 2. CTA BUTTON: bigger "Start a conversation" --- */
.ctab,
section.cta .ctab{
  font-size: 13px !important;
  letter-spacing: 2.2px !important;
  padding: 19px 50px !important;
  font-weight: 600 !important;
}
@media (max-width: 760px){
  .ctab, section.cta .ctab{ padding: 16px 36px !important; font-size: 12px !important; }
}

/* --- 3. ECOSYSTEM HEADING: center it above the 3 cards --- */
section#ecosystem .eco-head{
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 36px !important;
}
section#ecosystem .eco-sl{
  text-align: center !important;
  margin: 0 0 14px 0 !important;
}
section#ecosystem .eco-h{
  text-align: center !important;
}

/* --- 4. BUTTON HOVERS: kill the glitchy 3D tilt + rainbow radial --- */
/* The v10 patch added perspective rotation + amber/purple radial overlay.
   It reads as glitchy and the colour mix doesn't match the rest of the site.
   Override with a clean, simple hover. */
.nc, .ctab, .sand-interactive-btn{
  transform-style: flat !important;
  perspective: none !important;
}
.nc::before, .ctab::before, .sand-interactive-btn::before{
  background: none !important;
  display: none !important;
}
.nc::after, .ctab::after, .sand-interactive-btn::after{
  background: none !important;
  display: none !important;
}
.nc:hover, .ctab:hover, .sand-interactive-btn:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(140,90,220,.96), rgba(184,156,239,.88)) !important;
  border-color: rgba(220,200,255,.42) !important;
  box-shadow: 0 12px 32px rgba(110,62,191,.32), 0 4px 12px rgba(0,0,0,.24) !important;
  color: #fff !important;
}

/* --- 5. FOOTER / NEGATIVE SPACE TRIM --- */
/* CTA was 120px top/bottom padding - drop bottom so it doesn't push so low */
section.cta,
.cta{
  padding: 90px 48px 70px !important;
}
/* Footer hugs the bottom - no extra margin after it */
footer{
  padding: 28px 48px !important;
  margin: 0 !important;
}
body{ padding-bottom: 0 !important; }
html, body{ overflow-anchor: auto; }

/* --- 6. CASE STUDY PLACEHOLDERS: re-enable interactivity --- */
/* v6/v7 patch killed pointer-events on placeholders - re-enable so they're clickable */
.csc-placeholder{
  opacity: 0.5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: opacity .25s, transform .25s, background .25s, border-color .25s !important;
}
.csc-placeholder:hover{
  opacity: 0.85 !important;
  transform: translateY(-2px) !important;
  border-color: rgba(184,156,239,.28) !important;
}
.csc-placeholder .csc-s{
  color: rgba(184,156,239,.62) !important;
  font-style: italic;
  font-weight: 300;
}
.csc-placeholder .csc-n{
  color: rgba(255,255,255,.72) !important;
  font-style: normal !important;
}
.csc-placeholder .csc-a{
  color: rgba(255,255,255,.42) !important;
}

/* --- 7. PAGE FLOOR DUNE: where sand accumulates --- */
#pageFloorDune{
  position: relative;
  width: 100%;
  height: 180px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  display: block;
  overflow: hidden;
}
#pageFloorDune canvas{
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce){
  #pageFloorDune{ display: none !important; }
}


/* ============================================================
   Mirazzle - hero sizing tweaks (apply LAST in cascade)
   ============================================================ */
#mirazzle-hero-collage-mount { display:block; }

/* Full-page sand rain canvas wrapper.
   The wrapper is a zero-size anchor; the canvas inside is position:fixed
   full-viewport, drawing the simulation in page coordinates (offset by
   scrollY at render time). */
.mz-sand-floor{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:3}
.mz-sand-floor canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;pointer-events:none}
body{position:relative}

/* Layer site sections above the sand canvas so content reads clearly,
   while sand still rains visibly past them. */
nav, .hero, .logos, .sec, footer{position:relative;z-index:4}
.mo{z-index:9000}

/* Hide the broken sitewide drifting sand layers (replaced by mz-sand-floor) */
#spaceBgFluid .layer,#spaceBgFluid .streams{opacity:0.18!important}
#pageFloorDune{display:none!important}

/* Coming-soon cards: open modal too */
.csc.csc-placeholder{cursor:pointer!important}

/* Hide leftover cursor decorations that depend on a script we did not port */
.logo-cursor-v8,.cursor-glow-v8,.cursor-ring-v8,.logo-trail-layer,.case-splash{display:none!important}
.loader{display:none!important}

/* Force reveal: IO observer is unreliable with injected innerHTML */
.rv{opacity:1!important;transform:none!important}

/* === v6 polish: hero logo, scroll medallion, work uniformity === */

/* Nav: clean horizontal lockup matching reference */
nav{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;padding:12px 50px!important;gap:32px!important}
.nl{order:0!important;flex:0 0 270px!important;width:270px!important;height:68px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
.nk{order:1!important;align-items:center!important}
.nav-logo-lockup{height:92px!important;width:auto!important;max-width:none!important;transform:translateX(-18px) scale(1.22)!important;transform-origin:left center!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.10))!important;display:block!important}
@media(max-width:1100px){.nl{flex-basis:230px!important;width:230px!important;height:60px!important}.nav-logo-lockup{height:80px!important;transform:translateX(-16px) scale(1.16)!important}}
@media(max-width:760px){nav{padding:10px 18px!important}.nl{flex-basis:180px!important;width:180px!important;height:50px!important}.nav-logo-lockup{height:66px!important;transform:translateX(-13px) scale(1.12)!important}}

/* Trusted-by line */
.logos p{font-size:13px!important;letter-spacing:4px!important;color:rgba(255,255,255,.55)!important;margin-bottom:34px!important}

/* Case studies grid */
.css .csg{grid-template-columns:repeat(4,1fr)!important;gap:14px}
@media(max-width:1100px){.css .csg{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.css .csg{grid-template-columns:1fr!important}}
.css .csc{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end}

/* Inline editor pencils — invisible until hover */
.mz-pencil{opacity:0;pointer-events:none;transition:opacity .15s ease}
.mz-pencil.show{opacity:.85;pointer-events:auto}
.mz-pencil.show:hover{opacity:1}

/* === SCROLL MEDALLION: symbol, spinning core, subtle purple progress === */
.scroll-med{background:#0b0b15!important;border:1px solid rgba(118,103,164,.28)!important;box-shadow:0 16px 32px rgba(0,0,0,.50),0 0 0 6px #171628,0 0 0 8px rgba(151,122,218,.10)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;width:64px!important;height:64px!important;bottom:24px!important;right:24px!important;overflow:visible!important}
.scroll-med::before{content:'';position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.105),rgba(255,255,255,.035) 58%,rgba(0,0,0,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 18px rgba(155,127,205,.14);pointer-events:none}
.scroll-med:hover{transform:scale(1.06)!important;box-shadow:0 20px 44px rgba(0,0,0,.56),0 0 0 8px #1b1930,0 0 26px rgba(176,139,255,.36)!important;filter:none!important}
.scroll-med-ring{inset:-7px!important;width:calc(100% + 14px)!important;height:calc(100% + 14px)!important;transform:rotate(-90deg)!important;overflow:visible!important}
.scroll-med-track{stroke:rgba(85,77,117,.58)!important;stroke-width:3!important}
.scroll-med-progress{stroke:#b98dff!important;stroke-width:3!important;stroke-linecap:round!important;filter:drop-shadow(0 0 6px rgba(185,141,255,.95))!important;transition:stroke-dashoffset .12s linear!important}
.scroll-med-core{position:relative!important;z-index:2!important;animation:none!important;background:none!important;width:40px!important;height:40px!important;display:grid!important;place-items:center!important;overflow:visible!important}
@keyframes scrollMedSpin{from{transform:scale(1.1) rotate(0deg)}to{transform:scale(1.1) rotate(360deg)}}
.scroll-med-core img{width:34px!important;height:34px!important;object-fit:contain!important;mix-blend-mode:normal!important;opacity:.92!important;transform-origin:50% 50%!important;animation:scrollMedSpin 18s linear infinite!important;filter:drop-shadow(0 0 5px rgba(255,255,255,.25)) drop-shadow(0 0 9px rgba(155,127,205,.38))!important}

/* === WORK SECTION: uniform 4×2 grid, clickable === */
#workGrid.pg,section#work .pg{display:grid!important;grid-template-columns:repeat(4,1fr)!important;grid-auto-rows:auto!important;gap:10px!important;perspective:none!important}
#workGrid .pi,section#work .pg .pi{grid-column:span 1!important;grid-row:span 1!important;aspect-ratio:1/1!important;cursor:pointer!important;transition:transform .25s ease, box-shadow .25s ease!important}
#workGrid .pi:hover,section#work .pg .pi:hover{transform:translateY(-4px)!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important}
#workGrid .pi.hide{display:none!important}
@media(max-width:900px){#workGrid.pg,section#work .pg{grid-template-columns:repeat(2,1fr)!important}}

/* Work lightbox */
.wlb{position:fixed;inset:0;background:rgba(4,4,10,.96);z-index:9500;display:none;align-items:center;justify-content:center;padding:40px;opacity:0;transition:opacity .25s ease}
.wlb.open{display:flex;opacity:1}
.wlb-inner{position:relative;width:min(92vw,1100px);aspect-ratio:16/10;border-radius:6px;overflow:hidden;background-size:cover!important;background-position:center!important;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(155,127,205,.18)}
.wlb-meta{position:absolute;left:0;right:0;bottom:0;padding:28px 32px;background:linear-gradient(to top,rgba(6,6,14,.85),transparent);color:#fff}
.wlb-meta h3{font-family:var(--fd);font-weight:500;font-size:28px;margin:0 0 6px}
.wlb-meta span{font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--acb)}
.wlb-x{position:absolute;top:24px;right:28px;background:none;border:none;color:rgba(255,255,255,.7);font-size:30px;line-height:1;cursor:pointer;z-index:2;transition:color .2s}
.wlb-x:hover{color:#fff}

/* v14: orange Selected Work eyebrow + ensure work tiles are clickable */
.pf .pfh .sl{color:#ffb06e !important}
#workGrid .pi{cursor:pointer;pointer-events:auto !important}
#workGrid .pi .po{pointer-events:none}

/* v14b: ensure lightbox actually shows when opened */
.wlb{display:none !important}
.wlb.open{display:flex !important; opacity:1 !important; z-index:99999 !important}

/* v15: center ecosystem heading + orange flare on eco icons */
section#ecosystem .eco-head{
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto 36px !important;
  display: block !important;
}
section#ecosystem .eco-head .sl,
section#ecosystem .eco-head .eco-sl{
  text-align: center !important;
  display: block !important;
  margin: 0 auto 14px !important;
}
section#ecosystem .eco-head .eco-h,
section#ecosystem .eco-head h2.st{
  text-align: center !important;
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
}
section#ecosystem .eco-head .eco-h .sand{
  display: inline-block !important;
}

/* Orange flare on the eco-card icons */
.eco-icon{
  background: linear-gradient(135deg, rgba(255,140,60,.28), rgba(255,90,40,.10)) !important;
  border: 1px solid rgba(255,170,110,.38) !important;
  color: #ffd2a8 !important;
  box-shadow:
    0 0 0 1px rgba(255,140,60,.10),
    0 8px 22px -10px rgba(255,120,50,.55),
    inset 0 0 14px rgba(255,150,70,.18) !important;
  position: relative;
}
.eco-icon::after{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,150,70,.45), transparent 60%);
  filter: blur(14px);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}
.eco-card:hover .eco-icon{
  border-color: rgba(255,190,130,.65) !important;
  color: #ffe3c5 !important;
  box-shadow:
    0 0 0 1px rgba(255,170,90,.25),
    0 12px 28px -8px rgba(255,130,60,.75),
    inset 0 0 18px rgba(255,160,80,.28) !important;
}
.eco-icon svg{
  filter: drop-shadow(0 0 6px rgba(255,150,70,.55));
}

/* v16: spruce up case study cards — depth, gradients, subtle orange flare on active ones */
.csg{ gap: 18px !important; }

.csc{
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,160,90,.05), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(155,110,230,.07), transparent 55%),
    linear-gradient(160deg, rgba(28,18,38,.85) 0%, rgba(16,10,24,.72) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 28px 26px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 22px 50px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.02) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
  position: relative;
  overflow: hidden;
}
.csc::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,176,110,.28), rgba(255,176,110,0) 35%, rgba(155,110,230,.22) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
  transition: opacity .35s ease;
}
.csc::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,176,110,.55), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s ease;
}
.csc:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(255,176,110,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 70px -28px rgba(0,0,0,.85),
    0 0 40px -10px rgba(255,140,70,.25) !important;
}
.csc:hover::before{ opacity: 1; }
.csc:hover::after{ transform: scaleX(1); }

/* Active (non-placeholder) cards: warm orange stat + glow */
.csc:not(.csc-placeholder) .csc-s{
  background: linear-gradient(135deg, #ffd2a3 0%, #ff9d5c 55%, #ff7a3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 4px 18px rgba(255,140,70,.35));
}
.csc:not(.csc-placeholder) .csc-a{
  color: #ffb06e !important;
}

/* Placeholder cards: keep them muted but lift them off the void */
.csc-placeholder{
  background:
    linear-gradient(160deg, rgba(22,14,30,.55) 0%, rgba(12,8,18,.5) 100%) !important;
  border-color: rgba(255,255,255,.04) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 14px 36px -24px rgba(0,0,0,.6) !important;
}
.csc-placeholder::before{ opacity: .25; }
.csc-placeholder:hover::before{ opacity: .45; }

/* v17: ensure Selected Work tile images render (override later gradient rules) */
#workGrid .p1{background:#0f0a1a url('/__l5e/assets-v1/cf6d4262-06a4-4cc2-b7da-1a004cb57ab5/playgro_kid.png') center/cover no-repeat !important}
#workGrid .p2{background:#0f0a1a url('/__l5e/assets-v1/74acf57c-2573-480d-8294-e7714f89ba3e/mochi_dog.jpg') center/cover no-repeat !important}
#workGrid .p3{background:#0f0a1a url('/__l5e/assets-v1/2bea9f2c-1b2d-47bf-a7d9-0dc2353d6b2b/appliances_fridge.jpg') center/cover no-repeat !important}
#workGrid .p4{background:#0f0a1a url('/__l5e/assets-v1/34423942-5dee-4320-86fc-c6dbaf8437a0/granthelp_einstein.jpg') center/cover no-repeat !important}
#workGrid .p5{background:#0f0a1a url('/__l5e/assets-v1/a9b58955-3114-440e-a260-cdef58664614/iyd_lavalamp.jpg') center/cover no-repeat !important}
#workGrid .p6{background:#0f0a1a url('/__l5e/assets-v1/7818e02b-051c-49d0-9ac5-1da25089bcf4/jll_laptop.png') center/cover no-repeat !important}
#workGrid .p7{background:#0f0a1a url('/__l5e/assets-v1/665f927b-72da-4ce1-ae79-a983ddac0c2b/ppi_ocd_conops.png') center/cover no-repeat !important}
#workGrid .p8{background:#0f0a1a url('/__l5e/assets-v1/3e76c82c-aefc-443d-9057-e6054f269793/motorsport_sim.jpg') center/cover no-repeat !important}

/* v18: clean tile edges + stronger bottom overlay for legible labels */
#workGrid .pi{background-clip:padding-box !important;border:0 !important;isolation:isolate}
#workGrid .pi::before{background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 28%) !important}
#workGrid .pi .po{background:linear-gradient(to top,rgba(4,4,9,.95) 0%,rgba(4,4,9,.78) 28%,rgba(4,4,9,.35) 55%,transparent 78%) !important;padding:22px 20px !important}

/* ============================================================
   v23 — body copy size bump (under headings)
   ============================================================ */
.hs{font-size:17px!important;line-height:1.75!important;max-width:460px!important}
.hero .hs{font-size:17px!important;line-height:1.75!important;max-width:620px!important}
.wc-info p{font-size:15px!important;line-height:1.65!important}
.eco-card p{font-size:15px!important;line-height:1.6!important}
.mcc p{font-size:15px!important;line-height:1.75!important}
.ppnl .pt p{font-size:15px!important;line-height:1.75!important}
.pd .dt{font-size:14px!important}
.sv p{font-size:14px!important;line-height:1.65!important}
.cta p{font-size:16px!important}
.logos p{font-size:11px!important;letter-spacing:3px!important}
.po span,.csc-sl,.csc-a{font-size:10px!important}
.csc-n{font-size:19px!important}
.po h3{font-size:20px!important}
@media(min-width:1400px){
  #mirazzle-hero-collage-mount{min-height:88vh}
}

/* v23 — section eyebrow label bump */
.sl{font-size:13px!important;letter-spacing:3.5px!important}

/* v24 — case study cards: tighter padding, larger brand name, inviting CTA */
.csg{gap:16px!important}
.csc{
  padding:22px 22px 20px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  min-height:auto!important;
}
.csc .csc-s{font-size:clamp(34px,3.4vw,44px)!important;line-height:1.05!important;margin-bottom:2px!important}
.csc .csc-sl{margin-bottom:14px!important;margin-top:0!important;font-size:10px!important;letter-spacing:2px!important}
.csc .csc-n{font-size:24px!important;font-weight:600!important;line-height:1.2!important;margin:0 0 14px!important}
.csc .csc-a{
  margin-top:auto!important;
  padding-top:12px!important;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px!important;
  letter-spacing:2px!important;
  font-weight:500!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.csc .csc-a span{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,176,110,.12);
  transition:transform .35s ease, background .35s ease;
}
.csc:hover .csc-a span{transform:translateX(4px);background:rgba(255,176,110,.22)}
.csc-placeholder .csc-a span{background:rgba(255,255,255,.05)}



/* v25 — floating music player (sits left of scroll medallion) */
.mz-music{
  position:fixed!important;
  inset:auto 104px 29px auto!important; /* left of the 64px scroll medallion: 24 right + 64 width + 16 gap */
  z-index:2600!important;
  display:flex;align-items:center;gap:12px;
  padding:9px 14px 9px 9px;
  border:none;cursor:pointer;
  background:linear-gradient(140deg,rgba(22,14,30,.92) 0%,rgba(12,8,18,.88) 100%);
  border-radius:999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 44px -18px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,176,110,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#f6f0fa;
  font-family:var(--fm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mz-music:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 24px 56px -18px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,176,110,.35),
    0 0 32px -6px rgba(255,140,70,.35);
}
.mz-music-icon{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#ffd2a3 0%,#ff9d5c 55%,#ff7a3a 100%);
  color:#1a0e08;
  box-shadow:0 6px 16px -4px rgba(255,140,70,.55);
  flex:0 0 auto;
}
.mz-music[data-playing="1"] .mz-music-icon{
  box-shadow:0 6px 22px -4px rgba(255,140,70,.85), 0 0 0 4px rgba(255,140,70,.12);
}
.mz-music-meta{
  display:flex;flex-direction:column;gap:1px;line-height:1;text-align:left;
  min-width:0;
}
.mz-music-eyebrow{
  font-size:8px;letter-spacing:2px;text-transform:uppercase;
  color:#f6c18a;font-weight:500;
}
.mz-music-title{
  font-family:var(--fd);
  font-size:13px;font-weight:500;color:#fbf4ff;
  white-space:nowrap;
}
.mz-music-bars{
  display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:2px;
}
.mz-music-bars i{
  display:block;width:2px;height:4px;background:#ffb06e;border-radius:1px;
  opacity:.4;
}
.mz-music-bars[data-on="1"] i{
  opacity:1;
  animation:mzBars 1s ease-in-out infinite;
}
.mz-music-bars[data-on="1"] i:nth-child(2){animation-delay:.15s}
.mz-music-bars[data-on="1"] i:nth-child(3){animation-delay:.3s}
.mz-music-bars[data-on="1"] i:nth-child(4){animation-delay:.45s}
@keyframes mzBars{
  0%,100%{height:4px}
  50%{height:13px}
}
.mz-music-mute{
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  color:rgba(246,240,250,.55);
  background:rgba(255,255,255,.04);
  margin-left:2px;
  transition:color .2s,background .2s;
  cursor:pointer;
}
.mz-music-mute:hover{color:#ffb06e;background:rgba(255,176,110,.12)}
@media(max-width:640px){
  .mz-music{inset:auto 110px 22px auto!important;padding:7px 12px 7px 7px}
  .mz-music-meta{display:none}
}
/* v27 — hero eyebrow size bump */
.hero .hl{font-size:18px!important;letter-spacing:4px!important}
@media(max-width:640px){.hero .hl{font-size:14px!important;letter-spacing:3px!important}}

/* v31 — Selected Work tile labels: deliberately large and unmistakable */
section#work #workGrid.pg .pi .po{
  padding:28px 24px!important;
}
section#work #workGrid.pg .pi .po h3{
  font-size:28px!important;
  line-height:1.05!important;
  margin-bottom:8px!important;
  max-width:100%!important;
}
section#work #workGrid.pg .pi .po span{
  display:block!important;
  font-size:16px!important;
  line-height:1.15!important;
  letter-spacing:2.2px!important;
}
@media(max-width:640px){
  section#work #workGrid.pg .pi .po{padding:18px 16px!important}
  section#work #workGrid.pg .pi .po h3{font-size:22px!important}
  section#work #workGrid.pg .pi .po span{font-size:11px!important;letter-spacing:1.6px!important}
}

/* Hero text size bump */
.hero .hl{font-size:28px!important;letter-spacing:4.5px!important;margin-bottom:26px!important}
.hero .hs{font-size:25px!important;line-height:1.7!important;max-width:760px!important}
@media(max-width:640px){
  .hero .hl{font-size:18px!important;letter-spacing:3px!important}
  .hero .hs{font-size:20px!important}
}

/* ============================================================
   v34 — Lead capture form (free sample asset pack)
   Sits inside #contact, before the Start a conversation button.
   ============================================================ */
.lead-card{
  position:relative;margin:48px auto 0;max-width:780px;width:100%;
  padding:44px 44px 40px;border-radius:24px;
  background:linear-gradient(180deg,rgba(28,18,40,.78) 0%,rgba(18,12,28,.92) 100%);
  border:1px solid rgba(255,176,110,.18);
  box-shadow:
    0 30px 80px -30px rgba(255,122,58,.28),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 60px 120px -40px rgba(0,0,0,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-align:left;overflow:hidden;
}
.lead-card::before{
  content:"";position:absolute;inset:-1px;border-radius:24px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,210,163,.35),rgba(255,122,58,.05) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.7;
}
.lead-eyebrow{
  font-family:var(--fm,'JetBrains Mono',monospace);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:#ffb06e;margin-bottom:18px;opacity:.9;
}
.lead-headline{
  font-family:var(--fd,'Clash Display','Syne',sans-serif);
  font-weight:500;
  font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-1.5px;
  color:#fff;margin:0 0 16px;text-align:left;
}
.lead-headline em{
  font-style:normal;
  background:linear-gradient(135deg,#ffd2a3 0%,#ff9d5c 55%,#ff7a3a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:0 0 40px rgba(255,157,92,.35);
  filter:drop-shadow(0 0 18px rgba(255,122,58,.28));
}

.lead-sub{
  font-size:15px;line-height:1.65;color:rgba(238,229,245,.7);
  margin:0 0 30px;max-width:560px;text-align:left;
}
.lead-form{display:flex;flex-direction:column;gap:18px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lf-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.lf-field-full{width:100%}
.lf-label{
  font-family:var(--fm,'JetBrains Mono',monospace);
  font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(238,229,245,.55);
}
.lf-opt{text-transform:none;letter-spacing:.5px;color:rgba(238,229,245,.35);font-size:10.5px}
.lf-input{
  width:100%;box-sizing:border-box;
  padding:14px 16px;font-size:15px;color:#fff;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;font-family:inherit;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
  outline:none;
}
.lf-input::placeholder{color:rgba(238,229,245,.28)}
.lf-input:hover{border-color:rgba(255,176,110,.28);background:rgba(255,255,255,.045)}
.lf-input:focus{
  border-color:rgba(255,157,92,.65);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 4px rgba(255,122,58,.12),0 0 22px -4px rgba(255,122,58,.35);
}
.lf-textarea{resize:vertical;min-height:120px;line-height:1.55}
.lf-error{
  min-height:0;font-size:13px;color:#ff9b9b;
  font-family:var(--fm,'JetBrains Mono',monospace);letter-spacing:.4px;
}
.lf-error:empty{display:none}
.lf-submit{
  position:relative;margin-top:6px;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:240px;cursor:pointer;
}
.lf-submit[disabled]{opacity:.7;cursor:wait}
.lf-submit-spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(0,0,0,.25);border-top-color:#1a0f24;
  display:none;animation:lfspin .7s linear infinite;
}
.lf-submit.is-loading .lf-submit-spinner{display:inline-block}
.lf-submit.is-loading .lf-submit-text{opacity:.85}
@keyframes lfspin{to{transform:rotate(360deg)}}

.lead-success{
  text-align:center;padding:30px 10px 14px;
  animation:lf-fade-up .6s ease both;
}
.lead-success-mark{
  font-size:34px;line-height:1;margin:0 auto 14px;
  background:linear-gradient(135deg,#ffd2a3 0%,#ff9d5c 55%,#ff7a3a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(255,122,58,.45));
}
.lead-success-title{
  font-family:var(--fd,'Clash Display','Syne',sans-serif);font-weight:500;
  font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-1px;color:#fff;margin:0 0 10px;
}

.lead-success-sub{font-size:14px;color:rgba(238,229,245,.62);margin:0}
@keyframes lf-fade-up{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:640px){
  .lead-card{padding:30px 22px 28px;margin-top:36px;border-radius:20px}
  .lf-row{grid-template-columns:1fr;gap:14px}
  .lf-submit{width:100%;align-self:stretch}
  .lead-headline{font-size:clamp(26px,7vw,34px)}
}

/* v35 — Lead intro above card, centered */
.lead-intro{max-width:900px;margin:0 auto;text-align:center;padding:0 20px}
.lead-eyebrow-center{text-align:center;margin-bottom:22px}
.lead-headline-center{text-align:center;margin:0 auto;max-width:900px}
.lead-card{margin-top:36px}

/* v36 — Form intro line */
.lead-form-intro{
  font-size:15px;line-height:1.6;color:rgba(238,229,245,.78);
  margin:0 0 26px;text-align:left;
}

/* v37 — One-line headline + larger intro */
.lead-headline-center{
  white-space:nowrap;
  font-size:clamp(24px,4.2vw,52px);
  letter-spacing:-1.4px;
}
.lead-form-intro{font-size:17px;line-height:1.6;margin-bottom:30px}
@media(max-width:760px){
  .lead-headline-center{white-space:normal;font-size:clamp(28px,7vw,38px)}
  .lead-form-intro{font-size:15px}
}

/* v41 — match #wc eyebrow color/size to #work eyebrow */
section#wc > .rv > .sl{
  color:#ffb06e !important;
  font-size:16px !important;
  letter-spacing:3.5px !important;
}

/* v42 — mobile polish: keep nav links visible + stop titles breaking mid-word */
.st, .cta h2, .lead-headline, .hero h1, .wc-info h3, .po h3, .sv h3, .csc-n{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}
@media(max-width:760px){
  /* Re-show the nav links on mobile as a tight wrapped row */
  nav .nk{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    align-items:center !important;
    max-width:62vw;
  }
  nav .nk a{ font-size:10px !important; letter-spacing:1.2px !important; }
  nav .nk .nc{ padding:8px 12px !important; font-size:10px !important; }
  /* Slightly tighter title sizing so long words fit cleanly on phones */
  .st{ font-size:clamp(24px,7.6vw,40px) !important; letter-spacing:-.3px !important; }
  .cta h2, .lead-headline{ font-size:clamp(26px,7.8vw,40px) !important; }
}


/* ===== Case study card brand logos + hue overlay ===== */
.csc{ position:relative; overflow:hidden; isolation:isolate; }
.csc > .csc-s, .csc > .csc-sl, .csc > .csc-n, .csc > .csc-a{ position:relative; z-index:3; }
.csc-hue{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.85; transition:opacity .5s ease, transform .8s ease;
  mix-blend-mode:screen;
}
.csc:hover .csc-hue{ opacity:1; transform:scale(1.05); }
.csc-logo{
  position:absolute; left:50%; bottom:22%; transform:translateX(-50%);
  z-index:2; width:54%; height:24%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.45));
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.csc-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.csc:hover .csc-logo{ filter:drop-shadow(0 12px 32px rgba(0,0,0,.55)); }
.csc:hover .csc-logo img{ transform:scale(1.06) !important; }

@media (max-width:760px){
  .csc-logo{ width:50%; height:22%; bottom:24%; }
}


/* Hide "Get in touch" nav CTA on mobile to free space for nav links */
@media(max-width:760px){
  nav .nk .nc{ display:none !important; }
}

/* PPI tile: full name on desktop, abbreviated on mobile */
.ppi-short{ display:none; }
@media(max-width:760px){
  .ppi-full{ display:none; }
  .ppi-short{ display:inline; }
}