/*
  ABA Public Website — Hero (desktop composition; mobile composition is added in hero-mobile rules, checkpoint C).

  Hero height:  H  = max(560px, min(100vh, 100vw / 1.6))   (never taller than the 1.6:1 composition; on tall windows the
                page continues below the hero instead of enlarging the room until Ezra/content leave the view)
  Scene unit:   u  = min(100vw / 1600, H / 1000)   (scene 1600 x 1000u, centred, bottom-anchored)
  Plate width:  pw = max(2245.65u, 100vw, heroHeight x 2.2440)   (2.2440 ≥ 2226/992, so the plate never under-covers)
                → equals the accepted 2245.65u at 1440x900 / 1920x1080; larger only when a viewport is wider or
                  taller than the accepted plate covers (uniform scale, no filler, no edge masks).
  Room asset:   2226 x 992; its core [320..1906] maps to scene 0..1600u, so the plate is centred on the scene centre.
  Ezra:         coupled to the plate (same scale c = pw / 2245.65u):
                width  = pw x 0.231559   (520u at c = 1)
                height = width x 2.75     (1024 x 2816 master, never stretched)
                left   = scene centre − pw x 0.391869   (−80u at c = 1)
                top    = scene bottom − pw x 0.338433   (240u at c = 1)
  Type and content stay on u only (independent of the coverage scale).
  The background can be replaced at assets/hero/office-desktop.png with an asset of the same aspect and framing.
*/
/*
  HOME FLOW (Tamir, 2026-10-06): Ezra continues below the hero edge into the same page.
    .hero-art  z0  the hero artwork as one group, as before: plate 1 · edge 2 · scrim 3 · figure 5 · shade 7, in the
                   hero's box and scene coordinates. Desktop: not clipped vertically (nothing but the figure extends
                   below the hero: the plate is bottom-anchored); phones keep the approved hero clip (see below).
    .hero      z1  the copy (logo, tagline, CTA, notes) — the section itself, clipped, transparent, above the art
                   (content 6 above figure 5, as before; the shade never meets the copy).
  <main class="home-flow"> holds the scene variables and clips horizontally only (the plate is wider than the
  window). Desktop: the secondary section is at least as tall as the figure's continuation below the hero (master row
  2774 = 0.289082 pw below the hero edge), so the page ends with his nontransparent end, not before it; where the
  figure would cross the secondary text (narrow / landscape desktop windows) the text moves down by the measured minimum.
*/
.home-flow {
  /* --aba-hero-fit: set by hero-layout.js only when the copy cannot fit (short landscape / zoom); unset otherwise */
  --hero-h: max(560px, min(100vh, calc(100vw / 1.6)), var(--aba-hero-fit, 0px));
  --u: min(calc(100vw / 1600), calc(var(--hero-h) / 1000));
  --pw: max(calc(var(--u) * 2245.65), 100vw, calc(var(--hero-h) * 2.2440));
  position: relative;
  overflow: clip;  /* window width; page end = the figure's nontransparent end (below) — no transparent tail */
}
.hero {
  position: relative;
  z-index: 1;
  height: var(--hero-h);
  overflow: hidden;
  isolation: isolate;
}
.hero-stage {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--hero-h);
  pointer-events: none;
}
.hero-art { z-index: 0; background: var(--aba-ground); isolation: isolate; }
/* Desktop composition only (the exact complement of the phone query below): the secondary section reaches the figure's
   nontransparent end, and its text moves down by --aba-flow-clear only when the figure would otherwise cross it
   (measured by hero-layout.js; 0 at the approved desktop sizes). */
@media (min-width: 1025px), (min-width: 601px) and (orientation: landscape) {
  .home-flow .approach {
    min-height: calc(var(--pw) * 0.289082);
    padding-top: calc(104px + var(--aba-flow-clear, 0px));
  }
}

.hero-scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--u) * 1600);
  height: calc(var(--u) * 1000);
  transform: translateX(-50%);
}

.hero-plate {
  position: absolute;
  z-index: var(--aba-z-plate);
  left: calc(50% - var(--pw) / 2);
  bottom: 0;
  width: var(--pw);
  height: auto;
  max-width: none;
  display: block;
}

.hero-edge-top {
  position: absolute;
  z-index: var(--aba-z-edge);
  left: calc(50% - var(--pw) / 2);
  width: var(--pw);
  top: 0;
  height: calc(var(--u) * 140);
  background: linear-gradient(180deg, rgba(7, 7, 7, .85), rgba(7, 7, 7, 0));
  pointer-events: none;
}

.hero-text-scrim {
  position: absolute;
  z-index: var(--aba-z-scrim);
  left: calc(var(--u) * 540);
  top: calc(var(--u) * 110);
  width: calc(var(--u) * 920);
  height: calc(var(--u) * 700);
  background: radial-gradient(closest-side, rgba(7, 7, 7, .58), rgba(7, 7, 7, .26) 72%, rgba(7, 7, 7, 0));
  pointer-events: none;
}

.hero-figure {
  position: absolute;
  z-index: var(--aba-z-figure);
  left: calc(50% - var(--pw) * 0.391869);
  top: calc(100% - var(--pw) * 0.338433);
  width: calc(var(--pw) * 0.231559);
  height: calc(var(--pw) * 0.231559 * 2.75);
  max-width: none;
  display: block;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  z-index: var(--aba-z-content);
  left: calc(var(--u) * 690);
  width: calc(var(--u) * 620);
  top: calc(var(--u) * 150);
  text-align: center;
}

.hero-logo {
  display: block;
  width: calc(var(--u) * 480);
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.hero-tagline {
  margin: calc(var(--u) * 24) 0 0;
  font-family: var(--aba-font-serif);
  font-weight: 400;
  font-size: max(30px, calc(var(--u) * 50));
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--aba-champagne-light);
}

.hero-principle {
  margin: calc(var(--u) * 22) 0 0;
  font-size: max(10.5px, calc(var(--u) * 13));
  line-height: 1.7;
  letter-spacing: .27em;
  font-weight: 500;
  color: var(--aba-ivory-principle);
}
.hero-principle span { white-space: nowrap; }
.hero-principle--mobile { display: none; }

.hero-rule {
  width: calc(var(--u) * 48);
  height: 1px;
  background: var(--aba-champagne-rule);
  margin: calc(var(--u) * 24) auto;
}

.hero-desc {
  margin: 0;
  font-size: max(13.5px, calc(var(--u) * 17.5));
  line-height: 1.7;
  letter-spacing: .02em;
  font-weight: 400;
  color: var(--aba-ivory-desc);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .8);
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 24);
  width: calc(var(--u) * 440);
  min-width: 300px;
  height: max(52px, calc(var(--u) * 66));
  margin: calc(var(--u) * 32) auto 0;
  padding: 0;
  border: 1px solid var(--aba-cta-border);
  border-radius: 0;
  color: var(--aba-cta-text);
  font-family: var(--aba-font-sans);
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: .2em;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(110deg, rgba(175, 126, 62, .42), rgba(67, 44, 14, .38) 80%);
  box-shadow: inset 0 0 14px rgba(232, 200, 139, .12);
  -webkit-appearance: none;
  appearance: none;
}
.hero-cta:hover {
  color: var(--aba-cta-text-hover);
  background: linear-gradient(110deg, rgba(185, 136, 70, .55), rgba(80, 54, 18, .48) 80%);
}
.hero-cta svg { width: max(20px, calc(var(--u) * 26)); height: auto; flex-shrink: 0; display: inline-block; }

.hero-note {
  position: relative;
  isolation: isolate;
  margin: calc(var(--u) * 18) 0 0;
  font-size: max(14px, calc(var(--u) * 17));
  line-height: 1.65;
  letter-spacing: .025em;
  font-weight: 500;
  color: var(--aba-note-1);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .75);
}
.hero-note::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -12%; right: -12%; top: -40%; bottom: -45%;
  background: radial-gradient(closest-side, rgba(6, 6, 6, .78), rgba(6, 6, 6, .5) 55%, rgba(6, 6, 6, 0));
}
.hero-note p { margin: 0; text-wrap: balance; }
.hero-note p + p { color: var(--aba-note-2); }

.hero-bottom-shade {
  position: absolute;
  z-index: var(--aba-z-shade);
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(7, 7, 7, 0), rgba(7, 7, 7, .8));
  pointer-events: none;
}


.hero-figure-m { display: none; }

/*
  PHONE / PORTRAIT-TABLET COMPOSITION (checkpoint C)
  Applies at width ≤ 600px, and at width ≤ 1024px in portrait (canonical Tablet-768 board used this composition).
  Wider portrait desktop windows keep the desktop scene.
  Reference (approved mobile-correction-proofs-v2, CSS px):
    375: Ezra width 186.4 · top 573.8 · left −22.4 · background height 868.8 (hero 840 in an 812 viewport)
    390: 212.1 · 576.7 · −25.5 · 903.7
    430: 283.8 · 583.5 · −34.1 · 999.6
  Continuous rules (no steps at 380/381 or 410/411):
    figure width fw: piecewise-linear through the three references; above 430: min(66vw, 440px) (continuous at 430,
                     440px cap from the canonical Tablet-768 board). Height = fw × 2.75 (master 1024×2816).
    scale s = fw / 1024; left = −0.12 × fw
    top = copyBottom + 6px − 45s   (source head row 45 sits 6px below the supporting copy)
    background height = (copyBottom + 18px + 1115s) × 992 / 910
                        (desk front edge, asset row 910, = waist (row 1160) + 12px); at least the hero height.
    background x: translateX(−51.21%) of its own width (same crop region as the approved proofs).
  copyBottom comes from scripts/hero-layout.js (measured bottom of .hero-note); CSS fallback = reference values.
  Hero height max(840px, min(100svh, background height)): svh avoids jumps when mobile browser bars show/hide; on very
  tall portrait screens the hero ends at the composition's natural height (the room is not zoomed to fill a tall
  viewport — that would push the desk far below the waist) and the page continues to the next section.
*/
@media (max-width: 600px), (max-width: 1024px) and (orientation: portrait) {
  .home-flow {
    --cb-fallback: calc(576px + (100vw - 375px) * 0.266667);
    --cb: var(--aba-copy-bottom, var(--cb-fallback));
    --fw: calc(186.4px + (100vw - 375px) * 1.713333);
    --s: calc(var(--fw) / 1024);
    --plate-h: calc((var(--cb) + 18px + var(--fw) * 1.088867) * 1.090110);
  }
  .hero, .hero-stage {
    height: max(840px, min(100vh, var(--plate-h)));
    height: max(840px, min(100svh, var(--plate-h)));
    min-height: 0;
  }
  /* Phones: Ezra continues below the hero edge too; the room plate (taller than the hero here) is clipped at the hero
     edge on its own, so nothing of the office appears below it. --hero-hm = the hero height above. The secondary
     section reaches the figure's nontransparent end (master row 2774: top + 2.666048 fw) and its text moves down by the
     measured minimum where the figure would cross it (--aba-flow-clear, hero-layout.js). */
  .home-flow { --hero-hm: max(840px, min(100vh, var(--plate-h))); }
  @supports (height: 100svh) { .home-flow { --hero-hm: max(840px, min(100svh, var(--plate-h))); } }
  .hero-plate { clip-path: inset(0 0 max(0px, calc(var(--plate-h) - var(--hero-hm))) 0); }
  /* Without scripts the secondary text starts 16px below the figure's end (the figure crosses it at every phone width);
     hero-layout.js replaces this with the measured minimum (an explicit value, 0 when nothing crosses). */
  .home-flow { --aba-flow-clear: max(0px, calc(var(--cb) + 6px + var(--fw) * 2.666048 + 16px - var(--hero-hm) - 64px)); }
  .home-flow .approach {
    min-height: calc(var(--cb) + 6px + var(--fw) * 2.666048 - var(--hero-hm));
    padding-top: calc(64px + var(--aba-flow-clear, 0px));  /* 64px: the approved phone padding (chrome.css) */
  }
  .hero-scene { left: 0; width: 100%; height: 100%; transform: none; }
  .hero-plate {
    left: 0; top: 0; bottom: auto;
    width: auto;
    height: max(var(--plate-h), 100%);
    transform: translateX(-51.21%);
  }
  .hero-edge-top {
    left: 0; width: 100%;
    height: 300px;
    background: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, .88) 40%, rgba(7, 7, 7, 0));
  }
  .hero-text-scrim {
    left: -12%; width: 124%; top: 170px; height: 520px;
    background: radial-gradient(closest-side, rgba(7, 7, 7, .7), rgba(7, 7, 7, .36) 70%, rgba(7, 7, 7, 0));
  }
  .hero-figure { display: none; }
  .hero-figure-m {
    display: block;
    position: absolute;
    z-index: var(--aba-z-figure);
    left: calc(var(--fw) * -0.12);
    top: calc(var(--cb) + 6px - var(--fw) * 0.043945);
    width: var(--fw);
    height: calc(var(--fw) * 2.75);
    max-width: none;
    pointer-events: none;
  }
  .hero-bottom-shade { height: 90px; background: linear-gradient(180deg, rgba(7, 7, 7, 0), rgba(7, 7, 7, .55)); }
  .hero-content { left: 24px; right: 24px; width: auto; top: 104px; }
  .hero-logo { width: min(82vw, 350px); }
  .hero-tagline { font-size: 32px; margin-top: 22px; }
  .hero-principle { display: none; }
  .hero-principle--mobile { display: block; font-size: 10.5px; letter-spacing: .24em; line-height: 2; margin-top: 20px; }
  .hero-principle--mobile span { display: block; }
  .hero-rule { width: 36px; margin: 18px auto; }
  .hero-desc { font-size: 15px; line-height: 1.65; max-width: 320px; margin: 0 auto; }
  .hero-desc br { display: none; }
  .hero-cta { width: 100%; max-width: 400px; min-width: 0; height: 56px; margin-top: 26px; font-size: 12px; letter-spacing: .16em; gap: 16px; }
  .hero-note {
    font-size: 14.5px; line-height: 1.6; margin-top: 16px;
    /* 375: letter-spacing 0 keeps each supporting sentence on one line (approved fix); grows continuously to the
       approved .025em (0.3625px) by 390 — no step at 380/381. */
    letter-spacing: clamp(0px, calc((100vw - 375px) * 0.024167), 0.3625px);
  }
  .hero-note::before { left: -6%; right: -6%; top: -30%; bottom: -35%; }
}
@media (min-width: 390px) and (max-width: 600px), (min-width: 390px) and (max-width: 1024px) and (orientation: portrait) {
  .home-flow {
    --cb-fallback: calc(580px + (100vw - 390px) * 0.25);
    --fw: calc(212.1px + (100vw - 390px) * 1.7925);
  }
}
@media (min-width: 430px) and (max-width: 600px), (min-width: 430px) and (max-width: 1024px) and (orientation: portrait) {
  .home-flow {
    --cb-fallback: 590px;
    --fw: min(66vw, 440px);
  }
}

/* Approved continuous desktop office. The first 992 source rows retain the original scene mapping;
   the final 1760-row asset extends below it at the same scale. Phone composition stays unchanged. */
@media (min-width: 1025px), (min-width: 601px) and (orientation: landscape) {
  .home-flow {
    min-height: calc(var(--hero-h) + var(--pw) * 768 / 2226);
  }
  .hero-plate {
    top: calc(100% - var(--pw) * 992 / 2226);
    bottom: auto;
  }
  .hero-edge-top, .hero-bottom-shade { display: none; }
  .home-flow .approach {
    position: absolute;
    z-index: var(--aba-z-content);
    left: 50%;
    bottom: 82px;
    transform: translate(-50%, var(--aba-footer-align, 0px));
    width: min(620px, 44vw);
    min-height: 0;
    padding: 0;
    background: none;
  }
  .home-flow .approach-mark { margin-bottom: 14px; opacity: 1; }
  .home-flow .approach-rule { width: 32px; margin-bottom: 14px; }
  .home-flow .approach-statement { font-size: 12px; line-height: 2; letter-spacing: .2em; }
  .home-flow .approach-desc { max-width: 360px; margin-top: 24px; font-size: 12px; line-height: 1.85; }
}

/* Mobile shares the locked Blue Hour master with STATIC sky x=800 and office x=500 crops:
   books/glass and city above the supported desk, then the original corrected floor.
   Original assets remain unchanged; the upper sky uses a separately fitted static crop. */
@media (max-width: 600px), (max-width: 1024px) and (orientation: portrait) {
  .home-flow {
    --mobile-office-width: 550vw;
    --mobile-office-height: calc(var(--mobile-office-width) * 1760 / 2226);
    /* Solve desk row 922 against waist row 1400 (table anchor 1442) and shoes row 2775.
       Shoe floor anchor is source row 1500, beneath the cabinet base. */
    --fw: calc(var(--mobile-office-width) * 444.015 / 2226);
    --mobile-crop-x: 500;
    --mobile-scene-offset: 400px;
    min-height: calc(var(--mobile-office-height) + var(--mobile-scene-offset));
    --aba-flow-clear: 0px;
  }
  .hero, .hero-stage { height: max(840px, 100svh); }
  .hero-art { height: 100%; }
  .hero-art .hero-scene { height: 100%; }
  .hero-plate {
    width: var(--mobile-office-width);
    height: auto;
    left: calc(var(--mobile-office-width) * var(--mobile-crop-x) / -2226);
    top: var(--mobile-scene-offset);
    transform: none;
    clip-path: none;
  }
  .hero-bottom-shade { display: none; }
  /* Static crop of the same approved sky fills the upper content zone.
     Feather only the sky-to-office crop junction; no scroll-driven movement. */
  .hero-edge-top {
    display: block;
    left: 0; top: 0; width: 100%;
    height: calc(var(--mobile-scene-offset) + 340 * var(--mobile-office-width) / 2226);
    background: url('../assets/hero/office-desktop-final.webp') no-repeat;
    background-size: var(--mobile-office-width) calc(var(--mobile-office-width) * 3520 / 2226);
    background-position: calc(var(--mobile-office-width) * -800 / 2226) 0;
    -webkit-mask-image: linear-gradient(#000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(#000 0%, #000 80%, transparent 100%);
  }
  .hero-figure-m {
    left: calc(var(--mobile-office-width) * (430 - var(--mobile-crop-x)) / 2226);
    top: calc(var(--mobile-scene-offset) + var(--mobile-office-width) * 922 / 2226 - var(--fw) * 1442 / 1024);
    width: var(--fw);
    height: auto;
  }
  .home-flow .approach {
    position: absolute;
    z-index: var(--aba-z-content);
    left: 24px; right: 24px;
    bottom: 110px;
    min-height: 0;
    padding: 0;
    background: none;
  }
  .home-flow .approach-mark { width: 46px; margin-bottom: 4px; opacity: 1; }
  .home-flow .approach-rule { width: 32px; margin-bottom: 4px; }
  .home-flow .approach-statement { font-size: 11.5px; line-height: 1.9; }
  .home-flow .approach-desc { max-width: 340px; font-size: 12px; line-height: 1.75; margin-top: 12px; }
}