/* ==========================================================================
   Tuning dealer website template
   Rebrand the whole site from the :root block below.
   ========================================================================== */

:root {
  /* ---- brand colours: change these and the site follows ---- */
  /* Sampled from the D&G wordmark, which is about #0060fc. Two tokens, because
     no single blue is both readable as small text on this background AND dark
     enough for white button text. */
  --accent: #1a6bf5;              /* buttons: white on it, 4.70:1 */
  --accent-hot: #4a8dff;          /* hover */
  --accent-deep: #0a3ea8;         /* gradients */
  --accent-soft: rgba(26, 107, 245, 0.14);
  --accent-line: rgba(26, 107, 245, 0.42);
  --accent-text: #4a8dff;         /* accent TEXT on dark, 6.10:1 */

  --bg: #0a0a0c;
  --bg-2: #101015;
  --surface: #15151b;
  --surface-2: #1c1c24;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f2f3f5;
  --muted: #9b9ba6;
  --dim: #6b6b78;

  --font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1180px;
  --gutter: clamp(18px, 5vw, 34px);
  --header-h: 72px;
  --bar-h: 34px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
main, .footer { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right)); }
.container--narrow { max-width: 880px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.07; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.6vw, 66px); }
h2 { font-size: clamp(27px, 3.5vw, 40px); }
h3 { font-size: 20px; letter-spacing: -0.012em; }
p { margin: 0 0 1em; color: var(--muted); }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }
.lead { font-size: clamp(17px, 1.35vw, 19px); color: #c2c3cc; max-width: 62ch; }
.accent { color: var(--accent-text); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; transition: width 0.7s var(--ease) 0.15s; }
.up:not(.in) .eyebrow::before, .eyebrow.up:not(.in)::before { width: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 8px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn svg { width: 17px; height: 17px; flex: none; position: relative; z-index: 1; transition: transform 0.3s var(--ease); }
.btn > span, .btn__text { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:hover svg:first-child { transform: scale(1.12) rotate(-4deg); }
.btn--primary { position: relative; overflow: hidden; background: var(--accent); color: #fff; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.65s var(--ease);
}
.btn--primary:hover::after { left: 130%; }
.btn--primary:hover { background: var(--accent-hot); }
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light { background: #fff; color: #111; }
.btn--light:hover { background: #e9e9ee; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Header: a thin info bar over the main bar
   -------------------------------------------------------------------------- */

.topbar {
  min-height: var(--bar-h);
  display: flex; align-items: center;
  background: #000;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar b { color: #fff; font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.topbar a:hover { color: var(--accent-text); }

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.3s, background-color 0.3s;
}
.header.is-stuck { box-shadow: 0 14px 34px -22px #000; background: rgba(10, 10, 12, 0.97); }
.header.is-hidden { transform: translateY(-101%); }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }

/* the rev counter mark. It sweeps once on load and revs again on hover. */
.logo { flex: none; display: block; color: #fff; }
.lg__arc {
  stroke: currentColor; stroke-width: 3.2; opacity: 0.2;
  stroke-dasharray: 66; stroke-dashoffset: 66;
  animation: lgDraw 1.1s var(--ease) 0.1s forwards;
}
.lg__red {
  stroke: var(--accent); stroke-width: 3.2;
  stroke-dasharray: 15; stroke-dashoffset: 15;
  animation: lgDraw 0.5s var(--ease) 0.85s forwards;
}
.lg__needle {
  stroke: var(--accent); stroke-width: 3;
  transform-box: view-box; transform-origin: 20px 20px;
  animation: lgSweep 1.3s cubic-bezier(0.32, 1.25, 0.38, 1) 0.2s both;
}
.lg__hub { fill: #fff; stroke: none; }
.brand:hover .lg__needle { animation: lgRev 0.85s cubic-bezier(0.34, 1.3, 0.4, 1); }
.brand:hover .lg__red { animation: lgFlash 0.85s ease-in-out; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
@keyframes lgSweep {
  0%   { transform: rotate(-134deg); }
  68%  { transform: rotate(64deg); }
  100% { transform: rotate(46deg); }
}
@keyframes lgRev {
  0%   { transform: rotate(46deg); }
  38%  { transform: rotate(128deg); }
  100% { transform: rotate(46deg); }
}
@keyframes lgFlash { 40% { stroke: #fff; } }
.footer .logo { color: #fff; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.15; }
.brand__name span { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); }
.header .brand__name, .header .brand__name span { white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 9px 12px; border-radius: 7px; font-size: 15px; font-weight: 500; color: #c8c9d1; transition: color 0.2s, background-color 0.2s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: var(--accent-text); }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.btn--file { background: var(--accent); color: #fff; }
.btn--file:hover { background: var(--accent-hot); }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 9px; background: none; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 auto; z-index: 49;
  display: grid; gap: 2px;
  padding: 16px var(--gutter) 24px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0.25s;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.menu-open .mobile-nav { opacity: 1; transform: none; visibility: visible; }
.mobile-nav a:not(.btn) { padding: 13px 2px; font-family: var(--font-head); font-size: 19px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Sections and motion
   -------------------------------------------------------------------------- */

.section { padding: clamp(62px, 8vw, 108px) 0; }
.section--tight { padding: clamp(42px, 5vw, 64px) 0; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-head { max-width: 660px; margin-bottom: clamp(30px, 4vw, 50px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 15px; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-head--split > div { max-width: 640px; }

.up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.up.in { opacity: 1; transform: none; }

/* headlines rise word by word once JS has split them */
[data-split].split .w { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-split].split .w__i {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition: transform 0.85s var(--ease), opacity 0.5s linear;
  transition-delay: var(--wd, 0s);
}
[data-split].split.in .w__i { transform: none; opacity: 1; }

/* thin progress bar across the very top */
.progress {
  position: fixed; inset: 0 auto auto 0; z-index: 60;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   Hero: full bleed photograph
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%;
  object-fit: cover; object-position: 50% 45%;
  transform: translate3d(0, var(--py, 0px), 0);
  animation: kenburns 22s ease-out both;
  will-change: transform;
}
@keyframes kenburns { from { scale: 1.13; } to { scale: 1; } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10, 10, 12, 0.78) 34%, rgba(10, 10, 12, 0.3) 66%, rgba(10, 10, 12, 0.6) 100%),
    linear-gradient(to right, rgba(10, 10, 12, 0.86) 0%, rgba(10, 10, 12, 0.2) 62%, transparent 100%);
}
/* padding-block, not the shorthand: .hero__inner is also a .container and a
   shorthand zeroes the side gutter, running the hero into both edges. */
.hero__inner { position: relative; width: 100%;
  padding-block: calc(var(--header-h) + 40px) clamp(36px, 5vw, 64px); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin: 20px 0 30px; max-width: 52ch; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.hero__tags li {
  padding: 6px 13px; border: 1px solid var(--line-2); border-radius: 40px;
  font-size: 13px; color: #d4d5dc; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px);
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.hero__tags li:hover { border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.hero__note { display: flex; align-items: center; gap: 9px; margin-top: 24px; font-size: 14px; color: var(--muted); }
.hero__note i { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.5); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the makes we map, as a plain readable line */
.marques { border-block: 1px solid var(--line); background: #000; overflow: hidden; }
.marques .container { display: flex; align-items: center; gap: 22px; padding-block: 17px; }
.marques__label { flex: none; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.marques__view {
  position: relative; flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.marques__track { display: flex; width: max-content; animation: marq 34s linear infinite; }
.marques__view:hover .marques__track { animation-play-state: paused; }
.marques__run { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.marques b {
  font-family: var(--font-head); font-size: 16px; font-weight: 600; color: #9c9daa;
  white-space: nowrap; transition: color 0.25s;
}
.marques b:hover { color: var(--accent-text); }
.marques__soft { color: var(--dim) !important; font-weight: 500 !important; }
@keyframes marq { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Alternating photo rows
   -------------------------------------------------------------------------- */

.row { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 5vw, 62px); align-items: center; }
.row + .row { margin-top: clamp(48px, 7vw, 96px); }
.row--flip .row__media { order: 2; }
.row__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.row__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
  will-change: transform;
}
.row__media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
/* the photo wipes in from the side it sits on */
.row.up .row__media { clip-path: inset(0 100% 0 0 round 18px); transition: clip-path 1s var(--ease) 0.05s; }
.row.up.row--flip .row__media { clip-path: inset(0 0 0 100% round 18px); }
.row.up.in .row__media { clip-path: inset(0 0 0 0 round 18px); }
.row__tag { transition: opacity 0.4s 0.5s, transform 0.5s var(--ease) 0.5s; }
.row.up:not(.in) .row__tag { opacity: 0; transform: translateY(10px); }
.row__tag {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: 7px;
  background: rgba(10, 10, 12, 0.86); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
}
.row h2 { font-size: clamp(25px, 2.8vw, 34px); }
.row h2 + p { margin-top: 14px; }
.row__no { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.2em; color: var(--dim); margin-bottom: 10px; }

.ticks { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: #c2c3cc; font-size: 15.5px;
  transition: opacity 0.5s, transform 0.6s var(--ease);
  transition-delay: calc(var(--t, 0) * 0.09s + 0.15s);
}
.up:not(.in) .ticks li, .ticks.up:not(.in) li { opacity: 0; transform: translateX(-14px); }
.ticks svg { transition: transform 0.3s var(--ease); }
.ticks li:hover svg { transform: scale(1.18); }
.ticks svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.ticks strong { display: block; color: #fff; font-family: var(--font-head); font-weight: 600; }

/* --------------------------------------------------------------------------
   Numbers
   -------------------------------------------------------------------------- */

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.strip > div { position: relative; padding: 28px 24px; background: var(--bg); transition: background-color 0.3s; }
.strip > div::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.strip > div:hover { background: var(--bg-2); }
.strip > div:hover::before { transform: scaleX(1); }
.strip b { display: block; font-family: var(--font-head); font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; color: #fff; line-height: 1.1; }
.strip span { font-size: 14.5px; color: var(--muted); }

/* a dyno style readout instead of another card grid */
.readout { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.readout__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #000; }
.readout__head span { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.readout__head b { font-family: var(--font-head); color: #fff; }
.readout table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.readout th, .readout td { padding: 13px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.readout th { font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.readout tr:last-child td { border-bottom: 0; }
.readout tbody tr { transition: background-color 0.25s; }
.readout tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.readout .gain {
  display: inline-block;
  transition: opacity 0.5s, transform 0.6s var(--ease);
  transition-delay: calc(0.35s + var(--r, 0) * 0.12s);
}
.readout.up:not(.in) .gain { opacity: 0; transform: translateX(-12px); }
.readout td:first-child { color: #d5d6dd; }
.readout td b { font-family: var(--font-head); color: #fff; font-size: 17px; }
.readout .gain { color: var(--accent-text); font-family: var(--font-head); font-weight: 600; }
.readout__foot { padding: 13px 22px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--line); background: #000; }

/* --------------------------------------------------------------------------
   Cards, used sparingly
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); transition: transform 0.35s var(--ease), border-color 0.3s; }
.card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.card__icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.card__icon svg { width: 21px; height: 21px; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 15.5px; }

/* photo card for the services index */
.pcard { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pcard img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.6s var(--ease); }
.pcard:hover img { transform: scale(1.04); }
.pcard { transition: border-color 0.3s, transform 0.4s var(--ease); }
.pcard:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.pcard__body {
  position: absolute; inset: auto 0 0; padding: 20px;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.96) 28%, transparent);
  transition: transform 0.45s var(--ease);
}
.pcard:hover .pcard__body { transform: translateY(-4px); }
.pcard::after {
  content: ""; position: absolute; right: 18px; bottom: 20px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.4s var(--ease);
}
.pcard:hover::after { opacity: 1; transform: none; }
.pcard__body h3 { margin-bottom: 4px; }
.pcard__body p { font-size: 14.5px; margin: 0; color: #b8b9c3; }

/* the full options menu, grouped */
.svcgroups { display: grid; gap: clamp(34px, 4.5vw, 56px); }
.svcgroup__head { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; margin-bottom: 6px; }
.svcgroup__no { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.16em; color: var(--accent); padding-top: 7px; }
.svcgroup__head h3 { font-size: clamp(20px, 2.2vw, 26px); }
.svcgroup__head p { margin-top: 9px; font-size: 15px; max-width: 72ch; }
.svclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svcrow {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--line);
  transition: background-color 0.25s, padding-left 0.3s var(--ease);
}
.svcrow:hover { background: rgba(255, 255, 255, 0.025); padding-left: 12px; }
.svcrow strong { display: block; font-family: var(--font-head); font-size: 16.5px; font-weight: 600; color: #fff; }
.svcrow span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); }
.pill {
  font-style: normal; font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 11px; border-radius: 40px; border: 1px solid var(--line-2); color: var(--muted);
}
.pill--road { border-color: rgba(53, 208, 127, 0.42); color: #35d07f; }
.pill--hot { border-color: var(--accent-line); color: var(--accent); }

/* plain list for the smaller jobs, so not everything is a box */
.plainlist { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.plainlist li { break-inside: avoid; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: 15.5px; color: #c2c3cc; }
.plainlist li { transition: color 0.25s, padding-left 0.3s var(--ease); }
.plainlist li:hover { color: #fff; padding-left: 32px; }
.plainlist li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 2px; background: var(--accent); transition: width 0.3s var(--ease); }
.plainlist li:hover::before { width: 20px; }

/* --------------------------------------------------------------------------
   Full width photo band
   -------------------------------------------------------------------------- */

.band { position: relative; padding: clamp(60px, 9vw, 124px) 0; overflow: hidden; }
.band__media { position: absolute; inset: 0; overflow: hidden; }
.band__media img {
  position: absolute; left: 0; top: -7%;
  width: 100%; height: 114%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10, 10, 12, 0.95) 12%, rgba(10, 10, 12, 0.72) 52%, rgba(10, 10, 12, 0.45)); }
.band .container { position: relative; }
.band h2 { max-width: 18ch; }
.band p { margin-top: 16px; max-width: 54ch; color: #c8c9d1; }
.band .btn-row { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Vehicle stats widget slot
   -------------------------------------------------------------------------- */

.lookup { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(26px, 4vw, 52px); align-items: center; }
.widget-slot {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(20px, 3vw, 30px);
}
.widget-slot--page { min-height: 420px; }
.widget-slot__note {
  display: grid; place-items: center; align-content: center; gap: 12px; text-align: center;
  min-height: 240px; padding: 26px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  color: var(--dim); font-size: 14.5px;
}
.widget-slot__note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 5px; }
.widget-slot { position: relative; overflow: hidden; }
.widget-slot::before {
  content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px;
  background: linear-gradient(var(--accent), transparent);
  animation: slotScan 3.4s ease-in-out infinite;
}
@keyframes slotScan { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.plate { transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.widget-slot:hover .plate { transform: translateY(-3px); box-shadow: 0 16px 30px -18px #000; }
.plate__no { font-variant-numeric: tabular-nums; }
.plate {
  display: flex; align-items: stretch; gap: 0;
  max-width: 320px; margin: 0 auto;
  border-radius: 7px; overflow: hidden; border: 2px solid #111;
  font-family: var(--font-head); font-weight: 700;
}
.plate__gb { display: grid; place-content: center; background: #063399; color: #fff; padding: 12px 9px; font-size: 13px; text-align: center; line-height: 1.15; }
.plate__gb small { display: block; font-size: 11px; }
.plate__no { flex: 1; background: #ffd400; color: #111; padding: 12px; font-size: 26px; letter-spacing: 0.08em; text-align: center; }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.stars { display: flex; gap: 3px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }

.quote { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); transition: transform 0.4s var(--ease), border-color 0.3s; }
.quote:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.stars svg { animation: starPop 0.45s var(--ease) both; animation-delay: calc(var(--s, 0) * 0.07s); }
@keyframes starPop { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } }
.quote blockquote { margin: 14px 0 16px; font-size: 15.5px; line-height: 1.6; color: #c8c9d1; }
.quote figcaption { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.who { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-family: var(--font-head); font-weight: 700; }
.quote figcaption strong { display: block; color: #fff; }
.quote figcaption small { color: var(--dim); }

.quote--feature { padding: clamp(26px, 4vw, 44px); background: linear-gradient(140deg, var(--surface-2), var(--surface)); border-color: var(--accent-line); }
.quote--feature blockquote { font-family: var(--font-head); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: #fff; letter-spacing: -0.015em; }

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

.page-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-head__media { position: absolute; inset: 0; overflow: hidden; }
.page-head__media img {
  position: absolute; left: 0; top: -7%;
  width: 100%; height: 114%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.page-head__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 3%, rgba(10, 10, 12, 0.9) 48%, rgba(10, 10, 12, 0.8)),
    linear-gradient(to right, rgba(10, 10, 12, 0.7), rgba(10, 10, 12, 0.2) 70%);
}
.page-head .container { position: relative; padding-block: clamp(46px, 6vw, 82px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13.5px; color: var(--dim); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a:hover { color: var(--accent); }
.page-head .lead { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-wrap { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 124px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field--reg input { text-align: center; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-head); font-weight: 700; font-size: 21px; background: #ffd400; color: #111; border-color: #ffd400; }
.field--reg input::placeholder { color: rgba(0, 0, 0, 0.35); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 12px; font-size: 13px; color: var(--dim); }
.form-msg { margin-top: 10px; font-size: 15px; color: var(--accent); min-height: 1.4em; }

.btn--send { position: relative; min-width: 180px; }
.btn--send .spin { position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; margin: -10px 0 0 -10px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn--send[data-state="sending"] .btn__text { opacity: 0; }
.btn--send[data-state="sending"] .spin { opacity: 1; }
.btn--send[data-state="sent"] { background: #18a558; }
.btn--send[data-state="error"] { background: #7a1119; }

.sent-panel { display: grid; justify-items: center; align-content: center; gap: 12px; padding: clamp(26px, 4vw, 44px); text-align: center; }
.sent-panel svg { width: 58px; height: 58px; color: #35d07f; }
.sent-panel h3 { font-size: 24px; }

/* contact details */
.contact-rows { display: grid; gap: 10px; }
.contact-row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 15px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color 0.25s, transform 0.25s var(--ease); }
a.contact-row:hover { border-color: var(--accent); transform: translateX(4px); }
.contact-row__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.contact-row__icon svg { width: 20px; height: 20px; }
.contact-row small { display: block; font-size: 12.5px; color: var(--dim); }
.contact-row span > span, .contact-row b { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.map-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); filter: grayscale(0.35) invert(0.92) hue-rotate(180deg) contrast(0.9) brightness(0.95); }

/* faq */
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq details[open] { border-color: var(--accent-line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 20px; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--accent); transition: transform 0.3s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details[open] .faq__body { animation: faqIn 0.35s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--accent); }
.faq__body { padding: 0 20px 17px; }
.faq__body p { font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { padding: clamp(46px, 6vw, 76px) 0 24px; background: #000; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.footer h4 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--muted); font-size: 15px; transition: color 0.2s; }
.footer a:hover { color: var(--accent); }
.footer p { font-size: 15px; }
.footer__social { display: flex; gap: 8px; margin-top: 18px; }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); transition: border-color 0.2s, color 0.2s; }
.footer__social a:hover { border-color: var(--accent); }
.footer__social svg { width: 18px; height: 18px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.credits { margin-top: 10px; font-size: 12.5px; color: #4d4d58; }
.credits a { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav a { padding: 9px 9px; font-size: 14.5px; }
  .brand__name span { display: none; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: block; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .row, .lookup { grid-template-columns: 1fr; }
  .row--flip .row__media { order: 0; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .up { transform: translateY(16px); }
}

@media (max-width: 720px) {
  .topbar__right span:first-child { display: none; }
  .strip { grid-template-columns: 1fr 1fr; }
  .plainlist { columns: 1; }
}

@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .row.up .row__media, .row.up.row--flip .row__media { clip-path: none; }
  .marques .container { gap: 14px; }
  .marques__label { display: none; }
  body { font-size: 16px; }
  .grid--3, .grid--2, .form-grid, .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .header__cta .btn { width: auto; }
  .header__cta .btn--file { display: none; }   /* it lives in the menu on phones */
  .topbar .container > span:first-child { display: none; }
  .topbar .container { justify-content: center; }
  .hero { min-height: 0; }
  .hero__inner { padding-top: calc(var(--header-h) + 70px); }
  .hero__media::after {
    background:
      linear-gradient(to top, var(--bg) 2%, rgba(10, 10, 12, 0.9) 44%, rgba(10, 10, 12, 0.4)),
      linear-gradient(rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0.55));
  }
  .row__media img { aspect-ratio: 4 / 3; }
  .topbar { font-size: 12px; }
  .topbar__right { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .up { opacity: 1 !important; transform: none !important; }
  [data-split].split .w__i { opacity: 1 !important; transform: none !important; }
  .row.up .row__media, .row.up.row--flip .row__media { clip-path: none !important; }
  .marques__track { animation: none !important; }
  .hero__media img { animation: none !important; }
  .ticks li, .readout .gain { opacity: 1 !important; transform: none !important; }
  [data-par] { transform: none !important; }
}

/* The wordmark in the header, same treatment as the Pulse build. */
.brand--mark { gap: 14px; align-items: center; }
.brand--mark .logo { display: block; line-height: 0; }
.brand--mark .logo img { display: block; width: auto; }
.brand__tag {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--line);
}
.footer .brand .logo img { height: 44px; width: auto; }
@media (max-width: 1000px) { .brand__tag { display: none; } }
@media (max-width: 420px) { .brand--mark .logo img { height: 34px !important; } }

/* The figures table stacks on a phone instead of being clipped. */
@media (max-width: 620px) {
  .readout table, .readout tbody, .readout tr { display: block; width: 100%; }
  .readout thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
  .readout tbody tr { display: grid; grid-template-columns: repeat(3, 1fr);
                      gap: 4px 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .readout tbody tr:last-child { border-bottom: 0; }
  .readout tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 6px; border: 0;
    font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--dim); text-align: left; }
  .readout tbody td { padding: 0; border: 0; font-size: 15px;
                      display: flex; flex-direction: column; gap: 2px; }
  .readout tbody td.gain { display: flex; }
  .readout tbody td::before { content: attr(data-label); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
  .readout tbody td[data-label="After mapping"]::before { content: "Mapped"; }
  .readout tbody td b { font-size: 16px; }
  .readout__head, .readout__foot { padding-inline: 18px; }

  /* 44px tap targets in the footer. */
  .footer__grid ul { margin-block: -10px; }
  .footer__grid li { margin: 0; }
  .footer__grid li > a, .footer__grid p > a {
    display: flex; align-items: center; min-height: 44px; padding-block: 10px; }
  .topbar a[href^="tel:"] { display: inline-flex; align-items: center;
    min-height: 40px; padding-block: 9px; }

  .hero__inner { padding-top: calc(var(--header-h) + 26px); padding-bottom: 30px; }
  .hero .lead { margin: 14px 0 20px; }
  .hero__tags { display: none; }
}

/* ---------------------------------------------------------------------------
   Hero slider.
   Three slides cross fading under the headline. Sliding sideways under fixed
   text reads badly, so this fades instead. The first slide is in the markup as
   active, so with JS off or still loading the hero is never blank.
   --------------------------------------------------------------------------- */
/* isolate, or the z-index on the scrim pseudo-elements below escapes into the
   hero's stacking context and paints over the headline. Containing them here
   keeps them above the slides and below the text, which is the whole point. */
.hero__media--slider { isolation: isolate; }

.hero__media--slider .hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  will-change: opacity;
}
.hero__media--slider .hero__slide.is-active { opacity: 1; }

/* the slides sit above the gradient wash, so it has to stay on top */
.hero__media--slider::after { z-index: 2; }

.hero__dots {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 5vw, 44px);
  bottom: clamp(16px, 4vw, 38px);
  display: flex;
  gap: 8px;
}
.hero__dot {
  width: 40px; height: 40px;           /* a real tap target around a small dot */
  display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__dot span {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  text-indent: -9999px; overflow: hidden;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.hero__dot:hover span { background: rgba(255, 255, 255, 0.6); }
.hero__dot.is-active span {
  background: var(--accent-text);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero__dot:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 10px; }

/* Someone who has asked for less motion gets the first slide and nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .hero__media--slider .hero__slide { transition: none; }
}
@media (max-width: 620px) {
  .hero__dots { right: 50%; transform: translateX(50%); bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   Scrim for the slider.
   The single image hero was tuned against one known dark photo. Three slides
   vary: the combine averages rgb(118,121,110), where white text would land at
   about 3.4:1. This adds a wash heaviest on the side the text sits, which puts
   white comfortably past AA on every slide while the photo still reads.
   --------------------------------------------------------------------------- */
.hero__media--slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg,
      rgba(8, 9, 12, 0.88) 0%,
      rgba(8, 9, 12, 0.72) 38%,
      rgba(8, 9, 12, 0.30) 70%,
      rgba(8, 9, 12, 0.18) 100%);
}
/* and the existing bottom fade sits above that, so the page still blends out */
.hero__media--slider::after { z-index: 3; }

/* No room to be subtle on a phone: the text runs the full width. */
@media (max-width: 760px) {
  .hero__media--slider::before {
    background: linear-gradient(180deg,
      rgba(8, 9, 12, 0.80) 0%,
      rgba(8, 9, 12, 0.72) 55%,
      rgba(8, 9, 12, 0.86) 100%);
  }
}
.hero__inner { z-index: 4; }

/* ---------------------------------------------------------------------------
   Mobile menu, corrected.
   Four things were wrong:
     - it was pinned to --header-h (64px) but the header sits below a 41px top
       bar, so its real bottom is 105px and the first item was 25px behind it
     - "inset: ... auto" left the bottom unset, so the panel was only as tall as
       its content and the page showed through underneath
     - a long menu had nowhere to scroll
     - the page behind it still scrolled
   --menu-top is set by the script to the header's live bottom edge, which is
   correct whether or not the top bar has scrolled away.
   --------------------------------------------------------------------------- */
.mobile-nav {
  inset: 0;
  padding-top: calc(var(--menu-top, var(--header-h)) + 18px);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* scrolling the menu must not scroll the page */
  align-content: start;
  background: var(--bg);             /* opaque: nothing shows through */
  border-bottom: 0;
  /* The original rule caps this at 100dvh minus the header, which left a strip
     of the page showing along the bottom. Clearing the cap is enough: inset 0
     already gives exactly the viewport height.

     No explicit height here. 100dvh measured 824px against an 812px viewport,
     and with top and bottom both pinned the extra 12px pushed the panel's top
     off the screen, which is what put "Home" back under the header. */
  max-height: none;
}

/* Hold the page still while the menu is over it.
   position:fixed rather than overflow:hidden, because overflow:hidden snaps the
   page to the top: you lose your place, and the header changes height under the
   menu while it is open. The script sets body.top to the scroll offset. */
body.menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   "Made by" credit, matching the one on geareduptuning.co.uk.
   --------------------------------------------------------------------------- */
.footer__credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  text-align: center;
}
.footer__credit a {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: #d4d4d8; transition: color 0.25s;
}
.footer__credit a:hover { color: #fff; }
.footer__credit-mark {
  width: 15px; height: 15px; color: var(--accent-text);
  transition: transform 0.4s var(--ease);
}
.footer__credit a:hover .footer__credit-mark { transform: translateY(-3px); }
.footer__credit a em {
  font-style: normal; margin-left: 8px; padding-left: 9px;
  border-left: 1px solid var(--line);
  color: var(--accent-text); letter-spacing: 0.16em;
}
@media (max-width: 480px) {
  .footer__credit a em { margin-left: 0; padding-left: 0; border-left: 0; }
}