/* Vision — a product film controlled by natural page scrolling. */
.header .brand-logo { width: 145px; height: 58px; }
.vision-story { --header-height: 92px; --stage-height: calc(100svh - var(--header-height)); position: relative; height: calc(var(--stage-height) + 320svh); background: #b4b4b4; }
.vision-stage { position: sticky; top: var(--header-height); height: var(--stage-height); min-height: 520px; overflow: hidden; isolation: isolate; color: #232324; }
.vision-scene { position: absolute; inset: 0; overflow: hidden; background: #b8b8b8; opacity: 0; pointer-events: none; will-change: opacity; }
.vision-scene[data-scene="0"] { opacity: 1; }
.vision-scene:not([inert]) { pointer-events: auto; }
.vision-art { position: absolute; inset: 0; }
.vision-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.vision-copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: 33%; max-width: 470px; z-index: 2; }
.vision-eyebrow { font-size: .75rem; font-weight: 550; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; margin: 0 0 25px; }
.vision-intro h1 { font-size: clamp(6rem, 10.7vw, 11rem); font-weight: 500; letter-spacing: -.075em; line-height: .95; margin: 0 0 28px -.05em; }
.vision-tagline { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 450; letter-spacing: -.04em; margin: 0 0 15px; }
.vision-description { font-size: 1rem; line-height: 1.65; margin: 0; color: inherit; opacity: .75; }
.vision-copy h2 { font-size: clamp(2.8rem, 4.4vw, 4.8rem); letter-spacing: -.055em; font-weight: 500; line-height: 1.04; margin: 0 0 30px; }
.vision-side-note { position: absolute; right: var(--gutter); bottom: 24%; text-align: right; font-size: .875rem; line-height: 1.6; opacity: .6; }
.vision-scene-black { color: #f2f2ee; background: #191919; }
.vision-scene-black .vision-description { opacity: .65; }
.vision-scene-detail { background: #e9e9e7; }
.vision-detail-art { position: absolute; inset: 0 0 0 45%; overflow: hidden; }
.vision-detail-art img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.vision-detail-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e9e9e7, transparent 25%); }
.vision-scene-detail .vision-copy { width: 38%; }
.vision-scene-olive { background: #727454; color: #fcfcf5; }
.vision-scene-olive .vision-copy { text-shadow: 0 1px 16px #30321e18; }
.vision-cta { border: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 99px; padding: 17px 24px; background: #fcfcf3; color: #2a2b23; font-size: .875rem; font-weight: 500; transition: background .2s, transform .2s; }
.vision-cta:hover { background: white; transform: translateY(-2px); }
.vision-topline, .vision-bottomline { position: absolute; left: var(--gutter); right: var(--gutter); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.vision-topline { top: 28px; font-size: .75rem; }
.vision-topline > span { letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.vision-topline a, .vision-topline button { display: flex; gap: 17px; font-size: .875rem; padding: 10px 0; color: inherit; background: none; border: 0; }
.vision-bottomline { bottom: 26px; }
.vision-chapters { display: flex; gap: 16px; }
.vision-chapters button { border: 0; background: none; color: inherit; padding: 10px 0; width: 80px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.chapter-track { height: 2px; width: 100%; position: relative; background: currentColor; opacity: .25; overflow: hidden; }
.chapter-track i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
.vision-chapters button[aria-pressed="true"] .chapter-track { opacity: 1; background: color-mix(in srgb, currentColor 20%, transparent); }
.chapter-name { font-size: .75rem; opacity: .5; }
.vision-chapters button[aria-pressed="true"] .chapter-name { opacity: 1; }
.vision-scroll { background: none; border: 0; color: inherit; display: flex; align-items: center; gap: 25px; font-size: .875rem; padding: 10px 0; }
.vision-scroll > span:last-child { font-size: 1.4rem; }
.vision-stage.is-dark { color: #f6f6ef; }
.vision-stage.is-dark :focus-visible { outline-color: white; }
.vision-stage :focus-visible { outline-color: #333; }
/* Touch layouts keep the form below the copy, without cropping its silhouette. */
@media (max-width: 1000px) {
  .vision-copy { width: 36%; }
  .vision-intro h1 { font-size: 6.7rem; }
  .vision-side-note { display: none; }
  .vision-art { left: 6%; right: -6%; }
}
@media (max-width: 760px) {
  .header .brand-logo { width: 135px; height: 54px; }
  .vision-story { --header-height: 74px; height: calc(var(--stage-height) + 260svh); }
  .vision-stage { min-height: 0; }
  .vision-topline { top: 12px; gap: 15px; }
  .vision-topline > span { font-size: .75rem; letter-spacing: .04em; }
  .vision-topline a, .vision-topline button { font-size: .75rem; gap: 8px; }
  .vision-copy, .vision-scene-detail .vision-copy { top: 13%; left: var(--gutter); width: calc(100% - var(--gutter) * 2); max-width: none; transform: none; }
  .vision-eyebrow { font-size: .75rem; letter-spacing: .12em; margin-bottom: 14px; }
  .vision-intro h1 { font-size: 5.7rem; margin-bottom: 15px; }
  .vision-tagline { font-size: 1.45rem; margin-bottom: 9px; }
  .vision-description { font-size: 1rem; }
  .vision-copy h2 { font-size: 2.8rem; line-height: 1.03; margin-bottom: 20px; }
  .vision-art { top: 32%; bottom: 3%; left: 0; right: 0; mask-image: linear-gradient(to bottom, transparent, black 20%); }
  .vision-art img { object-position: 50% 50%; }
  .vision-scene-silver { background: #b8b8b8; }
  .vision-scene-black { background: #232323; }
  .vision-scene-black .vision-art { top: 39%; }
  .vision-detail-art { inset: 41% 0 0; mask-image: linear-gradient(to bottom, transparent, black 16%); }
  .vision-detail-art::after { display: none; }
  .vision-detail-art img { object-position: 50% 40%; }
  .vision-scene-olive { background: #717352; }
  .vision-scene-olive .vision-art { top: 40%; }
  .vision-cta { padding: 14px 20px; font-size: .875rem; }
  .vision-bottomline { bottom: 19px; gap: 10px; align-items: flex-end; }
  .vision-chapters { width: 100%; max-width: 355px; gap: 12px; }
  .vision-chapters button { flex: 1; min-width: 0; width: auto; gap: 10px; }
  .chapter-name { font-size: .75rem; }
  .vision-scroll { background: none; border: 0; color: inherit; display: none; }
}
@media (max-height: 680px) and (min-width: 761px) {
  .vision-stage { min-height: 420px; }
  .vision-intro h1 { font-size: 6rem; }
  .vision-copy h2 { font-size: 2.8rem; }
  .vision-eyebrow { margin-bottom: 16px; }
}
/* No long pinned sequence for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .vision-story { height: auto; }
  .vision-stage { height: auto; min-height: 0; position: relative; top: 0; overflow: visible; }
  .vision-scene { position: relative; min-height: 650px; height: calc(100svh - 92px); opacity: 1 !important; pointer-events: auto; }
  .vision-art img, .vision-detail-art img { transform: none !important; }
  .vision-copy { opacity: 1 !important; }
  .vision-topline, .vision-bottomline { display: none; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .vision-copy, .vision-scene-detail .vision-copy { top: 11%; }
  .vision-intro h1 { font-size: 4.4rem; }
  .vision-copy h2 { font-size: 2.1rem; margin-bottom: 14px; }
  .vision-eyebrow { margin-bottom: 10px; }
  .vision-tagline { font-size: 1.2rem; }
  .vision-art { top: 38%; }
  .vision-scene-black .vision-art, .vision-scene-olive .vision-art { top: 42%; }
  .vision-topline > span { letter-spacing: 0; }
}
@media (max-width: 760px) {
  .vision-bottomline { left: 14px; right: 14px; bottom: 12px; padding: 3px 14px; border-radius: 12px; background: #f5f5f0e8; color: #292927; backdrop-filter: blur(16px); }
  .vision-stage.is-dark .vision-bottomline { background: #171813c9; color: #fcfcf6; }
  .vision-chapters { max-width: none; gap: 10px; }
  .chapter-name { font-size: .8125rem; }
  .vision-chapters button[aria-pressed="true"] .chapter-name { font-weight: 550; }
}

/* Header positions stay tied to the window, including on ultrawide displays. */
.header-inner { width: 100%; max-width: none; padding-inline: clamp(24px, 3.2vw, 80px); display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 3vw, 72px); }
.header-inner > .wordmark { justify-self: start; }
.header .desktop-nav { margin: 0; gap: clamp(28px, 3vw, 72px); }
.header .studio-link { justify-self: end; }
/* The product-page story leads into the existing product details. */
.vision-product-details { padding-top: 50px; padding-bottom: 15px; scroll-margin-top: 110px; }
@media (max-width: 760px) {
  .header-inner { grid-template-columns: 1fr auto; padding-inline: 22px; gap: 20px; }
  .header .menu-toggle { justify-self: end; }
  .vision-product-details { padding-top: 20px; scroll-margin-top: 90px; }
}