/* ==========================================================================
   Company page.
   Requires tokens.css, typography.css, layout.css, components.css, and
   sections.css (the Careers card, Certifications, and the call to action).
   ========================================================================== */


/* ---------- Hero ----------

   Light Gray. Layers, back to front: circle, founder's portrait, text.

   Desktop (901px+)
   - Headline and three paragraphs (24px apart, up to 540px) in columns 1–6,
     60px between the headline and the text.
   - The portrait fills columns 7–12 (670px at 1440), bleeding to the right
     frame line and sitting on the stats band.
   - The circle (1001px, 1px Border Gray) is centered on the page at the
     hero's bottom edge, as on the homepage hero.

   Tablet and mobile (up to 900px)
   - The text stacks above the portrait (up to 600px, centered, sitting on
     the stats band). The circle stays centered at the bottom edge, at
     120% of the screen width. */

.company-hero {
  position: relative;
  overflow: hidden;                          /* clips the circle */
  padding-bottom: 0;                         /* the portrait sits on the bottom edge */
}

.company-hero__text { position: relative; z-index: 2; }
.company-hero__body {
  display: grid; gap: var(--space-24);
  max-width: var(--text-max);
  margin-top: var(--space-60);
}

.company-hero__circle {
  position: absolute; z-index: 0;
  left: 50%; top: 100%;
  width: 120vw; height: auto; max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.company-hero__portrait {
  position: relative; z-index: 1;
  display: block;
  width: min(100%, 600px); height: auto;
  margin: var(--space-40) auto 0;
}

@media (min-width: 901px) {
  .company-hero { padding-bottom: var(--section-pad-y); }
  .company-hero__text { width: 50%; }
  .company-hero__circle { width: 1001px; }
  .company-hero__portrait {
    position: absolute; right: 0; bottom: 0;
    width: 49.3%;                            /* 670px of the 1360px frame */
    margin: 0;
  }
}


/* ---------- Stats ----------
   A Green band with three figures: a 10px Black square, the number (H2),
   and a short label (H5). 20px padding.

   From the 3-column tablet up: three cells side by side, divided by 1px
   Black lines 70px tall. Each figure is centered in its cell, at least 20px
   from the lines. When a cell gets too narrow for the number and label side
   by side, the label drops below the number instead of running into a line.

   Below that (Sam's stacked design): one row per figure, divided by 1px
   Black lines running between the rows. The square and number on the left;
   the label in a column starting 60% across. "Contracts Won" sits on one
   line here. */

.stats {
  padding: var(--space-20) var(--section-pad-x);
  background: var(--color-green);
}
.stats__list { margin: 0; padding: 0; list-style: none; }
.stats__value {
  display: inline-flex; align-items: center; gap: var(--space-8);
  white-space: nowrap;
}
.stats__value::before {
  content: ""; flex: none;
  width: 10px; height: 10px;
  background: var(--color-black);
}

/* Stacked */
.stats__list li {
  display: grid; grid-template-columns: 3fr 2fr; align-items: center;
  column-gap: var(--space-16);
  padding-block: var(--space-24);
}
.stats__list li:first-child { padding-top: var(--space-8); }
.stats__list li:last-child { padding-bottom: var(--space-8); }
.stats__list li + li { border-top: var(--line-width) solid var(--color-black); }
.stats__wide-break { display: none; }

/* Side by side */
@media (min-width: 811px) {
  .stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats__list li,
  .stats__list li:first-child,
  .stats__list li:last-child {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 4px var(--space-16);
    min-height: 70px;
    padding: var(--space-8) var(--space-20);
    border-inline: var(--line-width) solid var(--color-black);
  }
  .stats__list li + li { border-top: 0; border-left: 0; }   /* neighbors share one line */
  .stats__wide-break { display: inline; }
}


/* ---------- Mission ----------
   Heading in columns 1–6; the statement (two paragraphs in the Statement
   style, 40px Medium on desktop, 24px apart)
   in columns 7–12. Below the 3-column tablet they stack, 40px apart. */

.mission { display: grid; gap: var(--space-40); }
.mission__statement { display: grid; gap: var(--space-24); }

@media (min-width: 811px) {
  .mission { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}


/* ---------- Leadership ----------
   Heading, then a grid of leader cards with the Careers card (from
   sections.css) filling the rest of the last row, 20px apart.
   Desktop: four cards per row; Careers spans two.
   3-column tablet: three per row; Careers spans the row.
   Small tablet: two per row; Careers spans the row. Mobile: one per row.

   Leader card: the headshot (square) on Smoke, then a Light Gray body with
   the name (H3) and the title in Text Gray, 24px apart, and a "Read Bio"
   link at the bottom (at least 24px below the title), with 20px padding. */

.leader-grid {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  margin: var(--space-60) 0 0; padding: 0; list-style: none;
}
.leader-grid__careers { grid-column: 1 / -1; }

@media (min-width: 901px) {
  .leader-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leader-grid__careers { grid-column: span 2; }
}

.leader-card {
  display: flex; flex-direction: column;
  border: var(--line-width) solid var(--color-line);
}
.leader-card__photo {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-smoke);
  border-bottom: var(--line-width) solid var(--color-line);
}
.leader-card__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24);
  padding: var(--space-20);
  background: var(--color-light-gray);
}
.leader-card__title { color: var(--color-text-muted); }
.leader-card__body .text-link { margin-top: auto; }   /* Read Bio lines up along the bottom of every card */


/* ---------- Bio popup ----------
   One <dialog> per person, opened by that card's "Read Bio" link (site.js).
   Light Gray, with the headshot on Smoke. The page behind is blurred.
   Closes with the Close button, the Escape key, or a click outside the box;
   focus returns to the link that opened it.

   600px and up: a centered box up to 900px wide. The headshot (381 × 492 at
   full size, inset 20px) keeps its proportions and sits at the top, so a
   long bio never squeezes it; beside it, centered when there's room: name
   (H3), role in Text Gray, a line, the bio, and a Contact Us button, 24px
   apart. A 32px X in the top-right corner.

   Below 600px: full screen. "Close ×" at the top right stays in view while
   the bio scrolls. Below it, the headshot (2:3) on the left; on the right,
   the name (large, Bold), the role, and the Contact Us button at the bottom.
   Then a line and the bio across the full width.

   Without JavaScript, the bios are shown on the page below the cards. */

.bio {
  width: 100%; max-width: none;
  height: 100%; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: var(--color-light-gray);
  color: var(--color-text);
  overflow-y: auto;
}
.bio::backdrop {
  background: rgb(240 240 238 / 0.4);           /* Light Gray at 40% */
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
body:has(.bio[open]) { overflow: hidden; }
.bio:focus { outline: none; }                    /* the popup itself takes focus when opened by tap or click */       /* the page stays put behind the popup */

.bio__photo {
  grid-area: photo;
  width: 100%; height: auto;
  object-fit: cover; object-position: center 20%;
  background: var(--color-smoke);
  border: var(--line-width) solid var(--color-line);
}
.bio__head { grid-area: head; }
.bio__role { margin-top: var(--space-16); color: var(--color-text-muted); }
.bio__copy { grid-area: copy; }
.bio__button { grid-area: button; justify-self: start; }

/* Close: "Close ×" as a text link below 600px; a 32px X from 600px */
.bio__close {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 0 0 4px;
  border: 0; border-bottom: var(--line-width) solid currentColor;
  background: none; color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
  cursor: pointer;
}
.bio__close svg { width: 14px; height: 14px; }
.bio__close path { stroke-width: 1.1; }

/* Below 600px */
.bio__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: flex-end;
  padding: var(--space-20) var(--space-20) var(--space-8);
  background: var(--color-light-gray);
}
.bio__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "photo head"
    "photo ."
    "photo button"
    "copy  copy";
  column-gap: var(--space-20);
  padding: var(--space-16) var(--space-20) var(--space-40);
}
.bio__photo { aspect-ratio: 2 / 3; }
.bio__name {
  font-family: var(--font-sans);
  font-size: clamp(28px, 10vw - 6px, 56px);      /* sized so the longest surname fits its column */
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bio .bio__button { min-width: 0; max-width: 100%; }   /* fits its column on the narrowest screens */
.bio__copy {
  margin-top: var(--space-20);
  padding-top: var(--space-40);
  border-top: var(--line-width) solid var(--color-line);
}

@media (min-width: 600px) {
  .bio {
    width: min(900px, 100% - 2 * var(--space-40));
    height: fit-content;                          /* as tall as its content, centered */
    max-height: calc(100dvh - 2 * var(--space-40));
    margin: auto;
    border: var(--line-width) solid var(--color-line);
  }
  .bio__bar { position: absolute; top: var(--space-16); right: var(--space-16); padding: 0; background: none; }
  .bio__close { padding: 6px; border: 0; }        /* a 44px tap target around the X */
  .bio__close-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bio__close svg { width: 32px; height: 32px; }
  .bio__close path { stroke-width: 1.5; }

  .bio__inner {
    grid-template-columns: minmax(0, 381fr) minmax(0, 377fr);   /* a 381px photo at the full 900px */
    grid-template-rows: 1fr auto auto auto 1fr;                  /* centers the text beside the photo */
    grid-template-areas:
      "photo ."
      "photo head"
      "photo copy"
      "photo button"
      "photo .";
    column-gap: var(--space-40);
    padding: var(--space-20) var(--space-40) var(--space-20) var(--space-20);
  }
  .bio__photo { align-self: start; aspect-ratio: 381 / 492; }
  .bio__head { padding-top: var(--space-40); }
  .bio__name {
    font-size: var(--text-h3-size);
    font-weight: var(--weight-medium);
    line-height: var(--text-h3-leading);
    letter-spacing: var(--text-h3-tracking);
  }
  .bio__role { margin-top: var(--space-24); }
  .bio__copy { margin-top: var(--space-24); padding-top: var(--space-24); }
  .bio .bio__button { min-width: 160px; margin: var(--space-24) 0 var(--space-40); }
}

@media (min-width: 811px) {
  .bio__inner { column-gap: var(--space-60); padding-right: var(--space-60); }
}

/* No JavaScript: bios appear on the page, below the cards. */
.no-js .bio {
  display: block; position: static;
  width: auto; height: auto; max-height: none;
  margin-top: var(--space-40);
  border: var(--line-width) solid var(--color-line);
}
.no-js .bio__bar { display: none; }