/* Homepage hero: oversized type beside the looping brand animation (hero-motion.js and hero-motion.css),
   inside the page's fluid container (--page-gutter in styles.css). The stage is 16:10: every scene of the loop stays
   inside viewBox y 199-797, so the 1:1 box only added empty cream above and below the art. The hero is sized by its content.
   Side by side on landscape screens from 800px; stacked on phones and portrait tablets (up to 1180px wide). */

/* ---- Composition ---- */
.home-page .hero.hero-cinematic{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:#f5efe5}
@media(min-width:800px) and (orientation:landscape),(min-width:1181px){
  .home-page .hero.hero-cinematic{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);column-gap:clamp(28px,1.6vw,48px);align-items:center;min-height:0;padding-block:clamp(48px,8svh,104px);padding-inline:var(--page-gutter)}
  .home-page .hero-cinematic .hero-copy{position:relative;z-index:3;max-width:none;padding:0}
  .home-page .hero-cinematic .eyebrow{font-size:clamp(12px,8px + .3vw,15px);letter-spacing:.16em;margin-bottom:clamp(18px,3svh,30px)}
  .home-page .hero-cinematic h1{font-size:clamp(34px,11.2cqw,calc(116px + var(--display-step)));line-height:1.03}
  .home-page .hero-cinematic .hero-description{font-size:clamp(17px,min(1.4vw,10px + .7vw),26px);line-height:1.6;max-width:29em;margin-top:clamp(20px,3.4svh,34px)}
  .home-page .hero-cinematic .hero-actions{gap:clamp(28px,1.6vw,36px);margin-top:clamp(24px,4svh,40px)}
  .home-page .hero-cinematic .hero-actions .button{padding:calc(.8em + 5px) 1.65em;font-size:clamp(15px,11px + .3vw,17.5px)}
  .home-page .hero-cinematic .hero-actions .text-link{font-size:clamp(15px,11px + .3vw,17.5px)}
  /* A 16:10 stage, 7% wider than its column and run into the right gutter by that 7%: the widest scene (the heatmap boards,
     viewBox x 70-930) then ends exactly on the page frame, in line with "Let’s talk" and the proof bar, and the art is 7.5% larger.
     The stage's empty top and bottom bands (5% of its height each) sit in the hero padding instead of adding to the hero's height. */
  .home-page .hero-cinematic .hero-motion{justify-self:end;align-self:center;width:calc(100% / .93);margin-right:calc(-7% / .93);margin-block:calc(-100% / .93 * .03125);aspect-ratio:16/10}
}
@media(min-width:800px) and (max-width:1050px) and (orientation:landscape){
  .home-page .hero.hero-cinematic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
}
@media(min-width:800px) and (max-height:680px){
  .home-page .hero-cinematic h1{font-size:clamp(40px,min(9.5cqw,9svh),96px)}
}
@media(max-width:799px),(max-width:1180px) and (orientation:portrait){
  .home-page .hero.hero-cinematic{grid-template-columns:minmax(0,1fr);padding-bottom:28px;row-gap:20px}
  .home-page .hero-cinematic .hero-description{font-size:17px}
  .home-page .hero-cinematic .hero-actions .button{padding:15px 22px;font-size:15px}
  .home-page .hero-cinematic .hero-motion{justify-self:stretch;width:100%;aspect-ratio:16/10}
}
/* Portrait tablets: larger type to match the full-width stage below it. */
@media(min-width:800px) and (max-width:1180px) and (orientation:portrait){
  .home-page .hero.hero-cinematic{padding-inline:var(--page-gutter)}
  .home-page .hero.hero-cinematic h1{font-size:clamp(60px,9.4vw,90px)}
  .home-page .hero.hero-cinematic .hero-description{font-size:19px;max-width:32em}
}

/* Pre-intro hold: set in the page head before first paint (unless motion is reduced) and released by motion.js,
   so a slow connection never paints the hero, erases it, and animates it in again. Failsafe after 4s. */
.intro-type .hero h1 .type-line,.intro-type .hero-copy>.eyebrow,.intro-type .hero-actions{opacity:0;animation:intro-failsafe 0s 2s forwards}
@keyframes intro-failsafe{to{opacity:1}}
/* The lead paragraph is the first-screen LCP element on phones: it fades in beside the headline from opacity .01 (an element at 0 is never an LCP candidate) instead of waiting for the typing to reach it. */
.motion-on .hero-cinematic .hero-description{animation:hero-lead-in .6s .2s cubic-bezier(.22,1,.36,1) both}
@keyframes hero-lead-in{from{opacity:.01;transform:translateY(8px)}to{opacity:1;transform:none}}

@media print{.hero-motion{display:none!important}.hero{grid-template-columns:1fr}}
@media(max-width:420px){html:not(.motion-on) .hero .type-line{white-space:normal}}