:root{
  --bg:#090909;
  --fg:#f1eee7;
  --muted:#96938d;
  --line:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.tiny,.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase}

.hero{position:relative;min-height:100svh;overflow:hidden;background:#111}
.heroVideo,.videoFallback,.grain,.shade{position:absolute;inset:0;width:100%;height:100%}
.heroVideo{z-index:1;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.72)}
.videoFallback{z-index:0;background:
radial-gradient(circle at 22% 28%,rgba(255,255,255,.1),transparent 26%),
linear-gradient(135deg,#1f1f1f,#070707 52%,#2a2a2a)}
.grain{z-index:3;pointer-events:none;opacity:.11;background-image:repeating-radial-gradient(circle at 0 0,transparent 0,rgba(255,255,255,.18) 1px,transparent 2px);background-size:4px 4px;mix-blend-mode:soft-light}
.shade{z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.08) 42%,rgba(0,0,0,.6))}
nav{position:absolute;z-index:5;top:0;left:0;width:100%;padding:28px 34px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.brand{font-weight:800}.navRight{display:flex;gap:30px}
.heroCopy{position:relative;z-index:4;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 34px 34px}
.hero h1{margin:18px 0 24px;max-width:1500px;font-size:clamp(58px,10.3vw,168px);line-height:.82;letter-spacing:-.072em}
.heroBottom{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(255,255,255,.34);padding-top:18px}
.heroBottom p{margin:0;font-size:clamp(14px,1.3vw,20px);line-height:1.35;color:rgba(255,255,255,.82)}
.circleLink{width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;font-size:22px}

.statement{padding:150px 34px 170px;background:#f0ede4;color:#101010}
.statement h2,.studio h2,.contact h2{font-size:clamp(48px,7.7vw,128px);line-height:.88;letter-spacing:-.064em;margin:24px 0 50px}
.statement .lead{max-width:720px;margin-left:auto;font-size:clamp(21px,2.2vw,36px);line-height:1.18}

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0 17px;white-space:nowrap}
.tickerTrack{width:max-content;font-size:14px;letter-spacing:.14em;animation:ticker 28s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}

/* FIXED SERVICES GRID */
.services{padding:40px 34px 120px}
.service{
  display:grid;
  grid-template-columns:52px minmax(0,1.05fr) minmax(360px,.95fr);
  column-gap:clamp(42px,5vw,110px);
  align-items:start;
  padding:52px 0 64px;
  border-bottom:1px solid var(--line);
}
.serviceIndex{font-size:12px;color:var(--muted);padding-top:8px}
.serviceTitle{
  min-width:0;
  max-width:100%;
  font-size:clamp(56px,6.45vw,114px);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:800;
  overflow-wrap:normal;
  white-space:nowrap;
}
.serviceTitleAI{white-space:normal;display:flex;flex-direction:column}
.serviceTitleAI span{display:block}
.serviceBody{
  min-width:0;
  max-width:620px;
  padding-top:6px;
}
.serviceBody p{
  margin:0 0 30px;
  font-size:clamp(21px,1.95vw,33px);
  line-height:1.14;
  letter-spacing:-.025em;
}
.serviceBody span{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--muted)
}

.cinemaBreak{position:relative;height:180vh;overflow:clip;background:#080808}
.cinemaVideo,.cinemaFallback,.cinemaShade{position:absolute;inset:0;width:100%;height:100%}
.cinemaVideo{z-index:1;object-fit:cover;filter:saturate(.75) brightness(.58)}
.cinemaFallback{z-index:0;background:radial-gradient(circle at 70% 35%,#3a3a3a 0,#101010 32%,#050505 70%)}
.cinemaShade{z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.58))}
.cinemaSticky{position:sticky;z-index:3;top:0;height:100vh;padding:34px;display:flex;flex-direction:column;justify-content:center}
.frameLabel{font-size:10px;letter-spacing:.18em;color:var(--muted);margin-bottom:18px}
.frameText{font-size:clamp(52px,9vw,148px);line-height:.79;letter-spacing:-.065em;font-weight:800;display:flex;flex-direction:column}
.frameText i{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin-left:16vw}

.studio{background:#eeeae0;color:#111;padding:140px 34px 120px}
.studioGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:80px}
.studioCopy{align-self:end;padding-bottom:55px}
.studioCopy p{font-size:clamp(18px,1.7vw,27px);line-height:1.28;margin:0 0 28px}
.pillars{margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(0,0,0,.25)}
.pillars>div{padding:24px 28px 12px 0;min-height:260px;border-right:1px solid rgba(0,0,0,.18)}
.pillars>div:nth-child(2),.pillars>div:last-child{padding-left:28px}
.pillars>div:last-child{border-right:none}
.pillars span{display:block;font-size:11px;margin-bottom:78px}
.pillars strong{display:block;font-size:28px;letter-spacing:-.035em}
.pillars p{max-width:320px;font-size:15px;line-height:1.35}

.contact{padding:150px 34px 30px;min-height:100vh;display:flex;flex-direction:column}
.contact h2{margin-bottom:70px}
.contactForm{max-width:1000px;margin-left:auto;width:100%}
.fieldRow{display:grid;grid-template-columns:1fr 1fr;gap:26px}
label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.28);background:transparent;color:var(--fg);padding:14px 0 17px;margin:8px 0 30px;font:inherit;font-size:19px;outline:none;border-radius:0}
input:focus,textarea:focus{border-bottom-color:rgba(255,255,255,.8)}
textarea{resize:vertical}
button{border:1px solid rgba(255,255,255,.65);background:transparent;color:var(--fg);padding:17px 24px;font-size:12px;letter-spacing:.14em;cursor:pointer}
button:hover{background:var(--fg);color:#0a0a0a}
.formStatus{margin-top:18px;font-size:14px;min-height:20px}
.honeypot{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}
footer{margin-top:auto;padding-top:120px;display:grid;grid-template-columns:1fr auto 1fr;border-top:1px solid var(--line);gap:20px;font-size:10px;letter-spacing:.13em}
footer span:last-child{text-align:right}

/* Mid-size desktop: protect text columns */
@media (max-width:1280px){
  .service{
    grid-template-columns:42px minmax(0,.92fr) minmax(340px,1.08fr);
    column-gap:48px;
  }
  .serviceTitle{font-size:clamp(50px,5.6vw,76px)}
  .serviceBody p{font-size:clamp(20px,2vw,27px)}
}

/* Tablet */
@media (max-width:900px){
  nav{padding:22px 20px}.navRight{display:none}
  .heroCopy{padding:22px 20px 24px}.hero h1{font-size:clamp(56px,17vw,96px)}
  .statement,.studio,.contact{padding-left:20px;padding-right:20px}
  .services{padding-left:20px;padding-right:20px}
  .service{
    grid-template-columns:34px minmax(0,1fr);
    row-gap:24px;
    column-gap:18px;
  }
  .serviceTitle{
    font-size:clamp(54px,11vw,96px);
    white-space:normal;
  }
  .serviceBody{
    grid-column:2;
    max-width:700px;
    padding-top:0;
  }
  .serviceBody p{font-size:clamp(20px,3.3vw,30px)}
  .studioGrid{grid-template-columns:1fr;gap:10px}
  .studioCopy{max-width:680px}
  .pillars{grid-template-columns:1fr}
  .pillars>div,.pillars>div:nth-child(2),.pillars>div:last-child{border-right:none;border-bottom:1px solid rgba(0,0,0,.18);padding:24px 0;min-height:190px}
  .pillars span{margin-bottom:50px}
  .cinemaSticky{padding:20px}
  .frameText i{margin-left:6vw}
  footer{grid-template-columns:1fr;padding-top:90px}
  footer span:last-child{text-align:left}
}

@media (max-width:620px){
  .hero{min-height:92svh}.heroCopy{min-height:92svh}
  .hero h1{letter-spacing:-.06em}
  .circleLink{width:48px;height:48px}
  .statement{padding-top:105px;padding-bottom:115px}
  .statement h2,.studio h2,.contact h2{font-size:clamp(44px,14vw,70px)}
  .service{padding:38px 0 46px}
  .serviceTitle{font-size:13.6vw}
  .serviceBody p{font-size:20px}
  .fieldRow{grid-template-columns:1fr}
  .frameText{font-size:15vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tickerTrack{animation:none}
}

/* V3 — animated logo lockup */
.siteHeader{position:fixed;z-index:100;top:0;left:0;width:100%;height:100px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.siteHeader a{pointer-events:auto}.logoLockup{display:flex;align-items:center;color:#fff;height:72px}.logoMark{position:relative;z-index:3;width:80px;height:64px;display:grid;place-items:center;flex:0 0 auto}.logoMark:before{content:"";position:absolute;inset:-8px -6px;background:rgba(8,8,8,.76);backdrop-filter:blur(7px);border-radius:12px;opacity:calc(.08 + var(--headerProgress,0)*.92)}.logoMark img{position:relative;z-index:2;width:80px;height:auto;display:block}.wordmark{position:relative;z-index:1;margin-left:12px;display:flex;flex-direction:column;white-space:nowrap;transform:translateX(calc(var(--headerProgress,0)*-190px));opacity:calc(1 - var(--headerProgress,0)*.96)}.wordmark strong{font-size:19px;line-height:1;font-weight:800;letter-spacing:.045em}.wordmark small{font-size:9px;line-height:1;margin-top:6px;letter-spacing:.36em;font-weight:700}.siteHeader .navRight{display:flex;gap:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.legalLinks{white-space:nowrap}
@media(max-width:900px){.siteHeader{height:82px;padding:10px 16px}.logoMark{width:66px;height:54px}.logoMark img{width:66px}.wordmark{margin-left:8px;transform:translateX(calc(var(--headerProgress,0)*-155px))}.wordmark strong{font-size:16px}.wordmark small{font-size:8px}.siteHeader .navRight{display:none}}

/* V4 — cinema sound control */
.soundToggle{
  position:sticky;top:calc(100vh - 78px);float:right;z-index:8;
  margin-right:28px;margin-top:28px;
  display:flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.48);border-radius:999px;
  padding:10px 13px 9px;background:rgba(8,8,8,.38);backdrop-filter:blur(10px);
  color:#fff;font-size:10px;letter-spacing:.16em;line-height:1;cursor:pointer;
}
.soundToggle:hover{background:rgba(8,8,8,.7);color:#fff}
.soundDot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;box-shadow:0 0 0 0 rgba(255,255,255,0)}
.soundToggle[aria-pressed="true"] .soundDot{opacity:1;box-shadow:0 0 10px rgba(255,255,255,.7)}
@media(max-width:620px){.soundToggle{margin-right:16px;top:calc(100svh - 68px)}}

/* V4 footer */
footer{grid-template-columns:1fr auto auto 1fr}
.legalLinks{display:flex;gap:18px;white-space:nowrap}
@media(max-width:900px){footer{grid-template-columns:1fr 1fr}.legalLinks{justify-content:flex-end}footer span:last-child{text-align:left}}
@media(max-width:620px){footer{grid-template-columns:1fr}.legalLinks{justify-content:flex-start}}
.legalPage{max-width:1050px;padding:60px 34px 120px}
.legalPage>a{font-size:11px;letter-spacing:.15em}
.legalPage h1{font-size:clamp(64px,12vw,180px);letter-spacing:-.07em;line-height:.8;margin:110px 0 75px}
.legalPage h2{font-size:clamp(26px,3vw,42px);letter-spacing:-.035em;margin:54px 0 16px}
.legalPage p{max-width:760px;font-size:19px;line-height:1.5;color:#d9d5cd}
.legalPage strong{color:#fff}.legalNote{color:#8f8c86!important;font-size:15px!important;margin-top:60px}
/* V4 layout corrections */
:root{--headerProgress:0}
.siteHeader nav.navRight{position:static;top:auto;left:auto;width:auto;padding:0;justify-content:flex-start}
.soundToggle{position:absolute;right:28px;bottom:28px;top:auto;float:none;margin:0}
@media(max-width:620px){.soundToggle{right:16px;bottom:16px;top:auto;margin:0}}

/* V5 — refined interactive brand mark */
.logoMark{width:92px!important;height:66px!important;overflow:visible}
.logoMark:before{inset:-7px -5px!important}
.brandIcon{position:relative;z-index:2;width:92px;height:auto;display:block;overflow:visible;color:#fff}
.rgbField{isolation:isolate}
.orb,.orbGlow{mix-blend-mode:screen;transform-box:fill-box;transform-origin:center}
.orbGlow{opacity:.52}
.orbCore{mix-blend-mode:screen;opacity:.78;transform-box:fill-box;transform-origin:center}
@keyframes ckOrbR{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(-3px,7px) scale(1.05)}58%{transform:translate(4px,9px) scale(.97)}82%{transform:translate(5px,2px) scale(1.03)}}
@keyframes ckOrbG{0%,100%{transform:translate(0,0) scale(1)}28%{transform:translate(6px,-4px) scale(.98)}56%{transform:translate(9px,-8px) scale(1.06)}80%{transform:translate(2px,-6px) scale(1.01)}}
@keyframes ckOrbB{0%,100%{transform:translate(0,0) scale(1)}24%{transform:translate(-7px,-2px) scale(1.04)}54%{transform:translate(-10px,-7px) scale(.98)}79%{transform:translate(-3px,3px) scale(1.06)}}
@keyframes ckCore{0%,100%{opacity:.56;transform:scale(.72)}45%{opacity:1;transform:scale(1.28)}67%{opacity:.84;transform:scale(.98)}}
.orbR,.orbGlowR{animation:ckOrbR 8.6s cubic-bezier(.45,0,.55,1) infinite}
.orbG,.orbGlowG{animation:ckOrbG 9.4s cubic-bezier(.45,0,.55,1) infinite}
.orbB,.orbGlowB{animation:ckOrbB 8s cubic-bezier(.45,0,.55,1) infinite}
.orbCore{animation:ckCore 4.8s ease-in-out infinite}
.wordmark{margin-left:14px!important}
.wordmark strong{display:block;min-width:0;transition:opacity .14s ease,transform .14s ease;font-size:20px!important;line-height:.95!important}
.wordmark strong.fontChanging{opacity:.1;transform:translateY(2px)}
.fontMode0{font-family:Arial Black,Arial,Helvetica,sans-serif;font-weight:900!important;letter-spacing:.02em!important}
.fontMode1{font-family:Georgia,'Times New Roman',serif;font-weight:700!important;letter-spacing:-.035em!important}
.fontMode2{font-family:'Courier New',Courier,monospace;font-weight:700!important;letter-spacing:-.05em!important}
.fontMode3{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:400!important;letter-spacing:.055em!important}
.fontMode4{font-family:'Trebuchet MS',Arial,sans-serif;font-weight:700!important;letter-spacing:-.025em!important}
.fontMode5{font-family:'Times New Roman',Times,serif;font-weight:700!important;font-style:italic;letter-spacing:-.045em!important}
.fontMode6{font-family:Verdana,Geneva,sans-serif;font-weight:700!important;letter-spacing:-.055em!important}
.fontMode7{font-family:Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-weight:700!important;letter-spacing:-.07em!important}

/* V5 — contact success state */
.contactForm{position:relative;min-height:470px;overflow:hidden}
.thanksPanel{position:absolute;inset:0;z-index:8;background:#090909;display:flex;align-items:center;justify-content:flex-start;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease,visibility .35s}
.thanksPanel.isVisible{opacity:1;visibility:visible;transform:translateY(0)}
.thanksInner strong{display:block;font-size:clamp(82px,12vw,190px);line-height:.78;letter-spacing:-.075em}
.thanksInner span{display:block;margin-top:28px;font-size:clamp(18px,2vw,30px);color:var(--muted)}
.formStatus.isError{color:#fff;max-width:650px;line-height:1.4}
.contactForm button:disabled{opacity:.5;cursor:wait}
@media(max-width:900px){.logoMark{width:76px!important;height:56px!important}.brandIcon{width:76px}.wordmark strong{font-size:17px!important}.contactForm{min-height:430px}}
@media(max-width:620px){.logoMark{width:68px!important}.brandIcon{width:68px}.wordmark strong{font-size:15px!important}.thanksInner strong{font-size:24vw}}
@media(prefers-reduced-motion:reduce){.orbR,.orbGlowR,.orbG,.orbGlowG,.orbB,.orbGlowB,.orbCore{animation:none}.wordmark strong{transition:none}}

/* V7 — adaptive compact logo */
:root{--headerInk:#fff;--headerScale:1;--neonBg:#f0ede4;--neonInk:#101010}
.logoLockup,.siteHeader .navRight{color:var(--headerInk)!important;transition:color .25s ease}
.logoMark{width:78px!important;height:68px!important;transform:scale(calc(1 - var(--headerProgress,0)*.28));transform-origin:left center;transition:color .25s ease}
.brandIcon{width:78px!important;color:var(--headerInk)!important;transition:color .25s ease}
.logoMark:before{display:none!important}
.wordmark{margin-left:9px!important}
.wordmark strong{font-size:19px!important}
.wordmark small{font-size:8px!important}
@media(max-width:900px){.logoMark{width:68px!important;height:60px!important}.brandIcon{width:68px!important}.wordmark strong{font-size:16px!important}}
@media(max-width:620px){.logoMark{width:61px!important}.brandIcon{width:61px!important}.wordmark strong{font-size:14px!important}}

/* V7 — neon scroll field */
.neonStatement{height:260vh;padding:0!important;background:var(--neonBg)!important;color:var(--neonInk)!important;position:relative;transition:background-color .08s linear;color:#101010}
.statementSticky{position:sticky;top:0;min-height:100vh;padding:clamp(110px,11vh,170px) 34px 80px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);grid-template-rows:auto 1fr;column-gap:clamp(50px,7vw,150px);align-content:center;overflow:hidden}
.statementSticky .tiny{grid-column:1/-1;margin:0 0 30px}
.statementSticky h2{grid-column:1;margin:0!important;align-self:center;font-size:clamp(60px,8.2vw,136px)!important;line-height:.82!important;max-width:1500px}
.statementSticky .lead{grid-column:2;margin:0!important;align-self:end;max-width:650px!important;padding-bottom:3vh;font-size:clamp(20px,2vw,34px)!important}
.scrollCue{position:absolute;right:26px;top:50%;transform:translateY(-50%);height:170px;width:24px;display:flex;align-items:center;flex-direction:column;color:currentColor;opacity:.8}
.scrollCue span{font-size:10px;letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg)}
.scrollCue i{display:block;width:1px;flex:1;background:currentColor;margin:12px 0 0}
.scrollCue b{display:block;width:12px;height:12px;border:1px solid currentColor;border-radius:50%;font-weight:400}
@media(max-width:900px){.neonStatement{height:220vh}.statementSticky{padding-left:20px;padding-right:20px;grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center}.statementSticky .tiny,.statementSticky h2,.statementSticky .lead{grid-column:1}.statementSticky .lead{margin-top:54px!important;max-width:680px!important;justify-self:end}.scrollCue{display:none}}

/* V7 — giant rainbow lightning bolt */
.studio{position:relative;overflow:hidden;isolation:isolate}
.studioGrid,.pillars{position:relative;z-index:3}
.rainbowBolt{position:absolute;z-index:1;left:24%;top:-16%;width:58%;height:132%;opacity:.88;pointer-events:none;filter:drop-shadow(0 0 35px rgba(255,0,220,.18));background:linear-gradient(128deg,#ff19c9 2%,#ff3347 18%,#ff8a00 31%,#fff000 43%,#8cff00 55%,#00eacb 68%,#00a8ff 80%,#5b41ff 91%,#c022ff 100%);clip-path:polygon(44% 0,100% 0,63% 45%,85% 43%,18% 100%,39% 57%,10% 61%);transform:rotate(-4deg);transform-origin:center}
.rainbowBolt:after{content:"";position:absolute;inset:-2%;background:inherit;clip-path:inherit;filter:blur(28px);opacity:.35;z-index:-1}
@media(max-width:900px){.rainbowBolt{left:6%;top:3%;width:115%;height:88%;opacity:.62;transform:rotate(3deg)}}
@media(max-width:620px){.rainbowBolt{left:-24%;top:6%;width:155%;height:72%;opacity:.48}}

/* V8 — scroll-reactive 3D computer mark */
:root{--logoSpin:0deg;--logoTilt:-5deg;--navNeon:#fffe00}
.logoMark{perspective:560px;transform-style:preserve-3d}
.logoModel{
  position:relative;display:grid;place-items:center;width:100%;height:100%;
  transform-style:preserve-3d;
  transform:rotateX(var(--logoTilt)) rotateY(var(--logoSpin));
  transform-origin:50% 48%;
  will-change:transform;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.22));
}
.brandIcon,.brandDepth{grid-area:1/1;backface-visibility:visible;transform-style:preserve-3d}
.brandIcon{position:relative!important;transform:translateZ(7px)}
.brandDepth{
  width:78px;height:auto;color:color-mix(in srgb,var(--headerInk) 42%,#555 58%);
  transform:translate3d(4px,3px,-7px);
  opacity:.72;filter:blur(.15px);
}
@media(max-width:900px){.brandDepth{width:68px}}
@media(max-width:620px){.brandDepth{width:61px}}

/* V8 — randomized neon navigation hover */
.siteHeader .navRight a{
  position:relative;isolation:isolate;padding:10px 13px;margin:-10px -13px;
  transition:color .14s ease,transform .14s ease;
}
.siteHeader .navRight a::before{
  content:"";position:absolute;z-index:-1;inset:2px -5px;
  background:var(--navNeon,#fffe00);
  border-radius:2px;
  transform:scaleX(.18) rotate(-1deg);
  transform-origin:left center;
  opacity:0;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .12s ease;
  box-shadow:0 0 22px color-mix(in srgb,var(--navNeon,#fffe00) 55%,transparent);
}
.siteHeader .navRight a:hover,.siteHeader .navRight a:focus-visible{
  color:#050505!important;transform:translateY(-1px)
}
.siteHeader .navRight a:hover::before,.siteHeader .navRight a:focus-visible::before{
  opacity:1;transform:scaleX(1) rotate(-1deg)
}
@media(prefers-reduced-motion:reduce){.logoModel{transform:none}.siteHeader .navRight a::before{transition:none}}

/* V9 — true WebGL computer mark */
.logoMarkWebGL{
  width:94px!important;
  height:78px!important;
  overflow:visible!important;
  perspective:none!important;
  transform:scale(calc(1 - var(--headerProgress,0)*.28))!important;
  transform-origin:left center!important;
}
.ck3dLogo{
  position:absolute;
  inset:50% auto auto 50%;
  width:106px;
  height:88px;
  transform:translate(-50%,-50%);
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.28));
}
.ck3dFallback{
  position:absolute;
  inset:50% auto auto 50%;
  width:80px!important;
  height:auto;
  transform:translate(-50%,-50%);
  display:block;
  opacity:0;
  pointer-events:none;
}
.logoMarkWebGL.webglFailed .ck3dLogo{display:none}
.logoMarkWebGL.webglFailed .ck3dFallback{opacity:1}
@media(max-width:900px){
  .logoMarkWebGL{width:80px!important;height:68px!important}
  .ck3dLogo{width:91px;height:76px}
  .ck3dFallback{width:68px!important}
}
@media(max-width:620px){
  .logoMarkWebGL{width:72px!important;height:62px!important}
  .ck3dLogo{width:82px;height:69px}
  .ck3dFallback{width:61px!important}
}

/* V10 — 360° WebGL rotation + exact 2D front lockup */
.logoMarkWebGL{--frontOpacity:0}
.ckFrontOverlay{
  position:absolute;
  inset:50% auto auto 50%;
  width:82px;
  height:auto;
  transform:translate(-50%,-50%);
  color:var(--headerInk);
  opacity:var(--frontOpacity);
  z-index:4;
  pointer-events:none;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.18));
  transition:color .25s ease;
}
.ck3dLogo{opacity:calc(1 - var(--frontOpacity) * .82)}
@media(max-width:900px){.ckFrontOverlay{width:70px}}
@media(max-width:620px){.ckFrontOverlay{width:63px}}

/* V11 — SEND PROJECT mascot hover */
.contact{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.contactHeadline,
.contactForm,
.contact footer{
  position:relative;
  z-index:3;
}
.contactMascot{
  position:absolute;
  z-index:1;
  left:clamp(-70px,1vw,18px);
  bottom:clamp(105px,9vw,170px);
  width:clamp(360px,39vw,690px);
  pointer-events:none;
  opacity:0;
  transform:translate3d(-38px,46px,0) scale(.82) rotate(-5deg);
  filter:saturate(1.14) contrast(1.04) drop-shadow(0 0 34px rgba(255,0,190,.22));
  transition:
    opacity .16s ease,
    transform .42s cubic-bezier(.2,.82,.22,1),
    filter .28s ease;
  will-change:opacity,transform;
}
.contactMascot img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
}
.contact.mascotActive .contactMascot{
  opacity:1;
  transform:translate3d(0,0,0) scale(1) rotate(-1.5deg);
  filter:saturate(1.22) contrast(1.05) drop-shadow(0 0 46px rgba(255,226,0,.22)) drop-shadow(0 0 60px rgba(255,0,190,.15));
}
.contactForm button[type="submit"]{
  position:relative;
  z-index:4;
  overflow:hidden;
  transition:
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}
.contactForm button[type="submit"]:hover,
.contactForm button[type="submit"]:focus-visible{
  background:#f6ff00;
  color:#080808;
  border-color:#f6ff00;
  box-shadow:0 0 0 1px #f6ff00,0 0 22px rgba(246,255,0,.36);
  transform:translateY(-1px);
}
.contactForm button[type="submit"]:active{transform:translateY(0)}
@media(max-width:1100px){
  .contactMascot{width:clamp(330px,46vw,560px);left:-55px;bottom:125px}
}
@media(max-width:900px){
  .contactMascot{width:520px;max-width:76vw;left:-75px;bottom:120px}
}
@media(max-width:620px){
  .contactMascot{width:420px;max-width:88vw;left:-94px;bottom:105px;opacity:0}
  .contact.mascotActive .contactMascot{opacity:.88}
}
@media(hover:none){
  .contactMascot{display:none}
}
@media(prefers-reduced-motion:reduce){
  .contactMascot{transition:opacity .12s linear;transform:none}
  .contact.mascotActive .contactMascot{transform:none}
}


/* V12 — SEND PROJECT mascot hover refinement */
.contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:#090909;
  pointer-events:none;
}
.rainbowMascot,
.mascotHover,
.projectMascot{
  filter:drop-shadow(0 0 20px rgba(255,0,180,.24))
         drop-shadow(0 0 34px rgba(0,230,255,.16));
}
.contactForm,
.contactHeadline,
.contact footer{
  position:relative;
  z-index:3;
}
.contact button[type="submit"]{
  position:relative;
  z-index:5;
}
.contact button[type="submit"]:hover{
  background:#fffe00;
  border-color:#fffe00;
  color:#080808;
  box-shadow:0 0 18px rgba(255,254,0,.52),0 0 42px rgba(255,254,0,.18);
}

/* V12 — smaller, optically centered RGB triad */
.logoMark .screenLights,
.logoMark .rgbLights,
.logoMark .rgb-group,
.logoMark .orbs{
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(-4px) scale(.82);
}


/* V13 — front-facing 2D logo RGB optics */
.logoMark .screenLights,
.logoMark .rgbLights,
.logoMark .rgb-group,
.logoMark .orbs{
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(-11px) scale(.76);
}


/* V13 — mobile hero headline refinement */
@media (max-width: 620px){
  .hero h1{
    font-size:clamp(48px,14.2vw,76px);
    line-height:.84;
    letter-spacing:-.064em;
    max-width:94vw;
  }
}
@media (max-width: 390px){
  .hero h1{
    font-size:13.4vw;
  }
}


/* V13 — mascot hover: black background disappears optically */
.rainbowMascot,
.mascotHover,
.projectMascot{
  mix-blend-mode:screen;
  opacity:0;
  filter:
    brightness(1.45)
    saturate(1.35)
    contrast(1.08)
    drop-shadow(0 0 18px rgba(255,0,180,.38))
    drop-shadow(0 0 34px rgba(0,230,255,.26))
    drop-shadow(0 0 52px rgba(255,254,0,.16));
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.2,.8,.2,1),
    filter .24s ease;
}
.contact:has(button[type="submit"]:hover) .rainbowMascot,
.contact:has(button[type="submit"]:hover) .mascotHover,
.contact:has(button[type="submit"]:hover) .projectMascot,
.contactForm:has(button[type="submit"]:hover) ~ .rainbowMascot,
.contactForm:has(button[type="submit"]:hover) ~ .mascotHover,
.contactForm:has(button[type="submit"]:hover) ~ .projectMascot{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
@media (hover:hover) and (pointer:fine){
  .contact button[type="submit"]:hover{
    background:#fffe00;
    color:#080808;
    border-color:#fffe00;
  }
}

.contact.mascot-visible .rainbowMascot,
.contact.mascot-visible .mascotHover,
.contact.mascot-visible .projectMascot{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}


/* V14 — use the real transparent rainbow mascot asset */
.rainbowMascot,
.mascotHover,
.projectMascot{
  mix-blend-mode:normal !important;
  filter:
    drop-shadow(0 0 20px rgba(255,0,180,.28))
    drop-shadow(0 0 38px rgba(0,230,255,.18)) !important;
  opacity:0;
  object-fit:contain;
}
.contact.mascot-visible .rainbowMascot,
.contact.mascot-visible .mascotHover,
.contact.mascot-visible .projectMascot,
.contact:has(button[type="submit"]:hover) .rainbowMascot,
.contact:has(button[type="submit"]:hover) .mascotHover,
.contact:has(button[type="submit"]:hover) .projectMascot{
  opacity:1 !important;
}

/* Keep the mascot vivid and readable, without darkening it */
@media (hover:hover) and (pointer:fine){
  .rainbowMascot,
  .mascotHover,
  .projectMascot{
    transition:opacity .22s ease, transform .34s cubic-bezier(.2,.8,.2,1);
  }
}


/* V15 — RGB triad: centered with generous screen-edge clearance */
.logoMark .screenLights,
.logoMark .rgbLights,
.logoMark .rgb-group,
.logoMark .orbs{
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(-5px) scale(.72) !important;
}


/* V16 — contact hover composition matching the approved mockup */
.contact{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* smoky / pixel-light hover field */
.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  background:
    radial-gradient(circle at 80% 42%, rgba(255,255,255,.94) 0 12%, rgba(255,255,255,.66) 25%, rgba(255,255,255,.14) 48%, transparent 66%),
    radial-gradient(circle at 58% 58%, rgba(240,240,240,.72), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.04) 0 44%, rgba(255,255,255,.22) 55%, rgba(255,255,255,.68) 100%);
  filter:blur(4px);
  mix-blend-mode:screen;
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.0) 0 55%, rgba(255,255,255,.16) 55% 60%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255,255,255,.035) 36px 72px);
  background-size:170px 100%,100% 72px;
  mask-image:linear-gradient(90deg,transparent 25%,black 62%);
}
.contact.mascot-visible::after,
.contact:has(button[type="submit"]:hover)::after{
  opacity:.92;
}
.contact.mascot-visible::before,
.contact:has(button[type="submit"]:hover)::before{
  opacity:.9;
}

/* mascot: smaller, lower, and fully readable */
.rainbowMascot,
.mascotHover,
.projectMascot{
  position:absolute !important;
  z-index:2 !important;
  left:clamp(-10px,1.5vw,30px) !important;
  bottom:-8px !important;
  width:clamp(330px,39vw,680px) !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  opacity:0 !important;
  transform:translate3d(-38px,32px,0) scale(.92) !important;
  mix-blend-mode:normal !important;
  filter:
    saturate(1.08)
    drop-shadow(0 0 22px rgba(255,0,180,.24))
    drop-shadow(0 0 42px rgba(0,220,255,.14)) !important;
  transition:
    opacity .22s ease,
    transform .38s cubic-bezier(.2,.8,.2,1) !important;
}
.contact.mascot-visible .rainbowMascot,
.contact.mascot-visible .mascotHover,
.contact.mascot-visible .projectMascot,
.contact:has(button[type="submit"]:hover) .rainbowMascot,
.contact:has(button[type="submit"]:hover) .mascotHover,
.contact:has(button[type="submit"]:hover) .projectMascot{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}

/* Keep the live form and headline above the hover art */
.contactHeadline,
.contactForm,
.contact footer{
  position:relative;
  z-index:4 !important;
}
.contact button[type="submit"]{
  z-index:5 !important;
}

@media(max-width:900px){
  .rainbowMascot,
  .mascotHover,
  .projectMascot{
    width:min(72vw,520px) !important;
    left:-28px !important;
    bottom:-10px !important;
  }
}
@media(max-width:620px){
  /* Hover art remains desktop/tablet focused; touch layout stays clean */
  .contact::before,
  .contact::after,
  .rainbowMascot,
  .mascotHover,
  .projectMascot{
    display:none !important;
  }
}


/* V17 — clean SEND PROJECT hover, no grid/checker/pixel layer */
.contact::before{
  display:none !important;
  content:none !important;
  background:none !important;
  opacity:0 !important;
}

.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  background:
    radial-gradient(circle at 28% 68%, rgba(255,0,180,.16) 0 10%, transparent 34%),
    radial-gradient(circle at 38% 64%, rgba(0,220,255,.12) 0 12%, transparent 36%),
    radial-gradient(circle at 68% 48%, rgba(255,255,255,.18) 0 8%, rgba(255,255,255,.06) 24%, transparent 52%);
  filter:blur(18px);
  mix-blend-mode:screen;
}

.contact.mascot-visible::after,
.contact:has(button[type="submit"]:hover)::after{
  opacity:1;
}

/* mascot brighter, cleaner, and more prominent */
.rainbowMascot,
.mascotHover,
.projectMascot{
  left:clamp(-6px,1vw,18px) !important;
  bottom:-6px !important;
  width:clamp(390px,42vw,720px) !important;
  opacity:0 !important;
  transform:translate3d(-28px,22px,0) scale(.96) !important;
  mix-blend-mode:normal !important;
  filter:
    brightness(1.12)
    saturate(1.12)
    drop-shadow(0 0 20px rgba(255,0,180,.26))
    drop-shadow(0 0 34px rgba(0,220,255,.16)) !important;
}

.contact.mascot-visible .rainbowMascot,
.contact.mascot-visible .mascotHover,
.contact.mascot-visible .projectMascot,
.contact:has(button[type="submit"]:hover) .rainbowMascot,
.contact:has(button[type="submit"]:hover) .mascotHover,
.contact:has(button[type="submit"]:hover) .projectMascot{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}

/* Keep the background itself pure black */
.contact{
  background:#090909 !important;
}