:root {
  --night:  #141414;
  --jet:    #292929;
  --coal:   #1e1e1e;
  --accent: #D87838;
  --gold:   #F0E050;

  --color-accent-text: #9e5220;   /* 5.15:1 on #F5F3EF, 5.56:1 on #FBFCFF */
  --accent-on-dark:    #E08B4E;   /* 5.52:1 on #292929, 6.99:1 on #141414 */
  --on-accent: #141414;           /* 5.85:1 on #D87838 */
  --on-gold:   #141414;           /* 13.58:1 on #F0E050 */

  --paper:  #FBFCFF;
  --muted:  #F5F3EF;
  --ink:    #1b1b1b;
  --ink-2:  #4a4a4a;
  --line:   #ddd8cf;
  --line-dark: #3a3a3a;

  --focus-ring: #9e5220;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  --font-head: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --fw-head: 600;
  --fw-body: 400;

  --r: 4px;
  --r-btn: 10px;
  --r-img: 8px;
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;
  --sp-12: 5rem;   --sp-16: 7rem;

  --header-h: 69px;

  --dur-base: 260ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --grain-hi: radial-gradient(rgba(255,255,255,.04) 1px, rgba(255,255,255,0) 1.35px);
  --grain-size: 6px 6px;

  --lift-dark: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 44px -30px rgba(0,0,0,.95);
  --lift-light: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 30px -22px rgba(20,20,20,.30);
  --lift-dark-hover: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 56px -28px rgba(0,0,0,1);
  --lift-light-hover: inset 0 1px 0 rgba(255,255,255,.95), 0 22px 42px -24px rgba(20,20,20,.38);

  color-scheme: light;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  line-height: 1.08;
  letter-spacing: .002em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--night); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.skip-link { background: var(--accent); color: var(--on-accent); font-family: var(--font-head); letter-spacing: .06em; text-transform: uppercase; }

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

.band { padding-block: clamp(3rem, 7vw, 6rem); position: relative; }
/* The header is sticky, so anything reached by an #anchor has to hold itself clear of it. The band's
   own top padding is enough on desktop but floors at 3rem below ~686px, which is under --header-h.
   Nothing sets scroll-padding on the root, so this does not stack with anything. */
section[id] { scroll-margin-top: calc(var(--header-h) + .75rem); }
.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band--night, .band--jet {
  color: var(--paper);
  --focus-ring: #F0E050;
  background-image: var(--grain-hi),
                    radial-gradient(120% 72% at 50% -12%, rgba(255,255,255,.055), rgba(255,255,255,0) 62%);
  background-size: var(--grain-size), auto;
  background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.band--night { background-color: var(--night); }
.band--jet { background-color: var(--jet); }
.band--muted {
  background-color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.band--night h1, .band--night h2, .band--night h3, .band--jet h2, .band--jet h3 { color: var(--paper); }
.band--night a:not(.btn), .band--jet a:not(.btn) { color: var(--accent-on-dark); }
.band--night a:not(.btn):hover, .band--jet a:not(.btn):hover { color: var(--paper); }

/* 4.70:1 worst-case for --accent-on-dark at the .85 overlay stop */
.band--photo {
  background-color: var(--night);
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: cover;
  background-image: url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis.jpg);
  background-image: image-set(
    url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis.webp) type("image/webp"),
    url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis.jpg)  type("image/jpeg"));
  border-block: 1px solid var(--line-dark);
}
.band--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-hi),
    linear-gradient(180deg,
      rgba(20,20,20,.97) 0%,
      rgba(20,20,20,.94) 26%,
      rgba(20,20,20,.85) 48%,
      rgba(20,20,20,.87) 74%,
      rgba(20,20,20,.96) 100%);
  background-size: var(--grain-size), auto;
  pointer-events: none;
}
.band--photo > .wrap { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .band--photo {
    background-position: 34% 50%;
    background-image: url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis-m.jpg);
    background-image: image-set(
      url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis-m.webp) type("image/webp"),
      url(../../images/Photos/gm-technicians-under-hood-north-little-rock-arkansas-engine-bay-diagnosis-m.jpg)  type("image/jpeg"));
  }
}

.rule { width: 56px; height: 4px; background: var(--accent); border: 0; margin: var(--sp-5) 0 var(--sp-5); }
.band--night .rule, .band--jet .rule { background: var(--accent); }

.eyebrow {
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 90px; }
.band--night .eyebrow, .band--jet .eyebrow, .hero .eyebrow, .pagehead .eyebrow,
.ctaband .eyebrow, .site-footer .eyebrow, .textus .eyebrow { color: var(--accent-on-dark); }
.band--night .eyebrow::after, .band--jet .eyebrow::after, .hero .eyebrow::after,
.pagehead .eyebrow::after, .ctaband .eyebrow::after { background: var(--line-dark); }

.lead { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.35rem); color: var(--ink-2); max-width: 62ch; }
.band--night .lead, .band--jet .lead { color: #c9c9c9; }

.sec-head { max-width: 72ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head.center { margin-inline: auto; }

img, picture { border-radius: var(--r-img); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .82rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { box-shadow: 0 0 0 1px var(--paper) inset; }
.btn svg { flex: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

.btn-gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-gold:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.btn-ghost { background: transparent; color: var(--color-accent-text); border-color: currentColor; }
.btn-ghost:hover { background: var(--color-accent-text); color: var(--paper); }
.band--night .btn-ghost, .band--jet .btn-ghost, .hero .btn-ghost, .pagehead .btn-ghost,
.ctaband .btn-ghost, .site-header .btn-ghost, .nav-mobile .btn-ghost, .textus .btn-ghost { color: var(--paper); border-color: #7a7a7a; }
.band--night .btn-ghost:hover, .band--jet .btn-ghost:hover, .hero .btn-ghost:hover, .pagehead .btn-ghost:hover,
.ctaband .btn-ghost:hover, .site-header .btn-ghost:hover, .nav-mobile .btn-ghost:hover, .textus .btn-ghost:hover { background: var(--paper); color: var(--night); border-color: var(--paper); }

.btn-lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--night);
  border-bottom: 1px solid var(--line-dark);
  --focus-ring: #F0E050;
}
.site-header__inner {
  max-width: 1360px;
  margin-inline: auto;
  padding: .55rem var(--gut);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 46px; width: auto; border-radius: 0; }

.nav-desktop { margin-left: auto; display: none; }
.nav-desktop > ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav-desktop a {
  display: block;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ededed;
  text-decoration: none;
  padding: .7rem .5rem;
  border-bottom: 3px solid transparent;
}
@media (min-width: 1300px) { .nav-desktop a { font-size: .9375rem; padding: .7rem .68rem; } }
.nav-desktop a:hover { color: var(--accent-on-dark); }
.nav-desktop a[aria-current="page"] { color: var(--accent-on-dark); border-bottom-color: var(--accent); }
.nav-desktop .has-dropdown { position: relative; }
.nav-desktop .has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: .38em; height: .38em;
  margin-left: .42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-desktop .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 252px;
  background: var(--jet);
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--accent);
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-desktop .has-dropdown:hover .dropdown,
.nav-desktop .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-desktop .dropdown a { border-bottom: 0; padding: .55rem 1.1rem; font-size: .875rem; text-transform: none; letter-spacing: .02em; font-family: var(--font-body); }
.nav-desktop .dropdown a:hover { background: var(--coal); color: var(--accent-on-dark); }
.nav-desktop .dropdown--wide { min-width: 470px; display: grid; grid-template-columns: 1fr 1fr; column-gap: .25rem; }
.nav-desktop .dropdown--wide li:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line-dark); margin-bottom: .3rem; padding-bottom: .3rem; }
.nav-desktop .dropdown--wide li:first-child a { color: var(--accent-on-dark); font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; }
.nav-desktop li:last-child .dropdown { left: auto; right: 0; }

.nav-cta { display: none; gap: .5rem; flex: none; }
.nav-cta .btn { padding: .55rem .92rem; font-size: 1.0625rem; }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-btn);
  color: var(--paper);
  cursor: pointer;
}

@media (min-width: 1140px) {
  .nav-desktop { display: block; }
  .nav-cta { display: flex; }
  .nav-toggle { display: none; }
}

.nav-mobile {
  background: var(--night);
  color: var(--paper);
  padding: var(--sp-16) var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent);
  overflow-y: auto;
  --focus-ring: #F0E050;
}
.nav-mobile__close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  color: var(--paper);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile > ul > li { border-bottom: 1px solid var(--line-dark); }
.nav-mobile ul a, .nav-mobile summary {
  display: block;
  padding: .9rem 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
}
.nav-mobile ul a:hover, .nav-mobile summary:hover { color: var(--accent-on-dark); }
.nav-mobile ul a[aria-current="page"] { color: var(--accent-on-dark); }
.nav-mobile details ul { padding: 0 0 .6rem .9rem; border-left: 2px solid var(--line-dark); margin-bottom: .6rem; }
.nav-mobile details ul a { font-family: var(--font-body); font-size: .95rem; text-transform: none; letter-spacing: 0; padding: .45rem 0; color: #d0d0d0; }
.nav-mobile summary { list-style: none; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary::after {
  content: "";
  float: right;
  width: .45em; height: .45em;
  margin-top: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
}
.nav-mobile details[open] summary::after { transform: rotate(-135deg); }
.nav-mobile__cta { display: grid; gap: .6rem; margin-top: var(--sp-5); }

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--night);
  border-top: 3px solid var(--accent);
  /* Lifts the bar off whatever dark section is scrolling under it. Without this
     the bar and a --night band below it read as one flat surface. */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .45);
  --focus-ring: #F0E050;
}
.callbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .55rem .3rem calc(.55rem + env(safe-area-inset-bottom));
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-right: 1px solid var(--line-dark);
}
.callbar a:last-child { border-right: 0; }
.callbar a:hover { color: var(--accent-on-dark); background: var(--coal); }
/* Hairline icons disappear on a near-black ground: a 1.6 stroke at 20px is
   optically thinner than the same stroke on white. Bigger, heavier, and in the
   accent rather than paper, so the icon carries the target and the label reads
   as the caption underneath it. */
.callbar svg {
  width: 24px; height: 24px;
  stroke-width: 2.1;
  color: var(--accent-on-dark);
}
.callbar a:hover svg,
.callbar a:focus-visible svg { color: var(--paper); }
@media (min-width: 1140px) { .callbar { display: none; } }
/* Must clear the .callbar, which grew when the icons did. Too small and the
   last element on the page sits under the bar. */
@media (max-width: 1139px) { body { padding-bottom: 72px; } }

.hero {
  position: relative;
  background-color: var(--night);
  color: var(--paper);
  overflow: clip;
  --focus-ring: #F0E050;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -3%;
  z-index: 0;
  background-position: 46% 44%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift.jpg);
  background-image: image-set(
    url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift.webp) type("image/webp"),
    url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift.jpg)  type("image/jpeg"));
  animation: plate-drift 34s ease-in-out infinite alternate;
}
/* 5.62:1 worst-case for --accent-on-dark at the .88 wash stop */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain-hi),
    linear-gradient(90deg, rgba(20,20,20,.96) 0%, rgba(20,20,20,.93) 42%, rgba(20,20,20,.88) 78%, rgba(20,20,20,.93) 100%),
    linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 34%, rgba(20,20,20,.45) 100%);
  background-size: var(--grain-size), auto, auto;
}
@media (max-width: 820px) {
  .hero::before {
    background-position: 42% 50%;
    background-image: url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift-m.jpg);
    background-image: image-set(
      url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift-m.webp) type("image/webp"),
      url(../../images/Photos/gm-repair-shop-bay-north-little-rock-arkansas-chevy-cruze-on-lift-m.jpg)  type("image/jpeg"));
  }
  .hero::after {
    background-image: var(--grain-hi),
      linear-gradient(180deg, rgba(20,20,20,.93) 0%, rgba(20,20,20,.90) 45%, rgba(20,20,20,.95) 100%);
    background-size: var(--grain-size), auto;
  }
}
@keyframes plate-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3.25rem, 8vw, 6rem) var(--gut) clamp(5.5rem, 10vw, 7.5rem);
}
.hero__body { max-width: 42rem; position: relative; }
.hero h1 { max-width: 20ch; margin: 0 0 var(--sp-5); }
.hero__cols { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.hero__main { min-width: 0; }
@media (min-width: 940px) {
  .hero__cols { grid-template-columns: 1.08fr .92fr; align-items: start; }
  .hero__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    align-self: start;
    border-left: 1px solid var(--line-dark);
    padding-left: clamp(1.75rem, 3vw, 3rem);
  }
}
.hero__map {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-btn);
  overflow: hidden;
  line-height: 0;
}
.hero__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
  filter: grayscale(.25) contrast(1.05);
}
@media (min-width: 940px) { .hero__map iframe { aspect-ratio: 16 / 11; } }
.hero__meta { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; }
.hero__meta > div { display: grid; gap: .2rem; }
.hero__meta dt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.hero__meta dt svg { width: 18px; height: 18px; flex: none; }
.hero__meta dd { margin: 0 0 0 1.65rem; font-size: 1.1875rem; color: var(--paper); }
.hero h1 { color: var(--paper); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.32rem); color: #dcdcdc; margin: var(--sp-5) 0 var(--sp-4); max-width: 48ch; }
.hero__sub--sm { font-size: 1.0625rem; color: #b6b6b6; margin-bottom: var(--sp-6); max-width: 52ch; }
@media (max-width: 899px) { .hero__inner { padding-bottom: clamp(4rem, 14vw, 6rem); } }
.pagehead {
  position: relative;
  background-color: var(--night);
  background-image: var(--grain-hi),
                    radial-gradient(115% 85% at 22% -18%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
  background-size: var(--grain-size), auto;
  background-repeat: repeat, no-repeat;
  color: var(--paper);
  overflow: hidden;
  --focus-ring: #F0E050;
}
.pagehead__inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 5.5vw, 4rem) var(--gut) clamp(3rem, 6vw, 4.5rem);
}
.pagehead__body { max-width: 44rem; position: relative; }
.pagehead h1 { color: var(--paper); max-width: 22ch; }
.pagehead .lead { color: #d6d6d6; margin-top: var(--sp-4); }
.pagehead .btn-row { margin-top: var(--sp-5); }
@media (max-width: 899px) { .pagehead__inner { padding-bottom: clamp(2.5rem, 9vw, 4rem); } }
.proof {
  background-color: var(--jet);
  background-image: var(--grain-hi);
  background-size: var(--grain-size);
  color: var(--paper);
}
.proof__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-5) var(--gut);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.proof__item { display: flex; align-items: center; gap: .7rem; }
.proof__item svg { width: 26px; height: 26px; color: var(--accent-on-dark); flex: none; }
.proof__item b { display: block; font-family: var(--font-head); font-size: 1.125rem; letter-spacing: .03em; }
.proof__item span { display: block; font-size: .9063rem; color: #c2c2c2; line-height: 1.4; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--team { max-width: 740px; }
/* Five team cards read as one row. The 740px cap resolved to three columns and orphaned 3 + 2.
   Breakpoint is 1200px, not 1140: below that the cards fall under 203px and "Jonathan Sperry"
   wraps to a second line, which makes that one card taller than the rest of the row. */
@media (min-width: 1200px) {
  .grid.grid--team { max-width: none; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
}

.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.split > div:not([class]) > h3 { margin-bottom: var(--sp-3); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
}
.split img { width: 100%; box-shadow: var(--lift-light); }
.band--night .split img, .band--jet .split img, .band--photo .split img { box-shadow: var(--lift-dark); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--lift-light);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--accent); transform: translateY(-5px); color: inherit; box-shadow: var(--lift-light-hover); }
.card__more svg { transition: transform var(--dur-base) var(--ease-out); }
.card--link:hover .card__more svg { transform: translateX(5px); }
.card__icon { color: var(--color-accent-text); }
.card__icon svg { width: 34px; height: 34px; }
.card h3 { margin: 0; }
.card p { color: var(--ink-2); font-size: 1.0313rem; }
.card__more {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: .9063rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card__more svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
.card--link:hover .card__more svg { transform: translateX(4px); }

/* A trailing catch-all card in a service grid. It spans the whole row so a fifth
   card never strands alone in a short column, and runs horizontally once there is
   room for it. */
.grid > .card--span { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .grid > .card--span { flex-direction: row; align-items: center; gap: var(--sp-5); }
  .grid > .card--span .card__icon { flex: 0 0 auto; display: inline-flex; }
  .grid > .card--span h3 { flex: 0 0 auto; }
  .grid > .card--span p { flex: 1 1 20rem; margin-block: 0; }
  .grid > .card--span .card__more { margin-top: 0; margin-inline-start: auto; flex: 0 0 auto; }
}

.band--night .card, .band--jet .card { background: var(--coal); border-color: var(--line-dark); color: var(--paper); box-shadow: var(--lift-dark); }
.band--night .card--link:hover, .band--jet .card--link:hover { box-shadow: var(--lift-dark-hover); }
.band--night .card p, .band--jet .card p { color: #b8b8b8; }
.band--night .card__icon, .band--jet .card__icon { color: var(--accent-on-dark); }
.band--night .card__more, .band--jet .card__more { color: var(--accent-on-dark); }
.band--night .card--link:hover, .band--jet .card--link:hover { border-color: var(--accent); }

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .card { grid-column: span 1; }
  .bento .card.card--wide { grid-column: span 2; }
  .bento .card.card--feature { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 899px) { .bento { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.bento .card--feature h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.bento .card--feature .card__icon svg { width: 46px; height: 46px; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; }
.checks svg { width: 20px; height: 20px; flex: none; margin-top: .22rem; color: var(--color-accent-text); }
.band--night .checks svg, .band--jet .checks svg { color: var(--accent-on-dark); }
.cols-2 { columns: 2; column-gap: var(--sp-5); }
@media (max-width: 640px) { .cols-2 { columns: 1; } }
.checks.cols-2 { columns: auto; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: var(--sp-6); }
.checks li { break-inside: avoid; }

.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .stats--pair { grid-template-columns: 1fr; } }
.stat { border-left: 4px solid var(--accent); padding-left: var(--sp-4); }
.band--night .stat, .band--jet .stat { border-left-color: var(--accent); }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; }
.stat span { display: block; font-size: 1rem; color: var(--ink-2); margin-top: .45rem; }
.band--night .stat span, .band--jet .stat span { color: #b6b6b6; }

.steps { counter-reset: s; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.steps--stack { grid-template-columns: 1fr; }
.step {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}
.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  position: absolute;
  top: -.28em;
  right: .04em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(216,120,56,.28);
  pointer-events: none;
}
.step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--sp-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.step__badge::before { content: counter(s); }
.step h3 { margin-bottom: .5rem; position: relative; z-index: 1; }
.step p { color: var(--ink-2); font-size: 1.0313rem; position: relative; z-index: 1; }
.band--night .step, .band--jet .step { background: var(--coal); border-color: #4a4a4a; box-shadow: var(--lift-dark); }
.band--night .step p, .band--jet .step p { color: #bcbcbc; }
.band--night .step::before, .band--jet .step::before { -webkit-text-stroke-color: rgba(224,139,78,.38); }
.band--night .step__badge, .band--jet .step__badge { background: var(--gold); color: var(--on-gold); }
.band--photo .step { background: rgba(30,30,30,.88); border-color: #565656; }

.faq { display: grid; gap: .75rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease);
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.15rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .01em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.2rem; top: 1.45rem;
  width: .5em; height: .5em;
  border-right: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 1.15rem 1.15rem; color: var(--ink-2); }
.faq__body p { font-size: 1.0313rem; }
.band--night .faq details, .band--jet .faq details { background: var(--coal); border-color: var(--line-dark); box-shadow: var(--lift-dark); }
.band--night .faq__body, .band--jet .faq__body { color: #b8b8b8; }
.band--night .faq summary::after, .band--jet .faq summary::after { border-color: var(--accent-on-dark); }

.quotes { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.quote { border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--sp-5); background: var(--paper); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: var(--lift-light); }
.quote__stars { display: flex; gap: .15rem; color: var(--color-accent-text); }
.quote__stars svg { width: 17px; height: 17px; fill: currentColor; }
.quote p { font-size: 1.0313rem; color: var(--ink-2); }
.quote cite { font-style: normal; font-family: var(--font-head); font-size: .875rem; letter-spacing: .07em; text-transform: uppercase; margin-top: auto; }
.band--night .quote, .band--jet .quote { background: var(--coal); border-color: var(--line-dark); box-shadow: var(--lift-dark); }
.band--night .quote p, .band--jet .quote p { color: #b8b8b8; }
.band--night .quote__stars, .band--jet .quote__stars { color: var(--accent-on-dark); }
.band--night .quote cite, .band--jet .quote cite { color: var(--paper); }


table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-head); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: .8125rem; background: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
.band--night th, .band--jet th { background: var(--jet); color: var(--paper); }
.band--night td, .band--jet td { border-bottom-color: var(--line-dark); }

/* Capability lists. Deliberately unboxed and unruled: the accent check and the
   row rhythm carry the structure on their own, which scans faster and gives the
   section air. Nothing here draws a box or a line. */
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; column-gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.caps li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .1rem .2rem;
}
.caps__tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .15rem;                     /* sits on the first line, not the block's centre */
  display: grid;
  place-items: center;
  color: var(--color-accent-text);        /* 5.15:1 on --muted, 5.56:1 on --paper */
}
.caps__tick svg { width: 20px; height: 20px; }
.caps li > span:last-child {
  font-size: 1.0313rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);                      /* 15.9:1 on --muted, was --ink-2 at 8.00:1 */
}
.band--night .caps li > span:last-child, .band--jet .caps li > span:last-child { color: #d4d4d4; }   /* 11.4:1 on --coal */
.band--night .caps__tick, .band--jet .caps__tick { color: var(--accent-on-dark); }   /* 6.33:1 on --coal */

/* A rule between two sections rather than a section of its own: label, one line, one way out. */
.dealerstripe { display: grid; gap: var(--sp-4); align-items: center; }
.dealerstripe__label {
  margin: 0;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);          /* 5.52:1 on --jet */
  white-space: nowrap;
}
.dealerstripe__copy { margin: 0; max-width: 82ch; font-size: 1.0625rem; line-height: 1.55; color: #dcdcdc; }   /* 10.61:1 on --jet */
.dealerstripe__copy b { color: var(--paper); font-weight: 700; }   /* 14.18:1 on --jet */
/* Colour and hover come from the .band--jet a:not(.btn) pair above: accent, then paper. */
.dealerstripe__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .2rem;
}
@media (min-width: 900px) {
  .dealerstripe { grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 3vw, 2.75rem); }
  .dealerstripe__label { border-right: 1px solid var(--line-dark); padding-right: clamp(1.5rem, 3vw, 2.75rem); }
}

/* Light-band sibling of .dealerstripe: answers "do you work on mine" without a section of prose. */
.modelline { display: grid; gap: var(--sp-4); align-items: center; }
.modelline__label {
  margin: 0;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-text);       /* 5.56:1 on --paper */
  white-space: nowrap;
}
.modelline__copy { margin: 0; max-width: 82ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }   /* 8.64:1 on --paper */
.modelline__copy b { color: var(--ink); font-weight: 700; }   /* 16.79:1 on --paper */
/* Colour and hover come from the global a rule: --color-accent-text (5.56:1), then --night. */
.modelline__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .2rem;
}
@media (min-width: 900px) {
  .modelline { grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 3vw, 2.75rem); }
  .modelline__label { border-right: 1px solid var(--line); padding-right: clamp(1.5rem, 3vw, 2.75rem); }
}

.symptoms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.symptom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--sp-4);
  box-shadow: var(--lift-light);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.symptom__mark { width: 19px; height: 19px; flex: none; color: var(--color-accent-text); fill: currentColor; }   /* 5.56:1 on --paper */
.symptom p { margin: 0; font-size: 1.0313rem; color: var(--ink-2); }
.symptom::after {
  content: '';
  position: absolute;
  left: 26px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.symptom:hover { transform: translateY(-4px); box-shadow: var(--lift-light-hover); border-color: var(--accent); }
.band--night .symptom, .band--jet .symptom { background: var(--coal); border-color: var(--line-dark); box-shadow: var(--lift-dark); }
.band--night .symptom p, .band--jet .symptom p { color: #b8b8b8; }
.band--night .symptom__mark, .band--jet .symptom__mark { color: var(--accent-on-dark); }   /* 6.33:1 on --coal */
.band--night .symptom::after, .band--jet .symptom::after { background: var(--coal); border-color: var(--line-dark); }
.band--night .symptom:hover, .band--jet .symptom:hover { box-shadow: var(--lift-dark-hover); }

.drive { display: flex; align-items: baseline; gap: .4rem; }
.drive b {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  color: var(--color-accent-text);
}
.drive span { font-family: var(--font-head); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.band--night .drive b, .band--jet .drive b { color: var(--accent-on-dark); }   /* 6.33:1 on --coal */
.band--night .drive span, .band--jet .drive span { color: #b8b8b8; }   /* 8.40:1 on --coal */

.note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--sp-5);
}
.note + .note { margin-top: var(--sp-4); }
/* One-line flagged notice: an aside that should read as smaller than a section. */
.note h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.band--night .note, .band--jet .note { background: var(--coal); border-color: #4a4a4a; }
/* A dark card on a light band. The dark-band rule above inherits its text colour from the band,
   so a card that keeps the dark ground on a light ground has to set its own. */
.note--dark { background: var(--coal); border-color: #4a4a4a; }   /* 15.04:1 against --muted, non-text */
.note--dark h3 { color: var(--paper); }   /* 16.25:1 on --coal */
.note--dark p { color: #d4d4d4; }         /* 11.25:1 on --coal */
.note--dark a { color: var(--accent-on-dark); }
.note--dark a:hover { color: var(--paper); }

/* 15.20:1 for --ink and 5.04:1 for --color-accent-text on the .10 accent tint */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  align-items: center;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background-color: #f8efeb;
  border: 1px solid #ecd5c6;
  border-radius: var(--r-btn);
  box-shadow: var(--lift-light);
}
.callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
}
.callout h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.callout__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  margin: 0 0 .55rem;
  color: var(--color-accent-text);
}
.callout__figure b {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
}
.callout__figure span {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: 1rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}
.callout p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* neutral sibling of .callout: 15.54:1 for --ink and 8:1 for --ink-2 on --muted */
.warranty-notice {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.35rem, 3vw, 1.9rem) clamp(1.35rem, 3vw, 2rem);
  background: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}
@media (min-width: 900px) { .warranty-notice { grid-template-columns: 1fr auto; } }
.warranty-notice__title {
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
.warranty-notice__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.warranty-notice__terms b {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--ink);
}
.warranty-notice__terms span { display: block; font-size: .9375rem; color: var(--ink-2); margin-top: .2rem; }
.warranty-notice__fine { margin: var(--sp-4) 0 0; font-size: .9375rem; color: var(--ink-2); }

/* 5.15:1 for --color-accent-text and 5.85:1 for --on-accent on the accent step marker */
.route {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: var(--sp-6);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--lift-light);
}
.route__time {
  text-align: center;
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line);
}
.route__time b {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem);
  line-height: 1;
  color: var(--color-accent-text);
}
.route__time span {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-head);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink-2);
}
.route__steps {
  counter-reset: r;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.route__steps li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1rem;
  line-height: 1.5;
}
.route__steps li::before {
  counter-increment: r;
  content: counter(r);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .route { grid-template-columns: 1fr; gap: 1.25rem; }
  .route__time {
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 1.1rem;
  }
}

.ctaband {
  background-color: var(--night);
  background-image: var(--grain-hi),
                    radial-gradient(100% 130% at 82% 50%, rgba(216,120,56,.10), rgba(216,120,56,0) 58%);
  background-size: var(--grain-size), auto;
  background-repeat: repeat, no-repeat;
  color: var(--paper);
  position: relative;
  --focus-ring: #F0E050;
}
.ctaband__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(2.75rem, 6vw, 4.5rem) var(--gut); display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .ctaband__inner { grid-template-columns: 1.35fr 1fr; } }
.ctaband h2 { color: var(--paper); }
.ctaband p { color: #c9c9c9; }
.ctaband .eyebrow { color: var(--accent-on-dark); }
.ctaband .eyebrow::after { background: var(--line-dark); }

.breadcrumbs { font-size: .9375rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: .4rem; color: #8d8d8d; }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs a { color: #c4c4c4; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-on-dark); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--accent-on-dark); }
.pagehead .breadcrumbs { margin-bottom: var(--sp-5); }

.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } .form__row--3 { grid-template-columns: repeat(3, 1fr); } }
/* align-content:start is load-bearing. .field is a grid ITEM of .form__row, so it
   stretches to the tallest cell in the row. Without this its own grid rows stretch
   too, and the input in a column with no hint grows to absorb the height of the
   neighbouring column's hint text. That is what made the name box tall and the
   phone box short once phone gained a hint. */
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-family: var(--font-head); font-size: .8125rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.field .req { color: var(--color-accent-text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem .9rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #b9b2a6;
  border-radius: 8px;
  font-size: 1rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-accent-text); }
.field textarea { min-height: 8rem; resize: vertical; }
.field .hint { font-size: .9375rem; color: var(--ink-2); }
.field-error { color: #a3231c; font-size: .9688rem; }
.form__status:not(:empty) { padding: .85rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); background: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fieldset { border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--sp-5); display: grid; gap: var(--sp-4); margin: 0; }
.fieldset legend { font-family: var(--font-head); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-text); padding-inline: .5rem; }
.field--check label { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; flex: none; accent-color: var(--color-accent-text); }
.vin-result:not(:empty) { font-family: var(--font-head); font-size: 1rem; letter-spacing: .03em; color: var(--color-accent-text); border-left: 3px solid var(--accent); padding: .35rem .7rem; background: var(--paper); border-radius: var(--r); }

.textus-launch {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 58;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.15rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  border-radius: var(--r-btn);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.textus-launch:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
@media (max-width: 1139px) { .textus-launch { display: none; } }

.textus {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 72;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100vh - 2rem));
  overflow-y: auto;
  background: var(--jet);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  padding: var(--sp-5);
  margin: 0;
  --focus-ring: #F0E050;
}
.textus::backdrop { background: rgba(10,10,10,.55); }
.textus h2 { font-size: 1.25rem; color: var(--paper); margin-bottom: .35rem; }
.textus p { font-size: 1rem; color: #c0c0c0; }
.textus .field label { color: var(--paper); }
.textus .field input, .textus .field textarea { background: var(--coal); color: var(--paper); border-color: #4a4a4a; }
.textus .field textarea { min-height: 6rem; }
.textus__close { position: absolute; top: .55rem; right: .55rem; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--r); color: var(--paper); width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.textus__consent { font-size: .875rem; color: #b4b4b4; line-height: 1.55; }
.textus__consent a { color: var(--accent-on-dark); }
.textus__status:not(:empty) { margin-top: var(--sp-3); padding: .7rem .85rem; border-left: 3px solid var(--accent); background: var(--coal); font-size: .875rem; }
@media (max-width: 1139px) { .textus { inset: auto .75rem 84px auto; } }

.site-footer {
  background-color: var(--night);
  background-image: var(--grain-hi);
  background-size: var(--grain-size);
  color: #c4c4c4;
  --focus-ring: #F0E050;
}
.site-footer__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 4rem) var(--gut) var(--sp-8);
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
@media (min-width: 1080px) { .site-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.site-footer__brand img { height: 54px; width: auto; border-radius: 0; }
.site-footer__tagline { margin: var(--sp-4) 0; font-size: 1rem; max-width: 34ch; }
.site-footer__address { font-style: normal; font-size: 1rem; line-height: 1.85; }
.site-footer__address a { color: var(--accent-on-dark); text-decoration: none; }
.site-footer__address a:hover { text-decoration: underline; }
.site-footer h2 { font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer ul a { color: #cdcdcd; text-decoration: none; font-size: 1rem; }
.site-footer ul a:hover { color: var(--accent-on-dark); }
.site-footer__social { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: var(--r); color: #c4c4c4; }
.site-footer__social a:hover { color: var(--night); background: var(--gold); border-color: var(--gold); }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__areas { font-size: .9375rem; color: #b0b0b0; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut) var(--sp-6); }
.site-footer__areas a { color: #c4c4c4; }
.site-footer__bottom {
  border-top: 1px solid var(--line-dark);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-5) var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: .8125rem;
}
.site-footer__credit a { color: #c4c4c4; }
.spark-mark { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-left: .28em; }

.consent-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 70;
  max-width: 34rem;
  background: var(--jet);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: .875rem;
  transform: translateY(14px);
  transition: transform var(--dur-base) var(--ease);
  --focus-ring: #F0E050;
}
.consent-banner.is-visible { transform: none; }
.consent-banner__text { margin: 0; flex: 1 1 16rem; line-height: 1.55; font-size: .9688rem; }
.consent-banner__text a { color: var(--accent-on-dark); }
.consent-banner__actions { flex: none; }
.consent-banner__actions .btn { padding: .6rem 1.2rem; font-size: .875rem; }
@media (max-width: 1139px) { .consent-banner { bottom: 78px; } }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::after { display: none; }
.center .rule { margin-inline: auto; }
.center .lead { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
/* Full-width sibling of .hero__map: same frame and grade, wider crop. */
.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  line-height: 0;
}
.map-embed iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
  filter: grayscale(.25) contrast(1.05);
}
@media (min-width: 720px) { .map-embed iframe { aspect-ratio: 21 / 9; } }

.figcap { font-size: .9688rem; color: var(--ink-2); margin-top: .65rem; line-height: 1.5; }
.band--night .figcap, .band--jet .figcap { color: #a5a5a5; }

/* 17.96:1 for --paper and 6.99:1 for --accent-on-dark on the --night plate */
.badge-rail {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  box-shadow: var(--lift-dark);
  overflow: hidden;
}
@media (min-width: 720px) { .badge-rail { grid-template-columns: repeat(4, 1fr); } }

.badge-rail__item {
  position: relative;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(.95rem, 2vw, 1.5rem);
  background-color: var(--night);
  background-image: var(--grain-hi);
  background-size: var(--grain-size);
  transition: background-color var(--dur-base) var(--ease);
}
.badge-rail__item::before {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: clamp(.7rem, 1.6vw, 1.05rem);
  background: var(--accent);
  transition: width var(--dur-base) var(--ease);
}
.badge-rail__item--legacy::before { background: #6f6f6f; }
.badge-rail__item:hover { background-color: var(--coal); }
.badge-rail__item:hover::before { width: 46px; }

.badge-rail__kicker {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--accent-on-dark);
  margin-bottom: .35rem;
}
.badge-rail__item--legacy .badge-rail__kicker { color: #a8a8a8; }

.badge-rail__name {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: clamp(1.05rem, .92rem + .55vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color var(--dur-base) var(--ease);
}
.badge-rail__item:hover .badge-rail__name { color: var(--accent-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .badge-rail__item, .badge-rail__item::before, .badge-rail__name { transition: none; }
}

/* 17.96:1 for --paper and 6.99:1 for --accent-on-dark on the --night header cap */
.coverage {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--lift-light);
  overflow: hidden;
}
.coverage__head {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background-color: var(--night);
  background-image: var(--grain-hi);
  background-size: var(--grain-size);
  color: var(--paper);
  border-bottom: 4px solid var(--accent);
}
.coverage__head h3 { color: var(--paper); margin: 0; max-width: 30ch; }
.coverage__head .eyebrow { color: var(--accent-on-dark); }
.coverage__head .eyebrow::after { background: var(--line-dark); }

.coverage__count {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  max-width: 46ch;
}
.coverage__count b {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--accent-on-dark);
}
.coverage__count span {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: #c9c9c9;
  margin-top: .5rem;
}
@media (min-width: 800px) {
  .coverage__head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
    gap: clamp(1.75rem, 3vw, 3rem);
  }
  .coverage__count {
    margin: 0;
    padding: 0 0 0 clamp(1.75rem, 3vw, 3rem);
    border-top: 0;
    border-left: 1px solid var(--line-dark);
  }
}

.coverage__list {
  list-style: none;
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.coverage__list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: .9375rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.coverage__list li:hover { border-color: var(--accent); transform: translateY(-2px); }
.coverage__list svg { color: var(--color-accent-text); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .coverage__list li { transition: none; }
}

.gallery { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.gallery figure { margin: 0; display: flex; flex-direction: column; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery--portrait img { aspect-ratio: 3 / 4; }

[data-animate] { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
[data-animate].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; } }

.grid[data-animate], .steps[data-animate], .quotes[data-animate],
.checks[data-animate], .caps[data-animate], .symptoms[data-animate], .faq[data-animate], .gallery[data-animate], .badge-rail[data-animate], .coverage__list[data-animate] {
  opacity: 1;
  transform: none;
}
.grid[data-animate] > *, .steps[data-animate] > *, .quotes[data-animate] > *,
.checks[data-animate] > *, .caps[data-animate] > *, .symptoms[data-animate] > *, .faq[data-animate] > *, .gallery[data-animate] > *,
.badge-rail[data-animate] > *, .coverage__list[data-animate] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.grid[data-animate].is-in > *, .steps[data-animate].is-in > *, .quotes[data-animate].is-in > *,
.checks[data-animate].is-in > *, .caps[data-animate].is-in > *, .symptoms[data-animate].is-in > *, .faq[data-animate].is-in > *, .gallery[data-animate].is-in > *,
.badge-rail[data-animate].is-in > *, .coverage__list[data-animate].is-in > * {
  opacity: 1;
  transform: none;
}
[data-animate].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-animate].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-animate].is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-animate].is-in > *:nth-child(5) { transition-delay: 280ms; }
[data-animate].is-in > *:nth-child(6) { transition-delay: 350ms; }
[data-animate].is-in > *:nth-child(7) { transition-delay: 420ms; }
[data-animate].is-in > *:nth-child(8) { transition-delay: 490ms; }
[data-animate].is-in > *:nth-child(n+9) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .grid[data-animate] > *, .steps[data-animate] > *, .quotes[data-animate] > *,
  .checks[data-animate] > *, .caps[data-animate] > *, .symptoms[data-animate] > *, .faq[data-animate] > *, .gallery[data-animate] > *,
.badge-rail[data-animate] > *, .coverage__list[data-animate] > * {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }
  .hero::before { animation: none; }
}
#symptoms .checks { gap: var(--sp-4); }
#symptoms .checks li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
  align-items: flex-start;
  font-size: 1.0625rem;
  line-height: 1.55;
}
#symptoms .checks svg { color: var(--color-accent-text); margin-top: .3rem; }
.band--night #symptoms .checks li, .band--jet #symptoms .checks li,
#symptoms.band--night .checks li, #symptoms.band--jet .checks li {
  background: var(--coal);
  border-color: #4a4a4a;
}