/* Hero v1 — production port of the approved Human Capability Hero.
   Reference: zaiphr-brand expression/frame1/portrait/ (STATIC FINAL).
   Doctrine: adapt implementation, never reinterpret identity
   (expression/BASELINE-FREEZE.md). Geometry values are the frozen
   seat — do not tune without a demonstrated problem. */

@font-face { font-family:'Fraunces'; font-weight:400; font-display:swap;
  src:url(/css/fonts/Fraunces-400.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:600; font-display:swap;
  src:url(/css/fonts/Fraunces-600.woff2) format('woff2'); }

.hero-v1 { position:relative; height:100dvh; min-height:560px;
  overflow:hidden;
  /* ambient backdrop: beyond the 1.8x scale cap the stage centers, and
     any reveal reads as the room's darkness, not letterbox */
  background:radial-gradient(120% 100% at 60% 40%, #0d1220 0%, #06080f 60%, #04060c 100%);
  padding:0; /* cancel site.css's global section padding — the hero is
                a full-viewport composition, the shelf IS its bottom edge */ }
/* ≥860px: a 1440×900-class artboard, scaled by js/hero-v1.js so the
   nav + hero + shelf always share the first viewport */
.hv1-stage { position:relative; overflow:hidden; width:1440px; height:900px;
  transform-origin:top left; }

.hv1-hero { position:relative; height:calc(100% - 112px); overflow:hidden; }
.hv1-layer { position:absolute; inset:-40px; }
.hv1-bg { background:#0b0e18 url(/assets/hero/hero-bg-2x.jpg) center/cover no-repeat;
  filter:saturate(0.9); }
.hv1-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(258deg, rgba(10,14,24,.44), transparent 40%); }
.hv1-atmo { background:
  radial-gradient(140% 95% at 28% 30%, transparent 52%, rgba(5,6,14,0.60) 100%); }

/* ── the subject: she leans on the metric shelf, fingers over its edge.
   Seat is FROZEN: -45px lands the fingers in cell 2's quiet padding;
   bottom 18px presses the forearm onto the shelf. ── */
.hv1-subj { position:absolute; z-index:7; height:730px; bottom:18px;
  left:calc(57.5% - 45px); pointer-events:none;
  transform:translateX(-50%) translateX(var(--cast-x, 0px));
  aspect-ratio:715/987; isolation:isolate;
  --subj-uri:url(/assets/hero/hero-subject-2x.webp); }
/* ── the cast: rotating subjects sharing the frozen seat ──
   js/hero-cast.js drives this; with one plate (or reduced motion /
   ?still) nothing moves. Each plate carries its own --subj-uri so the
   relight masks track the person on stage. */
.hv1-cast .hv1-subj { transition:opacity 1.3s ease,
    transform 1.7s cubic-bezier(.2,.7,.2,1); }
.hv1-cast .hv1-subj.is-off   { opacity:0; --cast-x:6%; }   /* waiting stage right */
.hv1-cast .hv1-subj.is-boot  { opacity:0; --cast-x:0px; }  /* first paint, pre-fade */
.hv1-cast .hv1-subj.is-active{ opacity:1; --cast-x:0px; }
.hv1-cast .hv1-subj.is-exit  { opacity:0; --cast-x:-7%; }  /* leaving stage left */
.hv1-subj img { height:100%; width:100%; display:block;
  filter:saturate(.9) contrast(1.03) brightness(.96); }
/* relight, masked to her own alpha: cool ambient sinks her into the
   room; the warm rim ties her to the practical */
.hv1-subj::before, .hv1-subj::after { content:""; position:absolute; inset:0;
  -webkit-mask:var(--subj-uri) center/100% 100% no-repeat;
  mask:var(--subj-uri) center/100% 100% no-repeat; }
.hv1-subj::before { mix-blend-mode:multiply; background:
  rgba(58,74,112,.14),
  linear-gradient(100deg, rgba(36,48,84,.34) 0%, rgba(36,48,84,.14) 42%, transparent 66%),
  linear-gradient(180deg, transparent 55%, rgba(9,13,24,.38) 100%); }
.hv1-subj::after { mix-blend-mode:screen; background:
  linear-gradient(262deg, rgba(255,138,60,.26) 0%, transparent 34%); }
.hv1-subj-shadow { position:absolute; z-index:6; left:calc(57.5% - 45px);
  transform:translateX(-50%); bottom:40px; width:560px; height:64px;
  pointer-events:none; filter:blur(9px);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%); }
.hv1-arm-shadow { position:absolute; z-index:6; left:calc(57.5% - 60px);
  transform:translateX(-50%); bottom:94px; width:430px; height:28px;
  pointer-events:none; filter:blur(7px);
  background:radial-gradient(ellipse 50% 50% at 50% 46%, rgba(0,0,0,.4), transparent 70%); }

/* ── content (z above her hair; the fixed site nav floats above all) ── */
.hv1-copy { position:absolute; z-index:8; left:44px; top:15%; max-width:660px; }
.hv1-kick { font-family:var(--z-font-editorial); font-weight:500; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--z-accent);
  margin:0 0 22px; }
.hv1-copy h1 { font:600 94px/1.08 'Fraunces', serif; letter-spacing:-0.012em;
  color:#f2f0ec; margin:0; }
.hv1-copy h1 .cap { color:var(--z-accent); }
.hv1-lede { margin:24px 0 0; max-width:42ch; font-size:17px; line-height:1.55;
  color:#b9c0cf; }
.hv1-cta { display:flex; gap:16px; margin-top:34px; align-items:center; }
.hv1-btn { display:inline-flex; align-items:center; gap:9px; border-radius:10px;
  text-decoration:none; font:500 15px/1 var(--z-font-editorial);
  padding:15px 22px; }
.hv1-btn-primary { background:var(--z-accent); color:#fff; }
.hv1-btn-primary:hover { background:var(--z-accent-deep); }
.hv1-btn-ghost { border:1px solid rgba(255,255,255,.22); color:#e7eaf2; }
.hv1-btn:focus-visible { outline:2px solid #f2f0ec; outline-offset:3px; }
.hv1-trust { margin-top:40px; }
.hv1-trust .t { font-family:var(--z-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:#7d8598; margin:0; }
.hv1-logos { display:flex; gap:26px; margin-top:14px; align-items:center;
  color:#8d95a8; padding:0; list-style:none; }
.hv1-logos li { display:inline-flex; align-items:center; gap:9px;
  font-weight:500; letter-spacing:.01em; font-size:13.5px; }
.hv1-logos .tm { width:6px; height:6px; background:var(--z-accent);
  transform:rotate(45deg); flex:0 0 auto; opacity:.85; }

/* ── metric shelf ── */
.hv1-metrics { position:relative; z-index:6; height:112px; display:grid;
  grid-template-columns:repeat(4,1fr); align-items:center; margin:0; padding:0;
  list-style:none; background:rgba(9,13,22,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.06); }
.hv1-metrics li { display:flex; gap:16px; align-items:center; padding:0 44px;
  border-left:1px solid rgba(255,255,255,.07); }
.hv1-metrics li:first-child { border-left:none; }
.hv1-metrics svg { width:30px; height:30px; stroke:var(--z-accent); fill:none;
  stroke-width:1.7; flex:0 0 auto; }
.hv1-metrics .v { font:400 34px/1 'Fraunces', serif; color:#f2f0ec;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.hv1-metrics .k { font-size:12.5px; color:#9aa2b5; margin-top:6px; max-width:19ch; }

/* wide-short screens (aspect > 1440:840, e.g. 16:9): the stage runs
   760-840px tall, so the copy column compacts — seat and shelf
   geometry stay frozen */
@media (min-width:860px) and (min-aspect-ratio: 12/7) {
  .hv1-copy { top:12%; }
  .hv1-copy h1 { font-size:84px; }
  .hv1-lede { margin-top:18px; }
  .hv1-cta { margin-top:26px; }
  .hv1-trust { margin-top:28px; }
}

/* extreme wide-short (browser chrome + taskbar on 16:9: aspect ~1.9-2.15):
   stage runs 670-760px — copy ultra-compacts, trust yields, the subject
   eases to 640px with the seat preserved */
@media (min-width:860px) and (min-aspect-ratio: 15/8) {
  .hv1-copy { top:10%; }
  .hv1-copy h1 { font-size:72px; }
  .hv1-lede { margin-top:14px; }
  .hv1-cta { margin-top:22px; }
  .hv1-trust { display:none; }
  .hv1-subj { height:630px; bottom:40px; }
}

/* ═══ stacked tiers (fluid; JS releases the artboard) ═══ */
@media (max-width:859px) {
  .hv1-stage { width:100%; height:100dvh; transform:none !important;
    margin:0 !important; }
  .hv1-hero { height:calc(100% - 168px); }
  .hv1-copy { left:20px; right:20px; top:max(10%, 92px); max-width:none; }
  .hv1-kick { font-size:11px; margin-bottom:14px; }
  .hv1-copy h1 { font-size:clamp(38px, 11.5vw, 54px); }
  .hv1-lede { font-size:15px; max-width:34ch; }
  .hv1-cta { flex-direction:column; align-items:flex-start; gap:10px;
    margin-top:24px; }
  .hv1-trust { display:none; }
  .hv1-subj { height:62vh; bottom:calc(168px - 7.5vh); left:76%; }
  .hv1-subj-shadow, .hv1-arm-shadow { display:none; }
  .hv1-metrics { height:168px; grid-template-columns:repeat(2,1fr); }
  .hv1-metrics li { padding:0 20px; gap:10px; }
  .hv1-metrics svg { width:22px; height:22px; }
  .hv1-metrics .v { font-size:24px; }
  .hv1-metrics .k { font-size:11px; }
  /* she covers the top-right cell on stacked layouts — that cell is
     HER seat: three metrics, her presence is the fourth */
  .hv1-metrics li:nth-child(2) { display:none; }
  .hv1-metrics li:nth-child(3) { grid-row:2; grid-column:1; }
  .hv1-metrics li:nth-child(4) { grid-row:2; grid-column:2; }
}
@media (max-width:560px) {
  .hv1-subj { height:55vh; bottom:calc(168px - 7vh); left:84%; }
  .hv1-lede { max-width:24ch; }
  .hv1-metrics li { padding:0 24px; }
  .hv1-metrics svg { display:none; }
  .hv1-metrics .v { font-size:22px; }
  .hv1-metrics .k { font-size:10px; line-height:1.45; max-width:16ch;
    margin-top:4px; }
}
/* smallest phones: secondary copy goes BEFORE anything shrinks */
@media (max-width:360px) {
  .hv1-copy { top:86px; }
  .hv1-lede { display:none; }
  .hv1-cta { margin-top:18px; }
  .hv1-subj { height:60vh; left:86%; bottom:calc(168px - 8vh); }
}