/* Approved cinematic homepage; the workspace stays within the opening hero. */
.cinematic-home{--cinema-accent:#94eaf1;--cinema-edge:#a6eff03d}
html[data-theme="gold"] .cinematic-home{--cinema-accent:#ead39f;--cinema-edge:#e5c9844d}
.cinematic-home.preview-home .header{width:min(1450px,calc(100% - 112px));height:100px;margin:0 auto;padding:0;border:0;border-bottom:1px solid #ffffff2b;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
html[data-theme="gold"] .cinematic-home.preview-home .header{background:transparent;border-color:var(--cinema-edge)}
.cinematic-home.preview-home .header .brand{width:145px}
.cinematic-home.preview-home .header nav{align-items:center;gap:30px}
.cinematic-home.experience-home .hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:calc(max(760px,100svh) - 100px);margin:0;padding:75px max(56px,calc((100vw - 1450px)/2)) 140px;text-align:left;background:#05090c}
.cinematic-home .workspace{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:#071015;isolation:isolate}
.cinematic-home .workspace-pan{position:absolute;inset:0}
.cinematic-home .workspace-pan img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cinematic-home .workspace-shade{position:absolute;inset:0;background:linear-gradient(90deg,#02080b77 0%,#02080b36 43%,transparent 76%),linear-gradient(0deg,#05090c 0%,transparent 25%,#02070b22 100%)}
.cinematic-home .workspace[data-paused="true"] *{animation-play-state:paused!important}
html[data-theme="gold"] .cinematic-home .workspace-pan{filter:saturate(.8)}
.cinematic-home.experience-home .hero-copy{position:relative;z-index:1;align-items:flex-start;max-width:680px;margin:0}
.cinematic-home.experience-home .hero .eyebrow{display:flex;justify-content:flex-start;gap:12px;align-items:center;margin:0 0 28px;color:var(--cinema-accent);font:10px/1.5 var(--mono);letter-spacing:.16em}
.cinematic-home .hero .eyebrow span{width:26px;height:1px;background:var(--cinema-accent)}
.cinematic-home.experience-home .hero h1{font-size:clamp(66px,7.4vw,112px);line-height:.99;letter-spacing:-.065em;font-weight:500;white-space:normal;margin:0 0 28px;color:#f2f8f7}
.cinematic-home.experience-home .hero h1 span{color:var(--cinema-accent);text-shadow:none}
.cinematic-home.experience-home .hero-description{font-size:18px;line-height:1.75;max-width:480px;color:#d0dbdb;margin:0 0 35px}
.cinematic-home .cinematic-cta{display:inline-flex;align-items:center;gap:50px;min-height:54px;padding:15px 22px;border:0;border-radius:0;background:var(--cinema-accent);color:#071012;font-size:13px;font-weight:650}
.cinematic-home .cinematic-cta:hover{filter:brightness(1.13)}
.cinematic-home .cinematic-side,.cinematic-home .cinematic-bottom{font:10px/1.5 var(--mono);letter-spacing:.16em}
.cinematic-home .cinematic-side{position:absolute;right:max(56px,calc((100vw - 1450px)/2));top:50%;display:flex;gap:12px;align-items:center;writing-mode:vertical-rl;color:#d7e6e5b3;pointer-events:none}
.cinematic-home .cinematic-side i{height:54px;width:1px;background:var(--cinema-accent)}
.cinematic-home .cinematic-bottom{position:absolute;bottom:30px;left:max(56px,calc((100vw - 1450px)/2));right:max(56px,calc((100vw - 1450px)/2));display:flex;align-items:center;justify-content:space-between;gap:15px;color:#c0d2d0ad}
.cinematic-home .cinematic-cta:focus-visible{outline:2px solid var(--cinema-accent);outline-offset:4px}
/* Preserve the approved 1280px PC composition on wide/high-resolution canvases. */
@media(min-width:1281px){
  .cinematic-home.preview-home .header{width:91.25%;height:7.8125vw}
  .cinematic-home.preview-home .header .brand{width:11.328125vw}
  .cinematic-home.preview-home .header nav{font-size:1.09375vw;gap:2.34375vw}
  .cinematic-home.preview-home .header .apps-trigger{padding:.859375vw 1.25vw;gap:.546875vw}
  .cinematic-home.experience-home .hero{min-height:calc(max(59.375vw,100svh) - 7.8125vw);padding:5.859375vw 4.375vw 10.9375vw}
  .cinematic-home.experience-home .hero-copy{max-width:53.125vw}
  .cinematic-home.experience-home .hero .eyebrow{font-size:.78125vw;gap:.9375vw;margin-bottom:2.1875vw}
  .cinematic-home .hero .eyebrow span{width:2.03125vw}
  .cinematic-home.experience-home .hero h1{font-size:7.4vw;margin-bottom:2.1875vw}
  .cinematic-home.experience-home .hero-description{font-size:1.40625vw;max-width:37.5vw;margin-bottom:2.734375vw}
  .cinematic-home .cinematic-cta{font-size:1.015625vw;gap:3.90625vw;min-height:4.21875vw;padding:1.171875vw 1.71875vw}
  .cinematic-home .cinematic-bottom{font-size:.78125vw;left:4.375vw;right:4.375vw;bottom:2.34375vw}
}
@media(max-width:800px){.cinematic-home.preview-home .header{width:calc(100% - 48px);height:82px}.cinematic-home.preview-home .header .brand{width:110px}.cinematic-home.preview-home .header nav{gap:16px}.cinematic-home.experience-home .hero{min-height:calc(max(700px,100svh) - 82px);padding:60px 24px 120px}.cinematic-home .workspace-pan img{object-position:100% center}.cinematic-home .workspace-shade{background:linear-gradient(90deg,#02080bb8,#02080b30),linear-gradient(0deg,#05090c,transparent 38%)}.cinematic-home .cinematic-side{display:none}.cinematic-home .cinematic-bottom{left:24px;right:24px}}
@media(max-width:480px){.cinematic-home.preview-home .header{width:calc(100% - 24px);height:62px;gap:8px}.cinematic-home.preview-home .header .brand{width:86px}.cinematic-home.preview-home .header nav{gap:8px;font-size:10px}.cinematic-home.preview-home .header .apps-trigger{padding:7px 8px;gap:5px}.cinematic-home.experience-home .hero{display:block;padding:350px 18px 100px;min-height:820px}.cinematic-home .workspace-pan{inset:0 0 auto;height:420px}.cinematic-home .workspace-shade{background:linear-gradient(180deg,transparent 0,transparent 230px,#05090c 425px)}.cinematic-home .light-breath{height:420px;bottom:auto}.cinematic-home.experience-home .hero h1{font-size:clamp(46px,12vw,58px)}.cinematic-home.experience-home .hero .eyebrow{font-size:8px;letter-spacing:.12em}.cinematic-home.experience-home .hero-description{font-size:16px}.cinematic-home .cinematic-bottom{left:18px;right:18px;bottom:22px;font-size:8px}.cinematic-home .cinematic-bottom>span{max-width:140px}}
@media(prefers-reduced-motion:reduce){.cinematic-home .workspace *{animation:none!important}.cinematic-home .workspace-pan{transform:none}}
/* Short landscape phones: fit the first action and retain the full room at right. */
@media(orientation:landscape) and (min-width:481px) and (max-width:1100px) and (max-height:520px){
  .cinematic-home.preview-home .header{width:calc(100% - 48px);height:60px}
  .cinematic-home.preview-home .header .brand{width:100px}
  .cinematic-home.preview-home .header nav{gap:18px;font-size:11px}
  .cinematic-home.preview-home .header .apps-trigger{padding:7px 11px}
  .cinematic-home.experience-home .hero{min-height:calc(100svh - 60px);padding:20px 32px 40px;align-items:center}
  .cinematic-home.experience-home .hero-copy{max-width:44vw}
  .cinematic-home.experience-home .hero .eyebrow{font-size:7px;letter-spacing:.08em;gap:7px;margin-bottom:12px}
  .cinematic-home .hero .eyebrow span{width:18px;flex-shrink:0}
  .cinematic-home.experience-home .hero h1{font-size:clamp(36px,5.4vw,48px);margin-bottom:15px}
  .cinematic-home.experience-home .hero-description{font-size:13px;line-height:1.55;margin-bottom:18px}
  .cinematic-home .cinematic-cta{min-height:36px;padding:9px 14px;gap:24px;font-size:11px}
  .cinematic-home .hero .workspace-pan{left:auto;right:0;top:0;bottom:0;width:min(100%,calc((100svh - 60px)*1.777));height:100%}
  .cinematic-home .workspace-shade{background:linear-gradient(90deg,#05090cf0 0%,#05090c90 35%,#05090c00 60%),linear-gradient(0deg,#05090c80,transparent 16%)}
  .cinematic-home .cinematic-bottom{left:32px;right:32px;bottom:10px;font-size:7px;letter-spacing:.1em}
  .cinematic-home .workspace-weather-info{right:24px;bottom:7px;font-size:9px}
  .cinematic-home .workspace-weather-info[open]{max-height:calc(100svh - 80px);overflow:auto}
}
@media(max-width:480px){.cinematic-home .cinematic-bottom{justify-content:flex-start}.cinematic-home .cinematic-bottom>span{display:none}}

/* Below Home uses the same 1280px proportional canvas as the hero. */
@media(min-width:1281px){
  .cinematic-home .shell{width:91.25%}
  .cinematic-home .section{padding-top:8.59375vw;padding-bottom:8.59375vw;font-size:1.25vw}
  .cinematic-home .section-heading{padding-bottom:1.875vw;margin-bottom:4.21875vw;gap:1.5625vw}
  .cinematic-home .section-heading .eyebrow,.cinematic-home .faq-intro .eyebrow{font-size:0.859375vw;letter-spacing:0.15625vw;gap:0.9375vw}
  .cinematic-home .section-number{font-size:0.78125vw;padding:0.234375vw 0.46875vw}
  .cinematic-home .section-meta{font-size:0.703125vw;letter-spacing:0.078125vw}
  .cinematic-home .about-layout{gap:7.03125vw}
  .cinematic-home .about-layout h2{font-size:3.75vw}
  .cinematic-home .about-copy p{font-size:1.17188vw;margin-bottom:1.48438vw}
  .cinematic-home .legal-name{font-size:0.625vw;letter-spacing:0.078125vw;margin-top:2.34375vw}
  .cinematic-home .idea-diagram{width:23.4375vw;margin-top:-1.95312vw}
  .cinematic-home .principles{margin-top:5.46875vw}
  .cinematic-home .principles>div{padding:1.71875vw 1.875vw 1.95312vw 1.09375vw!important;margin-right:1.875vw}
  .cinematic-home .principle-index{font-size:0.78125vw}
  .cinematic-home .principles h3{font-size:1.5625vw;margin:1.5625vw 0 0.625vw}
  .cinematic-home .principles p{font-size:0.9375vw;max-width:19.5312vw}
  .cinematic-home .services-intro,.cinematic-home .play-intro{gap:3.90625vw;margin-bottom:3.28125vw}
  .cinematic-home .services-intro h2,.cinematic-home .play-intro h2{font-size:4.5vw;letter-spacing:-0.15625vw}
  .cinematic-home .services-intro>p,.cinematic-home .play-intro>p{max-width:31.25vw}
  .cinematic-home .services-layout{grid-template-columns:minmax(0,1.5fr) minmax(23.4375vw,.8fr);gap:1.40625vw}
  .cinematic-home .service-explorer,.cinematic-home .project-brief{padding:2.1875vw;border-radius:1.40625vw}
  .cinematic-home .service-options legend,.cinematic-home .audience-options legend,.cinematic-home .project-brief label{font-size:1.01562vw;margin-bottom:1.01562vw}
  .cinematic-home .service-choices{gap:0.703125vw}
  .cinematic-home .service-choices label>span{min-height:10.1562vw;gap:0.390625vw;padding:1.25vw;border-radius:0.78125vw}
  .cinematic-home .service-choices i{font-size:2.03125vw;margin-bottom:0.625vw}
  .cinematic-home .service-choices strong{font-size:1.17188vw}
  .cinematic-home .service-choices small{font-size:0.859375vw}
  .cinematic-home .audience-options{margin-top:1.95312vw}
  .cinematic-home .audience-options>div{gap:0.625vw}
  .cinematic-home .audience-options label>span{padding:0.546875vw 1.25vw;font-size:0.9375vw;border-radius:2.34375vw}
  .cinematic-home .service-detail{grid-template-columns:1fr 9.76562vw;gap:1.5625vw;margin-top:1.95312vw;padding-top:1.95312vw}
  .cinematic-home .service-kicker{font-size:0.78125vw;margin-bottom:0.9375vw}
  .cinematic-home .service-detail h3{font-size:1.95312vw;letter-spacing:-0.0390625vw;margin-bottom:0.78125vw}
  .cinematic-home .service-detail p:not(.service-kicker),.cinematic-home .project-brief>p:not(.service-kicker):not(.brief-selection):not(.brief-help),.cinematic-home .game-info>p:not(.service-kicker){font-size:1.09375vw}
  .cinematic-home .service-detail ul{gap:0.546875vw;margin-top:1.25vw}
  .cinematic-home .service-detail li{font-size:0.78125vw;padding:0.390625vw 0.625vw}
  .cinematic-home .service-device{width:8.75vw;height:12.1094vw;border-radius:1.09375vw;padding:0.625vw}
  .cinematic-home .service-device>div{padding:0.78125vw;border-radius:0.625vw}
  .cinematic-home .service-device span{font-size:0.46875vw}
  .cinematic-home .service-device b{font-size:2.65625vw;margin:0.625vw 0}
  .cinematic-home .service-device i{height:0.234375vw;margin:0.625vw 0}
  .cinematic-home .project-brief h3{font-size:2.1875vw;letter-spacing:-0.0390625vw;margin-bottom:0.78125vw}
  .cinematic-home .project-brief .brief-selection{margin:1.875vw 0 1.40625vw;font-size:0.859375vw}
  .cinematic-home .project-brief textarea{min-height:8.59375vw;padding:1.01562vw;border-radius:0.625vw;font-size:1.09375vw}
  .cinematic-home .brief-actions{gap:0.9375vw;margin-top:1.25vw}
  .cinematic-home .brief-actions .button{gap:1.25vw}
  .cinematic-home .brief-actions button{min-height:4.0625vw;padding:0.78125vw 1.25vw;font-size:1.25vw}
  .cinematic-home .project-brief .brief-help{font-size:0.859375vw;margin-top:1.09375vw}
  .cinematic-home .project-brief #brief-status{font-size:0.9375vw;margin-top:0.390625vw}
  .cinematic-home .section .button{min-height:4.0625vw;padding:1.09375vw 1.79688vw;font-size:1.09375vw;gap:3.125vw}
  .cinematic-home .section .brief-actions .button{gap:1.25vw}
  .cinematic-home .section .button span{font-size:1.5625vw}
  .cinematic-home .game-console{border-radius:1.40625vw}
  .cinematic-home .game-selector button{padding:1.40625vw 1.25vw;font-size:1.01562vw}
  .cinematic-home .game-selector button span{font-size:0.703125vw;margin-bottom:0.625vw}
  .cinematic-home .game-preview,.cinematic-home .game-art{min-height:23.4375vw}
  .cinematic-home .game-info{padding:2.8125vw}
  .cinematic-home .game-info h3{font-size:2.8125vw;letter-spacing:-0.0390625vw;margin-bottom:0.78125vw}
  .cinematic-home .game-info .button{margin-top:1.875vw}
  .cinematic-home .game-illustration{width:min(60%,19.5312vw)}
  .cinematic-home .art-sky{width:min(42%,12.5vw)}
  .cinematic-home .art-steel{width:min(48%,14.8438vw)}
  .cinematic-home .art-snakes{width:min(64%,19.9219vw)}
  .cinematic-home .art-cards{width:min(76%,23.4375vw)}
  .cinematic-home .faq-section{gap:5.85938vw}
  .cinematic-home .faq-intro .eyebrow{margin-bottom:2.1875vw}
  .cinematic-home .faq-intro h2{font-size:3.125vw}
  .cinematic-home .faq-list details{padding-inline:1.09375vw}
  .cinematic-home .faq-list summary{font-size:1.09375vw;gap:1.95312vw;padding:1.64062vw 0;min-height:5.15625vw}
  .cinematic-home .faq-list summary span{font-size:1.64062vw}
  .cinematic-home .faq-list p{font-size:0.9375vw;padding:0 2.5vw 1.71875vw 0}
  .cinematic-home .footer{gap:2.34375vw;padding-block:4.29688vw 2.73438vw}
  .cinematic-home .footer-wordmark{width:8.75vw}
  .cinematic-home .footer p{font-size:0.546875vw;letter-spacing:0.046875vw;margin-top:0.78125vw}
  .cinematic-home .footer .theme-chooser{font-size:0.9375vw;gap:0.625vw}
  .cinematic-home .footer .theme-chooser select{font-size:0.9375vw;padding:0.546875vw 0.703125vw}
  .cinematic-home .footer .copyright{font-size:0.78125vw}
}
