/* Schrader public site, 2026 refresh.
   Mobile first: the base rules are the phone layout; two min-width
   breakpoints (48em tablet, 70em desktop) add columns and the desktop nav.
   Cache-busted by mtime through TFEN::App::asset_version (?v=). */

/* ONE red. Every red on the site is --red (Schrader red, #C72127) - no
   pinks, tints or darker shades for labels, links or hovers (Kevin,
   2026-10-07). Hovers change to black or white, not to another red. */
:root {
  --red: #C72127;
  --black: #111111;
  --ink: #1d1d1f;
  --muted: #5f6368;
  --line: #e3e5e8;
  --bg: #ffffff;
  --bg-alt: #f5f6f7;
  --bg-dark: #161616;
  /* Theme-aware roles. --black stays the colour of the deliberately dark
     blocks (buttons, badges, the utility bar) in both themes; text that is
     black on the light site uses --ink-strong so it can turn white. */
  --surface: #ffffff;
  --ink-strong: #111111;
  --accent-text: var(--red);
  --link: var(--red);
  --field-bg: #ffffff;
  --field-border: #bbbbbb;
  /* Source Serif 4 is the primary (headings, titles, figures); Montserrat
     the secondary (body text and the small uppercase labels, buttons, nav).
     Libre Baskerville was the primary until 2026-10-07 - to go back, swap
     the family here and in header.tmpl's Google Fonts link. */
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --container: 75rem;
  --gutter: clamp(1.25rem, 5vw, 2rem);
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --header-h: 64px;
}

/* Dark mode: the header toggle sets data-theme on <html> (site.js), the
   inline script in header.tmpl restores it before first paint, and a
   logged-in contact's choice is saved on the contact record. Not the
   default and not tied to prefers-color-scheme, by request. The page
   goes black; the blocks that are already dark keep their tone. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-alt: #121212;
  --surface: #121212;
  --ink: #e4e4e4;
  --ink-strong: #ffffff;
  --muted: #a8a8a8;
  --line: #2b2b2b;
  /* red text on black is too faint for body links, so dark-mode links are
     white with a red underline; labels and accents stay the one red */
  --accent-text: var(--red);
  --link: #ffffff;
  --field-bg: #1a1a1a;
  --field-border: #4a4a4a;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.6);
}
[data-theme="dark"] .btn-outline:hover { background: var(--ink-strong); color: #111; }
[data-theme="dark"] .btn-dark { background: var(--ink-strong); color: #111; border-color: var(--ink-strong); }
[data-theme="dark"] .btn-dark:hover { background: #ddd; color: #111; }
[data-theme="dark"] .badge { background: #3a3a3a; }
[data-theme="dark"] .badge-red { background: var(--red); }
[data-theme="dark"] .badge-green { background: #1e7d3a; }
[data-theme="dark"] .site-header { border-bottom-color: #333; }
[data-theme="dark"] .panel-dark, [data-theme="dark"] .cta-band { background: #1c1c1c; }
[data-theme="dark"] .mode-toggle a.on { background: var(--ink-strong); color: #111; }
[data-theme="dark"] .notice { background: #2a2411; border-color: #5a4a1a; }
[data-theme="dark"] .alert-error { background: transparent; color: #fff; }
[data-theme="dark"] a:not(.btn) { text-decoration-color: var(--red); }
[data-theme="dark"] .alert-ok { background: #0f2a16; border-color: #2a6a3a; color: #b7e2c1; }
[data-theme="dark"] .card-media { background: #0a0a0a; }
[data-theme="dark"] .person img, [data-theme="dark"] .thumbs a { background: #1a1a1a; }
[data-theme="dark"] .steps li::before { color: #fff; }
[data-theme="dark"] .tile img { opacity: .7; }

/* the header logo has black lettering; the footer's white version stands in */
.logo .logo-dark { display: none; }
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark { display: block; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink-strong);
}
.theme-toggle:hover { background: var(--bg-alt); color: var(--accent-text); }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink-strong); }
[data-theme="dark"] a:not(.btn):hover { color: var(--red); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; color: var(--ink-strong); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.8vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

.visually-hidden, .slide-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--black); color: #fff; padding: .5rem 1rem; z-index: 200; }
.skip-link:focus { left: .5rem; top: .5rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* top/bottom only: .section often shares an element with .container,
   whose side padding must survive */
.section { padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: clamp(2rem, 6vw, 4rem); }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: #d8d8d8; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.section-head h2 { margin: 0; }
.section-head .more { font-family: var(--font-ui); font-weight: 600; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-decoration: none; }
.section-head .more:hover { text-decoration: underline; }
/* one red for the section labels, on light and dark backgrounds alike (Kevin, 2026-10-07) */
.eyebrow { display: block; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; color: var(--red); margin-bottom: .35rem; }
/* red on black lacks contrast: a thin white rim, painted outside the glyph so the letterforms keep their weight */
.hero .eyebrow, .project-hero .eyebrow, .section-dark .eyebrow { paint-order: stroke fill; -webkit-text-stroke: .6px rgba(255,255,255,.55); }
.lede { font-size: 1.125rem; color: var(--muted); max-width: 42rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.25rem; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 600; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.1;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--black); border-color: var(--black); color: #fff; }
.btn-dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn-dark:hover { background: #333; color: #fff; }
.btn-outline { background: transparent; color: var(--ink-strong); border-color: var(--ink-strong); }
.btn-outline:hover { background: var(--black); color: #fff; }
.btn-light { background: #fff; color: #111; border-color: #fff; }
.btn-light:hover { background: #eee; color: #111; }
.btn-sm { min-height: 36px; padding: .35rem .9rem; font-size: .8125rem; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--line); }
.util-bar { display: none; background: var(--black); color: #cfcfcf; font-size: .8125rem; }
.util-bar .container { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 1rem; }
.util-bar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; }
.util-bar a { color: #fff; text-decoration: none; }
.util-bar a:hover { color: #fff; text-decoration: underline; }
.util-bar .label { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.util-bar a.pay { color: var(--red); font-weight: 700; }
.util-bar a.pay:hover { color: #fff; }
.main-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
/* the logo never shrinks: its height is fixed, so a flex squeeze only
   narrows it and distorts the lettering */
.logo { display: block; flex: 0 0 auto; }
.logo img { height: 34px; width: auto; }
/* the narrowest phones (320px) have no room for the logo plus a worded
   menu button: the button goes to just the bars and the logo steps down */
@media (max-width: 22.49em) {
  .nav-toggle-text { display: none; }
  .logo img { height: 30px; }
}
.header-actions { display: flex; align-items: center; gap: .5rem; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem;
  background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: .875rem; text-transform: uppercase; color: var(--ink-strong);
}
.nav-toggle .bars { width: 22px; height: 16px; position: relative; display: inline-block; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.nav-toggle .bars::before { top: 0; } .nav-toggle .bars span { top: 7px; } .nav-toggle .bars::after { bottom: 0; }
html.nav-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
html.nav-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }
html.nav-open .nav-toggle .bars span { opacity: 0; }

.nav { display: none; }
html.nav-open .nav {
  display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
  background: var(--surface); overflow-y: auto; overscroll-behavior: contain; z-index: 99; padding: 1rem var(--gutter) 3rem;
}
html.nav-open, html.nav-open body { overflow: hidden; }
/* body overflow:hidden makes the body its own scroll box, which pins the
   sticky header to the top of the DOCUMENT - on a scrolled page the header
   and its close button sat above the screen. Fixed keeps it on screen. */
html.nav-open .site-header { position: fixed; left: 0; right: 0; top: 0; }
/* phone copy of the utility bar's bidding links: the bar itself is desktop only */
.nav-bidding { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .25rem 0 1rem; border-bottom: 1px solid var(--line); }
.nav-bidding .label { grid-column: 1 / -1; color: var(--red); font-family: var(--font-ui); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.nav-bidding .btn { width: 100%; min-height: 44px; padding: .5rem .5rem; text-align: center; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line); }
.nav-list > li > .nav-row { display: flex; align-items: stretch; }
.nav-list > li > .nav-row > a { flex: 1; display: block; padding: .9rem 0; font-family: var(--font-ui); font-weight: 600; font-size: 1.0625rem; text-transform: uppercase; color: var(--ink-strong); text-decoration: none; }
.sub-toggle { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ink-strong); }
.sub-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
li.open > .nav-row .sub-toggle svg { transform: rotate(180deg); }
.sub { list-style: none; margin: 0; padding: 0 0 .75rem 0; display: none; }
li.open > .sub { display: block; }
.sub li a { display: block; padding: .5rem 0 .5rem 1rem; color: var(--ink); text-decoration: none; font-size: 1rem; }
.sub li a:hover { color: var(--accent-text); }
.nav-extra { margin-top: 1.25rem; display: grid; gap: .75rem; }
.nav-extra .btn { width: 100%; }
.nav-extra .meta { font-size: .875rem; color: var(--muted); }
.nav-extra .meta a { display: inline-block; margin: .25rem .75rem .25rem 0; }
.search-form { position: relative; margin: 1rem 0; }
.search-form input { width: 100%; min-height: 44px; padding: .5rem 2.75rem .5rem .75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--field-bg); color: var(--ink); font: inherit; }
.search-form input::-webkit-search-decoration, .search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search-btn:hover, .search-btn:focus-visible { color: var(--accent-text); background: var(--bg-alt); }
.cta-sell { display: none; }

@media (min-width: 70em) {
  /* the whole sticky header: 34px utility bar + 76px main bar + border;
     the sub-menus and anchors stick and scroll relative to this */
  :root { --header-h: 111px; }
  .main-bar .container { min-height: 76px; }
  .util-bar { display: block; }
  .logo img { height: 40px; }
  .nav-toggle { display: none; }
  .nav { display: block; flex: 1; }
  .nav .container-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
  .nav-list { display: flex; gap: .25rem; align-items: center; }
  .nav-list > li { border: 0; position: relative; }
  .nav-list > li > .nav-row > a { padding: .75rem .5rem; font-size: .875rem; letter-spacing: .02em; white-space: nowrap; }
  .nav-list > li:hover > .nav-row > a, .nav-list > li:focus-within > .nav-row > a { color: var(--accent-text); }
  .sub-toggle { display: none; }
  .nav-bidding { display: none; }
  .sub {
    position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--red);
    box-shadow: var(--shadow); padding: .5rem 0; display: none;
  }
  .nav-list > li:hover > .sub, .nav-list > li:focus-within > .sub, li.open > .sub { display: block; }
  .sub li a { padding: .5rem 1rem; white-space: nowrap; }
  .nav-extra { display: none; }
  .search-form { margin: 0; }
  .search-form input { min-height: 40px; width: 200px; }
  .search-btn { width: 32px; height: 32px; }
  .cta-sell { display: inline-flex; white-space: nowrap; }
}
/* Montserrat runs wider than the old condensed face: the narrowest desktop
   widths need a shorter search box to keep the bar on one line */
@media (min-width: 70em) and (max-width: 79.99em) {
  .search-form input { width: 150px; }
  .nav-list > li > .nav-row > a { padding-left: .4rem; padding-right: .4rem; font-size: .8125rem; }
  .main-bar .container { gap: .75rem; }
}
@media (max-width: 69.99em) {
  .search-form.desktop { display: none; }
}

/* Hero */
.hero { position: relative; color: #fff; background: var(--bg-dark); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%); }
.hero-body { position: relative; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); max-width: 46rem; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 6vw, 3.85rem); margin-bottom: .4em; text-wrap: balance; }
.hero .lede { color: #f0f0f0; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); margin-bottom: 1.5rem; }
.hero .btn-group { margin-bottom: 1.5rem; }
.next-up { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .9rem; background: rgba(255,255,255,.12); backdrop-filter: blur(4px); border-radius: var(--radius); color: #fff; text-decoration: none; font-size: .9375rem; max-width: 100%; }
.next-up .tag { font-family: var(--font-ui); text-transform: uppercase; font-weight: 700; letter-spacing: .08em; color: var(--red); font-size: .8125rem; }
.next-up:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Tabbed hero: the panels stack in one grid cell so the section is as
   tall as the tallest panel and a switch never moves the page. The red
   band below is the tab list; the active tab carries the progress bar
   site.js animates for the auto-advance (--hero-ms is the active panel's
   dwell, set per panel from its word count). */
/* minmax(0, 1fr): an auto track grows to its content's min-content width,
   which pushed the panels (and their pictures) past a phone's viewport */
.hero-tabbed .hero-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-tabbed .hero-panel { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hero-tabbed .hero-panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-tabbed .hero-panel[hidden] { display: block; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-media.has-video video { opacity: 1; }
.hero-media-black { background: #000; }
.hero-media-black::after { background: none; }
.hero .hero-title { color: #fff; font-size: clamp(1.9rem, 5.2vw, 3.4rem); margin-bottom: .4em; text-wrap: balance; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; padding-bottom: clamp(2rem, 6vw, 4rem); }
/* the backdrop is absolutely positioned, so unpositioned content would paint under it */
.hero-split > * { position: relative; }
.hero-split .hero-body { padding-bottom: 0; }
.hero-figure img { border-radius: var(--radius); }
@media (min-width: 48em) {
  .hero-split { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding-bottom: 0; }
  .hero-panel-map .hero-split { grid-template-columns: 5fr 6fr; }
}

.hero-tabs { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--red); color: #fff; }
/* minmax(0, 1fr) so four tabs always share the width; with plain 1fr the
   longest label set a column's minimum and the last tab ran off some iPhones */
.hero-tabs .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-left: .25rem; padding-right: .25rem; }
.hero-tabs button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0;
  padding: .85rem .2rem 1rem; background: none; border: 0; color: #fff; cursor: pointer; text-align: center;
  font: inherit; opacity: .78; transition: opacity .2s, background-color .2s;
}
.hero-tabs button:hover, .hero-tabs button:focus-visible { opacity: 1; background: color-mix(in srgb, var(--red) 55%, transparent); }
.hero-tabs button.is-active { opacity: 1; background: var(--red); }
.hero-tabs strong { display: block; font-family: var(--font-display); font-size: clamp(1.35rem, 5.4vw, 2.5rem); font-weight: 700; line-height: 1.1; }
/* two lines reserved for every label, so the pictures line up across the
   bar when only some labels wrap */
.hero-tabs span { display: block; font-family: var(--font-ui); font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; max-width: 9rem; min-height: 2.4em; overflow-wrap: anywhere; }
/* the picture under each tab: a strip of the panel it opens; phones get
   the numbers and labels only */
.hero-tabs .tab-img { display: none; width: 100%; max-width: 11rem; aspect-ratio: 3 / 1; margin-top: .5rem; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 1px 3px rgba(0,0,0,.4); opacity: .85; transition: opacity .2s, transform .2s; }
.hero-tabs .tab-img img { width: 100%; height: 100%; object-fit: cover; }
/* the map is drawn dark for the black hero; on the tab it is inverted to
   read as white, with the $10M+ sales as red dots placed the way the panel's are */
.hero-tabs .tab-map-box { position: relative; display: block; height: calc(100% - 4px); aspect-ratio: 975 / 610; margin: 2px auto; }
.hero-tabs .tab-img .tab-map { object-fit: contain; filter: invert(1) brightness(2.2); }
.hero-tabs .tab-dot { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--red); }
.hero-media img.crop-top, .tab-img img.crop-top { object-position: center top; }
.tab-img img.crop-upper { object-position: center 25%; }
/* the 1944 panel fills the hero with the photograph, cropped to keep the
   faces (upper third of the picture) rather than its centre (Kevin, 2026-10-07) */
.hero-media-fit { background: #000; }
.hero-media-fit img { object-fit: cover; object-position: center 25%; }
.hero-tabs button:hover .tab-img, .hero-tabs button.is-active .tab-img { opacity: 1; }
.hero-tabs button.is-active .tab-img { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff; }
.hero-tabs .progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #fff; }
.hero-tabs button.is-active.is-playing .progress { animation: hero-progress var(--hero-ms, 9s) linear forwards; }
/* a held tab (pointer over the tab bar, or keyboard focus) freezes its bar;
   as specific as the rule above, whose animation shorthand resets the state */
.hero-tabbed.is-held .hero-tabs button.is-active.is-playing .progress { animation-play-state: paused; }
@keyframes hero-progress { from { width: 0; } to { width: 100%; } }
@media (min-width: 48em) {
  .hero-tabs .container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-tabs button { padding: 1.25rem .5rem 1.4rem; }
  .hero-tabs span { font-size: .75rem; letter-spacing: .06em; overflow-wrap: normal; }
  .hero-tabs .tab-img { display: block; margin-top: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tabbed .hero-panel, .hero-media video { transition: none; }
  .hero-tabs .progress { display: none; }
}

/* US map with the $10M+ sales: the states are a static SVG, the dots are
   links placed by percentage (TFEN::Auction->landmark_sales projects
   them in the SVG's own Albers USA). --s is the dot diameter. */
.us-map { position: relative; line-height: 0; }
.us-map img { width: 100%; height: auto; }
.us-map .dot {
  position: absolute; width: var(--s, 12px); height: var(--s, 12px); margin: calc(var(--s, 12px) / -2) 0 0 calc(var(--s, 12px) / -2);
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 5px rgba(199,33,39,.35);
  text-decoration: none; transition: transform .15s;
}
.us-map .dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.us-map .dot:hover, .us-map .dot:focus-visible { transform: scale(1.35); z-index: 2; }
.us-map .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 16rem;
  padding: .45rem .6rem; border-radius: 4px; background: #fff; color: #111; font-size: .8125rem; line-height: 1.3; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; z-index: 3; box-shadow: var(--shadow);
}
.us-map .tip b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--red); }
.us-map .dot:hover .tip, .us-map .dot:focus-visible .tip { opacity: 1; visibility: visible; }
.us-map .dot[style*="top:1"] .tip, .us-map .dot[style*="top:2"] .tip { bottom: auto; top: calc(100% + 10px); }
.us-map-page { background: #000; border-radius: var(--radius); padding: 1rem; }
/* offices: every dot carries its label (custom text, no picture) */
.us-map .label { position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 8px); white-space: nowrap; color: #fff; line-height: 1.15; text-align: left; pointer-events: none; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.us-map .label b { display: block; font-family: var(--font-display); font-size: clamp(.8rem, 1.4vw, 1.125rem); font-weight: 700; }
.us-map .label small { display: block; font-size: clamp(.6rem, 1vw, .8125rem); color: #d0d0d0; }
.us-map .label-left .label { left: auto; right: calc(100% + 8px); text-align: right; }
.us-map .dot.hq { background: #fff; box-shadow: 0 0 0 3px var(--red), 0 0 0 7px rgba(199,33,39,.35); }
.us-map-labelled .dot:hover, .us-map-labelled .dot:focus-visible { transform: none; animation: dot-glow 1.2s ease-in-out infinite; }
.us-map-labelled .dot:hover .label b, .us-map-labelled .dot:focus-visible .label b { color: var(--red); }
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 6px rgba(199,33,39,.45), 0 0 14px 4px rgba(199,33,39,.6); }
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 10px rgba(199,33,39,.25), 0 0 28px 10px rgba(199,33,39,.9); }
}
.us-map-labelled .dot.hq:hover, .us-map-labelled .dot.hq:focus-visible { animation-name: dot-glow-hq; }
@keyframes dot-glow-hq {
  0%, 100% { box-shadow: 0 0 0 3px var(--red), 0 0 0 8px rgba(199,33,39,.35), 0 0 16px 4px rgba(255,255,255,.6); }
  50% { box-shadow: 0 0 0 3px var(--red), 0 0 0 12px rgba(199,33,39,.2), 0 0 30px 10px rgba(255,255,255,.9); }
}
@media (prefers-reduced-motion: reduce) { .us-map-labelled .dot:hover { animation: none; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 8px rgba(199,33,39,.4), 0 0 20px 6px rgba(199,33,39,.8); } }

/* caption drawn in the map's bottom-right corner, where nothing is drawn
   (east of Florida); the offices page titles its map with it */
.us-map .map-title { position: absolute; right: 1.5rem; bottom: 1.25rem; font-family: var(--font-ui); font-weight: 700; font-size: clamp(.75rem, 1.6vw, 1rem); letter-spacing: .14em; text-transform: uppercase; color: #fff; pointer-events: none; }
@media (max-width: 47.99em) { .us-map .label small { display: none; } }
.landmark-table .num { text-align: right; white-space: nowrap; }
.landmark-table .total { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink-strong); }
.landmark-table .date { white-space: nowrap; }
.landmark-table .meta { display: block; font-size: .8125rem; color: var(--muted); }
.landmark-table tfoot td { font-weight: 700; border-top: 2px solid var(--ink-strong); border-bottom: 0; }
.project-hero ul.facts-hero { margin-top: 1rem; max-width: 36rem; grid-template-columns: repeat(3, auto); justify-content: start; }
.project-hero .facts-hero li { background: rgba(255,255,255,.1); }
.project-hero .facts-hero span { color: #d0d0d0; }
.project-hero .facts-hero strong { color: #fff; }

/* One row of cards that scrolls sideways (the homepage Land for Sale strip) */
.card-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; margin: 0 -.25rem; scrollbar-width: thin; }
/* the looping strip (site.js): copies of the cards wrap round, so there is
   no end to snap to and no scrollbar to mislead */
.card-row[data-card-row="loop"] { scroll-snap-type: none; scrollbar-width: none; }
.card-row[data-card-row="loop"]::-webkit-scrollbar { display: none; }
.row-nav { display: flex; align-items: center; gap: .5rem; }
.row-nav .more { margin-left: .5rem; }
.row-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong); font-size: 1.5rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.row-nav button:hover { border-color: var(--red); color: var(--accent-text); }
.card-row > .card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
/* a short row grows to fill the width; a long one keeps 300px cards and scrolls */
@media (min-width: 48em) { .card-row > .card { flex: 1 0 300px; max-width: 400px; } }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.tile { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--black); color: #fff; text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .3s, opacity .3s; }
/* subject on the right of the photo; the square desktop tile would cut it */
.tile img.tile-img-right { object-position: 80% 50%; }
.tile:hover img { transform: scale(1.04); opacity: .9; }
.tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem; font-family: var(--font-ui); font-weight: 700; font-size: .875rem; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); }
@media (min-width: 48em) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70em) { .tiles { grid-template-columns: repeat(6, 1fr); } .tile { aspect-ratio: 1; } }

/* Cards */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Card photos are usually brochure covers with text on them, so they are
   never cropped: the box keeps a 4:3 shape and the cover is letterboxed
   on the grey background. */
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt); }
.card-media a { position: absolute; inset: 0; display: block; }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.badge { position: absolute; top: .6rem; left: .6rem; z-index: 1; display: inline-block; padding: .25rem .55rem; border-radius: 3px; font-family: var(--font-ui); font-weight: 700; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; background: var(--black); color: #fff; }
.badge-red { background: var(--red); }
.badge-green { background: #1e7d3a; }
.badge + .badge { top: 2.4rem; }
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card-date { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); font-size: .8125rem; }
.card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin: 0; }
.card-title a { color: var(--ink-strong); text-decoration: none; }
.card-title a:hover { color: var(--accent-text); }
.card-meta { color: var(--muted); font-size: .9375rem; margin: 0; }
.card-live { font-size: .875rem; color: var(--ink); background: var(--bg-alt); padding: .5rem .6rem; border-radius: 4px; }
.card-live b { font-weight: 700; }
.card-actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.card-actions .btn { flex: 1 1 auto; }

/* Full-width auction rows (homepage and the calendar): photo left, details right */
.card-list { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
/* A house notice slotted between auction rows (the appraisal line on the
   homepage; a news item, the Bidder's Guide...). A solid red banner with a
   white line-art icon behind a hairline rule, a bold headline and a white
   button - the designer's guide banners in docs/ (2026-10-22); the base
   is the one site red with a translucent black wash for the gradient, not
   a second red. Desktop only (owners, 2026-10-08). */
.list-insert { display: none; }
@media (min-width: 48em) {
  .list-insert { display: flex; align-items: center; gap: 1.25rem; padding: .85rem 1.25rem .85rem 1rem; border-radius: var(--radius); background: var(--red) linear-gradient(100deg, rgba(0,0,0,0), rgba(0,0,0,.18)); color: #fff; font-size: .9375rem; line-height: 1.45; box-shadow: var(--shadow); }
  .list-insert-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 5.25rem; padding-right: 1.25rem; border-right: 1px solid rgba(255,255,255,.6); }
  .list-insert-icon svg { width: 4rem; height: 4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .list-insert-icon img { display: block; width: 4rem; height: 4rem; }
  .list-insert p { margin: 0; flex: 1 1 auto; }
  .list-insert b { display: block; margin-bottom: .2rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: #fff; }
  .list-insert b a { color: inherit; text-decoration: none; }
  .list-insert b a:hover { text-decoration: underline; }
  .list-insert-kicker { display: block; margin-bottom: .1rem; font-family: var(--font-ui); font-weight: 700; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .85; }
  .list-insert .btn { flex: 0 0 auto; white-space: nowrap; }
  .list-insert .btn svg { width: .8em; height: .8em; margin-right: -.2rem; }
}
.card-wide { flex-direction: column; }
/* wide rows: the cover sets its own height (whole, uncropped) up to a cap */
.card-wide .card-media { aspect-ratio: auto; }
.card-wide .card-media a { position: static; }
.card-wide .card-media img { height: auto; max-height: 520px; }
.card-wide .card-body { gap: .5rem; }
.card-wide .card-highlights { margin: 0; padding-left: 1.1rem; color: var(--ink); font-size: .9375rem; columns: 1; }
.card-wide .card-highlights li { margin: .15rem 0; break-inside: avoid; }
.card-wide .card-actions .btn { flex: 0 1 auto; }
@media (min-width: 48em) {
  .card-wide { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; }
  .card-wide .card-media { min-height: 260px; display: flex; align-items: center; }
  .card-wide .card-media a { width: 100%; }
  .card-wide .card-media img { max-height: 440px; }
  .card-wide .card-body { padding: 1.25rem 1.5rem; }
  .card-wide .card-highlights { columns: 2; column-gap: 2rem; }
}

/* Listing rows (results pages) */
/* each result is its own card with the site's red left rule (the same mark
   as .highlights and the calendar inserts) so neighbours never run together */
.result { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem 1rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); transition: box-shadow .2s; }
.result + .result { margin-top: 1rem; }
.result:hover { box-shadow: var(--shadow); }
/* cover or photo, boxed like .card-media so a portrait brochure is not cropped */
.result-media { display: block; aspect-ratio: 4 / 3; background: var(--bg-alt); border-radius: 4px; overflow: hidden; }
.result-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.result > div:last-child { grid-column: 1 / -1; }
.result h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.result h3 a { color: var(--ink-strong); text-decoration: none; }
.result h3 a:hover { color: var(--accent-text); }
.result .price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink-strong); }
.result .price small { display: block; font-family: var(--font-body); font-size: .8125rem; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bids { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bids td { padding: .3rem 0 .3rem 1rem; vertical-align: top; border-top: 1px solid var(--line); }
.bids td:first-child { width: 100%; padding-left: 0; }
.bids td + td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bids td:last-child { color: var(--muted); }
.bids td:empty { padding: 0; }
@media (min-width: 48em) { .result { grid-template-columns: 9rem 1fr auto; align-items: start; } .result > div:last-child { grid-column: auto; } .result .price { text-align: right; } }

/* Filter bar */
.filter-bar { background: var(--bg-alt); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius); padding: 1rem; margin: 0 0 1.5rem; }
.filter-bar .row { display: grid; gap: .75rem; grid-template-columns: 1fr; align-items: end; }
.filter-bar label { display: block; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); }
.filter-bar select { display: block; width: 100%; margin-top: .25rem; min-height: 44px; padding: .5rem .6rem; border: 1px solid var(--field-border); border-radius: 4px; background: var(--field-bg); color: var(--ink); font: inherit; }
.filter-bar .summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
.filter-bar .pager { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-bar .spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent-text); border-radius: 50%; animation: spin .6s linear infinite; }
.filter-bar.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 48em) { .filter-bar .row { grid-template-columns: 1fr 1fr auto auto; } .filter-bar select { min-width: 200px; } }

/* Pagination */
.pager-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 2rem 0 0; }

/* Two-column page layout */
.layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* grid items default to min-width:auto, so one long unbreakable string
   (an email address in a person card) widened the column past the phone
   viewport and the whole page scrolled sideways */
.layout > *, .split > *, .card-grid > *, .quote-grid > *, .people-grid > *, .card-wide > * { min-width: 0; }
.person .lines, .agent .lines { overflow-wrap: anywhere; }
@media (min-width: 70em) { .layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.sidebar { display: grid; gap: 1.25rem; align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.panel h3, .panel h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
/* corporate clientele: each logo on its own white tile (logos need white, in dark mode too) */
.client-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.client-logos li { background: #fff; border: 1px solid var(--line); border-radius: 4px; height: 64px; padding: .5rem .75rem; display: flex; align-items: center; justify-content: center; }
.client-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
[data-theme="dark"] .client-logos li { border-color: #444; }
.panel-dark { background: var(--black); color: #ddd; border-color: var(--black); }
.panel-dark h3, .panel-dark h2 { color: #fff; }
.panel-dark a:not(.btn) { color: #fff; text-decoration-color: #888; }
.panel-dark a:not(.btn):hover { color: var(--red); }
.panel-red { background: var(--red); color: #fff; border-color: var(--accent-text); }
.panel-red h3, .panel-red h2, .panel-red a:not(.btn) { color: #fff; }

/* Project (detail) pages */
.project-hero { background: var(--bg-dark); color: #fff; }
.project-hero .container { display: grid; gap: 1.25rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.project-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.9vw, 3rem); margin: .25rem 0 .25rem; }
.project-hero .where { color: #d0d0d0; font-size: 1.0625rem; margin: 0 0 .5rem; }
.project-hero .status { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.project-hero .status .badge { position: static; }
/* the auction/listing hero is usually the brochure cover: shown whole,
   never cropped, capped in height and letterboxed on black */
.project-media { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.project-media img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.project-media .count { position: absolute; right: .6rem; bottom: .6rem; background: rgba(0,0,0,.65); color: #fff; padding: .3rem .6rem; border-radius: 4px; font-size: .8125rem; text-decoration: none; }
@media (min-width: 48em) { .project-hero .container { grid-template-columns: 1.15fr 1fr; align-items: center; padding-top: 2.5rem; padding-bottom: 2.5rem; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.facts li { background: var(--bg-alt); border-radius: var(--radius); padding: .75rem .9rem; }
.facts span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.15; margin-top: .15rem; }
@media (min-width: 48em) { .facts { grid-template-columns: repeat(4, 1fr); } }
/* the auction/listing hero boxes stay two across at every width: two boxes
   fill the row, four make a 2x2 (Kevin, 2026-10-07) */
.project-hero .facts { grid-template-columns: repeat(2, 1fr); }

.subnav { position: sticky; top: var(--header-h); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav .container { position: relative; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: .8rem .75rem; white-space: nowrap; font-family: var(--font-ui); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a[aria-current] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
/* edge fades while tabs are hidden off either side (site.js sets the classes) */
.subnav .container::before, .subnav .container::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.5rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
.subnav .container::before { left: 0; background: linear-gradient(90deg, var(--surface) 30%, transparent); }
.subnav .container::after { right: 0; background: linear-gradient(270deg, var(--surface) 30%, transparent); }
.subnav.has-more:not(.at-start) .container::before { opacity: 1; }
.subnav.has-more:not(.at-end) .container::after { opacity: 1; }
.anchor { scroll-margin-top: calc(var(--header-h) + 56px); }

.prose { max-width: 48rem; }
.prose h3 { margin-top: 1.75rem; text-transform: uppercase; letter-spacing: .04em; font-size: 1.125rem; }
.prose h3:first-child { margin-top: 0; }
.prose img { border-radius: var(--radius); }
.prose ul { padding-left: 1.25rem; }
.highlights { background: var(--bg-alt); border-left: 4px solid var(--red); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.5rem; }
.highlights ul { margin: 0; padding-left: 1.1rem; }
.highlights li { margin: .2rem 0; }
.notice { background: #fff7e6; border: 1px solid #f2d9a6; border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }

/* Online bidding ring starbursts - the 2026 take on the old site's red
   ring1-3.png stickers. One red, flat, Montserrat caps and a serif figure;
   the shape itself is the attention device, so no gradients or bevels.
   A clip-path discards box-shadow, so the halo is a second burst layer
   behind the badge that breathes (transform + opacity only). */
.ring-burst {
  --burst: polygon(50.0% 0.0%, 55.4% 8.9%, 62.9% 1.7%, 65.9% 11.7%, 75.0% 6.7%, 75.3% 17.1%, 85.4% 14.6%, 82.9% 24.7%, 93.3% 25.0%, 88.3% 34.1%, 98.3% 37.1%, 91.1% 44.6%, 100.0% 50.0%, 91.1% 55.4%, 98.3% 62.9%, 88.3% 65.9%, 93.3% 75.0%, 82.9% 75.3%, 85.4% 85.4%, 75.3% 82.9%, 75.0% 93.3%, 65.9% 88.3%, 62.9% 98.3%, 55.4% 91.1%, 50.0% 100.0%, 44.6% 91.1%, 37.1% 98.3%, 34.1% 88.3%, 25.0% 93.3%, 24.7% 82.9%, 14.6% 85.4%, 17.1% 75.3%, 6.7% 75.0%, 11.7% 65.9%, 1.7% 62.9%, 8.9% 55.4%, 0.0% 50.0%, 8.9% 44.6%, 1.7% 37.1%, 11.7% 34.1%, 6.7% 25.0%, 17.1% 24.7%, 14.6% 14.6%, 24.7% 17.1%, 25.0% 6.7%, 34.1% 11.7%, 37.1% 1.7%, 44.6% 8.9%);
  --burst-size: 9.5rem;
  position: relative; isolation: isolate; flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: var(--burst-size); height: var(--burst-size); padding: 1.4rem;
  color: #fff; text-align: center; text-decoration: none; line-height: 1;
  font-family: var(--font-ui); font-weight: 700; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
}
.ring-burst::before, .ring-burst::after { content: ""; position: absolute; inset: 0; clip-path: var(--burst); z-index: -1; }
.ring-burst::before { background: var(--red); transition: background .2s, transform .2s; }
.ring-burst::after { background: var(--red); opacity: .35; transform: rotate(7.5deg) scale(1.1); z-index: -2; animation: burst-halo 2.8s ease-in-out infinite; }
.ring-burst b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; letter-spacing: 0; line-height: .9; }
.ring-burst b.word { font-size: 1.25rem; letter-spacing: .02em; }
.ring-burst small { display: block; font-size: inherit; }
.ring-burst:hover, .ring-burst:focus-visible { color: #fff; }
.ring-burst:hover::before, .ring-burst:focus-visible::before { background: var(--black); transform: scale(1.05); }
.ring-burst:hover::after, .ring-burst:focus-visible::after { animation-play-state: paused; }
[data-theme="dark"] .ring-burst:hover::before, [data-theme="dark"] .ring-burst:focus-visible::before { background: #fff; }
[data-theme="dark"] .ring-burst:hover, [data-theme="dark"] .ring-burst:focus-visible { color: var(--black); }
@keyframes burst-halo {
  0%, 100% { transform: rotate(7.5deg) scale(1.08); opacity: .35; }
  50% { transform: rotate(7.5deg) scale(1.2); opacity: .12; }
}
@media (prefers-reduced-motion: reduce) { .ring-burst::after { animation: none; } }
/* the Overview callout: a row of bursts beside the explanation, where the
   old site floated the three stickers */
.ring-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--bg-alt); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; }
.ring-callout .ring-bursts { display: flex; flex-wrap: wrap; gap: .75rem; }
.ring-callout .ring-text { flex: 1 1 16rem; }
.ring-callout .ring-text p { margin: 0 0 .35rem; }
.ring-callout .ring-text p:last-child { margin-bottom: 0; }
.ring-callout .ring-text ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.ring-callout .ring-text li { margin: .15rem 0; }
/* two bursts fit side by side on a phone at this size; a third wraps, centred */
@media (max-width: 47.99em) {
  .ring-callout .ring-bursts { width: 100%; justify-content: center; }
  .ring-callout .ring-burst { --burst-size: 7.5rem; padding: 1.1rem; font-size: .5625rem; }
  .ring-callout .ring-burst b { font-size: 2.125rem; }
  .ring-callout .ring-burst b.word { font-size: 1.0625rem; }
}

.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.file-list li:last-child { border-bottom: 0; }
.file-list .ico { flex: 0 0 34px; height: 34px; border-radius: 4px; background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700; font-size: .625rem; color: var(--link); text-transform: uppercase; }

.map-figure { margin: 0 0 1.5rem; }
.map-figure figcaption { font-size: .875rem; color: var(--muted); margin-top: .35rem; }
.map-frame { position: relative; line-height: 0; border-radius: var(--radius); overflow: hidden; }
.map-frame img { width: 100%; }
.map-frame .overlay { position: absolute; left: 0; top: 0; width: 100%; }
.map-frame .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); }
/* An uploaded self-contained HTML map (web-file type 38). The frame cannot
   read the map's height (cross-origin, sandboxed), but the map page sizes
   its stage to the frame width at the map's own aspect and adds a title,
   a toggle row and credits of roughly fixed height, so the frame height is
   the column width times that aspect plus an allowance for the chrome,
   larger on phones where the toggles and credits wrap. The allowance is
   deliberately generous: excess is white on white, a shortfall is a
   scrollbar. Browsers without container units get a 3:4 frame. */
.interactive-map-wrap { container-type: inline-size; margin: 0 0 1.5rem; }
.interactive-map { display: block; width: 100%; aspect-ratio: 3 / 4; min-height: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
@supports (height: 1cqw) {
  .interactive-map { aspect-ratio: auto; min-height: 0; height: calc(101.6cqw + 300px); }
  @media (max-width: 48em) { .interactive-map { height: calc(101.6cqw + 460px); } }
}

.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.thumbs a { display: block; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--bg-alt); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48em) { .thumbs { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 70em) { .thumbs { grid-template-columns: repeat(6, 1fr); } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0,0,0,.92); }
.lightbox .frame { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 96vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 0; color: #ddd; text-align: center; font-size: .875rem; padding: .75rem; }
.lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; }
.lightbox .lb-prev { left: .5rem; } .lightbox .lb-next { right: .5rem; }
.lightbox .lb-close { top: 1.5rem; right: .75rem; transform: none; font-size: 1.25rem; }

.agent { display: flex; gap: 1rem; align-items: center; }
.agent img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; }
.agent .name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; }
.agent .name a { color: var(--ink-strong); text-decoration: none; }
.agent .lines { font-size: .9375rem; margin: 0; }
.agent .lines a { display: block; }

.sold-box { border: 2px solid var(--ink-strong); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.sold-box h2 { margin: 0 0 .5rem; }

.cta-band { background: var(--black); color: #ddd; border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1rem; }
.cta-band h3, .cta-band h2 { color: #fff; margin: 0 0 .25rem; }
.cta-band p { margin: 0; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-band .phone { color: #fff; font-weight: 600; }
@media (min-width: 48em) { .cta-band { grid-template-columns: 1fr auto; align-items: center; } .cta-band-stack { grid-template-columns: 1fr; } }
.cta-band-stack .actions { flex-direction: column; align-items: flex-start; }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); display: flex; gap: .5rem; }
.sticky-cta .btn { flex: 1; min-height: 44px; font-size: .9375rem; }
body.has-sticky-cta { padding-bottom: 72px; }
@media (min-width: 70em) { .sticky-cta { display: none; } body.has-sticky-cta { padding-bottom: 0; } }

/* Home extras */
.split { display: grid; gap: 1.5rem; }
@media (min-width: 48em) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
.split img { border-radius: var(--radius); }
.quote { font-size: 1.125rem; font-style: italic; margin: 0; }
.quote footer { font-style: normal; font-weight: 600; font-size: .9375rem; margin-top: .5rem; color: var(--muted); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.news-list li { border-top: 1px solid var(--line); padding-top: 1rem; }
.news-list a { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--ink-strong); text-decoration: none; }
.news-list a:hover { color: var(--accent-text); }
.news-list p { margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; }
/* inside a sidebar panel the same list is plain navigation: body type a step below the panel heading */
.panel .news-list { gap: .6rem; }
.panel .news-list li { padding-top: .6rem; }
.panel .news-list a { font-family: var(--font-ui); font-weight: 500; font-size: .9375rem; line-height: 1.4; color: var(--ink); }
.panel .news-list a:hover { color: var(--accent-text); text-decoration: underline; }
.panel .news-list p { font-size: .875rem; margin-top: .1rem; }
.checks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.checks li { padding-left: 1.75rem; position: relative; }
.checks-2 { gap: .75rem 2rem; }
@media (min-width: 48em) { .checks-2 { grid-template-columns: 1fr 1fr; } }
.checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: var(--red); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' stroke='%23fff' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' stroke='%23fff' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Content pages: photo strips, timeline, office cards */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.page-head h1 { margin-bottom: .35em; }
.page-head .lede { margin: 0; }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.photo-strip figcaption { font-size: .8125rem; color: var(--muted); margin-top: .35rem; }
.photo-strip figure { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--red); }
.timeline li { position: relative; padding: 0 0 2rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: .35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--red); border: 3px solid var(--bg); }
.timeline .year { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent-text); line-height: 1; margin-bottom: .35rem; }
.timeline h3 { margin-bottom: .35rem; }
/* history page: the timeline as full-width alternating bands; each .era
   fills its band's height, so the red line runs unbroken from band to band */
.history-bands { list-style: none; margin: 0; padding: 0; }
.history-band .era { position: relative; max-width: 60rem; border-left: 3px solid var(--red); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem) 1.5rem; }
.history-band .era::before { content: ""; position: absolute; left: -9px; top: calc(clamp(2rem, 5vw, 3.5rem) + .35rem); width: 15px; height: 15px; border-radius: 50%; background: var(--red); border: 3px solid var(--bg); }
.history-band.section-alt .era::before { border-color: var(--bg-alt); }
.history-band .year { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent-text); line-height: 1; margin-bottom: .5rem; }
.history-band h3 { margin-bottom: .5rem; }
.history-band .era > :last-child { margin-bottom: 0; }
.office { display: grid; gap: .25rem; }
.office .state { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; color: var(--accent-text); }
.office .name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.office address { font-style: normal; color: var(--muted); margin: 0; }
.office a.tel { font-weight: 600; }
.partner { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.partner img { width: 96px; height: auto; }
.partner h3 { margin-bottom: .25rem; font-size: 1.125rem; }
.partner p { margin: 0; font-size: .9375rem; color: var(--muted); }
.partner-wide { grid-template-columns: 1fr; }
.partner-wide img { width: 220px; }
@media (min-width: 48em) { .partner-wide { grid-template-columns: 220px 1fr; } }

/* People grid */
.people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 48em) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70em) { .people-grid { grid-template-columns: repeat(4, 1fr); } }
.person { text-align: center; padding: 1.25rem 1rem; }
.person img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto .75rem; background: var(--bg-alt); }
.person .name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 .25rem; color: var(--ink-strong); }
.person .place { font-size: .875rem; color: var(--muted); margin: -.1rem 0 .4rem; }
.person .lines { font-size: .875rem; margin: 0 0 .75rem; }
.person .lines a { display: block; }
.quote-grid { display: grid; gap: 1rem; }
@media (min-width: 48em) { .quote-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.quote-grid .quote { font-size: 1rem; }

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 1.75rem 3.5rem; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.steps h3 { margin: .35rem 0 .35rem; text-transform: none; letter-spacing: 0; font-size: 1.25rem; }
.steps p { margin: 0; }

/* Articles (resources, stories) */
.article { max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; }
.article h2 { font-size: 1.6rem; margin: 1.75em 0 .5em; }
.article h3 { font-size: 1.25rem; margin: 1.5em 0 .4em; }
.article p { margin: 0 0 1.1em; }
.article img { border-radius: var(--radius); margin: .5em 0 1em; }
.article ul, .article ol { padding-left: 1.4rem; margin: 0 0 1.1em; }
.article li { margin: .3em 0; }
.article blockquote { margin: 1.5em 0; padding: 1rem 1.25rem; border-left: 4px solid var(--red); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.25em; font-size: .9375rem; }
.article th, .article td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.article figure { margin: .5em 0 1.25em; }
.article figcaption { font-size: .875rem; color: var(--muted); margin-top: .35rem; }
.article a, .prose a { overflow-wrap: anywhere; }
.article-meta { color: var(--muted); font-size: .9375rem; margin: 0; }
.article-meta a { color: inherit; }
.article .article-lead { float: left; width: min(20rem, 45%); margin: .25rem 1.5rem .75rem 0; border-radius: var(--radius); }
@media (max-width: 47.99em) { .article .article-lead { float: none; width: 100%; margin: 0 0 1rem; } }
.prev-next { display: grid; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .prev-next { grid-template-columns: 1fr 1fr; } .prev-next .next { text-align: right; } }
.prev-next span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.prev-next a { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--ink-strong); text-decoration: none; }
.prev-next a:hover { color: var(--accent-text); }
.series-list { margin: 0; padding-left: 1.4rem; }
.series-list li { margin: .35rem 0; }
.series-list li a, .series-list li strong { font-size: .9375rem; }

/* Search results */
.search-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.search-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-strong); font-weight: 600; font-size: .9375rem; }
.search-tabs a.empty { color: var(--muted); }
.search-tabs a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.search-section { margin: 0 0 2rem; }
.search-section h2 { font-size: 1.35rem; display: flex; align-items: baseline; gap: .5rem; }
.search-section h2 .count { font-family: var(--font-body); font-weight: 400; font-size: .9375rem; color: var(--muted); }
.search-result { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.search-result a { font-weight: 600; color: var(--ink-strong); text-decoration: none; }
.search-result a:hover { color: var(--accent-text); }
.search-result .meta { display: block; color: var(--muted); font-size: .9375rem; }
.search-result .tag { display: inline-block; margin-left: .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
.search-empty { color: var(--muted); font-size: .9375rem; }
.search-note { border-left: 4px solid var(--red); background: var(--bg-alt); padding: .75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.5rem; }
.search-note h3 { margin: 0 0 .35rem; font-size: 1.125rem; }
.search-note p { margin: .25rem 0; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: .875rem; }
.mode-toggle a { padding: .35rem .8rem; text-decoration: none; color: var(--ink); }
.mode-toggle a.on { background: var(--black); color: #fff; }

/* Checkbox grids, alerts, message boxes */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; margin: .5rem 0 1.25rem; }
@media (min-width: 48em) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.check-grid label { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.check-grid input { width: 18px; height: 18px; accent-color: var(--accent-text); }
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; font-size: .9375rem; }
.alert-error { background: var(--surface); border: 1px solid var(--red); border-left-width: 4px; color: var(--red); }
.field-flag { color: var(--red); }
.alert-ok { background: #e9f7ec; border: 1px solid #b7e2c1; color: #1e5c2c; }
.pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0 1.5rem; }
@media (min-width: 48em) { .pick { grid-template-columns: repeat(4, 1fr); } }
.pick label { display: block; text-align: center; cursor: pointer; }
.pick img { border: 2px solid var(--line); border-radius: var(--radius); margin-bottom: .4rem; }
.pick input:checked + img { border-color: var(--accent-text); }
.pick input { accent-color: var(--accent-text); }
.state-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.state-list .btn { min-height: 34px; padding: .25rem .7rem; font-size: .875rem; }
.state-list .btn small { font-family: var(--font-body); text-transform: none; letter-spacing: 0; margin-left: .35rem; }
.state-list .cnt { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; }
.state-list .cnt.on { background: #1e7d3a; color: #fff; font-weight: 700; }
.state-panel { display: none; width: 100%; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; margin: .25rem 0 .5rem; }
.state-panel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.state-panel select { width: 100%; font-size: .8125rem; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--ink); border-radius: 4px; }
.state-panel .btn { min-height: 28px; padding: .1rem .6rem; font-size: .75rem; margin-top: .35rem; }
.region-box { background: var(--bg-alt); border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; }
.region-box .btn { min-height: 32px; padding: .2rem .6rem; font-size: .8125rem; margin: .15rem 0; }
.btn-re { background: #d97706; border-color: #d97706; color: #fff; }
.btn-pp { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sitemap-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
.sitemap-grid h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.sitemap-grid ul { list-style: none; margin: 0; padding: 0; }
.sitemap-grid li { padding: .25rem 0; }
.toc { columns: 1; padding-left: 1.25rem; margin: 0 0 2rem; }
@media (min-width: 48em) { .toc { columns: 2; column-gap: 2rem; } }
.toc li { break-inside: avoid; margin: .25rem 0; }

/* Forms */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 48em) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .3rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--field-border); border-radius: 4px; font: inherit; background: var(--field-bg); color: var(--ink); }
.field textarea { min-height: 140px; }
.field .hint { font-size: .8125rem; color: var(--muted); margin-top: .25rem; }
/* checkboxes and radios inside a field keep their native size; the text
   input beside a radio stays inline */
.field input[type="checkbox"], .field input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--accent-text); }
.field .check-grid input[type="text"] { width: auto; min-height: 34px; }
.field .pick label { display: block; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }

/* Footer */
.site-footer { background: var(--bg-dark); color: #c9c9c9; margin-top: 3rem; font-size: .9375rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--red); }
.footer-grid { display: grid; gap: 2rem; padding: 3rem 0 2rem; }
.site-footer h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .3rem 0; }
.footer-logo { width: 150px; margin-bottom: 1rem; }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); align-items: center; justify-content: center; }
.social a:hover { background: var(--red); color: #fff; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.newsletter img { border: 1px solid #333; max-width: 200px; }
.assoc { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid #2a2a2a; }
.assoc img { height: 44px; width: auto; filter: grayscale(1) brightness(1.4); opacity: .8; }
.legal { padding: 1.25rem 0 2rem; border-top: 1px solid #2a2a2a; font-size: .8125rem; color: #9a9a9a; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.legal a { color: #ccc; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

@media print {
  .site-header, .site-footer, .sticky-cta, .subnav, .btn { display: none !important; }
  body { color: #000; }
}