@import url('tokens.css');

/* ==========================================================================
   JP Maguire Associates
   1. Reset and base      5. Sections and bands   9. Forms
   2. Layout primitives   6. The response line   10. Footer
   3. Header and nav      7. Components          11. Editorial
   4. Hero                8. Accordion           12. Responsive / motion
   ========================================================================== */

/* --- 1. Reset and base ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { overflow-x: clip; max-width: 100%; }

body {
  background: var(--c-bone);
  color: var(--t-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 44px; /* clears the fixed .dev-bar */
}

/* --- Dev/maintenance bar (fixed to bottom, pre-launch only) --------------- */
.dev-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-devbar);
  background: var(--c-ink); color: var(--t-body); font-size: 12px; letter-spacing: .5px;
  padding: 8px var(--sp-4); display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
.dev-bar strong { color: var(--c-brass); font-weight: 600; }
.dev-bar .dev-bar-icon { width: 20px; height: auto; flex-shrink: 0; }
.dev-bar-credit { opacity: .85; }
.dev-bar-credit a { color: var(--c-brass); text-decoration: underline; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
h1, h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  letter-spacing: var(--tr-head);
  line-height: var(--lh-head);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; }

p { text-wrap: pretty; }
p + p { margin-top: 1.15em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :where(a, button, summary):focus-visible { outline-color: var(--c-brass-bright); }

::selection { background: var(--c-brass); color: var(--c-ink); }

.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-brass); color: var(--c-ink);
  font-weight: 600; font-size: var(--fs-sm);
  border-radius: var(--r);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- 2. Layout primitives ------------------------------------------------- */

.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.measure-sm { max-width: var(--measure-sm); }

.band { position: relative; padding-block: var(--band-y); }
.band--lg { padding-block: var(--band-y-lg); }
.band--tight { padding-block: clamp(40px, 6vw, 72px); }

.band--bone { background: var(--c-bone); color: var(--t-ink); }
.band--stone { background: var(--c-stone); color: var(--t-ink); }
.band--white { background: var(--c-white); color: var(--t-ink); }
.band--navy { background: var(--c-navy); color: var(--t-body); }
.band--navy-deep { background: var(--c-navy-deep); color: var(--t-body); }
.band--ink { background: var(--c-ink); color: var(--t-body); }

/* Dark bands carry the key light and the grain. Both are non-animated. */
.band--navy, .band--navy-deep, .band--ink { --_dark: 1; }
.band--navy::before, .band--navy-deep::before, .band--ink::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--keylight);
}
.band--navy > *, .band--navy-deep > *, .band--ink > * { position: relative; z-index: 1; }
/* :where() keeps these at zero specificity so a component class always wins.
   Without it .band--ink p beats .figure__val and the brass figures turn grey. */
:is(.band--navy, .band--navy-deep, .band--ink) :where(h2, h3, h4) { color: var(--t-strong); }
:is(.band--navy, .band--navy-deep, .band--ink) :where(p, li, dd) { color: var(--t-muted-dk); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--t-brass);
  margin-bottom: var(--sp-5);
}
:is(.band--navy, .band--navy-deep, .band--ink) :where(.eyebrow) { color: var(--t-brass-dk); }
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: currentColor; flex: none; opacity: 0.8;
}

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--t-muted); }
:is(.band--navy, .band--navy-deep, .band--ink) :where(.lead) { color: var(--t-muted-dk); }

.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--t-muted); }
/* .prose sets a light-surface grey. On a dark band that grey drops under 3:1,
   which is the single most common contrast failure in the AM QA standard, so
   the override matches .prose's own specificity and comes after it. */
:is(.band--navy, .band--navy-deep, .band--ink) .prose p,
:is(.band--navy, .band--navy-deep, .band--ink) .prose li,
:is(.band--navy, .band--navy-deep, .band--ink) .prose h2,
:is(.band--navy, .band--navy-deep, .band--ink) .prose h3 { color: var(--t-muted-dk); }
:is(.band--navy, .band--navy-deep, .band--ink) .prose h2,
:is(.band--navy, .band--navy-deep, .band--ink) .prose h3 { color: var(--t-strong); }
:is(.band--navy, .band--navy-deep, .band--ink) .prose a { color: var(--c-brass); text-decoration-color: rgba(208,177,102,0.45); }
:is(.band--navy, .band--navy-deep, .band--ink) .prose li::before { background: var(--c-brass); }
.prose a { color: var(--t-brass); text-decoration: underline; text-decoration-color: var(--c-stone); }
.prose a:hover { text-decoration-color: currentColor; }
.prose h2 { margin-top: var(--sp-12); margin-bottom: var(--sp-4); color: var(--t-ink); }
.prose h3 { margin-top: var(--sp-10); margin-bottom: var(--sp-3); color: var(--t-ink); }
.prose ul { margin-block: var(--sp-5); display: grid; gap: var(--sp-3); }
.prose li { padding-left: var(--sp-6); position: relative; color: var(--t-muted); }
.prose li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 1px; background: var(--c-brass-deep);
}

.head-block { max-width: 54rem; margin-bottom: var(--sp-12); }
/* A structural h2 supplied so an h3 never sits directly under the h1. It reads
   as the section's eyebrow, which is what it is. */
.head-block h2.eyebrow-h2 {
  font-family: var(--ff-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--t-brass); display: inline-flex; align-items: center; gap: var(--sp-3);
}
.head-block h2.eyebrow-h2::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.8; }
:is(.band--navy, .band--navy-deep, .band--ink) .head-block h2.eyebrow-h2 { color: var(--t-brass-dk); }
.head-block--center { margin-inline: auto; text-align: center; }
.head-block--center .eyebrow { justify-content: center; }
.head-block .lead { margin-top: var(--sp-5); }

/* --- 3. Header and navigation --------------------------------------------- */

.topbar {
  background: var(--c-ink); color: var(--t-muted-dk);
  font-size: var(--fs-xs); letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-dark);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 36px; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--c-brass-bright); }
.topbar__cred { display: flex; gap: var(--sp-5); }

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.header.is-stuck { background: var(--c-ink); border-bottom-color: var(--line-dark); }
.header .wrap {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; text-decoration: none; }
/* The badge is a wide oval carrying two lines of small type inside it. At 48px
   the wordmark was unreadable, so it is sized to be legible and allowed to
   overhang the bar slightly, the way it does on the source site. */
.brand img { height: 64px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 84px; margin-block: -6px; } }
.brand__txt { display: none; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 500; color: var(--t-body);
  text-decoration: none; border-radius: var(--r);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--c-brass-bright); }
.nav__link::after {
  content: ''; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 6px;
  height: 1px; background: var(--c-brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-brass); }

.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 500; color: var(--t-body);
  border-radius: var(--r);
}
.nav__toggle:hover, .nav__group:focus-within .nav__toggle { color: var(--c-brass-bright); }

/* A linked group: the label is a real anchor, the chevron is its own control.
   The two sit on one row and share the group's hover and focus treatment. */
.nav__group--linked { display: flex; align-items: center; }
.nav__group--linked .nav__link { padding-right: var(--sp-1); }
.nav__toggle--chevron { padding-left: var(--sp-1); padding-right: var(--sp-3); }
.nav__group--linked:hover .nav__link { color: var(--c-brass-bright); }
.nav__toggle svg { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease-out); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px; padding: var(--sp-4);
  background: var(--c-navy-deep);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav__toggle[aria-expanded="true"] + .nav__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  display: flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--t-body); text-decoration: none;
  border-radius: var(--r);
  border-left: 1px solid transparent;
  transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.nav__panel a:hover { background: rgba(208,177,102,0.08); border-left-color: var(--c-brass); color: var(--t-strong); }

.header__emerg { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header__emerg-label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t-brass-dk); line-height: 1.3;
}
.header__emerg-num {
  display: block; font-size: 1.0625rem; font-weight: 700;
  color: var(--t-strong); text-decoration: none;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.header__emerg-num:hover { color: var(--c-brass-bright); }

.navbtn {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-dark); border-radius: var(--r);
  color: var(--t-body);
}
.navbtn span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: background var(--dur-fast) linear; }
.navbtn span::before, .navbtn span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.navbtn span::before { top: -6px; }
.navbtn span::after { top: 6px; }
.navbtn[aria-expanded="true"] span { background: transparent; }
.navbtn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.navbtn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- 4. Hero -------------------------------------------------------------- */

/* Two tiers, so no inner page reads as loud as the home page.
   full  home only. The one cinematic statement the brand gets.
   mid   every other page. */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  background: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero--full    { min-height: clamp(600px, 88vh, 900px); }
.hero--mid     { min-height: clamp(400px, 52vh, 540px); }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.hero__media video { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.hero__media video.is-ready { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
}

.hero .wrap { padding-block: clamp(56px, 9vw, 108px); width: 100%; }
.hero--mid .wrap     { padding-block: clamp(32px, 4vw, 52px); }

/* The headline steps down with the tier, so the hierarchy reads even when two
   heroes are seen side by side in a browser tab strip. */
/* .hero--mid h1 and .hero h1 both score (0,1,1), so source order decided and
   the tier heading kept rendering at the full 88px display size. Doubling the
   class puts the tier ahead on specificity rather than on ordering luck. */
.hero.hero--mid h1     { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.hero--mid .hero__actions     { margin-top: var(--sp-8); }
.hero__meta--tight {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  gap: var(--sp-4) var(--sp-8);
}
.hero__meta--tight div { min-width: 0; }
.hero__meta--tight dt { margin-bottom: 2px; }
.hero__meta--tight dd { font-size: var(--fs-xs); }
@media (max-width: 719px) {
  .hero--mid .hero__meta { display: none; }
  .hero--mid .hero__actions .btn { width: 100%; }
}
.hero__inner { max-width: min(58rem, 100%); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--c-brass);
  margin-bottom: var(--sp-6);
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-alarm-bright); flex: none;
  box-shadow: 0 0 0 0 rgba(216,64,64,0.65);
  animation: pulse 2.4s var(--ease-inout) infinite;
}
@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(216,64,64,0.55); }
  35%           { box-shadow: 0 0 0 7px rgba(216,64,64,0); }
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--t-strong);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}
.hero h1 em { font-style: normal; color: var(--c-brass); }
.hero__lead {
  margin-top: var(--sp-6); max-width: min(38rem, 100%);
  font-size: var(--fs-lead); color: var(--t-body); opacity: 0.86;
}
.hero__actions { margin-top: var(--sp-10); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero__meta {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12);
}
.hero__meta div { min-width: 120px; }
.hero__meta dt {
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-brass-dk); margin-bottom: var(--sp-2);
}
.hero__meta dd { font-size: var(--fs-sm); color: var(--t-body); }

/* --- 5. Sections ---------------------------------------------------------- */

.split { display: grid; gap: clamp(32px, 5vw, 88px); align-items: center; }
.split--media { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split--media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split--media.is-reversed > *:first-child { order: 2; }
}
.split__media { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 58%; }
.split__media::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(11,15,20,0.10);
  border-radius: inherit; pointer-events: none;
}

/* Emergency panels: three equal-height links. Fixes the source site's
   staggered-card defect by construction, not by tuning. */
.panels { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .panels { grid-template-columns: repeat(3, 1fr); } }
.panel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; padding: var(--sp-8);
  overflow: hidden; isolation: isolate;
  background: var(--c-navy);
  border-radius: var(--r-lg);
  text-decoration: none; color: var(--t-body);
}
.panel__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--dur-slow) var(--ease-out);
}
.panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11,15,20,0.96) 0%, rgba(11,15,20,0.90) 42%, rgba(11,15,20,0.58) 74%, rgba(20,32,46,0.34) 100%);
}
.panel:hover .panel__img, .panel:focus-visible .panel__img { transform: scale(1.05); }
.panel h3 { color: var(--t-strong); font-family: var(--ff-display); font-weight: 700; font-size: 1.375rem; }
.panel p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--t-body); opacity: 0.88; }
.panel__go {
  margin-top: var(--sp-6); display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-brass);
}
.panel__go svg { width: 14px; height: 8px; transition: transform var(--dur-base) var(--ease-out); }
.panel:hover .panel__go svg { transform: translateX(5px); }

/* Proof figures. Designed on dark, but the tone-adjacency pass can move any
   band onto a light surface, so every dark-surface token here has a light
   counterpart. Brass at #d0b166 is only 1.9:1 on bone, which fails even the
   large-text minimum, so light surfaces use brass-deep. */
.figures { display: grid; gap: var(--sp-10); grid-template-columns: 1fr; }
@media (min-width: 720px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figure { padding-top: var(--sp-6); border-top: 1px solid var(--line-dark); }
.figure__val {
  font-family: var(--ff-display); font-weight: 700;
  font-size: var(--fs-figure); line-height: 1; color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 144;
}
.figure__val .unit { font-size: 0.42em; margin-left: 0.18em; color: var(--t-body); letter-spacing: 0.02em; }
.figure__label { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--t-muted-dk); max-width: 26ch; }

/* Typographic service index: rows, not cards */
.index-list { border-top: 1px solid var(--line-light); }
.index-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--line-light);
  text-decoration: none; color: var(--t-ink);
  transition: background var(--dur-fast) linear, padding-left var(--dur-base) var(--ease-out);
}
.index-row:hover:not(.index-row--static) { background: var(--c-white); padding-left: var(--sp-6); }
.index-row--static { cursor: default; }
.index-row__n {
  font-size: var(--fs-xs); font-weight: 600; color: var(--t-brass);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.index-row__t { display: block; font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.5rem); }
.index-row__d { display: block; font-size: var(--fs-sm); color: var(--t-muted); margin-top: var(--sp-2); max-width: 62ch; }
.index-row__go { color: var(--c-brass-deep); transition: transform var(--dur-base) var(--ease-out); }
.index-row:hover .index-row__go { transform: translateX(6px); }

/* Credential logos. Other organizations' marks, in their own colors, on a
   light surface, normalized to one optical height so four logos of four
   different aspect ratios read as one row. */
.creds {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(32px, 4.5vw, 56px) clamp(36px, 5vw, 72px);
}
.cred { text-align: center; max-width: 200px; }
.cred img {
  /* Normalising four logos by height alone lets the widest one (OSHA, 3.4:1)
     dominate a square one (NFPA, 0.95:1). Capping the width as well balances
     them optically, which is what "one row of equals" actually requires. */
  height: 56px; width: auto; max-width: 148px; object-fit: contain;
  margin-inline: auto;
}
.cred__mark {
  display: block; font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.04em; color: var(--c-brass-deep);
}
.cred small {
  display: block; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-muted);
  margin-top: var(--sp-4); max-width: 22ch; margin-inline: auto; line-height: 1.5;
}
:is(.band--navy, .band--navy-deep, .band--ink) .cred small { color: var(--t-muted-dk); }
@media (max-width: 719px) { .cred img { height: 44px; max-width: 118px; } }

/* Video facade. No third-party request until somebody presses play. */
.vid { position: relative; max-width: 1000px; margin-inline: auto; }
.vid__btn {
  position: relative; display: block; width: 100%; padding: 0;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: var(--c-ink); cursor: pointer; border: 1px solid var(--line-dark);
}
.vid__poster {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.vid__btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,15,20,0.78) 0%, rgba(11,15,20,0.18) 46%, rgba(11,15,20,0.28) 100%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.vid__btn:hover .vid__poster, .vid__btn:focus-visible .vid__poster { transform: scale(1.03); }
.vid__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-alarm); color: var(--c-white);
  padding-left: 6px;
  box-shadow: 0 18px 44px -14px rgba(11,15,20,0.8);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) linear;
}
.vid__btn:hover .vid__play, .vid__btn:focus-visible .vid__play {
  transform: scale(1.07); background: var(--c-alarm-bright);
}
.vid__label {
  position: absolute; left: var(--sp-8); right: var(--sp-8); bottom: var(--sp-6); z-index: 2;
  font-size: var(--fs-sm); font-weight: 600; color: var(--t-strong); text-align: left;
}
.vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); display: block; }
.vid__fallback { margin-top: var(--sp-5); font-size: var(--fs-xs); text-align: center; }
.vid__fallback a { color: var(--t-brass-dk); }
.vid.is-playing .vid__fallback { display: none; }
@media (max-width: 719px) { .vid__play { width: 64px; height: 64px; } .vid__play svg { width: 20px; height: 24px; } }

/* --- Statement band -------------------------------------------------------
   The commitment copy. No photograph: the source ran a watermarked stock comp
   behind it and the sentence had to fight the picture. Set clean, the sentence
   is the composition. A brass rule opens it and the measure is deliberately
   narrow so the line breaks fall where they should. */
.statement__inner {
  /* rem, not ch: `ch` resolves against the inherited 15px body font, not the
     48px display face, so 30ch clamped this to ~240px and broke the sentence
     into eight lines. Same trap as the hero measure. */
  max-width: min(52rem, 100%); margin-inline: auto; text-align: center;
}
.statement__rule {
  display: block; width: 40px; height: 2px; margin: 0 auto var(--sp-8);
  background: var(--c-brass);
}
.statement__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--t-brass-dk); margin-bottom: var(--sp-6);
}
:is(.band--bone, .band--white, .band--stone) .statement__eyebrow { color: var(--t-brass); }
.statement__h2 {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.08; letter-spacing: -0.018em;
  text-wrap: balance;
}
.statement__body {
  max-width: min(38rem, 100%); margin: var(--sp-10) auto 0; text-align: left;
}
.statement__body p { font-size: var(--fs-base); }
.statement__cta { margin-top: var(--sp-12); }

@media (max-width: 719px) { .statement__h2 { font-size: clamp(1.5rem, 6vw, 2rem); } }

/* A band that carries a photograph behind its copy. The image is a child of
   .band, not of .wrap, or the max-width and gutter of .wrap inset it and the
   photograph floats in the middle of the band with margins on all four sides. */
.band--photo { isolation: isolate; }
.band--photo > .band__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.26;
}

/* City link cluster */
.cities { display: grid; gap: var(--sp-2) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cities a {
  /* Fixed height, not min-height: a label that wraps to two lines would
     otherwise push its underline out of line with the rest of the row. */
  display: flex; align-items: center; height: 56px; padding: var(--sp-2) 0; font-size: var(--fs-sm);
  text-decoration: none; color: var(--t-muted);
  border-bottom: 1px solid var(--line-light);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.cities a:hover { color: var(--t-ink); border-bottom-color: var(--c-brass); }
.band--navy .cities a, .band--ink .cities a { color: var(--t-muted-dk); border-bottom-color: var(--line-dark-soft); }
.band--navy .cities a:hover, .band--ink .cities a:hover { color: var(--t-strong); border-bottom-color: var(--c-brass); }

/* Capability list on dark */
.caps { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .caps { grid-template-columns: 1fr 1fr; column-gap: var(--sp-12); } }
.caps li {
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-dark-soft);
  font-size: var(--fs-base); color: var(--t-body);
  display: flex; align-items: baseline; gap: var(--sp-4);
}
.caps li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--c-brass); transform: translateY(-2px); }



/* --- Light-surface variants -------------------------------------------------
   Sections authored for a dark band, rendered on a light one. */

:is(.band--bone, .band--white, .band--stone) .figure { border-top-color: var(--line-light); }
:is(.band--bone, .band--white, .band--stone) .figure__val { color: var(--c-brass-deep); }
:is(.band--bone, .band--white, .band--stone) .figure__val .unit { color: var(--t-ink); }
:is(.band--bone, .band--white, .band--stone) .figure__label { color: var(--t-muted); }

:is(.band--bone, .band--white, .band--stone) .caps li {
  color: var(--t-ink); border-bottom-color: var(--line-light);
}
:is(.band--bone, .band--white, .band--stone) .caps li::before { background: var(--c-brass-deep); }

:is(.band--bone, .band--white, .band--stone) .tel-display { color: var(--t-ink); }
:is(.band--bone, .band--white, .band--stone) .tel-display,
:is(.band--bone, .band--white, .band--stone) .tel-display.is-drawn {
  background-image: linear-gradient(var(--c-brass-deep), var(--c-brass-deep));
}
:is(.band--bone, .band--white, .band--stone) .btn--ghost {
  border-color: var(--c-brass-deep); color: var(--c-brass-deep);
}
:is(.band--bone, .band--white, .band--stone) .btn--ghost:hover {
  background: var(--c-brass-deep); color: var(--c-white);
}
:is(.band--bone, .band--white, .band--stone) .cred small { color: var(--t-muted); }

/* A photographic band on a light surface tints toward bone, not toward ink. */
.band--photo:is(.band--bone, .band--white, .band--stone) .band__bg { opacity: 0.12; }

/* --- Two-track band layout --------------------------------------------------
   Heading rail left, content right. Stacking a heading above a 68ch column left
   the right half of every band empty at desktop widths; a rail fills the page
   while keeping the reading column at a readable measure. Single column below
   1000px, where there is no width to spare. */
.layout { display: grid; gap: var(--sp-8); }
.layout__head { min-width: 0; }
.layout__head .eyebrow { margin-bottom: var(--sp-4); }
.layout__head h2 { text-wrap: balance; }
.layout__head .lead { margin-top: var(--sp-5); font-size: var(--fs-base); }
.layout__body { min-width: 0; }

@media (min-width: 1000px) {
  .layout {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }
  /* The heading tracks the reader down a long body column. */
  .layout__head { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
  .layout__head h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) { .layout__head { position: static; } }

/* The body column is already narrower than the band, so prose fills it. */
.layout__body .prose { max-width: 72ch; }
.layout__body .faq { max-width: 68rem; }

/* No heading to put in the rail: set the copy in two columns across the whole
   band. At 1224px that is two ~570px columns, about 65 characters each, which
   is a better measure than one 72ch column with a third of the band empty. */
@media (min-width: 1000px) {
  .layout--nohead { grid-template-columns: 1fr; }
  .layout--nohead .prose {
    max-width: none;
    columns: 2; column-gap: clamp(48px, 6vw, 96px);
  }
  .layout--nohead .prose > * { break-inside: avoid; }
  .layout--nohead .prose p { orphans: 3; widows: 3; }
  .layout--nohead .prose p:first-child { margin-top: 0; }
}

/* A rail carrying only a label needs presence, or it reads as an accident. */
.layout__head .eyebrow-h2 {
  font-family: var(--ff-display); font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 700; letter-spacing: -0.01em; text-transform: none;
  color: var(--t-ink); display: block;
}
.layout__head .eyebrow-h2::before { display: none; }
:is(.band--navy, .band--navy-deep, .band--ink) .layout__head .eyebrow-h2 { color: var(--t-strong); }

/* Six process steps in one column left three-quarters of the row empty. */
@media (min-width: 1000px) {
  .layout__body .steps:not(.steps--horizontal) {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 4vw, 72px);
  }
  /* In two columns a single track on the far left relates to the left column
     only, so each step carries its own rule and the shared track is dropped. */
  .layout__body .steps:not(.steps--horizontal) .step {
    padding-left: var(--sp-8);
    border-left: 1px solid var(--line-light);
  }
  .layout__body .steps:not(.steps--horizontal) .step__node { left: -5px; }
  :is(.band--navy, .band--navy-deep, .band--ink) .layout__body
    .steps:not(.steps--horizontal) .step { border-left-color: var(--line-dark-soft); }
  .layout__body .rline:has(.steps:not(.steps--horizontal)) .rline__track,
  .layout__body .rline:has(.steps:not(.steps--horizontal)) .rline__fill { display: none; }
}

/* Capability lists get a third column when the body track is wide. */
@media (min-width: 1180px) {
  .layout__body .caps { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-10); }
}

/* --- 6. The response line ------------------------------------------------- */

.rline { position: relative; }
.rline__track {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--line-light);
}
.band--navy .rline__track, .band--ink .rline__track, .band--navy-deep .rline__track { background: var(--line-dark-soft); }
.rline__fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 0;
  background: var(--c-brass);
  transition: height 120ms linear;
}

.steps { display: grid; gap: 0; }
.step {
  position: relative; padding: var(--sp-6) 0 var(--sp-6) var(--sp-10);
}
.step--bare { padding-block: var(--sp-4); }
.step__node {
  position: absolute; left: -4px; top: calc(var(--sp-6) + 6px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-bone); border: 1px solid var(--line-light);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.band--navy .step__node, .band--ink .step__node, .band--navy-deep .step__node { background: var(--c-navy); border-color: var(--line-dark-soft); }
.step.is-live .step__node { background: var(--c-brass); border-color: var(--c-brass); transform: scale(1.25); }

}
.step__n {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-brass); margin-bottom: var(--sp-2);
}
.band--navy .step__n, .band--ink .step__n, .band--navy-deep .step__n { color: var(--t-brass-dk); }
.step h3 { margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-base); color: var(--t-muted); max-width: 56ch; }
.band--navy .step p, .band--ink .step p, .band--navy-deep .step p { color: var(--t-muted-dk); }

@media (min-width: 1000px) {
  .steps--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-8); }
  .steps--horizontal .step { padding: var(--sp-10) var(--sp-4) 0 0; }
  .steps--horizontal .step__node { left: 0; top: -4px; }
  .rline--horizontal .rline__track { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .rline--horizontal .rline__fill { width: 0; height: 1px; transition: width 120ms linear; }
}

/* --- 7. Components -------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 48px; padding: 0 var(--sp-8);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.03em;
  text-decoration: none; border-radius: var(--r);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* Alarm red is reserved for the emergency call control. One per viewport. */
.btn--alarm { background: var(--c-alarm); color: var(--c-white); }
.btn--alarm:hover { background: var(--c-alarm-bright); }

.btn--brass { background: var(--c-brass); color: var(--c-ink); }
.btn--brass:hover { background: var(--c-brass-bright); }

.btn--ghost { border: 1px solid var(--c-brass); color: var(--c-brass); background: transparent; }
.btn--ghost:hover { background: var(--c-brass); color: var(--c-ink); }

.btn--outline { border: 1px solid var(--line-light); color: var(--t-ink); background: transparent; }
.btn--outline:hover { border-color: var(--t-ink); background: var(--c-white); }

.btn--wide { width: 100%; }

.tel-display {
  display: inline-block;
  font-family: var(--ff-body); font-weight: 700;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--t-strong); text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 144;
  background-image: linear-gradient(var(--c-brass), var(--c-brass));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.tel-display:hover, .tel-display:focus-visible { background-size: 100% 2px; }
.tel-display.is-drawn { background-size: 100% 2px; }

.crumbs { font-size: var(--fs-xs); color: var(--t-muted-dk); letter-spacing: 0.04em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.crumbs a { text-decoration: none; opacity: 0.85; }
.crumbs a:hover { opacity: 1; color: var(--c-brass-bright); }
.crumbs li + li::before { content: '/'; margin-right: var(--sp-2); opacity: 0.4; }

.note {
  padding: var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--c-brass);
  background: color-mix(in srgb, var(--c-brass) 8%, transparent);
  font-size: var(--fs-sm); color: var(--t-muted);
}

/* Mobile fixed call bar. The single highest-value conversion element. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar);
  display: none; align-items: stretch;
  min-height: var(--callbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-ink);
  border-top: 1px solid var(--line-dark);
}
.callbar a svg { width: 16px; height: 16px; flex: none; }
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  min-height: var(--callbar-h);
}
.callbar__call { background: var(--c-alarm); color: var(--c-white); }
.callbar__quote { color: var(--c-brass); border-left: 1px solid var(--line-dark); }

/* --- 8. Accordion (native details) --------------------------------------- */

.faq { border-top: 1px solid var(--line-light); }
.band--navy .faq, .band--ink .faq { border-top-color: var(--line-dark-soft); }
.faq details { border-bottom: 1px solid var(--line-light); }
.band--navy .faq details, .band--ink .faq details { border-bottom-color: var(--line-dark-soft); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) 0; cursor: pointer; list-style: none;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.0625rem;
  color: var(--t-ink);
  transition: color var(--dur-fast) linear;
}
.band--navy .faq summary, .band--ink .faq summary { color: var(--t-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-brass-deep); }
.band--navy .faq summary:hover, .band--ink .faq summary:hover { color: var(--c-brass); }
.faq__sign { position: relative; flex: none; width: 14px; height: 14px; margin-top: 6px; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--c-brass-deep);
}
.band--navy .faq__sign::before, .band--navy .faq__sign::after,
.band--ink .faq__sign::before, .band--ink .faq__sign::after { background: var(--c-brass); }
.faq__sign::before { width: 14px; height: 1.5px; }
.faq__sign::after { width: 1.5px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding-bottom: var(--sp-6); max-width: var(--measure); }
.faq__a p { font-size: var(--fs-base); color: var(--t-muted); }
.band--navy .faq__a p, .band--ink .faq__a p { color: var(--t-muted-dk); }

/* --- 9. Forms ------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .form__row--3 { grid-template-columns: 2fr 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--t-ink); }
.field .req { color: var(--c-alarm); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); color: var(--t-ink);
  border: 1px solid var(--line-light); border-radius: var(--r);
  font-size: 1rem;                       /* 16px prevents iOS zoom on focus */
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; padding-top: var(--sp-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-brass-deep); box-shadow: 0 0 0 3px rgba(208,177,102,0.22); outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--c-alarm);
}
.field__err { font-size: var(--fs-xs); color: var(--c-alarm); min-height: 1em; }
.field__hint { font-size: var(--fs-xs); color: var(--t-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: var(--fs-sm); }
.form__status[data-state="error"] { color: var(--c-alarm); }
.form__status[data-state="ok"] { color: var(--c-brass-deep); }

.form-card {
  padding: clamp(24px, 4vw, 48px);
  background: var(--c-white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
}

/* --- 10. Footer ----------------------------------------------------------- */

/* The closing band is ink, so an ink footer merged into it as one slab with no
   boundary. Navy is the brand's own footer surface on the source site, and it
   separates cleanly from the ink above and the ink legal strip below.
   Contrast on navy: muted-dk 6.53:1, brass 6.34:1, white 13.10:1. */
.footer {
  background: var(--c-navy); color: var(--t-muted-dk);
  padding-top: var(--band-y);
  border-top: 1px solid var(--line-dark);
}
.footer__grid { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h2, .footer h3 {
  font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-brass);
  margin-bottom: var(--sp-6);
}
.footer ul { display: grid; gap: var(--sp-1); }
.footer a { text-decoration: none; font-size: var(--fs-sm); color: var(--t-muted-dk); }
.footer li a { display: flex; align-items: center; min-height: 44px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-dark-soft); }
.footer a:hover { color: var(--c-brass-bright); }
.footer__logo { height: 96px; width: auto; margin-bottom: var(--sp-6); }
.footer__addr { font-style: normal; font-size: var(--fs-sm); display: grid; gap: var(--sp-3); }
.footer__addr strong { color: var(--t-strong); font-weight: 600; }
/* The legal strip runs full-bleed in ink, as it does on the source site, so the
   footer reads as three distinct bands rather than one field of dark. */
.footer__legal {
  margin-top: var(--band-y);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--sp-6) var(--gutter);
  background: var(--c-ink);
  border-top: 1px solid var(--line-dark-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs);
}
@media (min-width: 1281px) {
  /* .wrap is capped at --max-w, so a negative gutter alone does not reach the
     viewport edge on wide screens. A box-shadow paints the remainder. */
  .footer__legal { box-shadow: 0 0 0 100vmax var(--c-ink); clip-path: inset(0 -100vmax); }
}

/* --- 11. Editorial (blog) ------------------------------------------------- */

.posts { border-top: 1px solid var(--line-light); }
.post-row {
  display: grid; gap: var(--sp-2) var(--sp-8); grid-template-columns: 1fr;
  padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-light);
  text-decoration: none; color: var(--t-ink);
}
@media (min-width: 820px) { .post-row { grid-template-columns: 180px 1fr 240px; align-items: start; } }
.post-row__thumb {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r);
  transition: transform var(--dur-base) var(--ease-out);
}
.post-row:hover .post-row__thumb { transform: scale(1.02); }
@media (max-width: 819px) { .post-row__thumb { max-width: 240px; margin-top: var(--sp-4); } }
.post-row__meta { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-brass); }
.post-row h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.5rem); transition: color var(--dur-fast) linear; }
.post-row:hover h3 { color: var(--c-brass-deep); }
.post-row p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--t-muted); max-width: 62ch; }

.article { max-width: var(--measure); }
.article > * + * { margin-top: 1.15em; }
.article h2 { margin-top: var(--sp-12); }
.article h3 { margin-top: var(--sp-10); }
.article p, .article li { color: var(--t-muted); }
.article ul, .article ol { margin-block: var(--sp-5); display: grid; gap: var(--sp-3); }
.article ul li { padding-left: var(--sp-6); position: relative; }
.article ul li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--c-brass-deep); }
.article ol { counter-reset: n; }
.article ol li { padding-left: var(--sp-8); position: relative; counter-increment: n; }
.article ol li::before { content: counter(n) '.'; position: absolute; left: 0; color: var(--c-brass-deep); font-weight: 600; }
.article a { color: var(--t-brass); text-decoration: underline; }
.article img { border-radius: var(--r-lg); margin-block: var(--sp-8); }
.article blockquote {
  margin-block: var(--sp-8); padding-left: var(--sp-6);
  border-left: 2px solid var(--c-brass);
  font-family: var(--ff-display); font-size: 1.25rem; line-height: 1.5; color: var(--t-ink);
}

/* --- 12. Scroll reveal ---------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- 13. Responsive ------------------------------------------------------- */

@media (max-width: 1023px) {
  /* No backdrop-filter here: it would make .header a containing block for the
     fixed .nav panel and clip the menu to the height of the header. */
  .header { backdrop-filter: none; background: var(--c-ink); }

  .nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--c-ink);
    padding: calc(var(--header-h) + var(--sp-8)) var(--gutter) calc(var(--sp-16) + var(--callbar-h));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  /* While the menu is open the header floats above it so the logo and the close
     control stay reachable, and the address bar gets out of the way. */
  body.nav-open .topbar { display: none; }
  body.nav-open .header { position: fixed; top: 0; left: 0; right: 0; }
  /* .nav is a child of .header, so a z-index on .header cannot lift the logo
     and the close control above it. They need their own stacking position
     inside the header's context. */
  body.nav-open .brand,
  body.nav-open .navbtn { position: relative; z-index: calc(var(--z-nav) + 1); }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link, .nav__toggle {
    width: 100%; padding: var(--sp-5) 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--line-dark-soft);
    justify-content: space-between;
  }
  .nav__link::after { display: none; }
  .nav__group { position: static; }
  .nav__panel {
    position: static; transform: none; min-width: 0; opacity: 1; visibility: visible;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 var(--sp-4) var(--sp-4);
    display: none;
  }
  .nav__toggle[aria-expanded="true"] + .nav__panel { display: block; transform: none; }
  /* The anchor takes the row, the chevron keeps a 44px target beside it, and
     the panel wraps onto its own line beneath both. */
  .nav__group--linked { flex-wrap: wrap; }
  .nav__group--linked .nav__link { flex: 1 1 auto; width: auto; }
  .nav__group--linked .nav__toggle--chevron {
    flex: 0 0 auto; width: auto; min-width: 44px; justify-content: center;
  }
  .nav__group--linked .nav__panel { flex: 1 0 100%; }
  .nav__panel a { padding: var(--sp-4) 0; border-left: 0; border-bottom: 1px solid var(--line-dark-soft); }
  .nav__panel a:hover { background: none; }
  .navbtn { display: inline-flex; }
  .header__emerg { display: none; }
  .callbar { display: flex; }
  body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); }
  .topbar__cred { display: none; }
}

@media (max-width: 719px) {
  .hero--full    { min-height: clamp(520px, 72vh, 680px); }
  .hero--mid     { min-height: clamp(340px, 44vh, 420px); }
  .hero__scrim {
    background: linear-gradient(to top, rgba(11,15,20,0.94) 0%, rgba(11,15,20,0.78) 38%,
                rgba(11,15,20,0.58) 72%, rgba(11,15,20,0.72) 100%);
  }
  .hero__actions .btn { width: 100%; }
  .footer__legal { justify-content: flex-start; }
  .index-row { grid-template-columns: auto 1fr; }
  .index-row__go { display: none; }
}

/* Inline-grid safety net, per OPTIMIZATION.md */
@media (max-width: 719px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* --- 14. Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media video { opacity: 1; }
  .rline__fill { height: 100% !important; }
  .rline--horizontal .rline__fill { width: 100% !important; height: 1px !important; }
  .step__node { background: var(--c-brass) !important; border-color: var(--c-brass) !important; }
  .tel-display { background-size: 100% 2px; }
  .hero__eyebrow .dot { animation: none; box-shadow: 0 0 0 3px rgba(216,64,64,0.28); }
}

/* --- 15. Print ------------------------------------------------------------ */

@media print {
  .header, .topbar, .callbar, .hero__media, .hero__scrim, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 12pt; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}