@font-face{
  font-family:Sora;
  src:url("/cinematic/assets/fonts/sora.ttf") format('truetype');
  font-weight:100 900;
  font-display:swap
}
:root{
  color-scheme:dark;
  --ink:#070e19;
  --surface:#101d2e;
  --line:#ffffff21;
  --white:#f3f2ea;
  --muted:#b2bfd1;
  --orange:#ff7c3b;
  --ease:cubic-bezier(.22,1,.36,1)
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:Sora,system-ui,sans-serif
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:5px
}
button{
  touch-action:manipulation
}
a{
  color:inherit
}
button[hidden],[hidden]{
  display:none!important
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip{
  position:fixed;
  left:20px;
  top:-80px;
  z-index:100;
  background:var(--white);
  color:var(--ink);
  padding:14px
}
.skip:focus{
  top:20px
}
.site-header{
  width:94%;
  max-width:4200px;
  margin:auto;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap:14px
}
.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #ff7c3b88;
  border-radius:50%;
  color:var(--orange);
  font-weight:750;
  font-size:16px
}
.brand-full-page .site-header{
  min-height:112px
}
.brand-full{
  gap:18px;
  min-width:0
}
.brand-full .brand-mark-image{
  display:block;
  width:72px;
  height:72px;
  flex-shrink:0;
  border:0;
  border-radius:0;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(255,124,59,.28)) drop-shadow(0 0 22px rgba(120,150,255,.18));
  transition:filter .3s var(--ease),transform .3s var(--ease)
}
.brand-full:hover .brand-mark-image,
.brand-full:focus-visible .brand-mark-image{
  filter:drop-shadow(0 0 18px rgba(255,124,59,.5)) drop-shadow(0 0 28px rgba(140,170,255,.35));
  transform:scale(1.03)
}
.brand-lockup{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1;
  min-width:0
}
.brand-full .brand-name{
  color:var(--white);
  font-size:28px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap
}
.brand-name-accent{
  color:var(--orange)
}
.brand-sub{
  color:var(--white);
  font-size:12px;
  font-weight:600;
  letter-spacing:.42em;
  line-height:1;
  padding-left:2px;
  text-transform:uppercase;
  white-space:nowrap
}
.brand-tags{
  display:flex;
  gap:14px;
  margin-top:6px;
  color:var(--white);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap
}
.brand-tag{
  display:inline-flex;
  align-items:center;
  gap:6px
}
.brand-tag i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 8px rgba(255,124,59,.65)
}
.brand-name{
  font-size:16px;
  font-weight:650;
  letter-spacing:-.03em
}
.brand-name small{
  display:block;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:5px
}
.site-header nav{
  display:flex;
  gap:8px;
  align-items:center
}
.site-header nav a{
  text-decoration:none;
  font-size:12px;
  padding:10px 16px;
  border-radius:30px;
  color:var(--muted)
}
.site-header nav a[aria-current=page]{
  background:#ffffff0c;
  color:var(--white);
  box-shadow:inset 0 0 0 1px var(--line)
}
.page{
  width:94%;
  max-width:4200px;
  margin:auto;
  padding:30px 0 32px
}
.intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin:0 auto 18px
}
.eyebrow{
  font-size:10px;
  font-weight:650;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 12px
}
h1{
  font-size:clamp(30px,2.6vw,78px);
  font-weight:550;
  line-height:1.1;
  letter-spacing:-.055em;
  margin:0
}
h1 em{
  color:var(--orange);
  font-style:normal
}
.intro > p{
  max-width:48ch;
  color:var(--muted);
  font-size:clamp(12px,.8vw,20px);
  line-height:1.7;
  margin:0 0 3px
}
.experience{
  position:relative
}
.stage{
  position:relative;
  width:100%;
  height:clamp(540px,66vh,1900px);
  isolation:isolate;
  touch-action:pan-y;
  outline:none;
  --title-size:32px
}
.stage::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,#244c6826,transparent 68%)
}
.ring{
  position:absolute;
  border:1px solid #ff7c3b40;
  border-radius:50%;
  pointer-events:none;
  transition:opacity .3s
}
.ring::after{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid #ffffff06;
  border-radius:50%
}
.ring-copy{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  transition:opacity .2s
}
.ring-copy span{
  display:block;
  font-size:clamp(18px,1.45vw,36px);
  line-height:1.3;
  letter-spacing:-.035em
}
.ring-copy small{
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:14px
}
.experience[data-mode=focus] .ring,.experience[data-mode=focus] .ring-copy{
  opacity:0
}
.scene-card{
  position:absolute;
  left:0;
  top:0;
  display:block;
  padding:0;
  border:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 16px 36px #0005;
  text-align:left;
  transform-origin:0 0;
  will-change:transform;
  backface-visibility:hidden
}
.scene-card::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #ffffff2b;
  border-radius:inherit;
  pointer-events:none
}
.scene-card[aria-pressed=true]::after{
  border-color:#ff7c3b99
}
.scene-card img,
.scene-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none
}
.scene-card .caption{
  position:absolute;
  inset:auto 0 0;
  padding:14px 18px;
  background:linear-gradient(0deg,#080f1b 15%,#080f1bf2 72%,#080f1b00);
  padding-top:35px;
  font-size:var(--title-size);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.16;
  text-transform:uppercase;
  text-shadow:0 2px 3px #000b;
  pointer-events:none
}
.caption em{
  font-style:normal;
  color:var(--orange)
}
.scene-card.is-feature .caption{
  padding:8% 4% 3%;
  background:linear-gradient(0deg,#060d18f5,#060d18b3 55%,transparent);
  font-size:var(--title-size);
  max-width:100%
}
.scene-card.is-feature .caption-text{
  display:block;
  max-width:21ch
}
.scene-card .scene-number{
  position:absolute;
  left:18px;
  top:16px;
  padding:6px 9px;
  border-radius:6px;
  background:#070e19da;
  border:1px solid #ffffff24;
  color:var(--white);
  font-size:11px;
  letter-spacing:.12em;
  pointer-events:none
}
.scene-card:hover::after{
  border-color:var(--orange)
}
.toolbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:18px;
  min-height:48px
}
.round-button{
  border:1px solid #ffffff30;
  background:#ffffff06;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:22px;
  display:grid;
  place-items:center
}
.round-button:hover{
  background:#ffffff10;
  border-color:var(--orange)
}
.position{
  font-size:12px;
  color:var(--muted);
  min-width:62px;
  text-align:center;
  font-variant-numeric:tabular-nums
}
.text-button{
  border:1px solid var(--line);
  background:transparent;
  padding:12px 17px;
  border-radius:28px;
  font-size:11px;
  min-height:44px
}
.text-button[aria-pressed=true]{
  border-color:#ff7c3b80;
  color:var(--orange);
  background:#ff7c3b0b
}
.text-button:hover{
  border-color:#ffffff70
}
.toolbar-divider{
  width:1px;
  height:24px;
  background:var(--line);
  margin:0 4px
}
.detail{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:40px;
  max-width:1500px;
  width:74%;
  margin:26px auto 0;
  padding:25px 0 0;
  border-top:1px solid var(--line)
}
.detail h2{
  font-weight:550;
  font-size:clamp(20px,1.65vw,42px);
  letter-spacing:-.04em;
  line-height:1.22;
  margin:0 0 10px
}
.detail p{
  color:var(--muted);
  max-width:65ch;
  font-size:clamp(12px,.85vw,20px);
  line-height:1.75;
  margin:0
}
.detail ul{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  list-style:none;
  padding:0;
  margin:14px 0 0;
  color:#d2d9e3;
  font-size:clamp(11px,.78vw,18px)
}
.detail li::before{
  content:'✓';
  color:var(--orange);
  margin-right:8px
}
.interaction-hint{
  text-align:center;
  color:#93a2b7;
  font-size:11px;
  line-height:1.6;
  margin:18px 0 0
}
.overview-detail{
  display:block;
  text-align:center;
  border:0;
  padding:0;
  margin-top:18px
}
.overview-detail p{
  margin:auto
}
.overview-detail h2{
  display:none
}
.overview-detail ul{
  display:none
}
/* Cinema version keeps every navigation target fixed while the image changes. */
body[data-version=v2] .stage{
  height:auto;
  padding:10px 0 0
}
.cinema{
  position:relative;
  width:min(78%,calc(54svh * 1.6),max(440px,calc((100svh - 380px) * 1.2)),2800px);
  aspect-ratio:1.6;
  margin:auto;
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:0 24px 80px #0006;
  border:1px solid #ffffff25
}
.cinema .scene-card{
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
  will-change:auto;
  pointer-events:none
}
.cinema .scene-card::after{
  display:none
}
.cinema .scene-card.is-feature .caption{
  font-size:clamp(30px,3.2vw,88px)
}
.cinema .scene-card .scene-number{
  left:4%;
  top:5%;
  font-size:clamp(10px,.72vw,18px)
}
.filmstrip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.1vw,28px);
  width:min(78%,140svh,2800px);
  margin:24px auto 0
}
.thumb{
  display:block;
  position:relative;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  min-width:0;
  border-radius:10px
}
.thumb-art{
  display:block;
  aspect-ratio:1.6;
  border-radius:9px;
  overflow:hidden;
  position:relative;
  border:2px solid transparent;
  background:var(--surface);
  transition:border-color .2s
}
.thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .2s;
  pointer-events:none
}
.thumb[aria-pressed=true] .thumb-art{
  border-color:var(--orange)
}
.thumb:hover img{
  filter:brightness(1.12)
}
.thumb-label{
  font-size:clamp(11px,.85vw,22px);
  font-weight:550;
  line-height:1.45;
  display:block;
  margin:10px 2px 0;
  color:#cbd5e3
}
.thumb[aria-pressed=true] .thumb-label{
  color:var(--white)
}
.thumb .thumb-number{
  position:absolute;
  left:10px;
  top:10px;
  font-size:10px;
  padding:4px 6px;
  background:#070e19e6;
  border-radius:4px
}
.thumb[aria-pressed=true] .thumb-number{
  color:var(--orange)
}
body[data-version=v2] .detail{
  width:78%
}
@media(min-width:2200px){
  .site-header{
    min-height:112px
  }
  .brand-name{
    font-size:22px
  }
  .brand-mark{
    width:52px;
    height:52px;
    font-size:19px
  }
  .brand-full-page .site-header{
    min-height:140px
  }
  .brand-full{
    gap:24px
  }
  .brand-full .brand-mark-image{
    width:96px;
    height:96px
  }
  .brand-full .brand-name{
    font-size:40px
  }
  .brand-sub{
    font-size:16px;
    letter-spacing:.44em
  }
  .brand-tags{
    font-size:13px;
    gap:20px;
    margin-top:9px
  }
  .brand-tag i{
    width:8px;
    height:8px
  }
  .site-header nav a{
    font-size:16px;
    padding:12px 22px
  }
  .page{
    padding-top:40px
  }
  .intro{
    margin-bottom:24px
  }
  .eyebrow{
    font-size:13px
  }
  .toolbar{
    margin-top:24px;
    gap:16px
  }
  .round-button{
    width:56px;
    height:56px
  }
  .text-button{
    font-size:14px;
    padding:15px 23px
  }
  .position,.interaction-hint{
    font-size:14px
  }
  .scene-card .scene-number{
    font-size:15px;
    padding:8px 11px
  }
  .detail{
    max-width:2100px;
    margin-top:32px
  }
  .filmstrip{
    margin-top:32px
  }
  .thumb .thumb-number{
    font-size:14px
  }
}
@media(max-width:1100px){
  .brand-full-page .site-header{
    min-height:96px
  }
  .brand-full{
    gap:14px
  }
  .brand-full .brand-mark-image{
    width:60px;
    height:60px
  }
  .brand-full .brand-name{
    font-size:22px;
    letter-spacing:.055em
  }
  .brand-sub{
    font-size:10.5px;
    letter-spacing:.4em
  }
  .brand-tags{
    font-size:9px;
    gap:12px;
    margin-top:5px
  }
  .intro{
    display:block
  }
  .intro > p{
    margin-top:14px;
    max-width:65ch
  }
  .stage{
    height:610px
  }
  .detail{
    width:92%
  }
  .cinema{
    width:min(94%,max(440px,calc((100svh - 380px) * 1.2)))
  }
  .filmstrip{
    width:94%
  }
  .site-header nav a{
    padding:10px
  }
  .scene-card{
    border-radius:10px
  }
  body[data-version=v2] .detail{
    width:94%
  }
}
@media(max-width:700px){
  .site-header{
    width:92%;
    min-height:76px;
    gap:8px
  }
  .brand-mark{
    width:34px;
    height:34px;
    font-size:12px
  }
  .brand{
    gap:9px
  }
  .brand-name{
    font-size:12px
  }
  .brand-name small{
    font-size:7px
  }
  .brand-full-page .site-header{
    min-height:78px;
    gap:10px
  }
  .brand-full{
    gap:8px
  }
  .brand-full .brand-mark-image{
    width:44px;
    height:44px
  }
  .brand-lockup{
    gap:3px
  }
  .brand-full .brand-name{
    font-size:15px;
    letter-spacing:.055em
  }
  .brand-sub{
    font-size:8px;
    letter-spacing:.34em
  }
  .brand-tags{
    font-size:6.5px;
    gap:6px;
    margin-top:3px;
    letter-spacing:.1em
  }
  .brand-tag i{
    width:3.5px;
    height:3.5px
  }
  .site-header nav{
    gap:0
  }
  .site-header nav a{
    font-size:11px;
    padding:9px
  }
  .site-header nav .original-link{
    display:none
  }
  .page{
    width:92%;
    padding:24px 0
  }
  .eyebrow{
    font-size:9px;
    margin-bottom:10px
  }
  h1{
    font-size:clamp(26px,7.6vw,43px);
    max-width:19ch
  }
  .intro > p{
    font-size:12px;
    line-height:1.7;
    margin-top:12px
  }
  .intro{
    margin-bottom:20px
  }
  .stage{
    height:590px
  }
  .ring-copy,.ring{
    display:none
  }
  .scene-card .scene-number{
    top:10px;
    left:10px;
    font-size:9px;
    padding:4px 6px
  }
  .scene-card .caption{
    padding:26px 11px 11px
  }
  .scene-card.is-feature .caption{
    padding:14% 5% 5%
  }
  .toolbar{
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px
  }
  .round-button{
    width:44px;
    height:44px
  }
  .position{
    min-width:48px
  }
  .text-button{
    padding:10px 13px
  }
  .toolbar-divider{
    display:none
  }
  .hover-toggle{
    display:none
  }
  .detail{
    width:100%;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:24px;
    padding-top:20px
  }
  .detail h2{
    font-size:24px
  }
  .detail p{
    font-size:12px
  }
  .detail ul{
    font-size:11px;
    gap:9px 18px
  }
  .interaction-hint{
    font-size:10px;
    margin-top:14px
  }
  .cinema{
    width:100%;
    aspect-ratio:1.3;
    border-radius:12px
  }
  .cinema .scene-card.is-feature .caption{
    font-size:clamp(25px,7vw,40px)
  }
  .filmstrip{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 10px;
    margin-top:18px
  }
  .thumb-label{
    font-size:10px;
    line-height:1.5;
    margin-top:6px
  }
  .thumb .thumb-number{
    font-size:8px;
    left:6px;
    top:6px
  }
  .thumb-art{
    border-radius:7px
  }
  .thumb{
    border-radius:7px
  }
  body[data-version=v2] .detail{
    width:100%
  }
}
@media(max-width:380px){
  .brand-tags{
    display:none
  }
  .brand-full .brand-name{
    font-size:14px
  }
  .brand-full .brand-mark-image{
    width:40px;
    height:40px
  }
}
@media(min-width:3600px){
  .cinema .scene-card.is-feature .caption{
    font-size:112px
  }
  .thumb-label{
    font-size:26px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .scene-card{
    will-change:auto
  }
}
.experience[data-mode=focus] #orbit-cards .scene-card:not(.is-feature) .caption{
  text-transform:none;
  font-weight:550;
  letter-spacing:-.02em;
  color:#e2e6ec
}
.experience[data-mode=focus] #orbit-cards .scene-card:not(.is-feature) .caption em{
  color:inherit
}
.experience[data-mode=focus] #orbit-cards .scene-card:not(.is-feature) .scene-number{
  display:none
}