/* Both scenes share the exact same camera; clouds cover by displacement. */
body:not(.interior-page) .header:not(.is-scrolled) { background: transparent; border-color: transparent; }
.field-hero { position: relative; height: 270svh; background: white; }
.field-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #83c6f4; }
.field-world { position: absolute; inset: 0; overflow: hidden; }
.field-backdrop { position: absolute; inset: 0; transform-origin: 50% 75%; transform: translateY(var(--land-y, 0px)) scale(var(--land-scale, 1)); }
.field-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.field-products { position: absolute; bottom: 0; left: 7%; width: 86%; height: 43%; display: flex; align-items: end; justify-content: center; transform-origin: 50% 100%; transform: translateY(var(--pack-y, 7svh)) scale(var(--pack-scale, .9)); }
.field-products img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.field-copy { position: absolute; z-index: 3; top: clamp(112px, 13svh, 160px); left: 8%; right: 8%; text-align: center; opacity: var(--copy-opacity, 1); transform: translateY(var(--copy-y, 0px)); }
.field-copy h1 { font: 600 clamp(40px, 4.4vw, 68px)/1.10 var(--display); letter-spacing: -.03em; margin: 0; color: #173347; text-wrap: balance; }
.field-copy h1 span { color: inherit; }
.field-copy p { color: #173347; font: 500 18px/1.45 var(--sans); margin: 16px 0 20px; }
.field-copy .button { min-height: 48px; padding: 14px 23px; }
.field-cloud-bank { position: absolute; pointer-events: none; z-index: 4; top: 0; left: calc((100% - var(--cloud-width, 150vw)) / 2); width: var(--cloud-width, 150vw); height: var(--cloud-height, 50vw); transform: translate(var(--cloud-x, 0px), var(--cloud-y, 100svh)); }
.field-cloud-bank > img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; }
.field-cloud-bank::after { content: ''; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; height: 20%; background: linear-gradient(transparent, white); }
.cloud-tail { position: absolute; top: 85%; left: 0; right: 0; height: calc(110svh + var(--cloud-height, 50vw)); background: white; }
.field-cloud-far { transform: translate(calc(-1 * var(--cloud-x, 0px)), var(--cloud-far-y, 100svh)); }
.field-letter-window { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: var(--arrival-opacity, 0); mask: url('../assets/hero/reana-wordmask.svg') center 58% / min(86vw, 1250px) auto no-repeat; }
.field-arrival { position: absolute; z-index: 6; top: 35%; left: 5%; right: 5%; text-align: center; opacity: var(--arrival-opacity, 0); transform: translateY(var(--arrival-y, 20px)); pointer-events: none; }
.field-arrival span { display: block; font: 600 clamp(22px, 3vw, 40px)/1.2 var(--display); color: #173347; }
.field-scroll, .field-motion { position: absolute; z-index: 7; bottom: max(22px, env(safe-area-inset-bottom)); color: #173347; background: white; border: 0; border-radius: 100px; font: 600 14px var(--sans); padding: 12px 18px; min-height: 44px; }
.field-scroll { left: 5.2%; display: flex; align-items: center; gap: 24px; }
.field-scroll span { font-size: 22px; line-height: 1; }
.field-motion { right: 5.2%; cursor: pointer; }
.field-scroll-target { position: absolute; top: 100svh; }
.world-overview { padding-block: 80px; }
.overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 40px; }
.overview-heading h2 { margin: 0; font-size: clamp(34px, 4.2vw, 62px); }
.overview-heading p { max-width: 38ch; color: var(--muted); font-size: 18px; line-height: 1.6; margin: 0; }
.overview-links { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line); }
.overview-links a { padding: 24px 18px 24px 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; color: var(--ink); }
.overview-links strong { font: 600 19px var(--display); }
.overview-links span { grid-column: 1; font-size: 15px; color: var(--muted); }
.overview-links b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--red); font-size: 23px; transition: transform .25s ease; }
.overview-links a:hover b { transform: translate(3px, -3px); }
.overview-links a:hover strong { color: var(--red); }
.scene-caption { color: var(--muted); font-size: 13px; margin: 22px 0 0; }
.company-film { position: relative; height: 100svh; min-height: 460px; overflow: hidden; background: #173347; color: white; }
.company-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.company-film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07130dbd, #07130d26 75%), linear-gradient(#07130d59, transparent 25%); pointer-events: none; }
.company-film-copy { position: absolute; z-index: 1; top: 50%; left: 8%; right: 8%; transform: translateY(-35%); }
.company-film-copy h1, .company-film-copy h2 { font: 600 clamp(42px, 5.5vw, 80px)/1.12 var(--display); letter-spacing: -.03em; margin: 0 0 24px; color: white; }
.company-film-copy h1 span, .company-film-copy h2 span { color: white; display: block; }
.company-film-copy p { font-size: 20px; line-height: 1.6; max-width: 45ch; margin: 0 0 30px; }
.company-film-copy .button { background: white; color: var(--ink); }
.company-film > .hero-video-toggle { position: absolute; z-index: 2; right: 6%; bottom: 28px; background: white; color: var(--ink); border: 0; backdrop-filter: none; min-height: 44px; font-size: 14px; }
.company-page .header:not(.is-scrolled) nav > a:not(.nav-contact) { color: white; }
.company-page .header:not(.is-scrolled) nav > a[aria-current=page] { background: #ffffff26; }
.company-page .header:not(.is-scrolled) nav.open > a:not(.nav-contact) { color: var(--ink); }
.company-page .header:not(.is-scrolled) .brand { background: white; border-radius: 8px; padding-inline: 8px; }
.company-information { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .field-copy { left: 5%; right: 5%; top: 112px; }
  .field-copy h1 { font-size: clamp(36px, 5.5vw, 56px); }
  .overview-heading { display: block; }
  .overview-heading p { margin-top: 20px; }
  .overview-links { grid-template-columns: 1fr; }
  .overview-links a { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .overview-links a:last-child { border-bottom: 0; }
  .world-overview { padding-block: 60px; }
}
@media (max-aspect-ratio: 4/5) {
  .field-products { width: 84%; left: 8%; height: 44%; }
  .field-copy h1 { font-size: clamp(32px, 8.7vw, 52px); }
  .field-copy p { font-size: 17px; }
  .field-arrival { top: 39%; }
  .field-letter-window { mask-position: center 59%; mask-size: 90vw auto; }
}
@media (max-width: 520px) {
  .field-copy p { font-size: 16px; margin: 14px 0 18px; }
  .field-copy .button { font-size: 14px; padding-inline: 18px; }
  .field-scroll, .field-motion { font-size: 12px; padding: 11px 13px; }
  .field-scroll { left: 4%; gap: 10px; }
  .field-motion { right: 4%; }
  .company-film-copy { left: 6%; right: 6%; }
  .company-film-copy h1, .company-film-copy h2 { font-size: clamp(34px, 9vw, 48px); }
  .company-film-copy p { font-size: 18px; }
}
@media (max-height: 700px) {
  .field-copy { top: 105px; }
  .field-copy h1 { font-size: clamp(28px, 6svh, 42px); }
  .field-copy p { font-size: 16px; margin: 10px 0 14px; }
  .field-copy .button { min-height: 42px; padding-block: 10px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  .field-backdrop { top: 40%; bottom: -40%; mask-image: linear-gradient(transparent, black 18%); }
  .field-copy { top: 92px; }
  .field-copy h1 { font-size: 29px; }
  .field-copy h1 br { display: none; }
  .field-copy h1 span { margin-inline-start: .25em; }
  .field-arrival { top: 27%; }
  .field-letter-window { mask-position: center 62%; }
  .field-copy p { font-size: 14px; margin: 8px 0 12px; }
  .field-copy p br { display: none; }
  .field-copy .button { min-height: 38px; padding: 8px 16px; font-size: 13px; }
  .field-scroll, .field-motion { bottom: 12px; font-size: 12px; padding: 10px 14px; }
  .company-film { min-height: 100svh; }
  .company-film-copy { top: 45%; }
  .company-film-copy h1, .company-film-copy h2 { font-size: 32px; margin-bottom: 12px; }
  .company-film-copy p { font-size: 16px; margin-bottom: 16px; }
}
@media (max-height: 600px) and (max-aspect-ratio: 4/5) {
  .field-backdrop { top: 20%; bottom: -20%; mask-image: linear-gradient(transparent, black 18%); }
  .field-copy { top: 100px; }
  .field-copy h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .field-hero { height: auto; }
  .field-stage { position: relative; }
  .field-backdrop { transform: none; }
  .field-products { transform: translateY(-3svh); }
  .field-copy { transform: none; opacity: 1; }
  .field-cloud-bank, .field-arrival, .field-letter-window, .field-motion { display: none; }
  .overview-links b { transition: none; }
}