/* =========================================================
   Bright Lights Headlight Restoration
   Brand: black #000 / white #FFF · Bebas Neue + Raleway
   ========================================================= */

/* Self-hosted from the brand kit (archived outside this repo; the extracted
   woff2 files in assets/fonts are all the site needs). Raleway is a variable
   font, so one 27KB file covers every weight used (400/500/600/700). */
@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/raleway-var.woff2") format("woff2-variations"),
       url("assets/fonts/raleway-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --gray-1: #f5f5f5;
  --gray-2: #d9d9d9;
  /* Muted text comes in two weights so both pass WCAG AA (4.5:1).
     #8a8a8a is 5.9:1 on black but only 3.6:1 on white, so light
     backgrounds get the darker token. Don't collapse these back. */
  --gray-on-dark: #8a8a8a;
  --gray-on-light: #6b6b6b;
  --gray-4: #2a2a2a;
  --heading: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Raleway", "Helvetica Neue", sans-serif;
  --nav-h: 72px;
  --radius: 10px;
  --container: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Focus & motion ----------
   The page alternates black and white sections, so a single-colour ring
   would vanish on one of them. A white ring with a black outer edge (or
   vice-versa on light sections) stays visible on both. */
:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--black);
  border-radius: 4px;
}
.section:not(.section-dark) :focus-visible,
.footer-light :focus-visible {
  outline-color: var(--black);
  box-shadow: 0 0 0 6px var(--white);
}
/* Keyboard-only: don't draw rings on mouse clicks. */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 22px;
  background: var(--white);
  color: var(--black);
  font-family: var(--heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--heading); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; }
h1 { font-size: clamp(3rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 0.35em; }
h3 { font-size: 1.5rem; margin-bottom: 0.4em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.65;
}

.section { padding: 96px 0; }
.section-sub { max-width: 640px; font-size: 1.05rem; margin-bottom: 40px; color: var(--gray-4); }

.section-dark { background: var(--black); color: var(--white); }
.section-dark .section-sub { color: var(--gray-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--heading);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 13px 28px 11px;
  border-radius: 6px;
  border: 2px solid var(--black);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--black); color: var(--white); }
.btn-solid:hover { background: var(--gray-4); border-color: var(--gray-4); }
.btn-outline { background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-light:hover { background: var(--gray-2); border-color: var(--gray-2); }
.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--black); }
.btn-lg { font-size: 1.4rem; padding: 16px 36px 13px; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.cta-center { justify-content: center; }

/* Risk-reversal line, sits right under the CTA where hesitation happens. */
.cta-reassure {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--gray-2);
}
.cta-reassure svg { width: 17px; height: 17px; flex: none; margin-top: 4px; }
.cta-reassure strong { color: var(--white); font-weight: 700; }

/* SMS consent disclosure.
   A2P 10DLC review checks the page for this next to whatever initiates a text —
   a campaign citing the website as its opt-in path gets rejected without it.
   Deliberately quiet: it has to be legible and findable, not loud. Both colours
   are the deliberate on-dark / on-light greys, which clear 4.5:1 on their
   respective grounds. */
.sms-note {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray-on-light);
}
.sms-note-dark { color: var(--gray-on-dark); }
/* Follow the alignment of the CTA row it belongs to. */
.cta-center + .sms-note { text-align: center; margin-left: auto; margin-right: auto; }


/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--gray-4);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
/* width:auto is required — the width/height attributes on the <img> exist so
   the browser can reserve space before load, but without this the attribute
   width (480) wins over the intrinsic ratio and squashes the logo. */
.nav-logo img { height: 52px; width: auto; filter: invert(1); }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--heading);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.nav-links a:hover { opacity: 1; }
.nav-cta { border-color: var(--white); background: var(--white); color: var(--black); padding: 9px 20px 7px; font-size: 1rem; }
.nav-cta:hover { background: var(--gray-2); border-color: var(--gray-2); }

/* The checkbox is the open/closed state; it never needs to be seen. */
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nav-toggle { display: none; background: none; border: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: 0.2s; }
.nav-mobile { display: none; }
/* Keyboard focus lands on the hidden checkbox, so mirror the ring onto the
   label the user can actually see. */
.nav-toggle-input:focus-visible ~ .nav-inner .nav-toggle {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--black);
  border-radius: 4px;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--black);
  color: var(--white);
  padding: calc(var(--nav-h) + 72px) 0 88px;
}
.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 span { display: inline-block; border-bottom: 5px solid var(--white); padding-bottom: 4px; }
.hero-sub { margin-top: 22px; font-size: 1.1rem; color: var(--gray-2); max-width: 480px; }

.trust-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-4);
  font-size: 0.92rem;
  color: var(--gray-2);
}
.trust-bar strong { color: var(--white); font-weight: 700; }
.trust-bar-inline { border-top-color: rgba(255,255,255,0.25); }

.hero-slider-hint { text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--gray-on-dark); }

/* ---------- Before/After slider ---------- */
.ba {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  user-select: none;
  -webkit-user-select: none;
  /* pan-y, NOT none. `none` blocked vertical scrolling for any touch starting
     on the photo — on mobile that's a full-width dead zone where the page
     won't scroll. pan-y lets the page scroll vertically while leaving
     horizontal movement to the drag handler in script.js. */
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--gray-4);
}
/* Promote the layers only while actually dragging — keeping four sliders
   permanently promoted costs memory for no benefit. */
.ba.is-dragging .ba-after { will-change: clip-path; }
.ba.is-dragging .ba-handle { will-change: left; }
/* The range input is opacity:0, so a focus ring on it would be invisible.
   Put the ring on the container instead when it's keyboard-focused. */
.ba:has(input[type="range"]:focus-visible) {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--black);
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0,0,0,0.55);
}
.ba-handle span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.ba-handle span::before,
.ba-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-style: solid;
  transform: translateY(-50%);
}
.ba-handle span::before { left: 8px; border-width: 6px 8px 6px 0; border-color: transparent var(--black) transparent transparent; }
.ba-handle span::after { right: 8px; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--black); }

/* Keyboard and screen-reader control only. pointer-events:none is deliberate:
   a range input only drags from its thumb, so while it was catching pointers
   most of the photo was unresponsive. script.js now handles pointer dragging
   on the container, and this stays for arrow-key and assistive-tech access
   (both of which are unaffected by pointer-events). */
.ba input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.ba-tag {
  position: absolute;
  top: 14px;
  font-family: var(--heading);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 5px 12px 3px;
  border-radius: 4px;
  pointer-events: none;
}
.ba-tag-before { left: 14px; background: rgba(0,0,0,0.72); color: var(--white); }
.ba-tag-after { right: 14px; background: rgba(255,255,255,0.88); color: var(--black); }

/* ---------- Results ---------- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}
.featured-grid figure { margin: 0; }
.featured-grid figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-on-light);
}

.gallery-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--heading);
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 8px 18px 6px;
  border: 1.5px solid var(--gray-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: 0.15s;
}
.chip:hover { border-color: var(--black); }
.chip.is-active { background: var(--black); color: var(--white); border-color: var(--black); }

.pair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
/* `display: grid` above outranks the hidden attribute's UA `display: none` */
.pair-grid[hidden] { display: none; }
/* Trip-wire for lazy batch rendering; spans the row so it sits below the cards. */
.pair-sentinel { grid-column: 1 / -1; height: 1px; }

/* Without JS the gallery controls do nothing, so don't offer them. script.js
   removes .needs-js from <html> on load, revealing them. */
.needs-js .gallery-controls { display: none; }
.noscript-note { margin: 0; }
.pair-card {
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
/* Each card holds the same drag-to-compare slider as the featured ones. The
   card already clips to its own radius, so the slider inside shouldn't round
   its corners again. */
.pair-card .ba { border-radius: 0; }
/* The Before/After chips are sized for the big featured sliders; scale them
   down a little for the smaller gallery cards. */
.pair-card .ba-tag { font-size: 0.72rem; padding: 3px 8px 1px; }
.pair-card .ba-tag-before { left: 10px; }
.pair-card .ba-tag-after { right: 10px; }
.pair-card .ba-handle span { width: 34px; height: 34px; }
.pair-card figcaption {
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-on-light);
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.quote-card {
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote-card blockquote { font-size: 1.05rem; line-height: 1.6; }
.quote-card blockquote::before { content: "\201C"; }
.quote-card blockquote::after { content: "\201D"; }
.quote-card figcaption {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.quote-meta {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gray-on-light);
  margin-top: 3px;
}

/* ---------- Cards (why restore) ---------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.card {
  border: 1px solid var(--gray-4);
  border-radius: var(--radius);
  padding: 34px 28px;
}
.card p { color: var(--gray-2); font-size: 0.97rem; }
.card-icon { width: 46px; height: 46px; margin-bottom: 18px; color: var(--white); }
.card-icon svg { width: 100%; height: 100%; }

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
  counter-reset: step;
}
.steps li {
  border-top: 3px solid var(--black);
  padding-top: 20px;
}
.step-num {
  font-family: var(--heading);
  font-size: 2.6rem;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  color: var(--gray-2);
}
.steps h3 { font-size: 1.35rem; }
.steps p { font-size: 0.95rem; color: var(--gray-4); }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  margin-top: 24px;
}
.pricing-factors, .pricing-travel {
  border: 1px solid var(--gray-4);
  border-radius: var(--radius);
  padding: 38px 34px;
}
.pricing-travel { background: var(--white); color: var(--black); display: flex; flex-direction: column; gap: 14px; }
.pricing-travel .btn { margin-top: auto; background: var(--black); color: var(--white); border-color: var(--black); }
.pricing-travel .btn:hover { background: var(--gray-4); }

.check-list { list-style: none; margin-top: 18px; display: grid; gap: 16px; }
.check-list li { padding-left: 30px; position: relative; color: var(--gray-2); font-size: 0.98rem; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--white);
  border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--white); }
.pricing-note { margin-top: 22px; font-size: 0.9rem; color: var(--gray-on-dark); }

.travel-free {
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 14px 16px;
  border: 2px solid var(--black);
  border-radius: 8px;
}
.travel-free strong { font-family: var(--heading); font-size: 1.5rem; letter-spacing: 0.04em; margin-right: 6px; }
.travel-rate { font-size: 0.97rem; }

/* ---------- Service area ---------- */
.area-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
}
.area-zone, .area-list {
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.area-zone { background: var(--black); color: var(--white); border-color: var(--black); }
.area-zone p { font-size: 1.25rem; line-height: 1.5; margin-top: 16px; }
.area-badge {
  display: inline-block;
  font-family: var(--heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  background: var(--white);
  color: var(--black);
  padding: 6px 14px 4px;
  border-radius: 4px;
}
.area-badge-outline { background: transparent; border: 1.5px solid var(--black); }
.area-list ul {
  list-style: none;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  font-size: 0.97rem;
}
.area-list li { padding-left: 16px; position: relative; }
.area-list li::before { content: "·"; position: absolute; left: 0; font-weight: 700; }

/* ---------- About ---------- */
.about-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 56px;
  align-items: start;
}
.about-head h2 { margin-bottom: 0; }
.about-copy p { color: var(--gray-2); font-size: 1.05rem; }
.about-copy .trust-bar { margin-top: 28px; }

/* ---------- FAQ ---------- */
#faq details {
  border-bottom: 1px solid var(--gray-2);
}
#faq details:first-of-type { border-top: 1px solid var(--gray-2); margin-top: 28px; }
#faq summary {
  font-family: var(--heading);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  padding: 20px 44px 17px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  transition: transform 0.2s;
}
#faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
#faq details p { padding: 0 0 22px; color: var(--gray-4); max-width: 700px; }

/* ---------- Final CTA / footer ---------- */
.final-cta {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 100px 0;
  border-bottom: 1px solid var(--gray-4);
}
.final-cta p { color: var(--gray-2); font-size: 1.1rem; }

/* ---------- Quote form ---------- */
.quote-form-wrap { max-width: 720px; margin: 46px auto 0; text-align: left; }
.quote-form-or {
  text-align: center;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-on-dark);
  margin-bottom: 26px;
}
.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.quote-form label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quote-form .opt { font-weight: 500; text-transform: none; letter-spacing: 0.02em; color: var(--gray-on-dark); }
.quote-form input,
.quote-form textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--gray-4);
  background: #111;
  color: var(--white);
  width: 100%;
}
.quote-form input:hover:not(:disabled),
.quote-form textarea:hover:not(:disabled) { border-color: var(--gray-on-dark); }
/* Disabled is the default state until an endpoint is configured, so it has to
   read as unavailable rather than just look like an empty field. */
.quote-form input:disabled,
.quote-form textarea:disabled,
.quote-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.quote-form:has(input:disabled) label { opacity: 0.55; }
.quote-form textarea { resize: vertical; }
.quote-form input[type="file"] { padding: 10px 12px; cursor: pointer; }
.quote-form input[type="file"]::file-selector-button {
  font-family: var(--heading);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-right: 12px;
  padding: 7px 15px 5px;
  border: 1px solid var(--white);
  border-radius: 4px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.quote-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.quote-form-status { font-size: 0.92rem; color: var(--gray-2); text-align: left; }
.quote-form-status.is-error { color: #ff9b9b; }
/* Honeypot — hidden from people, still reachable by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 680px) {
  .quote-form { grid-template-columns: 1fr; }
}

.footer {
  background: var(--black);
  color: var(--gray-on-dark);
  padding: 56px 0 48px;
  text-align: center;
  font-size: 0.9rem;
}
.footer-logo { height: 110px; width: auto; margin: 0 auto 22px; filter: invert(1); }
.footer-copy { margin-top: 18px; font-size: 0.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner, .about-wrap { grid-template-columns: 1fr; gap: 40px; }
  .featured-grid, .cards-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .pricing-grid, .area-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .section { padding: 68px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  /* CSS-only open state — no JavaScript involved. */
  .nav-toggle-input:checked ~ .nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 24px 24px;
    background: var(--black);
    border-top: 1px solid var(--gray-4);
  }
  /* Hamburger morphs into an X when open. */
  .nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* Full-width CTAs are the mobile convention and a bigger tap target. */
  .cta-row .btn { width: 100%; }
  .nav-mobile a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--heading);
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    padding: 10px 0;
  }
  .nav-mobile .btn { margin-top: 10px; }
  .featured-grid, .cards-3, .steps { grid-template-columns: 1fr; }
  .area-list ul { grid-template-columns: 1fr 1fr; }
  .btn-lg { font-size: 1.15rem; padding: 14px 26px 11px; }
  .trust-bar { gap: 8px 22px; }
}

/* =========================================================
   INSTANT CHECK
   Upload a photo, get back which of the two jobs it needs.
   ========================================================= */

/* The whole section is an upload + fetch + poll, so without JS it is a control
   that does nothing. script.js drops .needs-js from <html> to reveal it —
   same mechanism as the gallery controls above. */
.needs-js .js-only { display: none; }

.check-inner { max-width: 720px; }

.check-form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 24px;
  border: 2px dashed var(--gray-2);
  border-radius: var(--radius);
  background: var(--gray-1);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.check-drop:hover,
.check-drop:focus-within { border-color: var(--black); background: #efefef; }
/* Applied while a file is dragged over. */
.check-drop.is-over { border-color: var(--black); background: #e8e8e8; }

.check-drop-icon { color: var(--gray-on-light); line-height: 0; }
.check-drop-main { font-weight: 600; font-size: 17px; }
.check-drop-sub { color: var(--gray-on-light); font-size: 14px; }

.check-preview {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
}
.check-preview img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}
.check-preview-side { min-width: 0; }
.check-filename {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.check-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px;
  color: var(--gray-on-light);
  text-decoration: underline;
  cursor: pointer;
}
.check-link:hover { color: var(--black); }

.check-submit { align-self: flex-start; }
.check-submit:disabled { opacity: .4; cursor: not-allowed; }

.check-privacy { font-size: 13px; color: var(--gray-on-light); }

/* ---- result panel ---- */

.check-result { margin-top: 28px; }

.check-panel {
  border: 1px solid var(--gray-2);
  border-left: 4px solid var(--black);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--white);
}
/* "Needs a human" reads differently from a job — amber rather than black, so
   the two are distinguishable at a glance and not only by their words. */
.check-panel.is-inspect { border-left-color: #b45309; }

.check-panel h3 {
  font-family: var(--heading);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .5px;
}
.check-panel-detail { margin-top: 8px; }

.check-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-steps li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
/* Numbered because these really are sequential — you cannot polish before you
   sand. The order is Frank's. */
.check-steps li::before {
  content: counter(step);
  font-family: var(--heading);
  font-size: 15px;
  color: var(--white);
  background: var(--black);
  border-radius: 50%;
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  transform: translateY(2px);
}

.check-warnings {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: #fdf6ec;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px;
}

.check-caveat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-2);
  font-size: 14px;
  color: var(--gray-on-light);
}

.check-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- working / error ---- */

.check-working {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
}
.check-spinner {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--gray-2);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: check-spin .8s linear infinite;
}
@keyframes check-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .check-spinner { animation-duration: 2.4s; }
}

.check-error {
  padding: 20px 24px;
  border: 1px solid var(--gray-2);
  border-left: 4px solid #b45309;
  border-radius: var(--radius);
}
.check-error p + p { margin-top: 10px; }

@media (max-width: 560px) {
  .check-drop { padding: 28px 16px; }
  .check-submit { align-self: stretch; text-align: center; }
  .check-panel { padding: 18px; }
  .check-panel h3 { font-size: 26px; }
}