/* ==========================================================================
   Grandview Auto Electric & Diesel — design system
   "Black steel spec sheet": the printed service manual's discipline —
   hairline rules, mono spec labels, numbered rows, square corners — set on
   the near-black ground the shop's own logo artwork requires, with the
   logo's crimson as the single accent.

   Contrast notes live next to each token. The accent ramp is sampled from
   the shop's logo artwork (see ../brand-notes in README):
     #C71C34 wordmark highlight · #7E0C1E body · #5A0612 shadow
   The lifted stops exist because the logo's crimson is ~2:1 on black and
   cannot carry text below display sizes.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-100-900-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* ground — cool graphite ladder, never pure black */
  --bg:      #0B0C0E;  /* page */
  --bg-deep: #070809;  /* footer / below-the-line */
  --bg-2:    #101215;  /* raised panel */
  --bg-3:    #17191D;  /* higher panel, hover */
  --line:    #24272C;  /* hairline on dark */
  --line-2:  #383C43;  /* emphasis hairline on dark */

  /* ink on dark */
  --ink:   #F2F3F5;    /* 15.9:1 on --bg */
  --ink-2: #B7BCC3;    /* 8.6:1  */
  --ink-3: #8D939B;    /* 5.3:1 — the floor; nothing dimmer carries text */

  /* the one light band, for page rhythm */
  --paper:   #EDEFF1;
  --paper-2: #E0E3E6;
  --line-p:  #C9CDD2;
  --ink-p:   #16181C;  /* 14.8:1 on paper */
  --ink-p2:  #4A5058;  /* 6.9:1 */

  /* accent — sampled from the logo, plus lifted stops for text on black */
  --red-hi:     #C71C34; /* logo highlight. 3.6:1 on bg — display type & fills only */
  --red:        #FF5960; /* 6.9:1 on bg — small accent text, icons, indices */
  --red-soft:   #FF9593; /* 10:1 — hover on dark */
  --red-deep:   #7E0C1E; /* logo body — fills; white on it 10.7:1 */
  --red-shadow: #5A0612; /* logo shadow — deepest fill */
  --red-press:  #A31228; /* pressed/hover state between hi and deep */
  --red-paper:  #8A011E; /* accent that passes on paper — 10:1 */

  /* functional only — never decorative */
  --ok:   #43C77D;  /* open-now. 7.4:1 on bg */
  --warn: #E3A63C;  /* closed-now. 8.9:1 on bg */

  /* type */
  --f-display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.5rem, 1rem + 5vw, 4.625rem);
  --fs-h2:   clamp(1.875rem, 1.05rem + 2.75vw, 3.125rem);
  --fs-h3:   clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-mono: 0.75rem;

  /* structure */
  --w-content: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 2px;                 /* the entire radius system */
  --header-h: 66px;
  --shadow-overlay: 0 24px 48px -16px rgba(0, 0, 0, .6); /* true overlays only */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class],
.wall__col ul, .footer__cols ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
iframe { border: 0; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

::selection { background: var(--red-deep); color: #fff; }

/* ------------------------------------------------------------------- a11y */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}
.paper :focus-visible { outline-color: var(--red-paper); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 200;
  background: var(--red-hi); color: #fff;
  padding: 12px 20px;
  font: 700 14px/1 var(--f-body);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

.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;
}

/* ------------------------------------------------------------------- type */
.k {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.k b, .k strong { font-weight: 600; color: var(--ink-2); }
.k--red { color: var(--red); }
.paper .k { color: var(--ink-p2); }
.paper .k--red { color: var(--red-paper); }

h1, .h1, h2, .h2 {
  font-family: var(--f-display);
  font-weight: 860;
  font-stretch: 114%;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .96;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-hero); }
h2, .h2 { font-size: var(--fs-h2); }
h1, .h1, h2, .h2, h3, .h3 { overflow-wrap: anywhere; } /* last-resort break for long display words at tiny widths */
h3, .h3 {
  font-family: var(--f-display);
  font-weight: 780;
  font-stretch: 106%;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: .002em;
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.paper .lead { color: var(--ink-p2); }
p { max-width: 66ch; }
.dot { color: var(--red); } /* the red full stop / accent glyph in display type */

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .8438rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 16px 28px;
  min-height: 50px;
  transition: background-color 140ms ease-out, border-color 140ms ease-out,
              color 140ms ease-out, transform 110ms ease-out;
  white-space: nowrap;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn--solid:disabled:hover { background: var(--red-hi); }
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; } /* long labels wrap instead of overflowing */
}
.btn--solid { background: var(--red-hi); color: #fff; }
.btn--solid:hover { background: var(--red-press); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); background: rgba(255, 255, 255, .03); }
.btn--onred { background: #fff; color: var(--red-shadow); }
.btn--onred:hover { background: #F3DDDD; }
.btn--ghost-onred { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.btn--ghost-onred:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.paper .btn--ghost { border-color: #A9AEB4; color: var(--ink-p); }
.paper .btn--ghost:hover { border-color: var(--ink-p2); background: rgba(0, 0, 0, .04); }
.btn--sm { padding: 11px 18px; min-height: 40px; font-size: .78rem; }
.btn .btn__tel { font-family: var(--f-mono); font-weight: 600; letter-spacing: .05em; }

/* text link with drawn underline */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 160ms ease-out;
}
.tlink:hover { background-size: 100% 1px; }
.tlink .arr { transition: transform 160ms ease-out; }
.tlink:hover .arr { transform: translateX(4px); }
.tlink--red { color: var(--red); }
.paper .tlink { color: var(--ink-p); }
.paper .tlink--red { color: var(--red-paper); }

.arr { display: inline-block; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: clamp(88px, 7vw + 40px, 136px); }
.section--tight { padding-block: clamp(56px, 5vw + 24px, 88px); }
.section--flush-top { padding-top: 0; }

/* section header — hairline rule with a terminal dot, mono index, then h2 */
.shead { margin-bottom: clamp(36px, 4vw, 56px); }
.shead__rule {
  position: relative;
  border-top: 1px solid var(--line);
  margin-bottom: 22px;
}
.shead__rule::before {
  content: "";
  position: absolute; left: 0; top: -3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
}
.paper .shead__rule { border-top-color: var(--line-p); }
.paper .shead__rule::before { background: var(--red-paper); }
.shead__k { display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; }
.shead h2 { max-width: 22ch; }
.shead .lead { margin-top: 18px; }
.shead__grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .shead__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(28px, 5vw, 72px); }
  .shead__grid .lead { margin-top: 0; }
}

/* =====================================================================
   HEADER
   ===================================================================== */
.util {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
.util__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 34px;
}
.util .k { font-size: .6875rem; }
.util__status { display: inline-flex; align-items: center; gap: 8px; }
.util__status .st-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
}
.util__status.is-open .st-dot { background: var(--ok); }
.util__status.is-open .st-txt { color: var(--ok); }
.util__status.is-closed .st-dot { background: var(--warn); }
.util__status.is-closed .st-txt { color: var(--warn); }
.util__right { display: flex; align-items: center; gap: 22px; }
.util a.k { text-decoration: none; transition: color 140ms ease-out; }
.util a.k:hover { color: var(--ink); }
@media (max-width: 720px) {
  .util__addr { display: none; }
}

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(11, 12, 14, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.header__brand { display: block; flex: none; }
.header__brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
/* top-level links only — the dropdown panels carry their own link styles */
.nav > a {
  font-weight: 640;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-2);
  padding: 6px 0;
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 2px;
  transition: color 140ms ease-out, background-size 160ms ease-out;
}
.nav > a:hover { color: var(--ink); background-size: 100% 2px; }
.nav > a[aria-current="page"] { color: var(--ink); background-size: 100% 2px; }

/* ---- header dropdowns (Services / About) — C.A.R.S. pattern, house skin ---- */
.nvdd { position: static; }
.nvdd__t {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 640; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 2px;
  border: 0; padding: 6px 0; cursor: pointer;
  transition: color 140ms ease-out, background-size 160ms ease-out;
}
.nvdd__t:hover, .nvdd.is-open .nvdd__t, .nvdd__t.is-here { color: var(--ink); background-size: 100% 2px; }
.nvdd__chev { transition: transform 160ms ease-out; }
.nvdd.is-open .nvdd__chev { transform: rotate(180deg); }
.nvdd__m {
  position: absolute; top: 100%; left: 50%;
  width: min(920px, calc(100vw - 48px));
  transform: translateX(-50%) translateY(8px);
  background: #0E0F13; border: 1px solid var(--line); border-top: 2px solid var(--red);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 150ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}
.nvdd.is-open .nvdd__m {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.nvdd__m--about { width: min(780px, calc(100vw - 48px)); }
.nvdd__cols { display: grid; gap: 28px; padding: 24px 26px 20px; }
.nvdd__m--svc .nvdd__cols { grid-template-columns: 1fr 1.08fr 1fr 236px; }
.nvdd__m--about .nvdd__cols { grid-template-columns: 1fr 1fr 236px; }
.nvcol { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.nvpromo { min-width: 0; }
.nvcol__h {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  text-decoration: none; white-space: nowrap;
}
.nvcol__h .k { transition: color 140ms ease-out; }
.nvcol__h:hover .k:not(.k--red) { color: var(--ink); }
.nvcol__h .arr { margin-left: auto; color: var(--red); opacity: 0; transform: translateX(-4px);
  transition: opacity 140ms ease-out, transform 140ms ease-out; }
.nvcol__h:hover .arr { opacity: 1; transform: none; }
.nvcol__lbl { padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  color: #8F939C; }
.nvlink {
  display: block; padding: 8px 0; text-decoration: none;
  color: var(--ink-2); font-size: .96rem; font-weight: 540;
  transition: color 120ms ease-out, transform 120ms ease-out;
}
.nvlink:hover { color: var(--ink); transform: translateX(4px); }
.nvrow { display: flex; align-items: baseline; padding: 9px 0; text-decoration: none; }
.nvrow > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.nvrow b { color: var(--ink); font-size: .95rem; font-weight: 640; transition: color 120ms ease-out; }
.nvrow > span > span { color: #8F939C; font-size: .8rem; }
.nvrow:hover b { color: var(--red); }
.nvpromo {
  display: flex; flex-direction: column; gap: 9px; padding: 20px 22px;
  text-decoration: none;
  background: var(--bg-2);
  border: 1px solid var(--line); border-left: 2px solid var(--red);
}
.nvpromo b { color: var(--ink); font-size: 1rem; line-height: 1.35; font-weight: 700; }
.nvpromo__sub { color: #8F939C; font-size: .82rem; line-height: 1.6; }
.nvpromo .btn { margin-top: auto; align-self: flex-start; padding: 10px 16px; min-height: 0; font-size: .72rem; }
.nvall {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 11px 26px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink-2);
  font-weight: 640; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color 120ms ease-out;
}
.nvall:hover { color: var(--ink); }
.nvall .arr { color: var(--red); }

/* drawer group labels (EN grouped menu) */
.drawer__grp { display: block; margin: 20px 0 2px; color: #8F939C;
  font-size: 10.5px; letter-spacing: .22em; }
.drawer__nav .drawer__grp:first-child { margin-top: 0; }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__tel {
  font-family: var(--f-mono); font-weight: 600; font-size: .8125rem;
  letter-spacing: .04em; text-decoration: none; color: var(--ink-2);
  white-space: nowrap;
  transition: color 140ms ease-out;
}
@media (max-width: 1290px) { .header__tel { display: none; } }
.header__tel:hover { color: var(--ink); }
.header .btn { padding: 12px 20px; min-height: 42px; font-size: .78rem; }

.menu-btn {
  display: none;
  align-items: center; gap: 10px;
  font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  padding: 10px 2px;
}
.menu-btn__ic { position: relative; width: 20px; height: 12px; }
.menu-btn__ic::before, .menu-btn__ic::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor;
  transition: transform 240ms var(--ease-drawer), top 240ms var(--ease-drawer);
}
.menu-btn__ic::before { top: 0; }
.menu-btn__ic::after { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn__ic::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__ic::after { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .header__tel { display: none; }
  .menu-btn { display: inline-flex; }
  .header .btn--solid { display: none; }
}
@media (max-width: 1080px) {
  .header__brand img { height: 30px; }
}

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  visibility: hidden;
  overflow: hidden; /* keeps the off-canvas panel out of the scroll area */
}
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 5, 6, .6);
  opacity: 0; transition: opacity 240ms var(--ease-drawer);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--bg-deep);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  transform: translateX(102%);
  transition: transform 260ms var(--ease-drawer);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}
.drawer__head img { height: 44px; width: auto; }
.drawer__close { color: var(--ink-2); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 10px; }
.drawer__close:hover { color: var(--ink); }
.drawer__nav { padding: 10px 24px; }
.drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 780; font-stretch: 108%;
  font-size: 1.25rem; text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink);
}
.drawer__nav a .arr { color: var(--red); }
.drawer__nav a[aria-current="page"] { color: var(--red); }
.drawer__foot { margin-top: auto; padding: 24px; display: grid; gap: 12px; }
.drawer__foot .btn { width: 100%; }
.drawer__meta { padding: 0 24px 28px; display: grid; gap: 8px; }

/* mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-deep);
  border-top: 1px solid var(--line-2);
  box-shadow: var(--shadow-overlay);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.callbar .btn { min-height: 46px; padding: 12px 8px; font-size: .74rem; letter-spacing: .05em; min-width: 0; }
@media (max-width: 900px) {
  .callbar { display: grid; }
  body { padding-bottom: 72px; }
}
@media (max-width: 430px) {
  .callbar .btn__tel { display: none; } /* "Call" alone — the digits don't fit beside the other button */
}

/* =====================================================================
   HERO (home)
   ===================================================================== */
.hero {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}
.hero__media {
  position: absolute; inset: 0 0 0 auto;
  width: min(52vw, 780px);
  height: 100%;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
  filter: saturate(.82) contrast(1.05) brightness(.94);
}
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11, 12, 14, .78) 22%, rgba(11, 12, 14, .12) 58%, rgba(11, 12, 14, .38) 100%),
    linear-gradient(180deg, rgba(11, 12, 14, .5) 0%, rgba(11, 12, 14, 0) 30%, rgba(11, 12, 14, 0) 62%, var(--bg) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(560px, 78vh, 780px);
  padding-block: clamp(64px, 8vh, 110px);
  max-width: 660px;
}
.hero__k { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 26px; }
.hero h1 { margin-bottom: 24px; }
.hero__lead { margin-bottom: 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Truck-hero variant — the studio poster at FULL brightness.
   The photo is never dimmed: nothing tints the picture, the floor
   reflection stays visible, and the copy sits BELOW the image, so no
   legibility scrim is ever needed over it.
   The artwork (frame blacks are true #000) renders at 75% width
   (client: smaller footprint, same asset) on a full-bleed TRUE-BLACK
   stage that surrounds it on every side — the black matches all round,
   so the image has no silhouette anywhere. Its outer few percent
   feather onto that stage (the marble-floor texture touches the lower
   side edges), the base of the reflection dissolves into it, and the
   stage itself fades to the page ground down through the hero copy —
   the reflection bleeds smoothly into the next section with no rule
   of any kind at the seam. */
.hero--truck {
  border-bottom: 0;
  background: linear-gradient(180deg, #000 0%, #000 60%, var(--bg) 100%);
}
.hero--truck .hero__media {
  position: relative; inset: auto;
  width: 100%;
  aspect-ratio: 3840 / 1620; /* 2160 × .75 — canvas height matches the 75%-width artwork */
  max-height: 63vh;
}
.hero--truck .hero__media img {
  position: absolute; inset: 0; margin-inline: auto;
  width: 75%; height: 100%;
  object-fit: cover;
  object-position: center 60%; /* wide-viewport crop trims the empty upper black — never the truck, barely the reflection */
  filter: none;
}
.hero--truck .hero__media::before {
  inset: 0 12.5%; /* sit exactly over the 75%-wide artwork */
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 86%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0) 94%, #000 100%);
}
.hero--truck .hero__in {
  min-height: 0;
  align-items: center; text-align: center;
  max-width: none;
  padding-top: clamp(24px, 4vh, 44px);
  padding-bottom: clamp(40px, 6vh, 68px);
}
.hero--truck .hero__k { justify-content: center; }
.hero--truck .hero__lead { margin-inline: auto; max-width: 58ch; }
.hero--truck .hero__ctas { justify-content: center; }
@media (max-width: 860px) {
  /* phones: full-bleed artwork on the same black stage — the stage
     holds shorter (the image ends higher up the section) and the
     edge feathers land on stage black at the viewport edges */
  .hero--truck {
    background: linear-gradient(180deg, #000 0%, #000 35%, var(--bg) 100%);
  }
  .hero--truck .hero__media {
    max-height: none;
    aspect-ratio: 3840 / 2160;
  }
  .hero--truck .hero__media img { width: 100%; }
  .hero--truck .hero__media::before {
    inset: 0;
    background:
      linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 86%, #000 100%),
      linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0) 94%, #000 100%);
  }
  .hero--truck .hero__in {
    padding-top: 10px; padding-bottom: 48px;
    align-items: flex-start; text-align: left; /* mobile stays left-aligned under the image */
  }
  .hero--truck .hero__k { justify-content: flex-start; }
  .hero--truck .hero__lead { margin-inline: 0; }
  .hero--truck .hero__ctas { justify-content: flex-start; }
}

/* =====================================================================
   OG HERO (home) — the approved mockup (../grandview-hero.html), ported
   VERBATIM. Every declaration is byte-for-byte the mockup's; the only
   changes are (1) selectors are scoped under .og-hero so the mockup's
   page-global rules cannot leak into the other pages, (2) the mockup's
   own nav block is omitted (the site header above plays that role, so
   min-height subtracts the site chrome), (3) three lines on h1 restore
   the mockup's rendering environment against the site's global h1 rules
   (stretch/word-break/balance), and (4) per the client (2026-08-29) the
   chrome emblems are REMOVED and the hero is the SUNRISE composition:
   one huge headline line across the sky layered BEHIND the building
   cutout (the cutout's top is a flat awning line at y=41-44/700 —
   measured by ../work/measure-roofline.py — i.e. 30.43vw above the
   building's base at full bleed; the letters dip ~1.5vw behind it), the
   whole storefront visible edge to edge (no side melt), and the
   eyebrow + sub + CTAs in a centered strip at the bottom over the
   ground fade. Fonts: Big Shoulders Display /
   Barlow / Chakra Petch via Google Fonts, linked from the two home
   pages. Image: the client's building cutout with only its sign
   corrected (img/hero-shop/building-final.webp).
   ===================================================================== */
.og-hero {
  --void: #0A0A0D;         /* base */
  --gunmetal: #15161B;
  --steel: #2A2C33;
  --chrome: #D8DCE3;
  --bone: #EFEDE8;
  --blood: #8E1218;        /* logo maroon */
  --ignition: #E23B3B;     /* hot accent */
  --mute: #B4B7BF;
  --disp: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --util: "Chakra Petch", "Barlow", monospace;
  position: relative;
  min-height: 100vh;
  min-height: calc(100svh - 104px); /* mockup: 100svh with its nav inside */
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
/* machined texture: fine carbon grid + brushed diagonal */
.og-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 34%); }
/* dawn grade: a centered ember haze at the roof/headline junction, a
   faint ground glow, and the vignette — layered ABOVE the building */
.og-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(1200px 560px at 50% 24%, rgba(142,18,24,.20), transparent 62%),
    radial-gradient(1100px 640px at 50% 108%, rgba(142,18,24,.10), transparent 58%),
    radial-gradient(150% 110% at 50% 42%, transparent 58%, rgba(0,0,0,.52) 100%); }

/* ============ SKY (the sunrise headline, BEHIND the building) ============ */
.og-hero .sky { position: relative; z-index: 1; margin-top: auto; text-align: center;
  padding: 4vh 16px 0; }
/* ember backlight — the "sun" glowing through the letters */
.og-hero .sky h1 { margin: 0 0 -.42em; filter: drop-shadow(0 0 46px rgba(226,59,59,.30)); }

/* ============ COPY (centered strip under the building) ============ */
.og-hero .content { position: relative; z-index: 4; padding: 26px clamp(16px,4vw,32px) 42px; text-align: center; }
.og-hero h1 { font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.5rem, 8.6vw, 7.6rem); line-height: .93; letter-spacing: .012em;
  font-stretch: normal; overflow-wrap: normal; text-wrap: wrap; /* undo site-global h1 env */ }
.og-hero h1 .line { display: block; }
.og-hero h1 .line:nth-child(1) { animation: rise .85s cubic-bezier(.2,.7,.2,1) .18s both; }
.og-hero h1 .line:nth-child(2) { animation: rise .85s cubic-bezier(.2,.7,.2,1) .30s both; }
.og-hero h1 em { font-style: normal; }
/* chrome-plated word with a slow sheen sweep */
.og-hero .chromeword { background: linear-gradient(105deg,#878D97 0%,#EEF1F6 14%,#7A8089 28%,#FFFFFF 42%,#AAB0BA 55%,#6C727C 72%,#E3E7EE 88%,#9098A3 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s ease-in-out 1.2s infinite; }
/* candy-apple word */
.og-hero .fireword { background: linear-gradient(180deg,#FF6B57 4%,#E23B3B 34%,#8E1218 64%,#C22A28 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(226,59,59,.28)); }
.og-hero .sub { margin: 14px auto 24px; max-width: 52ch; font-size: 16.5px; line-height: 1.65; color: var(--mute);
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .44s both; }
.og-hero .ctarow { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .56s both; }
.og-hero .btn { font-family: var(--util); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 27px; border-radius: 3px; display: inline-block; transition: transform .25s, filter .25s, border-color .25s, background .25s; }
.og-hero .btn-primary { color: #fff; background: linear-gradient(180deg,#E23B3B,#9C1519);
  border: 1px solid rgba(255,120,110,.30);
  box-shadow: 0 12px 28px rgba(190,30,35,.35), inset 0 1px 0 rgba(255,255,255,.28); }
.og-hero .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.12); }
.og-hero .btn-ghost { color: var(--chrome); border: 1px solid #3A3D46; background: rgba(255,255,255,.03); }
.og-hero .btn-ghost:hover { transform: translateY(-2px); border-color: #6E7480; background: rgba(255,255,255,.06); }

/* ============ SHOP PHOTO (the horizon the headline rises behind) ============ */
.og-hero .shopwrap { position: relative; z-index: 2; width: 100%;
  animation: appear 1.1s ease .5s both; }
.og-hero .shopwrap img {
  width: 100%; height: auto; display: block;
  filter: brightness(.92) contrast(1.05) saturate(.9);
  /* The top goes OPAQUE fast (#000 by 5.5% — the measured roofline sits
     at 5.9-6.3%) so the headline occludes cleanly at the roof instead of
     ghosting through it; the bottom keeps a long eased ground fade that
     the copy strip sits over. No side melt — the whole storefront shows
     edge to edge. The image file itself stays untouched. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 3%, #000 5.5%, #000 58%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .45) 80%, rgba(0, 0, 0, .16) 88%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 3%, #000 5.5%, #000 58%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .45) 80%, rgba(0, 0, 0, .16) 88%, transparent 94%);
  mask-composite: intersect;
}
/* (the forged-emblem row was removed per the client, 2026-08-29; its
   renders remain in img/hero-shop/icon-*.avif.) */

/* ============ BOTTOM STRIP ============ */
.og-hero .strip { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 15px max(clamp(20px,4vw,52px), calc(50% - 556px)); border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(to top, rgba(8,8,10,.78), rgba(8,8,10,0));
  font-family: var(--util); font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: #8F939C; animation: rise .8s ease .95s both; }
.og-hero .strip b { color: #C9CDD5; font-weight: 600; }
.og-hero .scrollcue { display: flex; align-items: center; gap: 10px; }
.og-hero .scrollcue::after { content: ""; width: 1px; height: 20px; background: linear-gradient(var(--ignition), transparent);
  animation: tick 1.8s ease-in-out infinite; }

/* film grain */
.og-hero .grain { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes tick { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }

/* ============ DESKTOP LAYERING (the sunrise) ============ */
@media (min-width: 1001px) {
  /* THE HEADLINE NEVER SHRINKS — the BUILDING yields instead (client).
     --bh is the building's display height: full-bleed (32.421vw, the
     2159x700 photo at 100vw) whenever the sky fits, otherwise exactly
     the height that leaves room for the full-size headline + 26px
     breathing (which also covers the scroll-rise) above the roofline
     (93.86% of --bh above the base) in a 100svh-104px hero with the
     150px copy strip. Floor of 200px for absurdly short windows. */
  .og-hero {
    --hfont: clamp(3rem, 9vw, 10.5rem);
    --bh: max(min(32.421vw, 460px, calc((100svh - 280px - (0.9 * var(--hfont)) + 1vw) / 0.9386)), 200px);
    /* The hero is exactly as tall as its composition — 26px gap + headline
       + roofline-anchored building + 150px copy strip — so it renders
       IDENTICALLY windowed or fullscreen. Tall screens don't grow dead
       sky; the page simply continues sooner (a fixed band, like the
       reference sites). */
    min-height: 0;
    height: calc(176px + (0.9 * var(--hfont)) + (0.9386 * var(--bh)) - 1vw);
  }
  .og-hero .shopwrap { position: absolute; left: 0; right: 0; bottom: 150px; margin: 0; }
  .og-hero .shopwrap img { width: min(100%, calc(var(--bh) * 3.0843)); margin: 0 auto; }
  /* The headline is anchored to the MEASURED roofline (the cutout's flat
     awning line at y=43/700 → 93.86% of the display height above the
     base), tucked 1vw behind the roof at load (client-tuned: 1.55vw cut
     too deep, 0.55vw too shallow) — the scroll parallax lifts it clear. */
  .og-hero .sky { position: absolute; left: 0; right: 0; margin: 0; padding: 0;
    bottom: calc(150px + (0.9386 * var(--bh)) - 1vw); }
  .og-hero .sky h1 { margin: 0; white-space: nowrap;
    font-size: var(--hfont); line-height: .9; }
  /* sub + CTAs: centered strip in the clear band under the building */
  .og-hero .content { position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 24px 28px; }
  .og-hero .sub { max-width: 640px; margin: 10px auto 18px; }
}
@media (max-width: 1000px) {
  /* Mobile: size the hero to its composition. The base 100svh rule is the
     desktop contract; below 1001px the flex column just pushed everything to
     the bottom and the leftover viewport height rendered as dead sky above
     the headline. */
  .og-hero { min-height: 0; }
  .og-hero .sky { padding-top: 5vh; }
}
@media (max-width: 640px) {
  .og-hero .content { padding-top: 3vh; }
  .og-hero .sub { font-size: 15px; }
  .og-hero .btn { padding: 14px 20px; font-size: 11.5px; }
  .og-hero .strip { font-size: 9px; letter-spacing: .12em; gap: 10px; }
  .og-hero .scrollcue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .og-hero *, .og-hero *::before, .og-hero *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* =====================================================================
   OG PAGE SECTIONS (home) — the professional body under the OG hero:
   trust strip · services grid · why · reviews · hours & location · CTA.
   Same voice as the hero (Big Shoulders / Barlow / Chakra Petch, the
   mockup's palette); scroll reveals reuse the site's .rv system.
   ===================================================================== */
.ogp {
  background: #0A0A0D;
  color: #EFEDE8;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
.ogp-wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); }
.ogp-sec { position: relative; padding-block: clamp(64px, 7vw, 108px); }
.ogp-sec--tint { background: #0D0E12; border-block: 1px solid rgba(255, 255, 255, .05); }
.ogp-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: #9DA2AC;
}
.ogp-kicker::before {
  content: ""; width: 30px; height: 2px; flex: none;
  background: #E23B3B; box-shadow: 0 0 10px rgba(226, 59, 59, .7);
}
.ogp h2 {
  margin-top: 14px;
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800; font-stretch: normal;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: .95; letter-spacing: .012em;
  text-transform: uppercase; overflow-wrap: normal;
}
.ogp h3 {
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 700; font-stretch: normal;
  font-size: 1.35rem; line-height: 1.05; letter-spacing: .02em;
  text-transform: uppercase;
}
.ogp-lead { margin-top: 16px; max-width: 56ch; color: #B4B7BF; font-size: 16.5px; line-height: 1.65; }
.ogp-head { margin-bottom: clamp(30px, 4vw, 48px); }
.ogp-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }

/* buttons — the hero's plating, reused */
.ogp .btn {
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 27px; border-radius: 3px; display: inline-block;
  transition: transform .25s, filter .25s, border-color .25s, background .25s;
}
.ogp .btn-primary {
  color: #fff; background: linear-gradient(180deg, #E23B3B, #9C1519);
  border: 1px solid rgba(255, 120, 110, .30);
  box-shadow: 0 12px 28px rgba(190, 30, 35, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ogp .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.12); }
.ogp .btn-ghost { color: #D8DCE3; border: 1px solid #3A3D46; background: rgba(255, 255, 255, .03); }
.ogp .btn-ghost:hover { transform: translateY(-2px); border-color: #6E7480; background: rgba(255, 255, 255, .06); }
.ogp .btn-light { background: #fff; color: #5A0612; }
.ogp .btn-light:hover { transform: translateY(-2px); background: #F3DDDD; }
.ogp .btn-ghostlight { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.ogp .btn-ghostlight:hover { transform: translateY(-2px); border-color: #fff; background: rgba(255, 255, 255, .08); }

/* trust strip */
.ogp-trust { background: #0C0D10; border-block: 1px solid rgba(255, 255, 255, .07); }
.ogp-trust__in {
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
  padding-block: 15px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: #8F939C;
}
.ogp-trust__in span { padding-inline: 20px; border-left: 1px solid rgba(255, 255, 255, .09); white-space: nowrap; }
.ogp-trust__in span:first-child { border-left: 0; }

/* services grid */
.ogp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ogp-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px 24px;
  background: #101116; border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px;
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), border-color .25s, background-color .25s;
}
.ogp-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, #E23B3B, rgba(226, 59, 59, 0) 80%);
  opacity: 0; transition: opacity .25s;
}
.ogp-card:hover { transform: translateY(-4px); border-color: rgba(226, 59, 59, .4); background: #12141A; }
.ogp-card:hover::before { opacity: 1; }
.ogp-card img {
  /* custom chrome/red renders with the dark ground baked in */
  width: 78px; height: 78px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
}
.ogp-card:hover img { border-color: rgba(226, 59, 59, .45); }
.ogp-card p { color: #B4B7BF; font-size: 15px; line-height: 1.6; }
.ogp-card__go {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; gap: 8px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #E23B3B;
}
.ogp-more { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* why — 2x2 promise cards over a full-width stat bar */
.ogp-whygrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ogp-whycard {
  position: relative; overflow: hidden;
  padding: 30px 28px 28px;
  background: linear-gradient(180deg, #12141A, #0E1013);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px;
  transition: transform .25s var(--ease), border-color .25s;
}
.ogp-whycard::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 2px; background: #E23B3B;
}
.ogp-whycard:hover { transform: translateY(-4px); border-color: rgba(226, 59, 59, .4); }
.ogp-whycard h3 { font-size: 1.45rem; }
.ogp-whycard p { margin-top: 12px; color: #B4B7BF; font-size: 15.5px; line-height: 1.65; max-width: 58ch; }
.ogp-statbar {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #101116; border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px;
}
.ogp-statcell { padding: 28px 20px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .07); }
.ogp-statcell:first-child { border-left: 0; }
.ogp-statcell b {
  display: block;
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: .01em;
}
.ogp-statcell span {
  display: block; margin-top: 8px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #8F939C;
}

/* reviews — full-bleed quote carousel over the shop building */
.ogp-revband {
  position: relative; overflow: hidden;
  background: #0A0A0D;
  border-block: 1px solid rgba(255, 255, 255, .05);
}
.ogp-revband__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ogp-revband__bg img {
  position: absolute; right: 0; top: 0;
  width: min(58vw, 980px); height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(.85) brightness(.78) contrast(1.05);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 55%);
}
.ogp-revband::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, #0A0A0D 40%, rgba(10, 10, 13, .7) 62%, rgba(10, 10, 13, .2) 100%),
    radial-gradient(700px 420px at 8% 10%, rgba(142, 18, 24, .22), transparent 60%);
}
.ogp-revband__in { position: relative; z-index: 2; padding-block: clamp(30px, 3.6vw, 52px); }
.ogp-stars { position: relative; display: inline-block; font-size: 22px; letter-spacing: 4px; line-height: 1; }
.ogp-stars__base { color: rgba(255, 255, 255, .18); }
.ogp-stars__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  overflow: hidden; white-space: nowrap;
  color: #E23B3B;
  text-shadow: 0 0 14px rgba(226, 59, 59, .45);
}
.ogp-revband__stars { display: inline-block; margin-bottom: 14px; }
.ogp-revband__kick {
  display: block; margin-bottom: 28px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: #E23B3B;
}
.ogp-revcar { display: grid; max-width: 720px; }
.ogp-revslide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.ogp-revslide.is-on { opacity: 1; pointer-events: auto; }
html:not(.js) .ogp-revcar { display: block; }
html:not(.js) .ogp-revslide { opacity: 1; pointer-events: auto; margin-bottom: 26px; }
.ogp-revslide blockquote {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.1rem, .95rem + .75vw, 1.45rem);
  line-height: 1.45;
  color: #EFEDE8;
}
.ogp-revslide figcaption {
  margin-top: 18px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #9DA2AC;
}
.ogp-revband__ctrl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.ogp-revband__btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .02);
  color: #EFEDE8; font-size: 22px; line-height: 1;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.ogp-revband__btn:hover { border-color: #E23B3B; background: rgba(226, 59, 59, .12); transform: translateY(-2px); }
.ogp-revband__dots { display: flex; gap: 10px; }
[data-rev-dot] {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .22);
  transition: background-color .2s, transform .2s;
}
[data-rev-dot].is-on { background: #E23B3B; transform: scale(1.25); box-shadow: 0 0 10px rgba(226, 59, 59, .6); }
@media (max-width: 1000px) {
  .ogp-revband__bg img { width: 100%; opacity: .3; }
}

/* hours & location — one info card + the map */
.ogp-visit { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: stretch; }
.ogp-visit__info {
  background: #101116; border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px;
  padding: 28px 26px;
}
.ogp-visit__info address { font-style: normal; font-size: 17px; line-height: 1.55; margin-top: 20px; }
.ogp-visit__tel {
  display: block; margin-top: 14px;
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: .02em;
  color: #EFEDE8; text-decoration: none;
  transition: color .2s;
}
.ogp-visit__tel:hover { color: #FF6B57; }
.ogp-visit__dir {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #E23B3B; text-decoration: none;
}
.ogp-hourshead {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ogp-hourshead > b {
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.ogp-visit__info table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 18px; }
.ogp-visit__info td { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ogp-visit__info td:last-child {
  text-align: right;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 12px; letter-spacing: .06em; color: #C9CDD5;
}
.ogp-visit__info tr.is-today td { color: #fff; }
.ogp-visit__info tr.is-today td:first-child::after { content: " \2022"; color: #E23B3B; }
.ogp-visit__map { border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px; overflow: hidden; min-height: 340px; }
.ogp-visit__map iframe {
  display: block; width: 100%; height: 100%; min-height: 340px;
  filter: invert(.9) hue-rotate(180deg) grayscale(.25) contrast(.92);
}

/* CTA banner — the "Fix it." digit field + buttons */
.ogp-cta {
  position: relative; overflow: hidden;
  background: #0A0A0D;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .013) 0 1px, transparent 1px 7px);
}
.ogp-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(720px 420px at 12% 24%, rgba(142, 18, 24, .24), transparent 62%);
}
.ogp-cta__in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 28px 44px; flex-wrap: wrap;
  padding-block: clamp(36px, 4.5vw, 60px);
}
.ogp-cta__fx {
  --digit: #F2F4F6; /* near-white, not pure — reads brighter at rest */
  --digit-hot: #FF5960;
  position: relative; /* anchors the bleed canvas */
  flex: 1 1 520px; min-width: 300px;
  height: clamp(110px, 12vw, 170px);
  touch-action: none;
}
.ogp-cta__fx canvas { display: block; width: 100%; height: 100%; }
html.js .ogp-cta__fallback { display: none; }
.ogp-cta__fallback {
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800; font-stretch: normal; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: #EFEDE8;
}
.ogp-cta__btns { display: flex; flex-direction: column; gap: 14px; }
.ogp-cta__btns .btn { text-align: center; }
@media (max-width: 760px) {
  .ogp-cta__fx { flex-basis: 100%; height: clamp(90px, 20vw, 130px); }
  .ogp-cta__btns { flex-direction: row; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
}

@media (max-width: 1000px) {
  .ogp-cards { grid-template-columns: 1fr 1fr; }
  .ogp-statbar { grid-template-columns: 1fr 1fr; }
  .ogp-statcell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .07); }
  .ogp-statcell:nth-child(3) { border-left: 0; }
  .ogp-visit { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ogp-cards { grid-template-columns: 1fr; }
  .ogp-whygrid { grid-template-columns: 1fr; }
  .ogp-quotes { grid-template-columns: 1fr; }
  .ogp-visit { grid-template-columns: 1fr; }
  .ogp-trust__in { justify-content: flex-start; row-gap: 8px; }
  .ogp-trust__in span { padding-inline: 12px; }
  .ogp-trust__in span:first-child { padding-left: 0; }
}

/* fit check — "will they work on my thing?" */
.fit { border-bottom: 1px solid var(--line); background: var(--bg); padding-top: 18px; }
.fit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fit__cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 150px;
  padding: 26px 26px 24px 0;
  text-decoration: none;
  border-left: 1px solid var(--line);
  padding-left: 26px;
  transition: background-color 160ms ease-out;
}
.fit__cell:first-child { border-left: 0; padding-left: 0; }
.fit__cell:hover { background: var(--bg-2); }
.fit__cell:hover .fit__go { transform: translateX(5px); color: var(--red); }
.fit__top { display: flex; justify-content: space-between; align-items: baseline; }
.fit__label {
  font-family: var(--f-display);
  font-weight: 780; font-stretch: 108%;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .015em;
  line-height: 1.2;
  color: var(--ink);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.fit__go { color: var(--ink-3); transition: transform 160ms ease-out, color 160ms ease-out; }
@media (max-width: 980px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit__cell { border-top: 1px solid var(--line); }
  .fit__cell:nth-child(-n+2) { border-top: 0; }
  .fit__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fit__cell:nth-child(even) { padding-left: 26px; }
}
@media (max-width: 560px) {
  .fit__cell { gap: 18px; padding-block: 18px; }
}

/* credentials strip */
.creds { border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.creds__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 0;
  padding-block: 15px;
}
.creds__item { display: inline-flex; align-items: center; }
.creds__item .k { color: var(--ink-2); font-size: .71rem; }
.creds__item + .creds__item::before {
  content: ""; display: inline-block;
  width: 1px; height: 12px; background: var(--line-2);
  margin-inline: 16px;
}
@media (max-width: 700px) {
  .creds__in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding-block: 18px; }
  .creds__item + .creds__item::before { display: none; }
}

/* =====================================================================
   HOME SECTIONS
   ===================================================================== */

/* trade rows */
.trade { border-top: 1px solid var(--line); padding-block: clamp(40px, 4.5vw, 64px); }
.trade:first-of-type { border-top: 0; padding-top: 0; }
.trade__grid { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .trade__grid { grid-template-columns: 120px minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); }
}
.trade__idx {
  font-family: var(--f-mono); font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em; color: var(--red);
}
.trade__idx span { display: block; color: var(--ink-3); margin-top: 6px; font-size: .71rem; }
.trade h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin-bottom: 14px; text-transform: uppercase; }
.trade p { color: var(--ink-2); margin-bottom: 22px; }
.trade__jobs {
  columns: 2; column-gap: 40px;
  margin-bottom: 26px;
  max-width: 560px;
}
.trade__jobs li {
  break-inside: avoid;
  font-family: var(--f-mono); font-weight: 500;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.trade__photo { align-self: start; }
.trade__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.9);
}
.trade__photo figcaption { margin-top: 10px; }
@media (max-width: 959px) {
  .trade__photo { max-width: 420px; }
  .trade__jobs { columns: 1; }
  .trade__jobs { column-gap: 0; }
}
@media (max-width: 640px) { .trade__jobs { columns: 1; } }
@media (min-width: 641px) and (max-width: 959px) { .trade__jobs { columns: 2; } }

/* platform wall — the parts-book page */
.wall {
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wall__col { padding: 28px 28px 32px; border-left: 1px solid var(--line); }
.wall__col:first-child { border-left: 0; }
.wall__col h3 {
  font-family: var(--f-mono); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.wall__col li {
  font-family: var(--f-mono); font-weight: 500;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--ink-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.wall__col li:last-child { border-bottom: 0; }
.wall__col li b { color: var(--ink); font-weight: 600; }
.wall__foot {
  border-top: 1px solid var(--line);
  padding: 18px 28px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
}
@media (max-width: 980px) {
  .wall__grid { grid-template-columns: 1fr 1fr; }
  .wall__col { border-top: 1px solid var(--line); }
  .wall__col:nth-child(-n+2) { border-top: 0; }
  .wall__col:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .wall__grid { grid-template-columns: 1fr; }
  .wall__col { border-left: 0; border-top: 1px solid var(--line); }
  .wall__col:first-child { border-top: 0; }
}

/* process — how a repair goes */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.step { border-right: 1px solid var(--line); padding: 4px 26px 8px; }
.step__n {
  font-family: var(--f-mono); font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em; color: var(--red);
  display: block; margin-bottom: 20px;
}
.step h3 { font-size: 1.1875rem; text-transform: uppercase; margin-bottom: 12px; min-height: 2.4em; }
.step p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .step { border-bottom: 1px solid var(--line); padding: 22px 22px 26px; }
  .step h3 { min-height: 0; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* logistics — the drop-off spec table */
.logi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); background: var(--bg-2); }
.logi__cell { padding: 20px 24px; border-left: 1px solid var(--line); }
.logi__cell:nth-child(4n+1) { border-left: 0; }
.logi__cell:nth-child(n+5) { border-top: 1px solid var(--line); }
.logi__cell .k { display: block; margin-bottom: 6px; }
.logi__cell b { font-weight: 640; font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 980px) {
  .logi { grid-template-columns: 1fr 1fr; }
  .logi__cell:nth-child(4n+1) { border-left: 1px solid var(--line); }
  .logi__cell:nth-child(2n+1) { border-left: 0; }
  .logi__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .logi { grid-template-columns: 1fr; }
  .logi__cell { border-left: 0 !important; }
  .logi__cell:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* paper band (fleet) */
.paper { background: var(--paper); color: var(--ink-p); }
.paper h2, .paper h3 { color: var(--ink-p); }
.paper p { color: var(--ink-p2); }
.fleet__points { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line-p); border-top: 1px solid var(--line-p); }
.fleet__point {
  border-right: 1px solid var(--line-p); border-bottom: 1px solid var(--line-p);
  padding: 24px 26px 28px;
  background: var(--paper);
}
.fleet__point .k { display: block; color: var(--red-paper); margin-bottom: 10px; }
.fleet__point p { font-size: var(--fs-sm); color: var(--ink-p2); }
@media (max-width: 980px) { .fleet__points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fleet__points { grid-template-columns: 1fr; } }
.fleet__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* parts counter */
.counter__grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .counter__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.counter__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.counter__chips li {
  font-family: var(--f-mono); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 10px 16px;
}
.counter__tel { margin-top: 26px; }

/* story / visit */
.story__grid { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 960px) { .story__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; } }
.story__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.9);
}
.story__media figcaption { margin-top: 10px; }
.story__body h2 { margin-bottom: 20px; }
.story__body p { color: var(--ink-2); margin-bottom: 16px; }
.story__body .tlink { margin-top: 10px; }

/* visit / hours */
.visit__grid { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 960px) { .visit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hours { border: 1px solid var(--line); background: var(--bg-2); }
.hours__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
}
.hours table { width: 100%; border-collapse: collapse; }
.hours td {
  font-family: var(--f-mono); font-weight: 500;
  font-size: .8125rem; letter-spacing: .05em;
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.hours tr:first-child td { border-top: 0; }
.hours td:last-child { text-align: right; }
.hours tr.is-today td { color: var(--ink); background: rgba(255, 255, 255, .025); }
.hours tr.is-today td:first-child { position: relative; }
.hours tr.is-today td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--red-hi);
}
/* the visit panel is a CARD that mirrors the hours card beside it —
   address + directions on top, spec rows, then a labeled call row */
.visit__card { border: 1px solid var(--line); background: var(--bg-2); }
.visit__card-top { padding: 24px 26px 20px; }
.visit__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.visit__fact {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
/* inside the visit card the rows take the card's inset */
.visit__card .visit__fact { padding: 12px 26px; }
.visit__fact b { font-weight: 640; font-size: var(--fs-sm); overflow-wrap: anywhere; min-width: 0; }
/* the email never breaks mid-word — one line, slightly smaller */
.visit__fact--email b { font-size: 15px; white-space: nowrap; overflow-wrap: normal; }
.visit__fact--email b a { color: inherit; }
@media (max-width: 480px) {
  .visit__fact { grid-template-columns: 1fr; gap: 4px; }
}
.visit__facts--rule { border-top: 1px solid var(--line); }
.visit__call {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 26px;
}
.visit__tel {
  display: inline-block;
  font-family: var(--f-display); font-weight: 860; font-stretch: 112%;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  letter-spacing: .01em;
  text-decoration: none; color: var(--ink);
  transition: color 140ms ease-out;
}
.visit__tel:hover { color: var(--red-soft); }
.visit__addr-lines { display: grid; gap: 4px; margin-bottom: 14px; }
.visit__addr-lines b { font-size: var(--fs-lead); font-weight: 700; }

/* closing CTA band */
.band {
  background: var(--red-deep);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.band__in {
  display: grid; gap: 28px;
  padding-block: clamp(72px, 8vw, 120px);
}
@media (min-width: 960px) {
  .band__in { grid-template-columns: minmax(0, 7fr) auto; align-items: center; }
}
.band h2 { color: #fff; max-width: 18ch; }
.band .k { color: #F0B9BC; }
.band__k { display: block; margin-bottom: 18px; }
.band__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.band__note { margin-top: 16px; color: #E9C7C9; font-size: var(--fs-sm); max-width: 48ch; }

/* =====================================================================
   FOOTER — brand band with icon-led contact strip, link columns, legal
   bar. Structure modeled on the United Automotive footer; og voice.
   ===================================================================== */
.ftr {
  background: #08090B;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color: #A9ADB6;
}
.ftr a { text-decoration: none; }
.ftr__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 36px 28px;
  padding-block: clamp(44px, 5vw, 60px) clamp(40px, 5vw, 62px);
}
.ftr__cols h3 {
  position: relative;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #EFEDE8;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ftr__cols h3::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 28px; height: 2px; background: #E23B3B;
}
.ftr__cols ul { padding: 0; list-style: none; }
.ftr__cols li a {
  display: inline-block;
  font-size: .9rem; color: #A9ADB6;
  padding: 5px 0;
  transition: color 140ms ease-out;
}
.ftr__cols li a:hover { color: #fff; }
.ftr__bottom { border-top: 1px solid rgba(255, 255, 255, .07); background: #070809; }
.ftr__bottom-in {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between;
  padding-block: 18px;
  font-family: "Chakra Petch", "Barlow", monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: #8F939C;
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.ftr__legal a { color: #C9CDD5; }
.ftr__legal a:hover { color: #fff; }

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.phero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.phero__in {
  position: relative; z-index: 2;
  padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 88px);
  max-width: 780px;
}
.phero__k { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.phero h1 { margin-bottom: 20px; }
.phero .lead { max-width: 56ch; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.phero--media .phero__media {
  position: absolute; inset: 0 0 0 auto; width: min(46vw, 700px); height: 100%;
}
.phero--media .phero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) contrast(1.05) brightness(.82);
}
.phero--media .phero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(11, 12, 14, .8) 24%, rgba(11, 12, 14, .18) 70%, rgba(11, 12, 14, .42) 100%);
}
@media (max-width: 860px) {
  .phero--media .phero__media { position: relative; width: 100%; height: 240px; order: 2; }
  .phero--media .phero__media::before { background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 12, 14, .25) 40%, rgba(11, 12, 14, .2) 100%); }
}

/* breadcrumb */
.crumb { padding-top: 24px; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumb a { text-decoration: none; transition: color 140ms ease-out; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--line-2); margin-inline: 4px; }

/* service catalogue rows */
.svc { border-top: 1px solid var(--line); padding-block: clamp(36px, 4vw, 56px); scroll-margin-top: 90px; }
.svc:first-of-type { border-top: 0; }
.svc__grid { display: grid; gap: 24px; }
@media (min-width: 920px) { .svc__grid { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } }
.svc__meta .k { display: block; }
.svc__meta img {
  /* custom chrome/red renders, dark ground baked in */
  width: 96px; height: 96px; object-fit: cover;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.svc h3 { margin-bottom: 10px; text-transform: uppercase; }
.svc__short { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: 14px; }
.svc p { color: var(--ink-2); }
.svc__items { margin-top: 18px; }
.svc__items li {
  font-family: var(--f-mono); font-weight: 500;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
/* warranty: covered / not-covered lists */
.warr h3 { margin-bottom: 14px; }
.wlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wlist li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.6; }
.wlist li::before { position: absolute; left: 2px; top: 12px; font-family: var(--f-mono); font-weight: 600; }
.wlist--yes li::before { content: "\2713"; color: var(--red); }
.wlist--no li { color: var(--ink-2); }
.wlist--no li::before { content: "\00d7"; color: #8F939C; }

/* FAQ — native details */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--f-display); font-weight: 740; font-stretch: 106%;
  font-size: 1.0938rem; letter-spacing: .01em;
  transition: color 140ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-soft); }
.faq summary .faq__ic { position: relative; flex: none; width: 14px; height: 14px; color: var(--red); }
.faq summary .faq__ic::before, .faq summary .faq__ic::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 240ms var(--ease-drawer);
}
.faq summary .faq__ic::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq summary .faq__ic::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq details[open] summary .faq__ic::after { transform: scaleY(0); }
.faq details p { color: var(--ink-2); padding-bottom: 24px; max-width: 62ch; }

/* stat row (about) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); }
.stat { border-right: 1px solid var(--line); padding: 8px 26px 12px; }
.stat b {
  display: block;
  font-family: var(--f-display); font-weight: 860; font-stretch: 114%;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.125rem);
  line-height: 1;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--line); }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
}

/* gallery */
.gal__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.gal__filters button {
  font-family: var(--f-mono); font-weight: 600;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 10px 18px;
  transition: color 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}
.gal__filters button:hover { color: var(--ink); border-color: var(--ink-3); }
.gal__filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gal__item { position: relative; margin: 0; }
.gal__item.is-hidden { display: none; }
.gal__item button { display: block; width: 100%; }
.gal__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.92);
  transition: filter 200ms ease-out;
}
.gal__item button:hover img { filter: saturate(.95) contrast(1.05) brightness(1); }
.gal__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0), rgba(7, 8, 9, .82));
  text-align: left;
}
@media (max-width: 900px) { .gal__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .gal__grid { grid-template-columns: 1fr; } }

.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 5, 6, .88);
  padding: clamp(16px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; width: auto; height: auto; box-shadow: var(--shadow-overlay); }
.lightbox figcaption { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  color: var(--ink);
  font-family: var(--f-mono); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px;
  background: rgba(11, 12, 14, .6);
  border: 1px solid var(--line-2);
}
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--ink-3); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 44px);
}
.form-grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 8px; }
.field label { font-family: var(--f-mono); font-weight: 600; font-size: .71rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.field label b, .field .req { color: var(--red); font-weight: 600; }
.field .opt { color: var(--ink-3); font-weight: 500; }
.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 13px 14px;
  font-size: 1rem;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
.input:hover { border-color: var(--ink-3); }
.input:focus { border-color: var(--red); outline: none; }
.input::placeholder { color: var(--ink-3); }
textarea.input { min-height: 130px; resize: vertical; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238D939B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field__hint { font-size: .8125rem; color: var(--ink-3); }
.field--file .input-file { display: none; }
.file-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px dashed var(--line-2);
  padding: 12px 16px;
  font-size: var(--fs-sm); color: var(--ink-2);
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.file-btn:hover { border-color: var(--ink-3); color: var(--ink); }
[data-file-name] { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); word-break: break-all; }

.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.form-note { font-size: .8125rem; color: var(--ink-3); max-width: 46ch; }
.form-error {
  display: none;
  border: 1px solid var(--red);
  border-left: 3px solid var(--red);
  background: rgba(199, 28, 52, .08);
  color: var(--ink);
  padding: 14px 16px;
  font-size: var(--fs-sm);
}
.form-error.is-shown { display: block; }
.form-success { display: none; padding: clamp(28px, 5vw, 48px) 0; }
.form-success.is-shown { display: block; }
.form-success__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ok); color: var(--ok);
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.form-success h3 { margin-bottom: 12px; }
.form-success p { color: var(--ink-2); margin-bottom: 8px; }
.form-success [data-booked-note] { color: var(--ink); border: 1px solid var(--line-2); padding: 12px 16px; margin: 16px 0; display: inline-block; }
.turnstile-wrap { min-height: 0; }

/* honeypot — visually removed, still focusable-off */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- wizard */
.wiz-dots { display: flex; gap: 0; margin-bottom: 30px; border: 1px solid var(--line); }
.wiz-dots button {
  flex: 1;
  display: grid; gap: 4px; justify-items: start;
  padding: 12px 14px;
  border-left: 1px solid var(--line);
  text-align: left;
  color: var(--ink-3);
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.wiz-dots button:first-child { border-left: 0; }
.wiz-dots button .k { color: inherit; font-size: .65rem; }
.wiz-dots button .wiz-dots__t { font-weight: 700; font-size: .8125rem; letter-spacing: .03em; text-transform: uppercase; }
.wiz-dots button.is-reachable { color: var(--ink-2); }
.wiz-dots button.is-reachable:hover { background: var(--bg-3); }
.wiz-dots button.is-done { color: var(--ink-2); }
.wiz-dots button.is-current { color: var(--ink); box-shadow: inset 0 2px 0 var(--red-hi); background: var(--bg-3); }
@media (max-width: 860px) {
  .wiz-dots { display: grid; grid-template-columns: repeat(5, 1fr); }
  .wiz-dots button .wiz-dots__t { display: none; }
  .wiz-dots button { padding: 10px 0 10px 10px; }
}

.wiz-step__title { margin-bottom: 8px; text-transform: uppercase; }
.wiz-step__sub { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: 24px; }

.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .svc-cards { grid-template-columns: 1fr; } }
.svc-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  padding: 12px 14px;
  text-align: left;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
.svc-card:hover { border-color: var(--ink-3); }
.svc-card img { width: 52px; height: 52px; object-fit: cover; flex: none; border-radius: 4px; }
.svc-card b { font-weight: 640; font-size: .875rem; line-height: 1.3; }
.svc-card .svc-card__tick {
  position: absolute; top: -1px; right: -1px;
  width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center;
  background: var(--red-hi); color: #fff;
  font-size: .75rem;
}
.svc-card.is-on { border-color: var(--red-hi); background: rgba(199, 28, 52, .07); }
.svc-card.is-on .svc-card__tick { display: flex; }

.wiz-nav { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.wiz-nav .btn[data-wiz-back] { margin-right: auto; }
.wiz-note { font-size: .8125rem; color: var(--ink-3); }

.wiz-summary { border: 1px solid var(--line-2); background: var(--bg); padding: 18px 20px; margin-bottom: 22px; }
.wiz-summary__title { font-family: var(--f-mono); font-weight: 600; font-size: .71rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.wiz-summary__row { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.wiz-summary__row span { color: var(--ink-3); flex: none; }
.wiz-summary__row b { font-weight: 640; text-align: right; }

/* ------------------------------------------------------------- scheduler */
.sched { display: grid; gap: 24px; }
@media (min-width: 860px) { .sched__cols { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; } }
.sched__loading { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: var(--fs-sm); padding: 24px 0; }
.sched__spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cal { border: 1px solid var(--line-2); background: var(--bg); }
.cal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; border-bottom: 1px solid var(--line); }
.cal__head b { font-weight: 640; font-size: .9375rem; }
.cal__btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--ink-2);
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.cal__btn:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.cal__btn:disabled { opacity: .35; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 10px; }
.cal__dow { text-align: center; font-family: var(--f-mono); font-weight: 600; font-size: .625rem; letter-spacing: .06em; color: var(--ink-3); padding: 6px 0; }
.cal__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 500; font-size: .78rem;
  color: var(--ink-2);
}
span.cal__day.is-out { color: var(--line-2); }
span.cal__day.is-off { color: var(--ink-3); opacity: .45; }
button.cal__day.is-avail { border: 1px solid var(--line-2); color: var(--ink); transition: border-color 120ms ease-out, background-color 120ms ease-out; }
button.cal__day.is-avail:hover { border-color: var(--ink-3); }
button.cal__day.is-sel { background: var(--red-hi); border-color: var(--red-hi); color: #fff; }

.sched__times-label { font-family: var(--f-mono); font-weight: 600; font-size: .71rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.sched__times-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.time-pill {
  border: 1px solid var(--line-2);
  padding: 11px 8px;
  font-family: var(--f-mono); font-weight: 500; font-size: .78rem; letter-spacing: .03em;
  color: var(--ink-2);
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.time-pill:hover { border-color: var(--ink-3); color: var(--ink); }
.time-pill[aria-pressed="true"] { background: var(--red-hi); border-color: var(--red-hi); color: #fff; }

.sched__confirm {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--ok);
  padding: 14px 16px;
  font-size: var(--fs-sm);
}
.sched__confirm b { display: block; }
.sched__confirm span { color: var(--ink-3); font-size: .8125rem; }
.sched__confirm-ic { color: var(--ok); }
.sched__clear {
  margin-left: auto; flex: none;
  color: var(--ink-2); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  transition: color 140ms ease-out;
}
.sched__clear:hover { color: var(--ink); }

/* =====================================================================
   MOTION — the transition system
   One vocabulary everywhere: fade. Pages cross-fade into each other,
   the first load fades up from the page ground, sections fade in once,
   and the hero fades down as it scrolls away.
   ===================================================================== */

/* 1 · between pages — MPA view-transition cross-fade */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 200ms; animation-timing-function: ease-out; }
::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease-out; }

/* 2 · first arrival — a ground-colored veil fades off the page.
   A veil (not a body fade) so fixed/sticky chrome keeps its containing
   block. Skipped when a view transition already owns the fade (html.vt-in,
   set by the inline pagereveal hook), and for no-JS visitors. */
.js .page-veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  pointer-events: none;
  animation: veil-out 300ms ease-out 40ms both;
}
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }
html:not(.js) .page-veil, html.vt-in .page-veil { display: none; }

/* 3 · in-page anchors glide instead of jumping */
html { scroll-behavior: smooth; }

/* 4 · sections — fade in once, never re-trigger on scroll-up */
.js .rv { opacity: 0; transform: translateY(10px); }
.js .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .rv--d1.is-in { transition-delay: 70ms; }
.js .rv--d2.is-in { transition-delay: 140ms; }
.js .rv--d3.is-in { transition-delay: 210ms; }



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; transform: none; }
  /* view-transition fades are progress-mapped, not time-mapped — the
     global duration kill above cannot neutralize them */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .js .page-veil { display: none; }
}

/* =====================================================================
   MISC
   ===================================================================== */
.map-embed { display: block; margin-top: 16px; border: 1px solid var(--line);
  filter: invert(.9) hue-rotate(180deg) grayscale(.25) contrast(.92);
  width: 100%; height: 340px; }
.noscript-bar { background: var(--bg-2); border-bottom: 1px solid var(--line-2); padding: 14px var(--pad); font-size: var(--fs-sm); }
.noscript-bar a { color: var(--red-soft); }

/* text pages (privacy etc.) */
.prose h2 { font-size: 1.375rem; margin: 36px 0 12px; }
.prose p { color: var(--ink-2); margin-bottom: 14px; }

@media print {
  .header, .util, .callbar, .footer__cols, .band, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
}