/* Exact geometry from sections/s6m-about-hero.liquid. */

  .s6m-abouthero {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    color: #fff;
    background: #0a0a0a;
    display: flex;
    align-items: flex-end;
  }
  @media (min-width: 768px) { .s6m-abouthero { min-height: 70vh; max-height: 720px; } }
  .s6m-abouthero__media,
  .s6m-abouthero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    animation: sixm-about-zoom 2.4s cubic-bezier(.2,.7,.2,1) both;
  }
  .s6m-abouthero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.95) 100%);
  }
  .s6m-abouthero__content {
    position: relative; z-index: 5;
    padding: 30px 18px;
    width: 100%;
    max-width: 1440px; margin: 0 auto;
  }
  @media (min-width: 768px) { .s6m-abouthero__content { padding: 60px 48px; } }
  .s6m-abouthero__title {
    font-family: var(--6m-display);
    font-size: clamp(56px, 14vw, 160px);
    color: #fff;
    line-height: 0.88;
    margin-top: 8px;
    text-transform: uppercase;
  }

  /* --- Banner shape: 'adapt' shows the whole banner (no cropping) ---------
     The eyebrow + H1 are overlaid ON the banner, so the box cannot simply
     take the banner's ratio: at 390px the natural box is 182.9px tall and the
     copy measures 182.6px, and any longer title would be clipped by
     overflow: hidden. min-height/max-height with fit-content or max-content
     does NOT work as a floor here -- with aspect-ratio set, both resolve
     THROUGH the ratio (measured in Chromium: an aspect-ratio box stayed 40px
     tall behind 137.8px of copy), so a floor would have to be a guessed
     number that either clips long titles or re-crops short ones.
     Instead the image and the copy are stacked in one CSS grid cell: the row
     is max(image height at its own ratio, copy height), so the banner is
     never cropped AND the copy is never clipped, at any copy length. */
  .s6m-abouthero.s6m-abouthero--fit-adapt {
    display: grid;
    align-items: stretch;
    min-height: 0;
    max-height: none;
  }
  .s6m-abouthero.s6m-abouthero--fit-adapt > * { grid-area: 1 / 1; }
  .s6m-abouthero.s6m-abouthero--fit-adapt .s6m-abouthero__media {
    position: relative;
    height: auto;
    align-self: start;
    aspect-ratio: var(--x-ar, 2.132);
  }
  .s6m-abouthero.s6m-abouthero--fit-adapt .s6m-abouthero__content { align-self: end; }
  /* No aspect-ratio support: fall back to exactly the previous behaviour. */
  @supports not (aspect-ratio: 1 / 1) {
    .s6m-abouthero.s6m-abouthero--fit-adapt { min-height: 480px; }
    .s6m-abouthero.s6m-abouthero--fit-adapt .s6m-abouthero__media {
      position: absolute;
      height: 100%;
    }
    @media (min-width: 768px) {
      .s6m-abouthero.s6m-abouthero--fit-adapt { min-height: 70vh; max-height: 720px; }
    }
  }

  .s6m-aboutbody {
    background: #0a0a0a;
    color: #fff;
    padding: 40px 18px 60px;
  }
  @media (min-width: 768px) { .s6m-aboutbody { padding: 60px 48px 80px; } }
  .s6m-aboutbody p {
    font-size: 16px; line-height: 1.55;
    max-width: 720px;
  }
  @media (min-width: 768px) { .s6m-aboutbody p { font-size: 18px; } }
  .s6m-aboutstats {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
  }
  @media (min-width: 768px) { .s6m-aboutstats { grid-template-columns: repeat(4, 1fr); } }
  .s6m-aboutstats__cell {
    background: #0a0a0a;
    padding: 22px;
  }
  .s6m-aboutstats__num {
    font-family: var(--6m-display);
    font-size: 40px;
    color: var(--6m-signal);
    line-height: 1;
  }
  @media (min-width: 768px) { .s6m-aboutstats__num { font-size: 56px; } }
  .s6m-aboutstats__label {
    font-family: var(--6m-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-top: 4px;
  }

/* The source section uses shared tokens/reveal classes; keep this port scoped. */
main#inner-wrap:has(> .sixm-about) { max-width:none; }
.sixm-about { width:100%; }
.s6m-abouthero__eyebrow { margin:0; color:var(--6m-signal); font-family:var(--6m-mono); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.s6m-abouthero__title { margin-bottom:0; font-weight:var(--font-h1--weight,700); letter-spacing:-.01em; }
.s6m-abouthero__title span { color:var(--6m-signal); }
.s6m-abouthero__media--empty { background:linear-gradient(135deg,#0a0a0a,#2a2a2a); }
.s6m-aboutbody p { margin:0 0 16px; }
.s6m-aboutbody > :last-child { margin-bottom:0; }
.s6m-aboutbody a { color:inherit; text-decoration:underline; }
@keyframes sixm-about-zoom { from { transform:scale(1.12); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
 .s6m-abouthero__media,.s6m-abouthero__media img { animation:none; }
}