/* 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-strong: rgb(212 214 219 / 0.42);   /* the border of the header menu pills (3:1 on the header and on solid black) */
  --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);

  /* corners (owner via Joel, 2026-11-02: the boxes "not just square, more curved, more rounded", like the menu pills).
     one scale for the whole site. full-width bands (header, footer, section bands, the phone menu, the grid) stay square. */
  --radius-pill: 999px;       /* every button, the menu, small tags */
  --radius-card: 16px;        /* cards (services, home panels, step cards, link cards), photos */
  --radius-panel: 20px;       /* big boxes: scrims and hero boxes, checklists, FAQ, forms, contact card, facts, map, CTA, before/after */
  --radius-field: 12px;       /* form fields, small notes, the before/after picture inside its card */
  --radius-xs: 6px;           /* text links and FAQ questions: only their focus ring shows it */
  --rule-w: 3.5rem;           /* the gold accent on a box's top edge, measured from the corner (it bends with the curve) */

  /* 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;
}
/* the focus ring follows each element's corners. text links and FAQ questions have no fill or border, so a small radius
   only softens their ring (zero specificity: any component rule below wins) */
:where(a:not(.btn), summary) { border-radius: var(--radius-xs); }

.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: var(--radius-pill);
}
.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: var(--radius-panel);
}
/* the gold accent on the top edge of a box (scrims, cards, step cards, the CTA, the before/after card).
   it is the box's own outline (inset -1px over the 1px border, same corners), drawn only on top and cut to --rule-w,
   so it bends with the rounded corner and thins out down the side instead of poking out of the curve. never takes a click. */
.scrim::before,
.hero-copy::before,
.sec-head::before,
.card::before,
.steps li::after,
.cta-simple::before,
.ba-card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border-top: 2px solid var(--s-fill); border-radius: inherit;
  clip-path: inset(0 calc(100% - var(--rule-w)) 0 0);
}
/* 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); } }
/* phones: the scrim reaches out to 0.5rem from the screen edge, still a rounded box with its side borders and the same gold
   accent as everywhere else. the text keeps exactly the place and width it had (margin + border + padding = 0), so nothing
   reflows: only the box edge moves */
@media (max-width: 39.999rem) {
  .scrim, .hero-copy, .sec-head {
    --scrim-out: calc(var(--gutter) - 0.5rem);
    width: auto; max-width: none;
    margin-inline: calc(var(--scrim-out) * -1);
    padding-inline: calc(var(--scrim-out) - 1px);
  }
  .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 ---------- */
/* every button is a pill, like the menu (owner via Joel, 2026-11-02): Request a quote / an inspection, Call, Back to home,
   the header Call and Menu buttons, the phone call bar. the focus ring follows the pill */
.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: var(--radius-pill);
  font: 700 0.8125rem / 1.2 var(--font-head); letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer;   /* a label that must wrap splits evenly */
  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.4rem; }
/* the menu items are pill buttons (owner via Joel, 2026-11-02: "button style, like the Redemption Studios header"):
   a thin border on a faint fill, a gold border on hover, and the current page in a soft bronze tint with a bronze border and light text
   (solid bronze is kept for the phone button, the one action of the bar). on the detail service pages (/remodeling, /welding...)
   "More Services" is the current section (aria-current="true"): bronze border, no tint.
   the phone button and the Menu button are pills too. contraste.py reads the fill (ink 5%), the hover fill (ink 10%)
   and the current-page tints (accent 18% and 28%) from here. */
.site-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.5rem 1rem;
  font: 700 0.75rem / 1.2 var(--font-head); letter-spacing: 0.08em; word-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.site-nav a:hover {
  color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-bright) 75%, transparent);
}
.site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.site-nav a[aria-current="page"]:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent-bright); }
.site-nav a[aria-current="true"] { color: var(--ink); border-color: 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 Us" 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.75rem var(--gutter) 1.25rem;
    background: var(--black); border-bottom: 1px solid var(--line-gold);
  }
  /* phone menu: full-width pills, easy to tap */
  html.js .site-nav ul { flex-direction: column; gap: 0.5rem; }
  html.js .site-nav a { display: flex; justify-content: flex-start; min-height: 3rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; }
}
/* without JS the menu is always shown under the logo row: a little air between the Call button and the first pill */
@media (max-width: 81.999rem) {
  html:not(.js) .site-nav { padding-block: 0.375rem 0.25rem; }
}
/* the narrowest phones (320 px): a slightly smaller logo and tighter gaps keep the logo, Call and Menu on one row */
@media (max-width: 22.499rem) {
  .brand img { height: 2.1rem; }
  .header-inner { column-gap: 0.75rem; }
  .header-actions { gap: 0.375rem; }
}
@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; flex-wrap: nowrap; gap: 0.375rem; }
  .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; }
.actions--center { justify-content: center; }

/* ---------- 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: var(--radius-card);
}
/* .card::before is the gold accent (see the scrim section) */
.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; border-radius: calc(var(--radius-card) - 1px); }   /* the whole card is the link (same corners, so a tap highlight is round too) */
.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: var(--radius-card);
}
.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 is the gold accent (see the scrim section) */
.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: var(--radius-panel);
}
.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: var(--radius-panel);
}
.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; }
/* its focus ring is drawn just inside the question's top and bottom padding and a little wider than the text, so on the first
   and last question it no longer touches the box edge. no layout change */
.faq summary { position: relative; }
.faq summary:focus-visible { outline: none; }
.faq summary:focus-visible::before {
  content: ""; position: absolute; inset: 0.375rem -0.625rem; pointer-events: none;
  outline: 2px solid var(--accent-bright); border-radius: var(--radius-field);
}
.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: var(--radius-panel);
}
.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: var(--radius-field);
  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);
  border-radius: var(--radius-field);
}
.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: var(--radius-panel);
}
/* .cta-simple::before is the gold accent (see the scrim section) */
.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; } }
/* narrow phones: tighter letter spacing and side padding, so "Call (407) 280-8786" and "Request a Quote" stay on one line in
   their pills and the number never breaks after its hyphen. in the call bar each button starts from its own width and the
   room left over still goes mostly to Call (1.45 : 1, as before) */
@media (max-width: 25.999rem) {
  .callbar { gap: 0.375rem; padding-inline: max(0.5rem, env(safe-area-inset-left)) max(0.5rem, env(safe-area-inset-right)); }
  .callbar .btn { flex: 1 1 auto; gap: 0.4rem; padding-inline: 0.375rem; letter-spacing: 0.02em; }
  .callbar .btn--primary { flex-grow: 1.45; }
  .callbar .btn .icon { width: 1rem; height: 1rem; }
}
@media (max-width: 21.249rem) {
  .actions .btn, .hero-actions .btn { padding-inline: 0.875rem; letter-spacing: 0.06em; }
  .callbar .btn { gap: 0.3rem; padding-inline: 0.25rem; letter-spacing: 0.01em; }
}

/* ---------- 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: var(--radius-panel);
}
.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: var(--radius-card); }
.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;
  border-radius: 0;   /* a row with a bottom rule: a radius would bend the rule's ends */
}
.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; }

/* ---------- 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); }

/* ---------- /services: one card per service, with its own quote button and a link to its page ---------- */
.cards--svc { gap: 1rem; }
@media (min-width: 40rem) { .cards--svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards--svc { grid-template-columns: repeat(3, 1fr); } }
.card--svc { gap: 0.65rem; padding: 1.4rem 1.4rem 1.25rem; }
.card--svc h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); }
/* the same order in every card: the button, then "Learn more" under it (the inspection buttons are too wide to share a line) */
.card__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: auto; padding-top: 0.6rem; }

/* ---------- 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: var(--radius-field); 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: var(--radius-panel);
}
.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;                  /* with the radius: the scenes, the divider and the gold handle stay inside the round corners */
  border: 1px solid var(--ba-line);
  border-radius: var(--radius-field, 12px);
  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: var(--radius-pill, 999px);
  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. the layer covers the picture: the divider line goes all the way to --ba-pos (0% and 100%
   included), while the knob stops short of the edge (its radius plus room for its rings and focus ring), so at the ends it is
   never cut in half by the round corners */
.ba-handle {
  --ba-r: 1.125rem;                  /* knob radius (the wide figure sets a bigger one) */
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ba-pos) - 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: clamp(var(--ba-r) + 0.375rem, var(--ba-pos), 100% - var(--ba-r) - 0.375rem);
  display: grid;
  place-items: center;
  width: calc(var(--ba-r) * 2);
  height: calc(var(--ba-r) * 2);
  margin: calc(var(--ba-r) * -1) 0 0 calc(var(--ba-r) * -1);
  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: var(--radius-pill, 999px); }
.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-handle { --ba-r: 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: var(--radius-panel, 20px);
}
/* .ba-card::before is the gold accent (see the scrim section) */

/* 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; }
}