/* ------------------------------------------------------------------
   HERO v3 — full-bleed video at full contrast, centred DARK type,
   dissolving into the bone page. No scrim, no colour grade.
   ------------------------------------------------------------------ */

.hero-flush {
  height: 100svh;
  min-height: 640px;
  align-items: center;
  background: var(--bone);
}

/* the data canvas covers the frame; the raw <video> is the fallback beneath it */
.hero-flush .hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: block;
}

/* 16:9 on wide screens, 9:16 on phones — one plays, the other is off */
.hero-flush .hero-video-tall { display: none; }
@media (max-aspect-ratio: 1/1) {
  .hero-flush .hero-video-wide { display: none; }
  .hero-flush .hero-video-tall { display: block; }
}
/* once the canvas is live the fallback video is hidden entirely */
.hero-flush.has-data-canvas .hero-video { display: none; }

.hero-flush .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: none;              /* full contrast, ungraded */
  transform: scale(1.08);
}
@media (max-aspect-ratio: 1/1) {
  .hero-flush .hero-video-tall { transform: scale(1.16) translateX(4.5%); }
}

/* no wash behind the copy — the footage carries it */
.hero-flush .scrim { display: none; }

/* bottom dissolve now runs into bone, not black */
.hero-flush .edge { z-index: 2; }
.hero-flush .edge {
  height: 52%;
  background: linear-gradient(180deg,
    rgba(245,239,223,0)   0%,
    rgba(245,239,223,.06) 14%,
    rgba(245,239,223,.16) 28%,
    rgba(245,239,223,.32) 42%,
    rgba(245,239,223,.52) 56%,
    rgba(245,239,223,.72) 68%,
    rgba(245,239,223,.88) 78%,
    rgba(245,239,223,.97) 86%,
    var(--bone)           93%,
    var(--bone)          100%);
}
/* a solid floor so the last row of dither dots cannot draw a hairline */
.hero-flush::after { background: var(--bone); height: 26px; }

/* ---- centred column ---- */
.hero-flush .inner {
  max-width: 1000px;
  padding: 90px 24px 96px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.hero-flush h1 {
  color: #fff;
  max-width: 18ch;
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 22px;
  text-wrap: balance;
  text-shadow: none;
}

.hero-flush .lede-2 {
  color: #fff;
  opacity: .95;
  max-width: 58ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
  margin: 0 0 30px;
  text-wrap: pretty;
  text-shadow: none;
}

.hero-flush .acts { justify-content: center; gap: 12px; margin-bottom: 18px; }
.hero-flush .acts .btn { min-height: 44px; padding: 12px 22px; font-size: 15px; }
.hero-flush .acts .btn-ghost {
  color: #fff;
  --edge: rgba(255,255,255,.62);
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
}
.hero-flush .acts .btn-ghost:hover { border-color: #fff; --edge: rgba(255,255,255,.8); background: rgba(255,255,255,.2); }

/* both mono lines sit over the bright cloud band, so they read dark */
.hero-flush .proudly {
  position: absolute; left: 0; right: 0; bottom: 52px;
  margin: 0; color: #fff; opacity: .9;
  text-shadow: none;
}

.hero-flush .foot {
  position: absolute; left: 0; right: 0; bottom: 28px;
  justify-content: center; padding-top: 0;
}
.hero-flush .meta { color: #fff; opacity: .9; text-shadow: none; }

/* over the footage the mark is white; once the nav lands on bone it goes dark again */
.nav:not(.scrolled) .brand-mark { filter: brightness(0) invert(1); }
.nav:not(.scrolled) .nav-links a { color: #fff; }

@media (max-width: 720px) {
  .hero-flush { height: 92svh; min-height: 560px; }
  .hero-flush .inner { padding: 34px 22px 190px; }  /* sits high, in the clear blue */
  .hero-flush .lede-2 { margin-bottom: 64px; }      /* clear of the buttons */
  .hero-flush .proudly { bottom: 46px; }
  /* the wash has to work harder over a narrow, busy frame */
  .hero-flush .scrim {
    background: radial-gradient(80% 36% at 50% 34%,
      rgba(245,239,223,.52) 0%,
      rgba(245,239,223,.34) 48%,
      rgba(245,239,223,.10) 78%,
      rgba(245,239,223,0) 100%);
  }
  .hero-flush .foot { bottom: 20px; padding: 0 12px; }
  /* the platform strip has to hold one line on a 375px screen */
  .hero-flush .meta { font-size: 9.5px; letter-spacing: .1em; white-space: nowrap; }
  .hero-flush .proudly, .hero-flush .meta { color: var(--ink); text-shadow: none; opacity: .82; }
  .hero-flush .acts { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-flush .acts .btn { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* the data canvas covers the frame; the raw <video> is the fallback beneath it */
.hero-flush .hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: block;
}

/* 16:9 on wide screens, 9:16 on phones — one plays, the other is off */
.hero-flush .hero-video-tall { display: none; }
@media (max-aspect-ratio: 1/1) {
  .hero-flush .hero-video-wide { display: none; }
  .hero-flush .hero-video-tall { display: block; }
}
/* once the canvas is live the fallback video is hidden entirely */
.hero-flush.has-data-canvas .hero-video { display: none; }

.hero-flush .hero-video { display: none; }
  .hero-flush { background: var(--bone) url("assets/hero-dark.png") center / cover no-repeat; }
}

/* ---- product snapshot: no caption strip, click to enlarge --------- */
.shotframe { border: 1px solid var(--line); background: var(--bone); }
.shotframe figcaption { display: none; }
.shot-open {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; position: relative;
}
.shot-open img { display: block; width: 100%; height: auto; }
.shot-hint {
  position: absolute; right: 12px; bottom: 12px;
  padding: 6px 10px;
  background: rgba(16,15,12,.78); color: var(--bone);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .18s ease;
}
.shot-open:hover .shot-hint, .shot-open:focus-visible .shot-hint { opacity: 1; }
@media (hover: none) { .shot-hint { opacity: .85; } }

/* `display:flex` here is an AUTHOR rule, and author rules beat the browser's
   own `[hidden] { display:none }` — so the modal rendered over the whole page
   on every load despite carrying the hidden attribute. It must opt out
   explicitly. */
.shot-modal[hidden] { display: none !important; }
.shot-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(16,15,12,.88);
  backdrop-filter: blur(6px);
}
.shot-modal img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid rgba(245,239,223,.18);
}
.shot-close {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--bone); font-size: 30px;
}
/* On a phone a landscape screenshot fitted to the width is 351px of unreadable
   UI — which is not "more detail". So the modal becomes a pannable surface and
   the image is rendered well past the viewport, centred on open. */
@media (max-width: 720px) {
  .shot-modal { padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: block; }
  .shot-modal[hidden] { display: none !important; }
  .shot-modal img {
    max-width: none; max-height: none;
    width: 260vw; height: auto;
    margin: 12px;
  }
  .shot-close {
    position: fixed; top: 10px; right: 12px;
    width: 44px; height: 44px;
    background: rgba(16,15,12,.72); border-radius: 50%;
  }
  .shot-pan {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    padding: 7px 12px; border-radius: 999px;
    background: rgba(16,15,12,.72); color: var(--bone);
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  }
}
.shot-pan { display: none; }
@media (max-width: 720px) { .shot-pan { display: block; } }