/* HomePage 2 round 4 (OVERRIDES-3 §1): the "Arrival + brass" hero. Homepage only.
   The poster img[data-hero-image] is the LCP and the complete result without JS, under reduced
   motion and on Save-Data or 2G/3G. html.home2-film (set before first paint) pins the scene and
   home2-hero.js draws the frame sequence on a canvas over the poster. Layouts: split (copy | 4:5
   panel) from 1069px and on landscape tablets; copy above a 4:5 panel on portrait tablets; the
   9:16 film fills the phone screen with the copy over a dark gradient, where the pinned stage
   brings the copy in stages (owner decision, Artem 2026-09-21). Pinned heights and every
   transition are motion-gated; heights are minimums, so enlarged text grows the scene. */

.home2-hero {
  position: relative;
  min-height: 80svh;
  background: var(--h2-canvas);
  color: var(--h2-ink);
}
.home2-hero__stage {
  width: var(--h2-content);
  margin-inline: auto;
  padding-top: calc(var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) + clamp(24px, 4vh, 48px));
  padding-bottom: clamp(48px, 7vh, 88px);
}
/* No JavaScript: the header sits in flow above the hero. */
html:not(.home2-js) .home2-hero__stage { padding-top: clamp(32px, 5vh, 56px); }
.home2-hero h1 { margin: 0; color: inherit; font: 600 var(--h2-fs-product)/var(--h2-lh-title) var(--h2-font-text); letter-spacing: -.012em; text-wrap: balance; }
.home2-hero__headline { margin: .3em 0 0; color: inherit; font: 600 var(--h2-fs-display)/var(--h2-lh-display) var(--h2-font-text); letter-spacing: var(--h2-ls-display); text-wrap: balance; }
.home2-hero__lit { display: block; }
.home2-hero__intro { max-width: 32em; margin: 24px 0 0; color: var(--h2-graphite); font: 400 var(--h2-fs-lede)/var(--h2-lh-text) var(--h2-font-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }
.home2 .home2-hero__actions .button { max-width: 100%; }
/* Owner decision (Artem, 2026-09-21): the hero office strip is gone — the map chips in #locations
   are the only office entry. The generic #office-{id} deep link still opens an office card. */

/* The media panel: one soft shadow, no border. The canvas stays transparent until a frame is drawn. */
.home2-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--h2-radius-media);
  background: #1b1917;
  box-shadow: 0 32px 64px -32px rgb(20 18 16 / .42), 0 8px 24px -12px rgb(20 18 16 / .16);
}
.home2-hero__media picture,
.home2-hero__media img,
.home2-hero__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home2-hero__media img { object-fit: cover; }
.home2-hero__film { opacity: 0; }
.home2-hero__film.is-ready { opacity: 1; }
html:not(.home2-film) .home2-hero__film { display: none; }

/* Split: copy on the left, the 4:5 panel on the right, sized to fit between the header and the
   action dock. */
@media (min-width: 1069px), (min-width: 735px) and (orientation: landscape) {
  .home2-hero__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(46%, max(300px, calc((100svh - var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) - 152px) * .8)));
    align-items: center;
    column-gap: clamp(40px, 5.5vw, 96px);
  }
}

/* Portrait tablets: the copy stays centred above a panel as tall as the window allows (clear of
   the dock). */
@media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
  .home2-hero__copy { text-align: center; }
  .home2-hero__intro { margin-inline: auto; }
  .home2-hero__actions { justify-content: center; }
  .home2-hero__track { margin-top: clamp(40px, 5vh, 56px); }
  .home2-hero__media { width: min(100%, max(320px, calc((100svh - var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) - 120px) * .8))); margin-inline: auto; }
}

/* Phones: the 9:16 poster (or film) fills the screen under the glass header and the copy sits at
   the bottom over its own dark gradient, clear of the action dock. White text on at least 66% of
   the scrim is 5.9:1 even over a white pixel. */
@media (max-width: 734px) {
  .home2-hero { min-height: 0; background: var(--h2-night); color: #fff; }
  .home2-hero__stage { display: flex; flex-direction: column; justify-content: flex-end; width: auto; min-height: 100svh; padding-bottom: 0; }
  .home2-hero__copy {
    --fade: 88px;
    position: relative;
    z-index: 1;
    padding: var(--fade) 20px calc(100px + env(safe-area-inset-bottom, 0px));
    /* Soft at both ends, so the block has no hard edge once it scrolls up over the film. */
    background: linear-gradient(to bottom, rgb(var(--h2-scrim-ink) / 0), rgb(var(--h2-scrim-ink) / .66) var(--fade), rgb(var(--h2-scrim-ink) / .82) calc(100% - 100px), rgb(var(--h2-scrim-ink) / 0));
  }
  .home2-hero__intro { margin-top: 20px; color: rgb(255 255 255 / .88); }
  .home2-hero__actions { gap: 10px; margin-top: 24px; }
  .home2 .home2-hero .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
  .home2 .home2-hero .button:not(.button--outline):hover { background: #fff; color: var(--h2-ink); }
  .home2 .home2-hero .button--outline { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
  .home2 .home2-hero .button--outline:hover { background: #fff; color: var(--h2-ink); }
  .home2 .home2-hero :focus-visible { outline-color: var(--h2-focus-dark); }
  .home2-hero__track { position: absolute; inset: 0; }
  .home2-hero__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}
/* Short phones: a shorter fade keeps both actions above the dock. */
@media (max-width: 734px) and (max-height: 700px) {
  .home2-hero__copy { --fade: 40px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .home2-hero__film { transition: opacity 400ms var(--h2-ease-standard); }

  /* Split scene: the stage pins for 1.5 viewports while the panel scrubs (tall windows only, in
     em so enlarged text keeps the static layout instead of a stage taller than the window). */
  /* Desktop and landscape tablets (owner decision, Artem 2026-09-23): the same scene as the phone,
     laid out sideways. The film fills the right side of the window, edge to edge and full height,
     and dissolves into the white left half, where the copy takes its turn one part at a time.
     Same --p, same windows, same html.home2-stage gate as the phone block below; without the script
     (or under reduced motion, a short window, enlarged text) the static split layout stands. */
  @media (min-width: 1069px) and (min-height: 40em), (min-width: 735px) and (orientation: landscape) and (min-height: 40em) {
    .home2-film .home2-hero { --lit: 0; min-height: 250vh; }
    /* The stage spans the window and carries the site's own gutter as padding, so the film can
       reach the right edge without a single vw sum (a classic scrollbar would make 100vw lie). */
    .home2-film .home2-hero__stage {
      position: sticky;
      top: 0;
      min-height: 100svh;
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      width: 100%;
      margin-inline: 0;
      padding-inline: calc((100% - var(--h2-content)) / 2);
      padding-bottom: 0;
    }
    /* The film takes the right 54% of the window, edge to edge and full height. */
    .home2-film .home2-hero__track { position: absolute; inset-block: 0; right: 0; left: 46%; margin: 0; }
    .home2-film .home2-hero__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
    /* The seam: the canvas carried over the film's left edge and dissolved into it, so the white
       half and the film meet in a fade instead of a cut. The copy ends before the fade does. */
    .home2-film .home2-hero__track::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--h2-canvas) 0%, color-mix(in srgb, var(--h2-canvas) 0%, transparent) 42%);
      pointer-events: none;
    }
    .home2-film.home2-stage .home2-hero__copy {
      /* Windows: H1 to .26, headline .26→.58, intro from .58, actions from .74 — the phone timing. */
      --s1: clamp(0, calc((.26 - var(--p, 0)) / .08), 1);
      --s2: min(clamp(0, calc((var(--p, 0) - .26) / .08), 1), clamp(0, calc((.58 - var(--p, 0)) / .08), 1));
      --s3: clamp(0, calc((var(--p, 0) - .58) / .08), 1);
      --s4: clamp(0, calc((var(--p, 0) - .74) / .08), 1);
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto;
      align-content: center;
      /* The three lines share one cell as tall as the longest of them (the H1): sitting them at its
         foot keeps every part the same distance above the actions, instead of a hole under a short one. */
      align-items: end;
      justify-items: start;
      /* Of the content column, so the copy always ends inside the white half. */
      width: min(46%, 620px);
      min-height: 22rem;
    }
    .home2-film.home2-stage .home2-hero h1,
    .home2-film.home2-stage .home2-hero__headline,
    .home2-film.home2-stage .home2-hero__intro {
      grid-area: 1 / 1;
      margin: 0;
      translate: 0 calc((1 - var(--s4)) * var(--lift, 0px));
    }
    .home2-film.home2-stage .home2-hero h1 { font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); opacity: var(--s1); }
    .home2-film.home2-stage .home2-hero__headline { opacity: var(--s2); }
    .home2-film.home2-stage .home2-hero__intro { opacity: var(--s3); }
    .home2-film.home2-stage .home2-hero__actions { grid-row: 2; margin-top: 28px; opacity: var(--s4); translate: 0 calc((1 - var(--s4)) * 10px); }
    .home2-film.home2-stage .home2-hero:not(.is-live) .home2-hero__actions { pointer-events: none; }
    .home2-film.home2-stage .home2-hero__copy:focus-within { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .home2-film.home2-stage .home2-hero__copy:focus-within > * { opacity: 1; translate: none; pointer-events: auto; }
    /* "Our" then "priority." brighten over the first fifth of the scene; the .64 floor is 4.81:1 on white. */
    .home2-film .home2-hero__lit > span { opacity: clamp(.64, calc(.64 + (var(--lit) * 2 - var(--i)) * .36), 1); }
  }
  /* Portrait tablets: only the panel pins, for 1.1 viewports below the copy. */
  @media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
    .home2-film .home2-hero__media { position: sticky; top: calc(var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) + 24px); }
    .home2-film .home2-hero__track::after { content: ""; display: block; min-height: 110svh; }
  }
  /* Phones (owner decisions, Artem 2026-09-21 and 2026-09-22): the whole stage pins for 1.5
     screens and the copy takes turns in one bottom-left cell — the H1 large in the corner, then
     "Your smile. Our priority." in its place, then the intro, and last the two actions under it.
     Each part fades out as the next fades in, so the film is never behind the whole block.
     --p is the pinned progress (0→1) written by home2-hero.js while html.home2-stage is set (the
     pre-paint seed; a 3 s deadline drops it if the script never arrives, and the copy then simply
     renders in flow). The actions keep row 2 from the start and the line above sits in it until
     they arrive: a transform on --lift (their measured height), never a reflow.
     min-height: 40em (em, like the split scene) drops the pin AND the staging together as soon as
     enlarged text or a short window makes the copy taller than the screen: pinning it there would
     hold the actions below the fold for the whole scene. */
  @media (max-width: 734px) and (min-height: 40em) {
    .home2-film .home2-hero { min-height: 250svh; }
    .home2-film .home2-hero__stage { position: sticky; top: 0; min-height: 100lvh; }
    .home2-film.home2-stage .home2-hero__copy {
      /* Windows: H1 to .26, headline .26→.58, intro from .58, actions from .74 — each crossfade
         .08 of the scene, and the whole message stands by .82, before the scene releases. */
      --s1: clamp(0, calc((.26 - var(--p, 0)) / .08), 1);
      --s2: min(clamp(0, calc((var(--p, 0) - .26) / .08), 1), clamp(0, calc((.58 - var(--p, 0)) / .08), 1));
      --s3: clamp(0, calc((var(--p, 0) - .58) / .08), 1);
      --s4: clamp(0, calc((var(--p, 0) - .74) / .08), 1);
      display: grid;
      grid-template-rows: auto auto;
      align-content: end;
      justify-items: start;
    }
    .home2-film.home2-stage .home2-hero h1,
    .home2-film.home2-stage .home2-hero__headline,
    .home2-film.home2-stage .home2-hero__intro {
      grid-area: 1 / 1;
      margin: 0;
      translate: 0 calc((1 - var(--s4)) * var(--lift, 0px));
    }
    /* The opening line carries the scene, so it takes the display size here. */
    .home2-film.home2-stage .home2-hero h1 { font-size: var(--h2-fs-display); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-display); opacity: var(--s1); }
    .home2-film.home2-stage .home2-hero__headline { opacity: var(--s2); }
    .home2-film.home2-stage .home2-hero__intro { opacity: var(--s3); }
    .home2-film.home2-stage .home2-hero__actions { grid-row: 2; margin-top: 20px; opacity: var(--s4); translate: 0 calc((1 - var(--s4)) * 10px); }
    /* Transparent is not gone: a stage keeps its box, so the actions must not take taps before
       they are on screen (home2-hero.js adds is-live once they are half faded in). */
    .home2-film.home2-stage .home2-hero:not(.is-live) .home2-hero__actions { pointer-events: none; }
    /* Keyboard: the parts overlap, so focus in the copy lays them back out in flow, all visible. */
    .home2-film.home2-stage .home2-hero__copy:focus-within { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .home2-film.home2-stage .home2-hero__copy:focus-within > * { opacity: 1; translate: none; pointer-events: auto; }
}