/*
 * about.html — page-specific modules.
 *
 * The page sits on pure black (about.html sets body{--almost-black:#000}) and
 * reuses the shared chrome (<site-header>/<site-footer>), the industry-hero
 * content classes, the .bracket corner primitive, the divider-2.png pixel
 * dither (black→grey) and the .book-demo CTA. New to this page:
 *   .about-eyebrow — square + mono label section eyebrow (currentColor square)
 *   .story         — OUR STORY two-up (heading | body paragraphs)
 *   .founders      — full-width founders photo, centred to the content column
 *   .used-by       — two-up (heading | numbered offerings list)
 *   .team          — 4-up leadership grid (bracketed portrait + name/role/links)
 *   .values        — VISION grey panel (heading + 4-cell values grid)
 * plus .hero--about (full-height, left-aligned) and .book-demo--banner.
 */

/* ── Hero ──────────────────────────────────────────────────────────────────
 * Full-height, left-aligned. Reuses .hero__content--industry /
 * .hero__heading--industry / .hero__subheading; only the full-height desktop
 * rule and the see-through button fill are new (mirrors .hero--industry but
 * with no stat strip, so no 200px bottom reserve).
 */
@media (min-width: 1301px) {
  .hero--about {
    /* 70% of full-height so a sliver of the next section (OUR STORY) shows on load. */
    min-height: calc((100vh - var(--nav-height) - 27px) * 0.7);
    padding-top: 70px;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    /* Content sits near the top (the McLaren image fills the area below), per
       the design — unlike the centred product/industry heroes. */
    justify-content: flex-start;
  }
}

/* The shared .hero__heading is a centred flex column; the about hero is
   left-aligned (so the 2nd line sits flush-left under the 1st, like the
   design), matching the industry hero's stance. */
.hero__content--about .hero__heading {
  align-items: flex-start;
  text-align: left;
}

/* The McLaren sunset carries this hero — lighten the bg-layer scrim so the
   image reads as vividly as the design. This is a page-wide override (not a
   scoped selector): it wins over layout.css's default rgba(10,10,10,0.55)
   purely by source order (about.css loads after layout.css). On about.html the
   bg-layer is clipped to the hero by the inline sizeHeroBg script, so only the
   hero shows it. Below 1300px css/mobile.css (loaded after this) re-sets the
   scrim to its own rgba(10,10,10,0.3) — even lighter, so the hero still reads. */
.bg-layer::after { background: rgba(8, 8, 8, 0.4); }

/* ── Section eyebrow — filled square + mono label ──────────────────────────
 * Square colour follows the text (white on the dark sections, black on the
 * grey VISION panel).
 */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 30px;
}
.about-eyebrow::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  flex: none;
}

/* ── OUR STORY ─────────────────────────────────────────────────────────────
 * Eyebrow on its own row, then a 2-up: left heading, right body paragraphs.
 * Inset to --content-edge so it lines up with the hero text.
 */
.story {
  padding: 100px var(--content-edge) 80px;
}
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.story__heading {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.story__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 6px;
}
.story__body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: #A2A2A2;
  margin: 0;
}

/* ── USED BY / offerings ───────────────────────────────────────────────────
 * 2-up: left heading, right intro line + numbered offerings list.
 */
.used-by {
  padding: 86px var(--content-edge) 96px;
}
.used-by__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.used-by__heading {
  font-family: var(--font-sans);
  font-weight: 300;            /* Geist Regular */
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.used-by__offerings { padding-top: 6px; }
.used-by__intro {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: #A2A2A2;
  margin: 0 0 40px;
  max-width: 430px;
}
.offerings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.offerings__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
}
.offerings__num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--orange);
}
.offerings__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 8px;
}
.offerings__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: #A2A2A2;
  margin: 0;
  max-width: 360px;
}

/* ── Leadership team — 4-up portrait grid ──────────────────────────────────
 * Aligned to the content column (col-width), not --content-edge: the design's
 * portraits sit on the 130px gutter, slightly wider than the hero text.
 */
.team {
  /* bottom padding = the slight gap between the LinkedIn buttons and the
     <bracket-rule> that closes the row below the section. */
  padding: 16px 0 28px;
}
.team__grid {
  position: relative;
  width: var(--col-width);
  max-width: 100%;
  margin: 0 auto;
  list-style: none;
  padding: 0 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px;
}
/* Two full-bleed rules (white 20% — matches the site's rules on dark sections):
   one touching the tops of the portraits, one directly under them. Both live on
   the grid (centred on the viewport, so 100vw is full-bleed) and paint after the
   cards, so they sit over the photos. The under-photo rule's offset is the photo
   height = cell width × 359/271 (aspect-ratio inverse); cell width =
   (gridWidth − 2·38px padding − 3·52px gaps) / 4. The bottom of the whole block
   is closed by a <bracket-rule corners="bottom"> after the section. */
.team__grid::before,
.team__grid::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.team__grid::before { top: 0; }
.team__grid::after  { top: calc((min(var(--col-width), 100vw) - 232px) / 4 * 359 / 271); }
.team__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.team__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 271 / 359;
  margin-bottom: 18px;
}
.team__photo img {
  padding: 1px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
/* Orange corner squares straddling the four photo corners (case-card motif). */
.team__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--orange);
  z-index: 1;
}
.team__corner--tl { top: -6px;    left: -6px;  }
.team__corner--tr { top: -6px;    right: -6px; }
.team__corner--bl { bottom: -6px; left: -6px;  }
.team__corner--br { bottom: -6px; right: -6px; }

.team__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 2px;
}
.team__role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: #A2A2A2;
  margin: 0 0 18px;
}
.team__connect {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 14px;
}
/* Small bracketed link button (orange corner brackets, see .btn--solid). */
.team__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding: 10px 18px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  transition: opacity 0.2s;
}
.team__btn:hover { opacity: 0.8; }
.team__btn::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* ── Pixel-dither divider (black → grey) ───────────────────────────────────
 * divider-2.png is transparent on top (shows the black page), dithers through
 * black squares, and resolves to solid #DADADA at its foot — meeting the grey
 * VISION panel below seamlessly. Mirrors product.html's use of the same asset.
 */
.values-divider {
  position: relative;
  width: 100%;
  height: 130px;
  background: url('../images/divider-2.png') repeat-x left bottom / auto 100%;
  z-index: 2;
}

/* ── VISION — values (grey panel) ──────────────────────────────────────────
 * Eyebrow + heading + subhead inset to --content-edge; the 4-cell grid spans
 * the wider content column (its left bars sit on the 130px gutter). Each cell
 * carries a solid black left accent bar; a thin rule caps the grid top.
 */
.values {
  /* Section padding sits on the content-column gutter (130px) so the grid's
     accent bars line up with it; the intro block is nudged in by --content-pad
     to reach the hero text edge (--content-edge). */
  --values-edge: calc(var(--content-edge) - var(--content-pad));
  position: relative;
  /* Sit above the page's white tram lines (.page-wrapper::after, z-index 101) so
     the opaque grey covers them and this panel's own black side rules show in
     their place — the vertical line then reads continuously across the page. */
  z-index: 102;
  background: #DADADA;
  color: var(--black);
  /* --values-edge is the centred content-column gutter; it resolves to 0 once
     the viewport is narrower than --col-width (1252px). Floor it at the 38px
     section gutter so the grid's accent bars never sit flush to the edge in the
     981–1252px band (the 980px block below takes over beneath that). */
  padding: 132px max(38px, var(--values-edge)) 104px;
}

/* Vertical pinstripes up both sides of the grey panel, on the page tram lines
   (--rail-edge) so they line up exactly with the site's vertical rules above and
   below this section. The site's tram lines are white and vanish on a light
   surface, so these are black (same 1px / 20% weight as the horizontal
   pinstripes). Hidden on the reflowed mobile grid (≤980px). */
.values::before,
.values::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.values::before { left:  var(--rail-edge); }
.values::after  { right: var(--rail-edge); }
.values__intro { padding-left: var(--content-pad); }
.values .about-eyebrow { color: var(--black); }
.values__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 64px;
  max-width: 620px;
}
.values__subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 34px;
}
.values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Full-bleed horizontal pinstripes touching the top and bottom of the values
   row — the same 1px / 20% as the site's tram lines, black on the grey panel. */
.values__grid::before,
.values__grid::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.values__grid::before { top: 0; }
.values__grid::after  { bottom: 0; }

.values__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 30px 24px;
}
.values__cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--black);
}
.values__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 18px;
}
.values__title {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
  color: var(--black);
  margin: 0 0 18px;
}
.values__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #3F3F3F;
  /* Bottom-align the subtext so all four line up on the same row regardless of
     how many lines each Geist-Pixel title wraps to (grid cells are equal-height). */
  margin: auto 0 0;
}

/* ── Closing CTA banner ────────────────────────────────────────────────────
 * Reuses .book-demo (background cta-image.png), but shorter than the 930px
 * default — a banner, not a full screen.
 */
.book-demo--banner {
  min-height: 560px;
}

/* ══ Responsive ════════════════════════════════════════════════════════════ */

/* Tablet / small laptop: collapse the 2-ups and the 4-up team grid. */
@media (max-width: 980px) {
  .story,
  .used-by {
    padding-left: 38px;
    padding-right: 38px;
  }
  .story__grid,
  .used-by__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .story__heading,
  .used-by__heading { font-size: 34px; }

  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 36px;
    max-width: 640px;
  }
  /* The under-photo rule's offset is calibrated to the single desktop row of
     four; the 2-up reflow changes the photo height, so drop it. */
  .team__grid::after { display: none; }

  .values { padding-left: 38px; padding-right: 38px; }
  .values__intro { padding-left: 0; }
  .values__heading { font-size: 40px; }
  /* 2-up: the full-bleed pinstripes bracket the whole grid top & bottom; the
     per-cell black accent bars delineate the four items. The column-edge
     vertical pinstripes don't map onto the reflowed grid — drop them. */
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .values::before,
  .values::after { display: none; }
}

/* Phones: single column throughout. */
@media (max-width: 620px) {
  .story { padding: 64px 20px 56px; }
  .used-by { padding: 56px 20px 64px; }
  .story__heading,
  .used-by__heading { font-size: 28px; }

  .team { padding: 8px 0 72px; }
  .team__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
    max-width: 360px;
  }

  .values { padding: 100px 20px 72px; }
  .values__heading { font-size: 32px; }
  .values__subhead { font-size: 19px; }
  .values__grid { grid-template-columns: 1fr; }

  .book-demo--banner { min-height: 420px; }
}