/* ==========================================================================
   Casselberry Rescreening — casselberryrescreening.com
   Mid-century modern. Mustard, teal, off-white. Slab caps, wide tracking,
   a visible grid, hard offset shadows, square corners.

   No webfonts, no external requests. The display stack leans on Rockwell
   (Office) then Roboto Slab (Android) then Georgia, all of which carry the
   heavy-serif print feel this direction wants. The label stack is geometric
   — Futura on macOS, Century Gothic on Windows — which is the actual
   mid-century signage face rather than an imitation of one.
   ========================================================================== */

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

:root {
  --mustard:   #D9A441;
  --mustard-d: #B07E23;
  --mustard-l: #EFCE8E;
  --teal:      #2E6E6B;
  --teal-d:    #1E4B49;
  --teal-l:    #7BA9A6;
  --cream:     #F2EDE3;
  --cream-2:   #E8E0D0;
  --cream-3:   #DBD0BA;
  --ink:       #221E1A;
  --ink-2:     #4C463D;
  --rust:      #A9552F;
  --rule:      #C6B99F;

  --wrap: 1140px;
  --gut: clamp(18px, 4vw, 40px);

  --f-display: "Rockwell", "Roboto Slab", "Bookman Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --f-label: "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;

  /* The visible grid. 1px teal hairlines on a 28px module. */
  --grid: repeating-linear-gradient(to right, rgba(46,110,107,.13) 0 1px, transparent 1px 28px),
          repeating-linear-gradient(to bottom, rgba(46,110,107,.13) 0 1px, transparent 1px 28px);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}

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

a { color: var(--teal-d); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }

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

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--cream); padding: 12px 18px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 {
  font-size: clamp(31px, 5.4vw, 56px);
  letter-spacing: -.005em;
  line-height: 1.04;
}
h2 { font-size: clamp(25px, 3.4vw, 38px); }
h3 { font-size: clamp(19px, 2.1vw, 23px); letter-spacing: .015em; }
h4 { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--f-label); font-weight: 700; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 14px;
  display: block;
}
.eyebrow--cream { color: var(--mustard-l); }

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}
.lede strong { color: var(--ink); }

.small { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.src {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  word-break: break-word;
}
.src a { color: var(--ink-2); }

ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .42em; }

.ticks { list-style: none; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: .6em;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 13px; height: 13px; background: var(--mustard);
  border: 2px solid var(--ink);
}

hr.rule { border: 0; border-top: 3px solid var(--ink); margin: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: var(--cream-2);
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; justify-content: space-between; min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--mustard); text-decoration: none; }
.topbar a:hover { color: var(--mustard-l); }

header.site { background: var(--cream); border-bottom: 3px solid var(--ink); }
header.site .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  padding-top: 18px; padding-bottom: 18px;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-logo { height: 50px; width: auto; flex: none; display: block; }
.brand-mark { flex: none; color: var(--teal); }
.brand-text { display: flex; flex-direction: column; }
.fbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.footer-logo {
  height: 40px; width: auto; background: #fff; padding: 6px 12px;
  border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.brand b, .brand-name {
  display: block; font-family: var(--f-display); font-size: 21px;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}
.brand span {
  display: block; font-family: var(--f-label); font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal);
  margin-top: 5px;
}

nav.main ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
nav.main a {
  font-family: var(--f-label); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding: 5px 0; display: inline-block; border-bottom: 3px solid transparent;
}
nav.main a:hover { border-bottom-color: var(--mustard); color: var(--ink); }
nav.main a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--teal-d); }

/* --------------------------------------------------------------------------
   Buttons — square, 3px ink border, hard offset shadow. Print-era.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px;
  border: 3px solid var(--ink);
  background: var(--mustard);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .08s linear, box-shadow .08s linear;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn--teal { background: var(--teal); color: var(--cream); border-color: var(--ink); }
.btn--teal:hover { color: var(--cream); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--cream-2); transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; margin-top: 30px; }

/* The [NEED:] token, wherever it renders. Deliberately ugly so it cannot
   ship to production unnoticed. */
.need {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  background: repeating-linear-gradient(45deg, #F6E4DB 0 7px, #EFD4C7 7px 14px);
  color: var(--rust);
  border: 2px dashed var(--rust);
  padding: 5px 9px;
  box-shadow: none;
  font-weight: 700;
}
a.need, .need a { color: var(--rust); }

.need-box {
  border: 2px dashed var(--rust);
  background: #FAF0EA;
  padding: 20px 22px;
  margin: 26px 0;
}
.need-box h4 { color: var(--rust); margin-bottom: 8px; }
.need-box p { font-size: 15px; color: var(--ink-2); }
.need-box code { font-family: var(--f-mono); font-size: 13px; color: var(--rust); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { padding: clamp(52px, 7vw, 92px) 0; position: relative; }
section.tight { padding: clamp(38px, 5vw, 60px) 0; }

.band-cream2 { background: var(--cream-2); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.band-teal { background: var(--teal); color: var(--cream); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.band-teal h2, .band-teal h3, .band-teal h4 { color: var(--cream); }
.band-teal .lede, .band-teal p { color: var(--cream-2); }
.band-teal a { color: var(--mustard); }
.band-ink { background: var(--ink); color: var(--cream-2); border-top: 3px solid var(--ink); }
.band-ink h2, .band-ink h3 { color: var(--cream); }

.sec-head { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; margin-bottom: 40px; }
.sec-num {
  width: 62px; height: 62px; background: var(--teal); color: var(--cream);
  font-family: var(--f-display); font-size: 27px; line-height: 62px; text-align: center;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--mustard);
}
.band-teal .sec-num { background: var(--mustard); color: var(--ink); box-shadow: 5px 5px 0 var(--cream); }
.sec-head h2 { margin-bottom: .35em; }
.sec-head .lede { margin: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--cream);
  background-image: var(--grid);
  border-bottom: 3px solid var(--ink);
  padding: clamp(46px, 6.5vw, 84px) 0 clamp(40px, 5.5vw, 70px);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* atomic arc, bottom right — pure CSS, no asset request */
  content: "";
  position: absolute; right: -140px; bottom: -190px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 3px solid var(--teal-l);
  opacity: .5;
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--teal-d); }
.hero .lede { max-width: 58ch; }

.hero-year {
  display: inline-flex; align-items: baseline; gap: 12px;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; margin-bottom: 22px;
  font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: .18em; font-size: 11px;
}
.hero-year b { font-family: var(--f-display); font-size: 25px; letter-spacing: .02em; color: var(--mustard); }

.hero-card {
  background: var(--cream-2);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--teal);
  padding: 26px 26px 28px;
}
.hero-card h3 { font-size: 20px; margin-bottom: 14px; }
.hero-card ul { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Cards + grids
   -------------------------------------------------------------------------- */

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 32px); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: start; }

.card {
  background: var(--cream);
  border: 3px solid var(--ink);
  padding: 24px 24px 26px;
  position: relative;
}
.card::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 9px; background: var(--mustard); }
.card--teal::before { background: var(--teal); }
.card--rust::before { background: var(--rust); }
.card h3 { margin-top: 8px; font-size: 20px; }
.card p:last-child { margin-bottom: 0; }
.card .icon { width: 34px; height: 34px; color: var(--teal); margin-bottom: 12px; display: block; }
.band-cream2 .card { background: var(--cream); }

.stat {
  border: 3px solid var(--ink);
  background: var(--cream);
  padding: 20px 20px 22px;
  box-shadow: 5px 5px 0 var(--mustard);
}
.stat b {
  display: block; font-family: var(--f-display); font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1; color: var(--teal-d); margin-bottom: 10px; letter-spacing: -.01em;
}
.stat span { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--ink-2); display: block; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Era timeline — the signature module. Bars are positioned from real
   verified build-year ranges; widths are computed in build.py.
   -------------------------------------------------------------------------- */

.timeline { border: 3px solid var(--ink); background: var(--cream); padding: 0; }
.tl-scale {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
  padding: 12px 16px 10px; border-bottom: 3px solid var(--ink); background: var(--cream-2);
  letter-spacing: .04em;
}
.tl-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 0; border-bottom: 1px solid var(--rule); }
.tl-row:last-child { border-bottom: 0; }
.tl-name {
  font-family: var(--f-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 14px; border-right: 1px solid var(--rule); line-height: 1.35;
}
.tl-name a { text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--mustard); }
.tl-track { position: relative; height: 46px; background-image: repeating-linear-gradient(to right, rgba(46,110,107,.14) 0 1px, transparent 1px 10%); }
.tl-bar {
  position: absolute; top: 12px; height: 22px;
  background: var(--teal); border: 2px solid var(--ink);
  display: flex; align-items: center; white-space: nowrap;
}
.tl-bar.old { background: var(--rust); }
.tl-bar.new { background: var(--mustard); }
.tl-bar em {
  position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 11px; font-style: normal; color: var(--ink-2);
}
.tl-bar.flip em { left: auto; right: calc(100% + 9px); }
.tl-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-family: var(--f-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tl-key i { width: 14px; height: 14px; border: 2px solid var(--ink); display: inline-block; vertical-align: -2px; margin-right: 7px; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 3px solid var(--ink); background: var(--cream); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15.5px; }
caption {
  text-align: left; padding: 14px 16px; background: var(--ink); color: var(--cream);
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px;
}
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  background: var(--cream-2); border-bottom: 3px solid var(--ink);
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px;
}
tbody tr:last-child td { border-bottom: 0; }
td strong { font-family: var(--f-display); }

/* --------------------------------------------------------------------------
   FAQ — verbatim searcher wording, kept lowercase on purpose
   -------------------------------------------------------------------------- */

.faq { border-top: 3px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--rule); padding: 26px 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  font-family: var(--f-display); font-size: clamp(18px, 2vw, 21px); line-height: 1.25;
  margin: 0 0 12px; color: var(--ink);
}
.faq-n {
  font-family: var(--f-mono); font-size: 12px; color: var(--cream);
  background: var(--teal); border: 2px solid var(--ink); width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.faq-a { color: var(--ink-2); font-size: 16px; }
.faq-a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Mesh weave swatches (inline SVG) + diagrams
   -------------------------------------------------------------------------- */

.mesh { border: 3px solid var(--ink); background: var(--cream); }
.mesh svg { display: block; width: 100%; height: auto; border-bottom: 3px solid var(--ink); }
.mesh div { padding: 16px 18px 18px; }
.mesh h3 { font-size: 18px; margin-bottom: 8px; }
.mesh .spec { font-family: var(--f-mono); font-size: 12px; color: var(--teal-d); letter-spacing: .02em; margin-bottom: 10px; }

figure { margin: 28px 0; }
figure svg { display: block; width: 100%; height: auto; border: 3px solid var(--ink); background: var(--cream); }
figcaption { font-family: var(--f-label); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); margin-top: 12px; }

/* Photo slots — deliberate labelled placeholder until a real file exists */
.photo-slot {
  border: 3px dashed var(--rule); background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 28px 20px; color: var(--ink-2);
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.6;
}
.photo-frame { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--teal); }

/* --------------------------------------------------------------------------
   Neighborhood list
   -------------------------------------------------------------------------- */

.hood {
  border: 3px solid var(--ink); background: var(--cream); padding: 22px 22px 24px;
}
.hood h3 { font-size: 19px; margin-bottom: 6px; }
.hood .years {
  font-family: var(--f-mono); font-size: 12px; color: var(--cream); background: var(--teal-d);
  display: inline-block; padding: 3px 9px; margin-bottom: 12px; letter-spacing: .03em;
}
.hood .years.old { background: var(--rust); }
.hood .years.new { background: var(--mustard-d); }
.hood .meta { font-family: var(--f-label); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.hood p { font-size: 15px; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.chips li {
  font-family: var(--f-label); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--ink); background: var(--cream); padding: 7px 11px; margin: 0;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form-wrap { border: 3px solid var(--ink); background: var(--cream-2); padding: clamp(22px, 3vw, 34px); box-shadow: 8px 8px 0 var(--teal); }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--f-label); font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 7px; color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 13px;
  border: 3px solid var(--ink); background: var(--cream); color: var(--ink);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
button.btn { cursor: pointer; font-family: var(--f-label); }

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

.cta { text-align: left; }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px 40px; align-items: center; }
.cta h2 { margin-bottom: .3em; }

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

footer.site { background: var(--ink); color: var(--cream-2); padding: clamp(46px, 5vw, 66px) 0 30px; border-top: 3px solid var(--ink); }
footer.site a { color: var(--mustard); }
footer.site h4 { color: var(--mustard); letter-spacing: .18em; margin-bottom: 14px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .5em; font-size: 15px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-brand b { font-family: var(--f-display); font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--cream); display: block; margin-bottom: 10px; }
.footer-logo {
  height: 40px; width: auto; background: #fff; padding: 6px 12px;
  border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.25); margin-bottom: 12px;
}
.nap { font-size: 15px; line-height: 1.75; }
.nap .need { font-size: 11.5px; padding: 3px 7px; }
.foot-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(242,237,227,.22);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 13px; color: #9A9186;
}
.foot-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.crumbs { background: var(--cream-2); border-bottom: 1px solid var(--rule); font-family: var(--f-label); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 11px 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.crumbs a { color: var(--teal-d); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.err { padding: clamp(60px, 10vw, 130px) 0; background-image: var(--grid); }
.err h1 { font-size: clamp(56px, 13vw, 132px); color: var(--teal-d); margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .cta .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-num { width: 52px; height: 52px; line-height: 52px; font-size: 23px; }
  .tl-row { grid-template-columns: 1fr; }
  .tl-name { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
  .tl-track { height: 40px; }
  .tl-bar em { font-size: 10px; }
  .faq-item { grid-template-columns: 1fr; gap: 12px; }
  .faq-n { width: 36px; height: 36px; }
  .hero::after { display: none; }
  .btn { display: block; text-align: center; }
  .btn-row { display: grid; grid-template-columns: 1fr; }
}

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

@media print {
  .topbar, nav.main, .cta, .btn-row, .form-wrap { display: none; }
  body { background: #fff; font-size: 12pt; }
  .card, .hood, .timeline, .tablewrap { break-inside: avoid; }
}