/* =============================================================================
   Eastern States Associates — style.css
   Palette (strict): navy #002244 · blue #004f9f · light blue #5599cc
                     white #ffffff · text #111111
                     accent #f5821f — hero CTA and hero rules ONLY. The accent
                     works because it appears nowhere else; do not spread it.
   Type: Barlow Semi Condensed (headings) · Source Sans 3 (body)
   ============================================================================= */

:root {
  --navy:       #002244;
  --blue:       #004f9f;
  --lightblue:  #5599cc;
  --white:      #ffffff;
  --ink:        #111111;
  --accent:     #f5821f;   /* hero CTA + hero rules only */
  --accent-ink: #3d1e00;   /* text on an accent fill */
  --pale:       #f4f7fa;   /* section alternation */
  --slot:       #dde5ec;   /* placeholder blocks */
  --slot-line:  #b9c8d6;
  --font-head:  "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --font-body:  "Source Sans 3", Arial, Helvetica, sans-serif;
  --radius:     10px;
  --shadow:     0 2px 14px rgba(0, 34, 68, 0.10);
  --nav-h:      64px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
a:hover { color: var(--lightblue); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lightblue);
  margin: 0 0 0.6em;
}
.eyebrow.light { color: var(--lightblue); }
.center { text-align: center; }
.section-lead { max-width: 640px; margin: 0 auto 2.2rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white); padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--lightblue); outline-offset: 2px; }

/* ---------- Placeholder system ---------- */
.img-slot {
  background: var(--slot);
  border: 2px dashed var(--slot-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--navy);
  padding: 18px;
  width: 100%;
}
.img-slot-name {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}
.img-slot-dims { font-size: 0.85rem; opacity: 0.75; }
.img-slot-desc { font-size: 0.8rem; opacity: 0.6; font-style: italic; }
.ph-text {
  background: rgba(85, 153, 204, 0.12);
  border-bottom: 1px dashed var(--lightblue);
  color: #3d5870;
  padding: 0 3px;
}

/* ---------- Route line motif ---------- */
.route-connector {
  width: 3px;
  height: 72px;
  margin: 0 auto;
  background: linear-gradient(var(--lightblue), var(--lightblue)) center/3px 100% no-repeat;
  position: relative;
}
.route-connector::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--lightblue);
}

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  box-shadow: 0 2px 10px rgba(0, 34, 68, 0.35);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: var(--nav-h);
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { max-height: 40px; }
.nav-brand-mark {
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
  color: var(--white);
  border: 2px solid var(--lightblue); border-radius: 6px;
  padding: 1px 8px;
}
.nav-brand-name {
  color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--white); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 8px 11px; border-radius: 6px;
}
.nav-links a:hover { background: rgba(85, 153, 204, 0.22); color: var(--white); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.portal-icon {
  display: flex;                    /* discreet icon, all screen sizes */
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
}
.portal-icon svg { width: 20px; height: 20px; }
.portal-icon:hover, .portal-icon:focus { color: var(--white); background: rgba(85, 153, 204, 0.22); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--white);
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Full-screen hero. The nav is sticky and sits in normal flow, so the hero
   fills everything below it. svh (small viewport height) is used in preference
   to vh so the section is never taller than the visible area on mobile, where
   the browser's URL bar would otherwise push the bottom off-screen. The vh line
   is the fallback for browsers without svh support. */
/* --hero-trim is the vertical space taken out of the hero to make room for the
   proof strip below it. It stays at 0 until the .hero-proof markup is actually
   on the page — otherwise the hero just loses height with nothing filling it.
   Once the strip is in, set this to 96px to land the strip exactly at the fold,
   or ~170px to let the next section peek above it. */
.hero {
  --hero-trim: 0px;
  position: relative;
  min-height: max(500px, calc(100vh - var(--nav-h) - var(--hero-trim)));
  min-height: max(500px, calc(100svh - var(--nav-h) - var(--hero-trim)));
  display: flex;
  align-items: flex-start;
}
.hero-media { position: absolute; inset: 0; }
/* The hero image is wrapped in <picture> (added 2026-09-09 so phones can be
   served their own portrait file). <picture> is an inline box by default,
   which would leave the img's height: 100% below with nothing to resolve
   against and collapse the photo. Making the wrapper a full-size block keeps
   the img sizing exactly as it was before the wrapper existed. */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media .hero-slot { height: 100%; border-radius: 0; border: 0; }
/* object-position pulls the crop UP so clean sky sits behind the top-left text
   block. Pushing it down (values above ~45%) raises the horizon and puts the
   tree line and the tank directly behind the headline. */
.hero-media .slot-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 34%;
  filter: contrast(1.10) saturate(1.20) brightness(1.05);
}
/* Top-down scrim. It reads as an extension of the navy nav rather than a panel
   dropped onto the photo, and it leaves the bottom two-thirds of the image —
   the tank and the dirt — completely untouched. */
/* A single soft ellipse anchored over the top-left text block, fading to fully
   transparent. Everything outside it — the tank, the trees, the dirt, the sky
   on the right — is untouched photo. The falloff is deliberately long; tighten
   the stops and it starts to read as a smudge on the sky rather than light.
   If the text block grows, widen the ellipse, don't darken it. */
.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 64% at 16% 26%,
    rgba(0, 14, 32, 0.60) 0%,
    rgba(0, 18, 40, 0.50) 28%,
    rgba(0, 22, 46, 0.30) 52%,
    rgba(0, 26, 54, 0.12) 74%,
    rgba(0, 0, 0, 0) 100%);
}
/* Padding matches .section-inner's 24px gutter, but the hero container is
   wider than the site's 1200px column so the headline sits closer to the left
   edge — a deliberate break for the full-bleed hero only. Do NOT add extra
   left padding on top of the centered column; that offsets the text off the
   grid and reads as left-of-center on a wide screen. */
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1600px; margin: 0 auto;
  padding: clamp(44px, 9vh, 96px) 24px clamp(40px, 8vh, 88px);
  text-align: left;
  color: var(--white);
}
.hero-content h1 { color: var(--white); max-width: 26ch; margin-bottom: 0.3em; }
/* The eyebrow is the only place the accent appears in type. */
.hero-content .eyebrow { color: var(--accent); }
.hero-tagline {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.25rem; letter-spacing: 0.06em;
  color: var(--white); margin: 0 0 0.9em;
}
.hero-intro { max-width: 44ch; margin: 0 0 1.5em; opacity: 0.92; }

/* ---------- Hero proof strip ---------- */
/* A sibling of .hero, not a child — it sits in normal flow directly beneath,
   so the hero needs no layout changes to accommodate it. Markup pattern:
   <section class="hero-proof"><div class="hero-proof-inner">
     <div class="hero-proof-item"><span class="hero-proof-num">71</span>
       <span class="hero-proof-label">Years</span></div> ... </div></section> */
.hero-proof {
  background: var(--navy);
  border-top: 3px solid var(--accent);
}
.hero-proof-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero-proof-item {
  padding: 18px 14px;
  text-align: center;
  border-right: 1px solid rgba(85, 153, 204, 0.28);
}
.hero-proof-item:last-child { border-right: 0; }
.hero-proof-num {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.9rem; line-height: 1.1;
  color: var(--white);
}
.hero-proof-label {
  display: block; margin-top: 3px;
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lightblue);
}
.hero-logo { max-height: 90px; margin: 0 auto 18px; }
.hero-logo-slot { max-width: 300px; margin: 0 auto 20px; padding: 14px; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: var(--white); }
.hero-content .ph-text { color: #cfe3f3; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }

.btn {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem;
  padding: 13px 28px; border-radius: 999px; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Hero CTA pair: one accent-filled primary, one ghost secondary. The accent
   button is the only solid orange element on the page — that is what makes it
   the thing the eye lands on. Do not reuse .btn-accent elsewhere.
   Border width on the outline variant is absorbed by 2px less padding so both
   buttons sit at the same height, same as the navy pair below. */
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #ff9433; color: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline-light {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.7); padding: 11px 26px;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); border-color: var(--white); transform: translateY(-2px); }

/* Navy variants, for buttons on a light background. .btn-light is white-on-navy
   and is meant for the dark hero; these are its counterparts for white sections
   (currently the 404 page). Border width on the outline variant is absorbed by
   a 2px smaller padding so both buttons sit at the same height. */
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-navy-outline {
  background: transparent; color: var(--navy);
  border: 2px solid var(--navy); padding: 11px 26px;
}
.btn-navy-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
/* Scoped to .btn-row so the existing hero buttons keep their current layout. */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 420px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { text-align: center; }
}

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section.alt { background: var(--pale); }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-inner.narrow { max-width: 760px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-media .img-slot { aspect-ratio: 9 / 7; }
/* Real image in a split slot: show the whole frame, never crop.
   Added 2026-08-04 for the What We Offer product composite (square). */
.split-media .slot-img { width: 100%; height: auto; border-radius: var(--radius); }
.split.reverse .split-text { order: 2; }
.split.reverse .split-media { order: 1; }

/* ---------- Manufacturer slideshow ---------- */
/* Crossfading banner, ported from the legacy homepage rotator. */
.mfr-slideshow {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 2.2rem auto 2.8rem;
  aspect-ratio: 960 / 229;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
}
.mfr-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.mfr-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mfr-slide { transition: none; }
}

/* ---------- Manufacturers ---------- */
.manufacturers { background: var(--pale); }
.mfr-group { margin-top: 2.6rem; }
.mfr-group-head { display: flex; align-items: center; gap: 18px; margin-bottom: 1.2rem; }
.mfr-group-head h3 {
  font-size: 1.6rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}
.mfr-group-rule { flex: 1; height: 3px; background: var(--lightblue); border-radius: 2px; opacity: 0.5; }
.mfr-category { margin: 1.4rem 0 2rem; }
.mfr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.mfr-tile {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.mfr-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0, 34, 68, 0.18); }
.mfr-tile img { max-height: 70px; object-fit: contain; }
.mfr-logo-slot { text-align: center; }
.mfr-name {
  display: block;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--navy); letter-spacing: 0.02em;
}
.mfr-slot-note {
  display: block; margin-top: 5px;
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--slot-line); text-transform: uppercase;
}
.mfr-ext {
  position: absolute; top: 8px; right: 10px;
  color: var(--lightblue); opacity: 0.6;
}
.mfr-ext svg { width: 14px; height: 14px; }
.mfr-tbd {
  background: transparent;
  border: 2px dashed var(--slot-line);
  box-shadow: none;
  flex-direction: column; gap: 3px;
}
.mfr-tbd-label {
  font-family: var(--font-head); font-weight: 600; color: var(--slot-line);
  letter-spacing: 0.06em;
}
.mfr-tbd-sub { font-size: 0.68rem; color: var(--slot-line); }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: 2.5rem; }
.timeline::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; margin-left: -1.5px;
  background: var(--lightblue);
  border-radius: 2px;
}
.tl-item { position: relative; width: 50%; padding: 0 40px 44px; }
.tl-left  { left: 0; text-align: right; }
.tl-right { left: 50%; }
.tl-dot {
  position: absolute; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 4px solid var(--blue);
}
.tl-left  .tl-dot { right: -9.5px; }
.tl-right .tl-dot { left: -9.5px; }
.tl-year {
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: var(--lightblue); letter-spacing: 0.05em;
}
.tl-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: inline-block;
  text-align: left;
  max-width: 100%;
}
.tl-slot { aspect-ratio: 4 / 3; margin-top: 14px; }
/* Real photo in a timeline card: show the whole frame, never crop.
   esa_img_slot() puts the .tl-slot class on the real <img> too, so the 4/3
   placeholder ratio above would otherwise stretch the photo — reset it here.
   Added 2026-08-04 for the 1955 founder photo. */
.tl-card .slot-img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--radius); margin-top: 14px; }

/* ---------- Contact ---------- */
.contact { background: var(--navy); padding-bottom: 8px; }
.contact h2, .contact h3 { color: var(--white); }
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 2rem;
}
.contact-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(85, 153, 204, 0.35);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  color: var(--white);
}
.contact-card svg { width: 26px; height: 26px; color: var(--lightblue); margin-bottom: 8px; }
.contact-card a { color: var(--lightblue); }
.contact-card .ph-text { color: #cfe3f3; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.contact .eyebrow { color: var(--lightblue); }

/* ---------- Sub-page hero ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 30%, var(--blue) 100%);
  padding: 72px 0 56px;
  color: var(--white);
}
.page-hero h1 { color: var(--white); }
.page-hero-lead { max-width: 640px; opacity: 0.92; }
.page-hero-tall { min-height: 460px; display: flex; align-items: center; }
.page-hero-tall .section-inner { width: 100%; }
.page-hero .ph-text { color: #cfe3f3; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

/* Photo variant of the sub-page hero. Add .page-hero-photo alongside
   .page-hero and set ONLY the image inline:
     style="background-image: url('img/hero/whatever.jpg');"
   The scrim lives here, not in the markup, so every sub-page hero gets the
   same treatment. Never put a full-frame tint back into the inline style —
   a navy-and-blue wash over the whole frame is what flattened these images
   to a single colour. The double class beats plain .page-hero, whose
   background shorthand would otherwise reset the colour under the image.

   The scrim is a horizontal band: clear at both edges, tinted through the
   middle where the text sits. The variables below are the tuning knobs;
   override them on a per-page class when an image needs a different band.
     --scrim-in / --scrim-out     where the band holds full strength
     --scrim-start / --scrim-end  where it begins and finishes fading
     --scrim-alpha                how dark the band gets
   Defaults suit the engineer-resources composite: clear over the canopy on
   the left and the tanks on the right, tinted across the blueprint.

   --hero-ratio should match the source image's real pixel dimensions. With it
   set, the hero's height follows the image and background-size: cover has
   nothing left to crop; a wrong ratio is what slices the top and bottom off a
   wide banner. The min-height below is a floor for narrow screens, where the
   ratio alone would leave the hero too short for its text. */
.page-hero.page-hero-photo {
  --scrim-start: 10%;
  --scrim-in:    17%;
  --scrim-out:   66%;
  --scrim-end:   84%;
  --scrim-alpha: 0.70;
  --hero-ratio:  1920 / 520;
  position: relative;
  aspect-ratio: var(--hero-ratio);
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
}
.page-hero.page-hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 18, 40, 0) var(--scrim-start),
    rgba(0, 18, 40, var(--scrim-alpha)) var(--scrim-in),
    rgba(0, 18, 40, var(--scrim-alpha)) var(--scrim-out),
    rgba(0, 18, 40, 0) var(--scrim-end));
}
/* Lifts the text above the ::before scrim. */
.page-hero.page-hero-photo > * { position: relative; z-index: 1; }
.page-hero-tall.page-hero-photo { min-height: 460px; }

/* ---------- Team ---------- */
/* Same eight-column trick as .spec-hub-grid: each card spans TWO columns, so
   desktop still reads as 4 across, but a short row can start on an odd column
   and sit centered over the gaps of the row beneath. team.php emits the
   .team-card-start-N class onto the first card of each short row. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 26px;
}
.team-grid > .team-card { grid-column: span 2; }
@media (min-width: 861px) {
  /* MUST set start and span in ONE grid-column declaration — setting only the
     start would wipe the span above and collapse the card to one column. */
  .team-grid > .team-card-start-2 { grid-column: 2 / span 2; }  /* 3-wide row */
  .team-grid > .team-card-start-3 { grid-column: 3 / span 2; }  /* 2-wide row */
  .team-grid > .team-card-start-4 { grid-column: 4 / span 2; }  /* 1-wide row */
}
/* Below 861px the centering is dropped and cards simply flow: 4 columns = 2
   across, 2 columns = 1 across. The start classes live inside the min-width
   query above, so they stop applying here automatically. */
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.team-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.team-card .team-slot { aspect-ratio: 1 / 1; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.team-card .slot-img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.team-card-body { padding: 18px 20px 22px; }
.team-card h3 { margin-bottom: 0.15em; }
.team-title { font-weight: 600; color: var(--blue); margin: 0 0 2px; }
.team-territory {
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lightblue); margin: 0 0 10px; font-family: var(--font-head); font-weight: 600;
}
.team-contact { font-size: 0.95rem; margin: 0 0 10px; }
.team-bio { font-size: 0.95rem; margin: 0; }

/* ---------- Resources ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.res-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 20px;
}
.res-card h2 { font-size: 1.25rem; padding-bottom: 10px; border-bottom: 3px solid var(--pale); }
.res-list { list-style: none; margin: 12px 0 0; padding: 0; }
.res-list li { padding: 7px 0; border-bottom: 1px solid var(--pale); font-size: 0.98rem; }
.res-list li:last-child { border-bottom: 0; }
.res-list a { text-decoration: none; font-weight: 600; }
.res-list a:hover { text-decoration: underline; }
.res-list svg { width: 12px; height: 12px; opacity: 0.6; }

/* Text-only spec entries (a product line with no downloadable spec sheet).
   Styled to read as finished content — same weight as a linked entry, minus
   the link colour and the external-link icon. Never use .ph-text here. */
.res-item { display: block; }
.res-item-name { font-weight: 600; color: var(--ink); }
.res-item-desc { display: block; font-size: 0.9rem; color: #55636f; margin-top: 2px; }

/* ---------- Portal stub ---------- */
.portal-stub {
  background: var(--pale);
  border: 2px dashed var(--slot-line);
  border-radius: var(--radius);
  padding: 30px 28px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--white); margin-top: 0; }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 44px 24px 26px;
  display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 28px;
  align-items: start;
}
.footer-mark {
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  border: 2px solid var(--lightblue); border-radius: 6px; padding: 2px 9px;
}
.footer-tag { margin: 12px 0 0; opacity: 0.85; font-size: 0.95rem; }
.footer-contact p { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 9px; font-size: 0.95rem; }
.footer-contact svg { width: 17px; height: 17px; color: var(--lightblue); flex-shrink: 0; margin-top: 3px; }
.footer-contact a { color: var(--lightblue); }
.footer-social { display: flex; gap: 10px; justify-content: flex-end; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); background: rgba(85, 153, 204, 0.18);
}
.footer-social a:hover { background: var(--blue); color: var(--white); }
.footer-social svg { width: 18px; height: 18px; }
.footer-base {
  border-top: 1px solid rgba(85, 153, 204, 0.3);
  max-width: 1200px; margin: 0 auto;
  padding: 16px 24px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 0.85rem; opacity: 0.8;
}
.footer-base p { margin: 0; }
.footer-portal { color: var(--lightblue); text-decoration: none; }
.footer-portal:hover { text-decoration: underline; }
.site-footer .ph-text { color: #cfe3f3; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

.footer-links {
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  border-top: 1px solid rgba(85, 153, 204, 0.3);
}
.footer-links summary {
  cursor: pointer; list-style: none;
  padding: 14px 0; font-size: 0.85rem; font-weight: 700;
  color: var(--lightblue); letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 7px;
}
.footer-links summary::-webkit-details-marker { display: none; }
.footer-links summary::before { content: '\25B8'; font-size: 0.75em; transition: transform 0.2s ease; display: inline-block; }
.footer-links[open] summary::before { transform: rotate(90deg); }
.footer-links-grid {
  display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 24px 32px;
  padding: 0 0 26px;
}
.footer-links-grid h4 {
  margin: 0 0 10px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--white); opacity: 0.85;
}
.footer-links-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links-grid li { font-size: 0.83rem; }
.footer-links-grid a { color: var(--lightblue); text-decoration: none; opacity: 0.9; }
.footer-links-grid a:hover { text-decoration: underline; opacity: 1; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .mfr-tile { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split, .split.reverse { grid-template-columns: 1fr; gap: 26px; }
  .split.reverse .split-text { order: 1; }
  .split.reverse .split-media { order: 2; }
  .contact-grid { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-social { justify-content: flex-start; }
  .footer-links-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Timeline collapses to single left rail */
  .timeline::before { left: 10px; margin-left: 0; }
  .tl-item, .tl-left, .tl-right { width: 100%; left: 0; text-align: left; padding: 0 0 36px 40px; }
  .tl-left .tl-dot, .tl-right .tl-dot { left: 3px; right: auto; }
}

@media (max-width: 820px) {
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy);
    flex-direction: column; align-items: stretch;
    padding: 8px 14px 16px;
    display: none;
    box-shadow: 0 10px 18px rgba(0, 34, 68, 0.35);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 12px; font-size: 1.05rem; }
  .nav-toggle { display: flex; }
  .nav-brand-name { display: none; }
  /* MOBILE HERO — photo band, text panel below (2026-09-09).
     Replaces the earlier floating-card treatment. Every hero-quality photo we
     have is a wide landscape shot of a tank; cropping one to a portrait phone
     screen left a sliver of cylinder with no subject in it. So on phones the
     hero stops being a full-height photo with text floating on top. The photo
     runs full width at its OWN aspect ratio — nothing cropped, nothing
     upscaled — and the navy panel sits directly underneath it in normal flow.
     Desktop is untouched; everything here is inside the 820px query. */
  .hero {
    --hero-trim: 0px;
    display: block;
    min-height: 0;
  }
  .hero-media { position: static; }
  /* Pinned to the dimensions of img/hero/tank-lift-mobile.jpg (1170x527).
     A different-shaped photo needs this changed to match, or object-fit: cover
     will crop it to this ratio. */
  .hero-media picture,
  .hero-media .hero-slot {
    height: auto;
    aspect-ratio: 1170 / 527;
  }
  .hero-media .slot-img { object-position: center center; }
  /* The scrim existed to hold text off the photo. Nothing sits on the photo
     any more, so it goes entirely rather than just losing its background. */
  .hero-overlay { display: none; }
  /* Full-bleed panel rather than an inset card — it reads as one block with
     the photo above it. For the previous rounded inset look, restore
     margin: 0 12px 16px, the border, border-radius: 12px and the shadow. */
  .hero-content {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 20px 22px 24px;
    background: #001a36;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-content h1 {
    max-width: none;
    font-size: clamp(1.75rem, 8vw, 2.3rem);
    line-height: 1.06;
    margin-bottom: 0.25em;
  }
  .hero-tagline { font-size: 0.98rem; letter-spacing: 0.04em; margin: 0 0 1em; }
  /* Hidden so the card stays compact — this is the tallest element and the
     least load-bearing. Delete this line to bring the paragraph back; the card
     will grow by roughly four lines. */
  .hero-intro { display: none; }
  .hero-content .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }
  .hero-proof-inner { grid-template-columns: repeat(2, 1fr); }
  .hero-proof-item:nth-child(2) { border-right: 0; }
  .hero-proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(85, 153, 204, 0.28); }
  .section { padding: 52px 0; }
}

/* ---------- Hub landing boxes (ESA-SFRC + Engineer Resources) ---------- */
.rc-landing { max-width: 1500px; margin: 0 auto; padding: 0 16px; text-align: center; }

/* ---------- Engineer Resources hub — dedicated grid layout ----------
   Separate from .rc-btn (used by the ESA-SFRC portal landing) so the two
   pages can't fight over the same class.

   The grid is declared as EIGHT columns with each box spanning TWO. Visually
   that is still exactly 4 boxes across on desktop — the extra columns exist
   only so a short row can be offset by half a tile. Shifting a box's start by
   one 8th-column moves it right by exactly half a tile pitch, which is what
   centers a 3-box row over the gaps of the 4-box row beneath it.
   Only the FIRST box needs positioning; the rest auto-flow behind it and wrap
   to full rows on their own. The .spec-hub-first-N class is emitted by
   resources.php from the box count, so adding or removing boxes needs no
   change here. */
.spec-hub-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 22px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}
.spec-hub-grid > .spec-hub-box { grid-column: span 2; }
@media (min-width: 861px) {
  /* NOTE: these MUST set both start and span in one `grid-column` declaration.
     The base rule above is `grid-column: span 2`, which expands to
     grid-column-start: span 2 / grid-column-end: auto. Setting only
     `grid-column-start: 2` here would overwrite the span and leave end:auto,
     collapsing the tile to a single column — which lets a 4th tile fit onto
     the short row and breaks the whole layout. */
  /* short first row of 3 — nudge right by half a tile */
  .spec-hub-grid.spec-hub-first-3 > .spec-hub-box:first-child { grid-column: 2 / span 2; }
  /* short first row of 2 — nudge right by one full tile */
  .spec-hub-grid.spec-hub-first-2 > .spec-hub-box:first-child { grid-column: 3 / span 2; }
  /* short first row of 1 — nudge right by a tile and a half */
  .spec-hub-grid.spec-hub-first-1 > .spec-hub-box:first-child { grid-column: 4 / span 2; }
}
.spec-hub-box {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background-color: var(--navy);
  color: #ffffff;
  text-decoration: none;
  font-size: 1.05em;
  font-weight: bold;
  letter-spacing: 0.03em;
  border-radius: 6px;
  line-height: 1.3;
  border: 2px solid transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
.spec-hub-box:hover { background-color: var(--blue); color: #ffffff; border-color: var(--lightblue); }
.spec-hub-logo {
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 6px 10px;
  background: #fff; border-radius: 6px;
}
.spec-hub-logo img { display: block; height: 42px; width: auto; margin: 0 auto; }
.spec-hub-sub { display: block; font-size: 0.78em; font-weight: normal; margin-top: 10px; opacity: 0.85; line-height: 1.4; }
/* Boxes span 2 columns, so 4 columns = 2 across and 2 columns = 1 across.
   Below 861px the last-row centering is dropped and boxes simply flow. */
@media (max-width: 860px) {
  .spec-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .spec-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rc-btn-wrap { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.rc-btn {
  display: block; width: 100%; max-width: 360px;
  padding: 34px 26px; margin-bottom: 18px;
  background-color: var(--navy); color: #ffffff;
  text-decoration: none; font-size: 1.05em; font-weight: bold;
  letter-spacing: 0.03em; border-radius: 6px; line-height: 1.3;
  border: 2px solid transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation;
}
.rc-btn:hover { background-color: var(--blue); color: #ffffff; border-color: var(--lightblue); }
.rc-btn-icon { display: block; font-size: 1.9em; margin-bottom: 10px; }
.rc-btn-sub { display: block; font-size: 0.78em; font-weight: normal; margin-top: 8px; opacity: 0.85; line-height: 1.4; }
@media (min-width: 640px) {
  .rc-btn-wrap { flex-direction: row; justify-content: center; align-items: stretch; flex-wrap: wrap; }
  .rc-btn { width: 24%; max-width: 340px; margin-bottom: 0; }
}
.spec-back { margin: 0 0 18px; }
.spec-back a { text-decoration: none; font-weight: 600; }

/* ---------- Spec page additions ---------- */
.spec-card { margin-bottom: 22px; }
.spec-note { font-size: 0.9rem; color: #3d5870; margin: 4px 0 0; }
.dwg-link {
  display: inline-block; margin-left: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--blue); border: 1px solid var(--lightblue);
  border-radius: 4px; padding: 1px 7px; text-decoration: none;
}
.dwg-link:hover { background: var(--lightblue); color: #ffffff; }

/* ---------- State Regulations grid (Engineer Resources hub) ---------- */
.state-reg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1300px;
  margin: 18px auto 0;
  padding: 0 16px;
}
.state-reg-card {
  background: #ffffff;
  border: 1px solid var(--pale);
  border-radius: 6px;
  padding: 16px 18px;
}
.state-reg-card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--navy); }
.state-reg-card .res-list li { padding: 5px 0; font-size: 0.88rem; }
@media (max-width: 860px) {
  .state-reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .state-reg-grid { grid-template-columns: 1fr; }
}