/* ==========================================================================
   /about-us — the About page, rebuilt 2026-08-20 around the Stassney Lane
   plate set (real facility photographs, relit).

   Structure follows the "Made in Austin" study: Austin Built holds the fold,
   The Line is the spine, the rooms and people carry the second half, and the
   proof numbers close it.

   Every rule is scoped under .ab-page so global-styles/styles_v3 (which load
   on every generic page) cannot leak in — and nothing here leaks out.

   All type is sized in px, never rem: the site sets the root font-size to
   10px (the 62.5% trick), so rem values authored against the usual 16px
   shrink to 62.5% here.
   ========================================================================== */

.ab-page {
  --ab-bg: #08090b;
  --ab-panel: #0e1013;
  --ab-panel-2: #14171b;
  --ab-line: #1e232a;
  --ab-line-soft: #161a1f;
  --ab-ink: #eef1f4;
  --ab-mut: #949ca7;
  --ab-dim: #5d6772;
  --ab-red: #ea3000;
  --ab-red-dim: #8c1d00;

  --ab-disp: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --ab-body: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;
  --ab-mono: "JetBrains Mono", Consolas, monospace;

  --ab-shell: 1240px;
  --ab-pad: 26px;
  /* Real sticky-header height, written by the inline script in about.php.
     The fallback keeps the fold honest if that script never runs. */
  --ab-hdr: 92px;

  /* The global sheet sets `main { display: flex }`. Inherited here, the inner
     wrappers size to their own max-width instead of the viewport and the page
     scrolls sideways on anything narrower. This page lays itself out. */
  display: block;
  background: var(--ab-bg);
  color: var(--ab-ink);
  font-family: var(--ab-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ab-page *,
.ab-page *::before,
.ab-page *::after { box-sizing: border-box; }

.ab-page h1,
.ab-page h2,
.ab-page h3 {
  margin: 0;
  font-family: var(--ab-disp);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ab-ink);
}
.ab-page p { margin: 0; }
.ab-page img { display: block; max-width: 100%; height: auto; }

.ab-shell {
  max-width: var(--ab-shell);
  margin: 0 auto;
  padding: 0 var(--ab-pad);
}

/* Shared label idiom: condensed caps, tracked, dim. */
.ab-lab {
  font-family: var(--ab-disp);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-dim);
  line-height: 1;
}
.ab-lab--red { color: var(--ab-red); }
.ab-mono {
  font-family: var(--ab-mono);
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--ab-mut);
}

.ab-page a { color: var(--ab-red); text-decoration: none; }
.ab-page a:hover { color: #ff4a54; }
.ab-page a:focus-visible { outline: 2px solid var(--ab-red); outline-offset: 3px; }

/* ── Hero: Austin Built ─────────────────────────────────────────────────
   Fold rule (Hamza, standing): headline, lede, proof strip and address all
   sit on the first screen. The stage is sized against the real header. */
.ab-hero {
  border-bottom: 1px solid var(--ab-line);
}
.ab-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  gap: 48px;
  align-items: center;
  min-height: min(calc(100svh - var(--ab-hdr)), 760px);
  padding: 40px 0 44px;
}
@media (max-width: 940px) {
  .ab-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding: 32px 0 38px;
  }
}

.ab-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.ab-hero-copy h1 {
  font-size: clamp(46px, 6.4vw, 86px);
  letter-spacing: -0.02em;
}
.ab-hero-copy h1 em { font-style: normal; color: var(--ab-red); }
.ab-hero-lede {
  max-width: 54ch;
  font-size: 17px;
  color: var(--ab-mut);
}
.ab-hero-lede strong { color: var(--ab-ink); font-weight: 600; }

.ab-addr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ab-mono);
  font-size: 12.5px;
  color: var(--ab-mut);
  flex-wrap: wrap;
}
.ab-addr::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ab-red);
  flex: 0 0 auto;
}

.ab-hero-fig {
  margin: 0;
  border: 1px solid var(--ab-line);
  background: #000;
  line-height: 0;
  overflow: hidden;
}
.ab-hero-fig img { width: 100%; }
@media (max-width: 940px) {
  /* The plate is a 2:3 portrait; unconstrained it swallows a phone screen. */
  .ab-hero-fig img { max-height: 58vh; width: 100%; object-fit: cover; object-position: center 38%; }
}

/* Proof strip — the five claims already published on the homepage. */
.ab-proof {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ab-line);
  border: 1px solid var(--ab-line);
}
@media (max-width: 780px) { .ab-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .ab-proof { grid-template-columns: 1fr; } }

.ab-proof-cell {
  background: var(--ab-panel);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ab-proof-v {
  font-family: var(--ab-disp);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ab-proof-l {
  font-family: var(--ab-disp);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ab-dim);
  line-height: 1.3;
}

/* ── Section furniture ─────────────────────────────────────────────────── */
.ab-sec { padding: 78px 0; border-bottom: 1px solid var(--ab-line); }
.ab-sec:last-of-type { border-bottom: none; }
.ab-sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.ab-sec-head h2 { font-size: clamp(34px, 5vw, 58px); }
.ab-sec-head p { max-width: 62ch; color: var(--ab-mut); font-size: 16px; }

/* ── The Line: three stations, side by side ────────────────────
   Same card shape as the rooms grid at the foot of the page — frame on
   top, caption beneath, left aligned. Reads left to right in build order.
   The spec block is pushed to the bottom so all three line up. */
.ab-stations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .ab-stations { grid-template-columns: 1fr; gap: 34px; } }

.ab-station { display: flex; flex-direction: column; gap: 14px; }
.ab-station-fig {
  margin: 0;
  border: 1px solid var(--ab-line);
  background: #000;
  line-height: 0;
}
.ab-station-fig img { width: 100%; }

.ab-station-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.ab-station-body > div { flex: 1; }

/* Where subgrid is available, the figure / copy / spec rows are shared across
   all three cards, so the spec rules line up instead of floating with the
   length of each paragraph. The flex rules above are the fallback, and are
   what the stacked mobile layout uses. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .ab-stations { grid-template-rows: auto auto auto; }
    .ab-station {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      gap: 14px;
    }
    .ab-station-body { display: contents; }
  }
}

.ab-station-num {
  font-family: var(--ab-mono);
  font-size: 12px;
  color: var(--ab-red);
  display: block;
  margin-bottom: 6px;
}
.ab-station h3 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ab-station p { color: var(--ab-mut); font-size: 14.5px; }

.ab-station-spec {
  border-top: 1px solid var(--ab-line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab-station-spec dt {
  font-family: var(--ab-disp);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-dim);
}
.ab-station-spec dd {
  margin: 0;
  font-family: var(--ab-mono);
  font-size: 12.5px;
  color: var(--ab-ink);
  line-height: 1.55;
}

/* ── Patents ───────────────────────────────────────────────────────────── */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) { .ab-split { grid-template-columns: 1fr; gap: 28px; } }
.ab-split-fig { margin: 0; border: 1px solid var(--ab-line); background: #000; line-height: 0; }
.ab-split-copy { display: flex; flex-direction: column; gap: 18px; }
.ab-split-copy h2 { font-size: clamp(32px, 4.4vw, 50px); }
.ab-split-copy p { color: var(--ab-mut); font-size: 16px; max-width: 52ch; }
.ab-split-copy strong { color: var(--ab-ink); font-weight: 600; }

/* ── Rooms grid ────────────────────────────────────────────────────────── */
.ab-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 820px) { .ab-rooms { grid-template-columns: 1fr; } }

.ab-room { display: flex; flex-direction: column; gap: 12px; }
.ab-room figure { margin: 0; border: 1px solid var(--ab-line); background: #000; line-height: 0; }
.ab-room h3 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ab-room p { color: var(--ab-mut); font-size: 14.5px; }

.ab-hero-room { margin-bottom: 26px; border: 1px solid var(--ab-line); background: #000; line-height: 0; }

/* ── Closer: numbers over the burn-in plate ────────────────────────────── */
.ab-closer { position: relative; border-top: 1px solid var(--ab-line); background: #000; overflow: hidden; }
.ab-closer-bg { position: absolute; inset: 0; }
.ab-closer-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.ab-closer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.86) 0%, rgba(8, 9, 11, 0.72) 45%, rgba(8, 9, 11, 0.94) 100%);
}
.ab-closer-inner { position: relative; z-index: 1; padding: 84px 0; }
.ab-closer h2 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 18px; }
.ab-closer > .ab-shell > p { color: var(--ab-mut); }

.ab-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--ab-line);
  background: var(--ab-panel);
  color: var(--ab-ink) !important;
  font-family: var(--ab-disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: border-color .15s ease, background .15s ease;
}
.ab-btn:hover { border-color: var(--ab-red-dim); background: var(--ab-panel-2); color: var(--ab-ink) !important; }
.ab-btn--primary { background: var(--ab-red); border-color: var(--ab-red); color: #fff !important; }
.ab-btn--primary:hover { background: #c92900; border-color: #c92900; color: #fff !important; }

/* ── Visit band ────────────────────────────────────────────────────────── */
.ab-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .ab-visit { grid-template-columns: 1fr; gap: 26px; } }
.ab-visit figure { margin: 0; border: 1px solid var(--ab-line); background: #000; line-height: 0; }
.ab-visit-copy { display: flex; flex-direction: column; gap: 16px; }
.ab-visit-copy h2 { font-size: clamp(32px, 4.4vw, 50px); }
.ab-visit-copy p { color: var(--ab-mut); font-size: 16px; max-width: 50ch; }

.ab-contact { display: flex; flex-direction: column; gap: 1px; background: var(--ab-line); border: 1px solid var(--ab-line); }
.ab-contact-row {
  background: var(--ab-panel);
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}
@media (max-width: 520px) { .ab-contact-row { grid-template-columns: 1fr; gap: 4px; } }
.ab-contact-row dt {
  font-family: var(--ab-disp);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-dim);
}
.ab-contact-row dd { margin: 0; font-family: var(--ab-mono); font-size: 13px; color: var(--ab-ink); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ab-page *, .ab-page *::before, .ab-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}