/* ==========================================================================
   MK Build — stylesheet
   Plain CSS, no framework, no external fonts, one request.

   The visual idea: everything sits in a "window" — a bordered, shadowed panel
   with a title bar — tiled down the page with a small, consistent gap. That
   gives the site depth and puts far more above the fold than stacked
   full-width bands.

   Colour scheme: light by default, dark under [data-theme="dark"] (set before
   first paint by assets/js/theme.js). The prefers-color-scheme block at the
   bottom of the token section is the no-JavaScript fallback.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;

  --bg: #eef1f3;
  --bg-tint-1: rgba(194, 87, 26, 0.07);
  --bg-tint-2: rgba(28, 111, 214, 0.06);
  --surface: #ffffff;
  --surface-2: #f4f7f9;
  --surface-3: #e8eef1;
  --border: #dce4e9;
  --border-strong: #c1ced6;

  --text: #18222a;
  --text-soft: #3a4854;
  --muted: #5b6a76;
  --heading: #0d1a23;

  /* #b9501a rather than #c2571a: keeps white button text at 5:1, comfortably
     past the 4.5:1 WCAG AA floor for normal-size text. */
  --brand: #b9501a;
  --brand-dark: #9c4310;
  --brand-soft: #fdf3ec;
  --on-brand: #ffffff;

  --emergency: #b3261e;
  --emergency-dark: #8d1c16;
  --emergency-soft: #fdf1f0;
  --emergency-border: #f0c9c6;

  --ok: #1f6f43;
  --ok-soft: #eff8f2;
  --ok-border: #b7dfc5;

  --focus: #1c6fd6;
  --header-bg: rgba(238, 241, 243, 0.9);

  /* Inverted surfaces. The footer is the only one that stays dark in light
     mode, so it — and it alone — uses the --invert-* tokens. */
  --invert-bg: #101720;
  --invert-2: #18212b;
  --invert-text: #e7edf1;
  --invert-soft: #c2cfd8;
  --invert-line: rgba(255, 255, 255, 0.14);
  --invert-accent: #ffb27a;

  /* "Band" surfaces: the closing CTA window, the emergency section and the
     mobile call bar. These used to be permanently dark, which left stray black
     boxes on an otherwise light page. They follow the theme now — tinted in
     light mode, inverted in dark mode. */
  --band-text: #18222a;
  --band-soft: #3a4854;
  /* warm tint — CTA window */
  --band-bg: #fdf3ec;
  --band-line: #e7cdb6;
  --band-accent: #9c4310;
  --band-hover: rgba(185, 80, 26, 0.09);
  /* red tint — emergency section */
  --alert-bg: #fdf1f0;
  --alert-line: #f0c9c6;
  --alert-accent: #8d1c16;
  --alert-hover: rgba(179, 38, 30, 0.08);
  /* mobile call bar */
  --bar-bg: #ffffff;
  --bar-line: #dce4e9;
  --bar-btn: #eef1f3;
  --bar-text: #18222a;

  --shadow-1: 0 1px 2px rgba(12, 20, 26, 0.06), 0 2px 6px rgba(12, 20, 26, 0.05);
  --shadow-2: 0 2px 4px rgba(12, 20, 26, 0.05), 0 14px 30px rgba(12, 20, 26, 0.09);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.75);

  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 9px;
  /* Deliberately modest: the h1 is the biggest thing on any page, and the
     windows around it stay tight so a screen shows several at once. */
  --gap: clamp(0.62rem, 1.15vw, 0.95rem);
  --pad: clamp(0.85rem, 1.5vw, 1.3rem);
  --wrap: 1180px;
  --gutter: clamp(0.85rem, 3.2vw, 2rem);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1317;
  --bg-tint-1: rgba(232, 129, 63, 0.08);
  --bg-tint-2: rgba(108, 176, 255, 0.05);
  --surface: #161e25;
  --surface-2: #1c262e;
  --surface-3: #24313a;
  --border: #2a3742;
  --border-strong: #3d4d59;

  --text: #dde5ea;
  --text-soft: #b8c5ce;
  --muted: #94a4af;
  --heading: #f5f9fb;

  --brand: #e8813f;
  --brand-dark: #f0a06a;
  --brand-soft: #2b1d13;
  --on-brand: #14181c;

  --emergency: #e2544a;
  --emergency-dark: #f0938b;
  --emergency-soft: #2c1a19;
  --emergency-border: #5a2a26;

  --ok: #6bd096;
  --ok-soft: #14261c;
  --ok-border: #265c3d;

  --focus: #7dbaff;
  --header-bg: rgba(13, 19, 23, 0.88);

  --invert-bg: #0a0f13;
  --invert-2: #131b21;
  --invert-text: #e7edf1;
  --invert-soft: #a9b7c1;
  --invert-line: rgba(255, 255, 255, 0.1);
  --invert-accent: #f0a06a;

  /* In dark mode every band is the same deep surface it always was. */
  --band-text: #ffffff;
  --band-soft: var(--invert-soft);
  --band-bg: var(--invert-bg);
  --band-line: var(--invert-line);
  --band-accent: var(--invert-accent);
  --band-hover: rgba(255, 255, 255, 0.12);
  --alert-bg: var(--invert-bg);
  --alert-line: var(--invert-line);
  --alert-accent: var(--invert-accent);
  --alert-hover: rgba(255, 255, 255, 0.12);
  --bar-bg: var(--invert-bg);
  --bar-line: var(--invert-line);
  --bar-btn: var(--invert-2);
  --bar-text: #ffffff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.03125rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(58rem 34rem at 12% -6%, var(--bg-tint-1), transparent 70%),
    radial-gradient(46rem 30rem at 96% 2%, var(--bg-tint-2), transparent 72%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  line-height: 1.16; margin: 0 0 0.55em; letter-spacing: -0.015em; color: var(--heading);
}
h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.16rem, 1.02rem + 0.7vw, 1.42rem); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.98rem; }
p { margin: 0 0 0.95em; }
ul, ol { margin: 0 0 0.95em; padding-left: 1.15em; }
li { margin-bottom: 0.35em; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--brand); }
strong { color: var(--heading); }
/* On an inverted or tinted surface the near-black heading colour is either
   invisible (dark band) or wrong (red banner), so emphasis inherits instead. */
.emergency-banner strong, .site-footer strong, .call-bar strong, .cta-band strong { color: inherit; }

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

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute; left: 0.75rem; top: -3.5rem; z-index: 200;
  background: var(--invert-bg); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter); overflow-wrap: break-word;
}
.narrow { max-width: 760px; }

/* ------------------------------------------------------------------ type helpers */
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-dark); margin: 0 0 0.6rem;
}
.lead { font-size: 1rem; color: var(--text-soft); max-width: 62ch; }
.prose { max-width: 68ch; color: var(--text-soft); }
section .lead { margin-top: -0.2rem; }
.tagline-line {
  font-style: italic; color: var(--heading); font-size: 1.02rem;
  border-left: 3px solid var(--brand); padding-left: 0.9rem; margin-top: 1.3rem;
}
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.req { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-dark); }
.optional { font-weight: 500; font-size: 0.8rem; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none;
  min-height: 44px; padding: 0.72rem 1.15rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand-dark); color: var(--on-brand); }
.btn-ghost { background: var(--surface); color: var(--heading); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--surface); }
.btn-emergency { background: var(--emergency); color: #fff; box-shadow: var(--shadow-1); }
.btn-emergency:hover { background: var(--emergency-dark); color: #fff; }
.btn-sm { min-height: 38px; padding: 0.5rem 0.9rem; font-size: 0.92rem; }
.btn-lg { min-height: 52px; padding: 0.95rem 1.6rem; font-size: 1.04rem; }
.btn-block { display: flex; width: 100%; margin-top: 0.6rem; }

/* ------------------------------------------------------------------ window panel */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), var(--edge);
  overflow: hidden;
}

.win-bar {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 2.05rem; padding: 0.36rem 0.75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.win-dots { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }
.win-dots span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--border-strong); }
.win-dots span:nth-child(1) { background: #e06a3e; }
.win-dots span:nth-child(2) { background: #dfa93c; }
.win-dots span:nth-child(3) { background: #58a86f; }
.win-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.panel-body { padding: var(--pad); }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--header-bg);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--heading); margin-right: auto; }
.brand-mark { width: 32px; height: 32px; color: var(--brand); flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.nav-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.header-tools { display: flex; align-items: center; gap: 0.55rem; }
.nav-toggle {
  display: none; padding: 0.5rem; cursor: pointer; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface);
}
.nav-bars { display: block; width: 22px; height: 16px; position: relative; }
.nav-bars span { position: absolute; left: 0; height: 2.5px; width: 100%; background: var(--heading); border-radius: 2px; }
.nav-bars span:nth-child(1) { top: 0; }
.nav-bars span:nth-child(2) { top: 6.75px; }
.nav-bars span:nth-child(3) { top: 13.5px; }

.theme-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--heading);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.has-js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--brand); color: var(--brand-dark); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

.site-nav { display: flex; align-items: center; gap: 1.4rem; }
.nav-list { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-list a {
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.97rem;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--brand-dark); border-bottom-color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-call { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.nav-call-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.nav-call-number { font-weight: 700; color: var(--heading); font-size: 0.97rem; }

/* ------------------------------------------------------------------ emergency banner */
.emergency-banner { margin-top: var(--gap); }
.emergency-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 0.75rem 1.1rem;
  background: var(--emergency); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.emergency-banner p { margin: 0; font-size: 0.96rem; }
.emergency-banner a { color: #fff; font-weight: 700; }
.emergency-banner .btn { border-color: rgba(255, 255, 255, 0.65); color: #fff; background: transparent; }
.emergency-banner .btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ------------------------------------------------------------------ sections */
.section, .hero { margin-block: var(--gap); }
.section-head { max-width: 68ch; margin-bottom: 0.85rem; }
.section-head .lead { margin-bottom: 0; }
.section-foot { margin-top: 1rem; }
.section-legal { margin-bottom: 1.6rem; }

/* A tinted title bar gives the tiled windows a rhythm without full-bleed bands. */
.section-alt .win-bar { background: var(--brand-soft); }
.section-alt .win-label { color: var(--brand-dark); }

.section-dark .panel {
  background: var(--alert-bg); border-color: var(--alert-line); color: var(--band-text);
}
.section-dark .win-bar { background: var(--alert-line); border-bottom-color: var(--alert-line); }
.section-dark .win-label { color: var(--alert-accent); }
.section-dark .win-dots span:nth-child(1) { background: #e06a3e; }
.section-dark h2, .section-dark h3 { color: var(--band-text); }
.section-dark strong { color: var(--band-text); }
/* Only text links get the accent. A button keeps the label colour that
   belongs to its own background, or the emergency button ends up as pale text
   on red at about 3.7:1. */
.section-dark a:not(.btn) { color: var(--alert-accent); }
.section-dark .lead, .section-dark .prose { color: var(--band-soft); }
.section-dark .ticks li { color: var(--band-soft); }
.section-dark .ticks .icon { color: var(--alert-accent); }
.section-dark .btn-ghost { background: transparent; color: var(--band-text); border-color: var(--alert-line); }
.section-dark .btn-ghost:hover { background: var(--alert-hover); color: var(--band-text); }

/* ------------------------------------------------------------------ hero */
.panel-hero .hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1rem, 2.4vw, 2rem); align-items: center;
  padding: var(--pad);
}
.hero-copy h1 { margin-bottom: 0.45rem; }
.hero-note { font-size: 0.92rem; color: var(--muted); margin: 1rem 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.hero-media, .split-media { margin: 0; }
.hero-media img, .split-media img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-2);
  aspect-ratio: 3 / 2; object-fit: cover;
}
.hero-stats { padding: 0 var(--pad) var(--pad); }
.hero-emergency .panel { background: var(--emergency-soft); border-color: var(--emergency-border); }
.hero-emergency .win-bar { background: var(--emergency-border); }
.hero-emergency .win-label { color: var(--emergency-dark); }
.hero-emergency .lead { color: var(--text-soft); }
.page-home .hero { margin-bottom: var(--gap); }

/* ------------------------------------------------------------------ stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem 1.3rem;
  margin: 0; padding: 0.95rem var(--pad) 0; border-top: 1px solid var(--border);
}
.hero-stats .stats { padding-inline: 0; }
.stat { margin: 0; }
.stat dt { font-weight: 800; font-size: 1.12rem; color: var(--heading); letter-spacing: -0.02em; }
.stat dd { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }

/* ------------------------------------------------------------------ grid + cards */
.grid { display: grid; gap: 0.9rem; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* The service categories. Flex rather than grid so the final row always fills
   the width: with seven services plus the "something else" tile there is no
   half-empty row, and if a service is ever added the leftover row stretches
   instead of leaving a hole. */
.grid-services { display: flex; flex-wrap: wrap; }
.grid-services > * { flex: 1 1 220px; }
/* The eighth tile is a way in, not a service, so it reads differently. */
.card-ask { border-style: dashed; background: var(--brand-soft); }
.card-ask .card-body h3 a { color: var(--brand-dark); }
.card-ask .card-media img { filter: saturate(0.75); }

.card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); }
.card-media { display: block; background: var(--surface-3); }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.35rem; }
.card-body h3 a { color: var(--heading); text-decoration: none; }
.card-body h3 a:hover { color: var(--brand-dark); }
.card-body p { color: var(--text-soft); font-size: 0.95rem; }
.card-more { margin: auto 0 0; font-weight: 600; font-size: 0.94rem; }
.card-more a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.card-flat {
  padding: 1rem 1.1rem 1.1rem; gap: 0.3rem;
  background: var(--surface); border-top: 3px solid var(--brand);
}
.card-flat:hover { transform: none; }
.card-index {
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--brand-dark);
  margin: 0 0 0.35rem;
}
.card-flat h3 { margin-bottom: 0.25rem; }

/* ------------------------------------------------------------------ lists */
.ticks { list-style: none; padding: 0; margin: 0 0 0.95rem; }
.ticks li { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.4rem; }
.ticks .icon { color: var(--brand); margin-top: 0.3em; }
.ticks-lg li { margin-bottom: 0.6rem; }
.donts { list-style: none; padding: 0; margin: 0 0 0.95rem; }
.donts li { position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; color: var(--text-soft); }
.donts li::before {
  content: "\00d7"; position: absolute; left: 0; top: 0; color: var(--emergency);
  font-weight: 800; font-size: 1.15rem; line-height: 1.4;
}

.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.3rem, 3.4vw, 2.4rem); align-items: start; }
.split > * { min-width: 0; }
.split-reverse { grid-template-columns: 0.85fr 1.15fr; }
.split-reverse .split-main { order: 2; }
.split-reverse .split-media { order: 1; }
.split-main h2:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.two-col > * { min-width: 0; }
.two-col-tight { gap: 1.1rem; }

.confidence { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.confidence li {
  display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border); font-weight: 500;
}
.confidence .icon { color: var(--brand); margin-top: 0.3em; flex: 0 0 auto; }

.process { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.95rem; }
.process li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.process-step {
  flex: 0 0 auto; width: 1.95rem; height: 1.95rem; border-radius: 50%;
  background: var(--heading); color: var(--surface); display: grid; place-items: center;
  font-weight: 700; font-size: 0.86rem;
}
.process h3 { margin: 0.25rem 0 0.25rem; }
.process p { margin: 0; color: var(--text-soft); }
.process-numbered { gap: 0.85rem; }

.facts { margin: 0; }
.facts dt { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.85rem; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0.15rem 0 0; }
.facts-lg dd { margin-bottom: 0.35rem; }

.mini-steps { list-style: decimal; padding-left: 1.2rem; margin: 0; color: var(--text-soft); }
.mini-steps li { margin-bottom: 0.55rem; }

/* ------------------------------------------------------------------ media blocks */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.gallery > * { min-width: 0; }
.shot { margin: 0; }
.shot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.shot figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.shot figcaption strong { display: block; color: var(--heading); font-size: 0.93rem; }

/* ------------------------------------------------------------------ aside + alerts */
.aside-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.15rem; box-shadow: var(--shadow-1);
}
.aside-box + .aside-box { margin-top: 1rem; }
.aside-heading { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }
.aside-box h3 { margin-top: 0; }
.aside-box p:last-child { margin-bottom: 0; }
.aside-box-note { font-size: 0.88rem; color: var(--muted); margin-top: 0.85rem; }
.aside-box-note-box { background: var(--surface-3); }
.aside-box-emergency { border-color: var(--emergency-border); background: var(--emergency-soft); }
.aside-box-emergency h3 { color: var(--emergency-dark); }
.big-phone { font-size: 1.24rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.35rem 0 0; }
.big-phone a { color: var(--emergency-dark); text-decoration: none; }

.alert {
  background: var(--emergency-soft); border: 1px solid var(--emergency-border); border-left: 5px solid var(--emergency);
  border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
}
.alert h2 { font-size: 1.08rem; margin-bottom: 0.35rem; color: var(--emergency-dark); }
.alert p:last-child { margin-bottom: 0; }
.alert-quiet { background: var(--surface-2); border-color: var(--border); border-left-color: var(--border-strong); }
.alert-quiet h2 { color: var(--heading); }

.contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1.3rem; }
.contact-option {
  display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.contact-option:hover { border-color: var(--brand); }
.contact-option-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-dark); font-weight: 700; }
.contact-option-value { font-weight: 700; color: var(--heading); }
.contact-option-note { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.aside-box .contact-options { grid-template-columns: 1fr; margin-top: 0.85rem; }

.area-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.9rem; }
.area-list li {
  margin: 0; padding: 0.38rem 0.78rem; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border); font-size: 0.9rem;
}
.area-region { font-weight: 600; margin-bottom: 0.5rem; }
.area-note { color: var(--muted); font-size: 0.93rem; }

/* ------------------------------------------------------------------ FAQ */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 0.75rem 2.6rem 0.75rem 0; position: relative;
  font-weight: 650; color: var(--heading); font-size: 0.97rem; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 0.62rem;
  font-size: 1.45rem; line-height: 1; color: var(--brand); font-weight: 400;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--brand-dark); }
.faq-answer { padding: 0 0 1.1rem; max-width: 76ch; }
.faq-answer p { margin: 0; color: var(--text-soft); }

/* ------------------------------------------------------------------ forms */
.quote-layout { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.3rem, 3.2vw, 2.4rem); align-items: start; }
.quote-layout > * { min-width: 0; }
.quote-form {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.5rem); box-shadow: var(--shadow-1);
}
.form-heading { margin-top: 0; }
.form-intro { color: var(--text-soft); }
.form-limit {
  font-size: 0.86rem; color: var(--muted); background: var(--surface-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem; margin-bottom: 1.4rem;
}
.field { margin-bottom: 0.95rem; }
.field label, .field legend, .choice-field legend {
  display: block; font-weight: 650; margin-bottom: 0.35rem; color: var(--heading);
  font-size: 0.97rem; padding: 0;
}
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.68rem 0.82rem; min-height: 46px;
}
.field textarea { min-height: 125px; resize: vertical; }
.field select { appearance: none; background-image: none; padding-right: 2rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--emergency); background: var(--emergency-soft);
}
.field-note { font-size: 0.84rem; color: var(--muted); margin: 0.35rem 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice-field { border: 0; padding: 0; margin-inline: 0; }
.choice-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem; margin: 0; background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice-label { font-weight: 700; }
.choice-hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; line-height: 1.35; }
.choice input:checked + label { border-color: var(--brand); background: var(--brand-soft); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.contact-field { display: none; }
.contact-field.is-active { display: block; }
.contact-only-note { margin-top: -0.5rem; margin-bottom: 1.25rem; }

/* Shown only when the visitor marks the request as an emergency. */
.urgent-note {
  border: 1px solid var(--emergency-border); border-left: 5px solid var(--emergency);
  background: var(--emergency-soft); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.urgent-note-title { font-weight: 700; color: var(--emergency-dark); margin-bottom: 0.3rem; }
.urgent-note p { margin-bottom: 0.6rem; }
.urgent-note p:last-of-type { margin-bottom: 0.8rem; }

.checkbox-field { display: flex; gap: 0.65rem; align-items: flex-start; }
.checkbox-field input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--brand); }
.checkbox-field label { font-size: 0.93rem; font-weight: 400; color: var(--text-soft); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.form-actions-note { margin: 0; font-size: 0.93rem; color: var(--muted); }
.form-status:empty { display: none; }
.form-status {
  margin-top: 1.1rem; padding: 0.9rem 1.05rem; border-radius: var(--radius-sm);
  font-weight: 550; border: 1.5px solid transparent;
}
.form-status.is-success { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.form-status.is-error { background: var(--emergency-soft); border-color: var(--emergency-border); color: var(--emergency-dark); }
.quote-form.is-sending { opacity: 0.72; }
.turnstile-field { margin-top: 0.35rem; }
.quote-aside > .aside-box:first-child { margin-bottom: 1rem; }

/* ------------------------------------------------------------------ CTA band */
.cta-band { margin-block: var(--gap); }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
  background: var(--band-bg); color: var(--band-text);
  border: 1px solid var(--band-line); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--shadow-2);
}
.cta-band h2 { color: var(--band-text); margin-bottom: 0.35rem; }
.cta-band p { margin: 0; color: var(--band-soft); max-width: 60ch; }
.cta-band-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cta-band .btn-ghost { background: transparent; color: var(--band-text); border-color: var(--band-line); }
.cta-band .btn-ghost:hover { background: var(--band-hover); color: var(--band-text); border-color: var(--band-line); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ------------------------------------------------------------------ thanks / 404 */
.thanks .panel-body { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.thanks-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.thanks-note { color: var(--muted); font-size: 0.93rem; }

/* ------------------------------------------------------------------ legal */
.legal-layout { display: grid; grid-template-columns: 1fr 290px; gap: clamp(1.4rem, 3.6vw, 2.6rem); align-items: start; }
.legal-layout > * { min-width: 0; }
.legal-effective {
  font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 1.2rem;
}
.legal-intro { font-size: 1rem; color: var(--text-soft); max-width: 72ch; }
.legal h3 {
  margin: 1.6rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 1.06rem;
}
.legal > h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.legal p, .legal-list { max-width: 74ch; color: var(--text-soft); }
.legal-list { list-style: disc; padding-left: 1.3rem; }
.legal-list li { margin-bottom: 0.5rem; }
.legal-contact {
  margin-top: 2.4rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.legal-contact h2 { font-size: 1.12rem; }
.legal-note {
  margin-top: 1.6rem; font-size: 0.88rem; color: var(--muted);
  border-left: 3px solid var(--border-strong); padding-left: 0.9rem; max-width: 74ch;
}
.legal-nav { list-style: none; padding: 0; margin: 0; }
.legal-nav li { margin-bottom: 0.45rem; }
.legal-nav a { text-decoration: none; font-weight: 550; display: inline-block; padding-block: 0.2rem; }
.legal-nav a:hover { text-decoration: underline; }
.legal-aside { position: sticky; top: 84px; }

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: var(--invert-bg); color: var(--invert-soft);
  margin-top: calc(var(--gap) * 1.5);
  padding-block: clamp(2.1rem, 4vw, 3.2rem) 1.6rem;
  border-top: 1px solid var(--invert-line);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.8rem; }
.site-footer h2, .footer-heading {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff; margin: 0 0 0.8rem;
}
.site-footer .brand { color: #fff; margin-right: 0; }
.site-footer .brand-mark { color: var(--invert-accent); }
.site-footer .brand-sub { color: var(--invert-soft); }
.footer-blurb { font-size: 0.94rem; margin: 0.9rem 0; max-width: 34ch; }
.footer-phone { color: #fff; font-weight: 700; font-size: 1.12rem; text-decoration: none; }
.footer-contact a { color: var(--invert-text); }
.footer-hours { font-size: 0.9rem; margin-bottom: 0.4rem; }
.footer-hours strong { color: #fff; }
.footer-hours-note { font-size: 0.84rem; margin: 0.35rem 0 0; max-width: 36ch; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a { color: var(--invert-soft); text-decoration: none; font-size: 0.94rem; display: inline-block; padding-block: 0.2rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-areas { margin-top: 2rem; border-top: 1px solid var(--invert-line); padding-top: 1.2rem; }
.footer-areas p { font-size: 0.91rem; margin: 0; }
.footer-disclosure {
  margin: 1.4rem 0 0; font-size: 0.84rem; font-style: italic; color: var(--invert-soft);
  border-left: 3px solid var(--invert-line); padding-left: 0.9rem;
}
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--invert-line);
  font-size: 0.87rem;
}
.footer-bottom p { margin: 0; }
.footer-legal-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal-links a { color: var(--invert-soft); display: inline-block; padding-block: 0.2rem; }

/* ------------------------------------------------------------------ mobile call bar */
.call-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--bar-bg); padding: 0.4rem 0.55rem calc(0.4rem + env(safe-area-inset-bottom));
  gap: 0.45rem; border-top: 1px solid var(--bar-line);
  box-shadow: 0 -2px 14px rgba(12, 20, 26, 0.14);
}
.call-bar-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; border-radius: var(--radius-sm); padding: 0.45rem 0.35rem;
  line-height: 1.2; min-height: 48px;
}
.call-bar-call { background: var(--brand); color: var(--on-brand); }
.call-bar-quote { background: var(--bar-btn); color: var(--bar-text); }
.call-bar-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.call-bar-value { font-weight: 700; font-size: 0.93rem; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-services > * { flex: 1 1 200px; }
}

/* Tablet and below: step the whole scale down. Nothing should need a full
   screen of scrolling to read one box. */
@media (max-width: 960px) {
  :root {
    --pad: 0.9rem;
    --gap: 0.68rem;
  }
  h1 { font-size: clamp(1.68rem, 1.25rem + 2.6vw, 2.25rem); }
  h2 { font-size: 1.22rem; }
  .lead { font-size: 0.97rem; }
  .stat dt { font-size: 1.02rem; }
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-2); padding: 1rem var(--gutter) 1.3rem;
  }
  .nav-toggle-input:checked ~ .site-nav { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-size: 1.03rem; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0.7rem; margin-top: 1rem; }
  .nav-call { padding: 0.55rem 0; }
  .nav-actions .btn { width: 100%; }

  /* The hero keeps its two columns on a tablet, so the biggest box on the page
     does not also become the tallest one. */
  .hero-grid, .quote-layout, .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .call-bar { display: flex; }
  /* Keep the last window clear of the fixed action bar. */
  .site-footer { padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) {
  .split, .split-reverse, .two-col { grid-template-columns: 1fr; }
  .split-reverse .split-main { order: 1; }
  .split-reverse .split-media { order: 2; }
}

/* ------------------------------------------------------------------ phone
   A phone is not a small desktop. Everything steps down again, and the page
   leads with the decision the visitor actually has to make: call, or send a
   request. Content that only repeats something available one tap away — the
   long-form intro copy, the decorative photographs beside the text, the
   service link list in the footer — is dropped here and kept on the pages
   that are actually about it. */
@media (max-width: 760px) {
  :root {
    --pad: 0.7rem;
    --gap: 0.5rem;
    --radius-lg: 12px;
    --radius: 10px;
  }
  body { font-size: 0.97rem; line-height: 1.55; }
  h1 { font-size: 1.42rem; }
  h2 { font-size: 1.06rem; }
  h3 { font-size: 0.99rem; }
  .lead { font-size: 0.9rem; }
  p { margin-bottom: 0.75em; }

  /* Decorative photographs beside body copy. The photo galleries and the hero
     image stay — they show the work. */
  .split-media { display: none; }
  /* Three example situations, then the link to the page that lists them all. */
  .emergency-list li:nth-child(n + 4) { display: none; }

  /* --- header ---------------------------------------------------------- */
  .header-inner { min-height: 54px; gap: 0.6rem; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 1rem; }
  /* Every control a thumb has to hit is at least 44px. */
  .theme-toggle { width: 44px; height: 44px; }
  .nav-toggle { padding: 0.55rem; min-width: 44px; min-height: 44px; justify-content: center; }
  .btn-sm { min-height: 44px; padding-inline: 1rem; }
  .nav-list a { padding: 0.7rem 0; font-size: 0.98rem; }
  .nav-actions { margin-top: 0.8rem; gap: 0.6rem; }

  /* --- windows --------------------------------------------------------- */
  .win-bar { min-height: 1.8rem; padding: 0.28rem 0.62rem; }
  .win-label { font-size: 0.62rem; letter-spacing: 0.1em; }
  .section-head { margin-bottom: 0.6rem; }
  .section-foot { margin-top: 0.7rem; }

  /* --- hero ------------------------------------------------------------ */
  .panel-hero .hero-grid { grid-template-columns: 1fr; }
  .hero-media img { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
  .hero-actions { margin-top: 0.8rem; gap: 0.5rem; }
  .btn-lg { min-height: 46px; padding: 0.75rem 1.2rem; font-size: 0.98rem; }

  .stats { padding: 0.5rem 0.6rem 0; gap: 0.3rem 0.7rem; }
  .stat dt { font-size: 0.92rem; }
  .stat dd { font-size: 0.73rem; }

  /* --- lists ----------------------------------------------------------- */
  .confidence li { padding: 0.3rem 0; font-size: 0.9rem; }
  .process { gap: 0.7rem; }
  .process-step { width: 1.7rem; height: 1.7rem; font-size: 0.78rem; }
  .process h3 { margin: 0.15rem 0 0.15rem; }
  .process p { font-size: 0.9rem; }
  .ticks li { font-size: 0.92rem; }
  .aside-box { padding: 0.85rem 0.95rem; }
  .big-phone { font-size: 1.1rem; }

  /* --- service tiles become scannable rows ----------------------------- */
  .grid-2, .grid-3, .field-row, .choice-group { grid-template-columns: 1fr; }
  .grid-services > * { flex: 1 1 100%; }
  .grid-services { gap: 0.45rem; }
  .service-card { flex-direction: row; align-items: center; }
  .service-card .card-media { flex: 0 0 56px; width: 56px; height: 56px; margin: 0.5rem 0 0.5rem 0.5rem; border-radius: var(--radius-sm); overflow: hidden; }
  .service-card .card-media img { aspect-ratio: 1 / 1; height: 56px; }
  .service-card .card-body { padding: 0.5rem 0.65rem; }
  .service-card .card-body h3 { font-size: 0.94rem; margin-bottom: 0.05rem; }
  .service-card .card-body h3 a { color: var(--brand-dark); }
  .service-card .card-body p {
    font-size: 0.82rem; line-height: 1.4; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Both are inside .card-body: the two classes are needed so this beats the
     line-clamp rule above, which also matches the <p class="card-more">. */
  .service-card .card-body .ticks, .service-card .card-body .card-more { display: none; }
  .card-ask .card-media img { filter: none; }

  /* --- media ----------------------------------------------------------- */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .shot figcaption { font-size: 0.76rem; margin-top: 0.35rem; }
  .shot figcaption strong { font-size: 0.82rem; }

  /* --- FAQ ------------------------------------------------------------- */
  .faq-item summary { padding: 0.6rem 2.1rem 0.6rem 0; font-size: 0.92rem; }
  .faq-item summary::after { font-size: 1.2rem; top: 0.45rem; right: 0.15rem; }
  .faq-answer { padding-bottom: 0.75rem; }
  .faq-answer p { font-size: 0.9rem; }

  /* --- service area ---------------------------------------------------- */
  .area-list { gap: 0.35rem; }
  .area-list li { font-size: 0.82rem; padding: 0.28rem 0.6rem; }
  .area-region { font-size: 0.92rem; }
  .area-note { font-size: 0.86rem; }

  /* --- banners --------------------------------------------------------- */
  .emergency-banner-inner { flex-direction: column; align-items: flex-start; padding: 0.65rem 0.8rem; gap: 0.6rem; }
  .emergency-banner p { font-size: 0.88rem; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; gap: 0.9rem; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1; }
  .cta-band p { font-size: 0.9rem; }

  /* --- footer ----------------------------------------------------------
     Phone number, who we are, and the legal links. The service link list is
     the tiles you already scrolled past, and the tagline is at the top of
     every page. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem 0.9rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-blurb, .footer-col-services { display: none; }
  .footer-heading, .site-footer h2 { margin-bottom: 0.5rem; }
  .footer-phone { font-size: 1.05rem; }
  .footer-contact { font-size: 0.88rem; }
  .footer-hours { font-size: 0.85rem; margin-bottom: 0.25rem; }
  .footer-hours-note { font-size: 0.75rem; margin-top: 0.2rem; max-width: none; }
  .footer-col li { margin-bottom: 0.05rem; }
  .footer-col a { font-size: 0.88rem; padding-block: 0.04rem; }
  .footer-areas { margin-top: 1.2rem; padding-top: 0.9rem; }
  .footer-areas p { font-size: 0.85rem; }
  .footer-disclosure { font-size: 0.78rem; margin-top: 1rem; padding-left: 0.7rem; }
  .footer-bottom { font-size: 0.78rem; margin-top: 1rem; padding-top: 0.9rem; }
  .site-footer { padding-block: 1.5rem calc(5.4rem + env(safe-area-inset-bottom)); }
  .brand-sub { display: none; }

  /* --- long-form pages ------------------------------------------------- */
  .legal-layout { gap: 1.2rem; }
  .legal h3 { margin: 1.2rem 0 0.4rem; padding-top: 0.8rem; font-size: 1rem; }
  .legal-intro, .legal p, .legal-list { font-size: 0.92rem; }
  .legal-contact { padding: 1rem 1.05rem; margin-top: 1.6rem; }
  .legal-note { font-size: 0.82rem; }

  /* --- forms ----------------------------------------------------------- */
  .quote-form { padding: 0.9rem; }
  .field { margin-bottom: 0.8rem; }
  .choice label { padding: 0.6rem 0.7rem; }
  .choice-hint { font-size: 0.78rem; }
  .form-limit { font-size: 0.8rem; padding: 0.55rem 0.7rem; margin-bottom: 1rem; }
  .form-actions { margin-top: 1.1rem; gap: 0.7rem; }
  .aside-heading { font-size: 0.88rem; }
}

@media (max-width: 460px) {
  .hero-actions .btn, .thanks-actions .btn, .form-actions .btn { width: 100%; }
  .form-actions-note { width: 100%; }
  .contact-options { grid-template-columns: 1fr; }
  .gallery { gap: 0.5rem; }
  .footer-grid { gap: 1rem 0.8rem; }
}

/* ------------------------------------------------------------------ motion + print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .card:hover, .btn:hover { transform: none; }
}

@media print {
  .site-header, .call-bar, .cta-band, .emergency-banner, .skip-link, .legal-aside { display: none; }
  body { color: #000; background: #fff; background-image: none; }
  .panel, .card, .aside-box { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ------------------------------------------------------------------ no-JS fallback */
/* theme.js normally sets data-theme before the first paint. When JavaScript is
   unavailable the visitor's operating system preference is used instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0d1317;
    --bg-tint-1: rgba(232, 129, 63, 0.08);
    --bg-tint-2: rgba(108, 176, 255, 0.05);
    --surface: #161e25;
    --surface-2: #1c262e;
    --surface-3: #24313a;
    --border: #2a3742;
    --border-strong: #3d4d59;

    --text: #dde5ea;
    --text-soft: #b8c5ce;
    --muted: #94a4af;
    --heading: #f5f9fb;

    --brand: #e8813f;
    --brand-dark: #f0a06a;
    --brand-soft: #2b1d13;
    --on-brand: #14181c;

    --emergency: #e2544a;
    --emergency-dark: #f0938b;
    --emergency-soft: #2c1a19;
    --emergency-border: #5a2a26;

    --ok: #6bd096;
    --ok-soft: #14261c;
    --ok-border: #265c3d;

    --focus: #7dbaff;
    --header-bg: rgba(13, 19, 23, 0.88);

    --invert-bg: #0a0f13;
    --invert-2: #131b21;
    --invert-text: #e7edf1;
    --invert-soft: #a9b7c1;
    --invert-line: rgba(255, 255, 255, 0.1);
    --invert-accent: #f0a06a;

    --band-text: #ffffff;
    --band-soft: var(--invert-soft);
    --band-bg: var(--invert-bg);
    --band-line: var(--invert-line);
    --band-accent: var(--invert-accent);
    --band-hover: rgba(255, 255, 255, 0.12);
    --alert-bg: var(--invert-bg);
    --alert-line: var(--invert-line);
    --alert-accent: var(--invert-accent);
    --alert-hover: rgba(255, 255, 255, 0.12);
    --bar-bg: var(--invert-bg);
    --bar-line: var(--invert-line);
    --bar-btn: var(--invert-2);
    --bar-text: #ffffff;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45);
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}