/* ============================================================
   NU-Image Tint & Sound — demo build
   Register: the settled shop that's been on that corner since 2002.
   Palette derived from the client's own badge: near-black field,
   chrome/silver wordmark, single red rule. Not Averionyx's.
   ============================================================ */

/* Variable on BOTH weight and width. The width axis is the point: display
   type is set wide, the way a model name is badged across a tailgate.
   Body stays at normal width so the contrast is a decision, not a wobble. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --notice-h: 0px;
  --ink:        #08080a;
  --surface:    #101013;
  --surface-2:  #17171b;
  --surface-3:  #202026;
  --hairline:   #2c2c33;
  --chrome:     #d3d6db;
  --chrome-dim: #8b9096;
  --chrome-mute:#85898f; /* AA contrast (>=4.5:1) on all four surface tokens */
  --white:      #f6f7f8;
  --accent:     #d81f2a;
  --accent-dim: #a8151f;

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --f-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;          /* native scrollbars and controls render dark */
  -webkit-tap-highlight-color: rgba(216,31,42,.22);
}

/* Sticky header is 74px. Without this, every in-page anchor lands with the
   heading hidden underneath it. */
:target, [id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chrome);
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* room for the sticky mobile call bar */
  padding-bottom: env(safe-area-inset-bottom);
}

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

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }

h1, h2, h3, h4 {
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}

button, a, summary, input, label { touch-action: manipulation; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: 12px 18px; z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------------- header ---------------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.hdr-in {
  display: flex; align-items: center; gap: 22px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 50px; height: 50px; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-weight: 800; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white);
}
.brand-sub {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--chrome-mute); font-weight: 600;
}

.nav { display: flex; gap: 30px; }
.nav a {
  text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-dim);
  padding: 6px 0; position: relative; transition: color .18s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr-call {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 20px; border-radius: 3px; white-space: nowrap;
  transition: background .18s;
}
.hdr-call:hover { background: var(--accent-dim); }

.burger {
  display: none; background: none; border: 1px solid var(--hairline);
  border-radius: 3px; width: 44px; height: 44px; cursor: pointer;
  color: var(--white); align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  /* The closed drawer must clear its own height PLUS the distance it sits
     down the page, or a slice of it shows above the header. `-120%` only
     ever cleared the height, so ~13px of the last nav item was visible on
     every mobile page. Adding the notice bar made it 56px and obvious.
     `--notice-h` is set by site.js and is 0 when no notice is rendering. */
  /* `.hdr` sets `backdrop-filter`, which makes it the containing block for
     fixed-position descendants — so this drawer is positioned against the
     header, NOT the viewport. Every offset here is header-relative, and the
     notice bar above the header does not enter into it.

     `visibility` is the guarantee. The old `-120%` translate left ~13px of
     the last nav item showing on every mobile page, and no amount of calc
     arithmetic is worth trusting here: hidden is hidden. It is delayed by
     the transition duration so the slide-up still animates. */
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
    padding: 8px 0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  /* Anchored at top:0 and slid down when open, rather than parked at 74px
     and slid up. A closed drawer is then exactly -100% of itself, which is
     always fully hidden — no arithmetic to get wrong. The old `-120%` from
     `top: 74px` left ~13px of the last nav item showing on every mobile
     page, and the notice bar pushed that to 56px. */
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform .26s ease, visibility 0s linear 0s;
  }
  .nav a { padding: 16px var(--gut); font-size: 15px; border-bottom: 1px solid var(--hairline); }
  .nav a::after { display: none; }
  .burger { display: inline-flex; }
  .hdr-call span { display: none; }
  .hdr-call { padding: 13px 15px; }
}

/* ---------------- hero ---------------- */

/* Taller frame + a high crop so the round shop sign clears the sticky
   header. The sign sits at roughly 12-29% of the original frame height;
   anything past ~25% vertical position buries it behind the nav. */
.hero { position: relative; min-height: min(94vh, 850px); display: flex; align-items: flex-end; }
.hero-img, .hero-img picture { position: absolute; inset: 0; }
/* hero-2400.jpg is already cropped to 1.59:1 with the sign and the car
   both framed, so this only needs a light nudge, not a rescue. */
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* Mobile: a shorter hero scales the image down, which means LESS gets
   cropped off the sides — so the car reads across the frame instead of
   just a wheel. Also keeps both CTAs clear of the sticky call bar. */
@media (max-width: 760px) {
  .hero { min-height: min(78vh, 660px); }
  .hero-img img { object-position: 50% 20%; }
  .hero-in { padding-block: 40px 44px; }
}
.hero-img::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,8,10,.88) 0%, rgba(8,8,10,.6) 28%, rgba(8,8,10,.06) 62%, rgba(8,8,10,.26) 100%),
    /* Top stop kept light on purpose so the shop sign is not scrimmed out.
       The .7/.16 stops in the middle are what carries the headline. */
    linear-gradient(to top, rgba(8,8,10,.96) 0%, rgba(8,8,10,.7) 30%, rgba(8,8,10,.16) 60%, rgba(8,8,10,.22) 100%);
}
@media (max-width: 760px) {
  .hero-img::after {
    background: linear-gradient(to top, rgba(8,8,10,.97) 0%, rgba(8,8,10,.82) 38%, rgba(8,8,10,.45) 70%, rgba(8,8,10,.55) 100%);
  }
}
.hero-in { position: relative; padding-block: 70px 60px; width: 100%; }

.est {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(211,214,219,.28); border-radius: 100px;
  padding: 7px 16px 7px 12px; margin-bottom: 26px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome); background: rgba(8,8,10,.45);
}
.est b { color: var(--accent); font-weight: 800; }

/* Sized so three lines of headline plus the shop sign both fit on a
   laptop-height viewport. Going bigger pushes the type into the sign. */
.hero h1 {
  font-size: clamp(37px, 5.3vw, 76px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--chrome-dim); }

.hero-sub {
  margin-top: 22px; max-width: 46ch; font-size: clamp(16px, 2vw, 19px);
  color: var(--chrome); line-height: 1.6;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 17px 30px; border-radius: 3px; border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s;
}
.btn-red { background: var(--accent); color: #fff; }
.btn-red:hover { background: var(--accent-dim); }
.btn-ghost { border-color: rgba(211,214,219,.34); color: var(--white); background: rgba(8,8,10,.3); }
.btn-ghost:hover { border-color: var(--chrome); background: rgba(211,214,219,.09); }

/* ---------------- trust strip ---------------- */

.strip { background: var(--surface-2); border-block: 1px solid var(--hairline); }
.strip-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 34px; gap: 24px;
}
.strip-i { text-align: center; padding-inline: 8px; }
.strip-i dt {
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--white);
  letter-spacing: -0.02em; line-height: 1;
}
.strip-i dd {
  margin: 9px 0 0; font-size: 11.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--chrome-mute);
}
@media (max-width: 720px) {
  .strip-in { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}

/* ---------------- generic section ---------------- */

.sec { padding-block: clamp(64px, 9vw, 110px); }
.sec-alt { background: var(--surface); }
.sec-2 { background: var(--surface-2); }

.eyebrow {
  display: flex; align-items: center; gap: 13px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--accent); flex: none; }

.sec-h { font-size: clamp(30px, 4.6vw, 50px); text-transform: uppercase; max-width: 20ch; }
.sec-lede { margin-top: 20px; max-width: 60ch; color: var(--chrome-dim); font-size: 17.5px; }

.sec-head { margin-bottom: clamp(38px, 5vw, 58px); }
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}

.txt-link {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); border-bottom: 2px solid var(--accent);
  padding: 12px 0 8px; min-height: 44px;
  transition: gap .18s;
}
.txt-link:hover { gap: 15px; }

/* ---------------- services ---------------- */

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--hairline); }
.svc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .svc-grid, .svc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid, .svc-grid-4 { grid-template-columns: 1fr; } }

.svc {
  background: var(--surface); padding: 40px 32px 36px;
  display: flex; flex-direction: column; text-decoration: none;
  transition: background .2s;
}
.svc:hover { background: var(--surface-3); }
.svc-n {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); margin-bottom: 20px;
}
.svc h3 { font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; }
.svc p { margin-top: 14px; color: var(--chrome-dim); font-size: 15.5px; line-height: 1.62; }
.svc-flag {
  margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chrome-mute);
}

/* ---------------- gallery ---------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px;
}
.filt {
  background: transparent; border: 1px solid var(--hairline); color: var(--chrome-dim);
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; padding: 14px 18px; border-radius: 100px; cursor: pointer;
  transition: color .18s, background-color .18s, border-color .18s; min-height: 44px;
}
.filt:hover { border-color: var(--chrome-mute); color: var(--white); }
.filt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.filt-n { opacity: .6; margin-left: 6px; font-weight: 600; }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
}

.tile {
  position: relative; overflow: hidden; background: var(--surface-2);
  aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: zoom-in; display: block;
  border-radius: 2px;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover img { transform: scale(1.05); }
.tile::after {
  content: ''; position: absolute; inset: 0; border: 1px solid transparent;
  transition: border-color .2s;
}
.tile:hover::after { border-color: rgba(211,214,219,.42); }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(8,8,10,.9), transparent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--white); text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }

/* Must come after the .tile rules above — same specificity, so the later one
   wins. Placed before them it was silently overridden and every tile kept the
   4:3 box.

   One column on a phone makes a 4:3 tile only ~250px tall, and a portrait
   photo cover-cropped into that becomes a thin horizontal slice of the car.
   Here the tile takes the photo's own proportions: nothing cropped, nothing
   stretched, a tall shot reads as a tall shot. Captions stay visible because
   there is no hover on a phone to reveal them. */
@media (max-width: 520px) {
  .grid .tile { aspect-ratio: auto; }
  .grid .tile img { height: auto; object-fit: contain; display: block; }
  .grid .tile-cap { opacity: 1; transform: none; }
}
.tile[hidden] { display: none; }

.grid-empty {
  padding: 60px 0; text-align: center; color: var(--chrome-mute);
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(4,4,6,.96);
  overscroll-behavior: contain;
  display: none; align-items: center; justify-content: center; padding: 4vmin;
}
.lb[data-open="true"] { display: flex; }
.lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 2px; }
.lb-cap {
  position: absolute; bottom: 3vmin; left: 0; right: 0; text-align: center;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-dim);
}
/* Arrows are for a mouse. On touch they are a small target sitting on top of
   the photo, and the gesture people already expect is a swipe — which is
   wired up in site.js. `pointer: fine` is the honest test: it asks whether
   the device has a precise pointer, not how wide the screen is, so a small
   laptop window keeps its arrows and a large tablet does not. */
/* touch-action sits on the lightbox, not the photo, because the swipe
   listener does — the browser has to be told that horizontal panning belongs
   to the page across the whole viewer, or it claims the gesture before the
   handler ever sees it. Vertical and pinch stay with the browser. */
.lb {
  touch-action: pan-y pinch-zoom;
}
.lb img {
  will-change: transform;
}
.lb img.is-dragging { transition: none; }
.lb img.is-settling { transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s linear; }

.lb-x, .lb-nav {
  position: absolute; background: rgba(23,23,27,.9); border: 1px solid var(--hairline);
  color: var(--white); width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; font-size: 22px; line-height: 1; display: flex;
  align-items: center; justify-content: center; font-family: inherit;
}
.lb-x { top: 3vmin; right: 3vmin; }
.lb-nav[data-dir="prev"] { left: 3vmin; top: 50%; transform: translateY(-50%); }
.lb-nav[data-dir="next"] { right: 3vmin; top: 50%; transform: translateY(-50%); }
.lb-x:hover, .lb-nav:hover { background: var(--accent); border-color: var(--accent); }

/* Placed after the .lb-nav rules above on purpose: same specificity, so the
   later rule is the one that wins. Sitting before them it was silently
   overridden and the arrows stayed on touch devices. */
@media (pointer: coarse) {
  .lb .lb-nav { display: none; }
}

/* ---------------- before / after ---------------- */

.ba-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .ba-wrap { grid-template-columns: 1fr; } }

.ba {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px;
  background: var(--surface-2); user-select: none; touch-action: pan-y;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Each side is a layer holding its own photo AND its own label, so the clip
   wipes the label along with the image instead of leaving both tags floating
   over the frame the whole time. */
.ba-layer { position: absolute; inset: 0; }
.ba-after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px;
  background: var(--white); pointer-events: none;
}
.ba-line::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  border: 2px solid var(--white); border-radius: 50%; background: rgba(8,8,10,.55);
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba-tag {
  position: absolute; top: 14px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--white);
  background: rgba(8,8,10,.72); padding: 7px 12px; border-radius: 2px;
  pointer-events: none;
}
.ba-tag[data-side="b"] { left: 14px; }
.ba-tag[data-side="a"] { right: 14px; background: var(--accent); }

/* ---------------- VLT shade guide ---------------- */

.vlt { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .vlt { grid-template-columns: repeat(2, 1fr); } }

.vlt-i { text-align: center; }
/* Base photo has to be BRIGHT or the 5% and 70% swatches read the same.
   The white Suburban's rear glass gives the overlay something to work against. */
.vlt-swatch {
  aspect-ratio: 3 / 2; border-radius: 2px; border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
  background-image: url('../assets/web/full/suv-chevy-suburban-white.webp');
  background-size: 260%; background-position: 62% 44%;
}
.vlt-swatch::after {
  content: ''; position: absolute; inset: 0; background: #05050a;
  opacity: var(--dark);
}
.vlt-i b { display: block; margin-top: 12px; font-size: 20px; color: var(--white); font-weight: 800; }
.vlt-i span {
  display: block; margin-top: 4px; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--chrome-mute); font-weight: 600;
}

.note {
  margin-top: 26px; padding: 18px 20px; border-left: 2px solid var(--accent);
  background: var(--surface-2); font-size: 14.5px; color: var(--chrome-dim);
}

/* ---------------- testimonials ---------------- */

/* auto-fit, not a fixed 3, so two quotes fill the row today and a third
   drops in without a CSS change the day Chris sends one. */
.quote-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 680px) { .quote-grid { grid-template-columns: 1fr; } }

.quote {
  margin: 0; padding: 34px 32px 30px; background: var(--surface-2);
  border: 1px solid var(--hairline); border-top: 2px solid var(--accent);
  border-radius: 2px; display: flex; flex-direction: column;
}

/* The job, not the stars, leads the card. Every shop has five stars;
   what tells a customer this applies to THEM is that one of these was a
   Tesla and the other was somebody's living room. */
.quote-job {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 20px;
}

.quote blockquote {
  margin: 0 0 26px; color: var(--white);
  font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45;
  letter-spacing: -0.011em; text-wrap: pretty;
}
.quote blockquote::before { content: '\201C'; }
.quote blockquote::after { content: '\201D'; }

.quote-foot {
  margin-top: auto; display: flex; align-items: baseline;
  justify-content: space-between; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--hairline);
}
.quote-name {
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chrome);
}
/* Corroboration, so it sits quiet — demoted from the top of the card. */
.quote-stars {
  color: var(--accent); letter-spacing: .14em; font-size: 11px;
  flex: none; opacity: .8;
}

.google-chip {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 100px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; color: var(--chrome-dim); margin-top: 26px;
}
.google-chip b { color: var(--white); font-weight: 800; }
.google-chip:hover { border-color: var(--chrome-mute); color: var(--white); }

/* Two proof chips sit side by side and wrap together on a phone. The margin
   moves off the chip and onto the row so a single chip and a pair land in
   exactly the same place. */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chip-row .google-chip { margin-top: 0; }

/* Review ask. Deliberately quieter than the call CTA — it is aimed at
   someone who is already a customer, and it must never pull a new one out
   of the path to the phone. On a phone the line sits above the button. */
.review-ask {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px; margin-top: 34px;
}
.review-ask p {
  margin: 0; color: var(--chrome-dim); font-size: 17.5px;
}
@media (max-width: 520px) {
  .review-ask { display: block; }
  .review-ask .btn { margin-top: 14px; }
}

/* ---------------- meet the crew ---------------- */

/* Two men and possibly a third. A three-up grid would leave a hole at two,
   so the track sizes to content and centres — it reads deliberate at 2, at
   3, and at 4 without a media query fighting it. */
.crew-grid {
  display: grid; gap: 26px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
}
.crew-card { margin: 0; }
.crew-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--hairline);
  display: block; background: var(--surface);
}
.crew-card figcaption { padding-top: 15px; }
.crew-name {
  display: block; color: var(--white);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.crew-role {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.crew-bio {
  margin: 10px 0 0; color: var(--chrome-dim);
  font-size: 15px; line-height: 1.6;
}

/* ---------------- starting prices ---------------- */

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--hairline); }
@media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

.price { background: var(--surface); padding: 32px 28px; display: flex; flex-direction: column; }
.price-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.price-num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; color: var(--white);
  letter-spacing: -0.025em; line-height: 1;
}
.price-num i {
  font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chrome-mute); margin-right: 8px;
  vertical-align: middle;
}
.price-note { margin-top: 14px; font-size: 14.5px; color: var(--chrome-dim); }

/* ---------------- film brand strip ---------------- */

.brand-row { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-chip {
  border: 1px solid var(--hairline); border-radius: 2px; padding: 15px 26px;
  font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chrome); background: var(--surface-2);
}

/* One brand is a commitment, not a menu. A single chip in a row built for
   four reads as an unfinished list, so one entry gets set as a statement
   across the full width. Two or more fall back to the chip row. */
.brand-row.is-single { display: block; }
.brand-row.is-single .brand-chip {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px;
  padding: 28px 32px; border: 1px solid var(--hairline);
  border-top: 2px solid var(--accent); letter-spacing: .02em;
}
.brand-row.is-single .brand-name {
  font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1;
  color: var(--white); letter-spacing: -0.01em; text-transform: none;
}
.brand-row.is-single .brand-note {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--chrome-mute); flex: none;
}

/* ---------------- warranty ---------------- */

.warranty {
  border: 1px solid var(--accent); border-radius: 2px; padding: 34px 32px;
  background: linear-gradient(135deg, rgba(216,31,42,.1), transparent 60%);
}
.warranty h3 { font-size: clamp(22px, 2.8vw, 30px); text-transform: uppercase; }
.warranty p { margin-top: 14px; color: var(--chrome); font-size: 16.5px; max-width: 52ch; }

/* ---------------- SIGNATURE: the shade dial ----------------
   The one element this site is remembered by. Not decoration: it is the
   actual decision every tint customer has to make, on one of his own cars,
   with the North Carolina legal line marked on the track. Nobody else in
   this trade lets you do this before you call. */

.dial { position: relative; }
.dial-stage {
  position: relative; overflow: hidden; border-radius: 2px;
  border: 1px solid var(--hairline); background: var(--surface-2);
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) { .dial-stage { aspect-ratio: 4 / 3; } }
.dial-stage img { width: 100%; height: 100%; object-fit: cover; }
.dial-film {
  position: absolute; inset: 0; background: #04040a;
  opacity: var(--vlt-dark, .54);
  transition: opacity .12s linear;
  pointer-events: none;
}
.dial-read {
  position: absolute; left: 0; bottom: 0; padding: 26px 28px;
  display: flex; align-items: baseline; gap: 14px; pointer-events: none;
  text-shadow: 0 2px 18px rgba(4,4,8,.9);
}
.dial-pct {
  font-variant-numeric: tabular-nums; font-stretch: 118%;
  font-size: clamp(46px, 8vw, 88px); font-weight: 800; color: var(--white);
  line-height: .9; letter-spacing: -0.03em;
}
.dial-name {
  font-size: 12px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--chrome);
}
.dial-legal {
  position: absolute; right: 0; top: 0; margin: 22px 24px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 2px; pointer-events: none;
  background: rgba(8,8,10,.72); color: var(--chrome-dim);
  border: 1px solid var(--hairline);
  transition: color .18s, border-color .18s, background-color .18s;
}
.dial[data-legal="no"] .dial-legal {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.dial-ctrl { margin-top: 26px; }
.dial-track { position: relative; }
.dial-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: ew-resize; margin: 0;
}
.dial-range::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(to right, #04040a, var(--chrome));
  border: 1px solid var(--hairline); border-radius: 2px;
}
.dial-range::-moz-range-track {
  height: 4px; background: linear-gradient(to right, #04040a, var(--chrome));
  border: 1px solid var(--hairline); border-radius: 2px;
}
.dial-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--white); cursor: ew-resize;
}
.dial-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--white); cursor: ew-resize;
}
.dial-ticks {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chrome-mute);
  font-variant-numeric: tabular-nums;
}
.dial-ticks b { color: var(--accent); font-weight: 800; }

/* On a phone the full badge copy spans the whole frame and the tick row
   runs edge to edge. Shorten the badge, drop the two unlabelled ticks. */
@media (max-width: 620px) {
  .dial-legal { margin: 14px; font-size: 10px; padding: 7px 10px; letter-spacing: .1em; }
  .dial-legal .long { display: none; }
  .dial-ticks { letter-spacing: .06em; font-size: 10.5px; }
  .dial-ticks span:nth-child(2), .dial-ticks span:nth-child(4) { display: none; }
  .dial-read { padding: 18px 18px; }
}

/* ---------------- FAQ ---------------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 44px 26px 0;
  font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; color: var(--white);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-a { padding: 0 8% 28px 0; color: var(--chrome-dim); font-size: 16.5px; }

/* ---------------- split / about ---------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: 2px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ck { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.ck li { position: relative; padding-left: 30px; color: var(--chrome); font-size: 16.5px; }
.ck li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 15px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}

/* ---------------- final CTA ---------------- */

.close { position: relative; overflow: hidden; }
.close-bg { position: absolute; inset: 0; }
.close-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.close-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,8,10,.97) 0%, rgba(8,8,10,.86) 55%, rgba(8,8,10,.6) 100%);
}
.close-in { position: relative; padding-block: clamp(70px, 10vw, 120px); }
.close h2 { font-size: clamp(32px, 5.2vw, 58px); text-transform: uppercase; max-width: 17ch; }

.num-row { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 34px; }
.num-i span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--chrome-mute); margin-bottom: 7px;
}
.num-i a {
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; color: var(--white);
  text-decoration: none; letter-spacing: -0.01em;
}
.num-i a:hover { color: var(--accent); }

/* ---------------- footer ---------------- */

.ftr { background: var(--surface); border-top: 1px solid var(--hairline); padding-block: 56px 40px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 780px) { .ftr-grid { grid-template-columns: 1fr; gap: 34px; } }
.ftr h3 {
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--chrome-mute); margin-bottom: 16px; font-weight: 700;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr a { text-decoration: none; color: var(--chrome-dim); font-size: 15px; }
.ftr a:hover { color: var(--white); }
.ftr-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.ftr-brand img { width: 54px; height: 54px; border-radius: 50%; }
.ftr-bot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--chrome-mute);
}

/* ---------------- sticky mobile call bar ---------------- */

.bar { display: none; }
@media (max-width: 760px) {
  /* Single action. Text CTA pulled 2026-07-29: the second number on file
     is Chris's personal cell and nobody has confirmed he wants it public. */
  .bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface-2); border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bar a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 17px 10px; text-decoration: none; font-weight: 800; font-size: 14px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--white);
    background: var(--accent);
  }
  body { padding-bottom: 62px; }
}

/* ---------------- page header (interior pages) ---------------- */

.phead { padding-block: clamp(52px, 7vw, 84px) clamp(30px, 4vw, 46px); border-bottom: 1px solid var(--hairline); }
.phead h1 { font-size: clamp(34px, 5.6vw, 62px); text-transform: uppercase; }
.phead p { margin-top: 18px; max-width: 56ch; color: var(--chrome-dim); font-size: 17.5px; }

.crumb {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome-mute); margin-bottom: 18px; font-weight: 600;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--white); }

/* ---------------- review-mode markers (?review=1) ----------------
   Fields nobody has confirmed with Chris yet. Invisible by default so
   the demo reads clean on the call; James flips ?review=1 to see every
   open slot outlined. Nothing here is invented data. */

[data-tbd] { position: relative; }
body[data-review="1"] [data-tbd] {
  outline: 1px dashed var(--accent); outline-offset: 3px;
}
body[data-review="1"] [data-tbd]::after {
  content: attr(data-tbd);
  position: absolute; top: -9px; left: 0; transform: translateY(-100%);
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px;
  white-space: nowrap; z-index: 40; border-radius: 2px; pointer-events: none;
}
.review-flag { display: none; }
body[data-review="1"] .review-flag {
  display: block; position: fixed; bottom: 14px; left: 14px; z-index: 150;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 2px;
}

/* ---------------- legal pages ---------------- */

.prose { max-width: 68ch; }
.prose p { color: var(--chrome-dim); font-size: 16.5px; margin-bottom: 1.15em; }
.prose strong { color: var(--white); }
.prose a { color: var(--white); }
.prose h2 {
  font-size: clamp(19px, 2.4vw, 24px); text-transform: uppercase;
  margin: 40px 0 14px; letter-spacing: -0.01em;
}
.prose .ck { margin-top: 18px; }
.prose .ck li { font-size: 16px; color: var(--chrome-dim); }
/* Address links out to Maps. Inherits whatever it sits in — a dim footer line
   or a white h3 on the contact page — and only announces itself on hover. */
.addr-link {
  color: inherit; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.34); text-underline-offset: 3px;
}
.addr-link:hover, .addr-link:focus-visible {
  color: var(--white); text-decoration-color: var(--accent);
}

.ftr-bot a { text-decoration: none; }
.ftr-bot a:hover { color: var(--white); }


/* ---- temporary notice bar -------------------------------------
   Driven by `notice` in client-data.js. Set that to null and this
   never renders. Accent-tinted rather than solid accent so it reads
   as information, not as an alarm on a shop that is simply closed
   for a week. */
.notice {
  background: linear-gradient(180deg, rgba(216,31,42,.16), rgba(216,31,42,.10));
  border-bottom: 1px solid rgba(216,31,42,.38);
  color: var(--white);
}
.notice-in {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 9px 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center;
}
.notice-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
@media (max-width: 640px) {
  .notice-in { font-size: 11.5px; letter-spacing: .04em; padding: 8px 14px; }
}