/* Only the hero's right-hand illustration changes. */
.hero-art.cinematic-hero{aspect-ratio:1024/572;max-width:760px;width:100%;perspective:none;background:none;isolation:isolate;overflow:hidden;border-radius:18px}
.hero-art.cinematic-hero:before{display:none}
.cinematic-hero > :not(.sculpture-canvas):not(.hero-scene-plate){display:none!important}
.hero-scene-plate{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cinematic-hero .sculpture-canvas{position:absolute;left:20%;top:8%;width:42%;height:70%;z-index:2;filter:drop-shadow(0 5px 8px #067eae22);pointer-events:none}
html[data-theme=light] .hero-art.cinematic-hero{box-shadow:0 12px 45px #6bcdea16}
html[data-theme=dark] .hero-art.cinematic-hero{box-shadow:0 12px 50px #005dbe18;border:1px solid #193a57}
@media(max-width:900px){.hero-art.cinematic-hero{aspect-ratio:1024/572}.cinematic-hero .sculpture-canvas{left:20%;top:8%;width:42%;height:70%}}
@media(max-width:640px){.hero-art.cinematic-hero{max-width:540px;aspect-ratio:1024/572;border-radius:12px;margin-block:14px 4px}}
.cinematic-hero > .sculpture-reflection{display:block!important;position:absolute;left:20%;top:69%;width:42%;height:15%;z-index:1;pointer-events:none;filter:blur(.8px);clip-path:ellipse(50% 50% at 50% 50%)}

/* A native dark stage keeps the illuminated sculpture on a dark surface. */
html[data-theme=dark] .hero-art.cinematic-hero{
  background:radial-gradient(ellipse at 48% 70%,#073e674d,transparent 65%),radial-gradient(ellipse at 20% 20%,#4c20802b,transparent 55%),#050e1c;
  border:1px solid #17354e;box-shadow:inset 0 0 60px #02061080,0 20px 60px #0002;
}
html[data-theme=dark] .cinematic-hero > .hero-scene-plate{display:none}
html[data-theme=dark] .cinematic-hero > :is(.orbit,.energy-ribbon,.platform,.float-label,.stage-chip,.art-stars){display:block!important}
html[data-theme=dark] .cinematic-hero .sculpture-canvas{left:26%;top:7%;width:48%;height:72%}
html[data-theme=dark] .cinematic-hero .sculpture-reflection{left:26%;width:48%;top:72%;opacity:.45}
html[data-theme=dark] .cinematic-hero .platform{left:20%;width:60%;bottom:13%;height:14%;z-index:0}
html[data-theme=dark] .cinematic-hero .fl-one{left:12%;top:12%}
html[data-theme=dark] .cinematic-hero .fl-two{right:7%;top:16%}
html[data-theme=dark] .cinematic-hero .fl-three{left:4%;top:38%}
html[data-theme=dark] .cinematic-hero .fl-four{right:4%;top:43%}
html[data-theme=dark] .cinematic-hero .fl-five{left:9%;bottom:19%}
html[data-theme=dark] .cinematic-hero .fl-six{right:6%;bottom:18%}
html[data-theme=dark] .cinematic-hero .stage-chip{left:43%;bottom:6%}

/* One shared content grid and fluid spacing at every viewport width. */
.hero-art.video-hero{position:relative;aspect-ratio:16/9;width:100%;max-width:none;justify-self:center;margin:0;background:none;border:0;border-radius:0;box-shadow:none;perspective:none;isolation:isolate}
.hero-art.video-hero:before{display:none}
.hero-video{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.video-toggle{position:absolute;right:5%;bottom:5%;z-index:5;padding:9px 14px;min-height:44px;background:#041021db;border:1px solid #5ebfd855;border-radius:24px;color:#edfaff;font-size:11px;backdrop-filter:blur(12px)}
@media(max-width:900px){.hero-art.video-hero{max-width:800px}}
@media(max-width:640px){.hero-art.video-hero{aspect-ratio:16/9;margin:0}.video-toggle{font-size:10px;padding:6px 10px;right:4%;bottom:4%}}
.project-preview{margin:0;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--surface2)}
.project-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-preview img{transform:scale(1.035)}
.project-preview figcaption{position:absolute;bottom:12px;left:12px;padding:5px 10px;border-radius:20px;background:#041021dd;color:#e6f4ff;font-size:10px;backdrop-filter:blur(10px)}
.project-card{display:flex;flex-direction:column;animation:project-arrive .65s ease both}
.project-card:nth-child(2){animation-delay:.1s}.project-card:nth-child(3){animation-delay:.2s}
.project-card .project-body{display:flex;flex-direction:column;flex:1}
.project-card .project-body .text-link{margin-top:auto;min-height:44px}
.project-scope{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 24px;padding:0;list-style:none;font-size:11px;color:var(--muted)}
.project-scope li{border-left:2px solid var(--accent);padding-left:9px}
#project-dialog{max-width:1000px;padding:24px}
#project-dialog .project-preview{margin-top:28px;aspect-ratio:16/9;border-radius:12px}
#project-dialog .project-preview img{object-fit:contain;background:var(--bg)}
.case-study-sections{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}
.case-study-sections section{padding:22px;background:var(--surface2);border-radius:12px}
#project-dialog .case-study-sections h3{font-size:18px}
#project-dialog .case-study-sections p{margin:12px 0 0;font-size:14px;line-height:1.8}
#project-dialog .button{margin:8px 8px 0 0}
@keyframes project-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1101px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.case-study-sections{grid-template-columns:1fr;gap:14px}.case-study-sections section{padding:18px}#project-dialog{padding:12px}.project-scope{font-size:10px}}
/* A transparent scene blends into the page without an enclosing panel. */
html[data-theme] .hero-art.cinematic-hero{border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 50% 70%,#0787c512,transparent 65%);overflow:visible}
html[data-theme] .cinematic-hero > .hero-scene-plate{display:none}
html[data-theme] .cinematic-hero > :is(.orbit,.energy-ribbon,.platform,.float-label,.stage-chip,.art-stars){display:block!important}
html[data-theme] .cinematic-hero .sculpture-canvas{left:26%;top:7%;width:48%;height:72%}
html[data-theme] .cinematic-hero .sculpture-reflection{left:26%;width:48%;top:72%;opacity:.35}
html[data-theme] .cinematic-hero .platform{left:20%;width:60%;bottom:13%;height:14%;z-index:0}
html[data-theme] .cinematic-hero .fl-one{left:12%;top:12%}
html[data-theme] .cinematic-hero .fl-two{right:7%;top:16%}
html[data-theme] .cinematic-hero .fl-three{left:4%;top:38%}
html[data-theme] .cinematic-hero .fl-four{right:4%;top:43%}
html[data-theme] .cinematic-hero .fl-five{left:9%;bottom:19%}
html[data-theme] .cinematic-hero .fl-six{right:6%;bottom:18%}
html[data-theme] .cinematic-hero .stage-chip{left:43%;bottom:6%}
html[data-theme=light] .cinematic-hero .float-label{color:#fff}
html[data-theme=light] .cinematic-hero .platform{background:radial-gradient(ellipse,#e3faff,#84d9f0 65%,#16a9e6 71%,#e3faff 74%);box-shadow:0 7px 0 #bee5f6,0 9px 0 #24a4e8,0 18px 0 #c6eaf7,0 20px 0 #159adc,0 24px 30px #1d9bde22}
main,footer,.header-inner{max-width:1800px;padding-inline:clamp(20px,3vw,56px);margin-inline:auto}
.header-inner{gap:24px}
.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);min-height:0;padding:48px 0 28px;overflow:visible}
.hero-copy{padding:0}
.hero h1{font-size:clamp(42px,4.3vw,64px);letter-spacing:-.055em;line-height:1.08;max-width:none}
.hero-copy>p{max-width:48ch;font-size:15px;line-height:1.75;margin:24px 0}
.hero-copy>.eyebrow{max-width:100%;font-size:9px;letter-spacing:.7px;margin-bottom:24px}
.hero-actions{flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-actions .button{padding:13px 20px;gap:22px;min-height:48px}
.hero-art.cinematic-hero{max-width:none;margin:0;align-self:center}
.contact-strip{grid-template-columns:1.3fr 1.2fr 1fr;align-items:stretch;gap:12px;padding:0}
.contact-strip>a,.contact-strip>span{min-width:0;min-height:60px;font-size:12px;padding:14px;overflow-wrap:anywhere}
.section{padding-top:56px}
.section-heading{align-items:center;gap:20px}
.project-grid{gap:24px}
.contact-banner{margin-block:64px 48px}
.icon-button{width:44px;height:44px;flex-shrink:0}
@media(max-width:1100px){
  .header-inner{gap:16px}nav{gap:15px}.header-actions{gap:10px}
  .brand.supplied-brand{width:170px;height:46px}.brand.supplied-brand img{width:186px;left:-8px;top:-8px}
  .hero{gap:28px}.hero-copy>p{font-size:14px}
  .contact-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:36px;gap:32px}
  .hero-copy{max-width:640px}.hero-copy>p{max-width:60ch}
  .hero h1{font-size:clamp(44px,7vw,64px)}
  .hero-art.cinematic-hero{width:100%;max-width:720px;justify-self:center}
  .hero-copy>.eyebrow{font-size:9px;letter-spacing:.7px}
  nav.open{padding:16px 24px;gap:8px 24px}nav a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:640px){
  .header-inner{padding-block:12px}.brand.supplied-brand{width:154px;height:42px}
  .brand.supplied-brand img{width:170px;left:-8px;top:-6px}
  .hero{padding:28px 0 24px;gap:24px}.hero h1{font-size:clamp(40px,10vw,58px)}
  .hero-copy>.eyebrow{font-size:8px;letter-spacing:.3px;padding:6px 9px;gap:7px;margin-bottom:20px}
  .hero-copy>p{font-size:14px;margin:20px 0}.hero-actions{margin-top:20px}
  .hero-actions .button{flex:1;padding:12px;gap:12px;font-size:13px}
  .hero-art.cinematic-hero{margin:0;aspect-ratio:1.4;border-radius:16px}
  .cinematic-hero .hero-scene-plate{object-fit:cover}
  html[data-theme=light] .hero-art.cinematic-hero{aspect-ratio:1024/572}
  html[data-theme=dark] .cinematic-hero .float-label{font-size:8px!important;padding:6px 8px!important}
  html[data-theme=dark] .cinematic-hero .stage-chip{font-size:8px;padding:4px 8px}
  .contact-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.contact-strip>a,.contact-strip>span{font-size:11px;padding:12px;min-height:64px}
  .contact-strip>a:first-child{grid-column:1/-1}.contact-strip>a:last-child{grid-column:auto;justify-content:center}
  .section{padding-top:40px}.section-heading{align-items:flex-start;gap:12px}
  .section-heading h2{font-size:26px}.section-heading h2:after{width:28px;margin-left:12px}
  .contact-banner{margin-block:40px;padding:24px}.footer-top{flex-wrap:wrap}
  #chat-toggle{width:48px;height:48px;padding:9px;justify-content:center}#chat-toggle span,#chat-toggle b{display:none}
  .contact-info strong{overflow-wrap:anywhere}.contact-info>a>div{min-width:0}
}