/* ==========================================================================
   Contours Auto Body
   --------------------------------------------------------------------------
   The visual system is built on one idea: the reflection line. A body tech
   checks whether a panel is true by looking at how a straight light line
   reflects across it. Straight reflection, straight panel. Those curves are
   the brand device, and they carry the name.

   Order: tokens, reset, typography, layout, components, page sections,
   responsive. Component classes are single-class selectors so nothing here
   cancels itself out.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour. Pulled from the shop itself: the green off their sign, the dark of
     the booth with the lights off, the off-white of a panel in fresh primer,
     and the oxide red of the '49 GMC that sits in their gallery. */
  --ink:        #12211a;
  --ink-2:      #1a2f25;
  --ink-3:      #244435;
  --panel:      #f4f6f2;
  --white:      #ffffff;
  --green:      #146b3a;
  --green-deep: #0e4f2b;
  --green-lift: #46a96d;
  --oxide:      #a8412e;
  --steel:      #58685e;
  --steel-lt:   #8b9a91;

  --line:       #dfe5dd;
  --line-dark:  rgba(255 255 255 / 0.13);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Fluid scale */
  --t-hero:  clamp(2.75rem, 1.4rem + 6vw,   6rem);
  --t-h1:    clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --t-h2:    clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --t-h3:    clamp(1.15rem, 1rem + 0.7vw,   1.5rem);
  --t-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Space + shape */
  --shell:  1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --pad-section: clamp(4rem, 9vw, 7.5rem);
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --shadow:    0 1px 2px rgb(18 33 26 / 0.06), 0 8px 24px -12px rgb(18 33 26 / 0.18);
  --shadow-lg: 0 2px 4px rgb(18 33 26 / 0.05), 0 28px 60px -28px rgb(18 33 26 / 0.35);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; }
p  { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

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

.skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--green); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) var(--r);
  font-weight: 600; text-decoration: none;
  transition: transform 0.18s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* Honeypot, off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

/* Archivo is a variable font; widening it slightly gives headlines the stance
   of painted shop signage without needing a second family. */
.display, h1, h2, h3, .brand-name, .btn, .stat-value {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-variation-settings: 'wdth' 105, 'wght' 650; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--steel);
}

/* The work-order label. Mono because that is the vernacular of the estimate
   sheet, the paint code, and the repair order, not because it looks technical. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--green);
  flex: none;
}

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--pad-section); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section-dark {
  background: var(--ink);
  color: var(--panel);
}
.section-dark .lead { color: var(--steel-lt); }
.section-dark .eyebrow { color: var(--green-lift); }
.section-dark .eyebrow::before { background: var(--green-lift); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-top: 1.25rem; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   5. The reflection field (brand device)
   -------------------------------------------------------------------------- */
.reflect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.reflect path {
  fill: none;
  stroke: var(--green-lift);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.42;
}

/* Page-load sequence: the lines sweep in from the left the way a reflection
   travels across a panel as you walk past it. One orchestrated moment. */
.hero .reflect path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: sweep 1.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 85ms + 150ms);
}
@keyframes sweep { to { stroke-dashoffset: 0; } }

.footer-reflect path { opacity: 0.13; }

/* Quieter behind interior page headers, the body copy there is lighter than
   the hero headline and the lines start to compete with it. */
.page-head .reflect path { opacity: 0.2; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-variation-settings: 'wdth' 108, 'wght' 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--white); }

.section-dark .btn-ghost,
.hero .btn-ghost {
  border-color: var(--line-dark);
  color: var(--panel);
}
.section-dark .btn-ghost:hover,
.hero .btn-ghost:hover { border-color: var(--panel); background: rgb(255 255 255 / 0.07); }

.btn-lg { padding: 1.075rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* --------------------------------------------------------------------------
   7. Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(18 33 26 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--panel);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* Sized by height so the wordmark keeps its proportions whatever the file is,
   and given an explicit width:auto because the img carries width/height
   attributes to reserve its space before it loads. */
.brand-logo { height: 54px; width: auto; }

.brand-mark { color: var(--green-lift); width: 36px; height: 36px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-size: 1.375rem;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-lift);
  margin-top: 0.3rem;
}

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav > ul { display: flex; gap: 1.75rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--steel-lt);
  padding-block: 0.5rem;
  position: relative;
  transition: color 0.18s var(--ease);
}
.site-nav a:hover { color: var(--white); }
.site-nav a[aria-current] { color: var(--white); }
.site-nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--green-lift);
}

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--panel);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--green-lift); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 0.6rem;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle-bars i {
  display: block; height: 2px; background: var(--panel);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle[aria-expanded='true'] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--panel);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero::after {
  /* Warms the lower right so the reflection lines read as light on metal. */
  content: '';
  position: absolute;
  right: -10%; bottom: -40%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgb(70 169 109 / 0.16), transparent 65%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-title {
  font-size: var(--t-hero);
  font-variation-settings: 'wdth' 108, 'wght' 780;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.hero-title em {
  font-style: normal;
  color: var(--green-lift);
}
.hero-copy { margin-top: 1.75rem; max-width: 34rem; font-size: var(--t-lead); color: var(--steel-lt); }
.hero-actions { margin-top: 2.25rem; }

.hero-meta {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-meta-value {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.5rem;
}
.hero-meta-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-lt);
}

/* Open/closed pill, answers the first question a stressed caller has. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  margin-bottom: 1.75rem;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel-lt); }
.status-open .status-dot { background: var(--green-lift); box-shadow: 0 0 0 3px rgb(70 169 109 / 0.25); }

/* Hero card, the estimate starts here, because that is what the page is for. */
.hero-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.375rem; }
.hero-card-note {
  margin-top: 0.625rem;
  font-size: var(--t-small);
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.diff-card { display: flex; flex-direction: column; gap: 0.875rem; }
.diff-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: rgb(20 107 58 / 0.09);
  color: var(--green);
}
.diff-icon .icon { width: 22px; height: 22px; }
/* Balanced wrapping fights these short headings in a narrow 4-up column. */
.diff-card h3 { margin-top: 0.25rem; font-size: 1.125rem; text-wrap: pretty; }
.diff-card p { color: var(--steel); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   10. Process, a real sequence, so it earns its numbers
   -------------------------------------------------------------------------- */
.process { display: grid; gap: 0; counter-reset: step; }
.process-step {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.process-step:last-child { border-bottom: 1px solid var(--line-dark); }
.process-num {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--green-lift);
  padding-top: 0.3rem;
}
.process-step h3 { margin-bottom: 0.5rem; }
.process-step p { color: var(--steel-lt); max-width: 46rem; }

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */
.svc-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.svc-card:hover {
  border-color: var(--green-lift);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.svc-card .icon { width: 26px; height: 26px; color: var(--green); }
.svc-card h3 { font-size: 1.125rem; }
.svc-card p { font-size: 0.9375rem; color: var(--steel); }

.svc-list { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.svc-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--steel);
}
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.66em;
  width: 8px; height: 1.5px;
  background: var(--green-lift);
}

/* --------------------------------------------------------------------------
   12. Proof / reviews
   -------------------------------------------------------------------------- */
.rating-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.stars { display: inline-flex; gap: 2px; color: var(--green-lift); }
.stars .icon { width: 18px; height: 18px; }
.rating-value {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.5rem;
}
.rating-note { font-size: var(--t-small); color: var(--steel); }
.stars { color: var(--green); }

/* Light by default, these appear on both light and dark sections, and the
   light one is the home page, where they matter most. */
.quote-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.quote-card .icon { width: 28px; height: 28px; color: var(--green); opacity: 0.7; }
.quote-card blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote-card figcaption {
  margin-top: auto; /* line the attributions up across a row of uneven quotes */
  padding-top: 0.25rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

.section-dark .rating-note { color: var(--steel-lt); }
.section-dark .stars { color: var(--green-lift); }
.section-dark .quote-card {
  background: var(--ink-2);
  border-color: var(--line-dark);
}
.section-dark .quote-card .icon { color: var(--green-lift); opacity: 0.6; }
.section-dark .quote-card blockquote { color: var(--panel); }
.section-dark .quote-card figcaption { color: var(--steel-lt); }

/* --------------------------------------------------------------------------
   13. Gallery
   -------------------------------------------------------------------------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.filter-btn {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink); /* set explicitly, these sit on dark sections too */
  font-family: var(--mono);
  font-size: var(--t-small);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.filter-btn:hover { border-color: var(--green); }
/* Green rather than ink, so the pressed state stays visible on both the light
   and dark sections this control appears in. */
.filter-btn[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--ink-2);
  border-radius: var(--r);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 0.875rem;
  background: linear-gradient(transparent, rgb(18 33 26 / 0.88));
  color: var(--panel);
  font-size: var(--t-small);
  text-align: left;
}
.gallery-item[hidden] { display: none; }

/* Lightbox */
/* Only lay the dialog out once it is open, otherwise this display value
   overrides the browser's display:none for a closed <dialog>. */
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: var(--gutter);
  background: rgb(18 33 26 / 0.94);
  border: 0;
}
.lightbox::backdrop { background: rgb(18 33 26 / 0.94); }
.lightbox img { max-height: 82vh; width: auto; border-radius: var(--r); }
.lightbox-cap {
  margin-top: 1rem;
  color: var(--panel);
  text-align: center;
  font-size: var(--t-small);
}
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--panel);
  font-size: 1.25rem;
  cursor: pointer;
}
.lightbox-close:hover { background: rgb(255 255 255 / 0.1); }

/* Before / after, the most characteristic interaction in this trade */
.compare {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  touch-action: none;
  user-select: none;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.compare-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--panel);
  cursor: ew-resize;
}
.compare-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 12px rgb(18 33 26 / 0.4);
}
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.compare-range:focus-visible + .compare-handle::after { outline: 3px solid var(--green-lift); }
.compare-tag {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-sm);
  background: rgb(18 33 26 / 0.78);
  color: var(--panel);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.compare-tag-before { left: 1rem; }
.compare-tag-after  { right: 1rem; color: var(--green-lift); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
/* A form page: the form itself, plus an aside that repeats the phone number,
   hours, and what to bring. Kept as a class rather than an inline style so the
   responsive rules can actually reach it. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.form-aside { position: sticky; top: 96px; }

.form-grid { display: grid; gap: 1.125rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.field-opt { color: var(--steel-lt); text-transform: none; letter-spacing: 0; }

.input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.input:hover { border-color: var(--steel-lt); }
.input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(20 107 58 / 0.14);
}
textarea.input { min-height: 8rem; resize: vertical; line-height: 1.6; }
select.input { cursor: pointer; }

.field-error .input { border-color: var(--oxide); }
.error {
  font-size: var(--t-small);
  color: var(--oxide);
  font-weight: 500;
}
.hint { font-size: var(--t-small); color: var(--steel); }

.radio-set { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.radio-chip { position: relative; }
.radio-chip input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.radio-chip span {
  display: block;
  padding: 0.7rem 0.9rem;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  font-size: 0.9375rem;
  transition: all 0.16s var(--ease);
}
.radio-chip input:checked + span {
  border-color: var(--green);
  background: rgb(20 107 58 / 0.07);
  font-weight: 600;
}
.radio-chip input:focus-visible + span { outline: 3px solid var(--green-lift); outline-offset: 2px; }

.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--green); }

/* File drop */
/* The drop zone is itself a <label> inside a .field, so it has to opt out of
   the uppercase mono label treatment above. The selector has to out-specify
   `.field > label` (0-1-1), so plain `.drop` is not enough. */
.field > label.drop,
.drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  text-align: center;
  background: var(--white);
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
  cursor: pointer;
  display: block;
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
.drop:hover, .drop-over { border-color: var(--green); background: rgb(20 107 58 / 0.04); }
.drop .icon { width: 28px; height: 28px; color: var(--green); margin: 0 auto 0.6rem; }
.drop-title { display: block; font-weight: 600; font-size: 0.9375rem; }
.drop-hint { display: block; font-size: var(--t-small); color: var(--steel); margin-top: 0.2rem; }
.drop input[type='file'] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
}
.drop-list { display: grid; gap: 0.4rem; margin-top: 0.75rem; text-align: left; }
.drop-list li {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--steel);
  display: flex; justify-content: space-between; gap: 1rem;
}

/* Alerts */
.alert {
  padding: 1rem 1.125rem;
  border-radius: var(--r);
  border-left: 3px solid;
  font-size: 0.9375rem;
}
.alert-error   { background: rgb(168 65 46 / 0.07); border-color: var(--oxide); color: #7d2f21; }
.alert-success { background: rgb(20 107 58 / 0.08); border-color: var(--green); color: var(--green-deep); }
.alert ul { margin-top: 0.5rem; display: grid; gap: 0.25rem; }
.alert li { padding-left: 1rem; position: relative; }
.alert li::before { content: 'Not set'; position: absolute; left: 0; }

/* Slot picker */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot span {
  display: block;
  padding: 0.65rem 0.5rem;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--mono);
  font-size: 0.875rem;
  transition: all 0.16s var(--ease);
}
.slot input:checked + span {
  background: var(--green); border-color: var(--green); color: var(--white);
}
.slot input:disabled + span { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.slot input:focus-visible + span { outline: 3px solid var(--green-lift); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   15. Page furniture
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--ink);
  color: var(--panel);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-head-inner { position: relative; z-index: 1; max-width: 44rem; }
.page-head .lead { color: var(--steel-lt); margin-top: 1.25rem; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.figure-note {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   15b. "Your car, your call"
   --------------------------------------------------------------------------
   The one place on the page that raises its voice. A single heavy statement,
   set wider and larger than anything around it, with the reasoning underneath
   in a normal register so it argues rather than shouts twice.
   -------------------------------------------------------------------------- */
.choice { background: var(--white); border-block: 1px solid var(--line); }
.choice-inner { max-width: 54rem; }

.choice-head {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  font-variation-settings: 'wdth' 106, 'wght' 760;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

.choice-lead { margin-top: 1.5rem; max-width: 42rem; }

.choice-actions { margin-top: 2.25rem; }

@media (max-width: 700px) {
  /* The line break in the headline is a desktop typesetting choice. */
  .choice-head br { display: none; }
}

.cta-band {
  background: var(--green-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-band h2 { max-width: 24ch; }
.cta-band p { color: rgb(255 255 255 / 0.8); margin-top: 0.75rem; max-width: 44ch; }
.cta-band .reflect path { stroke: var(--white); opacity: 0.16; }
.cta-band .btn-primary { background: var(--white); border-color: var(--white); color: var(--green-deep); }
.cta-band .btn-primary:hover { background: var(--panel); border-color: var(--panel); }
.cta-band .btn-ghost { border-color: rgb(255 255 255 / 0.35); color: var(--white); }
.cta-band .btn-ghost:hover { border-color: var(--white); background: rgb(255 255 255 / 0.1); }

.map-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  filter: grayscale(0.35) contrast(1.05);
}

.info-list { display: grid; gap: 1.5rem; }
.info-item { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; }
.info-item .icon { width: 22px; height: 22px; color: var(--green); margin-top: 0.2rem; }
.info-item h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.info-item p, .info-item address { color: var(--steel); font-style: normal; font-size: 0.9375rem; }
.info-item a { color: var(--green); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--steel-lt);
  overflow: hidden;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* The hours column carries the widest single line in the footer ("9 AM to
     5:30 PM" against a day label), so it gets a slightly larger share than the
     two columns either side of it. Without that it is the first to wrap, and it
     wraps at the width where the four columns are tightest. */
  grid-template-columns: 1.55fr 0.95fr 1.2fr 0.95fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
.footer-logo { height: 84px; width: auto; margin-left: -0.35rem; }
.footer-brand .brand-name { font-size: 1.75rem; color: var(--panel); display: block; }
.footer-brand .brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-lift);
  margin-top: 0.35rem;
}
.footer-blurb { margin-top: 1.25rem; font-size: 0.9375rem; max-width: 32ch; }

.footer-col h2 {
  font-size: 0.75rem;
  font-family: var(--mono);
  font-variation-settings: normal;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel);
  margin-bottom: 1rem;
}
.footer-col address { font-style: normal; font-size: 0.9375rem; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--green-lift); }
.footer-phone {
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--panel);
  display: inline-block;
  margin-top: 0.75rem;
}

/* The day label takes what it needs; the time takes the rest and is allowed to
   shrink rather than push the row wider than its column. */
.hours {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 0.85rem;
  font-size: 0.9375rem;
}
.hours dt { font-family: var(--mono); color: var(--panel); white-space: nowrap; }
.hours dd { text-align: right; text-wrap: pretty; }

.footer-links { display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.footer-social { display: flex; gap: 1rem; margin-top: 1.25rem; font-size: var(--t-small); }
.footer-social a { text-decoration: underline; text-underline-offset: 3px; }

.footer-base {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-dark);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--t-small);
}
.footer-note { color: var(--steel); }

.footer-credit { color: var(--steel); }
.footer-credit::before { content: '·'; margin-inline: 0.5rem; opacity: 0.6; }
.footer-credit a { color: var(--steel-lt); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--green-lift); }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }

  /* Aside drops below the form and stops sticking, at this width it is a
     footnote, not a sidebar. */
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; }

  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav > ul a { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--line-dark); }
  .site-nav a[aria-current]::after { display: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: 1.25rem; }
  .nav-phone { justify-content: center; }
  .nav-actions .btn { width: 100%; }
}

@media (max-width: 620px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 1fr; gap: 0.5rem; }
  .hours dd { text-align: left; }
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   18. Motion + print
   -------------------------------------------------------------------------- */
@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;
  }
  .hero .reflect path { stroke-dashoffset: 0; }
}

@media print {
  .masthead, .footer, .cta-band, .nav-toggle, .skip { display: none; }
  body { background: #fff; }
}