/* ==========================================================================
   FixITRight — "Diagnostic Motion" visual system
   --------------------------------------------------------------------------
   Styles the approved homepage markup only: public/index.html.
   The eight SEO service pages link /seo.css and are intentionally untouched
   by this file.

   System: one dark cinematic hero (the media sits on the dark key art), then
   predominantly light, high-contrast editorial bands so the copy stays easy to
   read on a phone in daylight. Black cinematic chrome, brand red for action
   and diagnosis accents, no decorative gradients beyond one restrained hero
   glow, no shadow-heavy cards, no oversized padding.

   Breakpoints (mobile-first): 320 base · 390 · 768 · 1024 · 1440
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ink / red / white, plus the light surfaces and text tones */
  --color-ink: #0a0a0a;
  --color-ink-soft: #18181b;
  --color-red: #dc2626;
  --color-red-dark: #b91c1c;
  --color-red-deep: #991b1b;
  --color-white: #ffffff;
  --color-surface: #f7f7f8;
  --color-muted: #5b6470;
  --color-border: #e4e4e7;
  --color-border-strong: #8a8a94;
  /* Light-on-ink pairs, checked against #0a0a0a for AA */
  --color-on-dark: #e4e4e7;
  --color-on-dark-muted: #a1a1aa;
  --color-media-bg: #111111;

  /* Spacing scale — 0.25rem steps, used instead of ad-hoc padding */
  --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;

  /* Radius hierarchy: small controls, medium panels, large media, pills */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 68rem;
  --nav-offset: 6rem;
  --shadow-soft: 0 1px 2px rgba(10, 10, 10, 0.05), 0 1px 3px rgba(10, 10, 10, 0.04);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img,
video,
picture,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  text-wrap: pretty;
}

/* Links inside prose carry an underline so colour is never the only cue */
a {
  color: var(--color-red-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-red);
}

/* Keep telephone numbers as one visual token. The surrounding sentence may wrap,
   but splitting 832-762-7782 across lines is hard to scan and tap on phones. */
a[href^="tel:"] {
  white-space: nowrap;
}

/* High-contrast keyboard focus on every interactive element. Ink on light
   surfaces, white on the dark header/hero/footer — both far above 3:1. */
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.site-header :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-white);
}

/* Anchored headings must never hide under the sticky header */
[id] {
  scroll-margin-top: var(--nav-offset);
}

/* Shared text helpers */
.sub {
  max-width: 46rem;
  margin-bottom: var(--space-8);
  color: var(--color-muted);
}

.note {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  background-color: var(--color-red);
}

.section {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12) var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta:hover {
  background-color: var(--color-red-dark);
  color: var(--color-white);
}

.cta:active {
  background-color: var(--color-red-deep);
}

.cta-large {
  min-height: 3.25rem;
  padding-inline: var(--space-6);
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   4. Header — compact black bar, two persistent actions on phones
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--color-ink);
  border-bottom: 3px solid var(--color-red);
}

/* Markup note: the header nav also carries the legacy co-class .nav-links and
   the footer element also carries .site-footer. Both are styled here through
   their semantic class, so those aliases need no rules of their own. */
.nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
}

.site-brand {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* The real logo artwork, trimmed at build time by
   app/scripts/build-brand-logo.py. Its field is --color-ink, so it blends into
   the dark header/footer with no visible box. */
.site-brand img {
  display: block;
  height: 44px;
  width: auto;
}

.footer-logo {
  display: block;
  height: 48px;
  width: auto;
}

/* Keep the header compact on small screens without shrinking the mark so far
   that the wordmark and tagline stop being readable. */
@media (max-width: 767px) {
  .site-brand img { height: 36px; }
}

.site-brand:hover {
  opacity: 0.85;
}

/* The "Call or text" label is redundant next to the tel: link on the tightest
   screens: hide the text node, keep the number tappable. */
.nav-phone {
  grid-column: 2;
  color: var(--color-on-dark);
  font-size: 0;
  white-space: nowrap;
}

.nav-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-on-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-phone a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.nav-cta {
  grid-column: 3;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  font-size: 0.875rem;
}

/* Scrollable link row so Services/Prices/Repair Tips/Guarantee stay reachable
   and keyboard-focusable on a 320px screen without a JavaScript menu. */
.site-nav {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  color: var(--color-on-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
   5. Hero — dark cinematic block, copy first on phones
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-4) var(--space-12);
  background-color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink-soft);
  color: var(--color-white);
}

/* One restrained diagnostic glow behind the key art, nothing more */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    60% 55% at 78% 30%,
    rgba(220, 38, 38, 0.16),
    rgba(220, 38, 38, 0) 70%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* The copy column is a plain grid child; min-width: 0 keeps long words and the
   price rows from blowing the grid out on a 320px screen. */
.hero-copy {
  min-width: 0;
}

.hero .eyebrow {
  color: var(--color-on-dark-muted);
}

.hero h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.75rem, 1.2rem + 3.4vw, 3rem);
  letter-spacing: -0.025em;
  color: var(--color-white);
}

/* h1 never drops below 28px, so the brand red qualifies as large text (3:1)
   and clears AA even over the glow. */
.hero-highlight {
  color: var(--color-red);
}

.hero-lede {
  max-width: 34rem;
  margin-bottom: var(--space-6);
  font-size: 1.0625rem;
  color: var(--color-on-dark);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.52);
  color: var(--color-white);
}

.hero-area {
  font-size: 0.8125rem;
  color: var(--color-on-dark-muted);
}

.hero-area a {
  color: var(--color-on-dark);
}

/* Hero media: the loop sits over the poster frame until the loop can actually
   render. app.js (Task 9) marks readiness after `canplay` by adding
   `.is-media-ready` (or `.is-ready`) to .hero-media, or `.is-ready` to the
   video; the poster keeps showing until then, and whenever the video is
   absent, blocked, hidden or reduced-motion. */
.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background-color: var(--color-media-bg);
}

.hero-video,
.video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video {
  z-index: 0;
}

.video-fallback {
  z-index: 1;
}

.hero-media.is-media-ready .video-fallback,
.hero-media.is-ready .video-fallback,
.hero-media video.is-ready + .video-fallback {
  display: none;
}

/* CSS motion fallback: an animated red scan line over the poster.

   iOS Low Power Mode and several in-app browsers block autoplay. Without this
   overlay those visitors get a still image and never learn the hero is a video,
   so the poster carries a CSS-only sweep that runs *while the loop is not
   ready*. app.js adds `.hero-media.is-media-ready` the moment a real frame can
   render — which is also the moment playback is requested — so the fallback
   hands over to the real loop and is then hidden for good. It is decorative:
   aria-hidden markup is untouched, `pointer-events: none`, absolutely
   positioned inside the media box, so it can never sit over the headline or
   CTAs and it adds no layout shift. `prefers-reduced-motion: reduce` removes it
   completely (see section 16). */
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -16%;
  left: 0;
  right: 0;
  height: 12%;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(220, 38, 38, 0) 0%,
    rgba(220, 38, 38, 0.08) 34%,
    rgba(255, 138, 138, 0.72) 58%,
    rgba(255, 245, 245, 0.98) 71%,
    rgba(235, 58, 58, 0.58) 81%,
    rgba(220, 38, 38, 0.18) 92%,
    rgba(220, 38, 38, 0) 100%
  );
  filter: drop-shadow(0 8px 12px rgba(220, 38, 38, 0.45));
  will-change: transform, opacity;
  animation: hero-fallback-scan 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

/* Enters and leaves transparent, so the restart is invisible. */
@keyframes hero-fallback-scan {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 900%, 0);
  }
}

/* The real loop has arrived (or failed into the poster with no loop at all):
   take the fallback off screen and stop animating it. */
.hero-media.is-media-ready::after,
.hero-media.is-ready::after {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

/* Phones: the media is the whole point of the hero, so it goes edge to edge and
   gets a taller box, while the copy above it tightens so the motion arrives
   sooner. The media follows the copy in the DOM, so a taller box can never
   push the headline or the CTAs below the fold. `object-fit: cover` in a 4:3
   box crops the sides of the 16:9 loop instead of distorting it, and the whole
   laptop display — where every bit of the motion happens — stays in frame. */
@media (max-width: 767px) {
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }

  .hero-inner {
    gap: var(--space-5);
  }

  .hero h1 {
    margin-bottom: var(--space-3);
  }

  .hero-lede {
    margin-bottom: var(--space-4);
  }

  .hero-actions {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .hero-media {
    margin-inline: calc(-1 * var(--space-4));
    border-inline: 0;
    border-radius: 0;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   6. Trust strip — light band, supported proof points only
   -------------------------------------------------------------------------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.trust-item {
  display: grid;
  gap: var(--space-1);
  max-width: 16rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.trust-item b {
  color: var(--color-red-dark);
  font-size: 1.0625rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   7. Section bands — light, alternating, no heavy surfaces
   -------------------------------------------------------------------------- */
.services-editorial {
  background-color: var(--color-white);
}

.pricing {
  background-color: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.process {
  background-color: var(--color-white);
}

.guarantee {
  background-color: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.credibility {
  background-color: var(--color-white);
}

.booking {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */
.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-red);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The four icons are black-stroke SVGs: the card surface stays light. */
.service-icon {
  width: 3.5rem;
  height: 3.5rem;
}

.service-card h3 {
  margin: 0;
}

.service-card p {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.service-card > p:last-child {
  margin-top: auto;
}

.service-card a {
  font-weight: 600;
  color: var(--color-red-dark);
}

.service-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.service-price .price-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-ink);
}

.service-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0 var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.service-links a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.service-links a::before {
  content: "\2192";
  margin-right: var(--space-2);
  color: var(--color-red-dark);
  font-weight: 700;
}

.service-links a:hover {
  color: var(--color-red-dark);
  text-decoration: underline;
}

.services-equipment {
  margin: var(--space-10) auto 0;
  max-width: 46rem;
}

.services-equipment img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.services-equipment figcaption {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   9. Pricing — one-time work first, care plans separated
   -------------------------------------------------------------------------- */
.prices-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
  align-items: start;
}

.price-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.price-card-head {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-red-dark);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.price-table th[scope="row"] {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.price-table th small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.price-table td.price {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 800;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.price-table tr:last-child th,
.price-table tr:last-child td {
  border-bottom: none;
}

.price {
  font-weight: 800;
  white-space: nowrap;
}

.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.plan-row b {
  display: block;
}

.plan-row small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.plan-row .price {
  text-align: right;
}

.plan-row:last-of-type {
  border-bottom: none;
}

.plan-foot {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.price-conditions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   10. Process — semantic <ol>, visual numbering from the aria-hidden spans
   -------------------------------------------------------------------------- */
.process-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.step-number {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-red-dark);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 800;
}

.step h3 {
  margin-bottom: var(--space-1);
}

.step p {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   11. Guarantee
   -------------------------------------------------------------------------- */
.guarantee-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-md);
}

.guarantee-card h2 {
  margin-bottom: var(--space-3);
}

.guarantee-card p {
  color: var(--color-muted);
}

.guarantee-card .note {
  margin-top: var(--space-3);
}

.guarantee-card .cta {
  justify-self: start;
}

/* --------------------------------------------------------------------------
   12. Credibility / founding-customer state
   -------------------------------------------------------------------------- */
.reviews-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}

.review {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.review h3 {
  margin-bottom: var(--space-2);
}

.review-name {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.review-note {
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   13. Booking
   -------------------------------------------------------------------------- */
.booking-phone {
  margin-bottom: var(--space-6);
  font-size: 0.9375rem;
}

.book-form {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin-top: var(--space-6);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.book-form label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.book-form input,
.book-form select,
.book-form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.book-form textarea {
  min-height: 6rem;
  resize: vertical;
}

.book-form ::placeholder {
  color: var(--color-muted);
}

/* No display declaration: the [hidden] attribute keeps working when app.js
   hides the control. */
.optional-toggle {
  justify-self: start;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.optional-toggle:hover {
  border-color: var(--color-ink);
}

.optional-fields:not([hidden]),
#optional-fields:not([hidden]) {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.book-form .cta {
  justify-self: start;
}

/* Submitting state: darker brand red keeps white label text at 6.4:1 */
.book-form [disabled] {
  background-color: var(--color-red-dark);
  cursor: progress;
}

.form-status {
  min-height: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-status:empty {
  min-height: 0;
}

.form-status.error {
  color: var(--color-red-dark);
}

/* The honeypot must never render, but stay in the DOM and in the payload */
.honeypot {
  display: none !important;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-ink);
  border-top: 3px solid var(--color-red);
  color: var(--color-on-dark);
}

.footer-inner {
  display: grid;
  gap: var(--space-6);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-10) var(--space-4);
  font-size: 0.9375rem;
}

.footer-col p + p {
  margin-top: var(--space-3);
}

.footer-col b {
  color: var(--color-white);
}

.footer-col a {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(220, 38, 38, 0.55);
  text-underline-offset: 3px;
}

.footer-col a:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-red);
}

.footer-bottom {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-on-dark-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* ==========================================================================
   15. Responsive — 390 / 768 / 1024 / 1440
   ========================================================================== */

/* Tightest phones (320–389): smaller chrome, nothing may overflow 320px */
@media (max-width: 389px) {
  .nav-inner {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .site-brand {
    font-size: 1rem;
  }

  .nav-phone a {
    font-size: 0.75rem;
  }

  .nav-cta {
    padding-inline: var(--space-3);
    font-size: 0.8125rem;
  }

  .hero {
    padding-inline: var(--space-3);
  }

  /* Match the tighter inline gutter so the media still reaches both edges
     exactly, with no horizontal overflow on a 320px screen. */
  .hero-media {
    margin-inline: calc(-1 * var(--space-3));
  }

  .section {
    padding-inline: var(--space-3);
  }

  .hero h1 {
    font-size: 1.625rem;
  }

  .price-card {
    padding: var(--space-4);
  }

  .price-card-head {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .price-table {
    font-size: 0.875rem;
  }

  .price-table th[scope="row"],
  .price-table td.price {
    padding-block: var(--space-2);
  }

  .review,
  .service-links,
  .optional-fields:not([hidden]),
  #optional-fields:not([hidden]) {
    padding: var(--space-4);
  }
}

/* Tablets: one header row, wider bands */
@media (min-width: 768px) {
  :root {
    --nav-offset: 5rem;
  }

  .nav-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-6);
  }

  .site-brand {
    margin-right: auto;
  }

  .site-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: visible;
  }

  .nav-phone {
    font-size: 0.9375rem;
  }

  .nav-phone a {
    font-size: inherit;
  }

  .section {
    padding: var(--space-16) var(--space-6);
  }

  .hero {
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-5) var(--space-6);
  }

  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guarantee-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-8);
  }

  .price-card {
    padding: var(--space-6);
  }

  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    padding: var(--space-12) var(--space-6);
  }
}

/* Desktop: two-column hero, copy left, media right */
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-16);
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero-actions {
    margin-bottom: var(--space-6);
  }
}

/* Large desktop: cap the measure so lines do not stretch */
@media (min-width: 1440px) {
  :root {
    --content-max: 72rem;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .hero-lede {
    max-width: 36rem;
  }

  .sub {
    max-width: 44rem;
  }
}

/* --------------------------------------------------------------------------
   16. Reduced motion — poster only, and nothing animates or eases
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media video,
  .hero-video {
    display: none !important; /* the .video-fallback poster frame stays visible */
  }

  /* No motion at all: the CSS scan-line fallback is removed outright, so these
     visitors get the poster and nothing that moves. */
  .hero-media::after {
    display: none !important;
    animation: none !important;
  }

  .hero-media,
  .hero-media *,
  .hero-media::before,
  .hero-media::after,
  .cta,
  .hero-secondary,
  .card,
  .price-card,
  .review,
  .step-number {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}