/* Final UI BUDDY art direction: black + red, smaller clean typography */
:root{--bg:#050505;--panel:#0d0d0f;--line:#421519;--red:#ff202a;--white:#f7f7f7;--muted:#b4a6a6}
html,body{background:#050505!important;color:#f7f7f7!important}
.nav{background:rgba(5,5,6,.94)!important;border-color:#401217!important;color:#f7f7f7!important;backdrop-filter:blur(14px)}
.brand-mark,.brand-mark span,.nav-links a:hover,.nav-links a.active,.kicker,.eyebrow,.text-link:hover{color:#ff202a!important}
.nav-cta,.btn,.btn-red,.button-primary,.mobile-cta a{background:#ff202a!important;border-color:#ff202a!important;color:#fff!important;border-radius:3px!important;box-shadow:0 0 18px #ff202a28!important}
.nav-cta span,.btn span{color:#fff!important}
.hero{width:100%!important;min-height:100svh!important;min-height:100vh!important;height:auto!important;padding:0 0 0!important;background:radial-gradient(ellipse at 72% 38%,#5a0b14 0%,#210609 32%,transparent 58%),radial-gradient(ellipse at 90% 85%,#8a101b 0%,transparent 32%),linear-gradient(115deg,#050505 0%,#0a0506 48%,#160508 100%)!important;border-bottom:1px solid #401217!important;isolation:isolate;overflow:hidden}
.hero:before{content:none!important}.hero:after{content:none!important}
.hero-grid{width:100%!important;max-width:none!important;min-height:calc(100svh - 70px)!important;min-height:calc(100vh - 70px)!important;grid-template-columns:minmax(0,1fr)!important;padding:0 4.2vw!important;align-items:center!important}
.hero-copy{max-width:48%!important;padding:80px 0 24px!important}
.hero h1,.hero-title,.display-title{font-size:clamp(2.7rem,6.8vw,7rem)!important;line-height:.88!important;letter-spacing:-.035em!important;font-weight:900!important;max-width:760px!important;margin:20px 0 18px!important}
.hero h1 .red,.hero h1 em,.hero-title em,.display-title em{color:#ff202a!important;text-shadow:none!important}
.hero-punch{font-size:clamp(14px,1.4vw,20px)!important;line-height:1.2!important;font-weight:800!important;color:#fff!important;letter-spacing:0!important;margin:0 0 12px!important}
.hero-desc{font-size:clamp(11px,.92vw,14px)!important;line-height:1.65!important;color:#d0c7c7!important;max-width:500px!important}
.hero-actions{margin-top:20px!important;gap:16px!important}.btn,.nav-cta{font-size:10px!important;letter-spacing:.02em!important;font-weight:800!important}
.hero-proof{margin-top:22px!important;padding-top:12px!important;border-color:#521a20!important}.proof-number{font-size:clamp(28px,3vw,40px)!important}.hero-proof b{font-size:9px!important}.hero-proof small{font-size:10px!important}
.hero-stage{display:flex!important}.hero-foot,.hero-detail-strip{display:flex!important}
.hero .outline{color:transparent!important;-webkit-text-stroke:1px #f7f7f7!important}
.section,.work-section,.process-section,.faq-section{background:#080808!important;color:#f7f7f7!important}.intro,.services-section,.studio-section{background:#0d090a!important;color:#f7f7f7!important}.lab-section,.final-cta{background:#17090b!important;color:#f7f7f7!important}.principles-section{background:#0b0809!important;color:#f7f7f7!important}
.intro h2,.section-head h2,.services-section h2,.principles-intro h2,.final-cta h2,.process-intro h2,.studio-copy h2,.faq-grid h2{color:#f7f7f7!important;letter-spacing:-.035em!important}
.service-row:hover{background:#1b090b!important}.service-row h3,.process-list h3,.faq-list summary{color:#f7f7f7!important}.service-row,.process-list article,.faq-list details{border-color:#3a161a!important}.work-card,.lab-card,.principle-stage,.studio-grid>div,.studio-grid article{background:#100a0b!important;border-color:#4a191f!important;box-shadow:none!important;color:#f7f7f7!important}
.work-card .tag,.pill,.chip,.studio-facts span{border-color:#4a191f!important;color:#f0dddd!important}.work-card h3,.detail h2{color:#fff!important}.footer{background:#050505!important;color:#f7f7f7!important;border-color:#321217!important}.footer a{color:#ff6068!important}
@media(max-width:900px){.hero-copy{max-width:64%!important}.hero-grid{padding:0 4vw!important}.hero h1{font-size:clamp(2.5rem,7vw,5.5rem)!important}}
@media(max-width:650px){.hero{background-position:58% center!important;min-height:100svh!important}.hero-grid{display:flex!important;align-items:flex-start!important;min-height:100svh!important;padding:68px 5vw 22px!important}.hero-copy{max-width:76%!important;padding:28px 0 0!important}.hero h1{font-size:clamp(2rem,9vw,3.6rem)!important;line-height:.9!important;margin:16px 0!important}.hero-punch{font-size:13px!important}.hero-desc{font-size:10px!important;line-height:1.5!important}.hero-proof{margin-top:16px!important}.nav-links{background:#090607!important}.nav-cta{font-size:8px!important}}

/* Keep all typography as live HTML; background contains atmosphere only. */
.hero-copy{display:block!important}
.hero{background-image:radial-gradient(ellipse at 72% 38%,#5a0b14 0%,#210609 32%,transparent 58%),radial-gradient(ellipse at 90% 85%,#8a101b 0%,transparent 32%),linear-gradient(115deg,#050505 0%,#0a0506 48%,#160508 100%)!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}


/* Layout correction: full hero scene behind separate, live HTML copy. */
.hero{
  min-height:calc(100vh - 80px)!important;
  height:calc(100vh - 80px)!important;
  background-image:linear-gradient(90deg,rgba(4,4,5,.12) 0%,rgba(4,4,5,.02) 55%,rgba(4,4,5,.03) 100%),url('/assets/hero-cinematic.webp?v=artwork-refresh-20261015')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,46%) minmax(0,54%)!important;
  min-height:calc(100vh - 80px)!important;
  height:calc(100vh - 80px)!important;
  align-items:center!important;
  padding:0 4.2vw!important;
}
.hero-copy{position:relative!important;z-index:5!important;max-width:100%!important;padding:0!important;}
.hero-stage{display:none!important;}
.hero-detail-strip{
  position:absolute!important;z-index:6!important;left:4.2vw!important;right:4.2vw!important;bottom:18px!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;
  padding:12px 0 0!important;background:linear-gradient(0deg,rgba(4,4,5,.82),rgba(4,4,5,0))!important;
}
.hero-detail{min-width:0!important;padding:10px 16px!important;border-right:1px solid #ff293d!important;display:flex!important;flex-direction:column!important;gap:6px!important;}
.hero-detail:last-child{border-right:0!important;}
.hero-detail i{font:700 16px var(--mono)!important;letter-spacing:.04em!important;color:#ff4050!important;text-shadow:0 0 8px #ff293d30!important;}
.hero-detail b{font:700 22px var(--display)!important;letter-spacing:.025em!important;color:#fff!important;}
.hero-detail span{font:14px var(--body)!important;line-height:1.5!important;color:#f0e9e9!important;}
.hero-foot{display:none!important;}
@media(max-width:900px){
 .hero,.hero-grid{height:auto!important;min-height:calc(100svh - 70px)!important;}
 .hero-grid{grid-template-columns:minmax(0,58%) minmax(0,42%)!important;padding:0 4vw 110px!important;}
 .hero-copy{max-width:100%!important;}
 .hero-detail-strip{left:3vw!important;right:3vw!important;bottom:12px!important;}
 .hero-detail{padding:8px 10px!important;}
 .hero-detail b{font-size:18px!important;}
 .hero-detail span{font-size:12px!important;}
}
@media(max-width:650px){
 .hero{height:auto!important;min-height:calc(100svh - 69px)!important;background-position:66% center!important;}
 .hero-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;height:auto!important;min-height:calc(100svh - 69px)!important;padding:24px 5vw 150px!important;}
 .hero-copy{max-width:82%!important;padding:0!important;}
 .hero-detail-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:10px!important;left:5vw!important;right:5vw!important;}
 .hero-detail{border-right:1px solid #ff293d!important;border-bottom:1px solid #ff293d55!important;}
 .hero-detail:nth-child(2n){border-right:0!important;}
 .hero-detail:last-child{grid-column:1/-1!important;}
}

/* User-requested +40% scale for the complete left-side hero copy; preserve typeface and layout. */
.hero-copy .eyebrow{font-size:14px!important;letter-spacing:.15em!important;}
.hero-copy h1,.hero-copy .hero-title,.hero-copy .display-title{font-size:clamp(3.78rem,9.52vw,9.8rem)!important;line-height:.88!important;margin:28px 0 25px!important;max-width:100%!important;}
.hero-copy .hero-punch{font-size:clamp(19.6px,1.96vw,28px)!important;line-height:1.2!important;margin-bottom:17px!important;}
.hero-copy .hero-desc{font-size:clamp(15.4px,1.288vw,19.6px)!important;line-height:1.65!important;max-width:560px!important;}
.hero-copy .hero-actions{margin-top:28px!important;gap:22px!important;}
.hero-copy .hero-actions .btn,.hero-copy .hero-actions .text-link{font-size:14px!important;}
.hero-copy .hero-actions .btn{padding:18px 23px!important;}
.hero-copy .hero-proof{margin-top:31px!important;padding-top:17px!important;gap:20px!important;max-width:560px!important;}
.hero-copy .proof-number{font-size:clamp(39px,4.2vw,56px)!important;}
.hero-copy .hero-proof b{font-size:12.6px!important;}
.hero-copy .hero-proof small{font-size:12.6px!important;line-height:1.5!important;}
@media(max-width:900px){
 .hero-copy h1,.hero-copy .hero-title,.hero-copy .display-title{font-size:clamp(3.5rem,9.8vw,7.7rem)!important;}
 .hero-copy .hero-punch{font-size:clamp(18px,2.2vw,25px)!important;}
 .hero-copy .hero-desc{font-size:clamp(14px,1.8vw,17px)!important;}
}
@media(max-width:650px){
 .hero-copy{max-width:88%!important;}
 .hero-copy .eyebrow{font-size:11px!important;}
 .hero-copy h1,.hero-copy .hero-title,.hero-copy .display-title{font-size:clamp(2.8rem,12.6vw,5.04rem)!important;line-height:.9!important;margin:22px 0!important;}
 .hero-copy .hero-punch{font-size:clamp(16px,4.9vw,20px)!important;}
 .hero-copy .hero-desc{font-size:14px!important;line-height:1.55!important;}
 .hero-copy .hero-actions{gap:12px!important;margin-top:22px!important;}
 .hero-copy .hero-actions .btn,.hero-copy .hero-actions .text-link{font-size:10px!important;}
 .hero-copy .hero-actions .btn{padding:14px 16px!important;}
 .hero-copy .hero-proof{margin-top:20px!important;gap:12px!important;}
 .hero-copy .proof-number{font-size:34px!important;}
 .hero-copy .hero-proof b,.hero-copy .hero-proof small{font-size:9px!important;}
}

/* Enlarged 15+ years experience block per user request; preserve approved typeface and colors. */
.hero-copy .hero-proof{gap:24px!important;max-width:680px!important;margin-top:34px!important;padding-top:19px!important;}
.hero-copy .proof-number{font-size:clamp(48px,5vw,68px)!important;line-height:.95!important;}
.hero-copy .hero-proof b{font-size:15px!important;letter-spacing:.08em!important;}
.hero-copy .hero-proof small{font-size:15px!important;line-height:1.55!important;}
@media(max-width:650px){.hero-copy .hero-proof{gap:14px!important;margin-top:22px!important;padding-top:14px!important;}.hero-copy .proof-number{font-size:39px!important;}.hero-copy .hero-proof b,.hero-copy .hero-proof small{font-size:10.5px!important;}}


/* Definitive fix: disable all hero/character rollover glow overlays and animations. */
.hero::before,.hero::after,.hero:hover::before,.hero:hover::after,.hero-stage::before,.hero-stage::after,.hero-stage:hover::before,.hero-stage:hover::after{content:none!important;display:none!important;opacity:0!important;animation:none!important;filter:none!important;box-shadow:none!important;background-image:none!important;}
.hero-stage:hover .mascot,.hero-stage .mascot:hover,.mascot:hover{transform:none!important;filter:drop-shadow(0 12px 26px #000)!important;box-shadow:none!important;text-shadow:none!important;}

/* Force hero description to use the same exact typography as the ticker loop. */
.hero-copy .hero-desc{font-family:'Orbitron',sans-serif!important;font-weight:800!important;letter-spacing:.075em!important;text-transform:uppercase!important;}

/* Intro background art with live, editable copy */
#intro.intro-live{position:relative;display:block;width:100%;max-width:none;height:auto;min-height:520px;max-height:760px;aspect-ratio:3/1;margin:0;padding:0;overflow:hidden;isolation:isolate;background:#080708;color:#f7f5f5}
#intro .intro-live-background{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:38% center}
#intro .intro-live-kicker{position:absolute;z-index:1;top:10%;left:3.4%;color:#ff2839;font:11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
#intro .intro-live-content{position:absolute;inset:0;display:grid;grid-template-columns:38% minmax(0,1fr) 14%;gap:3%;align-items:center;padding:4.6% 3.4%}
#intro .intro-live-copy{grid-column:2;align-self:center}
#intro .intro-live-copy h2{max-width:760px;margin:0 0 22px;color:#f7f7f7;font:800 clamp(34px,4vw,78px)/.92 var(--display);letter-spacing:-.035em;text-transform:uppercase}
#intro .intro-live-copy h2 span{color:var(--red)}
#intro .intro-live-rule{display:block;width:46px;height:3px;margin:0 0 22px;background:var(--red)}
#intro .intro-live-copy p{max-width:690px;margin:0;color:#b9a9aa;font-size:14px;line-height:1.9}
#intro .intro-live-stats{grid-column:3;align-self:center;border-left:1px solid rgba(255,40,57,.75);padding-left:20px}
#intro .intro-live-stats>div{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:15px 0 17px;border-bottom:1px solid rgba(255,40,57,.28)}
#intro .intro-live-stats>div:last-child{border-bottom:0}
#intro .intro-live-icon{color:var(--red);font:700 16px/1 var(--mono)}
#intro .intro-live-stats strong{color:#f7f7f7;font:800 clamp(29px,2.2vw,42px)/1 var(--display)}
#intro .intro-live-stats strong span{color:var(--red)}
#intro .intro-live-stats small{color:#94898a;font:8px/1.6 var(--mono);letter-spacing:.14em}
#intro .intro-live-caption{position:absolute;bottom:8%;left:3.4%;z-index:1;margin:0;color:#938789;font:8px/1.8 var(--mono);letter-spacing:.12em}
@media(max-width:900px) and (min-width:651px){#intro.intro-live{min-height:560px}#intro .intro-live-content{grid-template-columns:34% minmax(0,1fr) 13%;gap:2.5%;padding-left:4%;padding-right:4%}#intro .intro-live-copy h2{font-size:clamp(32px,4.2vw,54px)}#intro .intro-live-copy p{font-size:12px;line-height:1.75}#intro .intro-live-stats{padding-left:12px}#intro .intro-live-stats small{font-size:7px}}
@media(max-width:650px){#intro.intro-live{display:flex;flex-direction:column;min-height:0;max-height:none;height:auto;aspect-ratio:auto;padding:0 0 28px}#intro .intro-live-background{position:relative;inset:auto;z-index:0;display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:38% center}#intro .intro-live-kicker{top:auto;left:5%;bottom:calc(100% - 30px);font-size:8px}#intro .intro-live-content{position:relative;inset:auto;display:flex;flex-direction:column;gap:20px;padding:24px 6% 0}#intro .intro-live-spacer{display:none}#intro .intro-live-copy{width:100%}#intro .intro-live-copy h2{font-size:clamp(34px,9vw,52px);margin-bottom:16px}#intro .intro-live-rule{margin-bottom:14px}#intro .intro-live-copy p{font-size:12px;line-height:1.8}#intro .intro-live-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-left:0;border-top:1px solid rgba(255,40,57,.45);padding:0}#intro .intro-live-stats>div{gap:5px;padding:14px 8px;border-bottom:0;border-right:1px solid rgba(255,40,57,.22)}#intro .intro-live-stats>div:last-child{border-right:0}#intro .intro-live-stats strong{font-size:28px}#intro .intro-live-stats small{font-size:6px;letter-spacing:.08em}#intro .intro-live-caption{display:none}}


/* Visibility repair: keep the full intro artwork and editable content above the section background. */
#intro.intro-live{position:relative!important;display:block!important;width:100vw!important;max-width:100vw!important;height:clamp(520px,33.333vw,760px)!important;min-height:520px!important;max-height:760px!important;aspect-ratio:auto!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important;overflow:hidden!important;isolation:isolate!important;background:#080708!important;color:#f7f5f5!important}
#intro.intro-live::before,#intro.intro-live::after{display:none!important;content:none!important}
#intro .intro-live-background{position:absolute!important;inset:0!important;z-index:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:38% center!important;opacity:1!important;visibility:visible!important}
#intro .intro-live-kicker,#intro .intro-live-caption{z-index:2!important}
#intro .intro-live-content{position:absolute!important;inset:0!important;z-index:1!important;display:grid!important;grid-template-columns:38% minmax(0,1fr) 14%!important;gap:3%!important;align-items:center!important;padding:4.6% 3.4%!important;visibility:visible!important;opacity:1!important}
#intro .intro-live-spacer{display:block!important;grid-column:1!important}
#intro .intro-live-copy{position:relative!important;z-index:1!important;grid-column:2!important;display:block!important;visibility:visible!important;opacity:1!important}
#intro .intro-live-stats{position:relative!important;z-index:1!important;grid-column:3!important;display:flex!important;visibility:visible!important;opacity:1!important}
@media(max-width:650px){#intro.intro-live{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;padding:0 0 28px!important}#intro .intro-live-background{position:relative!important;inset:auto!important;z-index:0!important;width:100%!important;height:auto!important;aspect-ratio:3/1!important;object-fit:cover!important}#intro .intro-live-content{position:relative!important;inset:auto!important;z-index:1!important;display:flex!important;flex-direction:column!important;gap:20px!important;padding:24px 6% 0!important}#intro .intro-live-spacer{display:none!important}#intro .intro-live-copy{width:100%!important}#intro .intro-live-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}}


/* Responsive layout safeguards */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
body {
  width: 100%;
}
img, video, canvas, iframe, svg {
  max-width: 100%;
}
@media (max-width: 900px) {
  .work-grid > *,
  .work-grid-four > *,
  .lab-grid > *,
  .services-layout > *,
  .studio-grid > *,
  .faq-grid > *,
  .transformation-grid > *,
  .about-v2-layout > * {
    min-width: 0;
  }
  .work-card img,
  .lab-card img,
  .case-art img,
  .about-v2-imageframe img {
    max-width: 100%;
  }
}