/* ===== variables.css ===== */
/* ============================================
   Charter Oak Chimney — Design Tokens
   "FROM HEARTH TO SKY" (Concept A, owner-selected)
   A cinematic vertical journey: the site lives in
   warm near-black coal, climbs the flue, and breaks
   into Connecticut sky. One ember action color.
   Display: Anton. Body: Schibsted Grotesk.
   Labels: Spline Sans Mono.
   ============================================ */

:root {
  /* ── Dark world (default environment) ── */
  --coal: #14110d;         /* scene base: warm near-black */
  --coal-2: #0e0c09;       /* deeper: inside the flue */
  --slate-scene: #1c2126;  /* evidence room */
  --ash: #f2eee6;          /* text on dark */
  --ash-dim: rgba(242, 238, 230, 0.72);
  --ash-faint: rgba(242, 238, 230, 0.55);

  /* ── Light world (above the roofline) ── */
  --sky: #edefe9;
  --sky-2: #e3e6dd;
  --white: #ffffff;
  --ink: #1b1814;          /* text on light */
  --ink-dim: rgba(27, 24, 20, 0.7);

  /* ── Rules / drafting marks ── */
  --line: rgba(242, 238, 230, 0.16);
  --line-strong: rgba(242, 238, 230, 0.34);
  --ink-line: rgba(27, 24, 20, 0.18);
  --ink-line-strong: rgba(27, 24, 20, 0.34);

  /* ── Action: ember (CTA — AA on white text) ── */
  --ember: #c24312;        /* buttons/links-as-action; white text 4.9:1 */
  --ember-deep: #a33409;   /* hover/press */
  --ember-bright: #e4571b; /* glow/accents on dark only, never text-on */
  --ember-rgb: 194, 67, 18;

  /* ── Amber: drafting highlight on dark ── */
  --amber: #e8a857;

  /* ── Semantic (forms/status, light surfaces) ── */
  --ok: #2f6b4f;
  --ok-tint: #e8f1ec;
  --warn: #8f6a1c;
  --warn-tint: #f6efdd;
  --err: #a63a2a;
  --err-tint: #f7e8e5;

  /* ── Typography ── */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', monospace;

  --fs-hero: clamp(3rem, 8.5vw, 8.5rem);
  --fs-h2: clamp(2.2rem, 5.5vw, 4.6rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  --lh-display: 0.95;
  --lh-heading: 1.0;
  --lh-body: 1.6;

  --track-display: 0.015em;
  --track-label: 0.14em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing (8px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --container: 1280px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --measure: 68ch;
  --header-height: 76px;
  --gutter: clamp(18px, 4vw, 48px);

  /* ── Shape: cinematic poster language — square ── */
  --radius-xs: 0px;
  --radius-img: 0px;

  /* ── Elevation ── */
  --shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-lift-light: 0 12px 32px rgba(27, 24, 20, 0.14);

  /* ── Signature: flue path ── */
  --flue-w: 2px;
  --flue-color: var(--line-strong);
  --flue-tick: var(--ember-bright);

  /* ── Motion ── */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-reveal: 620ms;

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 900;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* ============================================
     COMPATIBILITY ALIASES — token names used by
     scheduling.css, promo.css, service/home css and
     legacy inspection.html resolve into the A-world.
     ============================================ */
  --paper: var(--sky);
  --paper-2: var(--sky-2);
  --paper-3: #d8dbd1;
  --soot: var(--ink);
  --soot-80: #37322b;
  --soot-60: #5b554c;
  --soot-40: #8b8478;
  --rule: var(--ink-line);
  --rule-strong: var(--ink-line-strong);
  --rule-on-dark: var(--line);
  --kiln: var(--ember);
  --kiln-deep: var(--ember-deep);
  --kiln-tint: #f6e3d8;
  --kiln-rgb: var(--ember-rgb);
  --spruce: var(--slate-scene);
  --spruce-deep: var(--coal-2);
  --slate: #46505a;
  --color-primary: var(--ink);
  --color-primary-light: #37322b;
  --color-primary-dark: var(--coal-2);
  --color-primary-rgb: 27, 24, 20;
  --color-forest: var(--slate-scene);
  --color-charcoal: var(--coal);
  --color-charcoal-light: var(--slate-scene);
  --color-gray-700: #37322b;
  --color-gray-600: #5b554c;
  --color-gray-500: #5b554c;
  --color-gray-400: #8b8478;
  --color-gray-300: #b5aea1;
  --color-gray-200: #d8dbd1;
  --color-gray-100: var(--sky-2);
  --color-ivory: var(--sky);
  --color-paper: var(--sky-2);
  --color-beige: var(--sky-2);
  --color-beige-dark: #d8dbd1;
  --color-cream: var(--sky-2);
  --color-white: var(--white);
  --color-gold: var(--ember);
  --color-gold-light: var(--ember-bright);
  --color-gold-dark: var(--ember-deep);
  --color-gold-rgb: var(--ember-rgb);
  --color-brick: var(--ember-deep);
  --color-brick-light: var(--ember);
  --color-brick-dark: #7c2a08;
  --color-brick-rgb: 163, 52, 9;
  --color-success: var(--ok);
  --color-success-light: var(--ok-tint);
  --color-warning: var(--warn);
  --color-warning-light: var(--warn-tint);
  --color-danger: var(--err);
  --color-danger-light: var(--err-tint);
  --color-info: #46505a;
  --font-serif: 'Newsreader', Georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.5rem;
  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: 0.01em;
  --tracking-tighter: 0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;
  --container-xl: 1280px;
  --container-2xl: 1280px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-full: 9999px;
  --hairline: var(--ink-line);
  --hairline-strong: var(--ink-line-strong);
  --border-light: 1px solid var(--ink-line);
  --border-medium: 1px solid var(--ink-line-strong);
  --border-warm: 1px solid var(--sky-2);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: var(--shadow-lift-light);
  --shadow-lg: var(--shadow-lift-light);
  --shadow-xl: var(--shadow-lift);
  --shadow-warm: none;
  --shadow-card: none;
  --shadow-card-hover: var(--shadow-lift-light);
  --ease-out-expo: var(--ease-settle);
  --ease-out-quint: var(--ease-settle);
  --ease-out-back: var(--ease-settle);
  --ease-in-out-soft: var(--ease-settle);
  --transition-fast: var(--t-fast) var(--ease-settle);
  --transition-base: var(--t-base) var(--ease-settle);
  --transition-slow: var(--t-reveal) var(--ease-settle);
  --transition-spring: var(--t-base) var(--ease-settle);
}

/* ===== fonts.css ===== */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/spline-sans-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== base.css ===== */
/* ============================================
   Charter Oak Chimney — Base Styles
   "FROM HEARTH TO SKY": reset, typography,
   drafting labels, world switching.
   Light (sky) is the default body — reading and
   conversion surfaces. Marketing scenes opt into
   the dark world with body.scene-dark.
   ============================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--sky);
  overflow-x: hidden;
}

/* The dark world — hearth scenes */
body.scene-dark {
  color: var(--ash);
  background-color: var(--coal);
}

/* ── Selection ── */
::selection {
  background-color: rgba(var(--ember-rgb), 0.25);
}

/* ── Typography ── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}
h4 { font-size: var(--fs-lead); }
h5, h6 { font-size: var(--fs-body); }

p {
  line-height: var(--lh-body);
  text-wrap: pretty;
  max-width: var(--measure);
}
body:not(.scene-dark) p { color: var(--ink-dim); }
body.scene-dark p { color: var(--ash-dim); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-settle);
}
/* Buttons and the skip link own their hover colors: on dark scenes the amber
   link hover used to land on ember buttons (amber on ember-deep = 3.3:1).
   :where() keeps these rules at their original a:hover specificity. */
a:where(:not(.btn, .skip-link)):hover { color: var(--ember-deep); }
body.scene-dark a:where(:not(.btn, .skip-link)):hover { color: var(--amber); }

strong, b { font-weight: var(--weight-semibold); }

/* Amber accent inside display headings (dark scenes) */
.accent-word, .hero-title .accent, em.accent { font-style: normal; }
body.scene-dark .accent-word,
body.scene-dark .hero-title .accent,
body.scene-dark em.accent { color: var(--amber); }
body:not(.scene-dark) .accent-word,
body:not(.scene-dark) em.accent,
.band-sky .accent-word, .band-sky em.accent,
.band-sky-2 .accent-word, .band-sky-2 em.accent { color: var(--ember); }
/* Outlined ghost word (dark scenes). Fill stays dim-but-legible (AA on coal)
   so the word reads for low-vision users; the stroke carries the outline look. */
.ghost-word {
  color: var(--ash-faint);
  -webkit-text-stroke: 1.5px var(--line-strong);
}

/* Prose links (body copy) */
.prose a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--ember-deep); }

/* ── Images ── */
img { max-width: 100%; height: auto; display: block; }

/* ── Lists ── */
ul, ol { list-style: none; }

/* ── Forms ── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
button { cursor: pointer; border: none; background: none; }
input, select, textarea { outline: none; }

/* Accessible focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ember-bright);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -52px;
  left: var(--space-4);
  z-index: calc(var(--z-header) + 10);
  background-color: var(--ember);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  transition: top var(--t-fast) var(--ease-settle);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ── Utility ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.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;
}

.text-center { text-align: center; }

/* ── Drafting eyebrow: mono label with an ember tick ── */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
body:not(.scene-dark) .section-label { color: var(--ink-dim); }
body.scene-dark .section-label,
.band-sky .section-label { color: inherit; }
body.scene-dark .section-label { color: var(--ash-dim); }
.band-sky .section-label { color: var(--ink-dim); }
.section-label::before {
  content: '';
  width: 14px;
  height: 2px;
  background-color: var(--ember-bright);
  flex: none;
}
.band-sky .section-label::before { background-color: var(--ember); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-4);
}

.section-desc {
  font-size: var(--fs-lead);
  max-width: 620px;
  line-height: 1.55;
}

.section-header { margin-bottom: var(--space-10); }
.section-header.centered { text-align: center; }
.section-header.centered .section-label { justify-content: center; }
.section-header.centered .section-desc { margin-left: auto; margin-right: auto; }

/* Legacy divider used by not-yet-touched pages */
.divider {
  width: 40px;
  height: 2px;
  background-color: var(--ember);
  margin: var(--space-4) 0;
}
.divider.centered { margin-left: auto; margin-right: auto; }

/* ── Reveal (one-time, minimal) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--t-reveal) var(--ease-settle),
      transform var(--t-reveal) var(--ease-settle);
  }
  .reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.05s; }
  .reveal-delay-2 { transition-delay: 0.10s; }
  .reveal-delay-3 { transition-delay: 0.15s; }
  .reveal-delay-4 { transition-delay: 0.20s; }
  .reveal-delay-5 { transition-delay: 0.25s; }
  .reveal-delay-6 { transition-delay: 0.30s; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Inline safety note (real content, not demo copy) ── */
.safety-note-inline { color: var(--ink-dim); font-size: var(--fs-small); margin-top: var(--space-4); }
body.scene-dark .safety-note-inline { color: var(--ash-dim); }
.band-sky .safety-note-inline, .band-sky-2 .safety-note-inline { color: var(--ink-dim); }

/* ===== fieldreport.css ===== */
/* ============================================
   Charter Oak Chimney — "FROM HEARTH TO SKY"
   Component system (Concept A, owner-selected).
   Same class contract as the previous system so
   every page keeps working; the world changed:
   coal cinema scenes, amber drafting marks, one
   ember action color, sky breaks for conversion.
   Dark pages: body.scene-dark. Light pages: default.
   ============================================ */

/* ══════════════ Buttons ══════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease-settle),
              border-color var(--t-fast) var(--ease-settle),
              color var(--t-fast) var(--ease-settle),
              transform var(--t-fast) var(--ease-settle);
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background-color: var(--ember); color: #fff; }

.btn-dark { background-color: var(--ink); color: var(--sky); }

/* outline adapts to world */
.btn-outline { background-color: transparent; }
body:not(.scene-dark) .btn-outline,
.band-sky .btn-outline {
  border-color: var(--ink-line-strong);
  color: var(--ink);
}
body.scene-dark .btn-outline {
  border-color: var(--line-strong);
  color: var(--ash);
}
/* explicit variants kept for markup that names them */
.btn-on-dark { background: transparent; border-color: var(--line-strong); color: var(--ash); }
.btn-paper { background-color: var(--sky); color: var(--ink); }

/* Button hovers only where a real pointer hovers: on touch the first tap
   applies :hover and leaves it stuck (e.g. a darker submit after a failed
   validation). Touch gets press feedback from .btn:active instead. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background-color: var(--ember-deep); color: #fff; }
  .btn-dark:hover { background-color: #37322b; color: var(--sky); }
  body:not(.scene-dark) .btn-outline:hover,
  .band-sky .btn-outline:hover { border-color: var(--ink); color: var(--ink); }
  body.scene-dark .btn-outline:hover { border-color: var(--ash); color: var(--ash); }
  .btn-on-dark:hover { border-color: var(--ash); color: var(--ash); }
  .btn-paper:hover { background-color: var(--white); color: var(--ink); }
}

/* Controls feel like controls on a phone: no gray tap flash over the
   designed press state, no 300 ms double-tap wait, no text selection or
   callout on long-press. Content text stays selectable. */
.btn, .sticky-cta-mobile a, .date-picker-day, .time-window, .form-details-summary, .consent-check, .nav-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.btn-lg { min-height: 56px; padding: 0 32px; font-size: var(--fs-lead); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-small); }
.btn .btn-icon, .btn > svg { width: 18px; height: 18px; flex: none; }

.cta-pair { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-note { margin-top: var(--space-3); font-size: var(--fs-small); }
body:not(.scene-dark) .cta-note { color: var(--ink-dim); }
body.scene-dark .cta-note { color: var(--ash-dim); }
.band-sky .cta-note { color: var(--ink-dim); }

/* ══════════════ Header ══════════════ */
#site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease-settle),
              border-color var(--t-base) var(--ease-settle);
}
body:not(.scene-dark) #site-header { background-color: var(--sky); }
body:not(.scene-dark) #site-header.scrolled { border-bottom-color: var(--ink-line); }
body.scene-dark #site-header { background-color: rgba(14, 12, 9, 0.92); backdrop-filter: blur(8px); }
body.scene-dark #site-header.scrolled { border-bottom-color: var(--line); }
/* transparent over the hero until scroll (homepage). Stays position:fixed in
   BOTH states — flipping fixed→sticky on first scroll pushed <main> down by the
   header height (a real 0.09 layout shift for users). */
body.scene-dark #site-header.hdr-clear {
  position: fixed;
  left: 0; right: 0;
}
body.scene-dark #site-header.hdr-clear:not(.scrolled) {
  background-color: transparent;
  backdrop-filter: none;
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo-img { width: 40px; height: 40px; object-fit: contain; }
.logo-text { line-height: 1.05; }
.logo-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
.logo-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
body:not(.scene-dark) .logo-name { color: var(--ink); }
body:not(.scene-dark) .logo-sub { color: var(--ink-dim); }
body.scene-dark .logo-name { color: var(--ash); }
body.scene-dark .logo-sub { color: var(--ash-dim); }

#main-nav { display: flex; align-items: center; gap: var(--space-6); }
#main-nav > a, .nav-dropdown-trigger {
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
body:not(.scene-dark) #main-nav > a,
body:not(.scene-dark) .nav-dropdown-trigger { color: var(--ink-dim); }
body:not(.scene-dark) #main-nav > a:hover,
body:not(.scene-dark) #main-nav > a[aria-current="page"],
body:not(.scene-dark) .nav-dropdown-trigger:hover { color: var(--ink); border-bottom-color: var(--ember); }
body.scene-dark #main-nav > a,
body.scene-dark .nav-dropdown-trigger { color: var(--ash-dim); }
body.scene-dark #main-nav > a:hover,
body.scene-dark #main-nav > a[aria-current="page"],
body.scene-dark .nav-dropdown-trigger:hover { color: var(--ash); border-bottom-color: var(--ember-bright); }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 480px;
  background-color: var(--coal-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-settle),
              transform var(--t-fast) var(--ease-settle),
              visibility var(--t-fast);
}
body:not(.scene-dark) .nav-dropdown-menu {
  background-color: var(--sky);
  border-color: var(--ink-line-strong);
  box-shadow: var(--shadow-lift-light);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  font-size: var(--fs-small);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
body:not(.scene-dark) .nav-dropdown-menu a { color: var(--ink-dim); border-bottom-color: var(--ink-line); }
body:not(.scene-dark) .nav-dropdown-menu a:hover { color: var(--ember); }
body.scene-dark .nav-dropdown-menu a { color: var(--ash-dim); }
body.scene-dark .nav-dropdown-menu a:hover { color: var(--amber); }
.nav-dropdown-menu a:last-child,
.nav-dropdown-menu a:nth-last-child(2) { border-bottom: none; }
.nav-dropdown-group-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
body:not(.scene-dark) .nav-dropdown-group-label { color: var(--ink-dim); }
body.scene-dark .nav-dropdown-group-label { color: var(--ash-dim); }
.nav-dropdown-group-label::before {
  content: '';
  width: 10px; height: 2px;
  background-color: var(--ember-bright);
}
.nav-dropdown-group-label:not(:first-child) { padding-top: var(--space-4); }

.header-cta { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
body:not(.scene-dark) .header-call { color: var(--ink); }
body:not(.scene-dark) .header-call:hover { color: var(--ember); }
body.scene-dark .header-call { color: var(--ash); }
body.scene-dark .header-call:hover { color: var(--amber); }
.header-call-icon { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  transition: transform var(--t-base) var(--ease-settle), opacity var(--t-base) var(--ease-settle);
}
body:not(.scene-dark) .nav-toggle span { background-color: var(--ink); }
body.scene-dark .nav-toggle span { background-color: var(--ash); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-settle), visibility var(--t-base);
  z-index: calc(var(--z-header) - 1);
}
.nav-overlay.active { opacity: 1; visibility: visible; }
.nav-cta-group { display: none; }

/* ══════════════ Bands (scenes) ══════════════ */
.band { padding: var(--space-24) 0; }
.band-tight { padding: var(--space-16) 0; }

/* dark world scene set */
body.scene-dark .band-alt  { background-color: var(--coal-2); }
body.scene-dark .band-dark { background-color: var(--slate-scene); }
body.scene-dark .band-soot { background-color: var(--coal-2); }

/* the light break — above the roofline */
.band-sky {
  background-color: var(--sky);
  color: var(--ink);
}
.band-sky h1, .band-sky h2, .band-sky h3 { color: var(--ink); }
.band-sky p { color: var(--ink-dim); }
.band-sky-2 { background-color: var(--sky-2); color: var(--ink); }
.band-sky-2 h2, .band-sky-2 h3 { color: var(--ink); }
.band-sky-2 p { color: var(--ink-dim); }

/* light pages: alt + dark panels */
body:not(.scene-dark) .band-alt  { background-color: var(--sky-2); }
body:not(.scene-dark) .band-dark,
body:not(.scene-dark) .band-soot {
  background-color: var(--coal);
  color: var(--ash);
}
body:not(.scene-dark) .band-dark h2, body:not(.scene-dark) .band-dark h3,
body:not(.scene-dark) .band-soot h2, body:not(.scene-dark) .band-soot h3 { color: var(--ash); }
body:not(.scene-dark) .band-dark p,
body:not(.scene-dark) .band-soot p { color: var(--ash-dim); }
body:not(.scene-dark) .band-dark .section-label,
body:not(.scene-dark) .band-soot .section-label { color: var(--ash-dim); }

.section-label--on-dark { color: var(--ash-dim) !important; }
.band-sky .section-label--on-dark,
.band-sky-2 .section-label--on-dark { color: var(--ink-dim) !important; }

/* roofline silhouette divider (dark → sky) */
.roofline-break { display: block; width: 100%; height: auto; }
.roofline-break path { fill: var(--slate-scene); }

/* ══════════════ Flue path (signature) ══════════════ */
.flue-seg {
  position: absolute;
  left: 50%;
  width: var(--flue-w);
  background: var(--line);
  transform: translateX(-50%);
}
.band-sky .flue-seg, .band-sky-2 .flue-seg { background: var(--ink-line-strong); }
.flue-seg i {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--ember-bright), var(--amber));
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
}

.flue-line { position: relative; width: var(--flue-w); }
.flue-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--flue-color);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 700ms var(--ease-settle);
}
.flue-line.drawn::before { transform: scaleY(1); }
.band-sky .flue-line::before, .band-sky-2 .flue-line::before { background-color: var(--ink-line-strong); }
@media (prefers-reduced-motion: reduce) {
  .flue-line::before { transform: scaleY(1); }
  .flue-seg i { transform: scaleY(1); }
}

/* Process spine */
.process { position: relative; padding-left: var(--space-10); }
.process > .flue-line { position: absolute; left: 0; top: 6px; bottom: 6px; }
.process-step { position: relative; padding: var(--space-6) 0; }
.process-step + .process-step { border-top: 1px solid var(--line); }
.band-sky .process-step + .process-step,
body:not(.scene-dark) .process-step + .process-step { border-top-color: var(--ink-line); }
body:not(.scene-dark) .band-dark .process-step + .process-step,
body:not(.scene-dark) .band-soot .process-step + .process-step { border-top-color: var(--line); }
.process-step::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-10));
  top: calc(var(--space-6) + 0.55em);
  width: 16px;
  height: var(--flue-w);
  background-color: var(--flue-tick);
}
.process-step-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  display: block;
}
body.scene-dark .process-step-label { color: var(--ash-dim); }
body:not(.scene-dark) .process-step-label { color: var(--ink-dim); }
.process-step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.process-step p { font-size: var(--fs-body); }

/* ══════════════ Figures & annotations ══════════════ */
.fig { position: relative; margin: 0; }
.fig img { width: 100%; }
.fig-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-top: var(--space-3);
}
body.scene-dark .fig-label { color: var(--ash-dim); }
body:not(.scene-dark) .fig-label { color: var(--ink-dim); }
.fig-label::before {
  content: '';
  width: 10px;
  height: 2px;
  background-color: var(--ember-bright);
  flex: none;
}
.fig-label .fig-tag { margin-left: auto; text-transform: none; letter-spacing: 0.02em; }
body.scene-dark .fig-label .fig-tag { color: var(--ash-faint); }
body:not(.scene-dark) .fig-label .fig-tag { color: var(--soot-60); }
body:not(.scene-dark) .band-dark .fig-label,
body:not(.scene-dark) .band-soot .fig-label { color: var(--ash-dim); }
body:not(.scene-dark) .band-dark .fig-label .fig-tag,
body:not(.scene-dark) .band-soot .fig-label .fig-tag { color: var(--ash-faint); }

.fig-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  background-color: rgba(14, 12, 9, 0.82);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  pointer-events: none;
}
.fig-callout::before {
  content: '';
  width: 8px; height: 8px;
  border: 2px solid var(--ember-bright);
  border-radius: 50%;
  flex: none;
}

/* Roof-pitch mask */
.img-pitch { clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%); }

/* ══════════════ Proof / trust row ══════════════ */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
}
body.scene-dark .proof-row { color: var(--ash-dim); }
body:not(.scene-dark) .proof-row { color: var(--ink-dim); }
.band-sky .proof-row { color: var(--ink-dim); }
.proof-row > span { display: inline-flex; align-items: center; gap: 8px; }
.proof-row > span::before {
  content: '';
  width: 8px; height: 2px;
  background-color: var(--ember-bright);
  flex: none;
}
.band-sky .proof-row > span::before { background-color: var(--ember); }
.proof-row--on-dark { color: var(--ash-dim) !important; }

/* ══════════════ Report table ══════════════ */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.report-table th, .report-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  vertical-align: top;
}
.report-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
body.scene-dark .report-table { border-top: 1px solid var(--line-strong); }
body.scene-dark .report-table th { color: var(--amber); }
body.scene-dark .report-table td { color: var(--ash-dim); }
body.scene-dark .report-table th, body.scene-dark .report-table td { border-bottom: 1px solid var(--line); }
body:not(.scene-dark) .report-table { border-top: 1px solid var(--ink-line-strong); }
body:not(.scene-dark) .report-table th { color: var(--ink-dim); }
body:not(.scene-dark) .report-table td { color: var(--ink); }
body:not(.scene-dark) .report-table th, body:not(.scene-dark) .report-table td { border-bottom: 1px solid var(--ink-line); }

/* ══════════════ Check list ══════════════ */
.check-list { }
.check-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  align-items: baseline;
}
body.scene-dark .check-list { border-top: 1px solid var(--line-strong); }
body.scene-dark .check-item { border-bottom: 1px solid var(--line); }
body:not(.scene-dark) .check-list { border-top: 1px solid var(--ink-line-strong); }
body:not(.scene-dark) .check-item { border-bottom: 1px solid var(--ink-line); }
body:not(.scene-dark) .band-dark .check-list,
body:not(.scene-dark) .band-soot .check-list { border-top-color: var(--line-strong); }
body:not(.scene-dark) .band-dark .check-item,
body:not(.scene-dark) .band-soot .check-item { border-bottom-color: var(--line); }
.check-item::before {
  content: '';
  flex: none;
  width: 12px; height: 7px;
  border-left: 2px solid var(--ember-bright);
  border-bottom: 2px solid var(--ember-bright);
  transform: rotate(-45deg) translateY(-2px);
}
body.scene-dark .check-item .check-text { color: var(--ash); }
body:not(.scene-dark) .check-item .check-text { color: var(--ink); }
body:not(.scene-dark) .band-dark .check-item .check-text,
body:not(.scene-dark) .band-soot .check-item .check-text { color: var(--ash); }
.check-item .check-sub { display: block; font-size: var(--fs-small); }
body.scene-dark .check-item .check-sub { color: var(--ash-dim); }
body:not(.scene-dark) .check-item .check-sub { color: var(--ink-dim); }
body:not(.scene-dark) .band-dark .check-item .check-sub,
body:not(.scene-dark) .band-soot .check-item .check-sub { color: var(--ash-dim); }

/* ══════════════ FAQ ══════════════ */
.faq-list { max-width: 780px; margin: 0 auto; }
body.scene-dark .faq-list { border-top: 1px solid var(--line-strong); }
body:not(.scene-dark) .faq-list { border-top: 1px solid var(--ink-line-strong); }
.faq-item { }
body.scene-dark .faq-item { border-bottom: 1px solid var(--line); }
body:not(.scene-dark) .faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
}
body.scene-dark .faq-q { color: var(--ash); }
body.scene-dark .faq-q:hover { color: var(--amber); }
body:not(.scene-dark) .faq-q { color: var(--ink); }
body:not(.scene-dark) .faq-q:hover { color: var(--ember); }
.faq-icon {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  font-weight: 400;
  transition: transform var(--t-base) var(--ease-settle);
}
.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--ember-bright); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-settle);
}
.faq-item.active .faq-a { grid-template-rows: 1fr; }
.faq-a > * { overflow: hidden; min-height: 0; }
.faq-a p {
  padding-bottom: 0;
  font-size: var(--fs-body);
  transition: padding-bottom var(--t-base) var(--ease-settle);
}
.faq-item.active .faq-a p { padding-bottom: var(--space-5); }

/* ══════════════ Forms (light surfaces) ══════════════ */
.form-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.form-label .required { color: var(--ember); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--white);
  border: 1px solid var(--ink-line-strong);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-settle),
              box-shadow var(--t-fast) var(--ease-settle);
}
.form-textarea { min-height: 110px; resize: vertical; }
/* Placeholder = example text: lighter than a typed value, still AA on white
   (ink-40 was 3.7:1; this mix is ~5.1:1; fallback ink-60 is 7.4:1). */
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--ink-60);
  color: color-mix(in srgb, var(--ink-60) 85%, var(--white));
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(var(--ember-rgb), 0.16);
}
.form-input.error, .form-select.error, .form-textarea.error { border-color: var(--err); }
.form-error { color: var(--err); font-size: var(--fs-small); margin-top: var(--space-1); min-height: 1.2em; }
.form-group { margin-bottom: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-helper {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink-dim);
  margin-top: var(--space-2);
}

/* ══════════════ Sticky CTA bars ══════════════ */
.sticky-cta-desktop { display: none; }
.sticky-cta-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  grid-template-columns: 1fr 1.7fr;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  visibility: hidden;
}
body.scene-dark .sticky-cta-mobile {
  background-color: rgba(14, 12, 9, 0.96);
  border-top: 1px solid var(--line-strong);
}
body:not(.scene-dark) .sticky-cta-mobile {
  background-color: var(--sky);
  border-top: 1px solid var(--ink-line-strong);
  box-shadow: var(--shadow-lift-light);
}
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta-mobile { transition: transform var(--t-base) var(--ease-settle), visibility var(--t-base); }
}
.sticky-cta-mobile.visible { transform: translateY(0); visibility: visible; }
.sticky-cta-mobile .btn { min-height: 48px; padding: 0 12px; font-size: 0.95rem; }

/* ══════════════ Footer ══════════════ */
footer.fr-footer {
  background-color: var(--coal-2);
  color: var(--ash-dim);
}
.fr-footer .footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-20) var(--gutter) var(--space-12);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
.fr-footer .logo-name { color: var(--ash); }
.fr-footer .logo-sub { color: var(--ash-dim); }
.fr-footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fr-footer h4::before { content: ''; width: 10px; height: 2px; background-color: var(--ember-bright); }
.fr-footer .footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.fr-footer .footer-links a { color: var(--ash-dim); font-size: var(--fs-small); }
.fr-footer .footer-links a:hover { color: var(--ash); }
.fr-footer .footer-desc { color: var(--ash-dim); font-size: var(--fs-small); margin: var(--space-4) 0; max-width: 34ch; }
.fr-footer .footer-call a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.fr-footer .footer-call a:hover { color: var(--amber); }
.fr-footer .footer-contact a { color: var(--ash-dim); font-size: var(--fs-small); }
.fr-footer .footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-top: var(--space-4);
}
.fr-footer .footer-bottom {
  border-top: 1px solid var(--line);
  padding: var(--space-5) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--ash-dim);
}
.fr-footer .footer-bottom a { color: var(--ash-dim); }
.fr-footer .footer-bottom a:hover { color: var(--ash); }
.fr-footer .footer-bottom p { color: inherit; font-size: inherit; }

/* ══════════════ Responsive ══════════════ */
@media (max-width: 1023px) {
  .band { padding: var(--space-20) 0; }
  .fr-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .band { padding: var(--space-16) 0; }
  .band-tight { padding: var(--space-12) 0; }

  #main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    background-color: var(--coal-2);
    border-left: 1px solid var(--line-strong);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: calc(var(--header-height) + var(--space-6)) var(--space-6) var(--space-8);
    transform: translateX(100%);
    visibility: hidden; /* closed drawer: unfocusable + no phantom overflow width */
    transition: transform var(--t-base) var(--ease-settle),
                visibility var(--t-base);
    overflow-y: auto;
    z-index: var(--z-header);
  }
  body:not(.scene-dark) #main-nav { background-color: var(--sky); border-left-color: var(--ink-line-strong); }
  #main-nav.open { transform: translateX(0); visibility: visible; }
  /* The toggle (its open state draws an ×) stays above the drawer: it is the
     menu's visible close control. */
  .nav-toggle { position: relative; z-index: calc(var(--z-header) + 1); }
  #main-nav > a, .nav-dropdown-trigger {
    width: 100%;
    padding: var(--space-4) 0;
    font-size: var(--fs-lead);
  }
  body.scene-dark #main-nav > a,
  body.scene-dark .nav-dropdown-trigger { color: var(--ash); border-bottom: 1px solid var(--line); }
  body:not(.scene-dark) #main-nav > a,
  body:not(.scene-dark) .nav-dropdown-trigger { color: var(--ink); border-bottom: 1px solid var(--ink-line); }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { display: flex; justify-content: space-between; align-items: center; }
  .nav-dropdown-trigger::after { margin-left: auto; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 var(--space-3) var(--space-4);
    opacity: 1;
    visibility: visible;
  }
  .nav-dropdown.nav-dropdown-open .nav-dropdown-menu { display: grid; }
  .nav-cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-6);
  }
  .nav-cta-group a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-weight: var(--weight-semibold);
  }
  body.scene-dark .nav-cta-group .nav-cta-call { border: 1px solid var(--line-strong); color: var(--ash); }
  body:not(.scene-dark) .nav-cta-group .nav-cta-call { border: 1px solid var(--ink-line-strong); color: var(--ink); }
  .nav-cta-group .nav-cta-schedule { background-color: var(--ember); color: #fff; }
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }
  .header-call .header-call-text { display: none; }
  .header-call {
    width: 48px; height: 48px;
    justify-content: center;
  }
  body.scene-dark .header-call { border: 1px solid var(--line-strong); }
  body:not(.scene-dark) .header-call { border: 1px solid var(--ink-line-strong); }
  .header-call-icon { width: 18px; height: 18px; }

  .sticky-cta-mobile { display: grid; }
  .form-row { grid-template-columns: 1fr; }

  .fr-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-16) var(--gutter) var(--space-10);
  }
  .fr-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: calc(var(--space-5) + 84px);
  }
  .process { padding-left: var(--space-8); }
  .process-step::before { left: calc(-1 * var(--space-8)); }
  .fig-callout { display: none; }
}

@media (max-width: 480px) {
  .cta-pair { flex-direction: column; align-items: stretch; }
  .cta-pair .btn { width: 100%; }
  .btn { white-space: normal; }
}

/* Grid/flex children must be allowed to shrink (390px overflow guard) */
.svc-two > *, .see-grid > *, .paths-grid > *,
.hero-grid > *, .process-wrap > * { min-width: 0; }

/* Report tables stack on narrow screens */
@media (max-width: 640px) {
  .report-table th { white-space: normal; }
  .report-table tr { display: block; padding: var(--space-3) 0; }
  body.scene-dark .report-table tr { border-bottom: 1px solid var(--line); }
  body:not(.scene-dark) .report-table tr { border-bottom: 1px solid var(--ink-line); }
  .report-table th, .report-table td {
    display: block;
    border-bottom: none;
    padding: 0 0 var(--space-1);
  }
}

/* ══════════════ Sky bands inside dark pages: full override set ══════════════ */
body.scene-dark .band-sky h1, body.scene-dark .band-sky h2, body.scene-dark .band-sky h3,
body.scene-dark .band-sky-2 h1, body.scene-dark .band-sky-2 h2, body.scene-dark .band-sky-2 h3 { color: var(--ink); }
body.scene-dark .band-sky p, body.scene-dark .band-sky-2 p { color: var(--ink-dim); }
body.scene-dark .band-sky .section-label, body.scene-dark .band-sky-2 .section-label,
body.scene-dark .band-sky .process-step-label, body.scene-dark .band-sky-2 .process-step-label,
body.scene-dark .band-sky .cta-note, body.scene-dark .band-sky-2 .cta-note,
body.scene-dark .band-sky .proof-row, body.scene-dark .band-sky-2 .proof-row { color: var(--ink-dim); }
body.scene-dark .band-sky .section-label::before, body.scene-dark .band-sky-2 .section-label::before,
body.scene-dark .band-sky .proof-row > span::before, body.scene-dark .band-sky-2 .proof-row > span::before { background-color: var(--ember); }
body.scene-dark .band-sky .faq-q, body.scene-dark .band-sky-2 .faq-q { color: var(--ink); }
body.scene-dark .band-sky .faq-q:hover, body.scene-dark .band-sky-2 .faq-q:hover { color: var(--ember); }
body.scene-dark .band-sky .faq-list, body.scene-dark .band-sky-2 .faq-list { border-top-color: var(--ink-line-strong); }
body.scene-dark .band-sky .faq-item, body.scene-dark .band-sky-2 .faq-item { border-bottom-color: var(--ink-line); }
body.scene-dark .band-sky .process-step + .process-step,
body.scene-dark .band-sky-2 .process-step + .process-step { border-top-color: var(--ink-line); }
body.scene-dark .band-sky .flue-line::before, body.scene-dark .band-sky-2 .flue-line::before { background-color: var(--ink-line-strong); }
/* any leftover btn-on-dark that lands on a sky band stays legible */
.band-sky .btn-on-dark, .band-sky-2 .btn-on-dark {
  border-color: var(--ink-line-strong);
  color: var(--ink);
}
.band-sky .btn-on-dark:hover, .band-sky-2 .btn-on-dark:hover { border-color: var(--ink); color: var(--ink); }

/* specificity guards: sky-band buttons on dark pages; footer logo on light pages */
body.scene-dark .band-sky .btn-outline,
body.scene-dark .band-sky-2 .btn-outline {
  border-color: var(--ink-line-strong);
  color: var(--ink);
}
body.scene-dark .band-sky .btn-outline:hover,
body.scene-dark .band-sky-2 .btn-outline:hover { border-color: var(--ink); color: var(--ink); }
body:not(.scene-dark) .fr-footer .logo-name { color: var(--ash); }
body:not(.scene-dark) .fr-footer .logo-sub { color: var(--ash-dim); }

/* mobile: no header blur — backdrop-filter would make the sticky header the
   containing block for the fixed nav drawer (phantom 340px scrollWidth) */
@media (max-width: 768px) {
  body.scene-dark #site-header {
    backdrop-filter: none;
    background-color: rgba(14, 12, 9, 0.97);
  }
}

/* ══════════════ Launch pass (2026-09) ══════════════ */
/* Services trigger is a real <button> now */
.nav-dropdown-trigger { background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.nav-dropdown.nav-dropdown-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Header phone: number text visible from tablets up; icon-only on phones */
@media (min-width: 769px) and (max-width: 1100px) {
  #main-nav { gap: var(--space-4); }
  #main-nav > a, .nav-dropdown-trigger { font-size: var(--fs-label); }
  .header-call .header-call-text { display: inline; }
}
/* Footer: 14 service links in two columns on desktop; registration line */
.fr-footer .footer-links-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
.fr-footer .footer-trust { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ash); margin: var(--space-3) 0; }
.fr-footer .footer-grid-minimal { grid-template-columns: 2fr 1fr; }
.fr-footer .footer-grid-ppc { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) {
  .fr-footer .footer-links-2col { grid-template-columns: 1fr; }
  .fr-footer .footer-grid-minimal, .fr-footer .footer-grid-ppc { grid-template-columns: 1fr; }
}
/* Sticky bar must never cover the footer's last links (iOS safe area included) */
@media (max-width: 768px) {
  body.has-sticky-mobile .fr-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* Long press on the bar's buttons should tap, not select their text */
  .sticky-cta-mobile .btn { -webkit-user-select: none; user-select: none; }
}
/* Trust proof-row host (renders from config; hidden while empty) */
[data-trust-badges][hidden] { display: none; }

/* 375px phones: logo + phone icon + burger must fit inside one header row */
@media (max-width: 400px) {
  .header-inner { gap: var(--space-3); }
  .header-cta { gap: var(--space-2); }
  .logo { gap: 8px; }
  .logo-sub { letter-spacing: 0.14em; }
}
/* Buttons inside prose keep button colors (the .prose a rule must not recolor them) */
.prose a.btn, .prose a.btn:hover, .post-cta a.btn, .post-cta a.btn:hover { text-decoration: none; }
.prose a.btn-primary, .prose a.btn-primary:hover, .post-cta a.btn-primary, .post-cta a.btn-primary:hover { color: #fff; }

/* ===== scheduling.css ===== */
/* ============================================
   Charter Oak Chimney — Scheduling page
   "Field Report" booking flow. Preserves every
   class hook used by js/scheduling.js:
   date-picker-day (.other-month/.disabled/.saturday/
   .today/.selected), date-message(-info), time-window,
   consent-check (.checked/.consent-error),
   submit-error-message, form error classes.
   ============================================ */

body.schedule-page { background-color: var(--paper); }

/* ── Page header block ── */
.schedule-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-8);
  text-align: left;
}
.schedule-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: var(--space-3) 0 var(--space-4);
}
.schedule-hero-sub {
  font-size: var(--fs-lead);
  color: var(--soot-60);
  max-width: 58ch;
  margin-bottom: var(--space-5);
}
.schedule-hero-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--soot);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-4);
}
.schedule-hero-call:hover { border-color: var(--kiln); color: var(--kiln); }

/* Verified price badge */
.inspection-fee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--kiln);
  border-radius: var(--radius-xs);
  padding: var(--space-4) var(--space-5);
  background-color: var(--white);
}
.fee-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--soot);
  line-height: 1;
}
.fee-amount .fee-dollar { font-size: 0.6em; vertical-align: 0.3em; }
.fee-details { display: flex; flex-direction: column; gap: 2px; }
.fee-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--soot-60);
}
.fee-credit { font-size: var(--fs-small); color: var(--soot-80); }

/* ── Form container: the "report form" ── */
.schedule-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-24);
}
.schedule-card {
  background-color: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
}
.schedule-form-body { padding: var(--space-8); }

/* Numbered sections hang on the flue line */
.form-section {
  position: relative;
  padding: var(--space-6) 0 var(--space-8) var(--space-8);
  border-left: var(--flue-w) solid var(--rule-strong);
}
.form-section:last-of-type { padding-bottom: var(--space-4); }
.form-section::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: calc(var(--space-6) + 0.45em);
  width: 14px;
  height: var(--flue-w);
  background-color: var(--kiln);
}
.form-section-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--soot-60);
  display: block;
  margin-bottom: var(--space-1);
}
.form-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-medium);
  color: var(--soot);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.form-section-icon { display: none; } /* legacy markup tolerance */

/* Inputs come from fieldreport.css; page-specific extras: */
.form-group.has-error .form-label { color: var(--err); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c564c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ── Date picker ── */
.date-picker {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-4);
  background-color: var(--paper);
  max-width: 420px;
}
.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.date-picker-title {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--soot);
}
.date-picker-nav { display: flex; gap: var(--space-2); }
.date-picker-nav button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  font-size: 1.1rem;
  color: var(--soot-80);
  background-color: var(--white);
  transition: border-color var(--t-fast) var(--ease-settle),
              color var(--t-fast) var(--ease-settle);
}
.date-picker-nav button:hover { border-color: var(--kiln); color: var(--kiln); }
.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-1);
}
.date-picker-weekday {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--soot-60);
  text-align: center;
  padding: var(--space-1) 0;
}
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.date-picker-day {
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--soot);
  background-color: var(--white);
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-settle),
              background-color var(--t-fast) var(--ease-settle);
}
.date-picker-day:hover:not(.disabled) { border-color: var(--kiln); }
.date-picker-day.today { border-color: var(--rule-strong); }
.date-picker-day.selected {
  background-color: var(--kiln);
  color: var(--white);
  border-color: var(--kiln);
}
.date-picker-day.disabled {
  color: var(--soot-40);
  background-color: transparent;
  cursor: not-allowed;
}
.date-picker-day.other-month { visibility: hidden; }
.date-picker-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--soot-60);
}
.date-picker-note-svg { flex: none; margin-top: 2px; }

/* Smart date messages */
.date-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
}
.date-message-info {
  background-color: var(--warn-tint);
  color: var(--warn);
}

/* ── Time windows ── */
.time-windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 560px;
}
.time-window {
  min-height: 48px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--soot);
  background-color: var(--white);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease-settle),
              background-color var(--t-fast) var(--ease-settle),
              color var(--t-fast) var(--ease-settle);
}
.time-window:hover { border-color: var(--kiln); }
.time-window.selected {
  background-color: var(--kiln);
  border-color: var(--kiln);
  color: var(--white);
}

/* ── Consent ── */
.consent-section { padding-bottom: var(--space-4); }
.consent-card {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-5);
  background-color: var(--paper);
}
.consent-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}
.consent-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.consent-checkmark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  background-color: var(--white);
  position: relative;
  transition: border-color var(--t-fast) var(--ease-settle),
              background-color var(--t-fast) var(--ease-settle);
}
.consent-check input:focus-visible + .consent-checkmark {
  outline: 2px solid var(--kiln);
  outline-offset: 2px;
}
.consent-check input:checked + .consent-checkmark {
  background-color: var(--kiln);
  border-color: var(--kiln);
}
.consent-check input:checked + .consent-checkmark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}
.consent-label {
  font-size: var(--fs-small);
  color: var(--soot-80);
  line-height: 1.55;
}
.consent-label a {
  color: var(--kiln-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-check.consent-error .consent-checkmark { border-color: var(--err); }
.consent-fine-print {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--soot-60);
}

/* ── Submit area ── */
.form-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--rule);
  padding: var(--space-6) var(--space-8);
  background-color: var(--paper);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}
.fee-reminder {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.fee-reminder strong { color: var(--ink); }
/* Pending state while /api/schedule is in flight (button carries aria-busy).
   Constant motion → linear; a CSS animation keeps turning while the main
   thread is busy. Under reduced motion the global rule stops it: a static
   ring + "Sending…" still says the request is underway. */
.btn-spinner {
  width: 14px; height: 14px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex: none;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(1turn); } }
.btn-submit-main[aria-busy="true"]:disabled { background-color: var(--ember-deep); cursor: progress; }

/* Submit-attempt summary, right above the button (role="alert") */
.form-error-summary {
  flex-basis: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--err-tint);
  color: var(--err);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
}
/* Error slots take no space until they hold a message (they used to reserve
   a blank line under every field, stretching the one-screen form) — except
   the fields validated on blur (phone, address, email): their slot stays
   reserved, so an error appearing as the visitor moves on never pushes the
   next tap target (e.g. the consent box) out from under their finger. */
.schedule-card .form-error:empty { min-height: 0; margin-top: 0; }
.schedule-card .form-group:has(#sched-phone, #sched-address, #sched-email) .form-error:empty { min-height: 1.6em; min-height: 1lh; margin-top: var(--space-1); }
.btn-submit-main { min-width: 260px; }
.btn-submit-main:disabled {
  background-color: var(--soot-40);
  cursor: not-allowed;
}

.submit-error-message {
  margin: 0 var(--space-8) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--err-tint);
  color: var(--err);
  border-radius: var(--radius-xs);
  font-size: var(--fs-small);
}

/* ── Honeypot ── */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ── Consent detail modal ── */
.consent-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(33, 30, 25, 0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.consent-modal {
  background-color: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  max-width: 560px;
  width: 100%;
  max-height: 84vh;
  max-height: 84dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lift);
}
.consent-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.consent-modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-medium);
}
.consent-modal-close {
  font-size: 1.5rem;
  color: var(--soot-60);
  width: 40px;
  height: 40px;
}
.consent-modal-close:hover { color: var(--soot); }
.consent-modal-body { padding: var(--space-6); }
.consent-modal-section { margin-bottom: var(--space-5); }
.consent-modal-section h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--soot-60);
  margin-bottom: var(--space-2);
}
.consent-modal-section p { font-size: var(--fs-small); }
.consent-modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--rule);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .schedule-hero { padding: var(--space-8) var(--space-5) var(--space-6); }
  .schedule-container { padding: 0 var(--space-4) var(--space-20); }
  .schedule-form-body { padding: var(--space-5); }
  .form-section { padding-left: var(--space-5); }
  .form-nav {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
  }
  .btn-submit-main { width: 100%; }
  .time-windows { grid-template-columns: 1fr; }
  .date-picker { max-width: none; }
}

/* ══════════════ Step 01 additions (PPC conversion system) ══════════════ */
.form-label-optional { font-weight: var(--weight-regular); color: var(--soot-60); }

/* Urgent branch — revealed for urgent problems (leak, smoke, fire, storm,
   structural). Hands the visitor the phone without promising a date. */
.urgent-branch {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ink-line-strong);
  border-left: 3px solid var(--ember);
  background-color: var(--white);
}
.urgent-branch .urgent-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.urgent-branch .urgent-msg { font-size: var(--fs-small); color: var(--ink-dim); margin-bottom: var(--space-3); max-width: 60ch; }
.urgent-branch .urgent-safety {
  font-size: var(--fs-small);
  color: var(--err);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  max-width: 60ch;
}
.urgent-branch .btn { min-height: 46px; }

/* ══════════════ One-screen booking (2026-10: four required fields) ══════════════ */
[hidden] { display: none !important; }
/* "Add details (optional)" — a native <details> so the optional fields never
   block the four required ones; opens automatically when a landing-page
   intent preselects a problem (js/scheduling.js). */
.form-details { padding: 0 0 24px; }
.form-details-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 16px 18px;
  border: 1px solid var(--rule-strong);
  background: #f4f2ec;
  color: var(--ink);
  font: 600 16px/1.4 var(--font-body);
}
.form-details-summary::-webkit-details-marker { display: none; }
.form-details-summary::before {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 400;
  color: #923208;
  width: 16px;
}
.form-details[open] .form-details-summary::before { content: '–'; }
.form-details-summary:hover { border-color: var(--ink-line-strong); }
.form-details-summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.form-details-hint { flex-basis: 100%; padding-left: 26px; font-weight: 400; font-size: var(--fs-small); color: #625b50; }
.form-details[open] .form-details-hint { display: none; }
.form-details-body { padding: 24px 0 0; }
.time-windows-note { color: #625b50; font-size: var(--fs-small); grid-column: 1 / -1; }
.consent-card .form-error:empty { display: none; }
.consent-card .form-error { margin: 8px 0 0; }
.schedule-hero { padding-top: 36px; padding-bottom: 24px; }
.schedule-hero-title { font: 600 clamp(28px, 4vw, 42px)/1.15 var(--font-body); text-transform: none; letter-spacing: -.035em; }
.schedule-hero-sub { font-size: 16px; }
.schedule-hero .inspection-fee-badge { margin-top: 16px; }
.schedule-hero .accent-word { color: #a33409; }
.form-section-title { font-family: var(--font-body); text-transform: none; font-size: 23px; letter-spacing: -.02em; margin-bottom: 20px; }
.form-section-kicker { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #625b50; margin-bottom: 6px; }
.schedule-form-body { padding: 24px 32px; }
.form-section { padding: 12px 0 24px; border-left: 0; }
.form-section::before { display: none; }
.context-pill { background: #e3e6dd; color: #37322b; padding: 10px 14px; font-size: 14px; margin: 16px 0; }
.dp-earliest { font-size: var(--fs-small); color: #625b50; margin: 0 0 10px; }
/* Calendar must fit a 375 px phone: 7 equal, shrinkable columns */
.date-picker { max-width: 100%; }
.date-picker-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-picker-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-picker-day { min-width: 0; padding: 0; }
@media (max-width: 767px) {
  .schedule-form-body { padding: 20px; }
  .form-details-summary { padding: 14px; }
  .submit-error-message { margin: 0 20px var(--space-4); } /* align with the form's phone padding */
  .date-picker { padding: var(--space-3); }
  .date-picker-day { min-height: 44px; font-size: 0.875rem; }
  .date-picker-weekday { font-size: 0.75rem; }
}