/* =============================================================
   MOVE IT CLEAR IT — about-video.css
   about.html ONLY. Loaded last, after style.css and brand-system.css.

   Three jobs:
     1. the featured "Wrapped, Padded, and Protected" band (IMG_0058)
     2. a portrait frame for the crew video (IMG_0067 is a vertical clip)
     3. type hierarchy + a calm count-in for the stat row

   REVERT: delete the one <link> in about.html. Every selector below is
   anchored on an id or class that exists on this page only.
============================================================= */

/* ============================================================
   1. FEATURED BAND — full-bleed video, copy on a navy scrim
============================================================ */
#protected-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  min-height: 62svh;
  padding: 0;
  margin: 0;
  max-width: none;          /* beats `main > section { max-width }` */
  overflow: hidden;
  background: var(--navy);
}

/* Same trap as the homepage hero: `main > section > *` applies
   max-width + auto inline margins, which CENTRES an inset:0 absolute box
   instead of stretching it. Both children opt out explicitly. */
#protected-band .pb-media,
#protected-band .pb-copy { max-width: none; margin: 0; }

#protected-band .pb-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#protected-band .pb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  border: 0;
  pointer-events: none;
}
/* Ink Navy, weighted to the bottom-left where the copy sits. The room in this
   clip is very bright, so the type needs a real field rather than a wash. */
#protected-band .pb-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(10, 22, 40, 0.92) 0%,
      rgba(10, 22, 40, 0.72) 30%,
      rgba(10, 22, 40, 0.24) 62%,
      rgba(10, 22, 40, 0.10) 100%),
    linear-gradient(to right,
      rgba(10, 22, 40, 0.55) 0%,
      rgba(10, 22, 40, 0.00) 60%);
}

#protected-band .pb-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 0 clamp(24px, 6vw, 72px) clamp(36px, 6vw, 64px);
  text-align: left;
}
#protected-band .pb-eyebrow {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
#protected-band h2 {
  font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #F5F1EA;
  margin: 0 0 14px;
  max-width: 18ch;
}
#protected-band .pb-lede {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(245, 241, 234, 0.88);
  margin: 0;
  max-width: 54ch;
}

/* The band is decorative motion; reduced-motion users get the poster. */
@media (prefers-reduced-motion: reduce) {
  #protected-band .pb-video { display: none; }
  #protected-band .pb-media {
    background-image: url('../img/protected-furniture-poster.webp');
    background-size: cover;
    background-position: 50% 50%;
  }
}

@media (max-width: 640px) {
  #protected-band {
    min-height: 0;
    min-height: auto;
    display: block;
  }
  /* On a phone the copy stops sitting over the footage: the clip gets its own
     block and the words get a solid field underneath, same reasoning as the
     homepage hero. A 62svh band with three lines of type over it left neither
     legible. */
  #protected-band .pb-media {
    position: relative;
    inset: auto;
    height: 46svh;
    min-height: 260px;
  }
  #protected-band .pb-scrim {
    background: linear-gradient(to top, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.00) 45%);
  }
  #protected-band .pb-copy {
    background: var(--navy);
    padding: 26px clamp(20px, 6vw, 28px) 30px;
  }
  #protected-band h2 { max-width: 100%; }
}

/* ============================================================
   2. THE CREW VIDEO — portrait frame
   IMG_0067 is a phone-shot vertical clip (rotation -90, displays 1080x1920).
   The shared .video-wrapper is 16/9, which would letterbox it into two black
   pillars; this variant matches the file so the frame is all picture.
============================================================ */
/* SPECIFICITY: style.css has `#crew-video > * { max-width: var(--max-w) }`,
   which scores an id and beats a bare class — a plain `.video-wrapper--portrait`
   rule left the frame 1180px wide and 2098px TALL. The id has to be carried
   here or the cap silently does nothing. */
#crew-video > .video-wrapper--portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: min(420px, 82vw);
  margin-inline: auto;
}
#crew-video > .video-wrapper--portrait video { object-fit: cover; }

@media (min-width: 861px) {
  /* Desktop: a tall frame alone on a wide bone section looks stranded, so it
     is capped and centred rather than stretched. */
  #crew-video > .video-wrapper--portrait { max-width: 396px; }
}

/* ============================================================
   3. TYPE HIERARCHY + STAT ROW
============================================================ */
/* The crew paragraph carried the same weight as the fine print beneath it.
   One step up in size and a tighter measure makes it read as the lead. */
.about-crew-copy .about-crew-lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--navy);
  font-weight: 500;
  max-width: 46ch;
}
.about-crew-copy h2 {
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* Stat row: the numbers are the point, so they get the display face and a
   quiet rise as the row scrolls in. `.fade-up.visible` is the class the
   existing IntersectionObserver in main.js already toggles — no new script. */
#about-stats .about-stat-num {
  font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
#about-stats .about-stat-label {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--navy-60);
  text-wrap: balance;
}

.fade-up.visible #about-stats .about-stat-num {
  animation: pb-stat-rise 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#about-stats .about-stat-card:nth-child(1) .about-stat-num { animation-delay:  60ms; }
#about-stats .about-stat-card:nth-child(2) .about-stat-num { animation-delay: 150ms; }
#about-stats .about-stat-card:nth-child(3) .about-stat-num { animation-delay: 240ms; }

@keyframes pb-stat-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* A stat that only appears once the animation runs is a stat that disappears
   for anyone who suppresses motion. */
@media (prefers-reduced-motion: reduce) {
  .fade-up.visible #about-stats .about-stat-num { animation: none; opacity: 1; transform: none; }
}