/* LP-W17: the hero, reworked after a QA pass. James, 2026-10-15 (screenshot of the home hero on his 2032 px screen):
   "the hero needs work...QA it". Measured on LP-W16 at 1024 to 2560 px: the vertical film filled 23 to 33% of the
   page width and left an empty middle; the media ran 14 to 80 px past the content edge of every section below and the
   copy's left edge drifted by up to 64 px; the film sat 20 to 44 px under the header; the copy column was taller than
   the film and, below 1680 px, than the screen.
   Now: the hero shares the sections' measure (max 1680 px, 4% gutters), so copy and media line up with everything
   below; copy and media centre on each other; the media is sized by the height the screen has left, so the hero, the
   range band and the top of the service strip fit the first screen; on wide landscape screens the home page plays the
   16:9 cut of the film at its own ratio (nothing cropped), phones keep the vertical cut; the headline scales with its
   column; the five range tiles leave the copy column for a band across the full measure. Loaded last. */

:root{--hh:calc(var(--fs-small) * 1.7 + 18px + clamp(14px,1.1vw + 6px,30px) * 2 + 46px)}   /* announcement + header; hero.js measures it onto <html> */
html body .hero{
  --pad:clamp(24px,4.5vh,64px);
  --band:clamp(104px,11vh,132px);   /* the range band and the gap above it */
  --cw:calc(min(1680px,100vw) - 8vw);   /* the sections' content width */
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy media" "ranges ranges";
  column-gap:clamp(40px,4.5vw,104px);row-gap:clamp(18px,3vh,36px);align-items:center;
  max-width:1680px;margin-inline:auto;padding:var(--pad) 4% clamp(18px,3vh,36px);min-height:0;box-sizing:border-box}
html body .hero .hero-copy{grid-area:copy;padding:0;align-self:center;min-width:0;max-width:none}
html body .hero .hero-visual{grid-area:media;--share:.52;--cap:44px;padding:0;margin:0;align-self:center;
  width:max(260px,min(calc(var(--cw) * var(--share)),calc((100svh - var(--hh) - var(--pad) * 2 - var(--band) - var(--cap)) * var(--hr))));
  width:round(down,max(260px,min(calc(var(--cw) * var(--share)),calc((100svh - var(--hh) - var(--pad) * 2 - var(--band) - var(--cap)) * var(--hr)))),1px)}   /* whole pixels: a fractional width let the video's black edge show */
html body .hero .hero-visual.has-video{--cap:0px;--share:.58}
html body .hero .hero-visual>img{border-radius:var(--r-xl);box-shadow:var(--sh-3)}
html body .hero .hero-reel video{border-radius:var(--r-xl);box-shadow:var(--sh-3);background:transparent}

/* the headline follows its column (cqi = the copy column's width), so it never crowds or floats */
html body .hero h1{font-size:clamp(50px,min(15cqi,12vh),128px);line-height:.98;margin:clamp(14px,2vh,28px) 0 clamp(14px,2.2vh,28px)}
html body .hero-copy>p:not(.eyebrow){max-width:32em}
/* a wide column sets the italic half on one line ("the red carpet."); a narrow one keeps the break, and anything too long wraps between words */
@container herocopy (min-width:640px){html body .hero h1 em br{display:none}}
html body .hero .button{margin:clamp(16px,2.6vh,28px) 0 clamp(10px,1.4vh,16px)}

/* short screens: the media takes the height and the range band may sit just below the fold */
@media (min-width:701px) and (max-height:820px){html body .hero{--band:0px}}

/* the range band: five tiles across the full measure */
html body .hero .hero-ranges{grid-area:ranges;margin:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
html body .hero .hero-ranges a{margin:0;padding:14px 18px 12px;min-width:0}
html body .hero .hero-ranges a:nth-child(n){border:1px solid rgba(48,20,37,.1)}
html body .hero .hero-ranges a[aria-current]{border-color:rgba(168,130,60,.55)}
html body .hero .hero-ranges .rn{font-size:clamp(22px,.9vw + 12px,34px)}

/* wide landscape screens: the home film at 16:9 (premium.js plays the 16:9 file under the same query) */
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  html body .hero .hero-visual.has-video{--hr:1.7778;--share:.58}
  html body .hero .hero-visual.has-video .hero-reel video{aspect-ratio:16/9}
}

/* tablets: copy and media side by side, the vertical film, smaller tiles */
@media (min-width:701px) and (max-width:999px){
  html body .hero .hero-visual{--share:.46}
  html body .hero .hero-ranges .rn{font-size:22px}
  html body .hero .hero-ranges a{padding:12px 12px 10px}
  html body .hero .hero-ranges .rm{font-size:12px}
}

/* phones: copy, the range tiles, then the media (as LP-W16), one column */
@media (max-width:700px){
  html body .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "ranges" "media";padding:0;row-gap:0;column-gap:0}
  html body .hero .hero-copy{padding:30px 5% 18px}
  html body .hero h1{font-size:clamp(46px,15cqi,60px)}
  html body .hero .hero-visual{width:100%;padding:16px 0 8px}
  html body .hero .hero-visual.has-video{padding:16px 16px 8px}
  html body .hero .hero-visual>img{border-radius:0;box-shadow:none}
  html body .hero .hero-ranges{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 5%}
  html body .hero .hero-ranges a{padding:10px 10px 9px}
  html body .hero .hero-ranges .rn{font-size:21px}
}

/* the service strip shares the same measure */
html body .service-strip{width:auto;max-width:none;margin-inline:max(4%,calc((100% - 1680px) / 2 + 4%))}
@media (max-width:700px){html body .service-strip{margin-inline:16px}}

/* header: with five ranges the category links wrapped to a second line between 1024 and 1099 px (LP-W16); the ranges
   stay, the categories live in the category cards, the catalog sidebar and the menu there */
@media (max-width:1099px){html body .site-header>nav [data-nav-category],html body .site-header>nav .nav-sep{display:none}}

/* the card carries the poster (premium.js sets it); the film fades in once it is playing past the loop start, so a slow
   seek, a paused film or a film that cannot play never shows an empty card */
html body .hero .hero-visual.has-video .hero-reel{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:#f7ece4 center/cover no-repeat}
html body .hero .hero-visual.has-video .hero-reel video{box-shadow:none;border-radius:0;background:transparent;opacity:0;transition:opacity .5s ease}
html body .hero .hero-visual.has-video .hero-reel.is-live video{opacity:1}
@media (prefers-reduced-motion:reduce){html body .hero .hero-visual.has-video .hero-reel video{transition:none}}