@charset "UTF-8";
/* ===========================================================================
   Property Insurance Partners
   Single stylesheet. Minified on deploy, versioned by file modification time.

   Values come from docs/homepage-mockup.html, repeated numbers lifted into
   custom properties. Nothing has been redesigned.

   Breakpoints, all max-width, in the order the design uses them:
     1140  header collapses to the drawer
     1020  hero stacks, schedule drops its exposure column
      980  footer goes to two columns
      900  two column layouts stack
      880  industry grid goes single column
      820  credential strip goes to two columns
      600  coverage grid goes single column
      560  steps and footer go single column, utility bar hides
      520  schedule rows go single column
   =========================================================================== */


/* ===========================================================================
   1. Fonts
   Self hosted, latin subset, woff2 only. The two files used above the fold are
   preloaded in the head. The italic face is declared but not preloaded, so the
   browser only fetches it if an italic glyph is actually rendered.
   =========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial sized to Archivo's widths (measured), so the font swap moves nothing. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 98.5%; }
@font-face { font-family: "Archivo Display Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 104.7%; }
@font-face { font-family: "Archivo Display Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 104.7%; }

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================================================
   2. Tokens
   =========================================================================== */

:root {
  /* --- color ------------------------------------------------------------ */
  --ink: #081726;
  --navy: #123353;
  --navy-2: #0C2337;
  --steel: #556D82;
  --steel-lt: #8598A8;
  --slate: #3A5064; /* small text on light grounds held to 7:1: 8.36 white, 7.64 mist */
  --err: #8E2F2F; /* 8.08:1 on white */
  --mist: #F2F5F7;
  --mist-2: #E7ECF0;
  --line: #DFE5EB;
  --line-soft: #EDF1F4;
  --paper: #FFFFFF;

  --brass: #B4862A;
  --brass-lt: #DDBA66;
  --brass-deep: #8E661A; /* brass as text on a light ground: 5.17:1 white, 4.72:1 mist */
  --brass-grad: linear-gradient(135deg, #E2C377 0%, #C09533 45%, #A2761F 100%);
  --brass-line: linear-gradient(90deg, rgba(180, 134, 42, 0) 0%, #C09533 25%, #E2C377 50%, #C09533 75%, rgba(180, 134, 42, 0) 100%);

  /* Card and panel borders on hover. Two steps, warm and cool. */
  --line-hover: #CFD9E2;
  --line-hover-warm: #C9B27A;

  /* On dark surfaces the design works in white at fixed opacities rather than
     in tinted grays, so the hero, the why band and the footer stay consistent. */
  --on-dark-1: rgba(255, 255, 255, .76);
  --on-dark-2: rgba(255, 255, 255, .66);
  --on-dark-3: rgba(255, 255, 255, .48);
  --on-dark-4: rgba(255, 255, 255, .62); /* was 38%: 3.54:1 on --ink, under AA */
  --on-dark-line: rgba(255, 255, 255, .12);

  /* --- type -------------------------------------------------------------- */
  --f-display: "Archivo", "Archivo Display Fallback", system-ui, sans-serif;
  --f-body: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-h1: clamp(38px, 4.8vw, 64px);
  --t-h2: clamp(31px, 3.5vw, 47px);
  --t-h3: clamp(20px, 1.7vw, 24px);
  --t-h4: 19px;
  --t-lead: clamp(17px, 1.35vw, 19.5px);
  --t-intro: 18px;
  --t-body: 17px;
  --t-body-sm: 16.5px;
  --t-ui: 15px;
  --t-ui-sm: 14.5px;
  --t-sm: 14px;
  --t-xs: 13.5px;
  --t-mono: 13px;
  --t-mono-sm: 12.5px;
  --t-mono-xs: 11.5px;
  --t-label: 10.5px;
  --t-label-xs: 10px;

  --lh-tight: 1.1;
  --lh-h3: 1.22;
  --lh-snug: 1.32;
  --lh-body: 1.68;
  --lh-copy: 1.6;

  --ls-display: -.02em;
  --ls-h2: -.026em;
  --ls-h1: -.032em;
  --ls-eyebrow: .2em;
  --ls-label: .19em;
  --ls-mono: .16em;

  /* Archivo carries a width axis. These are the settings the design uses. */
  --wdth-body: 100;
  --wdth-h1: 106;
  --wdth-h3: 106;
  --wdth-display: 110;
  --wdth-nav: 103;
  --wdth-btn: 104;
  --wdth-name: 105;
  --wdth-brand: 108;

  /* --- spacing ----------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 14px;
  --sp-5: 18px;
  --sp-6: 22px;
  --sp-7: 26px;
  --sp-8: 30px;
  --sp-9: 36px;
  --sp-10: 42px;
  --sp-11: 56px;
  --sp-12: 68px;

  --sec-y: clamp(70px, 7.5vw, 118px);
  --hero-y: clamp(66px, 7.5vw, 112px);

  /* --- radius ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  /* Every card in the five style system. Buttons and the small hover pills on
     nav links stay on --r-sm; larger panels stay on --r-lg. */
  --r-card: 12px;
  --r-lg: 10px;
  --r-xl: 18px;
  --r-pill: 100px;

  /* --- elevation --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(8, 23, 38, .04), 0 6px 18px rgba(8, 23, 38, .05);
  --sh-2: 0 2px 6px rgba(8, 23, 38, .06), 0 14px 40px rgba(8, 23, 38, .10);
  --sh-3: 0 8px 18px rgba(8, 23, 38, .10), 0 32px 72px rgba(8, 23, 38, .18);

  /* Cards lift by this much on hover. One value, used everywhere. */
  --lift: -3px;
  /* Cards lift a pixel further than everything else, which is what
     docs/card-styles.html mocks. Ordinary hovers keep --lift. */
  --lift-card: -4px;

  /* --- motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: .16s;
  --dur: .18s;
  --dur-slow: .22s;
  --dur-panel: .24s;
  --dur-reveal: .7s;

  /* --- measure ----------------------------------------------------------- */
  --wrap: 1260px;
  --pad: clamp(20px, 4vw, 52px);
  /* The reading measure for long-form prose. Applied to the text, never to the
     section, so a page of prose starts at the same left edge as a card grid. */
  --measure: 74ch;
  /* The sticky header's own height, stated once because two other things are
     measured from it: the hero band below, and the offset a sticky sidebar and
     an anchor jump need to clear it. .nav is 88px plus its 1px border, and 74
     plus 1 once the drawer takes over at 1140. */
  --head-h: 89px;

  /* The interior hero band, sized against the viewport: the hero and the sticky
   header together take 86% of the screen, so the next section shows under
   the fold. --head-h is the one place the header height is written. */
  --hero-band: calc(86vh - var(--head-h));

  /* --- layers ------------------------------------------------------------ */
  --z-head: 60;
  --z-drawer: 80;
  --z-skip: 90;
}

@supports (height: 1svh) {
  :root { --hero-band: calc(86svh - var(--head-h)); }
}

@media (max-width: 1140px) {
  :root { --head-h: 75px; }
}


/* ===========================================================================
   3. Base
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-variation-settings: "wdth" var(--wdth-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link, modeled on the admin's .adm-skip: the first stop for a keyboard,
   off screen until it takes focus, then drawn over the sticky header and the
   open drawer. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 20px;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus { left: 0; }

main { scroll-margin-top: var(--head-h); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

h2 {
  font-size: var(--t-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-variation-settings: "wdth" var(--wdth-h3);
}

/* The logo symbols live in a zero size SVG at the top of the body. */
.svg-defs { position: absolute; }


/* ===========================================================================
   4. Layout
   =========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.sec { padding: var(--sec-y) 0; }

.sec-mist {
  background: var(--mist);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}


/* ===========================================================================
   5. Components
   =========================================================================== */

/* --- 5.1 Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-btn);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .005em;
  /* Stated rather than inherited. The approved design only ever used an anchor
     for a button, which inherits the body line-height. A real <button> gets
     line-height: normal from the user agent font shorthand and comes out 7px
     shorter, so the quote form's submit would not match any other button on the
     site. */
  line-height: var(--lh-body);
  /* The scale from docs/card-styles.html. Primary came down from 15px 28px at
     15px type, small from 11px 21px at 14px. The old size read as a landing
     page button on a site where a button sits inside a card as often as it
     sits under a headline. */
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
  cursor: pointer;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--brass-grad);
  color: #1B1305;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px rgba(160, 118, 31, .28);
}

.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 26px rgba(160, 118, 31, .36);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  background: rgba(255, 255, 255, .04);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .09);
}

.btn-dark {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 16px rgba(18, 51, 83, .24);
}

.btn-dark:hover {
  background: var(--ink);
  box-shadow: 0 10px 24px rgba(18, 51, 83, .3);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: var(--r-xs);
}

/* Buttons inside a card or panel are centered at their natural width, keyed
   off the containers so a new card gets it without a class. */
.aside-card > .btn,
.mega-promo > .btn,
.drawer-foot > .btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* The submit sits with its reassurance line, so the pair is centered together
   rather than the button alone. */
.form-foot { justify-content: center; }


/* --- 5.2 Eyebrow --------------------------------------------------------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brass-line);
  max-width: 110px;
  opacity: .6;
}

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


/* --- 5.3 Brand ----------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* The logo lockup renders at its 1x size, 167x44, which is the height the old
   square mark occupied. The img is sized from the picture rather than from its
   own attributes so a variant swap cannot change the slot. */
.brand-mark {
  display: block;
  width: 167px;
  height: 44px;
  flex-shrink: 0;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 5.4 Utility bar ----------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: var(--on-dark-2);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: .06em;
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  gap: 20px;
}

.topbar strong, .tb-phone { color: var(--brass-lt); font-weight: 500; }

.topbar .tb-right { display: flex; gap: 28px; }

@media (max-width: 900px) {
  .topbar .tb-right span:first-child { display: none; }
}

@media (max-width: 560px) {
  .topbar { display: none; }
}


/* --- 5.5 Header and mega navigation -------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur-slow) ease, background var(--dur-slow) ease;
}

.site-head.stuck {
  box-shadow: 0 1px 0 var(--line), 0 10px 34px rgba(8, 23, 38, .08);
  background: rgba(255, 255, 255, .95);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 24px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.nav-item {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-nav);
  font-weight: 500;
  font-size: var(--t-ui);
  padding: 9px 15px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.nav-link .chev {
  width: 9px;
  height: 9px;
  stroke: var(--steel-lt);
  stroke-width: 2;
  fill: none;
  transition: transform .2s ease;
}

.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link,
.nav-item.open > .nav-link {
  color: var(--navy);
  background: var(--mist);
}

.nav-item:hover .chev,
.nav-item:focus-within .chev,
.nav-item.open .chev {
  transform: rotate(180deg);
  stroke: var(--brass);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-phone {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.01em;
}

.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(.99);
  transform-origin: top center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform var(--dur-panel) var(--ease-out), visibility var(--dur-panel);
}

.nav-item:hover .mega,
.nav-item:focus-within .mega,
.nav-item.open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Bridges the 6px gap between the trigger and the panel so the pointer can
   cross it without the panel closing. */
.mega::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.mega-inner {
  padding: 32px;
  border-radius: inherit;
  overflow: hidden;
}

.mega-wide { width: min(900px, 90vw); }
.mega-wide .mega-inner { display: grid; grid-template-columns: 1fr 1fr 268px; gap: 36px; }

.mega-mid { width: min(580px, 90vw); }
.mega-mid .mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.mega .mega-h {
  font-family: var(--f-mono);
  line-height: var(--lh-tight);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li + li { margin-top: 2px; }

.mega-col { position: relative; }

.mega-col + .mega-col:not(.mega-promo)::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line-soft);
}

.mega a {
  display: block;
  padding: 9px 12px;
  margin-left: -12px;
  border-radius: var(--r-sm);
  font-size: var(--t-ui);
  line-height: var(--lh-snug);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}

.mega a small {
  display: block;
  font-size: var(--t-mono-sm);
  color: var(--steel);
  margin-top: 3px;
}

.mega a:hover {
  background: var(--mist);
  color: var(--navy);
  padding-left: 16px;
}

/* Card treatment for the priority set. */
.mega-cards { display: grid; gap: 8px; }

.mega-cards a {
  margin-left: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 1px 1px rgba(8, 23, 38, .03);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out), background var(--dur) ease;
}

.mega-cards a:hover {
  padding-left: 15px;
  background: #fff;
  border-color: var(--line-hover-warm);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}

.mega-cards a strong {
  display: block;
  font-weight: 600;
  font-size: var(--t-ui);
  letter-spacing: -.008em;
}

.mega-cards a small { margin-top: 4px; font-size: var(--t-mono-sm); }

/* The promo column stretches to the link lists beside it; an auto top margin
   puts its button on the panel's bottom edge in both menus. */
/* Skin from .card-navy, so the promo panel and the four home page industry
   cards are the same object. Its corner glow used to sit there permanently;
   it blooms on hover now, like every other B card. */
.mega-promo {
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.mega-promo .btn { margin-top: auto; }

.mega-promo p {
  font-size: var(--t-sm);
  line-height: var(--lh-copy);
  color: var(--on-dark-1);
  margin: 0 0 18px;
  position: relative;
}

.mega-promo .eyebrow { margin-bottom: 14px; font-size: var(--t-label); color: var(--brass-lt); }
.mega-promo .eyebrow::after { display: none; }

.nav-toggle {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 19px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-toggle span + span { margin-top: 4px; }

@media (max-width: 1140px) {
  .nav-list, .nav-phone { display: none; }
  .nav-toggle { display: block; }
  .nav { height: 74px; }
}

/* From 1141 to 1360 the nav is a few pixels wider than the wrap: the gaps
   tighten rather than switching to the drawer. */
@media (min-width: 1141px) and (max-width: 1360px) {
  .nav { gap: 16px; }
  .nav-link { padding-left: 11px; padding-right: 11px; }
  .nav-actions { gap: 16px; }

  /* The number is already in the utility bar directly above and in the footer,
     so dropping this one in the narrow band costs nothing and buys back the
     width the six nav items need. */
  .nav-phone { display: none; }
}

/* Below 620 the logo, quote button and hamburger outgrow the screen: the
   brand may shrink and the gaps tighten, so nothing scrolls sideways. */
@media (max-width: 620px) {
  .nav { gap: 12px; }
  .brand { flex-shrink: 1; min-width: 0; }
  .nav-actions { gap: 10px; }
}

/* On a phone the <picture> swaps to the shield alone; both dimensions are
   stated so the swap cannot stretch it. The name stays as the alt text. */
@media (max-width: 430px) {
  .brand-mark:not(.brand-mark-full) { width: 35px; }

  .nav-actions .btn-sm { padding: 11px 16px; }
}


/* --- 5.6 Mobile drawer ---------------------------------------------------
   Not in the approved design, which stops at a non functional hamburger. Built
   from the same tokens so it reads as part of the same system. No bar across
   the top edge of the panel.
   ------------------------------------------------------------------------- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.nav-drawer[hidden] { display: none; }

.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 23, 38, .55);
  opacity: 0;
  transition: opacity var(--dur-panel) ease;
  cursor: pointer;
}

/* A full-page overlay, not a side panel: it covers the whole viewport,
   header included, on an opaque ground so nothing of the page shows behind
   it. It was min(420px, 92vw), which at 768 left 45% of the page visible. */
.drawer-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s var(--ease-out);
}

.nav-drawer.open .drawer-scrim { opacity: 1; }
.nav-drawer.open .drawer-panel { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.drawer-close {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* 44px square: the minimum tap target. It measured 37. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--dur) ease, background var(--dur) ease;
}

.drawer-close:hover { border-color: var(--line-hover); background: var(--mist); }

.drawer-close svg {
  width: 15px;
  height: 15px;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  fill: none;
}

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
  -webkit-overflow-scrolling: touch;
}

.drawer-list { list-style: none; margin: 0; padding: 0; }

.drawer-list > li { border-bottom: 1px solid var(--line-soft); }

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-nav);
  font-weight: 600;
  font-size: var(--t-body-sm);
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}

.drawer-link:hover { color: var(--navy); }

.drawer-trigger .chev {
  width: 11px;
  height: 11px;
  stroke: var(--steel-lt);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.drawer-trigger[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  stroke: var(--brass);
}

.drawer-sub {
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.drawer-sub[hidden] { display: none; }

.drawer-sub ul { list-style: none; margin: 0; padding: 0; }

.drawer-sub a {
  display: block;
  padding: 9px 0;
  font-size: var(--t-ui);
  color: var(--steel);
  transition: color var(--dur-fast) ease;
}

.drawer-sub a:hover { color: var(--navy); }

.drawer-sub-all {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass) !important;
  padding-bottom: var(--sp-3) !important;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.drawer-foot {
  flex-shrink: 0;
  padding: var(--sp-6);
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}

.drawer-phone {
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--navy);
}

/* The drawer only exists below the header breakpoint. */
@media (min-width: 1141px) {
  .nav-drawer { display: none; }
}

/* Both elements: iOS Safari scrolls the page under an overlay when only body
   is locked. */
html:has(body.no-scroll),
body.no-scroll { overflow: hidden; }


/* --- 5.7 Breadcrumbs ------------------------------------------------------
   Markup arrives in Phase 2. The styles are here so the design system is
   complete in one file rather than growing a second one later.
   ------------------------------------------------------------------------- */

.crumbs {
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .04em;
  color: var(--steel);
}

.crumbs li { display: flex; align-items: center; gap: 10px; }

.crumbs li + li::before {
  content: "/";
  color: var(--steel);
  opacity: .7;
}

.crumbs a { color: var(--steel); transition: color var(--dur-fast) ease; }
.crumbs a:hover { color: var(--navy); }
.crumbs [aria-current="page"] { color: var(--ink); }


/* --- 5.8 Hero and schedule panel ----------------------------------------- */

.hero {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(30, 78, 122, .55), transparent 62%),
    radial-gradient(700px 500px at 92% 96%, rgba(180, 134, 42, .15), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 96px);
}

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: var(--sp-12);
  align-items: center;
  padding-top: var(--hero-y);
  padding-bottom: var(--hero-y);
}

.hero h1 {
  font-size: var(--t-h1);
  font-variation-settings: "wdth" var(--wdth-h1);
  letter-spacing: var(--ls-h1);
  line-height: 1.02;
  margin-bottom: 26px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #EBD08C, #C09533);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: var(--t-lead);
  color: var(--on-dark-1);
  max-width: 55ch;
  margin: 0 0 var(--sp-9);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: 34px;
}

.hero-note {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .62); /* was --on-dark-3 (48%), 4.92:1 on navy and under AA over a photo */
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}

.hero-note::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
}

.schedule {
  background: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 30px 70px rgba(0, 0, 0, .42);
  /* No backdrop-filter: the standard allows it only on a nav, and over a video
     it would re-blur every frame on the GPU. */
  overflow: hidden;
}

/* The home hero video. It reuses the state hero photo layer (.hero-photo):
   the same focal classes and the same measured scrim levels, chosen for this
   footage against its brightest frame. The poster paints first; the video sits
   above it at opacity 0 and fades in on its first playing frame. */
.hero.has-media::before { display: none; }

/* Over the video the emphasis gradient ends on --brass-lt rather than the
   darker #C09533: at its dark end the approved gradient measured 3.43:1 over
   the brightest frame even at scrim 4. Same brass family, lifted. */
.hero.has-media h1 em { background-image: linear-gradient(100deg, #EBD08C, #DDBA66); }

/* Over the video the schedule panel carries its own navy ground, as the state
   heroes' fact cells do: its small labels would otherwise set the scrim for
   the whole hero. */
.hero.has-media .schedule { background: linear-gradient(165deg, rgba(16, 36, 58, .9), rgba(8, 23, 38, .86)); }
.hero.has-media .wrap { z-index: 1; }

/* Over the video the home hero is held to 7:1 against the loop's brightest
   frame (tests/hero-contrast/measure-home.js); the primary button runs the
   lighter half of the brass family there. */
.hero.has-media .hero-sub { color: #fff; font-weight: 500; }
.hero.has-media .hero-note { color: #fff; }
.hero.has-media .sch-cols,
.hero.has-media .sch-name small,
.hero.has-media .schedule-foot { color: rgba(255, 255, 255, .74); }
.hero.has-media .btn-primary { background: linear-gradient(135deg, #F0D89A 0%, #DDBA66 50%, #CFA652 100%); }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  opacity: 0;
  transition: opacity .8s ease;
}

.hero-video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.schedule-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--on-dark-line);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .035);
}

.schedule-head span:first-child { color: #fff; }
.schedule-head span:last-child { color: var(--brass-lt); }

.sch-cols, .sch-row {
  display: grid;
  grid-template-columns: 1.12fr .8fr 1.12fr;
  gap: 18px;
  padding: 12px 22px;
}

.sch-cols {
  font-family: var(--f-mono);
  font-size: var(--t-label-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62); /* was --on-dark-4 (38%), under AA even on navy */
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.sch-row {
  border-bottom: 1px solid rgba(255, 255, 255, .065);
  align-items: baseline;
  transition: background var(--dur) ease;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
}

.sch-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brass-grad);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.sch-row:hover { background: rgba(221, 186, 102, .07); }
.sch-row:hover::before { opacity: 1; }
.sch-row:last-child { border-bottom: 0; }

.sch-name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-name);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.sch-name small {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: var(--t-label-xs);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .62); /* was 40%, under AA even on navy */
  margin-top: 6px;
  text-transform: uppercase;
}

.sch-val {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--brass-lt);
  font-weight: 500;
  letter-spacing: -.01em;
}

.sch-exp {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .68);
  line-height: 1.48;
}

.schedule-foot {
  padding: 15px 22px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .62); /* was --on-dark-4 (38%) */
  border-top: 1px solid var(--on-dark-line);
  background: rgba(0, 0, 0, .14);
}

@media (max-width: 1020px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  .sch-cols, .sch-row { grid-template-columns: 1fr .8fr; }
  .sch-exp { display: none; }
}

@media (max-width: 520px) {
  .sch-cols, .sch-row { grid-template-columns: 1fr; gap: 4px; }
  .sch-cols span:not(:first-child) { display: none; }
}


/* --- 5.9 Credential strip ------------------------------------------------ */

.creds {
  background: var(--navy-2);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.creds .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }

.cred { padding: 34px 30px; border-left: 1px solid rgba(255, 255, 255, .09); }
.cred:first-child { border-left: 0; padding-left: 0; }

.cred b {
  display: block;
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(120deg, #EBD08C, #C09533);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cred span {
  display: block;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .62);
  margin-top: 11px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .creds .wrap { grid-template-columns: 1fr 1fr; }
  .cred { padding: 24px 20px; }
  .cred:nth-child(3) { border-left: 0; padding-left: 0; }
  .cred:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
}


/* --- 5.10 Section heads -------------------------------------------------- */

.sec-head { max-width: 790px; margin-bottom: var(--sp-11); }
.sec-head p { font-size: var(--t-intro); color: var(--ink); margin: 20px 0 0; }


/* --- 5.11 Industry cards ------------------------------------------------- */

.ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }

/* The ground, border, shadow and hover come from .card-navy. What stays here is
   the layout and the typography, which is the same anatomy every card in the
   system uses. Everything below is the on-dark half of it. */
.ind { padding: 38px 36px; }

.ind-tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 18px;
}

.ind h3 { margin-bottom: 13px; color: #fff; }

/* :not(.ind-tag) because .ind p outranks .ind-tag on specificity, so the body
   rule had been quietly setting the tag's color and size since the card was
   written. The tag is a mono label in brass light, not 15.5px body copy. */
.ind p:not(.ind-tag) { font-size: 15.5px; color: var(--on-dark-1); margin: 0 0 var(--sp-6); }

.ind ul {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  border-top: 1px solid var(--on-dark-line);
}

.ind li {
  font-size: var(--t-sm);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  gap: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}

.ind li b {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  /* 62% rather than the mock's 42%, which measures 3.31:1 on the light end of
     the card gradient and fails AA at 11px. */
  color: rgba(255, 255, 255, .62);
  min-width: 98px;
  flex-shrink: 0;
  padding-top: 4px;
}

.ind-link {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-ui-sm);
  color: var(--brass-lt);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ind-link::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--brass);
  transition: width .2s ease;
}

.ind:hover .ind-link::after { width: 34px; }

@media (max-width: 880px) {
  .ind-grid { grid-template-columns: 1fr; }
}


/* --- 5.12 Chips ---------------------------------------------------------- */

/* The four secondary classes were a row of pills. They are corner bracket cards
   now, so the industries section reads as four navy cards and then four white
   ones, which is a hierarchy a chip row could not state. */
.also { margin-top: clamp(28px, 3vw, 40px); }

.also-label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
}

.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: var(--t-sm);
  transition: border-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}

.chip:hover {
  border-color: var(--brass);
  color: var(--navy);
  box-shadow: var(--sh-1);
}


/* --- 5.13 Coverage grid -------------------------------------------------- */

.cov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Skin from .card-icon; anatomy and type from the link card. */
.cov { padding: 30px 28px; }

@media (max-width: 900px) { .cov-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cov-grid { grid-template-columns: 1fr; } }


/* --- 5.14 State list ----------------------------------------------------- */

.states-layout {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: 64px;
  align-items: start;
}

.states-copy p { color: var(--ink); font-size: var(--t-body); }

.state-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.state-row {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
  transition: background var(--dur) ease;
}

.state-row:last-child { border-bottom: 0; }
.state-row:hover { background: var(--mist); }

.st-code {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  color: var(--brass-deep);
  letter-spacing: .1em;
}

.st-name {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-name);
  font-weight: 600;
  font-size: 16.5px;
  margin-bottom: 3px;
}

.st-peril {
  display: block;
  font-size: var(--t-sm);
  color: var(--steel);
  line-height: 1.5;
}

.st-arrow {
  width: 16px;
  height: 16px;
  stroke: var(--steel-lt);
  stroke-width: 1.6;
  fill: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}

.state-row:hover .st-arrow { opacity: 1; transform: none; stroke: var(--brass); }

.states-all { margin-top: 30px; }

@media (max-width: 900px) {
  .states-layout { grid-template-columns: 1fr; gap: 40px; }
}


/* --- 5.15 Process steps -------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Skin from .card-ghost. The brass 38px badge that used to sit at the top is
   gone: the watermark numeral is the sequence marker now, and two numbers on
   one card is one too many. */
.step { padding: 30px 28px 32px; }

.step-n {
  font-family: var(--f-mono);
  font-size: var(--t-label-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-lt);
  display: block;
  margin-bottom: 8px;
}

.step h3 { font-size: var(--t-h4); margin-bottom: 11px; color: #fff; }

.step p { font-size: var(--t-ui); color: var(--on-dark-1); margin: 0; line-height: 1.62; }

/* A step whose body came out of page_sections is prose, and .prose p is a size
   up from a step. Stated after it so the card keeps its own scale. */
.step-body p { font-size: var(--t-ui); color: var(--on-dark-1); line-height: 1.62; margin: 0 0 .9em; }
.step-body p:last-child { margin-bottom: 0; }

/* Beside the quote form there is one column, not four. */
.steps-col { grid-template-columns: 1fr; gap: 14px; }

/* Inside a page's prose flow, on How It Works, the grid needs the section
   spacing the prose blocks around it have, and only half the columns: it sits
   in the article column beside a sidebar, not across the container. */
.steps-flow {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: clamp(38px, 4vw, 58px);
}

@media (max-width: 760px) { .steps-flow { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }


/* --- 5.16 Why band ------------------------------------------------------- */

.why {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 460px at 88% 6%, rgba(30, 78, 122, .5), transparent 64%);
}

.why .wrap { position: relative; }

.why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.why h2 { margin-bottom: 24px; }
.why p { color: var(--on-dark-1); }

.why-points { list-style: none; margin: 0; padding: 0; }

.why-points li {
  padding: 24px 0;
  border-top: 1px solid var(--on-dark-line);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
}

.why-points li:last-child { border-bottom: 1px solid var(--on-dark-line); }

.why-points .n {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--brass-lt);
  padding-top: 5px;
}

.why-points h3 { font-size: 18px; margin-bottom: 8px; }

.why-points p {
  font-size: var(--t-ui);
  margin: 0;
  color: var(--on-dark-1);
  line-height: 1.62;
}

@media (max-width: 900px) {
  .why-layout { grid-template-columns: 1fr; gap: 38px; }
}


/* --- 5.17 Quote band and forms ------------------------------------------- */

.quote-band { background: var(--mist); }

/* Home: the text centered against the taller form, not left above a gap. */
.quote-band .quote-layout { align-items: center; }

.quote-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 66px;
  align-items: start;
}

/* Not the step cards, which are on the navy ground and set their own. Without
   the :not() the steel body color won here by source order and measured
   2.20:1 on the card. */
.quote-side p:not(.step p) { color: var(--ink); font-size: var(--t-body-sm); }

/* Written sections beside the quote form: list items match the paragraphs. */
.quote-side .prose li { color: var(--ink); font-size: var(--t-body-sm); }

.quote-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--sh-2);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Text inputs and selects share one box: 52px tall, the same padding, border
   and radius. A select drops the native control and draws its own chevron, or
   it sat short beside the inputs. Ink text 18.09:1, placeholder steel 5.39:1. */
.field input,
.field select,
.field textarea {
  font-family: var(--f-body);
  font-size: var(--t-ui);
  line-height: 1.4;
  color: var(--ink);
  border: 1px solid #7A8D9E;
  background: #fff;
  padding: 14px 15px;
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.field input,
.field select { height: 52px; width: 100%; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23081726' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 13px 13px;
  text-overflow: ellipsis;
}

.field ::placeholder { color: var(--steel); opacity: 1; }

.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-copy); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--navy);
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.form-foot {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.form-foot small {
  font-size: var(--t-mono);
  color: var(--slate);
  max-width: 32ch;
  line-height: 1.55;
}

.quote-contact {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.quote-contact b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 9px;
}

.quote-contact a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 27px;
  color: var(--navy);
  letter-spacing: -.025em;
}

@media (max-width: 900px) {
  /* minmax(0,1fr) rather than 1fr. A grid track defaults to a minimum of the
     item's min-content, and the widest option in the property type select is
     wider than a phone screen, so a plain 1fr track pushes the whole page
     sideways. The rendered width is the same at every size where it fits. */
  .quote-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* /quote/: only the top section is two columns, the form card right and
   sticky within that section. The form is first in the source, so below 1021
   it sits under the hero. Every section after runs the full container. */
.page-hero.hero-short { min-height: 0; padding: clamp(40px, 5vw, 72px) 0; }

.quote-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.quote-page-body { grid-column: 1; grid-row: 1; }
.quote-page-form { grid-column: 2; grid-row: 1; }
.quote-page .quote-form { padding: 26px 28px; }
.quote-page .form-grid { gap: 16px 18px; }
.quote-page .form-foot { margin-top: 20px; }

/* Sticky only where the card fits under the header, or a stuck card hides its
   button. From 800 to 859 tall its spacing tightens (fields stay 52px) so it
   fits; a laptop window is where the column beside it ran empty. */
@media (min-width: 1021px) and (min-height: 800px) {
  .quote-page-form { position: sticky; top: calc(var(--head-h) + 14px); }
}

@media (min-width: 1021px) and (min-height: 800px) and (max-height: 859px) {
  .quote-page-form { top: calc(var(--head-h) + 6px); }
  .quote-page .quote-form { padding: 18px 24px; }
  .quote-page .form-head { margin-bottom: 10px; }
  .quote-page .form-grid { gap: 10px 16px; }
  .quote-page .field label { margin-bottom: 5px; }
  .quote-page .form-foot { margin-top: 12px; gap: 8px 22px; }
}

.form-head { margin-bottom: 18px; }
.form-head h2 { font-size: var(--t-h3); margin-bottom: 8px; }
.form-head .prose p { font-size: var(--t-ui); color: var(--ink); margin: 0; }

.quote-page-body > .prose-block,
.quote-page-body > .steps { margin-bottom: clamp(36px, 3.6vw, 52px); }
.quote-page-body > :last-child { margin-bottom: 0; }

/* Four across from 1021, two to 601, one on a phone. */
.link-grid-4, .cov-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .link-grid-4, .cov-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A full width band: the heading on the left, the text on the right. */
.split-band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 76px);
}

.split-band .prose-block { display: contents; }
.split-band .prose { max-width: none; }
.split-band .quote-contact { grid-column: 2; }

/* Contact: the written sections after the form, side by side. */
.prose-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 76px);
}

.prose-pair > .prose-block { margin-bottom: 0; }

.faq-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  align-items: start;
}

.faq-cols .faq { max-width: none; }

@media (max-width: 1020px) {
  .quote-page,
  .split-band .wrap,
  .prose-pair,
  .faq-cols { grid-template-columns: minmax(0, 1fr); }
  .prose-pair { row-gap: clamp(38px, 4vw, 58px); }
  .quote-page-form,
  .quote-page-body { grid-column: 1; grid-row: auto; position: static; }
  .split-band .quote-contact { grid-column: 1; }
}

@media (max-width: 600px) {
  .link-grid-4, .cov-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .quote-page .quote-form { padding: 22px 18px; }
}


/* --- 5.18 Footer --------------------------------------------------------- */

.site-foot {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  padding: 78px 0 0;
  font-size: var(--t-ui-sm);
  position: relative;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(4, 1fr);
  gap: var(--sp-10);
  padding-bottom: var(--sp-11);
}

.foot-brand p {
  font-size: var(--t-ui-sm);
  color: var(--on-dark-1);
  margin-top: var(--sp-6);
  max-width: 34ch;
  line-height: 1.62;
}

.foot-nap {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-5);
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

.foot-nap span:first-child { color: rgba(255, 255, 255, .78); }

.foot-license {
  margin-top: var(--sp-4);
  max-width: 40ch;
  font-size: var(--t-ui-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}
.foot-nap a { color: inherit; }
.foot-nap a:hover { color: #fff; }

.foot-col .foot-h {
  font-family: var(--f-mono);
  line-height: var(--lh-tight);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 20px;
  font-weight: 500;
}

.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 11px; }
.foot-col a { color: rgba(255, 255, 255, .62); transition: color .15s ease; }
.foot-col a:hover { color: #fff; }

.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, .11);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--on-dark-4);
}

.foot-bar div { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}


/* --- 5.19 Error pages ---------------------------------------------------- */

/* The h1, eyebrow and subhead moved into the shared interior hero, so this is
   the body of the 404 rather than its head. */
.err-shell { padding: clamp(46px, 5vw, 76px) 0 clamp(60px, 7vw, 104px); }

.err-lead {
  font-size: var(--t-intro);
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 0 var(--sp-9);
}

.err-lead code {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  color: var(--navy);
  word-break: break-all;
}

.err-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}

.err-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-10);
}

.err-col h2 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 18px;
}

.err-col ul { list-style: none; margin: 0; padding: 0; }

.err-col li { margin-bottom: 10px; }

.err-col a {
  font-size: var(--t-ui);
  color: var(--navy);
  transition: color var(--dur-fast) ease;
}

.err-col a:hover { color: var(--brass-deep); }

.err-detail {
  margin-top: var(--sp-9);
  padding: var(--sp-5);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 820px) {
  .err-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* --- 5.20 Inner page templates -------------------------------------------
   Everything below is Phase 3. Same tokens, same radii, same shadows, same
   hover behavior as the home page. Nothing here puts a colored bar across the
   top edge of a card or a panel: that treatment is banned sitewide.
   ------------------------------------------------------------------------- */

/* Long-form prose caps its line length at --measure, applied to the text,
   never to a narrower column. */
.prose { max-width: var(--measure); }

/* --- page hero --- */

/* Interior heros share one scale: the band is --hero-band, content centered,
   eyebrow, h1, subhead and actions left aligned on .wrap. */
.page-hero,
.post-hero {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--hero-band);
  padding: clamp(44px, 4vw, 64px) 0;
}

.page-hero::before,
.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(820px 460px at 10% 0%, rgba(30, 78, 122, .5), transparent 62%),
    radial-gradient(620px 420px at 94% 100%, rgba(180, 134, 42, .13), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 96px);
}

.page-hero .wrap,
.post-hero .wrap { position: relative; width: 100%; }

/* A photograph behind the hero. Framed on images.focal_point (fx/fy classes)
   and dimmed by images.scrim, the lightest of six levels that holds every hero
   text color at 4.5:1 at 390, 768 and 1440 (tests/hero-contrast/). Change a
   level only by rerunning that measurement. */
.page-hero.has-photo::before { display: none; }

.hero-photo {
  position: absolute;
  inset: 0;
}

.hero-photo picture,
.hero-photo-img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-photo-img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.fx-0 { --fx: 0%; }
.fx-5 { --fx: 5%; }
.fx-10 { --fx: 10%; }
.fx-15 { --fx: 15%; }
.fx-20 { --fx: 20%; }
.fx-25 { --fx: 25%; }
.fx-30 { --fx: 30%; }
.fx-35 { --fx: 35%; }
.fx-40 { --fx: 40%; }
.fx-45 { --fx: 45%; }
.fx-50 { --fx: 50%; }
.fx-55 { --fx: 55%; }
.fx-60 { --fx: 60%; }
.fx-65 { --fx: 65%; }
.fx-70 { --fx: 70%; }
.fx-75 { --fx: 75%; }
.fx-80 { --fx: 80%; }
.fx-85 { --fx: 85%; }
.fx-90 { --fx: 90%; }
.fx-95 { --fx: 95%; }
.fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; }
.fy-5 { --fy: 5%; }
.fy-10 { --fy: 10%; }
.fy-15 { --fy: 15%; }
.fy-20 { --fy: 20%; }
.fy-25 { --fy: 25%; }
.fy-30 { --fy: 30%; }
.fy-35 { --fy: 35%; }
.fy-40 { --fy: 40%; }
.fy-45 { --fy: 45%; }
.fy-50 { --fy: 50%; }
.fy-55 { --fy: 55%; }
.fy-60 { --fy: 60%; }
.fy-65 { --fy: 65%; }
.fy-70 { --fy: 70%; }
.fy-75 { --fy: 75%; }
.fy-80 { --fy: 80%; }
.fy-85 { --fy: 85%; }
.fy-90 { --fy: 90%; }
.fy-95 { --fy: 95%; }
.fy-100 { --fy: 100%; }

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-photo.scrim-1::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.62) 0%, rgba(8, 23, 38, 0.56) 55%, rgba(8, 23, 38, 0.4) 100%); }
.hero-photo.scrim-2::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.7) 0%, rgba(8, 23, 38, 0.64) 55%, rgba(8, 23, 38, 0.48) 100%); }
.hero-photo.scrim-3::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.78) 0%, rgba(8, 23, 38, 0.72) 55%, rgba(8, 23, 38, 0.56) 100%); }
.hero-photo.scrim-4::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.84) 0%, rgba(8, 23, 38, 0.79) 55%, rgba(8, 23, 38, 0.62) 100%); }
.hero-photo.scrim-5::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.9) 0%, rgba(8, 23, 38, 0.86) 55%, rgba(8, 23, 38, 0.7) 100%); }
.hero-photo.scrim-6::after { background: linear-gradient(90deg, rgba(8, 23, 38, 0.94) 0%, rgba(8, 23, 38, 0.91) 55%, rgba(8, 23, 38, 0.8) 100%); }

@media (max-width: 900px) {
  .hero-photo.scrim-1::after { background: rgba(8, 23, 38, 0.6); }
  .hero-photo.scrim-2::after { background: rgba(8, 23, 38, 0.68); }
  .hero-photo.scrim-3::after { background: rgba(8, 23, 38, 0.76); }
  .hero-photo.scrim-4::after { background: rgba(8, 23, 38, 0.82); }
  .hero-photo.scrim-5::after { background: rgba(8, 23, 38, 0.86); }
  .hero-photo.scrim-6::after { background: rgba(8, 23, 38, 0.92); }
}

/* The home scrim is a text zone: dense under the text, easing off across the
   right third. --text-scrim is the lightest value holding 7:1 at 390, 768 and
   1440 (measure-home.js); flat below 1020. */
.hero-photo.hero-media { --text-scrim: .9; }
.hero-photo.hero-media::after {
  background: linear-gradient(90deg,
    rgba(8, 23, 38, var(--text-scrim)) 0%,
    rgba(8, 23, 38, var(--text-scrim)) 50%,
    rgba(8, 23, 38, calc(var(--text-scrim) - .24)) 76%,
    rgba(8, 23, 38, calc(var(--text-scrim) - .3)) 100%);
}

@media (max-width: 1020px) {
  .hero-photo.hero-media::after { background: rgba(8, 23, 38, var(--text-scrim)); }
}

.page-hero h1,
.post-hero h1 {
  font-size: clamp(33px, 3.9vw, 52px);
  font-variation-settings: "wdth" var(--wdth-h1);
  letter-spacing: var(--ls-h1);
  line-height: 1.06;
  max-width: 20ch;
  margin-bottom: clamp(16px, 1.6vw, 22px);
}

.page-lede {
  font-size: var(--t-lead);
  color: var(--on-dark-1);
  /* Roughly sixty characters. Shorter than the prose measure on purpose: this
     is one or two sentences read at a glance, not a paragraph. */
  max-width: 60ch;
  margin: 0;
}

/* The action row. .hero-cta carries the home page's own bottom margin, which
   there separates it from the renewal note underneath; here the spacing is
   owned by the hero so the eyebrow to h1 to subhead to button rhythm is the
   same on every interior template. */
.page-hero .hero-cta,
.post-hero .hero-cta {
  margin-bottom: 0;
  margin-top: clamp(26px, 2.6vw, 34px);
}

/* Byline, last updated, and anything else that qualifies the page rather than
   selling it. Quiet, mono, and always last in the composition. */
.hero-meta {
  margin: clamp(20px, 2vw, 26px) 0 0;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .05em;
  color: var(--on-dark-4);
}

.hero-meta time { color: rgba(255, 255, 255, .78); }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: var(--sp-8) 0 0;
  background: var(--on-dark-line);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero-fact { background: rgba(255, 255, 255, .035); padding: 18px 20px; }

/* Over a photograph the facts row carries its own navy ground. Its small
   labels were what held every hero scrim at full strength: the row spans the
   width, so it sits over the brightest part of most photos. With the cells
   grounded, the scrim only has to protect the headline column and can stay
   light enough for the photo to read. */
.page-hero.has-photo .hero-fact { background: rgba(8, 23, 38, .78); }
/* White over a photo: 7:1 at every assigned scrim. */
.page-hero.has-photo .page-lede { color: #fff; }

.hero-fact dt {
  font-family: var(--f-mono);
  font-size: var(--t-label-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  /* 62% white, the quietest label CLAUDE.md allows: 7.44:1 on navy. It was
     --on-dark-4 (38%), 3.55:1 on plain navy and under 3.5 over a photo. */
  color: rgba(255, 255, 255, .62);
  margin-bottom: 8px;
}

.hero-fact dd {
  margin: 0;
  font-size: var(--t-ui);
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}

/* --- article layout --- */

.page-body { padding-top: clamp(46px, 5vw, 76px); }

/* An index page whose intro sits beside the sidebar and whose grid runs the
   full container underneath it. Two .wrap children of one .sec rather than two
   sections, so the pair does not pick up a second set of section padding
   between them. */
.sec > .wrap + .wrap { margin-top: clamp(40px, 5vw, 68px); }

.layout-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}

.article-main { min-width: 0; }

.article-aside {
  position: sticky;
  top: calc(var(--head-h) + 19px);
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}

@media (max-width: 1020px) {
  .layout-article { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* --- prose --- */

.prose-block { margin-bottom: clamp(38px, 4vw, 58px); scroll-margin-top: calc(var(--head-h) + 19px); }

/* Anything an in page link targets clears the sticky header on arrival. */
#quote-form, [id^="s-"], #coverage, #states, #faq { scroll-margin-top: calc(var(--head-h) + 19px); }
.prose-block:last-child { margin-bottom: 0; }

.prose-h {
  font-size: clamp(25px, 2.4vw, 33px);
  letter-spacing: -.022em;
  margin-bottom: 18px;
}

h3.prose-h { font-size: clamp(20px, 1.7vw, 24px); }

.prose { color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { margin: 0 0 1.15em; font-size: var(--t-body); line-height: var(--lh-body); }

.prose h3 {
  font-size: clamp(19px, 1.6vw, 22px);
  margin: 1.8em 0 .6em;
  font-variation-settings: "wdth" var(--wdth-h3);
}

.prose h4 {
  font-size: 17px;
  margin: 1.6em 0 .5em;
  font-variation-settings: "wdth" 104;
}

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; line-height: 1.62; }
.prose li::marker { color: var(--brass); }

.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.prose a:hover { color: var(--brass-deep); text-decoration-color: var(--brass); }

.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--brass);
  font-size: var(--t-intro);
  line-height: 1.6;
  color: var(--navy);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--t-ui);
}

.prose th, .prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.prose th {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}

/* The opening summary reads a size up. Authority at the top, per Section 12. */
.lede-block .prose p {
  font-size: var(--t-intro);
  line-height: 1.62;
}

.lede-block { margin-bottom: clamp(34px, 4vw, 52px); }

.prose-post p { font-size: var(--t-intro); }

/* A post body is one block of HTML, so its h2s are not given .prose-h the way
   section headings are. Same size and spacing, set from the container. */
.prose-post h2 {
  font-size: clamp(25px, 2.4vw, 33px);
  letter-spacing: -.022em;
  margin: 1.7em 0 .6em;
}

/* --- stub marker, local only --- */

.stub-flag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: #FDF3D6;
  border: 1px solid #E2C377;
  color: #6B4E12;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- sidebar cards --- */

.aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-1);
}

.aside-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
}

.aside-body { font-size: var(--t-ui); color: var(--ink); margin: 0 0 20px; line-height: 1.58; }

.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li + li { margin-top: 2px; }

.aside-list a {
  display: block;
  padding: 9px 12px;
  margin-left: -12px;
  border-radius: var(--r-sm);
  font-size: var(--t-ui-sm);
  line-height: 1.4;
  color: var(--ink);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}

.aside-list a:hover { background: var(--mist); color: var(--navy); padding-left: 16px; }

/* The links card is on the navy ground; the quote card is the one light card
   left in a sidebar, which is now what tells the two apart at rest. Every dark
   rule below is scoped to .card-tint so nothing reaches .aside-quote. */
.aside-card.card-tint .aside-eyebrow { color: var(--brass-lt); }
.aside-card.card-tint .aside-list a { color: rgba(255, 255, 255, .88); }
.aside-card.card-tint .aside-list a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.aside-quote { background: var(--mist); border-color: var(--mist-2); box-shadow: none; }

.aside-phone {
  margin: 16px 0 0;
  text-align: center;
  font-size: var(--t-ui-sm);
}

.aside-phone a { color: var(--navy); font-weight: 500; }

.aside-updated {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--steel);
  letter-spacing: .04em;
  margin: 0;
  padding-left: 4px;
}

/* --- spec list, the label and value rows --- */

.spec-list {
  border-top: 1px solid var(--line);
  margin: 0 0 clamp(38px, 4vw, 58px);
}

.spec-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}

.spec-label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
}

.spec-value { font-size: var(--t-ui-sm); line-height: 1.55; }

@media (max-width: 560px) {
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- perils, chips, sources --- */

.peril-list {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.peril-list li {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .06em;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--navy);
}

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-static { cursor: default; }

.regulator-card {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px;
}

.regulator-name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-name);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -.015em;
  margin: 0 0 12px;
}

.regulator-name a { color: var(--navy); text-decoration: none; }
.regulator-name a:hover { color: var(--brass-deep); }

.sources-note { font-size: var(--t-ui-sm); color: var(--ink); margin: 0 0 18px; }

.gov-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.gov-links a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-ui-sm);
  color: var(--navy);
  background: #fff;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}

.gov-links a:hover {
  border-color: var(--line-hover-warm);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}

/* --- link cards --- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.link-card { position: relative; padding: 26px 28px 30px; }

.link-card-title, .cov h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-name);
  font-weight: 600;
  font-size: var(--t-body-sm);
  letter-spacing: -.012em;
  line-height: 1.28;
}

.link-card-title, .cov h3 { color: #fff; margin: 0 0 8px; }
.link-card-note, .cov-note { font-size: var(--t-sm); color: var(--on-dark-1); line-height: 1.5; margin: 0; }

.link-card-go { padding-top: 14px; }

.link-card-go svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1.6;
  fill: none;
  transition: stroke var(--dur) ease, transform var(--dur) ease;
}

.link-card:hover .link-card-go svg, .cov:hover .link-card-go svg { stroke: var(--brass-lt); transform: translateX(3px); }

/* The niche card photo (partials/card-photo): a strip bled to the card's
   edges, top corners clipped by the skin. A component, not a skin: no
   background, border or hover of its own, and no text on the photo. */
.card-photo {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-photo picture { display: block; height: 100%; }

.card-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.link-card.has-photo .card-photo { margin: -26px -28px 10px; }
.ind.has-photo .card-photo { margin: -38px -36px 30px; aspect-ratio: 2.2 / 1; }
.card-grid > .has-photo .card-photo { margin: -34px -32px 28px; aspect-ratio: 2.2 / 1; }
.card-bracket .bracket { z-index: 2; }

/* --- FAQ --- */

.faq { display: grid; gap: 10px; max-width: 900px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.faq-item[open] { border-color: var(--line-hover); box-shadow: var(--sh-1); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--navy); }

.faq-q {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-name);
  font-weight: 600;
  font-size: var(--t-body-sm);
  letter-spacing: -.01em;
  line-height: 1.35;
  transition: color var(--dur-fast) ease;
}

.faq-chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--steel-lt);
  stroke-width: 2;
  fill: none;
  transition: transform .2s ease, stroke .2s ease;
}

.faq-item[open] .faq-chev { transform: rotate(180deg); stroke: var(--brass); }

.faq-a { padding: 0 24px 22px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.faq-a p { font-size: var(--t-ui-sm); color: var(--ink); }
.faq-a p:last-child { margin-bottom: 0; }

/* --- closing CTA band --- */

.cta-band { background: var(--navy-2); color: #fff; }

.cta-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.cta-band h2 { max-width: 22ch; }
.cta-body { color: var(--on-dark-1); font-size: var(--t-body); margin: 20px 0 0; max-width: 54ch; }

.cta-actions { display: grid; gap: 14px; justify-items: stretch; }

.cta-phone {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .05em;
  color: var(--on-dark-4);
}

.cta-phone a { color: var(--brass-lt); margin-left: 8px; font-size: var(--t-ui-sm); }
.cta-phone a, .tb-phone { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; }
.tb-phone { font-size: var(--t-mono-sm); }

@media (max-width: 900px) {
  .cta-layout { grid-template-columns: 1fr; }
}

/* --- parent bar, on niche-state pages --- */

.parent-bar { background: var(--mist); border-bottom: 1px solid var(--line-soft); }

.parent-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.parent-bar-label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
}

.parent-bar a {
  font-size: var(--t-ui-sm);
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.parent-bar a:hover { text-decoration-color: var(--brass); }

/* --- related links, the generated mesh rendered ---------------------------
   The one block that renders internal_links: a list, not cards, because it is
   a footnote to the page. */

.sec-related {
  padding-top: calc(var(--sec-y) * .58);
  padding-bottom: calc(var(--sec-y) * .58);
  border-top: 1px solid var(--line-soft);
}

.sec-related .eyebrow { margin-bottom: 14px; }

.related-h {
  font-size: clamp(19px, 1.5vw, 22px);
  margin: 0 0 18px;
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.related-list li { border-top: 1px solid var(--line); }
.related-list li:first-child,
.related-list li:nth-child(2) { border-top: 0; }

.related-list a {
  display: block;
  padding: 11px 0;
  font-size: var(--t-ui-sm);
  line-height: 1.4;
  color: var(--navy);
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}

.related-list a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--brass);
  transition: width var(--dur-fast) ease;
}

.related-list a:hover { color: var(--brass); }
.related-list a:hover::before { width: 22px; }

@media (max-width: 720px) {
  .related-list { grid-template-columns: minmax(0, 1fr); }
  .related-list li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* --- state index regions --- */

.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
  align-items: start;
}

.region-card { padding: 26px 24px 20px; }

.region-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-h4);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--on-dark-line);
  color: #fff;
}

.region-count {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .06em;
}

.region-list { list-style: none; margin: 0; padding: 0; }

.region-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-left: -12px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}

.region-list a:hover { background: rgba(255, 255, 255, .07); padding-left: 16px; }

.region-abbr {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  color: var(--brass-lt);
  letter-spacing: .08em;
}

.region-state { font-size: var(--t-ui-sm); color: rgba(255, 255, 255, .88); }

/* --- 5.x The card system -------------------------------------------------
   Five skins from docs/card-styles.html, one job each; the rules and the
   exceptions are in CLAUDE.md. A skin owns ground, border, shadow, radius and
   hover; a component owns layout and type. Labels 4.5:1 on #16395C. */

.card-navy,
.card-icon,
.card-tint,
.card-ghost,
.card-bracket {
  position: relative;
  border-radius: var(--r-card);
  background: linear-gradient(155deg, #16395C 0%, #081726 80%);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) ease,
              background var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-slow) ease;
}

/* The corner glow. It blooms on hover rather than sitting there, so the rest
   state is flat navy and the motion is the whole effect. */
.card-navy::before,
.card-icon::before,
.card-tint::before,
.card-ghost::before,
.card-bracket::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  z-index: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 186, 102, .18), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Content sits above the glow. Anything that belongs behind it says so for
   itself, which is what .ghost-n does. */
.card-navy > *,
.card-icon > *,
.card-tint > *,
.card-ghost > *,
.card-bracket > * { position: relative; z-index: 1; }

.card-navy:hover,
.card-icon:hover,
.card-tint:hover,
.card-ghost:hover,
.card-bracket:hover {
  transform: translateY(var(--lift-card));
  border-color: rgba(221, 186, 102, .45);
  box-shadow: 0 22px 50px rgba(4, 12, 22, .5);
}

.card-navy:hover::before,
.card-icon:hover::before,
.card-tint:hover::before,
.card-ghost:hover::before,
.card-bracket:hover::before { opacity: 1; }

/* --- the accents --- */

/* A: the brass tile, unchanged from the mock. It was already the one spot of
   color on the card and it still is. */
.card-tile {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--brass-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 6px 14px rgba(160, 118, 31, .25);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) ease;
}

.card-tile svg { width: 22px; height: 22px; stroke: #1B1305; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.card-icon:hover .card-tile {
  transform: scale(1.07) rotate(-3deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px rgba(160, 118, 31, .35);
}

/* C: the arrow slides. */
.card-arrow { transition: transform var(--dur-slow) var(--ease-out); }
.card-tint:hover .card-arrow { transform: translateX(5px); }

/* D: the watermark numeral, warming to brass on hover. Floated into the top
   right corner rather than laid under the copy: the text wraps round it, so no
   line of a long step can run over it at any width. The negative margins pull
   it into the card's padding, where the absolute numeral used to sit. */
.ghost-n {
  float: right;
  margin: -22px -12px 4px 14px;
  z-index: 0;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(64px, 5.2vw, 96px);
  line-height: .9;
  color: rgba(255, 255, 255, .07);
  user-select: none;
  pointer-events: none;
  transition: color .3s ease, transform .3s var(--ease-out);
}

.card-ghost:hover .ghost-n { color: rgba(221, 186, 102, .26); transform: translateY(-4px) scale(1.04); }

/* E: the corner bracket, a nod to an architectural drawing. Brass, and carried
   a little heavier than the mock draws it, because .55 on white is not the
   same mark as .55 on navy. */
.bracket {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-top: 2px solid var(--brass-lt);
  border-right: 2px solid var(--brass-lt);
  border-radius: 0 6px 0 0;
  opacity: .7;
  pointer-events: none;
  transition: width .26s var(--ease-out), height .26s var(--ease-out), opacity .26s ease;
}

.card-bracket:hover .bracket { width: 44px; height: 44px; opacity: 1; }


/* --- index page card typography ---
   /industries/ on C, /coverage/ on A, and every card with this anatomy. The
   grids own padding and column flow; the skins are shared. */

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.card-grid > * { padding: 34px 32px; }

.card-tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 16px;
}

.card-tint h3 { margin-bottom: 12px; color: #fff; }

.card-body { color: var(--on-dark-1); margin: 0 0 var(--sp-6); line-height: var(--lh-copy); }
.card-tint .card-body { font-size: 15.5px; }

.card-spec {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  border-top: 1px solid var(--on-dark-line);
}

.card-spec li {
  font-size: var(--t-sm);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  gap: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

/* 62% white, not the 42% the mock draws. At 42% this label measures 3.31:1 on
   the light end of the card gradient and fails AA at 11px. */
.card-spec b {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  min-width: 98px;
  flex-shrink: 0;
  padding-top: 4px;
}

.card-link {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-ui-sm);
  color: var(--brass-lt);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


/* Reused by every A card, not only the index page, so the coverage grid on the
   home page and inside partials/coverage-lines.php gets the same tile. */
.cov .card-tile { margin-bottom: 16px; }

@media (max-width: 880px)  { .card-grid { grid-template-columns: 1fr; } }

/* --- card rows ---

   Every card is a subgrid over its grid's rows, so photo or tile, title,
   description and arrow start on shared lines across a row, whatever the text
   length. Each part names its row, so a card missing one keeps the rest on
   their lines. Without subgrid, minimum heights for two-line titles and notes
   hold the same lines. */
.link-card, .cov, .post-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.ind, .card-grid > * { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
.link-card > .card-photo, .cov > .card-tile, .post-cat, .ind > .card-photo, .card-grid .card-photo { grid-row: 1; }
.link-card-title, .cov h3, .post-card h3, .ind-tag, .card-tag { grid-row: 2; }
.link-card-note, .cov-note, .post-excerpt, .ind h3, .card-grid h3 { grid-row: 3; }
.link-card-go, .post-meta, .ind > p:not(.ind-tag), .card-body { grid-row: 4; }
.ind ul, .card-spec { grid-row: 5; }
.ind-link, .card-link { grid-row: 6; justify-self: start; }
.link-card-title, .cov h3, .ind h3, .card-grid h3, .post-card h3 { text-wrap: balance; }

@supports not (grid-template-rows: subgrid) {
  .link-card, .cov, .post-card, .ind, .card-grid > * { display: flex; flex-direction: column; }
  .link-card-title, .cov h3 { min-height: 2.56em; }
  .link-card-note, .cov-note { min-height: 3em; }
  /* Posts: a missing category keeps its line; titles hold 4 lines. */
  .post-card h3:first-child { margin-top: calc(var(--t-label) * var(--lh-body) + 14px); }
  .post-card h3 { min-height: calc(var(--lh-h3) * 4em); }
  .link-card-go, .post-meta, .ind-link, .card-link { margin-top: auto; }
}


/* --- light closing band: the .cta-layout shape on a light ground --- */

.sec-mist .cta-layout h2 { max-width: 22ch; }
.band-body { font-size: var(--t-body); color: var(--ink); margin: 20px 0 0; max-width: var(--measure); }

/* --- posts --- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

/* Below 360 the 300px track is wider than the container, and auto-fit keeps it,
   so the page scrolled sideways by 20px on the three templates that render this
   grid. One column, no minimum, and the overflow is gone. */
@media (max-width: 360px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { padding: 28px 28px 26px; }

.post-cat {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 14px;
}

.post-card h3 { font-size: var(--t-h4); margin-bottom: 12px; color: #fff; }
.post-card h3 a { color: inherit; }
.post-card:hover h3 a { color: var(--brass-lt); }

.post-excerpt { font-size: var(--t-ui-sm); color: var(--on-dark-1); margin: 0 0 20px; line-height: 1.58; }

.post-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: rgba(255, 255, 255, .62);
  letter-spacing: .04em;
}

/* The post hero is its own element (it carries a byline) and takes the band
   and the dark ground from .page-hero above. */
.post-hero h1 { max-width: 24ch; }

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: var(--sp-8) 0 0;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .05em;
  color: var(--on-dark-4);
}

.post-author { color: var(--brass-lt); font-weight: 500; }
a.post-author { text-decoration: underline; text-decoration-color: rgba(221, 186, 102, .4); text-underline-offset: 3px; }
a.post-author:hover { text-decoration-color: var(--brass-lt); }

.post-updated {
  margin: var(--sp-9) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--steel);
  letter-spacing: .04em;
}

.author-box {
  margin-top: var(--sp-8);
  padding: 24px 26px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.author-box-name { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); letter-spacing: -.015em; }
.author-box-name a { color: var(--navy); }
.author-box-cred { margin: 8px 0 0; font-size: var(--t-ui-sm); color: var(--steel); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: var(--sp-11);
}

.pager-position {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: .06em;
  color: var(--steel);
}

.empty-note {
  font-size: var(--t-intro);
  color: var(--steel);
  max-width: 62ch;
  padding: 30px 0;
}

/* --- author page --- */

.author-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}

.author-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--on-dark-line);
}

/* The photo column exists only when there is a photo. */
.author-hero-layout.has-photo { grid-template-columns: 280px minmax(0, 1fr); }

.author-links { margin-top: var(--sp-8); font-size: var(--t-ui-sm); }
.author-links a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .author-hero-layout.has-photo { grid-template-columns: 1fr; }
  .author-photo { max-width: 200px; }
}

/* --- broker, licenses, placed lines (about, author, quote) ---
   The broker panel is a facts surface, not a link: the navy card ground
   without the hover. Complete with no photo; the photo slot renders only
   when a headshot is set. */

.broker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin: var(--sp-10) 0;
}

.broker-card {
  overflow: hidden;
  border-radius: var(--r-card);
  background: linear-gradient(155deg, #16395C 0%, #081726 80%);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  padding: 28px 28px 14px;
}

.broker-photo { margin: -28px -28px 24px; }
.broker-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.broker-role,
.broker-facts dt {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0;
}

.broker-role { color: var(--brass-lt); }
.broker-facts dt { color: var(--on-dark-4); }

.broker-name {
  font-family: var(--f-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 10px 0 0;
}

.broker-facts {
  display: grid;
  gap: 14px;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.broker-facts dd { margin: 3px 0 0; font-size: var(--t-ui-sm); }

.broker-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-4);
  font-size: var(--t-ui-sm);
  color: var(--brass-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.broker-link:hover { color: #fff; }
.broker-bio .prose-h { margin-top: 0; }
.broker-bio .license-block { margin-top: var(--sp-10); }

.license-tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-left: 6px;
}

.prose .license-table th[scope="row"] {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.license-line { font-weight: 600; }

ul.placed-lines {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

ul.placed-lines li {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-ui-sm);
  line-height: 1.35;
}

.placed-lead { margin: var(--sp-8) 0 0; color: var(--ink); }

@media (min-width: 700px) {
  .wrap > ul.placed-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .wrap > ul.placed-lines { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Side by side from 641; 250 where the main column is narrowest. */
@media (min-width: 641px) {
  .broker { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); }
}

@media (min-width: 641px) and (max-width: 760px), (min-width: 1021px) and (max-width: 1179px) {
  .broker { grid-template-columns: 250px minmax(0, 1fr); }
}

/* 761 to 1179: the panel lies across the top, photo left and facts right,
   with the bio full width under it, so no column ends far above the other. */
@media (min-width: 761px) and (max-width: 1179px) {
  .broker { grid-template-columns: minmax(0, 1fr); }
  .broker-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 28px;
    align-content: start;
    padding-left: 0;
  }
  .broker-card > * { grid-column: 2; }
  .broker-card > .broker-photo {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: stretch;
    margin: -28px 0 -14px;
  }
  .broker-photo img { height: 100%; object-position: 50% 15%; }
  .broker-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .broker-link { justify-self: start; }
}

/* --- contact --- */

.contact-methods {
  display: grid;
  gap: 1px;
  margin: var(--sp-8) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.contact-method { background: #fff; padding: 20px 24px; }

.contact-method b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
  margin-bottom: 9px;
}

.contact-method a, .contact-method span { font-size: var(--t-body-sm); color: var(--ink); }
.contact-method a:hover { color: var(--navy); }

.contact-primary {
  font-family: var(--f-display) !important;
  font-weight: 700;
  font-size: 25px !important;
  letter-spacing: -.022em;
  color: var(--navy) !important;
}

/* --- legal --- */

/* .legal-head, .legal-lede and .legal-updated are gone. A privacy policy opened
   on a white band with its own h1 scale while every other interior page opened
   on navy, which made the legal pages look like a different site. They use the
   shared hero, .page-lede and .hero-meta now. */
.legal-body { padding-top: clamp(46px, 5vw, 76px); }
.legal-body .prose-block { margin-bottom: clamp(30px, 3vw, 44px); }


/* --- 5.21 Form states ----------------------------------------------------
   Phase 4. The field and button styles are unchanged from the approved design;
   everything here is the error, honeypot and submitting states it had no need
   for as static markup.
   ------------------------------------------------------------------------- */

/* The honeypot. Off screen rather than display:none, because a bot that reads
   the computed style skips anything hidden, and the point is that it fills this
   in. aria-hidden and tabindex=-1 in the markup keep it away from real people. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  margin-bottom: var(--sp-6);
  padding: 16px 20px;
  border: 1px solid #E0B4B4;
  border-radius: var(--r-sm);
  background: #FCF3F3;
  color: #7A2E2E;
  font-size: var(--t-ui-sm);
  line-height: 1.5;
}

.form-alert:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* An error is never color alone: a marked message under the field, a 2px
   border, and aria-invalid with aria-describedby on the control. */
.field-error {
  display: flex;
  gap: 7px;
  margin: 8px 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--err);
}

.field-error::before {
  content: "!";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font: 700 11.5px/17px var(--f-body);
  text-align: center;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border: 2px solid var(--err);
  background-color: #FDFAFA;
}

.field.has-error input:focus-visible,
.field.has-error select:focus-visible,
.field.has-error textarea:focus-visible { outline-color: var(--err); }

.field-optional {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--slate);
  text-transform: uppercase;
  margin-left: 6px;
}

/* A button rather than the anchor the static mockup used. Matched to .btn so
   nothing about the design changes. */
/* A <button> does not inherit font or line-height from the cascade the way the
   anchor the mockup used does, so both are restated to match .btn exactly. */
.form-foot button.btn {
  border: 1px solid transparent;
  font-family: var(--f-display);
  line-height: var(--lh-body);
}

.form.is-submitting button[type="submit"] {
  opacity: .72;
  pointer-events: none;
}

.form.is-submitting button[type="submit"]::after {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid rgba(27, 19, 5, .3);
  border-top-color: #1B1305;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- quote page and confirmation --- */

/* The body of the page; the hero is the shared interior hero. Left aligned on
   the container with the measure on the content, never a centered box. */
.thanks { padding-top: clamp(46px, 5vw, 76px); }

.thanks-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}

.thanks-steps li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}

.thanks-steps b {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}

.thanks-steps span { font-size: var(--t-ui-sm); color: var(--steel); line-height: 1.6; }

.thanks-contact {
  margin-top: var(--sp-11);
  max-width: var(--measure);
  padding: 28px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.thanks-contact p {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel);
}

.thanks-phone {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.025em;
  color: var(--navy);
}

.thanks-next { margin-top: var(--sp-11); }

.thanks-back { margin-top: var(--sp-9); font-size: var(--t-ui-sm); }
.thanks-back a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .thanks-steps li { grid-template-columns: 1fr; gap: 6px; }
}


/* ===========================================================================
   6. Utilities and motion
   =========================================================================== */

.mb-0 { margin-bottom: 0; }

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

/* Scroll reveal. Elements start offset and the observer adds .in. */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.rv.in { opacity: 1; transform: none; }

/* With scripting off nothing would ever add .in, so the reveal is canceled
   rather than leaving half the page invisible. This is done in CSS so no inline
   script is needed in the head to avoid a flash. */
@media (scripting: none), (scripting: initial-only) {
  .rv { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .drawer-panel, .drawer-scrim { transition: none; }

  /* Every card hover moves something. The color and shadow changes stay,
     because they carry the same information without the motion. */
  .card-navy:hover,
  .card-icon:hover,
  .card-tint:hover,
  .card-ghost:hover,
  .card-bracket:hover,
  .card-icon:hover .card-tile,
  .card-ghost:hover .ghost-n,
  .btn:hover { transform: none; }
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}