/* ==========================================================================
   VectorReady — design tokens
   ========================================================================== */
:root {
  --paper:   #F2F0EB;   /* background (panels)          */
  --ground:  #EBE8E2;   /* slightly deeper page ground  */
  --ink:     #1B2430;   /* primary text and shapes      */
  --accent:  #FF5A1F;   /* orange                       */
  --success: #2C6A4C;   /* green                        */
  --rule:    #C7C2B8;   /* borders and dashed dividers  */
  --muted:   #6E6A62;   /* secondary text               */

  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gutter: 20px;
  --header-h: 68px;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  /* Dynamic content (e.g. the quote form's vehicle-photos field toggling
     visible) resizes a panel mid-page. Without this, the browser's scroll
     anchoring silently nudges scrollY to compensate, which fires a real
     scroll event and makes the parallax background layers (.why-bg,
     .how-bg, .quote-bg in assets/main.js) visibly jump. Nothing on this
     site relies on scroll anchoring, so it's off everywhere. */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Must outrank the display values set on .file-chosen and .field-error below. */
[hidden] { display: none !important; }
a { color: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-family: var(--font-mono); font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Shared pieces: eyebrow, panels, registration marks, buttons
   ========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.panel { position: relative; background: var(--paper); border: 1px solid var(--rule); }

.reg { position: absolute; width: 16px; height: 16px; color: var(--rule); pointer-events: none; }
.reg--tl { top: 14px; left: 14px; }
.reg--tr { top: 14px; right: 14px; }
.reg--bl { bottom: 14px; left: 14px; }
.reg--br { bottom: 14px; right: 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; line-height: 1;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  padding: 13px 22px; border: 1px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: #E64A12; }
.btn-solid:disabled { background: var(--rule); color: var(--muted); cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #FAF9F6;
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--header-h);
}

.logo { display: flex; align-items: center; }
.logo img { display: block; height: 42px; width: auto; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--rule); cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--ink); }

.primary-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #FAF9F6; border-bottom: 1px solid var(--rule);
  padding: 8px var(--gutter) 24px;
}
.primary-nav.is-open { display: block; }
.primary-nav ul { display: flex; flex-direction: column; }
.primary-nav a {
  display: block; padding: 14px 0; font-size: 17px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.primary-nav a.is-current { color: var(--accent); }
/* Same sharp-cornered .btn-solid as the quote form's submit button, just
   bigger padding, rounded corners kept eating into the padding and making
   the text read cramped no matter how much padding was added. */
.nav-cta { margin-top: 20px; padding: 16px 30px; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex; align-items: center; gap: 40px;
    position: static; padding: 0; border: 0; background: none;
  }
  .primary-nav ul { flex-direction: row; gap: 36px; }
  .primary-nav ul a {
    padding: 4px 0; font-size: 16px; font-weight: 600; border: 0;
    border-bottom: 2px solid transparent;
  }
  .primary-nav ul a:hover { border-bottom-color: var(--rule); }
  .primary-nav ul a.is-current { color: var(--ink); border-bottom-color: var(--accent); }
  .nav-cta { margin-top: 0; padding: 14px 28px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { border-left: 0; border-right: 0; border-top: 0; }
.hero-inner { padding-block: 56px 64px; }

.hero-copy h1 {
  font-size: clamp(38px, 9vw, 58px);
  max-width: 14ch;
  margin-bottom: 24px;
}
.lede { font-size: 18px; color: var(--muted); max-width: 52ch; }
.searched-as {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: var(--muted); max-width: 52ch; margin-top: 16px;
}

.hero-figure { margin: 56px 0 0; }
.diagram { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; }
.diagram-anchors rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }

/* Ambient loop: right half sits blurry, then the outline actually draws
   itself (stroke-dashoffset, not a fade), fills in solid, holds on the
   current static look, then unfills and undraws before repeating. The left
   half never moves, it's the constant "before". Three independently timed
   pieces in index.html: .diagram-raster-right (mirrored blurry pixels),
   .diagram-vector (the path doing the drawing), .diagram-annotate (bezier
   handle + anchors, which pop in once the line is fully drawn). */
.diagram-raster-right { animation: diagram-pixelate 7s ease-in-out infinite; }
.diagram-vector { animation: diagram-draw 7s ease-in-out infinite; }
.diagram-annotate { animation: diagram-annotate 7s ease-in-out infinite; }

@keyframes diagram-pixelate {
  0%, 12% { opacity: 1; }
  25%     { opacity: 1; }
  42%     { opacity: 0; }
  68%     { opacity: 0; }
  100%    { opacity: 1; }
}

/* stroke-dashoffset 867.82 -> 0 traces the outline; fill-opacity then paints
   it solid once the line is complete, matching the page's static look while
   the line is still visible tracing the same colour underneath. */
@keyframes diagram-draw {
  0%, 12%  { stroke-dashoffset: 867.82; fill-opacity: 0; }
  32%      { stroke-dashoffset: 0;      fill-opacity: 0; }
  42%, 68% { stroke-dashoffset: 0;      fill-opacity: 1; }
  78%      { stroke-dashoffset: 0;      fill-opacity: 0; }
  100%     { stroke-dashoffset: 867.82; fill-opacity: 0; }
}

@keyframes diagram-annotate {
  0%, 12%, 40% { opacity: 0; }
  46%, 68%     { opacity: 1; }
  74%, 100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .diagram-raster-right { animation: none; opacity: 0; }
  .diagram-vector { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .diagram-annotate { animation: none; opacity: 1; }
}
.diagram-caption {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--muted); max-width: 46ch; margin: 24px auto 0; text-align: center;
}

@media (min-width: 900px) {
  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px; align-items: center; padding-block: 84px 92px;
  }
  .hero-figure { margin: 0; }
  .diagram-caption { text-align: left; margin-inline: 0; }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { border-bottom: 1px solid var(--rule); background: var(--paper); }
.gallery .wrap { padding-block: 40px 56px; }
.gallery-grid { display: grid; gap: 40px; }

.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--rule); margin-bottom: 16px;
}

.gallery-meta {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--rule);
}
.gallery-meta .num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.gallery-title { font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; }
a.gallery-title:hover { color: var(--accent); text-decoration: underline; }
.gallery-caption { font-size: 16px; color: var(--muted); margin-top: 6px; max-width: 34ch; }

@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .gallery .wrap { padding-block: 48px 64px; }
}

/* ==========================================================================
   Why VectorReady
   ========================================================================== */
/* The photo lives in its own layer (.why-bg), oversized and nudged up/down
   by assets/main.js's parallaxBackgrounds() as the page scrolls, rather
   than sitting still like a flat background-image would. The dashed grid
   and directional dark-to-clear tint sit in .why-tint, a second layer
   above the photo so it stays legible without moving itself. overflow:
   hidden on .why clips the oversized photo layer to the section edge. */
.why {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(242,240,235,.16);
  background-color: var(--ink);
  color: var(--paper);
}
.why-bg {
  position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; z-index: 0;
  background-image: url('/assets/why-background.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform;
}
.why-tint {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(to right, rgba(242,240,235,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,240,235,.08) 1px, transparent 1px),
    linear-gradient(120deg,
      rgba(15,20,27,.94) 0%,
      rgba(15,20,27,.88) 38%,
      rgba(15,20,27,.35) 62%,
      rgba(15,20,27,0) 82%);
  background-size: 32px 32px, 32px 32px, cover;
  background-repeat: repeat, repeat, no-repeat;
}
.why .eyebrow { color: rgba(242,240,235,.55); }
.why .reg { color: rgba(242,240,235,.35); }
.why-inner { position: relative; z-index: 2; padding-block: 56px 64px; }
.why-head h2 { font-size: clamp(34px, 7.5vw, 48px); max-width: 9ch; color: var(--paper); }
.accent-text { color: var(--accent); }
.why-intro { font-size: 16px; line-height: 1.6; color: rgba(242,240,235,.72); max-width: 34ch; margin-top: 20px; }
.why-list { display: grid; gap: 20px; margin-top: 44px; }
/* Each point gets its own small glass chip (same blurred-panel language as
   .quote-panel) instead of relying on the section's directional tint for
   contrast. The tint fades to nothing on the right so the photo shows
   through clearly there, exactly where a plain white icon/label would
   wash out against it, so legibility has to travel with the item itself. */
.why-item {
  background: rgba(15,20,27,.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(242,240,235,.14);
  padding: 18px 20px 20px;
}
.why-item p { font-size: 18px; font-weight: 500; line-height: 1.4; max-width: 22ch; margin-top: 16px; color: var(--paper); }

.icon {
  width: 40px; height: 40px; display: block;
  fill: none; stroke: var(--paper); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 760px) {
  .why-inner {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
    gap: 48px; align-items: start; padding-block: 76px 84px;
  }
  /* Quadrants: a bold 2x2 grid instead of a cramped 4-across row, so each
     point reads as its own block sitting clearly over the photo. */
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 28px 24px; margin-top: 0;
  }
  .why-item { padding: 26px 28px 30px; }
  .icon { width: 52px; height: 52px; }
  .why-item p { font-size: 20px; max-width: 24ch; margin-top: 20px; }
}

/* ==========================================================================
   Recent work: before/after examples + compare modal
   ========================================================================== */
.examples { border-bottom: 1px solid var(--rule); background: var(--paper); }
.examples .wrap { padding-block: 56px 64px; }
.examples h2 { font-size: clamp(30px, 6.5vw, 38px); margin-top: 4px; }

.examples-grid { display: grid; gap: 28px; margin-top: 40px; }

.example-trigger {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; color: inherit; cursor: pointer;
}
.example-thumb {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--rule);
}
.example-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.example-trigger:hover .example-thumb img,
.example-trigger:focus-visible .example-thumb img { transform: scale(1.035); }
.example-thumb::after {
  content: "Drag to compare";
  position: absolute; right: 12px; bottom: 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 6px 10px;
}
.example-meta {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--rule);
}
.example-meta .num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.example-title { font-weight: 600; font-size: 18px; }

@media (min-width: 760px) {
  .examples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .examples .wrap { padding-block: 72px 80px; }
}

/* Compare modal */
.compare-modal { position: fixed; inset: 0; z-index: 300; }
.compare-modal-backdrop { position: absolute; inset: 0; background: rgba(15,20,27,.78); }
.compare-modal-panel {
  position: relative; z-index: 1;
  width: min(92vw, 900px); margin: 5vh auto; max-height: 90vh; overflow-y: auto;
  padding: 54px 20px 24px;
}
.compare-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink); cursor: pointer;
}
.compare-close:hover { border-color: var(--ink); }
.compare-modal-title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--muted); text-align: center; margin-bottom: 16px;
}

.compare-slider {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--rule); overflow: hidden; touch-action: pan-y;
}
.compare-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; user-select: none; -webkit-user-drag: none;
}
.compare-img-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--reveal);
  width: 2px; background: var(--paper);
  transform: translateX(-1px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.compare-handle svg {
  /* content-box so the global border-box reset doesn't let this padding
     eat the SVG's own 16x16 content area. flex-shrink:0 so flexbox doesn't
     also crush that content area to fit the 2px-wide handle line it's
     centered on — the circle is meant to overflow that line, not fit it. */
  box-sizing: content-box;
  flex-shrink: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 10px;
}
/* Invisible but real <input type="range">, stretched over the whole
   slider, driving the visible compare via JS (see initCompareModal). The
   native thumb is left at a normal small size on purpose: sizing it to
   100% of the track (an earlier version of this did) leaves the browser
   no room to compute a position, and every drag collapses to 0. Clicking
   or dragging anywhere on the invisible track still works with a
   normal-sized thumb, that's standard range-input behaviour, not
   something this needs to recreate. */
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.compare-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px;
}
.compare-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; background: transparent; }
.compare-range::-moz-range-track { background: transparent; }

.compare-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); margin-top: 14px;
}

/* ==========================================================================
   How it works
   ========================================================================== */
/* Rich black with a photo underneath rather than no image at all, same
   .how-bg / .how-tint / parallax pattern as Why and Send the file. Kept
   deliberately darker than those two, most of the section still reads as
   flat black so the big numerals stay the graphic feature, the van is
   just a faint texture behind them. */
.how {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(242,240,235,.16);
  background-color: #0A0B0D;
  color: var(--paper);
}
.how-bg {
  position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; z-index: 0;
  background-image: url('/assets/how-background.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform;
}
.how-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 900px 520px at 12% 0%, rgba(255,90,31,.14), transparent 62%),
    rgba(10,11,13,.88);
}
.how > .wrap { position: relative; z-index: 2; }
.how .wrap { padding-block: 56px 64px; }
.how h2 { font-size: clamp(30px, 6.5vw, 38px); margin-bottom: 40px; color: var(--paper); }

.steps { display: grid; gap: 0; }
.step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 28px 0; border-top: 1px dashed rgba(242,240,235,.25);
}
.step:last-child { border-bottom: 1px dashed rgba(242,240,235,.25); }
.step-num {
  flex: 0 0 auto; min-width: 0.9em;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(48px, 13vw, 80px); line-height: 1;
  color: var(--accent);
}
.step-body { flex: 1 1 auto; padding-top: 8px; }
.step h3 { font-size: 20px; margin-bottom: 6px; color: var(--paper); }
.step p { font-size: 15px; color: rgba(242,240,235,.72); max-width: 26ch; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .step { gap: 14px; padding: 32px 0 0; border-bottom: 0 !important; }
  .step-num { font-size: clamp(72px, 7vw, 100px); }
  .step-body { padding-top: 14px; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { border-bottom: 1px solid var(--rule); background: var(--paper); }
.pricing .wrap { padding-block: 56px 64px; }
.pricing h2 { font-size: clamp(30px, 6.5vw, 38px); }
.section-sub { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 46ch; }
.pricing .section-sub { max-width: 80ch; }

.tiers { display: grid; gap: 20px; margin-top: 40px; }
.tier { padding: 34px 28px 28px; display: flex; flex-direction: column; }
.tier-name { font-size: 22px; }
.tier-desc { font-size: 16px; color: var(--muted); margin-top: 10px; max-width: 30ch; }
.tier-includes { flex-grow: 1; margin-top: 18px; }
.tier-includes li {
  font-size: 14px; color: var(--muted); padding-left: 18px; position: relative;
  margin-top: 8px;
}
.tier-includes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--accent);
}
.tier-price { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin-top: 28px; }
.tier-from {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.tier-link {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  text-decoration: none; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.tier-link:hover { text-decoration: underline; }

.pricing-note {
  margin-top: 36px; padding-top: 28px; border-top: 1px dashed var(--rule);
  font-size: 16px; color: var(--muted); max-width: 60ch;
}
.pricing-note a { color: var(--accent); text-decoration: none; font-weight: 500; }
.pricing-note a:hover { text-decoration: underline; }

@media (min-width: 760px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pricing .wrap { padding-block: 72px 80px; }
}

/* ==========================================================================
   Upload form
   ========================================================================== */
/* Same ambient treatment as Why/How, green-leaning this time (trust, handing
   a file over). The form itself lives in .quote-panel, which overrides
   .panel's solid --paper background with a dark, blurred glass panel
   instead, so the photo shows through it rather than sitting behind a
   fully opaque card. Like .why, the photo is its own oversized layer
   (.quote-bg) nudged by assets/main.js's parallaxBackgrounds() as the
   page scrolls, with the dark wash in a separate static .quote-tint
   layer above it so the tint doesn't move and expose the photo's edge. */
.quote {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(242,240,235,.16);
  background-color: var(--ink);
  color: var(--paper);
}
.quote-bg {
  position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; z-index: 0;
  background-image: url('/assets/quote-background.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform;
}
.quote-tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(15,20,27,.80), rgba(15,20,27,.86));
}
.quote > .wrap { position: relative; z-index: 2; }
.quote .wrap { padding-block: 56px 64px; }
.quote h2 { font-size: clamp(30px, 6.5vw, 38px); color: var(--paper); }
.quote .section-sub { color: rgba(242,240,235,.72); }

/* Glass panel: dark and translucent so the background photo shows
   through, instead of the solid --paper card .panel gives everything
   else. Every child that assumed a light card (labels, inputs, the
   dropzone) gets a light-on-dark variant scoped to .quote-panel. */
.quote-panel {
  margin-top: 36px; padding: 40px 22px 34px;
  background: rgba(15,20,27,.6);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-color: rgba(242,240,235,.14);
  color: var(--paper);
}
.quote-panel .reg { color: rgba(242,240,235,.3); }

.quote-panel .dropzone { border-color: rgba(242,240,235,.32); background: rgba(255,255,255,.05); }
.quote-panel .dropzone.is-dragover { background: rgba(255,90,31,.12); }
.quote-panel .dropzone-icon { stroke: rgba(242,240,235,.85); }
.quote-panel .dropzone-label { color: var(--paper); }
.quote-panel .dropzone-formats { color: rgba(242,240,235,.55); }

.quote-panel .file-chosen { border-color: rgba(242,240,235,.16); background: rgba(44,106,76,.24); }
.quote-panel .file-chosen-name { color: var(--paper); }
.quote-panel .file-remove { color: rgba(242,240,235,.55); }
.quote-panel .file-remove:hover { color: var(--accent); }

.quote-panel .field-error { color: #FF8266; }

.quote-panel .tabs-field legend { color: rgba(242,240,235,.55); }
.quote-panel .tabs { border-color: rgba(242,240,235,.18); }
.quote-panel .tab span { border-color: rgba(242,240,235,.18); color: var(--paper); }
.quote-panel .tab span:hover { background: rgba(255,255,255,.06); }
.quote-panel .tab input:checked + span { background: var(--accent); color: #fff; }

.quote-panel .field label { color: rgba(242,240,235,.55); }
.quote-panel .field input {
  color: var(--paper); background: rgba(255,255,255,.07); border-color: rgba(242,240,235,.2);
}
.quote-panel .field input::placeholder { color: rgba(242,240,235,.35); }
.quote-panel .field input[aria-invalid="true"] { border-color: #FF8266; }

.quote-panel .submit-note { color: rgba(242,240,235,.55); }
.quote-panel .form-status.is-error { color: #FF8266; }
.quote-panel .form-status.is-success { color: #6FCB9F; }

@media (min-width: 760px) {
  .quote-panel { padding: 52px 44px 44px; }
  .quote .wrap { padding-block: 72px 80px; }
}

.dropzone {
  border: 2px dashed var(--rule); background: rgba(255,255,255,.35);
  padding: 40px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); }
.dropzone.is-dragover { border-color: var(--accent); background: rgba(255,90,31,.06); }
.dropzone-icon {
  width: 40px; height: 40px; margin: 0 auto 18px;
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dropzone-label { font-size: 17px; font-weight: 500; }
.dropzone-browse { color: var(--accent); text-decoration: underline; }
.dropzone-formats {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); margin-top: 12px;
}

.file-chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--rule); border-top: 0; padding: 14px 18px;
  background: rgba(44,106,76,.07);
}
.file-chosen-name { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.file-remove {
  background: none; border: 0; cursor: pointer; padding: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.file-remove:hover { color: var(--accent); }

.field-error {
  display: block; font-family: var(--font-mono); font-size: 11px;
  color: #C0341A; margin-top: 8px;
}

.tabs-field { border: 0; padding: 0; margin: 34px 0 0; }
.tabs-field legend {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 14px;
}
.tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); }
.tab { flex: 1 1 50%; position: relative; }
.tab input { position: absolute; opacity: 0; pointer-events: none; }
.tab span {
  display: block; text-align: center; padding: 14px 10px; font-size: 15px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tab:nth-child(2n) span { border-right: 0; }
.tab:nth-child(n+3) span { border-bottom: 0; }
.tab span:hover { background: rgba(27,36,48,.05); }
.tab input:checked + span { background: var(--ink); color: var(--paper); }
.tab input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (min-width: 620px) {
  .tab { flex: 1 1 0; }
  .tab span { border-bottom: 0; }
  .tab:nth-child(2n) span { border-right: 1px solid var(--rule); }
  .tab:last-child span { border-right: 0; }
}

.fields { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 620px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.field label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.field-optional { text-transform: none; letter-spacing: 0; }
.field input {
  width: 100%; font-family: var(--font-sans); font-size: 17px; color: var(--ink);
  background: rgba(255,255,255,.5); border: 1px solid var(--rule); border-radius: 0;
  padding: 13px 14px; min-height: 48px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: #C0341A; }

.terms-field { margin-top: 26px; }
.terms-label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--muted);
}
.terms-label input[type="checkbox"] {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent);
}
.terms-label a { color: var(--accent); text-decoration: underline; }
.quote-panel .terms-label { color: rgba(242,240,235,.7); }

.vehicle-photos-field { margin-top: 26px; }
.vehicle-photos-hint {
  font-size: 13px; color: var(--muted); margin-top: -4px; margin-bottom: 12px; max-width: 48ch;
}
.dropzone--compact { padding: 22px 16px; }
.dropzone--compact .dropzone-label { font-size: 15px; }

.vehicle-photos-list { margin-top: 10px; display: grid; gap: 8px; }
.vehicle-photo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--rule); border-top: 0; padding: 10px 16px;
  background: rgba(44,106,76,.07); margin-top: -1px;
}
.vehicle-photo-item:first-child { border-top: 1px solid var(--rule); margin-top: 0; }
.vehicle-photo-name { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.vehicle-photo-remove {
  background: none; border: 0; cursor: pointer; padding: 4px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.vehicle-photo-remove:hover { color: var(--accent); }

.quote-panel .vehicle-photos-hint { color: rgba(242,240,235,.55); }
.quote-panel .vehicle-photo-item { border-color: rgba(242,240,235,.16); background: rgba(44,106,76,.24); }
.quote-panel .vehicle-photo-name { color: var(--paper); }
.quote-panel .vehicle-photo-remove { color: rgba(242,240,235,.55); }
.quote-panel .vehicle-photo-remove:hover { color: var(--accent); }

.submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.submit-row .btn { min-height: 50px; }
.submit-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }

.form-status { font-size: 15px; margin-top: 20px; }
.form-status.is-error { color: #C0341A; }
.form-status.is-success { color: var(--success); font-weight: 500; }

.trust-line {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(242,240,235,.6); margin-top: 20px; text-align: center;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--paper); }
.faq .wrap { padding-block: 56px 72px; }
.faq h2 { font-size: clamp(30px, 6.5vw, 38px); margin-bottom: 32px; }
.faq-list { max-width: 800px; }

.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 19px; font-weight: 600; line-height: 1.35; flex: 1; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 18px;
  line-height: 1; color: var(--accent); flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-answer { padding: 0 0 24px; max-width: 68ch; }
.faq-answer p { font-size: 16px; color: var(--muted); }

@media (min-width: 760px) { .faq .wrap { padding-block: 72px 88px; } }

/* ==========================================================================
   Legal (Terms & Conditions)
   ========================================================================== */
.legal { background: var(--paper); }
.legal .wrap { max-width: 760px; padding-block: 48px 72px; }
.legal h1 { font-size: clamp(32px, 7vw, 44px); }
.legal-updated {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  margin-top: 10px; margin-bottom: 36px;
}
.legal-intro { font-size: 17px; color: var(--muted); max-width: 68ch; }
.legal h2 { font-size: 19px; margin-top: 36px; margin-bottom: 10px; }
.legal p { font-size: 16px; line-height: 1.7; max-width: 68ch; }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--rule); background: var(--ground); }
.footer-inner {
  display: flex; flex-direction: column; gap: 10px;
  padding-block: 32px 40px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.footer-contact { text-transform: none; letter-spacing: .04em; }
.footer-contact a { color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: var(--accent); }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--muted); text-decoration: none; text-transform: none; letter-spacing: .04em; }
.footer-links a:hover { color: var(--accent); }

@media (min-width: 620px) {
  .footer-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}