/* ---------------------------------------------------------------
   Fonts, served from this site.
   Previously these came from Google on every page load, which meant
   every visitor waited on a round trip to a third party before any
   text appeared. Same typefaces, now local. Subset to Latin.
   IBM Plex Sans and Mono: SIL Open Font License 1.1, IBM.
   Newsreader: SIL Open Font License 1.1, Production Type.
   --------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.woff") format("woff-variations"),
       url("fonts/ibm-plex-sans.woff") format("woff");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff") format("woff-variations"),
       url("fonts/newsreader.woff") format("woff");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
     PALETTE — Navy & Silver
     navy #041E42 · silver #869397 · metallic #A5ACAF

     LIGHT: white/pale ground, navy outlines, rules and buttons.
     DARK:  navy ground throughout — page, cards, click boxes,
            buttons. Wording is white; silver carries the rules,
            outlines, labels and accents.
     ============================================================ */

  :root {
    --ground:      #F4F6F8;
    --surface:     #FFFFFF;
    --surface-alt: #E9EDF1;
    --ink:         #041E42;
    --ink-mid:     #41576F;
    --ink-soft:    #6B7C8C;
    --rule:        #C3CEDA;
    --rule-soft:   #DFE6EC;

    --accent:      #041E42;
    --accent-lift: #0B3468;
    --silver:      #869397;
    --silver-lt:   #A5ACAF;

    --btn-bg:       #041E42;
    --btn-ink:      #FFFFFF;
    --btn-border:   #041E42;
    --btn-bg-hover: #0B3468;

    /* atmosphere */
    --metal:      linear-gradient(90deg, #041E42 0%, #041E42 45%, rgba(4,30,66,.22) 100%);
    --edge-hi:    transparent;
    --hero-glow:  radial-gradient(120% 85% at 78% -10%, rgba(4,30,66,.06), transparent 62%);
    --art-op:     .06;
    --grain:      0;
    --logo-url: url("logo.png");

    --closer-bg:   #041E42;
    --closer-ink:  #EEF2F6;
    --closer-card: #FFFFFF;
    --closer-rule: rgba(255,255,255,.20);

    --shadow: 0 1px 2px rgba(4,30,66,.06), 0 8px 24px -12px rgba(4,30,66,.24);

    --measure: 64ch;
    --pad: clamp(1.25rem, 5vw, 3rem);

    --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
    --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
    --step-2:  clamp(1.375rem, 1.24rem + .6vw, 1.75rem);
    --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
    --step-4:  clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:      #041E42;
      --surface:     #072A57;
      --surface-alt: #0D3A70;
      --ink:         #FFFFFF;
      --ink-mid:     #C2D0E0;
      --ink-soft:    #93A6BC;
      --rule:        #1B4478;
      --rule-soft:   #123763;

      --accent:      #BFC6C9;
      --accent-lift: #E0E4E6;
      --silver:      #97A0A5;
      --silver-lt:   #A5ACAF;

      --btn-bg:       #0D3A70;
      --btn-ink:      #FFFFFF;
      --btn-border:   #97A0A5;
      --btn-bg-hover: #15508F;

      /* atmosphere */
      --metal:      linear-gradient(90deg, #EDF1F2 0%, #A5ACAF 38%, #6E7A80 70%, rgba(151,160,165,.12) 100%);
      --edge-hi:    rgba(255,255,255,.11);
      --hero-glow:  radial-gradient(115% 90% at 74% -12%, rgba(126,170,222,.26), rgba(126,170,222,.05) 42%, transparent 68%);
      --art-op:     .17;
      --grain:      .035;

      --closer-bg:   #02142E;
      --closer-ink:  #FFFFFF;
      --closer-card: #0A2E5C;
      --closer-rule: rgba(255,255,255,.18);

      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.65);
    }
  }

  :root[data-theme="dark"] {
    --ground:      #041E42;
    --surface:     #072A57;
    --surface-alt: #0D3A70;
    --ink:         #FFFFFF;
    --ink-mid:     #C2D0E0;
    --ink-soft:    #93A6BC;
    --rule:        #1B4478;
    --rule-soft:   #123763;

    --accent:      #BFC6C9;
    --accent-lift: #E0E4E6;
    --silver:      #97A0A5;
    --silver-lt:   #A5ACAF;

    --btn-bg:       #0D3A70;
    --btn-ink:      #FFFFFF;
    --btn-border:   #97A0A5;
    --btn-bg-hover: #15508F;

    /* atmosphere */
    --metal:      linear-gradient(90deg, #EDF1F2 0%, #A5ACAF 38%, #6E7A80 70%, rgba(151,160,165,.12) 100%);
    --edge-hi:    rgba(255,255,255,.11);
    --hero-glow:  radial-gradient(115% 90% at 74% -12%, rgba(126,170,222,.26), rgba(126,170,222,.05) 42%, transparent 68%);
    --art-op:     .17;
    --grain:      .035;

    --closer-bg:   #02142E;
    --closer-ink:  #FFFFFF;
    --closer-card: #0A2E5C;
    --closer-rule: rgba(255,255,255,.18);

    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.65);
  }

  * { box-sizing: border-box; }

  /* fine grain so the large navy fields read as material, not flat paint */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: Newsreader, "Iowan Old Style", Georgia, serif;
    font-weight: 500;
    line-height: 1.12;
    text-wrap: balance;
    margin: 0;
    letter-spacing: -0.01em;
  }

  p { margin: 0; }
  a { color: inherit; }

  .wrap {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  .label {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ---------- left rail ---------- */

  .rail {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem 1.5rem;
    z-index: 30;
  }

  .wordmark { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
  .wordmark .stack { display: flex; flex-direction: column; gap: .1rem; }

  .logo {
    background: var(--logo-url) center / contain no-repeat;
    display: block;
    flex: none;
    height: clamp(46px, 6vw, 58px);
    aspect-ratio: 1;
  }

  .wordmark b {
    font-family: Newsreader, Georgia, serif;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.015em;
    line-height: 1.05;
  }

  .rail-cta { width: 100%; }

  .rail-facts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }

  .lic { display: grid; gap: .125rem; }
  .lic .who {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
  }
  .lic-call .who {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.0625rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .15s ease;
  }
  .lic-call .who:hover { color: var(--accent-lift); }

  .lic-mail .who {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    overflow-wrap: anywhere;
    line-height: 1.35;
    transition: color .15s ease;
  }
  .lic-mail .who:hover { color: var(--accent-lift); }
  .lic .num { color: var(--ink); font-weight: 500; letter-spacing: .08em; }

  .rail .label { color: var(--ink-soft); }
  .utility-dfs { line-height: 1.5; }

  .vet {
    justify-self: start;
    align-self: flex-start;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--silver);
    border-radius: 2px;
    padding: .3rem .55rem;
    white-space: nowrap;
  }

  .rail .themetoggle { align-self: flex-start; }

  /* pinned rail on wide screens */
  @media (min-width: 1080px) {
    :root { --rail: 300px; }

    .rail {
      position: fixed;
      inset: 0 auto 0 0;
      width: var(--rail);
      overflow-y: auto;
      padding: 2rem 1.75rem;
    }
    .rail::after {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%, var(--silver) 8%, var(--accent) 55%, rgba(128,128,128,.12) 100%);
    }
    .rail .themetoggle { margin-top: auto; }

  }

  /* stacked at the top on narrower screens */
  @media (max-width: 1079px) {
    .rail {
      border-bottom: 2px solid var(--accent);
      gap: 1.125rem;
      padding: 1.125rem var(--pad);
    }
    .rail-facts {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem 2rem;
    }
    .rail-cta { width: auto; align-self: flex-start; }
    .rail .themetoggle { align-self: flex-start; }
  }


  /* ---------- top bar ---------- */

  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 2px solid var(--accent);
  }

  .topbar-utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: .25rem var(--pad);
    border-bottom: 1px solid var(--rule-soft);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .75rem;
    letter-spacing: .01em;
  }
  .util-item { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
  .util-label {
    color: var(--ink-soft);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .625rem;
  }
  .topbar-utility a { color: var(--ink-mid); text-decoration: none; transition: color .15s ease; }
  .topbar-utility a:hover { color: var(--accent-lift); }

  /* Wordmark and controls hold the ends of one row; the nav gets a row
     of its own underneath, centerd, so seven items never fight for space
     and never wrap unpredictably as the window changes. */
  .topbar-main {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: .25rem 1.5rem;
    padding: .5rem var(--pad) .375rem;
  }

  .topbar .wordmark { grid-column: 1; grid-row: 1; }
  .topbar-actions { grid-column: 2; grid-row: 1; }

  .topbar .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.75rem;
  }
  .topbar .nav a {
    font-size: .8125rem;
    padding: .2rem 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .topbar .navdrop-toggle {
    font-size: .8125rem;
    padding: .2rem 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .topbar .nav a[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }

  .topbar-actions { display: flex; align-items: center; gap: .625rem; }

  /* search box, button and toggle share one height and one corner radius,
     so the cluster reads as one row of controls rather than three sizes */
  .topbar-search,
  .topbar-search input,
  .topbar .topbar-cta,
  .topbar .themetoggle {
    height: 44px;
    min-height: 44px;
    border-radius: 2px;
    box-sizing: border-box;
  }
  .topbar .topbar-cta,
  .topbar .themetoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
  }
  .topbar-search input { padding-block: 0; }

  /* ---------- site search ---------- */

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* the site's form rule is a grid with a top margin; the search box is
     neither, so it is reset here rather than inheriting a stacked form */
  .topbar-search {
    position: relative;
    display: block;
    margin: 0;
    gap: 0;
  }
  .topbar-search input {
    width: 9rem;
    padding: .5rem .7rem;
    min-height: 44px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: .8125rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: width .18s ease, border-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .topbar-search input::placeholder { color: var(--ink-soft); }
  .topbar-search input:focus {
    width: 15rem;
    outline: none;
    border-color: var(--accent);
  }

  .search-results {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(28rem, 70vh);
    overflow-y: auto;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    border-radius: 2px;
    box-shadow: var(--shadow);
    z-index: 80;
  }

  .search-hit {
    display: grid;
    gap: .1rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    color: var(--ink-mid);
  }
  .search-hit:last-child { border-bottom: 0; }
  .search-hit b { font-size: .875rem; color: var(--ink); font-weight: 600; line-height: 1.3; }
  .search-hit .search-page {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .search-hit .search-snip { font-size: .75rem; line-height: 1.5; color: var(--ink-soft); }
  .search-hit:hover,
  .search-hit[aria-selected="true"] { background: var(--surface-alt); color: var(--ink-mid); }
  .search-hit:hover b,
  .search-hit[aria-selected="true"] b { color: var(--accent-lift); }

  .search-empty { padding: .9rem; font-size: .8125rem; color: var(--ink-soft); margin: 0; }

  @media (max-width: 560px) {
    .topbar-search { position: static; }
    .topbar-search input { width: 7rem; }
    .topbar-search input:focus { width: 9rem; }
    .search-results { left: var(--pad); right: var(--pad); width: auto; }
  }

  .topbar-cta { white-space: nowrap; }
  .topbar .themetoggle {
    position: static;
    margin: 0;
    align-self: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* the wordmark and the buttons hold their ends; the nav drops to its
     own full-width row rather than squeezing */
  /* Stacked, the bar is too tall to pin without eating the screen, so
     below this width it scrolls away like an ordinary header. */
  @media (max-width: 1099px) {
    .topbar { position: static; }
    .topbar .nav { justify-content: flex-start; gap: .25rem 1.25rem; }
    html { scroll-padding-top: 1rem; }
  }

  /* Narrow: one column, everything stacked, nothing pushed off the edge. */
  @media (max-width: 780px) {
    .topbar-main { grid-template-columns: 1fr; justify-content: stretch; }
    .topbar .wordmark { grid-column: 1; grid-row: 1; }
    .topbar-actions { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
    .topbar .nav { grid-column: 1; grid-row: 3; }
    .topbar-search { flex: 1 1 8rem; }
    .topbar-search input { width: 100%; }
    .topbar-search input:focus { width: 100%; }
  }

  @media (max-width: 560px) {
    .topbar-utility { justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; font-size: .6875rem; }
    .topbar .wordmark b { font-size: var(--step-0); }
    .topbar-cta { font-size: .75rem; padding: .55rem .75rem; }
    .topbar .themetoggle { font-size: 0; width: 44px; padding: 0; }
    .topbar .themetoggle::before { content: "\25D0"; font-size: 1.125rem; line-height: 1; letter-spacing: 0; }
  }

  /* anchor links have to clear the sticky bar */
  html { scroll-padding-top: calc(var(--topbar-h, 7rem) + 1rem); }

  /* ---------- buttons ---------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .02em;
    padding: .75rem 1.25rem;
    border-radius: 2px;
    text-decoration: none;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
  }
  .btn:hover { background: var(--btn-bg-hover); }

  .themetoggle {
    font-family: "IBM Plex Mono", monospace;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: .375rem .5rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .themetoggle:hover { border-color: var(--accent); color: var(--ink); }

  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
  .btn.ghost:hover { border-color: var(--accent); background: transparent; color: var(--ink); }

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

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

  .hero {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* light source, upper right */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-glow);
    pointer-events: none;
  }

  /* storm bands and a forecast track — 20+ of them, after all */
  .hero-art {
    position: absolute;
    top: 50%;
    right: -14%;
    transform: translateY(-50%);
    width: min(820px, 78%);
    color: var(--silver-lt);
    opacity: var(--art-op);
    pointer-events: none;
  }
  @media (max-width: 1179px) { .hero-art { display: none; } }

  .hero .wrap { position: relative; z-index: 1; }



  .hero-center .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-center .tagline { font-size: var(--step-4); font-style: normal; color: var(--ink); }
  .hero-center h1 { font-size: var(--step-2); max-width: 30ch; margin-inline: auto; }
  .hero-center .lede { max-width: 62ch; margin-inline: auto; }

  .hero .wrap { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); grid-template-columns: 1fr; }

  .hero:not(.hero-center) .lede { max-width: 68ch; }

  .tagline {
    font-family: Newsreader, Georgia, serif;
    font-style: italic;
    font-size: var(--step-2);
    color: var(--accent);
    line-height: 1.2;
    display: block;
  }

  .hero h1 { font-size: var(--step-4); margin-block: .625rem 1.25rem; }
  .hero h1 em { font-style: italic; color: var(--accent); }

  .lede { font-size: var(--step-1); color: var(--ink-mid); max-width: 52ch; line-height: 1.55; }

  .guide-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.5rem;
    max-width: 68ch;
    margin-top: 1.75rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .guide-links > .label { width: 100%; }
  .guide-links a { font-size: .875rem; }


  /* The photograph headers put these links on the picture, so they take
     the same light treatment as the rest of the hero copy. Only visible
     below 1200px, where the right rail contents list is not yet showing. */
  .hero.storm .guide-links,
  .hero.storm-sat .guide-links,
  .hero.turf .guide-links,
  .hero.surge .guide-links,
  .hero.twister .guide-links,
  .hero.slab .guide-links,
  .hero.remediation .guide-links,
  .hero.burned .guide-links,
  .hero.gutted .guide-links,
  .hero.tornout .guide-links {
    border-top-color: rgba(255,255,255,.28);
    background: rgba(8,10,14,.52);
    border-radius: .5rem;
    padding: 1rem 1.125rem;
    margin-top: 2rem;
  }
  .hero.storm .guide-links > .label,
  .hero.storm-sat .guide-links > .label,
  .hero.turf .guide-links > .label,
  .hero.surge .guide-links > .label,
  .hero.twister .guide-links > .label,
  .hero.slab .guide-links > .label,
  .hero.remediation .guide-links > .label,
  .hero.burned .guide-links > .label,
  .hero.gutted .guide-links,
  .hero.gutted .guide-links > .label,
  .hero.tornout .guide-links > .label {
    color: rgba(255,255,255,.72);
    text-shadow: 0 1px 8px rgba(0,0,0,.85);
  }
  .hero.storm .guide-links a,
  .hero.storm-sat .guide-links a,
  .hero.turf .guide-links a,
  .hero.surge .guide-links a,
  .hero.twister .guide-links a,
  .hero.slab .guide-links a,
  .hero.remediation .guide-links a,
  .hero.burned .guide-links a,
  .hero.gutted .guide-links,
  .hero.gutted .guide-links a,
  .hero.tornout .guide-links a {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 12px rgba(0,0,0,.85);
  }

  /* The right rail carries the contents list once it pins, so the
     header copy stands down and stops saying the same thing twice. */
  @media (min-width: 1200px) { .guide-links { display: none; } }


  .record-head { padding: .75rem 1.125rem; border-bottom: 1px solid var(--rule); background: var(--surface-alt); }

  .record dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }

  .record dt {
    font-family: "IBM Plex Mono", monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: .8125rem 1rem .8125rem 1.125rem;
    border-bottom: 1px solid var(--rule-soft);
    white-space: nowrap;
  }

  .record dd {
    margin: 0;
    padding: .8125rem 1.125rem .8125rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .record dl > :nth-last-child(-n+2) { border-bottom: 0; }
  .record .mono { font-family: "IBM Plex Mono", monospace; font-weight: 500; }

  /* ---------- sections ---------- */

  section { padding-block: clamp(3rem, 7vw, 5.5rem); }

  .sec-head {
    display: flex;
    align-items: baseline;
    gap: .875rem;
    margin-bottom: 2rem;
    padding-bottom: .875rem;
    position: relative;
  }
  .sec-head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--metal);
  }

  .sec-head h2 { font-size: var(--step-3); flex: 1 1 auto; }

  .prose { max-width: var(--measure); display: grid; gap: 1.125rem; color: var(--ink-mid); }
  .prose strong { color: var(--ink); font-weight: 600; }

  /* sits under the two claim panels and runs their full width, not the
     narrower reading measure */
  .claims-close {
    margin-top: 2.25rem;
    max-width: none;
    color: var(--ink-mid);
    font-size: var(--step-0);
    line-height: 1.65;
  }

  .band { background: var(--surface); border-block: 1px solid var(--rule); }

  /* ---------- origin ---------- */

  .statement {
    font-family: Newsreader, Georgia, serif;
    font-size: var(--step-2);
    line-height: 1.35;
    max-width: 52ch;
    color: var(--ink-mid);
    border-left: 3px solid var(--silver);
    padding-left: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
    text-wrap: balance;
  }
  /* breathing room when a statement follows body copy rather than a heading */
  .prose + .statement, ul + .statement, ol + .statement { margin-top: clamp(2rem, 4.5vw, 3rem); }
  .statement em {
    font-style: italic;
    color: var(--ink);
    display: block;
    margin-top: .375rem;
  }

  .statement-close {
    margin-bottom: 0;
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
    max-width: 62ch;
  }

  .origin { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .origin { grid-template-columns: repeat(2, 1fr); } }

  .origin article {
    display: grid;
    gap: .625rem;
    align-content: start;
    padding-top: 1rem;
    border-top: 3px solid var(--silver);
  }

  .origin h3 { font-size: var(--step-2); }
  .origin p { color: var(--ink-mid); font-size: var(--step--1); line-height: 1.65; }

  /* ---------- claim grid ---------- */

  .claims {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
  }

  .claims a {
    background: var(--surface);
    padding: 1.125rem 1.25rem;
    text-decoration: none;
    display: grid;
    gap: .25rem;
    align-content: start;
    box-shadow: inset 0 1px 0 var(--edge-hi);
    transition: background .15s ease;
  }
  .band .claims a { background: var(--ground); }
  .claims a:hover { background: var(--surface-alt); }

  .claims b {
    font-family: Newsreader, Georgia, serif;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.01em;
  }
  .claims span { font-size: var(--step--1); color: var(--ink-soft); }

  /* ---------- process ---------- */

  .steps { display: grid; gap: 0; }

  .steps article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.25rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
  }
  .steps article:first-child { border-top: 1px solid var(--rule); }

  .steps .num {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step--1);
    color: var(--silver);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .steps h3 { font-size: var(--step-2); }
  .steps p {
    grid-column: 2;
    color: var(--ink-mid);
    max-width: 58ch;
    margin-top: .5rem;
    font-size: var(--step--1);
    line-height: 1.65;
  }

  /* ---------- situations ---------- */

  .situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }

  .situations article {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 var(--edge-hi);
    padding: 1.375rem 1.5rem;
    display: grid;
    gap: .5rem;
    align-content: start;
  }
  .band .situations article { background: var(--ground); }

  .situations h3 { font-size: var(--step-1); }
  .situations p { color: var(--ink-mid); font-size: var(--step--1); line-height: 1.65; }

  /* ---------- statute list ---------- */

  .statutes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .statutes li {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: .25rem 1rem;
    align-items: baseline;
    padding: .625rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .statutes li:first-child { border-top: 1px solid var(--rule-soft); }
  .statutes a {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--accent-lift);
    text-decoration: none;
    white-space: nowrap;
  }
  .statutes a:hover { text-decoration: underline; }
  .statutes span { font-size: var(--step--1); color: var(--ink-mid); line-height: 1.45; }
  @media (max-width: 560px) {
    .statutes li { grid-template-columns: 1fr; }
  }

  /* statute text, folded away until asked for */

  .statutes details { grid-column: 1 / -1; margin-top: .5rem; }
  .statutes summary {
    cursor: pointer;
    display: inline-block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: .2rem 0;
  }
  .statutes summary:hover { color: var(--accent-lift); }
  .statutes details[open] summary { color: var(--ink-mid); }
  /* a subsection citation must not be uppercased — (1)(i) is not (1)(I) */
  .statutes summary .cite { text-transform: none; }

  .lawtext {
    margin-top: .75rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    max-height: 32rem;
    overflow-y: auto;
  }
  .lawtext p {
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ink-mid);
    margin: 0 0 .75rem;
    /* the F.A.C. rules quote long URLs; they must not push the page wide */
    overflow-wrap: anywhere;
  }
  .lawtext p:last-child { margin-bottom: 0; }
  .lawtext .sub  { padding-left: 1.25rem; }
  .lawtext .sub2 { padding-left: 2.5rem; }
  .lawtext .sub3 { padding-left: 3.75rem; }
  .lawtext .sub4 { padding-left: 5rem; }
  /* the statute itself specifies 18-point uppercase boldface for these */
  .lawtext .notice {
    margin: 1rem 0 1rem 1.25rem;
    padding: .875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    font-weight: 700;
    letter-spacing: .01em;
  }
  .lawtext .hist {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rule-soft);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    color: var(--ink-soft);
  }

  /* ---------- fees ---------- */

  .fees { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
  @media (min-width: 1000px) { .fees { grid-template-columns: 1.2fr 1fr; } }

  .fee-table {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 2px;
    background: var(--surface);
    align-self: start;
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--edge-hi);
  }
  .band .fee-table { background: var(--ground); }

  .fee-row { display: grid; gap: .25rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--rule-soft); }
  .fee-row:last-child { border-bottom: 0; }
  .fee-row b {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-2);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .fee-row span { font-size: var(--step--1); color: var(--ink-mid); }

  /* ---------- placeholder ---------- */

  /* ---------- claim wheel ---------- */
  .wheel-lede { text-align: center; margin-inline: auto; }

  .wheel-note {
    margin-top: 1.5rem;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }


  .wheel { position: relative; --n: 7; --bub: 11rem; --r: 17.25rem; }
  :root { --hub-fill: #07066a; }
  :root[data-theme="dark"] { --hub-fill: var(--ground); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hub-fill: var(--ground); } }
  :root {
    --scrim: linear-gradient(to bottom, rgba(4,30,66,0) 34%, rgba(4,30,66,.20) 56%, rgba(4,30,66,.78) 100%);
    --scrim-hover: linear-gradient(to bottom, rgba(4,30,66,0) 40%, rgba(4,30,66,.12) 60%, rgba(4,30,66,.68) 100%);
  }
  :root[data-theme="dark"] {
    --scrim: linear-gradient(to bottom, rgba(2,14,32,0) 34%, rgba(2,14,32,.24) 56%, rgba(2,14,32,.82) 100%);
    --scrim-hover: linear-gradient(to bottom, rgba(2,14,32,0) 40%, rgba(2,14,32,.14) 60%, rgba(2,14,32,.7) 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --scrim: rgba(2,14,32,.34); --scrim-hover: rgba(2,14,32,.18); }
  }

  /* narrow screens: a plain stack, no geometry */
  .wheel-ring { display: grid; gap: .75rem; }
  .wheel-spokes, .wheel-core { display: none; }

  .wheel-ring .mark { display: none; }

  .wheel-ring a {
    display: block;
    text-decoration: none;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--edge-hi);
    transition: border-color .15s ease, transform .15s ease;
  }
  .wheel-ring a b {
    display: block;
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--ink);
    line-height: 1.25;
  }
  .wheel-ring a span {
    display: block;
    margin-top: .3rem;
    font-size: var(--step--1);
    color: var(--ink-mid);
    line-height: 1.45;
  }
  .wheel-ring a:hover { border-color: var(--accent); }

  @media (min-width: 1000px) {
    .wheel {
      width: min(100%, 46rem);
      margin-inline: auto;
      aspect-ratio: 1;
    }
    .wheel-spokes {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .wheel-spokes line {
      stroke: var(--rule);
      stroke-width: .35;
    }
    .wheel-core {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 26%;
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 0;
      background: var(--hub-fill) url("logo.png") center / 72% auto no-repeat;
      box-shadow: inset 0 1px 0 var(--edge-hi);
    }
    .wheel-ring { display: block; }
    .wheel-ring a {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--bub);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1rem;
      transform:
        translate(-50%, -50%)
        rotate(calc(var(--i) * (360deg / var(--n)) - 90deg))
        translate(var(--r))
        rotate(calc(-1 * (var(--i) * (360deg / var(--n)) - 90deg)));
    }
    .wheel-ring .mark {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 68%;
      height: 68%;
      transform: translate(-50%, -50%);
      fill: none;
      stroke: var(--accent);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .13;
      pointer-events: none;
    }
    /* drop-in photography: set --img on the anchor and the picture takes over
       from the drawn mark. Square images, 800px minimum. */
    .wheel-ring a[style*="--img"] { background-image: var(--img); background-size: cover; background-position: center; }
    .wheel-ring a[style*="--img"] .mark { display: none; }
    .wheel-ring a[style*="--img"]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--scrim);
      transition: background .15s ease;
    }
    .wheel-ring a[style*="--img"]:hover::before { background: var(--scrim-hover); }
    .wheel-ring a[style*="--img"] { justify-content: flex-end; padding-bottom: 1.9rem; }
    .wheel-ring a[style*="--img"] b { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6); }

    .wheel-ring a b {
      position: relative;
      font-size: var(--step--1);
      line-height: 1.2;
    }
    .wheel-ring a span { display: none; }
    .wheel-ring a:hover { border-color: var(--accent); }
    .wheel-ring a:hover .mark { opacity: .22; }
  }

  .quotes { display: grid; gap: 1.5rem; }
  .quotes:not(.two) .quote { max-width: 76ch; }
  @media (min-width: 900px) { .quotes.two { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } }

  .quote {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
    border-radius: 2px;
    background: var(--surface);
    padding: clamp(1.25rem, 3vw, 1.875rem);
    box-shadow: inset 0 1px 0 var(--edge-hi);
  }
  .quote blockquote {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
  }
  .quote blockquote p { margin: 0 0 .875rem; }
  .quote blockquote p:last-child { margin-bottom: 0; }
  .quote figcaption {
    margin-top: 1.125rem;
    padding-top: .875rem;
    border-top: 1px solid var(--rule-soft);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .quote figcaption b { color: var(--ink-mid); font-weight: 500; }

  .placeholder {
    border: 2px dashed var(--silver);
    border-radius: 2px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: grid;
    gap: .75rem;
    text-align: center;
    justify-items: center;
  }
  .placeholder h3 { font-size: var(--step-2); }
  .placeholder p { color: var(--ink-mid); max-width: 56ch; font-size: var(--step--1); }

  .flag {
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--silver-lt);
    border-radius: 2px;
    padding: .1rem .375rem;
    vertical-align: middle;
    margin-left: .5rem;
  }

  /* ---------- areas ---------- */

  .areas { display: grid; gap: 0; }
  .area-row { display: grid; gap: .5rem; padding-block: 1.125rem; border-bottom: 1px solid var(--rule); }
  .area-row:first-child { border-top: 1px solid var(--rule); }
  @media (min-width: 720px) {
    .area-row { grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: baseline; }
  }
  .area-row p { color: var(--ink-mid); font-size: var(--step--1); }

  /* ---------- closer + form ---------- */

  .closer {
    background: var(--closer-bg);
    color: var(--closer-ink);
    padding-block: clamp(3rem, 7vw, 5rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .closer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-glow);
    pointer-events: none;
  }
  .closer > .wrap { position: relative; z-index: 1; }

  .closer .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
  /* Contact reads top to bottom: the wording first, the form beneath it
     running the full width. Single column at every size. */
  .closer .wrap { grid-template-columns: minmax(0,1fr); }
  .closer .closer-copy { max-width: none; }
  .closer .form-card { width: 100%; }

  .closer h2 { font-size: var(--step-3); color: var(--closer-ink); }
  /* Scoped to the left column only. Previously `.closer p`, which also
     captured the paragraphs inside the white form card and painted them
     near-white on white. */
  .closer .closer-copy > p { color: var(--closer-ink); opacity: .8; max-width: none; margin-top: .875rem; }
  .closer .label { color: var(--closer-ink); opacity: .6; }

  .closer .tel-big {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-3);
    color: var(--closer-ink);
    text-decoration: none;
    display: inline-block;
    margin-top: 1.5rem;
    letter-spacing: -0.02em;
  }
  .closer .tel-big:hover { color: var(--silver-lt); }

  .closer .sig { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--closer-rule); }
  .closer .sig p { font-size: var(--step--1); opacity: .7; margin-top: 0; }

  /* form */

  .form-card {
    background: var(--closer-card);
    border: 1px solid var(--closer-rule);
    border-radius: 2px;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow);
    color: var(--ink);
  }

  .form-card h3 { font-size: var(--step-2); color: var(--ink); }
  .form-card > .label { color: var(--ink-soft); }
  .form-card .intro { font-size: var(--step--1); color: var(--ink-mid); margin-top: .5rem; opacity: 1; }

  form { display: grid; gap: 1rem; margin-top: 1.5rem; }

  .field { display: grid; gap: .375rem; }
  .field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }

  .field label {
    font-family: "IBM Plex Mono", monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .field input,
  .field select,
  .field textarea {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: var(--step-0);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: .625rem .75rem;
    width: 100%;
    transition: border-color .15s ease;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { border-color: var(--accent); }
  .field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }

  .req { color: var(--accent); }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Navy in light, silver in dark — both readable on their own card. */
  .form-card .form-note {
    font-size: .8125rem;
    color: var(--accent);
    opacity: 1;
    line-height: 1.55;
    max-width: none;
    margin-top: 0;
  }

  /* ---------- footer ---------- */

  footer { padding-block: 2.5rem 3rem; position: relative; }
  footer::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background: var(--metal); }
  .foot { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .foot div { display: grid; gap: .375rem; align-content: start; }
  .foot p, .foot a { font-size: var(--step--1); color: var(--ink-mid); }
  .foot a { text-decoration: none; }
  .foot a:hover { color: var(--accent-lift); }

  /* every page listed once, grouped — the crawler's map of the site and a
     way out for anyone who did not find what they came for */
  .sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule-soft);
  }
  .sitemap div { display: grid; gap: .3rem; align-content: start; }
  .sitemap a {
    font-size: var(--step--1);
    color: var(--ink-mid);
    text-decoration: none;
    line-height: 1.45;
  }
  .sitemap a:hover { color: var(--accent-lift); }
  .sitemap > div > .label { margin-bottom: .35rem; }
  .sitemap-more {
    font-size: var(--step--1);
    color: var(--ink-soft);
    line-height: 1.45;
    font-style: italic;
  }

  .solicitation {
    margin-top: 1.25rem;
    padding: .875rem 1.125rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--surface-alt);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ink-mid);
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
  }

  /* Required-style disclosure for the testimonials page. Sits above the
     colophon so it reads before the general site notices. */
  .testimonial-notice {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule-soft);
    text-align: center;
    font-size: .75rem;
    line-height: 1.65;
    color: var(--ink-mid);
  }

  .copyright {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule-soft);
    text-align: center;
    font-size: .6875rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .colophon {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-soft);
    font-size: .8125rem;
    color: var(--ink-mid);
    line-height: 1.6;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ---------- primary navigation ---------- */

  .nav { display: flex; flex-direction: column; gap: .25rem; }

  @media (max-width: 1079px) {
    .nav { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
  }

  .nav a {
    font-size: var(--step-0);
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-mid);
    padding: .3125rem 0 .3125rem .75rem;
    border-left: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .nav a:hover { color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); }

  @media (max-width: 1079px) {
    .nav a {
      font-size: var(--step--1);
      padding: .25rem 0;
      border-left: 0;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
    }
    .nav a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--accent); }
  }

  /* ---------- checklists ---------- */

  .checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 72ch; }

  .checklist li {
    display: block;
    position: relative;
    padding: .9375rem 0 .9375rem 1.5rem;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-mid);
    font-size: var(--step--1);
    line-height: 1.65;
  }
  .checklist li:first-child { border-top: 1px solid var(--rule-soft); }
  .checklist li strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1.35;
    margin-bottom: .3125rem;
  }

  .checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 1px;
  }

  /* ---------- callout ---------- */

  .callout {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--edge-hi);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    display: grid;
    gap: .625rem;
    max-width: 72ch;
  }
  .band .callout { background: var(--ground); }
  .callout h3 { font-size: var(--step-2); }
  .callout p { color: var(--ink-mid); font-size: var(--step--1); line-height: 1.65; }
  .callout .btn { justify-self: start; margin-top: .375rem; }
  .callout .btn-row { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .375rem; }
  .callout .btn-row .btn { margin-top: 0; }

  .lede-sec { max-width: 68ch; color: var(--ink-mid); font-size: var(--step-1); line-height: 1.55; margin-bottom: 2rem; }

  /* ---------- quoted policy language ---------- */

  .policy {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--silver);
    border-radius: 2px;
    background: var(--surface-alt);
    padding: clamp(1.125rem, 3vw, 1.625rem);
    display: grid;
    gap: .75rem;
    max-width: 74ch;
    margin-block: 1.75rem;
  }
  .policy > .label { color: var(--ink-soft); }
  .policy p {
    font-size: var(--step--1);
    color: var(--ink);
    line-height: 1.7;
  }
  .policy p em { font-style: normal; color: var(--ink-mid); }
  .policy .cite {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ---------- worked scenario ---------- */

  .scenario {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
    border-radius: 2px;
    background: var(--surface-alt);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    max-width: 74ch;
    margin-block: 1.75rem;
    display: grid;
    gap: 0;
  }
  .scenario > .label { color: var(--ink-soft); margin-bottom: .875rem; }
  .scenario p {
    font-size: var(--step--1);
    color: var(--ink-mid);
    line-height: 1.65;
    padding-block: .625rem;
    border-top: 1px solid var(--rule-soft);
  }
  .scenario p:first-of-type { border-top: 0; padding-top: 0; }
  .scenario p strong { color: var(--ink); font-weight: 600; }
  .scenario .outcome { color: var(--ink); font-weight: 600; }

  /* ---------- right rail: contents + controls ---------- */

  .siderail { display: block; }

  @media (min-width: 1200px) {
    :root { --siderail: 268px; }

    .siderail {
      position: fixed;
      inset: var(--topbar-h, 7rem) auto 0 0;
      width: var(--siderail);
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
      padding: 2rem 1.5rem;
      background: var(--surface);
      overflow-y: auto;
      z-index: 30;
    }
    .siderail::before {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%, var(--silver) 8%, var(--accent) 55%, rgba(128,128,128,.12) 100%);
    }

    main { margin-left: var(--siderail); }
    main.no-rail { margin-left: 0; }

  }

  .siderail .themetoggle { align-self: flex-start; }

  .toc { display: flex; flex-direction: column; gap: .125rem; }
  .toc > .label { margin-bottom: .5rem; }

  .toc a {
    font-size: .8125rem;
    line-height: 1.35;
    text-decoration: none;
    color: var(--ink-soft);
    padding: .375rem 0 .375rem .75rem;
    border-left: 2px solid var(--rule);
    transition: color .15s ease, border-color .15s ease;
  }
  .toc a:hover { color: var(--ink); border-left-color: var(--silver); }
  .toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }

  /* ---------- storm map ---------- */




  /* ---- storms worked: right rail ------------------------------ */
  .railstorms { display: flex; flex-direction: column; gap: .625rem; }
  .railstorms > .label { display: flex; align-items: baseline; gap: .4rem; }
  .railstorms > .label .num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--ink);
    font-size: .8125rem;
    letter-spacing: 0;
  }

  .stormlist { list-style: none; margin: 0; padding: 0; }
  .stormlist li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: 0 .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .stormlist li:first-child { border-top: 1px solid var(--rule-soft); }
  .stormlist .yr {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }
  .stormlist .nm { font-weight: 600; font-size: .875rem; color: var(--ink); }
  .stormlist .pl {
    grid-column: 2;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--ink-soft);
    margin-top: .1rem;
  }
  .railnote {
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: .25rem 0 0;
  }

  /* narrow screens: the storm list moves into the page, above Contact */
  .stormsnarrow { display: block; padding-top: 0; }
  .stormsnarrow > .label { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .75rem; }
  .stormsnarrow > .label .num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--ink); font-size: .8125rem; letter-spacing: 0;
  }
  .stormlist.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0 1.5rem;
  }
  .stormlist.compact li { padding: .45rem 0; }
  .stormlist.compact li:nth-child(2) { border-top: 1px solid var(--rule-soft); }
  @media (min-width: 1360px) { .stormsnarrow { display: none; } }
  @media (max-width: 480px) {
    .stormlist.compact { grid-template-columns: 1fr 1fr; }
    .stormlist.compact .nm { font-size: .8125rem; }
  }

  /* ---------- storms in the header ---------- */

  .stormblock {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .stormblock > .label {
    display: flex; align-items: baseline; gap: .4rem;
    margin-bottom: .875rem;
  }
  .stormblock > .label .num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--ink); font-size: .8125rem; letter-spacing: 0;
  }
  .stormgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 0 2rem;
  }
  .stormgrid li {
    border-top: 1px solid var(--rule-soft);
    border-bottom: 0;
    padding: .5rem 0 .55rem;
  }
  .stormblock .railnote { margin-top: .875rem; }

  /* ---------- adjuster of record, in the right rail ---------- */

  .siderail .record { border-top-width: 2px; }
  .siderail .record-head { padding: .625rem .875rem; }
  .siderail .record dl { grid-template-columns: 1fr; }
  .siderail .record dt {
    padding: .625rem .875rem .1rem;
    border-bottom: 0;
    font-size: .5625rem;
    line-height: 1.35;
    white-space: normal;
  }
  .siderail .record dd {
    padding: 0 .875rem .625rem;
    text-align: left;
    font-size: .8125rem;
  }

  /* Below the pinning width the rail is not a rail: it becomes a
     closing credentials block above the footer, and the contents
     list is dropped because the page is short enough to scroll. */
  @media (max-width: 1199px) {
    .siderail {
      position: static;
      width: 100%;
      max-width: 1120px;
      margin-inline: auto;
      padding: clamp(2.5rem, 7vw, 4rem) var(--pad);
      background: none;
      overflow: visible;
    }
    .siderail::before { display: none; }
    .siderail .toc { display: none; }
    .siderail .record { max-width: 30rem; }
  }

  /* ---- theme toggle: fixed top right at every width -------------
     One button, one place. The left rail's copy is promoted to a
     fixed chip; the right rail's copy is retired so there is never
     more than one on screen. ------------------------------------ */
  .siderail .themetoggle { display: none; }

  .rail .themetoggle {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.875rem);
    z-index: 90;
    margin: 0;
    align-self: auto;
    padding: .5rem .7rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: saturate(1.4) blur(6px);
    backdrop-filter: saturate(1.4) blur(6px);
    min-height: 44px;          /* Apple's minimum tap target */
    min-width: 44px;
    justify-content: center;
  }
  .rail .themetoggle:hover { border-color: var(--accent); color: var(--ink); }

  /* keep the chip clear of the contents list on wide screens */
  
  /* very small screens: shorten to a single word so it stays a chip */
  @media (max-width: 420px) {
    .rail .themetoggle { font-size: .5625rem; padding: .5rem .6rem; }
  }

  /* The left rail becomes a stacking context when it pins, so the
     toggle inside it can never rise above the right rail unless the
     rail itself outranks it. */
  .rail { z-index: 40; }

  /* Phones: collapse the chip to a 44px icon so it covers as little
     text as possible. The label stays in the accessibility tree. */
  @media (max-width: 720px) {
    .rail .themetoggle { font-size: 0; width: 44px; padding: 0; }
    .rail .themetoggle::before {
      content: "\25D0";
      font-size: 1.125rem;
      line-height: 1;
      letter-spacing: 0;
    }
  }

  /* Section numbers sized to match their heading. Stacked rather than
     inline: at this size an uppercase mono label in the same row wraps
     and squeezes the heading beside it. */
  .sec-head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .sec-head > .label {
    font-size: var(--step-3);
    letter-spacing: .06em;
    line-height: 1.1;
  }
  @media (max-width: 560px) {
    .sec-head > .label { font-size: var(--step-2); letter-spacing: .04em; }
  }

  /* Four cards in an auto-fit grid land three-up with an orphan on the
     fourth. Two columns keeps them square and gives each card more
     measure to read against. */
  .situations { grid-template-columns: 1fr; }
  @media (min-width: 720px) {
    .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Nine boxes read best as a true 3x3. Scoped to the homeowners grid;
     the commercial page has ten and stays on auto-fill. */
  @media (min-width: 700px) {
    .claims-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* Eight boxes as 3 / 2 / 3, the middle pair inset half a box on each
     side. Six columns, every box spanning two of them; the container
     drops its own background so the empty half-columns don't show, and
     each box draws its own hairline instead. */
  @media (min-width: 820px) {
    .claims-inset {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      background: transparent;
      border: 0;
      overflow: visible;
    }
    .claims-inset a { box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 1px var(--rule); }
    .claims-inset a:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    .claims-inset a:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
    .claims-inset a:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }
    .claims-inset a:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
    .claims-inset a:nth-child(5) { grid-column: 4 / 6; grid-row: 2; }
    .claims-inset a:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }
    .claims-inset a:nth-child(7) { grid-column: 4 / 6; grid-row: 3; }
  }

  /* form status messages */
  .form-status {
    margin: 1rem 0 0;
    padding: .75rem .875rem;
    font-size: var(--step--1);
    line-height: 1.55;
    border-left: 3px solid var(--accent);
    background: var(--surface-alt);
    color: var(--ink);
  }
  .form-status.ok { border-left-color: var(--silver); }
  .form-status a { color: inherit; }
  .cf-turnstile:empty { display: none; }

  /* Contact paragraph: Call and email are live links, underlined so they
     read as actions rather than words. */
  .closer-copy p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
  }
  .closer-copy p a:hover { text-decoration-thickness: 2px; }

  /* ---- Loss boxes (Claims Handled grid) ---------------------------------
     A consistent replacement for the per-page loss lists. Same object on
     every page: image band, name, one short line. Links where a page
     exists; the plain <div> variant is for losses with no page yet.      */
  .lossgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
    list-style: none;
    padding: 0;
  }
  /* Even rows: the page says how many across, so a short last row centers
     under the one above it instead of hanging off to the left. */
  .lossgrid > a, .lossgrid > .nolink { flex: 0 1 calc(50% - .5rem); }
  @media (min-width: 720px) {
    .lossgrid.cols-3 > a, .lossgrid.cols-3 > .nolink { flex: 0 1 calc(33.333% - .667rem); }
    .lossgrid.cols-4 > a, .lossgrid.cols-4 > .nolink { flex: 0 1 calc(25% - .75rem); }
  }
  @media (max-width: 719px) {
    .lossgrid > a, .lossgrid > .nolink { flex: 0 1 100%; }
  }
  .lossgrid a, .lossgrid .nolink {
    display: block;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .lossgrid a:hover, .lossgrid a:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
  }
  .lossgrid .pic {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--rule);
    filter: saturate(.85);
  }
  .lossgrid .nolink .pic { opacity: .55; }
  .lossgrid b {
    display: block;
    padding: .7rem .85rem .15rem;
    font-size: .95rem;
    line-height: 1.25;
    letter-spacing: .01em;
  }
  .lossgrid span {
    display: block;
    padding: 0 .85rem .8rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--ink-soft);
  }

  /* ---- Do / Don't pair --------------------------------------------------- */
  .dodont { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
  @media (min-width: 820px) { .dodont { grid-template-columns: 1fr 1fr; } }
  .dodont > div {
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 1.25rem 1.35rem 1.4rem;
    background: var(--surface);
  }
  .dodont h3 {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .dodont .do  { border-top: 3px solid var(--accent); }
  .dodont .dont { border-top: 3px solid #b3402f; }
  .dodont ul { margin: 0; padding-left: 1.1rem; }
  .dodont li { margin: 0 0 .6rem; line-height: 1.5; font-size: .95rem; }
  .dodont li:last-child { margin-bottom: 0; }

  /* ---- Identity moved into the masthead ---------------------------------
     Address and credentials sit under the wordmark; the license numbers
     sit in the utility bar with the phone and email. Together these carry
     what used to live in the footer identity block.                      */
  .wordmark .addr,
  .wordmark .creds {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .02em;
    line-height: 1.45;
    color: var(--ink-soft);
    text-transform: none;
  }
  .wordmark .addr { margin-top: .18rem; }
  @media (max-width: 700px) {
    .wordmark .addr, .wordmark .creds { display: none; }
  }
  @media (max-width: 900px) {
    .topbar-utility .util-lic { display: none; }
  }

  /* license numbers sit above the wordmark, flush left */
  .topbar-lic {
    display: flex;
    gap: 1.5rem;
    padding: .3rem var(--pad) 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .02em;
    color: var(--ink-mid);
  }
  .topbar-lic .util-label { color: var(--ink-soft); }
  @media (max-width: 700px) { .topbar-lic { display: none; } }

  /* utility bar carries the licenses at the left and contact at the right */
  .util-group { display: flex; align-items: center; gap: 1.5rem; }
  .util-right { margin-left: auto; }
  @media (max-width: 860px) {
    .topbar-utility { flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
    .util-right { margin-left: 0; }
  }

  @media (max-width: 700px) {
    .topbar-utility { font-size: .68rem; }
    .util-group { flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; }
    .topbar-utility .util-item { white-space: normal; }
    .topbar-utility a { overflow-wrap: anywhere; }
  }

  /* Advertising identification — the licensed name must appear on every
     page at every width, so this sits in the footer rather than in the
     masthead, which hides its detail lines on small screens. */
  .advertiser {
    margin: 0 0 .75rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .7rem;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--ink-soft);
  }
  .advertiser strong { color: var(--ink-mid); font-weight: 500; }

  /* lede that runs the full width of the box grid beneath it */
  .lede-wide { max-width: none; }

  /* credentials sit at the very bottom of the rail, below the contents */
  @media (min-width: 1200px) {
    .siderail .rail-facts { margin-top: auto; }
  }

  /* RULE: copy that sits directly above or below a full-width block —
     a box grid, a card row, a picture grid — runs to that block's edges
     rather than stopping at the narrower reading measure. */
  .wide, .prose.wide, .lede-wide { max-width: none; }

  /* Pages with no on-page contents still carry the licensing block, in the
     same place and the same form as every other page. */
  .rail-lic-only { padding-top: 2rem; }
  @media (min-width: 1200px) {
    main.no-rail { margin-left: var(--siderail); }
  }
  @media (max-width: 1199px) {
    .rail-lic-only { padding: 1.5rem var(--pad) 0; }
  }

  /* A pointer from one statute entry to another it names. Nothing is
     characterized — it states where the reference appears and links. */
  .statutes .seealso {
    margin: .35rem 0 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .01em;
    color: var(--ink-soft);
  }
  .statutes .seealso a { color: var(--ink-mid); }

  /* Service areas — two by two, names only */
  .areagrid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.75rem; }
  @media (min-width: 720px) { .areagrid { grid-template-columns: 1fr 1fr; } }
  .areagrid > div { background: var(--surface); padding: 1.35rem 1.5rem; }
  .areagrid h3 { margin: 0; font-size: var(--step-1); letter-spacing: -0.01em; }

  .areagrid p { margin: .45rem 0 0; color: var(--ink-mid); font-size: .9rem; line-height: 1.55; }

  /* ---- Storm hero -------------------------------------------------------
     A photograph behind the masthead band, with a scrim heavy enough that
     the type keeps its contrast in both themes. The image is decorative:
     everything it carries is also said in the words on top of it.        */
  .hero.storm { background: #223047 url('images/hero-storm.jpg') center 38% / cover no-repeat; }
  .hero.storm::before {
    background:
      linear-gradient(90deg, rgba(4,18,40,.72) 0%, rgba(4,18,40,.66) 46%, rgba(4,18,40,.30) 72%, rgba(4,18,40,.03) 92%, rgba(4,18,40,0) 100%),
      linear-gradient(0deg, rgba(4,18,40,.12) 0%, rgba(4,18,40,0) 46%);
  }
  .hero.storm .tagline { color: #BBD2EC; text-shadow: 0 1px 10px rgba(2,10,26,.6); }
  .hero.storm h1,
  .hero.storm h1 em { color: #FFFFFF; text-shadow: 0 1px 14px rgba(2,10,26,.65); }
  .hero.storm .lede { color: #E8EFF8; max-width: 46ch; text-shadow: 0 1px 10px rgba(2,10,26,.7); }
  .hero.storm .hero-art { display: none; }
  .hero.storm .btn.ghost {
    color: #FFFFFF; border-color: rgba(255,255,255,.55);
    background: rgba(4,18,40,.25);
  }
  .hero.storm .btn.ghost:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; }
  @media (max-width: 760px) {
    .hero.storm { background-position: center 45%; }
    .hero.storm::before {
      background: linear-gradient(180deg, rgba(4,18,40,.62) 0%, rgba(4,18,40,.76) 100%);
    }
  }

  /* a statute reference sitting at the end of a checklist line */
  .checklist li > a[href*="florida-statutes"] {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .74rem;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* Hurricane page hero — satellite image behind the masthead band */
  .hero.storm-sat { background: #0A1730 url('images/hero-hurricane.jpg') 62% 40% / cover no-repeat; }
  .hero.storm-sat::before {
    background:
      linear-gradient(90deg, rgba(4,16,36,.72) 0%, rgba(4,16,36,.64) 46%, rgba(4,16,36,.32) 72%, rgba(4,16,36,.08) 94%, rgba(4,16,36,.03) 100%),
      linear-gradient(0deg, rgba(4,16,36,.76) 0%, rgba(4,16,36,.72) 34%, rgba(4,16,36,.44) 52%, rgba(4,16,36,.08) 72%, rgba(4,16,36,0) 100%);
  }
  .hero.storm-sat .tagline { color: #BBD2EC; text-shadow: 0 1px 10px rgba(2,10,26,.6); }
  .hero.storm-sat h1, .hero.storm-sat h1 em { color: #FFFFFF; text-shadow: 0 1px 14px rgba(2,10,26,.7); }
  .hero.storm-sat .lede { color: #E8EFF8; max-width: 46ch; text-shadow: 0 1px 10px rgba(2,10,26,.7); }
  .hero.storm-sat .hero-art { display: none; }
  .hero.storm-sat .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(4,16,36,.25); }
  @media (max-width: 760px) {
    .hero.storm-sat::before { background: linear-gradient(180deg, rgba(4,16,36,.74) 0%, rgba(4,16,36,.86) 100%); }
  }

  /* Golf courses hero */
  .hero.turf { background: #1B3A2A url('images/hero-golf.jpg') center 58% / cover no-repeat; }
  .hero.turf::before {
    background:
      linear-gradient(90deg, rgba(4,20,34,.80) 0%, rgba(4,20,34,.72) 46%, rgba(4,20,34,.38) 72%, rgba(4,20,34,.06) 94%, rgba(4,20,34,0) 100%),
      linear-gradient(0deg, rgba(4,20,34,.18) 0%, rgba(4,20,34,0) 48%);
  }
  .hero.turf .tagline { color: #C4DCC9; text-shadow: 0 1px 10px rgba(2,14,10,.6); }
  .hero.turf h1, .hero.turf h1 em { color: #FFFFFF; text-shadow: 0 1px 14px rgba(2,14,10,.7); }
  .hero.turf .lede { color: #E8F1EA; max-width: 46ch; text-shadow: 0 1px 10px rgba(2,14,10,.7); }
  .hero.turf .hero-art { display: none; }
  .hero.turf .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(4,20,34,.25); }
  @media (max-width: 760px) {
    .hero.turf::before { background: linear-gradient(180deg, rgba(4,20,34,.74) 0%, rgba(4,20,34,.86) 100%); }
  }

  /* The storm record sits inside the satellite hero, so its type has to
     invert — dark navy names were unreadable against the image. */
  .hero.storm-sat .stormlist .yr { color: #9DB6D6; }
  .hero.storm-sat .stormlist .nm { color: #FFFFFF; text-shadow: 0 1px 8px rgba(2,10,26,.75); }
  .hero.storm-sat .stormlist .pl { color: #D5E1F0; text-shadow: 0 1px 8px rgba(2,10,26,.7); }
  .hero.storm-sat .stormlist li { border-color: rgba(255,255,255,.28); }
  .hero.storm-sat .record .label,
  .hero.storm-sat .label { color: #BBD2EC; }
  .hero.storm-sat .record .num,
  .hero.storm-sat .num { color: #FFFFFF; }
  .hero.storm-sat .record { border-color: rgba(255,255,255,.28); }
  .hero.storm-sat .record p,
  .hero.storm-sat .record small { color: #D5E1F0; }

  /* A photograph placed inside a section to make its point visible. */
  .lossfig { margin: 2rem 0 2.25rem; max-width: 46rem; }
  .lossfig img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--rule); border-radius: 3px;
  }
  /* Portrait in the contact header. */
  .hero-portrait {
    display: block;
    width: clamp(7.5rem, 13vw, 10rem);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--surface);
    box-shadow: 0 2px 14px rgba(4,30,66,.18);
  }

  /* Attribution sitting on the photograph itself, bottom right. Small,
     but sized to be read, and light enough to stay off the headline. */
  .hero-credit {
    position: absolute;
    right: clamp(1rem, 3vw, 2.25rem);
    bottom: .75rem;
    z-index: 2;
    margin: 0;
    max-width: min(30rem, 82%);
    text-align: right;
    font-size: .75rem;
    line-height: 1.45;
    color: rgba(255,255,255,.82);
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.75);
  }
  @media (max-width: 760px) {
    .hero-credit { position: static; max-width: none; text-align: left; margin-top: 1.25rem; }
  }

  /* Ownership line under a picture grid. Small, but sized to actually be read. */
  .photonote {
    margin-top: 1.25rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ink-mid);
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
  }

  .lossfig figcaption {
    margin-top: .65rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .74rem; line-height: 1.5; letter-spacing: .01em;
    color: var(--ink-soft);
  }

  /* two figures side by side */
  .figpair { display: grid; gap: 1rem; margin: 2rem 0 2.25rem; }
  @media (min-width: 760px) { .figpair { grid-template-columns: 1fr 1fr; align-items: start; } }
  .figpair .lossfig { margin: 0; }

  /* Hail, lightning, high wind & tornado page header */
  .hero.twister { background: #0C1420 url('images/hero-hail-street.jpg') center 60% / cover no-repeat; }
  .hero.twister::before {
    background:
      linear-gradient(180deg, rgba(6,14,24,.36) 0%, rgba(6,14,24,.30) 44%, rgba(6,14,24,.04) 72%, rgba(6,14,24,0) 100%),
      linear-gradient(90deg, rgba(6,14,24,.34) 0%, rgba(6,14,24,.30) 62%, rgba(6,14,24,.24) 84%, rgba(6,14,24,.16) 95%, rgba(6,14,24,.10) 100%),
      linear-gradient(0deg, rgba(6,14,24,.12) 0%, rgba(6,14,24,0) 56%);
  }
  .hero.twister .tagline { color: #C6D6E8; text-shadow: 0 1px 10px rgba(2,8,18,.75); }
  .hero.twister h1, .hero.twister h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(2,8,18,.75), 0 2px 18px rgba(2,8,18,.9); }
  .hero.twister .lede { color: #EDF3FA; max-width: 46ch; text-shadow: 0 1px 3px rgba(2,8,18,.75), 0 1px 14px rgba(2,8,18,.9); }
  .hero.twister .hero-art { display: none; }
  .hero.twister .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(6,14,24,.25); }
  @media (max-width: 760px) {
    .hero.twister { background-position: center 78%; }
    .hero.twister::before { background: linear-gradient(180deg, rgba(6,14,24,.62) 0%, rgba(6,14,24,.76) 100%); }
  }

  /* Fire, smoke and soot page header */
  .hero.burned { background: #14100E url('images/hero-fire.jpg') center 52% / cover no-repeat; }
  .hero.burned::before {
    background:
      linear-gradient(90deg, rgba(8,6,6,.52) 0%, rgba(8,6,6,.48) 62%, rgba(8,6,6,.34) 84%, rgba(8,6,6,.17) 95%, rgba(8,6,6,.06) 100%),
      linear-gradient(0deg, rgba(8,6,6,.20) 0%, rgba(8,6,6,0) 56%);
  }
  .hero.burned .tagline { color: #D6CFC6; text-shadow: 0 1px 10px rgba(4,2,2,.8); }
  .hero.burned h1, .hero.burned h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,2,2,.8), 0 2px 18px rgba(4,2,2,.9); }
  .hero.burned .lede { color: #F1EDE8; max-width: 46ch; text-shadow: 0 1px 3px rgba(4,2,2,.8), 0 1px 14px rgba(4,2,2,.9); }
  .hero.burned .hero-art { display: none; }
  .hero.burned .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(8,6,6,.25); }
  @media (max-width: 760px) {
    .hero.burned::before { background: linear-gradient(180deg, rgba(8,6,6,.47) 0%, rgba(8,6,6,.63) 100%); }
  }

  /* Commercial property page header */
  .hero.gutted { background: #1A1B1E url('images/hero-commercial.jpg') center 50% / cover no-repeat; }
  .hero.gutted::before {
    background:
      linear-gradient(90deg, rgba(10,11,14,.56) 0%, rgba(10,11,14,.52) 62%, rgba(10,11,14,.36) 84%, rgba(10,11,14,.16) 95%, rgba(10,11,14,.05) 100%),
      linear-gradient(0deg, rgba(10,11,14,.20) 0%, rgba(10,11,14,0) 56%);
  }
  .hero.gutted .tagline { color: #D3D6DA; text-shadow: 0 1px 10px rgba(4,5,8,.85); }
  .hero.gutted h1, .hero.gutted h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 2px 18px rgba(4,5,8,.9); }
  .hero.gutted .lede { color: #F0F1F3; max-width: 46ch; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 1px 14px rgba(4,5,8,.9); }
  .hero.gutted .hero-art { display: none; }
  .hero.gutted .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,11,14,.25); }
  @media (max-width: 760px) {
    .hero.gutted::before { background: linear-gradient(180deg, rgba(10,11,14,.60) 0%, rgba(10,11,14,.74) 100%); }
  }

  /* Theft and vandalism page header */
  .hero.tornout { background: #1A1C20 url('images/hero-vandalism.jpg') center 30% / cover no-repeat; }
  .hero.tornout::before {
    background:
      linear-gradient(90deg, rgba(10,12,16,.62) 0%, rgba(10,12,16,.58) 62%, rgba(10,12,16,.42) 84%, rgba(10,12,16,.20) 95%, rgba(10,12,16,.06) 100%),
      linear-gradient(0deg, rgba(10,12,16,.22) 0%, rgba(10,12,16,0) 56%);
  }
  .hero.tornout .tagline { color: #D2D6DC; text-shadow: 0 1px 10px rgba(4,6,10,.85); }
  .hero.tornout h1, .hero.tornout h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,6,10,.85), 0 2px 18px rgba(4,6,10,.9); }
  .hero.tornout .lede { color: #F0F2F5; max-width: 46ch; text-shadow: 0 1px 3px rgba(4,6,10,.85), 0 1px 14px rgba(4,6,10,.9); }
  .hero.tornout .hero-art { display: none; }
  .hero.tornout .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,12,16,.25); }
  @media (max-width: 760px) {
    .hero.gutted::before,
    .hero.tornout::before { background: linear-gradient(180deg, rgba(10,12,16,.56) 0%, rgba(10,12,16,.72) 100%); }
  }

  /* Mold page header */
  .hero.remediation { background: #17161C url('images/hero-mold.jpg') center 62% / cover no-repeat; }
  .hero.remediation::before {
    background:
      linear-gradient(90deg, rgba(10,10,16,.52) 0%, rgba(10,10,16,.48) 62%, rgba(10,10,16,.34) 84%, rgba(10,10,16,.14) 95%, rgba(10,10,16,.04) 100%),
      linear-gradient(0deg, rgba(10,10,16,.18) 0%, rgba(10,10,16,0) 56%);
  }
  .hero.remediation .tagline { color: #CBD3E2; text-shadow: 0 1px 10px rgba(4,4,10,.75); }
  .hero.remediation h1, .hero.remediation h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,4,10,.75), 0 2px 18px rgba(4,4,10,.9); }
  .hero.remediation .lede { color: #EDF0F8; max-width: 46ch; text-shadow: 0 1px 3px rgba(4,4,10,.75), 0 1px 14px rgba(4,4,10,.9); }
  .hero.remediation .hero-art { display: none; }
  .hero.remediation .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,10,16,.25); }
  @media (max-width: 760px) {
    .hero.remediation::before { background: linear-gradient(180deg, rgba(10,10,16,.66) 0%, rgba(10,10,16,.80) 100%); }
  }

  /* Water losses page header */
  .hero.slab { background: #10161C url('images/hero-water.jpg') center 50% / cover no-repeat; }
  .hero.slab::before {
    background:
      linear-gradient(90deg, rgba(6,12,20,.56) 0%, rgba(6,12,20,.52) 62%, rgba(6,12,20,.40) 84%, rgba(6,12,20,.18) 95%, rgba(6,12,20,.06) 100%),
      linear-gradient(0deg, rgba(6,12,20,.20) 0%, rgba(6,12,20,0) 56%);
  }
  .hero.slab .tagline { color: #C6D6E8; text-shadow: 0 1px 10px rgba(2,8,18,.75); }
  .hero.slab h1, .hero.slab h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(2,8,18,.75), 0 2px 18px rgba(2,8,18,.9); }
  .hero.slab .lede { color: #EDF3FA; max-width: 46ch; text-shadow: 0 1px 3px rgba(2,8,18,.75), 0 1px 14px rgba(2,8,18,.9); }
  .hero.slab .hero-art { display: none; }
  .hero.slab .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(6,12,20,.25); }
  @media (max-width: 760px) {
    .hero.slab::before { background: linear-gradient(180deg, rgba(6,12,20,.68) 0%, rgba(6,12,20,.80) 100%); }
  }

  /* Flood page header */
  .hero.surge { background: #0A1622 url('images/hero-flood.jpg') center 54% / cover no-repeat; }
  .hero.surge::before {
    background:
      linear-gradient(90deg, rgba(3,12,22,.82) 0%, rgba(3,12,22,.74) 46%, rgba(3,12,22,.40) 72%, rgba(3,12,22,.08) 94%, rgba(3,12,22,.02) 100%),
      linear-gradient(0deg, rgba(3,12,22,.34) 0%, rgba(3,12,22,0) 52%);
  }
  .hero.surge .tagline { color: #BBD2EC; text-shadow: 0 1px 10px rgba(2,8,18,.6); }
  .hero.surge h1, .hero.surge h1 em { color: #FFFFFF; text-shadow: 0 1px 14px rgba(2,8,18,.7); }
  .hero.surge .lede { color: #E8EFF8; max-width: 46ch; text-shadow: 0 1px 10px rgba(2,8,18,.7); }
  .hero.surge .hero-art { display: none; }
  .hero.surge .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(3,12,22,.25); }
  @media (max-width: 760px) {
    .hero.surge::before { background: linear-gradient(180deg, rgba(3,12,22,.74) 0%, rgba(3,12,22,.86) 100%); }
  }


  /* Tablet band. Between 761 and 1199 the hero copy runs the full width of
     the picture, so the side-fading scrim built for the desktop layout no
     longer sits behind the end of each line. Even it out across the frame. */
  @media (min-width: 761px) and (max-width: 1199px) {
    .hero.storm::before,
    .hero.storm-sat::before,
    .hero.turf::before,
    .hero.surge::before,
    .hero.twister::before,
    .hero.slab::before,
    .hero.remediation::before,
    .hero.burned::before,
    .hero.gutted::before,
    .hero.tornout::before {
      background:
        linear-gradient(90deg, rgba(6,10,16,.68) 0%, rgba(6,10,16,.64) 70%, rgba(6,10,16,.56) 100%),
        linear-gradient(0deg, rgba(6,10,16,.24) 0%, rgba(6,10,16,0) 60%);
    }
  }

  /* ---- two-column bullet panel -------------------------------------- */
  /* Same bullets, laid out like a Dos and Don'ts card so a long list of
     short statements takes half the vertical space. */

  .checklist.twocol {
    display: block;
    max-width: none;
    margin-top: 1.75rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    background: var(--surface);
  }
  @media (min-width: 820px) {
    .checklist.twocol { columns: 2; column-gap: 2.75rem; }
  }
  .checklist.twocol li {
    border: 0;
    padding: 0 0 .95rem 1.35rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  .checklist.twocol li:first-child { border-top: 0; }
  .checklist.twocol li:last-child { padding-bottom: 0; }
  .checklist.twocol li::before { top: .5rem; }
  .checklist.twocol li strong { margin-bottom: .1875rem; font-size: .9688rem; line-height: 1.4; }

  /* a step whose body is a bullet panel rather than a paragraph */
  .steps ul { grid-column: 2; margin-top: .875rem; }

  /* a closing line centered beneath a full-width bullet panel */
  .prose.centered {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }
  /* each sentence held on one line rather than wrapping */
  .prose.centered.oneline { max-width: none; }
  @media (min-width: 1000px) { .prose.centered.oneline p { font-size: .9375rem; } }

  /* two steps sitting side by side beneath a full-width step */
  .steps-row { display: grid; gap: 0 3rem; }
  .steps-row article:first-child { border-top: 0; }
  .steps-row p { max-width: none; }
  .steps-row h3 br { display: none; }
  @media (min-width: 900px) {
    .steps-row { grid-template-columns: 1fr 1fr; }
    /* equal-height cells so the rules line up, content held to the top so a
       short heading does not leave a gap above its paragraph */
    .steps-row > article { align-content: start; }
  }

  /* a closing callout spread the full width of the section */
  .callout.wide { max-width: none; }
  @media (min-width: 900px) {
    .callout.wide {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: clamp(2rem, 4vw, 3.5rem);
      align-items: start;
      padding-block: clamp(1.5rem, 3.2vw, 2rem);
    }
    .callout.wide h3,
    .callout.wide p { grid-column: 1; }
    .callout.wide .btn-row {
      grid-column: 2;
      grid-row: 1 / span 3;
      align-self: center;
      flex-direction: column;
      align-items: stretch;
      margin-top: 0;
    }
    .callout.wide .btn-row .btn { text-align: center; }
  }

  /* four short points in boxes, for the home page process section */
  .pointgrid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
  @media (min-width: 760px) { .pointgrid { grid-template-columns: 1fr 1fr; } }
  .pointgrid > div {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    background: var(--surface);
    padding: 1.25rem 1.35rem 1.375rem;
    display: grid;
    gap: .5rem;
    align-content: start;
  }
  .pointgrid .num {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step--1);
    color: var(--silver);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .pointgrid p {
    margin: 0;
    color: var(--ink);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.4;
  }
  .pointgrid p.detail {
    color: var(--ink-mid);
    font-size: var(--step--1);
    font-weight: 400;
    line-height: 1.65;
    margin-top: -.125rem;
  }

  /* "Where I work" menu in the main navigation.
     Opening is pure CSS on hover and keyboard focus, so nothing in the page
     changes while a reader is selecting text inside it. The button is there
     for touch, where there is no hover. */
  .navdrop { position: relative; }
  .navdrop-toggle {
    appearance: none;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    font-family: inherit;
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--ink-mid);
    cursor: pointer;
    padding: .3125rem 0 .3125rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    transition: color .15s ease;
  }
  .navdrop-toggle::after {
    content: "";
    width: .4em; height: .4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
  }
  .navdrop-toggle:hover,
  .navdrop:focus-within .navdrop-toggle { color: var(--ink); }

  .navdrop .drop {
    position: absolute;
    z-index: 60;
    top: calc(100% + .5rem);
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(4, 30, 66, .16);
    padding: 1rem 1.125rem 1.125rem;
    display: grid;
    gap: .875rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
  }
  @media (hover: hover) and (min-width: 1080px) {
    .navdrop:hover .drop { opacity: 1; visibility: visible; }
  }
  .navdrop:focus-within .drop,
  .navdrop.is-open .drop { opacity: 1; visibility: visible; }

  .navdrop .drop h3 { font-size: var(--step-1); margin: 0 0 .5rem; }
  .navdrop .drop p { margin: 0; color: var(--ink-mid); font-size: .8125rem; line-height: 1.6; }
  .navdrop .drop .dropnote {
    grid-column: 1 / -1;
    margin: 0 0 .25rem;
    color: var(--ink-mid);
    font-size: .875rem;
    line-height: 1.65;
    max-width: 52ch;
  }
  .navdrop .drop .dropnote strong { color: var(--ink); }

  @media (max-width: 1079px) {
    .navdrop-toggle { font-size: var(--step--1); padding: .25rem 0; border-left: 0; }
    .navdrop .drop { position: static; width: auto; max-width: none; box-shadow: none; margin-top: .5rem; }
    .navdrop:not(.is-open):not(:focus-within) .drop { display: none; }
  }

  .faqmore { margin: 1.5rem 0 0; color: var(--ink-mid); font-size: .875rem; }

  /* the Claims Handled menu sits early in the bar, so it opens to the right
     of its button and runs two columns */
  .navdrop .drop.drop-left { left: 0; right: auto; max-width: min(34rem, calc(100vw - 2rem)); }
  @media (min-width: 760px) { .navdrop .drop.drop-left { grid-template-columns: max-content max-content; gap: 1rem 2.25rem; } }
  .navdrop .drop a { color: var(--ink); text-decoration: none; border-bottom: 0; }
  .navdrop .drop a:hover { color: var(--accent); }
  .navdrop .drop p { line-height: 1.9; }

  /* the page you are on lives inside the Claims Handled menu */
  .navdrop-toggle.is-current { color: var(--ink); }
  .topbar .navdrop-toggle.is-current { border-bottom-color: var(--accent); }
  .navdrop .drop a[aria-current="page"] { color: var(--accent); border-bottom: 0; }

  /* An odd list balances by height, which can leave more on the right than the
     left. Break the column after the halfway item so the left column is always
     the fuller one. */
  @media (min-width: 820px) {
    .checklist.twocol:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) > li:nth-child(2) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) > li:nth-child(2) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li:nth-child(3) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(6)):not(:has(> li:nth-child(7))) > li:nth-child(3) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > li:nth-child(4) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(8)):not(:has(> li:nth-child(9))) > li:nth-child(4) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(9)):not(:has(> li:nth-child(10))) > li:nth-child(5) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(10)):not(:has(> li:nth-child(11))) > li:nth-child(5) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(11)):not(:has(> li:nth-child(12))) > li:nth-child(6) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(12)):not(:has(> li:nth-child(13))) > li:nth-child(6) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(13)):not(:has(> li:nth-child(14))) > li:nth-child(7) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(14)):not(:has(> li:nth-child(15))) > li:nth-child(7) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(15)):not(:has(> li:nth-child(16))) > li:nth-child(8) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(16)):not(:has(> li:nth-child(17))) > li:nth-child(8) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(17)):not(:has(> li:nth-child(18))) > li:nth-child(9) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(18)):not(:has(> li:nth-child(19))) > li:nth-child(9) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(19)):not(:has(> li:nth-child(20))) > li:nth-child(10) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(20)):not(:has(> li:nth-child(21))) > li:nth-child(10) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(21)):not(:has(> li:nth-child(22))) > li:nth-child(11) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(22)):not(:has(> li:nth-child(23))) > li:nth-child(11) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(23)):not(:has(> li:nth-child(24))) > li:nth-child(12) { break-after: column; }
    .checklist.twocol:has(> li:nth-child(24)):not(:has(> li:nth-child(25))) > li:nth-child(12) { break-after: column; }
  }

  /* A long heading that should run the full measure and wrap only what is
     left over, instead of being balanced into two short even lines. */
  .sec-head h2.fill { text-wrap: pretty; }

  /* A two-column bullet panel that reads ACROSS the row first and then down,
     for a list where the left-to-right order is the order to read it in.
     The default panel flows down the left column and then down the right. */
  @media (min-width: 820px) {
    .checklist.twocol.rows {
      columns: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2.75rem;
    }
    .checklist.twocol.rows > li { break-after: auto; }
  }

  /* ---------- photograph headers: condominium, homeowners association,
     business interruption. Same treatment as the other picture heroes —
     the picture carries the right of the frame, the copy sits on a darkened
     left. ---------- */
  .hero.tower { background: #1A1B1E url('images/hero-condo.jpg') center 42% / cover no-repeat; }
  .hero.rooftops { background: #1A1B1E url('images/hero-hoa.jpg') center 58% / cover no-repeat; }
  .hero.shuttered { background: #1A1B1E url('images/hero-bi.jpg') center 52% / cover no-repeat; }

  .hero.tower::before,
  .hero.shuttered::before {
    background:
      linear-gradient(90deg, rgba(10,11,14,.62) 0%, rgba(10,11,14,.56) 62%, rgba(10,11,14,.38) 84%, rgba(10,11,14,.18) 95%, rgba(10,11,14,.06) 100%),
      linear-gradient(0deg, rgba(10,11,14,.22) 0%, rgba(10,11,14,0) 56%);
  }
  /* The association clubhouse is a bright picture end to end, so the copy
     side needs more behind it than the others do. */
  .hero.rooftops::before {
    background:
      linear-gradient(90deg, rgba(10,11,14,.70) 0%, rgba(10,11,14,.63) 58%, rgba(10,11,14,.44) 82%, rgba(10,11,14,.22) 94%, rgba(10,11,14,.08) 100%),
      linear-gradient(0deg, rgba(10,11,14,.28) 0%, rgba(10,11,14,0) 58%);
  }

  .hero.tower .tagline,
  .hero.rooftops .tagline,
  .hero.shuttered .tagline { color: #D3D6DA; text-shadow: 0 1px 10px rgba(4,5,8,.85); }

  .hero.tower h1, .hero.tower h1 em,
  .hero.rooftops h1, .hero.rooftops h1 em,
  .hero.shuttered h1, .hero.shuttered h1 em {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 2px 18px rgba(4,5,8,.9);
  }

  .hero.tower .lede,
  .hero.rooftops .lede,
  .hero.shuttered .lede {
    color: #F0F1F3; max-width: 46ch;
    text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 1px 14px rgba(4,5,8,.9);
  }

  .hero.tower .hero-art,
  .hero.rooftops .hero-art,
  .hero.shuttered .hero-art { display: none; }

  .hero.tower .btn.ghost,
  .hero.rooftops .btn.ghost,
  .hero.shuttered .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,11,14,.25); }

  .hero.tower .guide-links,
  .hero.rooftops .guide-links,
  .hero.shuttered .guide-links {
    border-top-color: rgba(255,255,255,.28);
    background: rgba(8,10,14,.52);
    border-radius: .5rem;
    padding: 1rem 1.125rem;
    margin-top: 2rem;
  }
  .hero.tower .guide-links > .label,
  .hero.rooftops .guide-links > .label,
  .hero.shuttered .guide-links > .label {
    color: rgba(255,255,255,.72);
    text-shadow: 0 1px 8px rgba(0,0,0,.85);
  }
  .hero.tower .guide-links a,
  .hero.rooftops .guide-links a,
  .hero.shuttered .guide-links a {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 12px rgba(0,0,0,.85);
  }

  @media (max-width: 760px) {
    .hero.tower::before,
    .hero.rooftops::before,
    .hero.shuttered::before {
      background: linear-gradient(180deg, rgba(10,11,14,.62) 0%, rgba(10,11,14,.78) 100%);
    }
  }

  /* Multifamily header — the lake elevation. */
  .hero.lakeside { background: #1A1B1E url('images/hero-multifamily.jpg') center 50% / cover no-repeat; }
  /* No darkening layer on this one — the photograph runs as shot. */
  .hero.lakeside::before { background: none; }
  .hero.lakeside .tagline { color: #D3D6DA; text-shadow: 0 1px 10px rgba(4,5,8,.85); }
  .hero.lakeside h1, .hero.lakeside h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 2px 18px rgba(4,5,8,.9); }
  .hero.lakeside .lede { color: #F0F1F3; max-width: 46ch; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 1px 14px rgba(4,5,8,.9); }
  .hero.lakeside .hero-art { display: none; }
  .hero.lakeside .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,11,14,.25); }
  .hero.lakeside .guide-links {
    border-top-color: rgba(255,255,255,.28); background: rgba(8,10,14,.52);
    border-radius: .5rem; padding: 1rem 1.125rem; margin-top: 2rem;
  }
  .hero.lakeside .guide-links > .label { color: rgba(255,255,255,.72); text-shadow: 0 1px 8px rgba(0,0,0,.85); }
  .hero.lakeside .guide-links a { color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 12px rgba(0,0,0,.85); }
  @media (max-width: 760px) {
    .hero.lakeside::before { background: linear-gradient(180deg, rgba(10,11,14,.62) 0%, rgba(10,11,14,.78) 100%); }
  }

  /* ---------- Photograph headers run as shot ----------
     Sept 2026: the whole-picture darkening layer is gone. The only shading is a
     soft pool behind the copy column, feathered out before it reaches the right
     of the frame, so the photograph keeps its own light everywhere a reader is
     actually looking at it. */
  .hero.storm::before,
  .hero.storm-sat::before,
  .hero.turf::before,
  .hero.surge::before,
  .hero.twister::before,
  .hero.slab::before,
  .hero.remediation::before,
  .hero.burned::before,
  .hero.gutted::before,
  .hero.tornout::before,
  .hero.tower::before,
  .hero.rooftops::before,
  .hero.shuttered::before,
  .hero.lakeside::before {
    background: radial-gradient(115% 90% at 12% 52%,
      rgba(8,10,14,.60) 0%,
      rgba(8,10,14,.44) 28%,
      rgba(8,10,14,.18) 52%,
      rgba(8,10,14,0) 68%);
  }

  /* Narrow screens stack the copy over the whole frame, so the scrim has to be
     the full width there — but lighter than the old one. */
  @media (max-width: 760px) {
    .hero.storm::before,
    .hero.storm-sat::before,
    .hero.turf::before,
    .hero.surge::before,
    .hero.twister::before,
    .hero.slab::before,
    .hero.remediation::before,
    .hero.burned::before,
    .hero.gutted::before,
    .hero.tornout::before,
    .hero.tower::before,
    .hero.rooftops::before,
    .hero.shuttered::before,
    .hero.lakeside::before {
      background: linear-gradient(180deg, rgba(8,10,14,.50) 0%, rgba(8,10,14,.70) 100%);
    }
  }

  /* The hurricane header carries the storms list across the full frame, so its
     pool has to reach further right than the others and pick up the bottom. */
  .hero.storm-sat::before {
    background:
      radial-gradient(120% 95% at 10% 40%,
        rgba(4,10,22,.62) 0%,
        rgba(4,10,22,.46) 30%,
        rgba(4,10,22,.22) 58%,
        rgba(4,10,22,0) 76%),
      linear-gradient(0deg, rgba(4,10,22,.62) 0%, rgba(4,10,22,.40) 26%, rgba(4,10,22,0) 52%);
  }

  /* A one-line signpost under the hero, carrying the cross-links that used to
     sit in a Claims Handled panel. Tight padding — it is a line, not a section. */
  .signpost { padding-block: clamp(1.25rem, 2.4vw, 1.75rem); }
  .signpost .prose p { color: var(--ink-mid); }

  /* A second list in the rail: the claim types handled on this kind of
     property, kept clearly apart from the page contents above it. */
  .railclaims { display: flex; flex-direction: column; gap: .125rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .railclaims > .label { margin-bottom: .5rem; }
  .railclaims a {
    font-size: .8125rem; line-height: 1.35; text-decoration: none;
    color: var(--ink-soft); padding: .375rem 0 .375rem .75rem;
    border-left: 2px solid var(--rule);
    transition: color .15s ease, border-color .15s ease;
  }
  .railclaims a:hover { color: var(--ink); border-left-color: var(--silver); }
  .railclaims .plain { font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); padding: .375rem 0 .375rem .75rem; border-left: 2px solid var(--rule); }
  @media (max-width: 1199px) { .siderail .railclaims { display: none; } }

  /* Commercial Property: the hero lede runs the full width under the headline. */
  .hero.gutted .lede { max-width: none; }


  /* Condominium Associations: the copy runs wide, but stops short of the sky on
     the right so every line ends on the building, where white type reads. */
  @media (min-width: 1000px) {
    .hero.tower h1, .hero.tower .lede { max-width: 74%; }
  }
  @media (max-width: 999px) { .hero.tower .lede { max-width: none; } }

  /* Homeowners Associations: the copy runs wide under the headline, stopping
     short of the right edge so no line is stranded out on the bright sky. */
  @media (min-width: 1000px) {
    .hero.rooftops h1, .hero.rooftops .lede { max-width: 80%; }
  }
  @media (max-width: 999px) { .hero.rooftops .lede { max-width: none; } }

  /* Multifamily: the copy runs wide under the headline. */
  @media (min-width: 1000px) {
    .hero.lakeside h1, .hero.lakeside .lede { max-width: 80%; }
  }
  @media (max-width: 999px) { .hero.lakeside .lede { max-width: none; } }

  /* Homeowners overview header. Shorter than the claim pages, so the picture
     grid below it still leads the page. */
  .hero.house { background: #1A1B1E url('images/hero-homeowners.jpg') center top / cover no-repeat; }
  .hero.house::before {
    background: radial-gradient(115% 90% at 12% 52%,
      rgba(8,10,14,.60) 0%, rgba(8,10,14,.44) 28%, rgba(8,10,14,.18) 52%, rgba(8,10,14,0) 68%);
  }
  .hero.house .tagline { color: #D3D6DA; text-shadow: 0 1px 10px rgba(4,5,8,.85); }
  .hero.house h1, .hero.house h1 em { color: #FFFFFF; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 2px 18px rgba(4,5,8,.9); }
  .hero.house .lede { color: #F0F1F3; text-shadow: 0 1px 3px rgba(4,5,8,.85), 0 1px 14px rgba(4,5,8,.9); }
  .hero.house .hero-art { display: none; }
  .hero.house .btn.ghost { color:#fff; border-color: rgba(255,255,255,.55); background: rgba(10,11,14,.25); }
  .hero.house .guide-links { border-top-color: rgba(255,255,255,.28); background: rgba(8,10,14,.52); border-radius:.5rem; padding:1rem 1.125rem; margin-top:2rem; }
  .hero.house .guide-links > .label { color: rgba(255,255,255,.72); text-shadow: 0 1px 8px rgba(0,0,0,.85); }
  .hero.house .guide-links a { color:#FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 12px rgba(0,0,0,.85); }
  @media (min-width: 1000px) { .hero.house h1, .hero.house .lede { max-width: 72%; } }
  @media (max-width: 760px) {
    .hero.house::before { background: linear-gradient(180deg, rgba(8,10,14,.50) 0%, rgba(8,10,14,.70) 100%); }
  }

  /* Commercial & Association header photograph */
  .hero.skyline { background: #12161C url('images/hero-skyline.jpg') center 45% / cover no-repeat; }
  /* No overlay. The photograph keeps its own light and color; the copy carries
     its own contrast in a shadow that only touches the pixels behind the letters. */
  .hero.skyline::before { content: none; }
  .hero.skyline .tagline,
  .hero.skyline h1, .hero.skyline h1 em,
  .hero.skyline .lede {
    text-shadow: 0 1px 2px rgba(6,10,16,.92), 0 2px 14px rgba(6,10,16,.78), 0 0 28px rgba(6,10,16,.55);
  }
  .hero.skyline > .wrap { position: relative; z-index: 1; }
  .hero.skyline .tagline { color: rgba(255,255,255,.78); }
  .hero.skyline h1, .hero.skyline h1 em { color: #fff; }
  .hero.skyline .lede { color: #fff; }
  .hero.skyline .hero-art { display: none; }
  .hero.skyline .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); }
  .hero.skyline .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }
  .hero.skyline .guide-links { border-top-color: rgba(255,255,255,.28); }
  .hero.skyline .guide-links > .label { color: rgba(255,255,255,.72); }
  .hero.skyline .guide-links a { color: rgba(255,255,255,.88); border-left-color: rgba(255,255,255,.28); }
  .hero.skyline .guide-links a:hover { color: #fff; border-left-color: rgba(255,255,255,.7); }
  /* The copy runs the full measure so the lines are long and few, which keeps
     the whole block up in the cloud instead of spilling onto the buildings. */
  .hero.skyline h1, .hero.skyline .lede { max-width: none; }


  /* FAPIA proud-member badge, foot of the left rail */
  .rail-badge { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .rail-badge img {
    display: block; width: 100%; max-width: 220px; height: auto;
    border: 1px solid var(--rule); border-radius: 2px;
  }
  @media (max-width: 1199px) { .siderail .rail-badge { display: none; } }

  /* Claims Handled picture grid: the loss name sits centered under its photograph */
  .lossgrid b { text-align: center; padding-bottom: .8rem; }
  .lossgrid span { text-align: center; }

  /* A seven-item list whose first bullets are long splits 4/3 by count but
     ends up twice as tall on the left. Break a bullet earlier so the two
     columns finish level. */
  @media (min-width: 820px) {
    .checklist.twocol.split-3:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > li:nth-child(4) { break-after: auto; }
    .checklist.twocol.split-3:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > li:nth-child(3) { break-after: column; }
    .checklist.twocol.split-3:has(> li:nth-child(8)):not(:has(> li:nth-child(9))) > li:nth-child(4) { break-after: auto; }
    .checklist.twocol.split-3:has(> li:nth-child(8)):not(:has(> li:nth-child(9))) > li:nth-child(3) { break-after: column; }
  }

  /* The cloud band is the top two-thirds of this photograph, so the copy starts
     higher and the block closes up — it keeps the lede off the skyline. */
  .hero.skyline {
    padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(3rem, 8vw, 6rem);
    /* Give the frame its own proportions so the whole photograph shows —
       cloud at the top for the copy, and the skyline, marina and water below it. */
    /* Above 1200px the two rails take a fixed 268px, so the frame's own width
       is the viewport less that — this keeps the photograph's proportions on a
       wide monitor instead of slicing the water off the bottom. */
    min-height: min(calc(56.25vw - 151px), 780px);
  }
  .hero.skyline h1 { margin-top: .5rem; }
  .hero.skyline .lede { margin-top: 1rem; }

  /* A five-item list whose first bullets are long: break after the second so the
     two columns finish level rather than 3 tall on the left and 2 short on the right. */
  @media (min-width: 820px) {
    .checklist.twocol.split-2:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li:nth-child(3) { break-after: auto; }
    .checklist.twocol.split-2:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li:nth-child(2) { break-after: column; }
  }

  /* Closing note and pointer under a Dos and Don'ts set */
  .dodontnote {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-mid);
    font-size: .875rem;
    line-height: 1.55;
  }
  .dodontmore {
    margin: .625rem 0 0;
    color: var(--ink-mid);
    font-size: .875rem;
  }
  /* on the home page the note stands alone, so it keeps its own rule */
  .dodontnote + .dodontmore { padding-top: 0; border-top: 0; }

  /* City, state and ZIP share one row. The state is fixed at FL and needs only
     enough width for two letters, so it is not given an equal third. */
  @media (min-width: 540px) {
    .field-row.citystatezip { grid-template-columns: 1fr 4.5rem 7rem; }
  }
  .field input[readonly] {
    background: var(--band);
    color: var(--ink-mid);
    cursor: default;
  }