/* ============================================================
   About Us page — styles specific to /about/. Builds on shared
   classes in assets/css/site.css (buttons, section headers).
   ============================================================ */

/* ---------------------------------------------------------------
   Facility photo (full-bleed, no header overlay)
   --------------------------------------------------------------- */
.trs-about-photo { width: 100%; max-height: 480px; overflow: hidden; }
.trs-about-photo img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; display: block; }

/* ---------------------------------------------------------------
   Shared centered dark eyebrow (Mission / Contact CTA)
   --------------------------------------------------------------- */
.trs-about-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber-400);
}
.trs-about-eyebrow span { width: 28px; height: 3px; background: var(--amber-400); display: block; }

/* ---------------------------------------------------------------
   Mission
   --------------------------------------------------------------- */
.trs-about-mission { background: var(--graphite-900); padding: 88px var(--gutter); }
.trs-about-mission__wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.trs-about-mission__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08;
  letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0 0 32px;
}
.trs-about-mission__body { display: flex; flex-direction: column; gap: 20px; }
.trs-about-mission__body p { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--graphite-200); margin: 0; }

/* ---------------------------------------------------------------
   Facility
   --------------------------------------------------------------- */
.trs-about-facility__title { font-family: var(--font-sans); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--text-strong); margin: 0; }
.trs-about-facility__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 48px; align-items: start; }
.trs-about-facility__map { width: 100%; height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-md); display: block; }
.trs-about-facility__info {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.trs-about-facility__row { display: grid; grid-template-columns: 110px 1fr; align-items: center; padding: 14px 20px; }
.trs-about-facility__row + .trs-about-facility__row { border-top: 1px solid var(--color-divider); }
.trs-about-facility__row span { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.trs-about-facility__row strong { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.trs-about-facility__row a { color: inherit; text-decoration: none; }
.trs-about-facility__row a:hover { color: var(--brand); }

@media (max-width: 860px) {
  .trs-about-facility__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Contact CTA
   --------------------------------------------------------------- */
.trs-about-contact { background: var(--graphite-900); padding: 72px var(--gutter); }
.trs-about-contact__wrap { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.trs-about-contact__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08;
  letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0;
}
.trs-about-contact__body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--graphite-200); margin: 0; }