/* HMC federal surface — shared styles.
   Retains the approved visual system: ground/ink palette, Archivo display,
   IBM Plex Sans body. Development-only shared asset for the federal pages. */

:root {
  --ground:    #fbfaf8;
  --surface:   #ffffff;
  --ink:       #191713;
  --secondary: #63615c;
  --rule:      #e5e2db;
  --accent:    #a53f22;
  --display: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body: "IBM Plex Sans", sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); line-height: 1.62; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; }

/* Longhand only. A padding shorthand here would override the vertical
   padding on any <section> that also carries .wrap. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section.wrap { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 5.5rem); }

/* ---- Header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.top img { height: clamp(56px, 6vw, 84px); width: auto; }
.top__alt {
  font-family: var(--display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  color: var(--secondary); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
}
.top__alt:hover { color: var(--ink); }

/* ---- Type ---- */
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 1.4rem; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); max-width: 22ch; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); max-width: 26ch; }
h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.22; margin: 0 0 0.85rem; }
p { margin: 0 0 1.1rem; max-width: 62ch; }
.kicker {
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--secondary);
  margin: 0 0 1.6rem;
}
.kicker::before { content: ""; width: 0.55em; height: 0.55em; background: #a53f22; flex: 0 0 auto; }
.lede { font-size: clamp(1rem, 1.35vw, 1.14rem); }

/* ---- Agency identity strip ---- */
.agency-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.6rem; }
.agency-id__abbr { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.01em; }
.agency-id__name { color: var(--secondary); font-size: 0.95rem; }
.agency-id__focus {
  display: block; font-family: var(--display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--secondary);
  margin: 0 0 1.75rem;
}

/* ---- Buttons ---- */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.75rem 1.5rem; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--ink); transition: background 240ms ease, color 240ms ease;
}
.btn--solid { background: var(--ink); color: var(--ground); }
.btn--solid:hover { background: #2c2822; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }

/* ---- Bullet lists ---- */
.bullets { margin: 0 0 1.1rem; padding-left: 1.15rem; max-width: 68ch; }
.bullets li { margin-bottom: 0.55rem; }
.bullets li::marker { color: var(--secondary); }

/* ---- Paired boundary / partner cards ---- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.25rem; }
.card { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.2rem); }
.card--edge { border-left: 3px solid var(--accent); }
.card__k {
  display: block; font-family: var(--display); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--secondary); margin-bottom: 0.9rem;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .bullets { font-size: 0.94rem; }
.card p { font-size: 0.94rem; max-width: none; }

/* ---- Bounded-offer module ---- */
.offer { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.75rem, 3.4vw, 2.75rem); margin-top: 2.25rem; }
.offer__name { margin-bottom: 1rem; }
.offer__problem { color: var(--secondary); }
.offer__k {
  display: block; font-family: var(--display); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--secondary);
  margin: 1.5rem 0 0.7rem;
}
.offer .bullets { margin-bottom: 0; }
.offers-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
.offers-3 .offer { margin-top: 0; padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.offers-3 .offer .bullets { font-size: 0.92rem; }

/* ---- Numbered steps (hub) ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
.step { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.4rem, 2.6vw, 2rem); }
.step__n {
  font-family: var(--display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 1rem;
}
.step p { font-size: 0.94rem; color: var(--secondary); margin: 0; max-width: none; }

/* ---- Agency plates (hub) ---- */
.plates { border-top: 1px solid var(--rule); margin-top: 2.75rem; }
.plate {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0.5rem 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 260ms ease, padding-left 260ms ease;
}
.plate:hover, .plate:focus-visible { background: var(--surface); padding-left: 1rem; }
.plate__abbr {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: 0.02em; white-space: nowrap;
}
.plate__body { display: grid; gap: 0.15rem; }
.plate__name {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--secondary);
}
.plate__pain { color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
.plate__go {
  font-family: var(--display); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--secondary);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5em;
}
.plate:hover .plate__go, .plate:focus-visible .plate__go { color: var(--ink); }
.plate__go span { transition: transform 260ms ease; }
.plate:hover .plate__go span { transform: translateX(4px); }

/* ---- Registration block ---- */
.creds { background: var(--surface); border: 1px solid var(--rule); }
.creds__inner { padding: clamp(1.75rem, 3.4vw, 2.75rem); }
.cred-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.75rem;
}
.cred { background: var(--surface); padding: 1.1rem 1.15rem; }
.cred__k {
  display: block; font-family: var(--display); font-weight: 600; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--secondary); margin-bottom: 0.5rem;
}
.cred__v { display: block; font-family: var(--display); font-weight: 600; font-size: 0.98rem; }
.cred__v--mono { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.naics { margin-top: 1.75rem; }
.naics__k {
  font-family: var(--display); font-weight: 600; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--secondary);
}
.naics__grid { display: grid; gap: 0.65rem; margin-top: 0.9rem; }
.naics__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; }
.naics__code { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.naics__label { color: var(--secondary); font-size: 0.92rem; }
.creds__note { margin-top: 1.75rem; margin-bottom: 0; color: var(--secondary); font-size: 0.9rem; max-width: 70ch; }

/* ---- Parent tether ---- */
.tether { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.6rem, 3vw, 2.4rem); }
.tether p { margin-bottom: 0; }
.tether a { font-weight: 600; }

/* ---- Closing CTA band ---- */
.close { text-align: center; }
.close h2, .close p { margin-left: auto; margin-right: auto; }
.close .cta-row { justify-content: center; }

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--rule); padding-top: 1.5rem; padding-bottom: 3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--body); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot__creds { text-transform: none; letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .pair, .offers-3, .steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .plate { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
  .plate__body { grid-column: 1 / -1; }
  .naics__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .foot { flex-direction: column; }
}

/* One-shot reveal. CSS plus IntersectionObserver; no third-party JavaScript. */
.rise {
  opacity: 0; transform: translateY(16px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plate, .plate__go span { transition: none; }
}


/* ==== Mission bands: one firm, ten operating atmospheres ==== */
.mission { position: relative; overflow: hidden; color: #f2eee5; background: var(--m-g, #131210); }
.mission__art { position: absolute; inset: 0; background: var(--m-art, none); background-size: var(--m-size, auto); opacity: var(--m-op, .5); pointer-events: none; }
.mission > section { position: relative; z-index: 1; }
.mission h1 { color: #f6f2e8; }
.mission .lede, .mission .agency-id__name { color: rgba(242,238,229,.82); }
.mission .kicker, .mission .agency-id__focus { color: var(--m-accent, #c9a227); }
.mission .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: #a53f22; flex: 0 0 auto; }
.mission .agency-id__abbr { color: #f6f2e8; }
.mission .btn { border-color: rgba(242,238,229,.45); }
.mission .btn--solid { background: var(--m-accent, #c9a227); border-color: var(--m-accent, #c9a227); color: #10100e; }
.mission .btn--solid:hover { filter: brightness(1.12); background: var(--m-accent, #c9a227); }
.mission .btn--ghost { color: #f2eee5; }
.mission .btn--ghost:hover { background: rgba(242,238,229,.14); color: #fff; }
.mission :focus-visible { outline-color: var(--m-accent, #c9a227); }

/* NASA: deep space, a thin orbit, a sparse starfield */
body[data-agency="nasa"] { --m-accent:#e5493d;
  --m-g: radial-gradient(120% 140% at 85% -20%, #24365f 0%, #101c3a 45%, #090f22 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='40' r='1.1' opacity='.8'/%3E%3Ccircle cx='90' cy='140' r='.7' opacity='.5'/%3E%3Ccircle cx='160' cy='60' r='1.4' opacity='.9'/%3E%3Ccircle cx='240' cy='190' r='.8' opacity='.45'/%3E%3Ccircle cx='320' cy='90' r='1.1' opacity='.7'/%3E%3Ccircle cx='380' cy='250' r='.7' opacity='.5'/%3E%3Ccircle cx='60' cy='300' r='1' opacity='.6'/%3E%3Ccircle cx='200' cy='330' r='.8' opacity='.5'/%3E%3Ccircle cx='300' cy='380' r='1.2' opacity='.75'/%3E%3Ccircle cx='120' cy='230' r='.6' opacity='.4'/%3E%3Ccircle cx='350' cy='170' r='.6' opacity='.4'/%3E%3Ccircle cx='40' cy='390' r='.9' opacity='.55'/%3E%3C/g%3E%3Cellipse cx='210' cy='210' rx='195' ry='75' fill='none' stroke='white' stroke-opacity='.08' transform='rotate(-16 210 210)'/%3E%3C/svg%3E");
  --m-size: 420px 420px; --m-op:.8; }

/* VA: dusk slate with quiet vertical banners */
body[data-agency="va"] { --m-accent:#c8874e;
  --m-g: linear-gradient(160deg, #232a33 0%, #171d26 55%, #10141b 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg stroke='white' stroke-opacity='.05' stroke-width='34'%3E%3Cline x1='40' y1='0' x2='40' y2='260'/%3E%3Cline x1='150' y1='0' x2='150' y2='260'/%3E%3Cline x1='236' y1='0' x2='236' y2='260'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 260px 260px; --m-op:.9; }

/* DOT: asphalt with lane markings running through */
body[data-agency="dot"] { --m-accent:#f2b705;
  --m-g: linear-gradient(170deg, #23252a 0%, #17181c 60%, #101114 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg stroke='%23f2b705' stroke-opacity='.16' stroke-width='5' stroke-dasharray='34 46'%3E%3Cline x1='-20' y1='300' x2='360' y2='190'/%3E%3Cline x1='-20' y1='210' x2='360' y2='100'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 340px 340px; --m-op:.85; }

/* HHS: deep teal with a cardiogram line */
body[data-agency="hhs"] { --m-accent:#4fb3a1;
  --m-g: linear-gradient(165deg, #123034 0%, #0d2225 55%, #081617 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Cpath d='M0 120 H120 l14 -34 l20 66 l16 -44 h60 l12 -26 l18 52 l14 -32 H420' fill='none' stroke='%234fb3a1' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E");
  --m-size: 420px 200px; --m-op:.9; }

/* DHS: midnight with radar rings */
body[data-agency="dhs"] { --m-accent:#5c8fd6;
  --m-g: radial-gradient(130% 120% at 20% -10%, #1d2c47 0%, #131c30 50%, #0c1220 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='none' stroke='white' stroke-opacity='.06'%3E%3Ccircle cx='430' cy='90' r='70'/%3E%3Ccircle cx='430' cy='90' r='140'/%3E%3Ccircle cx='430' cy='90' r='215'/%3E%3Ccircle cx='430' cy='90' r='295'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 520px 520px; --m-op:1; }

/* DOE: dark plum with an energy glow */
body[data-agency="doe"] { --m-accent:#f28c28;
  --m-g: radial-gradient(110% 130% at 80% 115%, #4a2b12 0%, #241722 45%, #140f18 100%); --m-op:0; }

/* DOI: forest with terrain contours */
body[data-agency="doi"] { --m-accent:#c99a5b;
  --m-g: linear-gradient(160deg, #1c2a22 0%, #14201a 55%, #0d1511 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='white' stroke-opacity='.06'%3E%3Cpath d='M40 300 q80 -90 170 -60 q100 30 170 -40'/%3E%3Cpath d='M20 340 q95 -100 195 -66 q95 30 185 -50'/%3E%3Cpath d='M0 380 q110 -110 220 -72 q90 28 200 -60'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 420px 420px; --m-op:1; }

/* Navy: sea dark with running swells */
body[data-agency="don"] { --m-accent:#c9a227;
  --m-g: linear-gradient(170deg, #12253a 0%, #0c1b2b 55%, #07111c 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cg fill='none' stroke='white' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M0 40 q45 -22 90 0 t90 0 t90 0 t90 0'/%3E%3Cpath d='M0 85 q45 -22 90 0 t90 0 t90 0 t90 0'/%3E%3Cpath d='M0 130 q45 -22 90 0 t90 0 t90 0 t90 0'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 360px 140px; --m-op:.9; }

/* GSA: graphite with a procurement grid */
body[data-agency="gsa"] { --m-accent:#6ea1e8;
  --m-g: linear-gradient(165deg, #1d2026 0%, #16181d 60%, #0f1114 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='white' stroke-opacity='.05'%3E%3Cpath d='M0 .5 H160 M0 40.5 H160 M0 80.5 H160 M0 120.5 H160'/%3E%3Cpath d='M.5 0 V160 M40.5 0 V160 M80.5 0 V160 M120.5 0 V160'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 160px 160px; --m-op:1; }

/* USACE: engineered dark with levee chevrons */
body[data-agency="usace"] { --m-accent:#d64a3b;
  --m-g: linear-gradient(165deg, #202832 0%, #17202a 55%, #0f151d 100%);
  --m-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='white' stroke-opacity='.055' stroke-width='10'%3E%3Cpath d='M-10 190 L60 120 L130 190'/%3E%3Cpath d='M110 190 L180 120 L250 190'/%3E%3Cpath d='M50 90 L120 20 L190 90'/%3E%3C/g%3E%3C/svg%3E");
  --m-size: 240px 240px; --m-op:1; }

/* hub plates pick up each agency's accent */
.plate { border-left: 3px solid transparent; padding-left: .6rem; }
.plate[href="nasa/"]{border-left-color:#e5493d} .plate[href="va/"]{border-left-color:#c8874e}
.plate[href="dot/"]{border-left-color:#f2b705} .plate[href="hhs/"]{border-left-color:#4fb3a1}
.plate[href="dhs/"]{border-left-color:#5c8fd6} .plate[href="doe/"]{border-left-color:#f28c28}
.plate[href="doi/"]{border-left-color:#c99a5b} .plate[href="don/"]{border-left-color:#c9a227}
.plate[href="gsa/"]{border-left-color:#6ea1e8} .plate[href="usace/"]{border-left-color:#d64a3b}

/* locked signature line */
.sigline { font-family: var(--display); font-style: italic; font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: var(--accent); margin: 0 0 1.4rem; max-width: 40ch; line-height: 1.5; }


/* ==== Photographic mission grounds (public-domain federal imagery; provenance in Docs/VISUAL_ASSET_INVENTORY) ==== */
body[data-agency="nasa"]  .mission { background: linear-gradient(160deg, rgba(20,30,58,.84), rgba(9,15,34,.93)), url("../assets/img/mission-nasa.jpg?v=250825") center/cover no-repeat; }
body[data-agency="va"]    .mission { background: linear-gradient(160deg, rgba(30,36,45,.87), rgba(16,20,27,.94)), url("../assets/img/mission-va.jpg?v=250825") center 30%/cover no-repeat; }
body[data-agency="hhs"]   .mission { background: linear-gradient(160deg, rgba(14,40,44,.86), rgba(8,22,23,.94)), url("../assets/img/mission-hhs.jpg?v=250825") center/cover no-repeat; }
body[data-agency="dhs"]   .mission { background: linear-gradient(160deg, rgba(22,34,56,.85), rgba(12,18,32,.93)), url("../assets/img/mission-dhs.jpg?v=250825") center/cover no-repeat; }
body[data-agency="doi"]   .mission { background: linear-gradient(160deg, rgba(24,36,29,.82), rgba(13,21,17,.92)), url("../assets/img/mission-doi.jpg?v=250825") center/cover no-repeat; }
body[data-agency="don"]   .mission { background: linear-gradient(160deg, rgba(15,32,52,.84), rgba(7,17,28,.93)), url("../assets/img/mission-don.jpg?v=250825") center 60%/cover no-repeat; }
body[data-agency="gsa"]   .mission { background: linear-gradient(160deg, rgba(26,29,36,.86), rgba(15,17,20,.94)), url("../assets/img/mission-gsa.jpg?v=250825") center/cover no-repeat; }
body[data-agency="usace"] .mission { background: linear-gradient(160deg, rgba(28,36,46,.85), rgba(15,21,29,.93)), url("../assets/img/mission-usace.jpg?v=250825") center/cover no-repeat; }

body[data-agency="dot"]   .mission { background: linear-gradient(160deg, rgba(30,32,38,.85), rgba(16,17,20,.93)), url("../assets/img/mission-dot.jpg?v=250825") center 40%/cover no-repeat; }
body[data-agency="doe"]   .mission { background: linear-gradient(160deg, rgba(58,36,16,.82), rgba(20,15,24,.93)), url("../assets/img/mission-doe.jpg?v=250825") center/cover no-repeat; }