/* Dedicated mobile portrait and scroll-driven spatial strategy experience. */
.mobile-portrait-panel{display:none}

.brand-manifesto{padding-bottom:clamp(90px,9vw,150px);overflow:clip}
.brand-manifesto h2{margin-bottom:clamp(42px,5vw,70px)}
.strategy-motion{
  --strategy-progress:0;
  --door-open:0deg;
  --room-shift:0px;
  --room-scale:1;
  --light-opacity:.34;
  --portal-tilt:0deg;
  --word-opacity:.15;
  --word-scale:.84;
  --shadow-scale:1;
  position:relative;
  height:230svh;
  margin:0 calc(-1 * 6vw) clamp(55px,6vw,95px);
  overflow:clip;
  background:#070708;
  color:#fff;
}
.strategy-sticky{
  position:sticky;
  top:76px;
  height:calc(100svh - 76px);
  min-height:620px;
  overflow:hidden;
  perspective:1800px;
  background:radial-gradient(circle at 50% 45%,#2b2d32 0,#111216 44%,#060607 80%);
}
.strategy-room{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:translate3d(0,var(--room-shift),0) scale(var(--room-scale));
  will-change:transform;
}
.strategy-room:before,.strategy-room:after{content:'';position:absolute;pointer-events:none}
.strategy-room:before{
  inset:0;
  background:linear-gradient(90deg,#050506d9 0,transparent 30%,transparent 70%,#050506d9 100%),linear-gradient(0deg,#050506e8 0,transparent 45%,#0505068f 100%);
  z-index:8;
}
.strategy-room:after{
  left:7%;right:7%;bottom:7%;height:16%;
  border-radius:50%;
  background:radial-gradient(ellipse,#8a8e9b20 0,#22242a12 42%,transparent 72%);
  border-top:1px solid #ffffff12;
  transform:perspective(600px) rotateX(68deg);
  z-index:1;
}
.strategy-grid{
  position:absolute;
  inset:-10%;
  z-index:0;
  opacity:.3;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:78px 78px;
  transform:perspective(900px) rotateX(72deg) translateY(46%) scale(1.8);
  transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 72%);
  mask-image:linear-gradient(0deg,#000,transparent 72%);
}
.strategy-glow{
  position:absolute;
  z-index:1;
  left:50%;top:44%;
  width:min(70vw,980px);height:min(70vw,980px);
  border-radius:50%;
  background:radial-gradient(circle,#d9e3ff2b 0,#7386b81a 25%,transparent 66%);
  filter:blur(18px);
  opacity:var(--light-opacity);
  transform:translate(-50%,-50%);
}
.strategy-portal{
  position:absolute;
  z-index:4;
  left:50%;top:50%;
  width:clamp(270px,27vw,430px);
  aspect-ratio:.52;
  transform:translate(-50%,-50%) translateZ(120px) rotateY(var(--portal-tilt));
  transform-style:preserve-3d;
}
.strategy-interior{
  position:absolute;
  inset:2%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#65718e 0,#272c38 34%,#090a0d 74%);
  box-shadow:inset 0 0 80px #000d;
}
.strategy-interior:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,transparent 20%,#ffffff1d 49%,transparent 51%);
  transform:translateX(calc((var(--strategy-progress) - .5) * 45%));
}
.strategy-interior span{
  position:relative;
  color:#f5f5f7;
  font-size:clamp(17px,1.7vw,28px);
  font-weight:680;
  line-height:1.02;
  letter-spacing:-.055em;
  opacity:var(--word-opacity);
  transform:translateZ(-30px) scale(var(--word-scale));
}
.strategy-door{
  position:absolute;
  inset:2%;
  z-index:5;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(var(--door-open));
  will-change:transform;
  box-shadow:18px 28px 48px #0009;
}
.strategy-door:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid #ffffff20;
  box-shadow:inset 0 0 0 8px #111317,inset 0 0 36px #0008;
  pointer-events:none;
}
.strategy-door:after{
  content:'';
  position:absolute;
  top:0;right:-15px;width:15px;height:100%;
  background:linear-gradient(90deg,#2c3035,#090a0c);
  transform-origin:left center;
  transform:rotateY(90deg);
}
.strategy-door-surface{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#17191b url('assets/original-door-center-v2.webp') center 9%/121% auto no-repeat;
  filter:saturate(.92) contrast(1.04);
  backface-visibility:hidden;
}
.strategy-door i{
  position:absolute;
  z-index:5;
  left:25%;top:25%;
  width:3.4%;height:51%;
  border-radius:999px;
  background:linear-gradient(90deg,#090a0b,#72777c 50%,#111214);
  box-shadow:5px 7px 10px #0008;
  transform:translateZ(10px);
}
.strategy-frame{position:absolute;z-index:9;display:block;background:linear-gradient(135deg,#4a4e53,#17191c 50%,#070809);box-shadow:0 9px 28px #0008}
.strategy-frame-top{left:-4%;right:-4%;top:-2.4%;height:4.8%}
.strategy-frame-bottom{left:-4%;right:-4%;bottom:-2.4%;height:4.8%}
.strategy-frame-left{top:-2%;bottom:-2%;left:-4%;width:8%}
.strategy-frame-right{top:-2%;bottom:-2%;right:-4%;width:8%}
.strategy-shadow{
  position:absolute;
  z-index:3;
  left:50%;bottom:5%;
  width:clamp(320px,38vw,610px);height:8%;
  border-radius:50%;
  background:#000b;
  filter:blur(26px);
  transform:translateX(-50%) scaleX(var(--shadow-scale));
}
.strategy-caption{
  position:absolute;
  z-index:12;
  left:5.5%;right:5.5%;bottom:6%;
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid #ffffff36;
  color:#d9d9dd;
  font-size:10px;
  font-weight:680;
  letter-spacing:.18em;
}
.strategy-caption span{display:flex;align-items:center;gap:11px}
.strategy-caption span:before{content:'';width:5px;height:5px;border-radius:50%;background:#f5f5f7;box-shadow:0 0 15px #fff}

@media(max-width:760px){
  .cinema.is-cinematic{height:235svh!important}
  .cinema-outro{display:none!important}
  .mobile-portrait-panel{
    position:relative;
    display:block;
    min-height:calc(100svh - 68px);
    overflow:hidden;
    padding:8.5% 6% 0;
    background:radial-gradient(circle at 65% 65%,#63697142 0,transparent 36%),linear-gradient(145deg,#050606 0,#24272a 100%);
    color:#f5f5f7;
    isolation:isolate;
  }
  .mobile-portrait-panel:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0607088f 0,transparent 44%);pointer-events:none}
  .mobile-portrait-copy{position:relative;z-index:3}
  .mobile-portrait-copy .eyebrow{margin:0 0 14px;color:#bfc3c7;font-size:8px;letter-spacing:.2em}
  .mobile-portrait-copy h2{margin:0 0 20px;color:#f5f5f7;font-size:clamp(40px,11.3vw,58px);line-height:.94;letter-spacing:-.06em;font-weight:620;max-width:11ch}
  .mobile-portrait-copy a{display:inline-block;color:#f5f5f7;font-size:11px;border-bottom:1px solid #969ba0;padding-bottom:8px}
  .mobile-portrait-figure{position:absolute;z-index:1;left:0;right:0;top:42%;bottom:0;margin:0;overflow:visible}
  .mobile-portrait-figure img{position:absolute;left:50%;bottom:-3%;display:block;width:min(108vw,500px);height:auto;transform:translateX(-50%);filter:saturate(.86) contrast(1.03) brightness(.98) drop-shadow(0 28px 50px #0007)}
  .mobile-portrait-figure figcaption{position:absolute;z-index:2;left:6%;bottom:18px;color:#dadcdf;font-size:7px;letter-spacing:.16em}
  .brand-manifesto{padding-left:6%;padding-right:6%}
  .strategy-motion{height:195svh;margin-left:-6vw;margin-right:-6vw;margin-bottom:50px}
  .strategy-sticky{top:68px;height:calc(100svh - 68px);min-height:540px}
  .strategy-grid{background-size:48px 48px}
  .strategy-portal{width:min(55vw,265px);top:46%}
  .strategy-caption{left:6%;right:6%;bottom:4.5%;gap:10px;flex-wrap:wrap;font-size:7px;letter-spacing:.11em}
  .strategy-caption span{gap:6px}
  .strategy-shadow{bottom:8%;width:70vw}
}

@media(max-width:760px) and (max-height:680px){
  .mobile-portrait-panel{padding-top:6%}
  .mobile-portrait-copy h2{font-size:clamp(36px,10.2vw,46px);margin-bottom:14px}
  .mobile-portrait-figure{top:46%}
  .mobile-portrait-figure img{width:min(92vw,420px);bottom:-5%}
}

@media(prefers-reduced-motion:reduce){
  .strategy-motion{height:auto;margin-bottom:55px}
  .strategy-sticky{position:relative;top:auto;height:75svh;min-height:580px}
  .strategy-door{transform:rotateY(-24deg)}
  .strategy-room{transform:none}
}