/*
 * about.css — page-scoped styles for about.html
 * DO NOT modify css/style.css from this file.
 * Tokens defined in css/style.css; this sheet only overrides / extends.
 */

/* ============================================================
   HERO
   ============================================================ */

/* Full-bleed background-photo hero, mirroring .hero--home on the home page.
   about.html doesn't load index.css, so the bg + wash rules live here.
   The base .hero / .hero--dark rules come from css/style.css. */
.hero--home { color: var(--c-on-dark); }
.hero--home h1 { color: var(--c-on-dark); }
.hero--home .hero__eyebrow { color: var(--c-accent); }
.hero--home .hero__sub { color: var(--c-on-dark); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Light navy wash, darker on the text side to keep the headline legible */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(7, 19, 35, 0.78) 0%,
    rgba(7, 19, 35, 0.50) 52%,
    rgba(7, 19, 35, 0.24) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
}

/* Logo stands in for the H1 — sized to the headline's optical weight */
.about-hero__logo {
  margin: 0;
  line-height: 0;
}
.about-hero__logo img {
  display: block;
  width: clamp(448px, 61vw, 832px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}

/* Placeholder styling — carries real asset dimensions to prevent CLS */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-ink-3);
  text-align: center;
  padding: 1rem;
}

/* ============================================================
   WHO WE ARE
   ============================================================ */

.about-who {
  padding-block: var(--section-pad);
  background: var(--c-bg-alt);
}

.about-who__lead {
  font-size: var(--t-lead);
  color: var(--c-ink);
  margin-block-end: 1.25rem;
}

/* ============================================================
   BY THE NUMBERS — navy stat band
   ============================================================ */

.about-stats {
  padding-block: var(--section-pad);
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
}

.about-stats__eyebrow {
  color: var(--c-on-dark);
  margin-block-end: 2.5rem;
  display: block;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
}

.about-stats__item {
  border-top: 1px solid rgba(245, 245, 247, 0.15);
  padding-top: 1.5rem;
}

.about-stats__value {
  display: block;
  margin: 0;
}

.about-stats__num {
  display: block;
  font-family: var(--f-mono);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--c-on-dark);
  margin-block-end: 0.5rem;
}

.about-stats__label {
  font-size: var(--t-body);
  color: var(--c-on-dark);
  font-weight: 400;
}

/* ============================================================
   WHAT DRIVES US
   ============================================================ */

.about-mission {
  padding-block: var(--section-pad);
  background: var(--c-bg);
}

/* Mission + values: 2-column, mirrors the home About Preview layout */
.about-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.about-mission__text h2 {
  margin-block: var(--sp-2) var(--sp-4);
  text-wrap: balance;
}

.about-mission__body {
  color: var(--c-ink-2);
  margin-block-end: var(--sp-3);
}

/* Legacy mission blockquote styles — retained for any other page that may use them */
.about-mission__quote {
  margin-block: 2.5rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 3px solid var(--c-accent);
  font-size: var(--t-h2);
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: var(--w-text);
}

.about-mission__quote p {
  margin: 0;
}

.about-mission__cards-heading {
  font-size: var(--t-h3);
  font-weight: 500;
  margin-block-end: 2rem;
  text-wrap: balance;
}

.about-mission__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-mission__card {
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.about-mission__card-title {
  font-size: var(--t-body);
  font-weight: 600;
  margin-block-end: 0.75rem;
  color: var(--c-ink);
}

.about-mission__card p {
  color: var(--c-ink-2);
  margin: 0;
}

/* ============================================================
   PROSE CHAPTERS — Our Journey, Services, R&D, Ethos, Looking
   Ahead. Narrative sections with an eyebrow + h2 + lead + sub-
   sections. Two background variants — `--light` (white) and
   `--alt` (light-gray) — alternate down the page.
   ============================================================ */

.about-prose {
  padding-block: var(--section-pad);
}

.about-prose--light { background: var(--c-bg); }
.about-prose--alt   { background: var(--c-bg-alt); }

.about-prose .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.about-prose h2 {
  margin-block-end: var(--sp-3);
  text-wrap: balance;
}

.about-prose__lead {
  font-size: var(--t-lead);
  color: var(--c-ink);
  max-width: var(--w-text);
  margin-block-end: var(--sp-5);
  text-wrap: pretty;
}

.about-prose__sub {
  max-width: var(--w-text);
  margin-block-end: var(--sp-5);
}

.about-prose__sub:last-child {
  margin-block-end: 0;
}

.about-prose__sub h3 {
  font-size: var(--t-h3);
  margin-block-end: var(--sp-2);
  color: var(--c-ink);
  text-wrap: balance;
}

.about-prose__sub p {
  color: var(--c-ink-2);
  margin-block-end: var(--sp-2);
  text-wrap: pretty;
}

.about-prose__sub p:last-child {
  margin-block-end: 0;
}

/* Pillar grid — Services and Ethos cards. Background flips depending
   on the parent section so the cards always sit on the opposite tone. */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 + 1: two on the top row, the third full-width below */
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Third pillar spans the full width of the two above it, content centered and
   body capped to a readable width — matches the 2 + 1 card sections on the
   service subpages. Only in the 2-up range (below 768px the grid is 1 column). */
@media (min-width: 769px) {
  .about-pillars > .about-pillar:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .about-pillars > .about-pillar:last-child p {
    max-width: 68ch;
    margin-inline: auto;
  }
}

.about-pillar {
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.about-prose--alt .about-pillar { background: var(--c-bg); }

.about-pillar__title {
  font-size: var(--t-body);
  font-weight: 600;
  margin-block-end: 0.75rem;
  color: var(--c-ink);
}

.about-pillar p {
  color: var(--c-ink-2);
  margin: 0;
  text-wrap: pretty;
}

.about-pillar a {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Stagger card reveals */
.about-pillar.reveal:nth-child(2) { transition-delay: 60ms; }
.about-pillar.reveal:nth-child(3) { transition-delay: 120ms; }

/* ============================================================
   HISTORY — GESTURE-STEPPED MILESTONES
   Engine: js/step-scroller.js  Wiring: js/about-history.js
   ============================================================ */

.about-history {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  padding-block-start: var(--section-pad);
}

.about-history__eyebrow {
  color: var(--c-on-dark);
  margin-block-end: 1.5rem;
  display: block;
}

.about-history__heading {
  font-size: var(--t-h2);
  font-weight: 500;
  text-wrap: balance;
  max-width: 28ch;
  color: var(--c-on-dark);
  margin-block-end: var(--section-pad);
}

/* --- Stepper scaffold --- */
.about-stepper { position: relative; }

/* Pinned stage: pins below the nav for the full track scroll */
.about-stepper__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The runway: one spacer block per step. The negative margin pulls the
   runway up over the sticky stage's own flow box (one viewport tall), so
   the first step begins exactly where the stage pins — no dead-scroll zone. */
.about-stepper__track {
  margin-top: calc(-100svh + var(--nav-h));
  pointer-events: none;
}
.about-stepper__block { height: 100svh; }

.about-stepper__layout {
  width: 100%;
}

/* Step layers — stacked via grid-area so only the active one is visible.
   Three frames per layer: incoming (offset, transparent), is-active
   (settled), is-passed (drifted away). Transitions are time-based so
   content always lands fully composed regardless of scroll speed. */
.about-stepper__layers { display: grid; }

.about-stepper__layer {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.about-stepper__layer.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.about-stepper__layer.is-passed {
  opacity: 0;
  transform: translateY(-44px);
}

/* Display content inside each layer */
.about-history__display {
  max-width: 520px;
}

.about-history__year {
  font-family: var(--f-mono);
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--c-accent);
  line-height: 1;
  margin-block-end: 0.5rem;
}

.about-history__title {
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--c-on-dark);
  margin-block-end: 1rem;
}

.about-history__desc {
  font-size: var(--t-body);
  color: var(--c-on-dark);
  max-width: 36ch;
  margin-block-end: 0;
}

/* PITCO milestone shows the white wordmark in place of a year label */
.about-history__logo {
  height: clamp(2.2rem, 3.5vw, 3rem);
  width: auto;
  display: block;
  margin-block-end: 0.75rem;
}

/* Static / reduced-motion fallback */
.about-history__static {
  display: none; /* shown via @media prefers-reduced-motion and .no-js */
  padding-block: var(--section-pad);
}

/* Headings inside the history section inherit the dark-surface color */
.about-history .about-history__entry-title,
.about-history h3 {
  color: var(--c-on-dark);
}

.about-history__timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-inline-start: 2px solid rgba(245, 245, 247, 0.15);
  padding-inline-start: 2rem;
}

.about-history__entry {
  position: relative;
}

.about-history__entry::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 5px);
  top: 0.375rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-bg-dark);
}

.about-history__entry-year {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: 0.25rem;
}

.about-history__entry-title {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-on-dark);
  margin-block-end: 0.5rem;
}

.about-history__entry p {
  color: var(--c-on-dark);
  margin: 0;
  max-width: var(--w-text);
}

/* ============================================================
   LOCATIONS
   ============================================================ */

.about-locations {
  padding-block: var(--section-pad);
  background: var(--c-bg);   /* white — separates from the gray Ethos section above */
}

.about-locations__card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);   /* hairline keeps the card distinct on the white section */
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block-start: 2.5rem;
}

/* Single wide card: map fills the larger column, info sits beside it. */
.about-locations__card--feature {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
}

.about-locations__map {
  border: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.about-locations__info {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Charleston is a registered legal address only — no map. Inquiries route to
   the Dayton office, shown as a formal labeled contact block. */
.about-locations__contact {
  margin-block-start: 2rem;
}

.about-locations__contact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Legal/registration disclosure under the contact list — fine print but
   still legible. WV-registered LLC + principal address, kept small so it
   reads as a disclosure rather than headline copy. */
.about-locations__legal {
  margin-block: 1.5rem 0;
  max-width: var(--w-text);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-ink-3);
}

.about-locations__contact-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.about-locations__contact-row dt {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.about-locations__contact-row dd {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
}

.about-locations__contact-row dd a {
  color: inherit;
  text-decoration: none;
}

.about-locations__contact-row dd a:hover {
  color: var(--c-accent);
}

.about-locations__city {
  font-size: var(--t-body);
  font-weight: 600;
  margin-block-end: 0.25rem;
  color: var(--c-ink);
}

.about-locations__role {
  color: var(--c-ink-2);
  margin: 0;
}

.about-locations__detail {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-ink-2);
  margin-block-start: 0.25rem;
  margin-block-end: 0;
}

/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  padding-block: var(--section-pad);
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  text-align: center;
}

.cta-band h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  text-wrap: balance;
  margin-block: 1rem 1.25rem;
  color: var(--c-on-dark);   /* white on the dark band (the global h2 color is dark ink) */
}

.cta-band p {
  color: var(--c-on-dark);
  max-width: var(--w-text);
  margin-inline: auto;
  margin-block-end: 2.5rem;
}

/* Contact form — the same Talk-to-an-Engineer form as the other pages (submits
   to HubSpot via js/forms.js; initForms runs from main.js). The #contact band is
   dark, so labels + checkbox text are lightened; the white input fields read fine. */
.cta-form {
  margin: var(--sp-5) auto 0;
  max-width: 540px;
  text-align: left;
}
.cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cta-form__field { display: flex; flex-direction: column; gap: 7px; }
.cta-form__label {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}
.cta-form input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
}
.cta-form input::placeholder { color: var(--c-ink-3); }
.cta-form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(27, 118, 181, 0.25);
}
.cta-form__submit { width: 100%; }
.cta-form__group { border: 0; margin: 0 0 var(--sp-3); padding: 0; }
.cta-form__group legend { margin-bottom: 9px; padding: 0; }
.cta-form__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--c-on-dark);
  cursor: pointer;
}
.cta-form__check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.cta-form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.cta-form__status--ok { color: #36d399; font-weight: 600; }
.cta-form__status--error { color: #f87171; }
.cta-form__status a { color: inherit; }
@media (max-width: 560px) {
  .cta-form__row { grid-template-columns: 1fr; }
}

.eyebrow--on-dark {
  color: var(--c-on-dark);
}

/* ============================================================
   STICKY CTA BAR
   ============================================================ */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--c-bg-dark);
  border-top: 1px solid rgba(245, 245, 247, 0.1);
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out);
}

.sticky-cta.is-visible {
  transform: translateY(0);
}

.sticky-cta__text {
  font-size: var(--t-body);
  color: var(--c-on-dark);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   SCROLL REVEAL — uses foundation .reveal / .is-visible classes
   (handled by reveal.js in main.js; page CSS only adds stagger delays)
   ============================================================ */

/* Stagger delays for reveal items grouped inside a parent */
.about-stats__item.reveal:nth-child(2) { transition-delay: 60ms; }
.about-stats__item.reveal:nth-child(3) { transition-delay: 120ms; }
.about-stats__item.reveal:nth-child(4) { transition-delay: 120ms; }

.about-mission__card.reveal:nth-child(2) { transition-delay: 60ms; }
.about-mission__card.reveal:nth-child(3) { transition-delay: 120ms; }
.about-mission__card.reveal:nth-child(4) { transition-delay: 120ms; }

/* ============================================================
   RESPONSIVE — 1024px (tablet landscape)
   ============================================================ */

@media (max-width: 1024px) {
  .about-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   RESPONSIVE — 768px (tablet)
   ============================================================ */

@media (max-width: 768px) {
  .about-mission__grid {
    grid-template-columns: 1fr;
  }

  .about-mission__cards {
    grid-template-columns: 1fr;
  }

  .about-pillars {
    grid-template-columns: 1fr;
  }

  .sticky-cta__text {
    display: none;
  }

  .sticky-cta {
    justify-content: center;
  }

  /* Location card stacks: map on top, info below. */
  .about-locations__card--feature {
    grid-template-columns: 1fr;
  }

  /* History stepper stays pinned and interactive on touch (the engine handles
     swipe gestures natively). Just fit the pinned frame to a phone: full-width
     content and slightly tighter type. Only reduced-motion / no-JS fall back
     to the static timeline below. */
  .about-history__display {
    max-width: none;
  }

  .about-history__year {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .about-history__desc {
    max-width: none;
  }
}

/* ============================================================
   RESPONSIVE — 480px (mobile)
   ============================================================ */

@media (max-width: 480px) {
  .about-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   REDUCED MOTION — collapse all animation to final state
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* History stepper — engine is inert; the static timeline stands in.
     Hide the interactive stepper so the milestones don't render twice. */
  .about-stepper {
    display: none !important;
  }

  .about-history__static {
    display: block !important;
  }

  /* Sticky CTA — no slide-in */
  .sticky-cta {
    transition: none;
  }

  /* Count-up stays at final value (JS checks this flag) */
  .about-stats__num {
    transition: none;
  }
}

/* ============================================================
   NO-JS FALLBACK
   ============================================================ */

/* History stepper no-JS fallback — hide the interactive stepper (it needs JS
   to step) and show the static timeline in its place. */
.no-js .about-stepper {
  display: none;
}

.no-js .about-history__static {
  display: block;
}

.no-js .sticky-cta {
  display: none;
}

.no-js .about-stats__num::before {
  content: attr(aria-label);
}