/* Cinematic brand language and the dedicated long-term vision. */
html:has(> body.vision-page) { background:#050608; color-scheme:dark; scroll-padding-top:0; scroll-snap-type:y proximity; }
body.vision-page { --page-pad:clamp(24px,7vw,112px); --header-height:82px; color:#fff; background:#050608; }
body.vision-page .site-header[data-header] { background:linear-gradient(#050608d9,transparent); border:0; color:#fff; }
body.vision-page .site-header .brand img { filter:brightness(0) invert(1); }
body.vision-page .site-header .desktop-nav a { color:inherit; }
body.vision-page .site-header .desktop-nav a[aria-current] { opacity:1; text-decoration:underline; text-underline-offset:7px; }
body:is(.home-page,.story-page):not(.header-light) .site-header[data-header] { background:linear-gradient(180deg,#050608c9,#05060870); }
body.vision-page :focus-visible,.vision-portal :focus-visible { outline:2px solid #fff; outline-offset:6px; }
body.vision-page .site-footer { background:#050608; color:#fff; border-top:1px solid #ffffff26; }

/* The image carries the scale; type remains aligned to a consistent left edge. */
body.immersive-page :is(.vision-chapter,.vision-portal) {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:min-content;
  margin:0;
  padding:calc(var(--header-height) + 32px) var(--page-pad) 80px;
  overflow:hidden;
  color:#fff;
  background:#050608;
  scroll-snap-align:start;
  scroll-margin-top:0;
  text-align:start;
}
.vision-scene { position:absolute; z-index:-2; inset:0; width:100%; height:100%; margin:0; overflow:hidden; }
.vision-scene img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.vision-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#000b 0%,#0005 48%,transparent 76%),linear-gradient(0deg,#0008,transparent 35%); }
.vision-editorial { position:relative; z-index:1; width:min(100%,560px); min-width:0; }
.vision-eyebrow { margin:0 0 20px; font-size:11px; font-weight:500; line-height:1.6; letter-spacing:.15em; text-transform:uppercase; color:#ffffffb3; }
:is(.vision-page,.vision-portal) :is(h1,h2) { margin:0; max-width:19ch; font-size:clamp(32px,3.5vw,48px); font-weight:500; line-height:1.15; letter-spacing:-.025em; text-transform:uppercase; color:#fff; text-wrap:balance; }
.vision-page .vision-hero h1 { font-size:clamp(44px,4.5vw,64px); max-width:15ch; }
.vision-deck { max-width:43ch; margin:24px 0 0; font-size:16px; line-height:1.7; font-weight:400; color:#f1f2f3; text-wrap:pretty; }
.vision-button { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:32px; min-height:50px; min-width:160px; max-width:100%; padding:14px 20px; margin-top:28px; border:1px solid #ffffff9c; border-radius:0; background:transparent; color:#fff; font-size:11px; font-weight:550; line-height:1.5; letter-spacing:.045em; text-transform:uppercase; transition:background .2s,color .2s; }
.vision-button:hover { color:#050608; background:#fff; text-decoration:none; }
.vision-button span { flex-shrink:0; font-size:18px; line-height:1; }
.vision-edge { position:absolute; inset-inline:var(--page-pad); bottom:26px; display:flex; justify-content:space-between; color:#ffffff7f; font-size:9px; line-height:1; letter-spacing:.15em; }
.vision-scene-note { position:absolute; inset-inline-end:var(--page-pad); bottom:26px; max-width:80%; color:#ffffff9c; font-size:9px; line-height:1.5; letter-spacing:.035em; }
.vision-hero .vision-scene img { animation:vision-arrival 24s ease-out both; transform-origin:70% 65%; }
.vision-hero .vision-scene::after { background:linear-gradient(90deg,#0008,transparent 72%),linear-gradient(0deg,#0009,transparent 40%); }
body.immersive-page .vision-expedition { align-items:flex-end; padding-bottom:100px; }
.vision-expedition .vision-editorial { width:min(100%,650px); }
.vision-expedition .vision-scene::after { background:linear-gradient(90deg,#000c 0%,#0008 35%,transparent 70%),linear-gradient(0deg,#0006,transparent 70%); }
.vision-expedition .vision-deck { max-width:44ch; }
body.vision-page .vision-understanding { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,90px); background:#090a0b; }
.vision-understanding h2 { max-width:19ch; font-size:clamp(32px,3.5vw,48px); }
.vision-understanding .vision-deck { max-width:42ch; color:#bfc2c6; }
.vision-product { position:relative; width:100%; height:100%; min-height:0; max-height:670px; margin:0; align-self:center; }
.vision-product img { width:100%; height:100%; object-fit:cover; object-position:center 68%; filter:saturate(.45); }
.vision-product::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -80px 70px -50px #090a0b; pointer-events:none; }
.vision-product figcaption { position:absolute; z-index:1; bottom:22px; inset-inline-start:24px; font-size:10px; color:#fffc; letter-spacing:.13em; }
.vision-beginning .vision-scene img { object-position:76% center; }
.vision-beginning .vision-scene::after { background:linear-gradient(90deg,#000e 0%,#000b 35%,#0002 80%); }
.vision-beginning .vision-editorial { width:min(100%,650px); }
.vision-coda { padding:120px var(--page-pad); text-align:center; background:#050608; }
.vision-coda h2 { margin:0 auto; max-width:18ch; font-size:clamp(30px,3vw,40px); }
.vision-coda .vision-eyebrow { margin-bottom:24px; }
body.immersive-page .vision-portal { align-items:flex-end; padding-bottom:clamp(80px,12dvh,130px); }
.vision-portal .vision-editorial { width:min(100%,560px); }
.vision-portal h2 { max-width:19ch; }
.vision-portal .vision-scene img { object-position:65% center; }

/* Give the homepage the same decisive, film-led typographic rhythm. */
body.home-page .hero h1 { max-width:19ch; font-size:clamp(40px,4.5vw,64px); font-weight:500; line-height:1.12; letter-spacing:-.025em; text-transform:uppercase; }
body.home-page .hero-copy { max-width:720px; }
body.home-page .hero-copy .chapter-kicker { letter-spacing:.12em; }
body.home-page .hero-visual::after { background:linear-gradient(90deg,#05060888,transparent 75%),linear-gradient(0deg,#05060866,transparent 70%); }
body.home-page .hero .quiet-link { border:1px solid #ffffff9c; padding:14px 22px; min-height:50px; gap:32px; margin-top:8px; font-size:11px; text-transform:uppercase; }
body.home-page .hero .quiet-link:hover { background:#fff; color:#080a0c; text-decoration:none; }
body.home-page :is(.belief-statement,.companion-heading,.everyday-copy,.section-heading,.home-invitation) h2 { font-weight:500; line-height:1.15; letter-spacing:-.025em; }
:lang(zh-CN) :is(.vision-page,.vision-portal) :is(h1,h2),:lang(zh-TW) :is(.vision-page,.vision-portal) :is(h1,h2) { max-width:9em; line-height:1.2; letter-spacing:0; text-wrap:balance; }
:lang(zh-CN) .vision-page .vision-hero h1,:lang(zh-TW) .vision-page .vision-hero h1 { max-width:7em; font-size:clamp(40px,4vw,56px); word-break:keep-all; }
:is(:lang(zh-CN),:lang(zh-TW)) .vision-deck { max-width:26em; text-wrap:balance; }
:lang(ja) :is(.vision-page,.vision-portal) :is(h1,h2),:lang(ko) :is(.vision-page,.vision-portal) :is(h1,h2) { max-width:10em; line-height:1.16; letter-spacing:-.02em; }
:lang(ar) :is(.vision-page,.vision-portal) :is(h1,h2) { letter-spacing:0; line-height:1.2; }
:lang(ar) .vision-scene::after { background:linear-gradient(270deg,#000c,#0005 50%,transparent 80%); }
:is(:lang(zh-CN),:lang(zh-TW),:lang(ja),:lang(ko)) body.home-page :is(h1,h2) { line-height:1.2; letter-spacing:0; }
:is(:lang(zh-CN),:lang(zh-TW)) body.home-page .hero h1 { max-width:8em; font-size:clamp(40px,4vw,56px); }
@media(min-width:901px) {
  :is(:lang(de),:lang(pt)) .vision-page .vision-hero h1 { max-width:15ch; font-size:clamp(40px,4vw,56px); }
  :lang(de) :is(.vision-expedition,.vision-portal) h2 { max-width:20ch; font-size:clamp(32px,3.5vw,48px); }
}
@keyframes vision-arrival { from { transform:scale(1.07); } to { transform:scale(1); } }
@media(max-width:900px) {
  body.vision-page { --header-height:68px; }
  body.immersive-page :is(.vision-chapter,.vision-portal) { padding-top:calc(var(--header-height) + 28px); padding-bottom:80px; }
  .vision-page .vision-hero h1 { font-size:clamp(40px,6vw,54px); }
  .vision-scene img { object-position:65% center; }
  .vision-deck { font-size:15px; }
  .vision-eyebrow { margin-bottom:20px; }
  body.vision-page .vision-understanding { grid-template-columns:1fr 1fr; gap:28px; }
  .vision-understanding h2 { font-size:clamp(32px,3.5vw,42px); }
  .vision-product { max-height:520px; }
}
@media(max-width:600px) {
  body.vision-page { --header-height:64px; }
  body.immersive-page :is(.vision-chapter,.vision-portal) { padding-inline:24px; }
  .vision-editorial { width:100%; }
  .vision-page .vision-hero h1 { font-size:clamp(34px,9.5vw,40px); max-width:16ch; }
  :is(.vision-page,.vision-portal) h2 { font-size:clamp(28px,8vw,32px); max-width:19ch; }
  .vision-page .vision-hero { align-items:flex-start; padding-top:calc(var(--header-height) + 70px); }
  .vision-hero .vision-scene img { object-position:57% center; }
  .vision-hero .vision-scene::after { background:linear-gradient(180deg,#0009 15%,#0002 65%,#0008); }
  .vision-deck { max-width:37ch; margin-top:24px; font-size:14px; line-height:1.65; }
  .vision-button { min-height:50px; margin-top:28px; padding:14px 20px; }
  body.immersive-page .vision-expedition { align-items:flex-start; padding-top:calc(var(--header-height) + 46px); }
  .vision-expedition .vision-scene img { object-position:85% center; }
  .vision-expedition .vision-scene::after { background:linear-gradient(180deg,#000c 10%,#0008 45%,transparent 80%); }
  body.vision-page .vision-understanding { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:30px; padding-bottom:40px; }
  .vision-understanding h2 { max-width:13ch; }
  .vision-product { width:100%; height:100%; max-height:none; }
  .vision-product img { object-fit:contain; object-position:center; }
  .vision-understanding .vision-edge { display:none; }
  .vision-beginning .vision-scene img { object-position:76% center; }
  .vision-beginning .vision-scene::after { background:linear-gradient(180deg,#000a,#000b 55%,#0007); }
  .vision-coda { padding:90px 24px; }
  .vision-coda h2 { font-size:30px; }
  body.home-page .hero h1, :is(:lang(zh-CN),:lang(zh-TW)) body.home-page .hero h1 { font-size:clamp(34px,9.5vw,40px); }
  :lang(zh-CN) .vision-page .vision-hero h1,:lang(zh-TW) .vision-page .vision-hero h1 { font-size:clamp(34px,9.2vw,40px); }
}
@media(max-height:650px) and (min-aspect-ratio:1/1) {
  body.vision-page { --header-height:64px; }
  body.immersive-page :is(.vision-chapter,.vision-portal) { padding-top:calc(var(--header-height) + 18px); padding-bottom:38px; }
  .vision-page .vision-hero h1 { max-width:19ch; font-size:clamp(32px,8dvh,44px); }
  :is(.vision-page,.vision-portal) h2 { max-width:21ch; font-size:clamp(28px,7dvh,36px); }
  .vision-eyebrow { margin-bottom:12px; font-size:9px; }
  .vision-deck { max-width:54ch; margin-top:14px; font-size:12px; line-height:1.55; }
  .vision-button { min-height:42px; margin-top:18px; padding:10px 18px; font-size:10px; }
  .vision-edge,.vision-scene-note { bottom:14px; font-size:8px; }
  body.immersive-page .vision-expedition { padding-bottom:46px; }
  .vision-expedition .vision-editorial,.vision-beginning .vision-editorial { width:64%; }
  .vision-understanding .vision-deck { max-width:44ch; }
  .vision-understanding h2 { font-size:30px; }
  body.home-page .hero { padding:calc(var(--header-height) + 12px) var(--page-pad) 52px; align-items:center; }
  body.home-page .hero h1, :is(:lang(zh-CN),:lang(zh-TW)) body.home-page .hero h1 { font-size:32px; max-width:23ch; }
  body.home-page .hero-copy .chapter-kicker { margin-bottom:8px; font-size:9px; }
  body.home-page .hero-lead { max-width:62ch; margin:10px 0; font-size:12px; line-height:1.5; }
  body.home-page .hero .quiet-link { min-height:38px; margin-top:4px; padding:9px 16px; }
  :lang(zh-CN) .vision-page .vision-hero h1,:lang(zh-TW) .vision-page .vision-hero h1 { max-width:12em; font-size:clamp(32px,8dvh,44px); }
}
@media(max-width:600px) and (max-height:650px) {
  body.immersive-page :is(.vision-chapter,.vision-portal) { padding-top:calc(var(--header-height) + 24px); padding-bottom:32px; }
  body.vision-page .vision-hero { padding-top:calc(var(--header-height) + 30px); }
  .vision-page .vision-hero h1 { font-size:clamp(32px,7dvh,38px); max-width:14ch; }
  :is(.vision-page,.vision-portal) h2 { font-size:clamp(28px,5.5dvh,32px); max-width:16ch; }
  .vision-eyebrow { margin-bottom:12px; font-size:9px; }
  .vision-deck { margin-top:16px; font-size:12px; line-height:1.55; }
  .vision-button { min-height:42px; margin-top:18px; padding:10px 18px; font-size:10px; }
  body.vision-page .vision-understanding { gap:18px; padding-bottom:22px; }
  .vision-product { min-height:100px; }
  .vision-scene-note { bottom:12px; font-size:8px; }
  :lang(zh-CN) .vision-page .vision-hero h1,:lang(zh-TW) .vision-page .vision-hero h1 { font-size:36px; }
  body.home-page .hero h1, :is(:lang(zh-CN),:lang(zh-TW)) body.home-page .hero h1 { font-size:36px; }
  body.home-page .hero-copy .chapter-kicker { margin-bottom:12px; }
  body.home-page .hero-lead { font-size:13px; line-height:1.55; margin-block:12px; }
}
/* Keep English display copy compact at every viewport, including wide desktops. */
html[lang="en"] body.immersive-page {
  --english-display-size:40px;
  --english-chapter-size:36px;
  --english-compact-size:32px;
}
html[lang="en"] body.home-page .hero-copy { max-width:480px; }
html[lang="en"] body.home-page .hero h1,
html[lang="en"] body.vision-page .vision-hero h1 {
  max-width:480px;
  font-size:var(--english-display-size);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.02em;
}
html[lang="en"] body.vision-page .vision-hero h1 { max-width:460px; }
html[lang="en"] body.home-page main h2,
html[lang="en"] body.vision-page h2,
html[lang="en"] body.story-page main h2 {
  font-size:var(--english-chapter-size);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.02em;
}
html[lang="en"] body.home-page .home-film-frame h2,
html[lang="en"] body.story-framed-page .belief-copy h2,
html[lang="en"] body.story-framed-page .story-principle h2,
html[lang="en"] body.vision-page .vision-coda h2 { font-size:var(--english-compact-size); }
html[lang="en"] :is(.vision-page,.vision-portal) .vision-editorial { width:min(100%,480px); }
html[lang="en"] body.home-page .hero-lead { max-width:440px; margin-block:20px 14px; font-size:15px; line-height:1.65; }
html[lang="en"] .vision-deck { max-width:440px; margin-top:20px; font-size:15px; line-height:1.65; }
@media(min-width:1600px) {
  html[lang="en"] body.immersive-page { --english-display-size:44px; }
}
@media(max-width:900px) {
  html[lang="en"] body.immersive-page { --english-display-size:36px; --english-chapter-size:32px; --english-compact-size:28px; }
}
@media(max-width:600px), (max-height:650px) {
  html[lang="en"] body.immersive-page { --english-display-size:30px; --english-chapter-size:28px; --english-compact-size:26px; }
  html[lang="en"] body.home-page .hero-lead,
  html[lang="en"] .vision-deck { margin-top:16px; font-size:14px; }
}
@media(max-height:650px) and (min-aspect-ratio:1/1) {
  html[lang="en"] :is(.vision-expedition,.vision-beginning) .vision-editorial { width:min(64%,480px); }
  html[lang="en"] body.home-page .hero-lead,
  html[lang="en"] .vision-deck { margin-top:12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .vision-hero .vision-scene img { animation:none; }
  .vision-button { transition:none; }
}