/* ============================================
   ABOUT PAGE (/about/) - Velvet Cinema editorial
   Page-scoped. Mirrors the contact-page numeral
   system and atmospheric noise/glow language.
   ============================================ */

/* ---------- Section numerals (watermarks) ---------- */

.about-page__hero,
.about-page__founder,
.about-page__environments,
.about-page__awards,
.about-page__team,
.about-page__cta {
  position: relative;
  overflow: hidden;
}


/* ============================================
   01 - HERO
   DOMINANT MOMENT: oversized em-italic headline +
   asymmetric portrait pair
   ============================================ */
.about-page__hero {
  padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  background: var(--color-bg);
  isolation: isolate;
}

.about-page__hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 12% 30%, color-mix(in srgb, var(--color-accent-glow) 16%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 88% 75%, rgba(212, 160, 160, 0.14) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .about-page__hero-glow {
  background:
    radial-gradient(ellipse 55% 50% at 12% 30%, color-mix(in srgb, var(--color-accent-glow) 20%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 88% 75%, rgba(212, 160, 160, 0.15) 0%, transparent 55%);
}


.about-page__hero-inner {
  position: relative;
  z-index: 2;
}

.about-page__breadcrumbs {
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

.about-page__hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .about-page__hero-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }
}

.about-page__hero-content {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.about-page__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}

.about-page__hero-title {
  /* Velvet Cinema editorial serif hero (matches .svcs-hero__title). */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.25rem);
  font-weight: 350;
  letter-spacing: -0.015em;
  /* 1.04 to actually match .svcs-hero__title, which the comment above has always
     claimed. This was 1.0 - the tightest display leading on the site, where every
     sibling serif hero sits at 1.02 (.chero__title, .look__title) or 1.04
     (.svcs-hero__title, .cd-title, .post-hero__title). It went unnoticed because
     the old split-reveal guard padded .line and inflated every split heading ~21%;
     once e7d626ef0 removed that padding so headings render their authored leading,
     this one was left visibly tighter than its siblings. */
  line-height: 1.04;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}

.about-page__hero-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.about-page__hero-title-sub {
  display: block;
  font-size: 0.6em;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  color: var(--color-body);
  margin-top: 0.2em;
}

.about-page__hero-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: var(--weight-light);
  color: var(--color-body);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}

.about-page__hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(0.5rem, 1vw, 1rem);
}

.about-page__hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-body);
  letter-spacing: 0.01em;
}

.about-page__hero-trust-item .ph-icon {
  color: var(--color-accent);
}

.about-page__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.about-page__hero-link {
  --hit-expander: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  position: relative;
  padding: 0.4em 0;
}
/* Vertical hit-expander (::before; ::after is the underline). Tap height to 44. */
.about-page__hero-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  min-height: 44px;
}

.about-page__hero-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.4em;
  bottom: 0.1em;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform var(--transition-smooth);
}

@media (hover: hover) {
  .about-page__hero-link:hover::after { transform: scaleX(1); }
  .about-page__hero-link:hover { color: var(--color-link); }
}

.about-page__hero-portrait {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
  max-width: 480px;
  justify-self: end;
  width: 100%;
}

/* <picture> from StaffPortrait::pictureTag() must fill the 4:5 frame; it is
   inline by default, so stretch it like the img (matches .team-card__media). */
.about-page__hero-portrait picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about-page__hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-page__hero-caption {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1vw, 1.2rem);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.about-page__hero-caption-kicker {
  font-family: var(--font-body);
  font-size: 0.65em;
  font-weight: var(--weight-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}


/* ============================================
   02 - FOUNDER
   DOMINANT MOMENT: large portrait with
   overlapping pull-quote card
   ============================================ */
.about-page__founder {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.about-page__founder-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}

.about-page__founder-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-heading);
  text-wrap: balance;
  margin: var(--space-md) 0 0 0;
}

.about-page__founder-title em {
  font-style: italic;
  color: var(--color-rose);
}

.about-page__founder-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  position: relative;
  z-index: 2;
}

/* Batch 3 of the 768-1023 sweep: gate moved 900 -> 768. Below 900 this stacked, and
   because the portrait is a ratio-locked 3:4 box it ran 829x1105 at 880 - taller than
   the viewport - which pushed the pull-quote that belongs beside it off the screen
   entirely. Batch 2 capped the portrait as a stopgap; the real fix is the two-column
   form the page already has 132px further up the viewport.
   minmax(0, ...) rather than bare fr: a bare `fr` is minmax(auto, 1fr) and floors at
   the item's min-content, which is what starved .bio-hero__inner to a 0px text track
   on 25 pages in Batch 1. Free hardening here, since neither track is content-floored
   today. */
@media (min-width: 768px) {
  .about-page__founder-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.about-page__founder-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-xl);
}

/* 768-899 only - above 900 the grid rule fires and the portrait sits in a 0.85fr track at
   365-523px. Below it the locked 3:4 box takes the whole 1-col track and renders 771x1028 at
   820, taller than the viewport, which pushes the pull-quote that belongs beside it clean off
   the screen. Released again at 900 so the desktop portrait keeps its full 523px at 1280 -
   without that reset this cap would shave 139px off an approved desktop layout. */
@media (min-width: 768px) {
  .about-page__founder-portrait {
    max-width: 24rem;
    /* Left, matching the prose that follows it and the 0.85fr left track it becomes at 900.
       Centred, the 768 frame put the portrait at x180 over paragraphs starting at x60. */
    margin-inline: 0;
  }
}
@media (min-width: 900px) {
  .about-page__founder-portrait {
    max-width: none;
  }
}

.about-page__founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-xl);
  display: block;
}

.about-page__founder-quote {
  position: absolute;
  right: clamp(-1rem, -2vw, -1.5rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  max-width: 80%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
  border-left: 3px solid var(--color-rose);
}

.about-page__founder-quote p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  font-style: italic;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-heading);
  margin: 0 0 var(--space-sm) 0;
  text-wrap: pretty;
}

.about-page__founder-quote cite {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.about-page__founder-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.about-page__founder-lede {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--color-heading);
  text-wrap: pretty;
  margin: 0;
}

.about-page__founder-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: 1.65;
  color: var(--color-body);
  margin: 0;
}

.about-page__founder-creds {
  list-style: none;
  padding: 0;
  margin: clamp(0.5rem, 1vw, 1rem) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  border-top: 1px solid var(--color-border);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.about-page__founder-creds li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.about-page__founder-creds .ph-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.about-page__founder-actions {
  margin-top: clamp(0.5rem, 1vw, 1rem);
}

.about-page__founder-link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2em;
  padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(1rem, 1.6vw, 1.35rem);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-rose) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-rose) 35%, transparent);
  text-decoration: none;
  transition: background var(--transition-smooth), transform var(--transition-smooth);
}

.about-page__founder-link-kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.about-page__founder-link-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

@media (hover: hover) {
  .about-page__founder-link:hover {
    background: color-mix(in srgb, var(--color-rose) 28%, transparent);
    transform: translateY(-2px);
  }
}


/* ============================================
   03 - TWO ENVIRONMENTS (dark)
   DOMINANT MOMENT: side-by-side editorial pair
   contrasting "loud" vs "quiet"
   ============================================ */
.about-page__environments {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--color-bg);
}

.about-page__environments-inner {
  position: relative;
  z-index: 2;
}

.about-page__environments-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.about-page__environments-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4.2vw, 4.5rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-heading);
  text-wrap: balance;
  margin: var(--space-md) 0;
}

.about-page__environments-title em {
  font-style: italic;
  color: var(--color-rose);
}

.about-page__environments-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  font-weight: var(--weight-light);
  line-height: 1.55;
  color: var(--color-body);
  max-width: 60ch;
  margin: 0;
}

.about-page__environments-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

/* Batch 3: gate moved 900 -> 768. "Two studios, one philosophy" is a COMPARISON, and a
   comparison that stacks stops being one - the reader has to hold the first studio in
   their head while scrolling to the second. The cards prove they work at 404px wide in
   the 900 layout, and the band gives each one 320-390px, so the pair reads side by side
   across the whole band. The staggered wig offset comes with it: it is what stops the
   two columns reading as a plain table. */
@media (min-width: 768px) {
  .about-page__environments-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
  }
  .about-page__env--wig {
    transform: translateY(clamp(1.5rem, 4vw, 3rem));
  }
}

.about-page__env {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

@media (hover: hover) {
  .about-page__env:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }
  .about-page__env--wig:hover {
    transform: translateY(calc(clamp(1.5rem, 4vw, 3rem) - 4px));
  }
}

.about-page__env-figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.about-page__env-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

@media (hover: hover) {
  .about-page__env:hover .about-page__env-figure img {
    transform: scale(1.04);
  }
}

.about-page__env-body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}

.about-page__env-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.about-page__env-kicker--rose {
  color: var(--color-rose);
}

.about-page__env-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-heading);
  margin: 0;
}

.about-page__env-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

/* Spec strip: the physical facts of each space, sitting above the service list.
   These are FIXED numbers and deliberately NOT in salonStats() - that helper exists
   so figures cannot go stale by being derived, and chairs and bowls have nothing to
   derive them from. Ben, 2026-08-22: the build is final, no further expansion, so a
   literal here cannot drift. Tokens and the border treatment are lifted from
   .about-page__env-list below so the two rows read as one component. */
.about-page__env-spec {
  list-style: none;
  padding: clamp(0.85rem, 1.5vw, 1.25rem) 0 0 0;
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.5vw, 1rem);
}

.about-page__env-spec li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.about-page__env-spec b {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.about-page__env-spec span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  color: var(--color-muted);
}

.about-page__env-list {
  list-style: none;
  padding: 0;
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--color-border);
  padding-top: clamp(0.85rem, 1.5vw, 1.25rem);
}

.about-page__env-list li {
  position: relative;
  padding-left: 1.3rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-body);
}

.about-page__env-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.55rem;
  height: 1px;
  background: var(--color-accent);
}


/* ============================================
   04 - AWARDS (cream)
   DOMINANT MOMENT: enormous "5" numeral that
   anchors the entire viewport
   ============================================ */
.about-page__awards {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.about-page__awards-inner {
  position: relative;
  z-index: 2;
}

.about-page__awards-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Batch 3: gate moved 900 -> 768, and this one the sweep measured directly. Below 900
   the centred 119px "5" ornament floated over left-aligned text - an axis mismatch that
   reads as a mistake rather than a composition. Forcing the 900 rule down to 768 gives
   281/402 tracks with the SAME wrap count and a section 110px shorter, so the 900 gate
   was never a considered floor - it was a default. */
@media (min-width: 768px) {
  .about-page__awards-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  }
}

.about-page__awards-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Anchor the oversized italic '5' with a soft rose halo so the numeral column
   reads as a designed panel, not a glyph floating in dead space. */
.about-page__awards-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 46%;
  left: 50%;
  width: clamp(14rem, 34vw, 26rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-rose) 13%, transparent) 0%, transparent 64%);
  pointer-events: none;
}

.about-page__awards-five {
  font-family: var(--font-display);
  font-size: clamp(10rem, 28vw, 24rem);
  font-weight: var(--weight-black);
  font-style: italic;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--color-rose-deep);
  display: block;
}

.about-page__awards-mark-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-top: clamp(0.5rem, 1vw, 0.85rem);
}

.about-page__awards-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.about-page__awards-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1rem + 3.5vw, 3.8rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}

.about-page__awards-title em {
  font-style: italic;
  color: var(--color-rose-deep);
}

.about-page__awards-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  font-weight: var(--weight-light);
  line-height: 1.6;
  color: var(--color-body);
  max-width: 56ch;
  margin: 0;
}

.about-page__awards-years {
  list-style: none;
  padding: 0;
  margin: clamp(0.5rem, 1vw, 0.85rem) 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}

.about-page__awards-year {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-heading);
}

.about-page__awards-year .ph-icon {
  color: var(--color-rose);
}

.about-page__awards-link {
  --hit-expander: 1;
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-link);
  text-decoration: none;
  padding: 0.3em 0;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.about-page__awards-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  min-height: 44px;
}

@media (hover: hover) {
  .about-page__awards-link:hover {
    color: var(--color-heading);
  }
}


/* ============================================
   05 - TEAM teaser
   DOMINANT MOMENT: staggered portrait strip
   ============================================ */
.about-page__team {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--color-bg);
}

.about-page__team-inner {
  position: relative;
  z-index: 2;
}

.about-page__team-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.about-page__team-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1rem + 3.5vw, 3.8rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-heading);
  text-wrap: balance;
  margin: var(--space-md) 0;
}

.about-page__team-title em {
  font-style: italic;
  color: var(--color-rose-deep);
}

.about-page__team-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  font-weight: var(--weight-light);
  color: var(--color-body);
  line-height: 1.55;
  margin: 0;
}

.about-page__team-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.about-page__team-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform var(--transition-smooth);
}

@media (min-width: 700px) {
  /* Batch 4 "5-into-4". The strip is a fixed cast of 5 provider cards (about.php
     builds it with an isServiceProvider() filter that stops at 5), but the track
     rule was `repeat(auto-fit, minmax(140px, 1fr))`, which fits only 4 columns
     until roughly 830px: 5*140 + 4*gap overflows a 768 container, so the fifth
     card dropped to a second row on its own from 700 to ~830. Pinned to exactly 5
     from the same breakpoint that turns on the stagger below - that stagger is
     already written for a single row of 5 (it counts `5 - var(--i)`), so one row
     is the shape this section was designed as, and auto-fit was simply failing to
     reach it in the band. */
  .about-page__team-strip {
    /* Count-agnostic one-row layout. `repeat(5, ...)` was the first fix and it was
       a latent bug: about.php builds this with a provider filter that stops AT 5,
       so the count is "up to 5", not exactly 5, and a roster of 4 left an empty
       trailing 224px track at 1280 (measured). Staff genuinely come and go - one
       was being offboarded the same day this shipped - so the rule must not encode
       the number. Column flow puts N cards on one row for ANY N, which is the
       shape the stagger below is written for.

       `grid-template-columns: none` is LOAD-BEARING, not tidiness. Column flow does
       NOT cancel the base rule's `repeat(auto-fit, minmax(140px, 1fr))`; explicit
       tracks still get filled first and only the overflow lands in implicit ones.
       Without the reset, 768 measured 140/140/140/140/99.84 - four cards in
       auto-fit tracks and the fifth in a differently sized implicit track - which
       is worse than the hardcoded 5 this replaced. Measured, not reasoned. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .about-page__team-card {
    transform: translateY(calc(var(--i, 0) * clamp(0.5rem, 1.2vw, 1.25rem)));
  }
  .about-page__team-card:nth-child(even) {
    transform: translateY(calc((5 - var(--i, 0)) * clamp(0.4rem, 1vw, 1rem)));
  }
}

/* <picture> from StaffPortrait::pictureTag() must fill the 3:4 card frame; the
   hover zoom below targets the inner img, so it survives the wrapper. */
.about-page__team-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about-page__team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-page__team-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(0.6rem, 1.4vw, 1rem);
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: background var(--transition-base);
}

/* Hover response consistent with the flagship portrait cards: a shadow lift +
   slow image zoom + slightly darker caption. The card's own transform is owned
   by the stagger offset, so the "lift" here rides box-shadow, not translate. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-page__team-card { transition: transform var(--transition-smooth), box-shadow var(--transition-base); }
  .about-page__team-card img { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .about-page__team-card:hover { box-shadow: var(--shadow-lg); }
  .about-page__team-card:hover img { transform: scale(1.04); }
  .about-page__team-card:hover figcaption { background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0)); }
}

.about-page__team-cta {
  text-align: center;
}


/* ============================================
   06 - FINAL CTA (dark)
   ============================================ */
.about-page__cta {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--color-bg);
  isolation: isolate;
}

.about-page__cta-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 100%, color-mix(in srgb, var(--color-accent-glow) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 0%, rgba(212, 160, 160, 0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

.about-page__cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
}

.about-page__cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 5vw, 6rem);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 var(--space-lg);
}

.about-page__cta-title em {
  font-style: italic;
  color: var(--color-rose-deep);
}

.about-page__cta-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: var(--weight-light);
  color: var(--color-body);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.about-page__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}


/* ============================================
   Reduced motion overrides
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .about-page__env-figure img,
  .about-page__env,
  .about-page__team-card {
    transition: none;
  }
  .about-page__team-card,
  .about-page__team-card:nth-child(even) {
    transform: none;
  }
}