/* Approved cinematic opening. Styles are isolated from the rest of the offer. */
.landing-header {
  position:absolute;
  inset:0 0 auto;
  border:0;
  background:transparent;
  backdrop-filter:none;
  color:#fbfcf8;
}
.landing-header .aa-brand,.landing-header .landing-nav a {
  color:#fbfcf8;
}
.landing-header .header-inner {
  min-height:100px;
}
.cinematic-hero {
  --progress:0;
  position:relative;
  height:100svh;
  min-height:680px;
  background:#090b0b;
  color:#fbfcf8;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.cinematic-hero.is-interactive {
  height:280svh;
}
.cinematic-hero .stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
}
.cinematic-hero .art {
  position:absolute;
  inset:0;
  z-index:-3;
  transform:translate3d(var(--mouse-x,0px),var(--mouse-y,0px),0) scale(1.035);
}
.cinematic-hero .poster,.cinematic-hero .poster img,.cinematic-hero canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 50%;
}
.cinematic-hero canvas {
  opacity:0;
  transition:opacity .25s;
}
.cinematic-hero.has-frame canvas {
  opacity:1;
}
.cinematic-hero .shade {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#050808ed 0%,#050808a6 30%,#0508081f 58%,transparent 80%),linear-gradient(0deg,#090b0bf0 0%,transparent 24%,transparent 82%,#090b0b90 100%);
}
.cinematic-hero .hero-content {
  position:absolute;
  left:7%;
  top:50%;
  transform:translateY(-42%);
  width:52%;
  max-width:780px;
}
.cinematic-hero .eyebrow {
  font:500 10px/1.4 var(--landing-mono);
  letter-spacing:.2em;
  margin:0 0 28px;
  display:flex;
  align-items:center;
  gap:9px;
}
.cinematic-hero .eyebrow>span {
  width:5px;
  height:5px;
  background:#ff4d20;
  border-radius:50%;
}
.cinematic-hero .eyebrow {
  color:#ced2cc;
}
.cinematic-hero .titles {
  position:relative;
  height:clamp(288px,26vw,388px);
}
.cinematic-hero .chapter {
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .32s,transform .45s;
  will-change:opacity,transform;
  pointer-events:none;
}
.cinematic-hero .chapter.active {
  opacity:1;
  transform:none;
}
.cinematic-hero .chapter h1,.cinematic-hero .chapter h2 {
  font:500 clamp(48px,5.1vw,86px)/1.02 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:-.015em;
  margin:0 0 26px;
  color:#fbfcf8;
}
.cinematic-hero .chapter em {
  font-style:normal;
  color:#ff4d20;
}
.cinematic-hero .chapter p {
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.01em;
  color:#ced2cc;
  margin:0;
}
.cinematic-hero .cta {
  display:inline-flex;
  min-height:52px;
  padding:14px 21px;
  background:#ff4d20;
  color:#101817;
  font-weight:600;
  font-size:13px;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border:1px solid transparent;
  text-decoration:none;
  max-width:100%;
  transition:background .15s;
}
.cinematic-hero .cta:hover {
  background:#ff704c;
}
.cinematic-hero .cta span {
  font-size:21px;
  font-weight:400;
}
.cinematic-hero :focus-visible {
  outline:3px solid #ff926f;
  outline-offset:7px;
}
.cinematic-hero .stage-bottom {
  position:absolute;
  bottom:38px;
  left:5.3%;
  right:5.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.cinematic-hero .scroll-note {
  display:flex;
  align-items:center;
  gap:14px;
  font:9px var(--landing-mono);
  letter-spacing:.17em;
  color:#ccd0c9;
  visibility:hidden;
}
.cinematic-hero.is-interactive .scroll-note {
  visibility:visible;
}
.cinematic-hero .scroll-icon {
  border:1px solid #626861;
  border-radius:20px;
  width:25px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:17px;
}
.cinematic-hero .timeline {
  display:none;
  align-items:center;
  gap:16px;
  font:8px var(--landing-mono);
  letter-spacing:.2em;
  color:#ccd0c9;
}
.cinematic-hero.is-interactive .timeline {
  display:flex;
}
.cinematic-hero .timeline i {
  position:relative;
  width:160px;
  height:1px;
  background:#ffffff35;
}
.cinematic-hero .timeline b {
  position:absolute;
  inset:0;
  background:#ff4d20;
  transform:scaleX(var(--progress));
  transform-origin:left;
}
.cinematic-hero .timeline b:after {
  content:'';
  position:absolute;
  right:0;
  top:-2px;
  height:5px;
  width:5px;
  background:#ff4d20;
  border-radius:50%;
}
#hero-replay {
  color:#ccd0c9;
  background:none;
  border:0;
  cursor:pointer;
  min-width:66px;
  min-height:44px;
  font:12px 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
#hero-replay span {
  margin-left:14px;
}
.offer-hero .hero-copy h2 {
  font:500 clamp(36px,4.3vw,64px)/1.05 var(--landing-display);
  letter-spacing:-.015em;
  margin:0 0 28px;
}
@media(min-width:1800px) {
  .cinematic-hero .hero-content {
    max-width:900px;
  }
  .cinematic-hero .chapter h1,.cinematic-hero .chapter h2 {
    font-size:100px;
  }
  .cinematic-hero .titles {
    height:420px;
  }
}
@media(max-width:1050px) and (min-width:701px) {
  .cinematic-hero .hero-content {
    left:6%;
    width:61%;
  }
  .cinematic-hero .chapter h1,.cinematic-hero .chapter h2 {
    font-size:58px;
  }
  .cinematic-hero .titles {
    height:300px;
  }
  .cinematic-hero .timeline i {
    width:90px;
  }
}
@media(max-width:700px) {
  .landing-header .header-inner {
    min-height:82px;
  }
  .cinematic-hero.is-interactive {
    height:250svh;
  }
  .cinematic-hero .art {
    inset:0 0 21%;
  }
  .cinematic-hero .poster,.cinematic-hero .poster img,.cinematic-hero canvas {
    object-position:65% 35%;
  }
  .cinematic-hero .shade {
    background:linear-gradient(0deg,#090b0b 0%,#090b0bf0 19%,#090b0b8c 48%,#090b0b00 71%,#090b0b80 100%);
  }
  .cinematic-hero .hero-content {
    top:auto;
    bottom:115px;
    left:7%;
    width:86%;
    transform:none;
  }
  .cinematic-hero .eyebrow {
    font-size:8px;
    margin-bottom:20px;
  }
  .cinematic-hero .chapter h1,.cinematic-hero .chapter h2 {
    font-size:clamp(38px,9.5vw,59px);
    line-height:1.03;
    margin-bottom:20px;
  }
  .cinematic-hero .chapter p {
    font-size:12px;
    line-height:1.55;
  }
  .cinematic-hero .titles {
    height:max(230px,calc(29.36vw + 99px));
  }
  .cinematic-hero .cta {
    font-size:12px;
    min-height:50px;
    padding:12px 17px;
    gap:25px;
  }
  .cinematic-hero .stage-bottom {
    left:7%;
    right:7%;
    bottom:25px;
    gap:12px;
  }
  .cinematic-hero .scroll-note {
    font-size:7px;
    gap:8px;
    letter-spacing:.12em;
  }
  .cinematic-hero .scroll-icon {
    width:20px;
    height:31px;
    font-size:14px;
  }
  .cinematic-hero .timeline {
    gap:8px;
  }
  .cinematic-hero .timeline span {
    display:none;
  }
  .cinematic-hero .timeline i {
    width:75px;
  }
  #hero-replay {
    font-size:11px;
    min-width:60px;
  }
  #hero-replay span {
    margin-left:8px;
  }
}
@media(max-width:380px) {
  .cinematic-hero .chapter h1,.cinematic-hero .chapter h2 {
    font-size:clamp(32px,10.28vw,37px);
  }
  .cinematic-hero .titles {
    height:221px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .cinematic-hero.is-interactive {
    height:100svh;
  }
  .cinematic-hero .art {
    transform:none;
  }
  .cinematic-hero .chapter,.cinematic-hero canvas {
    transition:none;
  }
  .cinematic-hero .timeline,.cinematic-hero .scroll-note {
    visibility:hidden;
  }
}
/* Short screens use a static scene in normal flow so every control stays reachable. */
@media (max-height: 499px), (max-height: 679px) and (orientation: landscape) {
  .cinematic-hero,
  .cinematic-hero.is-interactive {
    height: auto;
    min-height: 0;
  }
  .cinematic-hero .stage {
    position: relative;
    height: auto;
    min-height: 0;
  }
  .cinematic-hero .hero-content {
    position: relative;
    inset: auto;
    width: 86%;
    max-width: 780px;
    margin-left: 7%;
    padding: 112px 0 90px;
    transform: none;
  }
  .cinematic-hero .eyebrow {
    margin-bottom: 16px;
  }
  .cinematic-hero .titles {
    height: 205px;
  }
  .cinematic-hero .chapter h1,
  .cinematic-hero .chapter h2 {
    font-size: clamp(28px, 4.6vw, 42px);
    margin-bottom: 16px;
  }
  .cinematic-hero .chapter p {
    font-size: 12px;
  }
  .cinematic-hero .art {
    inset: 0;
    transform: none;
  }
  .cinematic-hero .stage-bottom {
    display: none;
  }
}
/* One native H1 remains accessible while the visual chapters change. */
.cinematic-hero .accessible-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Compact the animated desktop composition before it reaches the static threshold. */
@media (min-width: 701px) and (max-height: 800px) and (min-height: 680px) {
  .cinematic-hero .titles {
    height: 300px;
  }
  .cinematic-hero .chapter h2 {
    font-size: clamp(42px, min(7.5vh, 6.5vw), 60px);
  }
}
@media (min-width: 701px) and (max-width: 1050px) and (min-height: 801px) {
  .cinematic-hero .chapter h2 {
    font-size: clamp(48px, 6.5vw, 58px);
  }
}

/* Portrait phones keep the sequence even with browser bars taking vertical space. */
@media (orientation: portrait) and (min-height: 500px) and (max-height: 679px) {
  .cinematic-hero, .cinematic-hero .stage { min-height: 0; }
  .cinematic-hero .hero-content { bottom: 90px; }
  .cinematic-hero .titles { height: 190px; }
  .cinematic-hero .chapter h2 { font-size: clamp(28px, 8.5vw, 40px); margin-bottom: 16px; }
  .cinematic-hero .chapter p { font-size: 11px; line-height: 1.5; }
  .cinematic-hero .eyebrow { margin-bottom: 16px; }
  .cinematic-hero .stage-bottom { bottom: 16px; }
}

/* The offer follows the visual introduction with a concise, scannable summary. */
.offer-hero .hero-copy h2 { font-size: clamp(30px, 3.4vw, 48px); margin-bottom: 18px; }
@media (max-width: 700px) {
  .offer-hero { padding-top: 32px; }
  .offer-hero .hero-copy .landing-kicker { margin-bottom: 16px; }
  .offer-hero .hero-solution { font-size: 15px; line-height: 1.5; margin-bottom: 0; }
}
