/* Top-screen concept: one sheet, several perspectives. The rest of the site stays independent. */
.cinematic-landing .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border: 0;
  color: #fff;
  background: transparent;
}
.cinematic-landing .site-header header {
  min-height: 96px;
  border-bottom: 1px solid #ffffff30;
}
.cinematic-landing .site-header .brand {
  font-size: 30px;
  font-weight: 550;
}
.cinematic-landing .site-header .nav-lang { border-color: #ffffff40; }
.cinematic-landing .site-header .nav-cta { border-color: #ffffff75; }
.cinematic-landing .site-header a:focus-visible,
.cinema-hero a:focus-visible,
.cinema-hero button:focus-visible { outline-color: #fff; }
.cinema-hero {
  --scene-pan-x: 0px;
  --scene-pan-y: 0px;
  --scene-shift: 0px;
  --word-shift: 0px;
  --scene-edge: max(var(--gutter), calc((100vw - var(--page)) / 2));
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  background: #15202a;
  color: #fff;
}
.scene-environment {
  position: absolute;
  z-index: -3;
  inset: -4%;
  transform: translate3d(var(--scene-pan-x), calc(var(--scene-pan-y) + var(--scene-shift)), 0);
  will-change: transform;
}
.scene-breathe,
.scene-breathe img {
  display: block;
  width: 100%;
  height: 100%;
}
.scene-breathe {
  transform: scale(1.045);
  transform-origin: 65% 45%;
}
.js .scene-breathe { animation: scene-breathe 28s ease-in-out infinite alternate; }
.scene-breathe img { object-fit: cover; object-position: 62% 50%; }
.cinema-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  /* These overlays protect text contrast over the image; they are not a backdrop. */
  background: linear-gradient(90deg, #08121b75 0%, #08121b16 48%, #08121b00 75%),
              linear-gradient(0deg, #060d14dc 0%, #060d144a 32%, transparent 65%, #060d1480 100%);
}
.hero-copy {
  position: absolute;
  left: var(--scene-edge);
  top: 20%;
  max-width: 45%;
}
.hero-copy h1 {
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 450;
  line-height: 1.7;
  letter-spacing: -.045em;
  text-shadow: 0 2px 18px #0003;
}
.hero-copy h1 span { display: block; }
.hero-wordmark {
  position: absolute;
  left: var(--scene-edge);
  bottom: 102px;
  margin-left: -.027em;
  color: #fffdf6;
  font: 600 calc((100vw - 2 * var(--scene-edge)) / 2.79)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.055em;
  transform: translate3d(0, var(--word-shift), 0);
  pointer-events: none;
  user-select: none;
}
.hero-bottom {
  position: absolute;
  bottom: 25px;
  left: var(--scene-edge);
  right: var(--scene-edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}
.hero-explore { display: flex; align-items: center; gap: 22px; }
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}
.hero-scroll svg { width: 17px; height: 28px; flex: none; }
.scene-motion {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #ffffff40;
  color: #fff;
  background: #0b141d55;
  font-size: 10px;
}
.scene-motion svg { width: 12px; height: 14px; }
.scene-motion:disabled { opacity: .75; cursor: default; }
.motion-play { display: none; }
.scene-motion[aria-pressed="true"] .motion-play { display: block; }
.scene-motion[aria-pressed="true"] .motion-pause { display: none; }
.hero-get { display: flex; align-items: center; gap: 22px; }
.hero-get p { font-size: 11px; }
.hero-get a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 142px;
  padding: 12px 20px;
  border: 1px solid #fff;
  color: #12202a;
  background: #fff;
  font-size: 12px;
  text-decoration: none;
}
.hero-get a:hover { background: #e8edf0; }
.cinema-hero.is-still .scene-breathe { animation-play-state: paused; }
.cinema-hero.is-still .scene-environment { will-change: auto; }
.reading-body > .lead { padding-block: 80px 70px; }
.product-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -.04em;
}
.cinematic-landing:lang(en) .hero-copy { max-width: 46%; }
.cinematic-landing:lang(en) .hero-copy h1 {
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.27;
  letter-spacing: 0em;
}
@keyframes scene-breathe {
  from { transform: scale(1.045); }
  to { transform: scale(1.1); }
}
@media (max-height: 760px) and (min-width: 761px) {
  .hero-copy { top: 19%; }
  .hero-copy h1 { font-size: 30px; line-height: 1.6; }
  .cinematic-landing:lang(en) .hero-copy h1 { font-size: 38px; }
  .hero-wordmark { bottom: 102px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-copy { top: 25%; }
  .hero-copy h1 { font-size: 28px; }
  .hero-get p { display: none; }
}
@media (max-width: 760px) {
  .cinematic-landing .site-header header { min-height: 80px; }
  .cinematic-landing .site-header .brand { font-size: 27px; }
  .js .cinematic-landing .site-header nav { background: #111d27; border-color: #ffffff40; }
  .cinema-hero { min-height: 680px; max-height: 1100px; }
  .scene-breathe img { object-position: 56% 50%; }
  .cinema-hero::before {
    background: linear-gradient(90deg, #08121b70, #08121b16 95%),
                linear-gradient(0deg, #060d14ed, #060d144a 42%, #060d1480 100%);
  }
  .hero-copy { top: 23%; left: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); }
  .hero-copy h1 { font-size: clamp(25px, 6.6vw, 39px); line-height: 1.8; }
  .hero-wordmark { bottom: 172px; }
  .hero-bottom { left: var(--gutter); right: var(--gutter); bottom: 22px; display: block; }
  .hero-get { justify-content: space-between; gap: 14px; margin-bottom: 17px; }
  .hero-get p { font-size: 10px; max-width: 150px; }
  .hero-get a { min-width: 130px; }
  .hero-explore { justify-content: space-between; gap: 15px; }
  .hero-scroll { font-size: 10px; gap: 10px; }
  .scene-motion { font-size: 9px; }
  .hero-get { position: absolute; left: 0; right: 0; bottom: 48px; }
  .hero-explore { padding-top: 65px; }
  .reading-body > .lead { padding-block: 48px; }
  .cinematic-landing:lang(en) .hero-copy { max-width: calc(100% - 2 * var(--gutter)); }
  .cinematic-landing:lang(en) .hero-copy h1 { font-size: clamp(32px, 8vw, 45px); line-height: 1.32; }
}
@media (max-width: 370px) {
  .hero-get p { max-width: 125px; }
  .hero-get a { min-width: 120px; padding-inline: 14px; }
  .scene-motion { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-breathe { animation: none !important; transform: scale(1.045); }
  .scene-environment, .hero-wordmark { transform: none !important; will-change: auto; }
}