/* Top Creative Remodeling - site styles.
   one idea: forged bronze on a graphite drafting sheet. the page is a gray sheet (refined charcoal / graphite + a faint drafting grid);
   black and bronze (gold) are the brand. one accent (the bronze from the logo). there is no blue anywhere: the owner asked for gray.
   rule: text never sits on the grid. it sits on a black card or on a darker-gray scrim.
   all colors live in :root. nothing is hidden unless JS is running AND motion is allowed. */

/* ---------- tokens ---------- */
:root {
  /* the graphite sheet (token names keep the old "bp" = blueprint prefix so contraste.py and the docs still match) */
  --bp: #3a3b3d;              /* graphite gray: the page */
  --bp-deep: #2b2c2e;         /* darker gray: alternating bands */
  --scrim-rgb: 25 26 27;      /* deepest gray, for the scrim behind text that sits on the sheet */
  --black: #0d0e10;           /* brand black: header, footer, cards (neutral, no blue cast) */
  --black-rgb: 13 14 16;

  /* the drafting grid (css only: a 24px minor grid and a 120px major grid) */
  --grid-minor: rgb(255 255 255 / 0.05);
  --grid-major: rgb(255 255 255 / 0.09);
  --grid-step: 24px;
  --grid-major-step: 120px;
  --mark: rgb(222 224 228 / 0.34);   /* registration marks and dimension lines (decor only) */

  /* surfaces: components read these. text always sits on one of them, never on the bare grid */
  --scrim: rgb(var(--scrim-rgb) / 0.8);
  --surface: rgb(var(--black-rgb) / 0.95);
  --line: rgb(212 214 219 / 0.24);          /* neutral gray hairline */
  --line-soft: rgb(212 214 219 / 0.12);
  --line-gold: rgb(var(--accent-rgb) / 0.4);
  --field-border: #7e8187;

  /* text */
  --ink: #f3f3f1;
  --ink-soft: #d1d2d4;
  --ink-muted: #aaacb0;

  /* the single accent */
  --accent: #b6822f;          /* bronze, measured from the logo */
  --accent-rgb: 182 130 47;
  --accent-bright: #d4a04a;   /* the same bronze, lifted, for small text on dark */
  --on-accent: #0d0e10;       /* black text on bronze */
  --danger: #ff9d8f;

  /* type */
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --t-body: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --t-lead: clamp(1.094rem, 1.0208rem + 0.3241vw, 1.3125rem);
  --t-h1: clamp(2.5rem, 1.75rem + 3.3333vw, 4.75rem);
  --t-h1p: clamp(2.0625rem, 1.5417rem + 2.3148vw, 3.625rem);
  --t-h2: clamp(1.8125rem, 1.375rem + 1.9444vw, 3.125rem);
  --t-h3: clamp(1.25rem, 1.1458rem + 0.463vw, 1.5625rem);

  /* layout */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --max: 76rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --preview-h: 0px;
  --header-h: calc(4.25rem + 1px);   /* the script replaces this with the real header height when the phone menu opens */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* decorative masks: a weld bead, a Greek key (from the logo ring), a check mark */
  --bead-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5Q6-1 12 5T24 5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  --key-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11H24M2 11V1H20V8H8V4H14' fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* section tones: components read --s-*, so they do not care which tone they sit in.
   dark = the open graphite sheet. alt = the same sheet under a darker gray band. (there is no light tone any more) */
:root,
[data-tone="dark"] {
  --s-bg: transparent;
  --s-surface: var(--surface);
  --s-ink: var(--ink);
  --s-soft: var(--ink-soft);
  --s-muted: var(--ink-muted);
  --s-line: var(--line);
  --s-accent: var(--accent-bright);
  --s-fill: var(--accent);
  --s-on-fill: var(--on-accent);
  --s-danger: var(--danger);
}
[data-tone="alt"] {
  --s-bg: color-mix(in srgb, var(--bp-deep) 62%, transparent);
  box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
}
[data-tone] {
  background: var(--s-bg);
  color: var(--s-ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scroll-padding-top: calc(var(--preview-h) + 5.5rem);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* the graphite sheet, drawn with gradients only (no images, no requests):
     side shading, a soft light at the top, then the 120px major grid over the 24px minor grid */
  background-color: var(--bp);
  background-image:
    linear-gradient(90deg, rgb(8 9 10 / 0.45), transparent 12%, transparent 88%, rgb(8 9 10 / 0.45)),
    radial-gradient(ellipse 80% 100% at 50% 0%, rgb(190 190 190 / 0.13), transparent 72%),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 46rem,
    var(--grid-major-step) var(--grid-major-step),
    var(--grid-major-step) var(--grid-major-step),
    var(--grid-step) var(--grid-step),
    var(--grid-step) var(--grid-step);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  background-position: 0 0, 50% 0, 0 0, 0 0, 0 0, 0 0;
  color: var(--ink);
  font: 400 var(--t-body) / 1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

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

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 300;
  padding: 0.75rem 1.1rem; background: var(--accent); color: var(--on-accent);
  font: 700 0.875rem var(--font-head); text-decoration: none; border-radius: 3px;
}
.skip-link:focus { top: calc(var(--preview-h) + 0.5rem); }
.icon { flex: none; width: 1.25rem; height: 1.25rem; }
.hp { display: none !important; }

/* ---------- the scrim: a calm, darker-gray panel for text that sits directly on the graphite sheet ----------
   section intros (.sec-head), hero copy and short text blocks use it, so the grid never runs behind a paragraph.
   on phones it runs edge to edge so the text keeps its width. */
.scrim,
.hero-copy,
.sec-head {
  position: relative;
  width: fit-content; max-width: min(100%, 62rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--scrim);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.scrim::before,
.hero-copy::before,
.sec-head::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 2.75rem; height: 2px; background: var(--accent);
}
/* a scrim inside a scrim is just content */
.scrim .scrim, .scrim .sec-head, .hero-copy .sec-head {
  width: auto; max-width: none; padding: 0; background: none; border: 0; border-radius: 0;
}
.scrim .scrim::before, .scrim .sec-head::before, .hero-copy .sec-head::before { display: none; }
.scrim .sec-head { margin-bottom: 1.25rem; }
/* a text-only section (no list beside it): shorter lines */
@media (min-width: 40rem) { .scrim--text { max-width: min(100%, 48rem); } }
@media (max-width: 39.999rem) {
  .scrim, .hero-copy, .sec-head {
    width: auto; max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-inline: 0; border-radius: 0;
  }
  .scrim::before, .hero-copy::before, .sec-head::before { left: var(--gutter); }
  .scrim .scrim, .scrim .sec-head, .hero-copy .sec-head { margin-inline: 0; padding-inline: 0; }
}

/* ---------- type ---------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--s-accent);
  font-size: 1.08em;
  line-height: 0;
}
.eyebrow {
  margin: 0 0 1.1rem;
  font: 700 0.75rem / 1.3 var(--font-head);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-accent);
}
.lead {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--s-soft);
}
.prose-link, .link {
  color: var(--s-accent);
  text-underline-offset: 0.2em;
}

/* the signature: a weld bead that draws itself under headings */
.bead {
  display: block;
  width: 7.5rem;
  height: 0.625rem;
  margin-top: 1.25rem;
  background: var(--s-fill);
  -webkit-mask: var(--bead-mask) repeat-x left center / 1.5rem 0.625rem;
  mask: var(--bead-mask) repeat-x left center / 1.5rem 0.625rem;
}
/* a thin Greek key strip, borrowed from the ring in the logo */
.key {
  display: block;
  height: 0.75rem;
  background: var(--accent);
  opacity: 0.5;
  -webkit-mask: var(--key-mask) repeat-x left center / 1.5rem 0.75rem;
  mask: var(--key-mask) repeat-x left center / 1.5rem 0.75rem;
}

/* editorial section header: thin rule, label, headline (no numbers) */
.section { padding-block: var(--section-y); }
.sec-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sec-head__meta {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem;
  font: 700 0.75rem / 1 var(--font-head); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s-soft);
}
.sec-head__meta::after { content: ""; order: 2; flex: 1; height: 1px; background: var(--s-line); }
.sec-head__label { order: 3; }
.sec-head .lead { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  border: 1.5px solid transparent; border-radius: 3px;
  font: 700 0.8125rem / 1.2 var(--font-head); letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn--primary { background: var(--s-fill); border-color: var(--s-fill); color: var(--s-on-fill); }
.btn--primary:hover {
  background: var(--accent-bright); border-color: var(--accent-bright);
  box-shadow: 0 0 34px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn--ghost {
  background: transparent; color: var(--s-ink);
  border-color: color-mix(in srgb, var(--s-ink) 50%, transparent);
}
.btn--ghost:hover { border-color: var(--s-accent); color: var(--s-accent); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn[disabled] { cursor: not-allowed; opacity: 0.6; }
html.js .btn[disabled] { cursor: progress; }

/* ---------- header (black) ---------- */
.site-header {
  position: relative; z-index: 80;
  background: rgb(var(--black-rgb) / 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-gold);
  transition: border-color 0.3s;
}
html.js .site-header { position: sticky; top: var(--preview-h); }
.site-header.is-scrolled { border-bottom-color: rgb(var(--accent-rgb) / 0.65); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1rem; min-height: 4.25rem; padding-block: 0.5rem;
}
.brand { display: inline-flex; align-items: center; flex: 1 1 auto; text-decoration: none; }
.brand img { width: auto; height: 2.4rem; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-call__long { display: none; }
.nav-toggle { display: none; }
html.js .nav-toggle { display: inline-flex; }
.site-nav { order: 3; width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.site-nav a {
  position: relative; display: block; padding: 0.65rem 0.7rem;
  font: 600 0.9375rem / 1.2 var(--font-body); color: var(--ink-soft); text-decoration: none;
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.2rem; height: 2px; background: var(--accent);
}

@media (max-width: 81.999rem) {
  html.js .site-nav { display: none; }
  /* the open phone menu is at most as tall as the screen under the header, and scrolls inside itself,
     so "Contact" is always reachable (short phones, landscape, big text) */
  html.js .site-nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--preview-h) - var(--header-h));
    max-height: calc(100dvh - var(--preview-h) - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--black); border-bottom: 1px solid var(--line-gold);
  }
  html.js .site-nav ul { flex-direction: column; }
  html.js .site-nav a { display: flex; align-items: center; min-height: 3rem; padding-inline: 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
  html.js .site-nav a[aria-current="page"]::after { display: none; }
  html.js .site-nav a[aria-current="page"] { color: var(--accent-bright); }
}
@media (max-width: 29.999rem) {
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav-toggle { padding-inline: 0.7rem; }
}
@media (min-width: 48rem) {
  .header-call__long { display: inline; }
  .header-call__short { display: none; }
  .brand img { height: 2.6rem; }
}
@media (min-width: 82rem) {
  .site-header { position: sticky; top: var(--preview-h); }
  .header-inner { flex-wrap: nowrap; gap: 1.5rem; }
  .brand { flex: 0 0 auto; order: 1; }
  .brand img { height: 3rem; }
  .site-nav { order: 2; width: auto; flex: 1 1 auto; }
  .site-nav ul { justify-content: center; gap: 0 0.25rem; }
  .header-actions { order: 3; }
  .nav-toggle, html.js .nav-toggle { display: none; }
}
.site-header--lean .header-actions { flex: none; }
@media (min-width: 30rem) {
  .site-header--lean .header-call__long { display: inline; }
  .site-header--lean .header-call__short { display: none; }
}

/* ---------- hero ---------- */
.hero, .page-hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
}
.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3.25rem, 8vw, 6rem); }
.page-hero { padding-block: clamp(2.25rem, 6vw, 4.25rem) clamp(2.75rem, 6.5vw, 4.75rem); }
.hero::before, .page-hero::before {
  /* drawing-sheet registration marks in the four corners (decor only: never behind text) */
  content: ""; position: absolute; inset: 0.75rem; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / 1.25rem 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px 1.25rem no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1.25rem 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px 1.25rem no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1.25rem 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px 1.25rem no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1.25rem 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px 1.25rem no-repeat;
}
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { max-width: 15em; }
.page-hero h1 { font-size: var(--t-h1p); max-width: 19em; }
.hero .bead, .page-hero .bead { margin-top: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 29.999rem) {
  .hero-actions .btn, .actions .btn { flex: 1 1 100%; }
}
.hero-art { position: relative; justify-self: center; align-self: center; width: min(94%, 28rem); padding-bottom: 1.75rem; }
.hero-art::before {
  /* a soft light behind the emblem, like a light table */
  content: ""; position: absolute; z-index: -1; inset: -12% -14% 4%;
  background: radial-gradient(closest-side, rgb(205 208 215 / 0.15), transparent);
}
.hero-art::after {
  /* a dimension line under the emblem: end ticks and a thin line, no numbers (decor only) */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0.25rem; height: 0.6rem;
  background:
    linear-gradient(var(--mark), var(--mark)) left center / 1px 100% no-repeat,
    linear-gradient(var(--mark), var(--mark)) right center / 1px 100% no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 100% 1px no-repeat;
}
.hero-emblem { position: relative; margin: 0; aspect-ratio: 1; display: grid; place-items: center; }
.hero-emblem img { position: relative; width: 92%; height: auto; }
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); opacity: 0.55; }
@media (min-width: 62rem) {
  /* desktop (owner, 2026-11-02): the emblem a bit bigger and further right at every desktop width (its centre moves right too,
     not only its right edge). It reaches into the right margin by --art-out, always leaving at least 1rem to the window edge,
     so it is never cut and never makes the page scroll sideways. The 2.75rem keeps its left edge clear of the text column. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
  .hero-art {
    --art-out: clamp(0rem, max(var(--gutter), (100vw - var(--max)) / 2) - 1rem, 5rem);
    justify-self: end; width: min(100% + var(--art-out) - 2.75rem, 40rem); margin-right: calc(-1 * var(--art-out));
  }
  .hero-emblem img { width: 94%; }
}

.crumbs ol {
  list-style: none; margin: -0.5rem 0 1rem; padding: 0;   /* the links carry 0.5rem of padding (tap target): same visual spacing as before */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem;
  font-size: 0.875rem; color: var(--ink-soft);
}
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ink-muted); }
.crumbs a { text-underline-offset: 0.2em; display: inline-block; padding: 0.5rem 0; }   /* a bigger tap target on phones */
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- layout helpers ---------- */
.split { display: grid; gap: 2.25rem; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
}
.stack > * + * { margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- cards (black) ---------- */
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 2.75rem; height: 2px; background: var(--s-fill); }
.card__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  color: var(--s-accent); border: 1px solid var(--line-gold); border-radius: 50%;
}
.card__icon .icon { width: 1.6rem; height: 1.6rem; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--s-soft); }
.card__link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem;
  font: 700 0.8125rem / 1.2 var(--font-head); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--s-accent); text-decoration: none;
}
.card__link::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.card__link .icon { width: 1.1rem; height: 1.1rem; transition: translate 0.3s var(--ease); }
.card--link { transition: border-color 0.3s, box-shadow 0.3s; }
.card--link:hover {
  border-color: color-mix(in srgb, var(--s-fill) 70%, var(--s-line));
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--accent) 60%, transparent);
}
.card--link:hover .card__link .icon { translate: 4px 0; }
.card--link:focus-within { border-color: var(--s-accent); }

/* ---------- steps (each step is a black card) ---------- */
.steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.25rem;
}
.steps li {
  counter-increment: step; position: relative; padding: 1.5rem 1.4rem 1.4rem;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.steps li::before {
  content: ""; display: block; width: 0.5rem; height: 0.5rem; margin-bottom: 0.9rem;
  border-radius: 50%; background: var(--s-accent);
}
.steps li::after { content: ""; position: absolute; left: -1px; top: -1px; width: 2.75rem; height: 2px; background: var(--s-fill); }
.steps h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--s-soft); }
@media (min-width: 36rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48rem) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- checklist panel ---------- */
.panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.panel h3 { margin: 0 0 0.5rem; }
.panel > p { color: var(--s-soft); }
.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; color: var(--s-soft); }
.checks li::before {
  content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; background: var(--s-fill);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

/* ---------- faq (one black card) ---------- */
.faq-list {
  max-width: 52rem; padding: 0.25rem clamp(1.25rem, 3vw, 2rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.faq { border-bottom: 1px solid var(--s-line); }
.faq:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 3.5rem; padding: 1.1rem 0; cursor: pointer; list-style: none;
  font: 700 1.0625rem / 1.35 var(--font-head); letter-spacing: -0.01em; word-spacing: 0.06em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font: 400 1.75rem / 1 var(--font-body); color: var(--s-accent);
  transition: rotate 0.3s var(--ease);
}
.faq[open] summary::after { rotate: 45deg; }
.faq__body { max-width: 46rem; padding: 0 0 1.4rem; color: var(--s-soft); }
.faq__body p { margin: 0 0 0.75em; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a { color: var(--s-accent); text-underline-offset: 0.2em; }

/* ---------- forms ---------- */
.form {
  display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.form__title { margin: 0; font-size: 1.375rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label {
  font: 700 0.75rem / 1.3 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-soft);
}
.field .opt { font: 500 0.8125rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--s-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.8rem 0.95rem;
  font-size: 1rem; line-height: 1.4; color: var(--s-ink);
  background: color-mix(in srgb, var(--s-ink) 6%, transparent);
  border: 1px solid var(--field-border); border-radius: 3px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
/* the open list of a select takes the select's own background on Windows: keep it opaque and dark, and style the options (Joel, 2026-11-01) */
.field select { background-color: #1B1C1E; color-scheme: dark; }
.field select:focus { background-color: #232426; }
.field select option, .field select optgroup { background-color: #1B1C1E; color: #F3F3F1; }
.field select option:disabled { color: #AAACB0; }
.field ::placeholder { color: var(--s-muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid transparent; outline-offset: 2px;
  border-color: var(--s-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-fill) 45%, transparent);
  background: color-mix(in srgb, var(--s-ink) 9%, transparent);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--s-danger); }
.form__consent { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--s-soft); }
.form__consent a { color: var(--s-accent); text-underline-offset: 0.2em; }
.form__note {
  margin: 0; padding: 0.8rem 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--s-ink);
  border-left: 3px solid var(--s-fill); background: color-mix(in srgb, var(--s-fill) 14%, transparent);
}
.form__note[hidden] { display: none; }

/* contact side card */
.contact-card { display: grid; gap: 1rem; }
.contact-line { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.contact-line .icon { width: 1.5rem; height: 1.5rem; color: var(--s-accent); }
.contact-line strong { display: block; font: 800 1.5rem / 1.1 var(--font-head); letter-spacing: -0.02em; color: var(--s-ink); }
.contact-line > span > span { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--s-soft); }
.contact-line--mail strong { font-size: clamp(0.78rem, 3.9vw, 1.0625rem); font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }

/* ---------- call to action band (a black card on the sheet) ---------- */
.cta-band { position: relative; }
.cta-simple {
  position: relative; text-align: left;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.cta-simple::before { content: ""; position: absolute; left: -1px; top: -1px; width: 2.75rem; height: 2px; background: var(--s-fill); }
.cta-simple .actions { margin-top: 2rem; }

/* ---------- footer (black) ---------- */
.site-footer { background: var(--black); color: var(--ink); border-top: 1px solid var(--line-gold); }
.site-footer .key { opacity: 0.45; }
.footer-main { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; } }
.footer-brand img { width: auto; height: 3rem; margin-bottom: 1rem; }
.footer-brand p { max-width: 20rem; color: var(--ink-soft); }
.footer-title {
  margin: 0 0 0.9rem; font: 700 0.75rem / 1.3 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.footer-list a { display: inline-block; padding: 0.4rem 0; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
.footer-list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-note { padding: 0.4rem 0; color: var(--ink-soft); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: 0.875rem; color: var(--ink-muted);
}
.footer-bottom a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.footer-bottom--lean { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- sticky call bar (phones and tablets) ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: 0.5rem;
  padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: rgb(var(--black-rgb) / 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-gold);
}
.callbar .btn { flex: 1 1 0; min-height: 3rem; padding-inline: 0.5rem; font-size: 0.75rem; letter-spacing: 0.06em; }
.callbar .btn--primary { flex-grow: 1.45; }
html.is-locked .callbar { display: none; }
@media (max-width: 61.999rem) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 62rem) { .callbar { display: none; } }

/* ---------- long text (privacy): one black card ---------- */
.prose {
  max-width: 46rem; padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.prose h2 { margin: 2.75rem 0 0.9rem; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--s-soft); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--s-accent); text-underline-offset: 0.2em; }
.prose strong { color: var(--s-ink); }
.prose code { padding: 0.1em 0.35em; font-size: 0.9em; border-radius: 2px; background: color-mix(in srgb, var(--s-ink) 8%, transparent); color: var(--s-ink); }
.confirm {
  padding: 0.05em 0.35em; border-radius: 2px; font-weight: 600; color: var(--s-ink);
  background: color-mix(in srgb, var(--s-fill) 30%, transparent);
}

/* ---------- photo gallery (ready for when real photos arrive) ---------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.gallery figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--s-soft); }

/* ---------- small pages (thank you, 404) ---------- */
.center-page { padding-block: clamp(3.5rem, 10vw, 7rem); }
.center-page .lead { max-width: 34rem; }
.link-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.25rem; max-width: 24rem; }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--s-line); text-decoration: none; font-weight: 600;
}
.link-list a:hover { color: var(--s-accent); }

/* ---------- preview mode: data-mode="preview" shows the form note; data-marca adds the ribbon and the watermark (build --marca) ---------- */
html[data-marca] { --preview-h: 28px; }
html[data-marca] body { padding-top: var(--preview-h); }
html[data-marca] body::before {
  content: "Preview by Redemption Studios \2014  not live yet";
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--preview-h);
  padding: 0 0.5rem; overflow: hidden; white-space: nowrap; text-align: center;
  font: 700 0.65625rem / var(--preview-h) var(--font-head); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); pointer-events: none; word-spacing: 0.12em;
}
.preview-only { display: none; }
html[data-mode="preview"] .preview-only { display: block; }
html[data-marca] .media { position: relative; }
html[data-marca] .media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150'%3E%3Cg transform='rotate(-28 120 75)' font-family='Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='2' text-anchor='middle'%3E%3Ctext x='121' y='76' fill='%23000' fill-opacity='.22'%3EPREVIEW - REDEMPTION STUDIOS%3C/text%3E%3Ctext x='120' y='75' fill='%23fff' fill-opacity='.42'%3EPREVIEW - REDEMPTION STUDIOS%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 150px;
}

/* ---------- motion: css first, gated by .motion, never hides content on its own ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lift { from { transform: translateY(14px); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* hero arrival: pure css, finishes on its own, needs no script */
  .motion .rise { animation: rise 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .motion .hero h1, .motion .page-hero h1 { animation: lift 0.9s var(--ease) both; }
  .motion .hero .bead, .motion .page-hero .bead { animation: draw 1.1s var(--ease) 0.5s both; }
  .faq[open] .faq__body { animation: faq-in 0.35s var(--ease); }
  .btn:active { translate: 0 1px; }

  /* scroll reveals: the script adds .reveal-on only after its observer is running */
  .sec-head .bead { transition: clip-path 1s var(--ease) 0.3s; }
  .reveal-on [data-reveal] {
    transition:
      opacity 0.7s var(--ease) calc(var(--i, 0) * 80ms),
      transform 0.7s var(--ease) calc(var(--i, 0) * 80ms),
      border-color 0.3s ease 0s,
      box-shadow 0.3s ease 0s;
  }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  .reveal-on .sec-head[data-reveal]:not(.is-in) .bead { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .callbar, .site-header .nav-toggle { display: none !important; }
}

/* ---------- page-specific layout bits ---------- */
@media (min-width: 62rem) {
  .split--form { grid-template-columns: 7fr 5fr; }
}
.quote-card { align-self: start; }

/* ---------- header: Services submenu ----------
   no script: shown inline on small screens, on hover or keyboard focus on wide screens.
   with script (html.js): a button toggles it; hover also opens it on wide screens. */
.site-nav .has-sub { position: relative; }
.sub-toggle {
  position: relative; display: flex; align-items: center; gap: 0.35rem; width: 100%;
  padding: 0.65rem 0.7rem; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  font: 600 0.9375rem / 1.2 var(--font-body); color: var(--ink-soft); transition: color 0.2s;
}
.sub-toggle:hover, .has-sub.is-open > .sub-toggle, .has-sub.is-current > .sub-toggle { color: var(--ink); }
.sub-toggle .icon--chev { width: 1rem; height: 1rem; transition: rotate 0.25s var(--ease); }
.has-sub.is-open > .sub-toggle .icon--chev { rotate: 180deg; }
.site-nav .sub { list-style: none; margin: 0; padding: 0; display: block; }
.site-nav .sub a[aria-current="page"] { color: var(--accent-bright); }
.site-nav .sub a[aria-current="page"]::after { display: none; }

@media (max-width: 81.999rem) {
  html.js .sub-toggle {
    justify-content: space-between; min-height: 3rem; padding-inline: 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }
  html.js .has-sub.is-current > .sub-toggle { color: var(--accent-bright); }
  html.js .site-nav .sub { display: none; }
  html.js .site-nav .has-sub.is-open > .sub { display: block; }
  html.js .site-nav .sub a { padding-left: 1rem; font-size: 1rem; }
  html:not(.js) .site-nav .sub { display: flex; flex-wrap: wrap; }
  html:not(.js) .sub-toggle { cursor: default; }
}
@media (min-width: 82rem) {
  .sub-toggle { width: auto; }
  .has-sub.is-current > .sub-toggle::after {
    content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.2rem; height: 2px; background: var(--accent);
  }
  .site-nav .sub {
    display: none; position: absolute; top: 100%; left: 0; z-index: 90; min-width: 16rem; padding: 0.4rem;
    background: var(--black); border: 1px solid var(--line-gold); border-radius: 4px;
    box-shadow: 0 22px 44px -24px #000;
  }
  .site-nav .sub a { padding: 0.7rem 0.8rem; border-radius: 3px; white-space: nowrap; }
  .site-nav .sub a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .site-nav .has-sub:hover > .sub, .site-nav .has-sub.is-open > .sub, html:not(.js) .site-nav .has-sub:focus-within > .sub { display: block; }
}

/* ---------- the location line (hero, service pages, contact) ---------- */
.loc {
  display: flex; align-items: flex-start; gap: 0.6rem; max-width: 40rem; margin: 1.1rem 0 0;
  font-size: 0.9375rem; line-height: 1.5; color: var(--s-soft);
}
.loc .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; color: var(--s-accent); }
/* the insurance line on /about: normal body size, normal case, high contrast */
.ins-note { display: flex; align-items: flex-start; gap: 0.7rem; max-width: 36rem; margin: 0 0 1.5rem; font-size: var(--t-body); line-height: 1.6; color: var(--s-ink); }
.ins-note .icon { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; color: var(--s-accent); }
.sub-title { margin: 2.5rem 0 1rem; font: 700 1.25rem / 1.2 var(--font-head); letter-spacing: -0.01em; color: var(--s-ink); }
.cards--4 { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.contact-loc { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; color: var(--s-soft); }
.contact-loc .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--s-accent); }
.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font: 700 0.8125rem / 1.2 var(--font-head); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--s-accent); text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.text-link .icon { width: 1.1rem; height: 1.1rem; transition: translate 0.3s var(--ease); }
.text-link:hover .icon { translate: 4px 0; }

/* ---------- home: compact panels, each one leads to its own page ---------- */
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.cards--panels { gap: 1rem; }
@media (min-width: 40rem) { .cards--panels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cards--panels { grid-template-columns: repeat(3, 1fr); } }
.card--panel { gap: 0.65rem; padding: 1.25rem 1.4rem 1.15rem; }
.card__head { display: flex; align-items: center; gap: 0.9rem; }
.card--panel .card__icon { width: 2.75rem; height: 2.75rem; }
.card--panel .card__icon .icon { width: 1.3rem; height: 1.3rem; }
.card--panel h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); }
.card--panel .card__link { padding-top: 0.1rem; }
.footer-brand .footer-loc { margin-top: -0.25rem; font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- where we work, about ---------- */
@media (min-width: 62rem) {
  .split--center { align-items: center; }
}
.facts { display: grid; margin: 1.5rem 0 0; padding: 0.35rem clamp(1.25rem, 3vw, 1.75rem); }
.split > .facts { margin-top: 0; }
.facts > div {
  display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; gap: 0.25rem 1rem; align-items: baseline;
  padding: 0.95rem 0; border-top: 1px solid var(--s-line);
}
.facts > div:first-child { border-top: 0; }
@media (max-width: 29.999rem) { .facts > div { grid-template-columns: 1fr; } }
.facts dt { font: 700 0.75rem / 1.3 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-accent); }
.facts dd { margin: 0; font: 700 1.125rem / 1.3 var(--font-head); letter-spacing: -0.01em; color: var(--s-ink); }
.area-note {
  width: fit-content; max-width: 100%; margin: 1.25rem 0 0; padding: 0.9rem 1.15rem;
  background: var(--scrim); border: 1px solid var(--line); border-radius: 4px; color: var(--s-soft);
}
.area-note a { color: var(--s-accent); text-underline-offset: 0.2em; }

/* Florida coverage map (inline SVG): the card holds the map; --fl-bg is the card color, used as the halo behind the city labels */
.map-fig {
  --fl-bg: color-mix(in srgb, var(--black) 95%, var(--bp));
  margin: 0; display: grid; justify-items: center; gap: 0.75rem; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px;
}
.map-fig figcaption { max-width: 26rem; font-size: 0.8125rem; color: var(--s-muted); }

/* the map itself: gray land, gold coverage area and lines from Orlando to each city.
   Local tokens fall back to the site tokens so the map works on any gray card. */
.fl-map {
  --fl-gold: var(--s-accent, #d9b04a);
  --fl-gold-fill: var(--s-fill, #c9971f);
  --fl-ink: var(--s-ink, #f4f1e8);
  --fl-halo: var(--fl-bg, #2b2e33);
  display: block; width: min(100%, 26rem); height: auto; overflow: visible;
}
.fl-land {
  fill: rgb(255 255 255 / 0.07);
  stroke: rgb(255 255 255 / 0.45); stroke-width: 1.4; stroke-linejoin: round;
}
.fl-zone { opacity: 0.2; }
.fl-leaders line { stroke: rgb(255 255 255 / 0.5); stroke-width: 0.9; }
.fl-zone polygon { fill: var(--fl-gold-fill); stroke: var(--fl-gold-fill); stroke-width: 58; stroke-linejoin: round; }
.fl-routes line { stroke: var(--fl-gold); stroke-width: 1.7; stroke-linecap: round; opacity: 0.95; }
.fl-city circle { fill: var(--fl-ink); stroke: var(--fl-halo); stroke-width: 2; }
.fl-city--home circle { fill: var(--fl-gold-fill); stroke: var(--fl-ink); stroke-width: 2.5; }
.fl-city--home .fl-pulse { fill: none; stroke: var(--fl-gold); stroke-width: 1.5; opacity: 0.6; }
.fl-map text {
  font: 700 14px var(--font-head, system-ui, sans-serif); letter-spacing: 0; fill: var(--fl-ink);
  paint-order: stroke; stroke: var(--fl-halo); stroke-width: 4px; stroke-linejoin: round;
}
.fl-city--home text { font-size: 15px; font-weight: 800; }
/* phones: the card gives up some padding and the labels grow (16px max: "Daytona Beach" starts at x=282 and must stay inside the 400-wide viewBox) */
@media (max-width: 30rem) {
  .map-fig { padding: 0.75rem; }
  .fl-map { width: 100%; }
  .fl-map text { font-size: 16px; stroke-width: 5px; }
  .fl-city--home text { font-size: 17px; }
}
.fl-map .fl-base { fill: var(--fl-gold); }
@keyframes fl-pulse { from { transform: scale(0.7); opacity: 0.7; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .fl-pulse { transform-box: fill-box; transform-origin: center; animation: fl-pulse 2.8s ease-out 3; }
}

/* ---------- before/after illustration (antes_despues.css, 2026-11-01) ---------- */
/* ---------- before / after illustration (.ba): a leaking wall and the same wall repaired ----------
   markup comes from before_after() in antes_despues.py; behaviour from antes_despues.js.
   the "after" layer sits on top and is clipped at --ba-pos (0% = all before, 100% = all after).
   --ba-pos is set inline at 50%, so without JS both halves show.
   colors read the site tokens. the gold reads --accent and --accent-bright with no literal fallback, because
   validar.py only allows the accent's hex value inside :root; the other tokens keep a fallback. */
.ba {
  --ba-gold: var(--accent);
  --ba-gold-hi: var(--accent-bright);
  --ba-on-gold: var(--on-accent, #0d0e10);
  --ba-ink: var(--ink, #f3f3f1);
  --ba-muted: var(--ink-muted, #aaacb0);
  --ba-line: var(--line, rgb(212 214 219 / 0.24));
  --ba-black: var(--black, #0d0e10);
  --ba-head: var(--font-head, "Archivo", "Helvetica Neue", Arial, sans-serif);
  --ba-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --ba-pos: 50%;
  container-type: inline-size;
  display: grid;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
  max-width: 46rem;                  /* placed loose in a wide .wrap it stays a figure, not a wall */
  margin: 0 auto;
}

/* the stage: both scenes stacked, same box, same viewBox, so they line up to the pixel */
.ba-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;               /* the scenes are drawn 4:3 and trim their empty dark sides (preserveAspectRatio slice) */
  overflow: hidden;
  border: 1px solid var(--ba-line);
  border-radius: 4px;
  background: var(--ba-black);
  touch-action: pan-y;               /* phones keep scrolling up and down; a sideways drag moves the divider */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  /* depth: a stack of soft shadows, like a print lifted off the page */
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.3),
    0 6px 12px -4px rgb(0 0 0 / 0.4),
    0 24px 44px -20px rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(0 0 0 / 0.35);
}
@supports not (aspect-ratio: 5 / 4) {
  .ba-stage { height: 0; padding-top: 80%; }
}
.ba.is-ready .ba-stage { cursor: ew-resize; }   /* only once the script can actually move it */
.ba-layer { position: absolute; inset: 0; will-change: transform; }   /* own layers: dragging never re-renders the blurred stains */
.ba-layer--before { z-index: 0; }
.ba-layer--after { z-index: 1; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba-scene { display: block; width: 100%; height: 100%; }

/* labels: small uppercase pills above both layers, so the divider never cuts one in half.
   the script hides the pill the divider is about to cross (.is-low / .is-high); without JS (50%) both show */
.ba-tag {
  position: absolute;
  z-index: 2;
  top: 3.5%;
  padding: 0.42em 0.9em 0.38em;
  border-radius: 99px;
  font: 700 0.6875rem / 1 var(--ba-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.ba-tag--before {
  right: 3%;
  color: var(--ba-ink);
  background: rgb(13 14 16 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.ba-tag--after {
  left: 3%;
  color: var(--ba-on-gold);
  background: var(--ba-gold-hi);
}
.ba.is-low .ba-tag--after,
.ba.is-high .ba-tag--before { opacity: 0; }

/* the divider and its gold handle */
.ba-handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: 0;
  pointer-events: none;
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--ba-gold-hi);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 0 16px rgb(0 0 0 / 0.45);
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border-radius: 50%;
  color: var(--ba-on-gold);
  background: radial-gradient(circle at 35% 30%, #f0cf86, var(--ba-gold-hi) 45%, var(--ba-gold));
  box-shadow:
    0 0 0 2px var(--ba-black),
    0 0 0 3px rgb(255 255 255 / 0.35),
    0 6px 16px rgb(0 0 0 / 0.55);
}
.ba-knob svg { width: 1.1rem; height: 1.1rem; }
.ba:has(.ba-range:focus-visible) .ba-knob {
  outline: 2px solid var(--ba-ink);
  outline-offset: 4px;
}

/* the real control: a range input under the stage (keyboard, screen readers; the stage takes the pointer) */
.ba-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  visibility: hidden;                /* shown once the script is wired, so it never sits there doing nothing */
}
.ba.is-ready .ba-range { visibility: visible; }
.ba-range:focus { outline: none; }
.ba-range:focus-visible { outline: 2px solid var(--ba-gold-hi); outline-offset: 3px; border-radius: 2px; }
.ba-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ba-gold) var(--ba-pos), rgb(255 255 255 / 0.2) var(--ba-pos));
}
.ba-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.2); }
.ba-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ba-gold); }
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: calc(2px - 0.625rem);
  border: 2px solid var(--ba-black);
  border-radius: 50%;
  background: var(--ba-gold-hi);
  box-shadow: 0 0 0 1px var(--ba-gold-hi), 0 2px 6px rgb(0 0 0 / 0.5);
}
.ba-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  box-sizing: border-box;
  border: 2px solid var(--ba-black);
  border-radius: 50%;
  background: var(--ba-gold-hi);
  box-shadow: 0 0 0 1px var(--ba-gold-hi), 0 2px 6px rgb(0 0 0 / 0.5);
}

.ba-cap {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ba-muted);
}
.ba:not(.is-ready) .ba-hint { display: none; }
/* no scripting at all: no handle to grab and no empty slider row, just the two halves and the divider line */
@media (scripting: none) {
  .ba-knob,
  .ba-range { display: none; }
}

/* the figure measures itself, not the window.
   narrow: the stage turns square and the scenes trim their dark side margins (preserveAspectRatio slice), so the room
   stays large on a phone. both layers trim the same way, so they still line up. */
@container (max-width: 29.999rem) {
  .ba-stage { aspect-ratio: 1 / 1; }
}
/* wide: bigger labels and handle */
@container (min-width: 30rem) {
  .ba-tag { font-size: 0.75rem; top: 4%; }
  .ba-knob { width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; }
  .ba-knob svg { width: 1.3rem; height: 1.3rem; }
}

/* optional card around the figure, the same black card the site uses for the map */
.ba-card {
  position: relative;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  background: var(--s-surface, rgb(13 14 16 / 0.95));
  border: 1px solid var(--s-line, rgb(212 214 219 / 0.24));
  border-radius: 4px;
}
.ba-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2.75rem;
  height: 2px;
  background: var(--s-fill);
}

/* motion only when it is welcome: the print lifts a little on hover, the handle swells while dragged */
@media (prefers-reduced-motion: no-preference) {
  .ba-stage { transition: transform 0.5s var(--ba-ease), box-shadow 0.5s var(--ba-ease); }
  .ba-knob { transition: transform 0.25s var(--ba-ease); }
  .ba-tag { transition: opacity 0.2s var(--ba-ease); }
  @media (hover: hover) {
    .ba-stage:hover {
      transform: translateY(-3px);
      box-shadow:
        0 1px 1px rgb(0 0 0 / 0.3),
        0 10px 18px -6px rgb(0 0 0 / 0.45),
        0 34px 60px -24px rgb(0 0 0 / 0.75),
        0 0 0 1px rgb(0 0 0 / 0.35);
    }
  }
  .ba.is-drag .ba-knob { transform: scale(1.1); }
}
@media (forced-colors: active) {
  .ba-handle::before { background: CanvasText; }
  .ba-knob { forced-color-adjust: none; border: 2px solid CanvasText; }
}