/*
  Auto Volt Motors modernized visual system
  ------------------------------------------------------------
  Design intent:
  - The existing lime identity remains recognizable, but the rest of the site
    is rebuilt around a quieter graphite showroom palette.
  - High-contrast information rails and subtle circuit motifs communicate
    electric-vehicle expertise without turning the page into a gaming UI.
  - Layout, focus states, target sizes, reduced-motion handling, and typography
    are intentionally usable on phones, keyboards, and slower devices.
*/

:root {
  --ink-950: #06090b;
  --ink-900: #080d10;
  --ink-850: #0c1215;
  --ink-800: #10181c;
  --ink-700: #172226;
  --ink-600: #26343a;
  --paper: #f5f7f2;
  --paper-2: #eef2eb;
  --white: #ffffff;
  --text-dark: #111719;
  --text-soft: #59656a;
  --lime: #caff00;
  --lime-hot: #9cff00;
  --lime-deep: #75c900;
  --green-dark: #1d3500;
  --cyan: #76f6db;
  --orange: #ffad5c;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-light: rgba(9, 16, 19, 0.12);
  --shadow-soft: 0 20px 70px rgba(5, 12, 14, 0.12);
  --shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.34);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 30px;
  --radius-xl: 44px;
  --shell: min(1240px, calc(100vw - 48px));
  --header-height: 82px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", var(--font-ui);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  background: var(--ink-950);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--font-ui);
  color: var(--white);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
}

p,
h1,
h2,
h3,
figure,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  color: var(--ink-950);
  background: var(--lime);
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite {
  position: absolute;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 14px 18px;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 10px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 116px 0;
}

.section--light {
  color: var(--text-dark);
  background: var(--paper);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 54px;
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 72px;
  align-items: end;
  max-width: none;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.battery h2,
.about h2,
.contact h2,
.faq h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.8vw, 4.9rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.section-heading > p,
.section-heading--split > p,
.section-heading--center > p {
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: 1.04rem;
  line-height: 1.72;
}

.section-heading--on-dark > p {
  color: rgba(255, 255, 255, .63);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--lime);
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 38px;
  height: 2px;
  background: currentColor;
  box-shadow: 12px 0 0 -0.5px currentColor;
}

.eyebrow--dark {
  color: #4e7200;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: .91rem;
  font-weight: 850;
  letter-spacing: .015em;
  transition: transform .25s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.34) 50%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .62s var(--ease);
}

.button:hover::before {
  transform: translateX(130%);
}

.button:hover {
  transform: translateY(-2px);
}

.button svg,
.text-link svg,
.service-card__link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}

.button:hover svg,
.text-link:hover svg,
.service-card__link:hover svg {
  transform: translateX(4px);
}

.button--lime {
  color: var(--ink-950);
  background: linear-gradient(110deg, var(--lime), var(--lime-hot));
  box-shadow: 0 12px 36px rgba(156, 255, 0, .2);
}

.button--lime:hover {
  box-shadow: 0 16px 44px rgba(156, 255, 0, .31);
}

.button--glass {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.23);
  backdrop-filter: blur(14px);
}

.button--glass:hover {
  background: rgba(255,255,255,.14);
}

.button--dark {
  color: var(--white);
  background: var(--ink-850);
  box-shadow: 0 14px 30px rgba(8, 13, 16, .2);
}

.button--dark:hover {
  background: #172328;
}

.button--compact {
  min-height: 46px;
  padding: 11px 18px;
  font-size: .84rem;
}

.button--full {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-weight: 850;
}

.text-link--dark {
  color: var(--text-dark);
}

/* Top contact rail */
.contact-rail {
  position: relative;
  z-index: 80;
  color: rgba(255,255,255,.76);
  background: var(--ink-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.contact-rail__inner {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 26px;
  font-size: .76rem;
}

.contact-rail a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}

.contact-rail a:hover {
  color: var(--lime);
}

.contact-rail svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-rail__note {
  margin-left: auto;
  color: rgba(255,255,255,.48);
}

/* Header */
.site-header {
  position: sticky;
  z-index: 70;
  top: 0;
  height: var(--header-height);
  background: rgba(8, 13, 16, .84);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(125%);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
  background: rgba(8, 13, 16, .95);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
}

.site-header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: 214px 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  width: 208px;
  align-items: center;
}

.brand img {
  width: 100%;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(17px, 2.1vw, 32px);
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 720;
  transition: color .2s ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}

.primary-nav a:hover,
.primary-nav a.is-active {
  color: var(--white);
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  cursor: pointer;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.menu-toggle__close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

/* Hero */
.hero {
  position: relative;
  min-height: min(860px, calc(100svh - 36px));
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);
}

.hero__media,
.hero__media img,
.hero__scrim,
.hero__circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: -4;
}

.hero__media img {
  object-fit: cover;
  object-position: center 45%;
}

.hero__scrim {
  z-index: -3;
  background:
    radial-gradient(circle at 79% 48%, transparent 0, rgba(4,9,11,.1) 28%, rgba(4,9,11,.58) 64%),
    linear-gradient(90deg, rgba(4,9,11,.98) 0%, rgba(4,9,11,.89) 32%, rgba(4,9,11,.52) 58%, rgba(4,9,11,.38) 100%),
    linear-gradient(0deg, rgba(4,9,11,.85) 0%, transparent 33%);
}

.hero__circuit {
  z-index: -2;
  opacity: .36;
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(202,255,0,.18) 1px),
    linear-gradient(0deg, transparent calc(100% - 1px), rgba(202,255,0,.13) 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(90deg, transparent 0, transparent 47%, #000 100%);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 12%;
  width: 2px;
  height: 100%;
  background: linear-gradient(transparent, rgba(202,255,0,.42), transparent);
  box-shadow: 120px 0 0 rgba(202,255,0,.08), 240px 0 0 rgba(202,255,0,.05);
}

.hero__content {
  display: grid;
  min-height: min(860px, calc(100svh - 36px));
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .68fr);
  align-items: center;
  gap: 64px;
  padding-top: 28px;
  padding-bottom: 74px;
}

.hero__copy {
  max-width: 760px;
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: clamp(3.55rem, 7.3vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.06em;
  text-transform: uppercase;
  text-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.hero h1 em {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(202,255,0,.92);
  font-style: normal;
}

.hero__lead {
  max-width: 670px;
  margin-bottom: 32px;
  color: rgba(255,255,255,.76);
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
  line-height: 1.68;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.68);
  list-style: none;
  font-size: .82rem;
  font-weight: 720;
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__proof svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-card {
  position: relative;
  padding: 30px;
  overflow: hidden;
  background: rgba(7,13,15,.78);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(20px) saturate(130%);
}

.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 112px;
  height: 3px;
  background: var(--lime);
  box-shadow: 104px 0 0 rgba(202,255,0,.38), 152px 0 0 rgba(202,255,0,.16);
}

.hero-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 3px 25px;
  color: rgba(255,255,255,.55);
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.72);
  letter-spacing: 0;
  text-transform: none;
}

.live-dot i,
.console-status i {
  width: 7px;
  height: 7px;
  background: var(--lime-hot);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(156,255,0,.1), 0 0 16px rgba(156,255,0,.65);
}

.choice-stack {
  display: grid;
  gap: 13px;
}

.choice-card {
  display: grid;
  min-height: 112px;
  grid-template-columns: 62px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 17px;
  padding: 18px 19px;
  color: var(--white);
  text-align: left;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 19px;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s ease, border-color .25s ease;
}

.choice-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(202,255,0,.42);
  transform: translateX(4px);
}

.choice-card__icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  color: var(--lime);
  background: rgba(202,255,0,.08);
  border: 1px solid rgba(202,255,0,.2);
  border-radius: 17px;
}

.choice-card svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-card > svg {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.42);
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card strong {
  margin-bottom: 7px;
  font-size: 1.03rem;
  line-height: 1.38;
}

.choice-card small {
  color: rgba(255,255,255,.51);
  font-size: .8rem;
  line-height: 1.55;
}

.hero-card__foot {
  margin: 22px 5px 0;
  color: rgba(255,255,255,.42);
  font-size: .76rem;
  line-height: 1.6;
}

.hero__scroll {
  position: absolute;
  right: 50%;
  bottom: 20px;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.48);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: translateX(50%);
}

.hero__scroll i {
  position: relative;
  width: 38px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.22);
}

.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime);
  animation: scroll-line 1.9s infinite var(--ease);
}

@keyframes scroll-line {
  0% { transform: translateX(-105%); }
  65%, 100% { transform: translateX(105%); }
}

/* Trust band */
.trust-band {
  color: var(--white);
  background: var(--ink-850);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.trust-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.trust-band article {
  display: grid;
  min-height: 166px;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 18px;
  padding: 30px 34px;
  border-right: 1px solid rgba(255,255,255,.1);
}

.trust-band article:first-child {
  border-left: 1px solid rgba(255,255,255,.1);
}

.trust-band__number {
  align-self: start;
  padding-top: 4px;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
}

.trust-band strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}

.trust-band p {
  margin-bottom: 0;
  color: rgba(255,255,255,.53);
  font-size: .83rem;
  line-height: 1.57;
}

/* Inventory */
.inventory {
  overflow: hidden;
}

.inventory::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(202,255,0,.19), transparent 66%);
  pointer-events: none;
}

.inventory-toolbar {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(9,16,19,.05);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  min-height: 42px;
  padding: 9px 15px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.filter-chip:hover,
.filter-chip.is-active {
  color: var(--white);
  background: var(--ink-850);
  border-color: var(--ink-850);
}

.inventory-count {
  padding-right: 12px;
  color: var(--text-soft);
  font-size: .75rem;
  font-weight: 750;
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}

.vehicle-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  box-shadow: 0 15px 45px rgba(9,16,19,.08);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}

.vehicle-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(9,16,19,.14);
}

.vehicle-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}

.vehicle-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.vehicle-card:hover .vehicle-card__image img {
  transform: scale(1.035);
}

.vehicle-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vehicle-card__body {
  padding: 22px;
}

.vehicle-card__body h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.vehicle-card__body > p {
  margin-bottom: 20px;
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.55;
}

.vehicle-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 17px;
  margin-bottom: 19px;
  border-top: 1px solid var(--line-light);
}

.vehicle-card__meta span {
  color: var(--text-soft);
  font-size: .68rem;
}

.vehicle-card__meta strong {
  display: block;
  margin-top: 3px;
  color: var(--text-dark);
  font-size: .78rem;
}

.vehicle-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vehicle-card__price {
  color: var(--text-dark);
  font-size: 1.08rem;
  font-weight: 900;
}

.inventory-empty {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  min-height: 310px;
  place-items: center;
  padding: 48px;
  overflow: hidden;
  text-align: center;
  background: var(--ink-850);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.inventory-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(202,255,0,.1) 1px),
    linear-gradient(0deg, transparent calc(100% - 1px), rgba(202,255,0,.08) 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}

.inventory-empty__inner {
  position: relative;
  max-width: 650px;
}

.inventory-empty__icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--lime);
  background: rgba(202,255,0,.08);
  border: 1px solid rgba(202,255,0,.2);
  border-radius: 20px;
}

.inventory-empty__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inventory-empty h3 {
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.inventory-empty p {
  margin-bottom: 22px;
  color: rgba(255,255,255,.58);
  line-height: 1.65;
}

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

.need-card {
  position: relative;
  min-height: 314px;
  padding: 30px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  box-shadow: 0 12px 38px rgba(9,16,19,.06);
}

.need-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(9,16,19,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(9,16,19,.025), 0 0 0 46px rgba(9,16,19,.018);
}

.need-card--ev {
  color: var(--white);
  background: var(--ink-850);
}

.need-card--ev::after {
  border-color: rgba(202,255,0,.22);
  box-shadow: 0 0 0 22px rgba(202,255,0,.035), 0 0 0 46px rgba(202,255,0,.018);
}

.need-card--help {
  background: linear-gradient(145deg, #e8ffc0, #caff00);
}

.need-card__kicker {
  display: inline-flex;
  padding: 7px 10px;
  margin-bottom: 24px;
  color: var(--text-soft);
  background: rgba(9,16,19,.06);
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.need-card--ev .need-card__kicker {
  color: var(--lime);
  background: rgba(202,255,0,.08);
}

.need-card h3 {
  max-width: 350px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.need-card p {
  position: relative;
  z-index: 1;
  max-width: 390px;
  margin-bottom: 26px;
  color: var(--text-soft);
  font-size: .85rem;
  line-height: 1.65;
}

.need-card--ev p {
  color: rgba(255,255,255,.56);
}

.need-card .text-link {
  position: absolute;
  z-index: 2;
  bottom: 29px;
  left: 30px;
}

/* Services */
.services {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 8%, rgba(202,255,0,.1), transparent 28%),
    var(--ink-900);
}

.services::before {
  content: "AUTO VOLT";
  position: absolute;
  top: 60px;
  left: 50%;
  color: rgba(255,255,255,.018);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 900;
  letter-spacing: -.08em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.service-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.service-card {
  position: relative;
  min-height: 360px;
  padding: 30px;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  transition: transform .3s var(--ease), border-color .3s ease, background-color .3s ease;
}

.service-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(202,255,0,.34);
  transform: translateY(-6px);
}

.service-card--featured {
  grid-column: span 2;
  min-height: 440px;
  padding-right: 48%;
}

.service-card--lime {
  color: var(--ink-950);
  background: var(--lime);
  border-color: var(--lime);
}

.service-card--lime:hover {
  background: #d7ff36;
  border-color: #d7ff36;
}

.service-card__visual {
  position: absolute;
  top: 26px;
  right: -40px;
  bottom: 26px;
  width: 52%;
  opacity: .92;
}

.service-card__visual svg {
  width: 100%;
  height: 100%;
}

.service-card__visual .route,
.service-card__visual .car-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card__visual .route {
  stroke: rgba(202,255,0,.22);
  stroke-width: 2;
}

.service-card__visual .route--2 {
  stroke: rgba(255,255,255,.08);
}

.service-card__visual circle {
  fill: var(--lime);
  filter: drop-shadow(0 0 8px rgba(202,255,0,.7));
}

.service-card__visual .car-line {
  stroke: rgba(255,255,255,.46);
  stroke-width: 2.4;
}

.service-card__index {
  position: absolute;
  top: 28px;
  right: 28px;
  color: rgba(255,255,255,.22);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 900;
}

.service-card--lime .service-card__index {
  color: rgba(8,13,16,.32);
}

.service-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 70px;
  color: var(--lime);
  background: rgba(202,255,0,.08);
  border: 1px solid rgba(202,255,0,.2);
  border-radius: 15px;
}

.service-card--featured .service-card__icon {
  margin-bottom: 104px;
}

.service-card--lime .service-card__icon {
  color: var(--ink-950);
  background: rgba(8,13,16,.08);
  border-color: rgba(8,13,16,.16);
}

.service-card__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  position: relative;
  margin-bottom: 13px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.service-card p {
  position: relative;
  max-width: 470px;
  margin-bottom: 26px;
  color: rgba(255,255,255,.53);
  font-size: .85rem;
  line-height: 1.65;
}

.service-card--lime p {
  color: rgba(8,13,16,.66);
}

.service-card__link {
  position: absolute;
  bottom: 29px;
  left: 30px;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 850;
}

.service-card--lime .service-card__link {
  color: var(--ink-950);
}

/* Battery */
.battery {
  color: var(--text-dark);
  background:
    linear-gradient(90deg, rgba(9,16,19,.035) 1px, transparent 1px),
    linear-gradient(rgba(9,16,19,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
}

.battery__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: 88px;
}

.battery h2 {
  margin-bottom: 24px;
}

.battery__lead {
  max-width: 650px;
  margin-bottom: 28px;
  color: var(--text-soft);
  font-size: 1.03rem;
  line-height: 1.72;
}

.check-list {
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 0 0 34px;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 13px;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.55;
}

.check-list svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-list strong {
  color: var(--text-dark);
}

.battery__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.battery-console {
  position: relative;
  padding: 22px;
  overflow: hidden;
  color: var(--white);
  background: var(--ink-850);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(8,13,16,.22);
}

.battery-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 15%, rgba(202,255,0,.1), transparent 34%);
  pointer-events: none;
}

.battery-console__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 4px 22px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.battery-console__head span,
.battery-console__head strong {
  display: block;
}

.battery-console__head > div > span {
  margin-bottom: 5px;
  color: var(--lime);
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.battery-console__head strong {
  font-size: 1rem;
}

.console-status {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.56);
  font-size: .68rem;
}

.battery-console__body {
  position: relative;
  padding: 28px 4px 4px;
}

.battery-graphic {
  position: relative;
  display: flex;
  width: 78%;
  max-width: 370px;
  align-items: center;
  margin: 4px auto 31px;
}

.battery-graphic__case {
  display: grid;
  width: calc(100% - 17px);
  height: 92px;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 9px;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 15px;
}

.battery-graphic__case span {
  background: linear-gradient(180deg, var(--lime), var(--lime-hot));
  border-radius: 7px;
  box-shadow: inset 0 -12px 20px rgba(57,97,0,.12), 0 0 20px rgba(156,255,0,.07);
}

.battery-graphic > i {
  width: 17px;
  height: 35px;
  background: rgba(255,255,255,.3);
  border-radius: 0 7px 7px 0;
}

.console-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.42);
  font-size: .72rem;
}

.console-row strong {
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  text-align: right;
}

.console-chart {
  height: 120px;
  padding-top: 13px;
}

.console-chart svg {
  width: 100%;
  height: 100%;
}

.chart-fill {
  fill: url(#chartFill);
}

.chart-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.battery-console__note {
  position: relative;
  padding: 14px 4px 2px;
  margin: 0;
  color: rgba(255,255,255,.36);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .65rem;
  line-height: 1.5;
}

/* Process */
.process {
  color: var(--text-dark);
  background: var(--white);
}

.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line-light);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(9,16,19,.07);
}

.process-list::before {
  content: "";
  position: absolute;
  top: 72px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(9,16,19,.18), transparent);
}

.process-list li {
  position: relative;
  min-height: 330px;
  padding: 34px 28px;
  border-right: 1px solid var(--line-light);
}

.process-list li:last-child {
  border-right: 0;
}

.process-list__num {
  position: absolute;
  top: 25px;
  right: 25px;
  color: rgba(9,16,19,.23);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 900;
}

.process-list__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  margin-bottom: 76px;
  color: var(--ink-950);
  background: var(--lime);
  border: 10px solid var(--white);
  border-radius: 23px;
  box-shadow: 0 0 0 1px var(--line-light), 0 12px 25px rgba(121,171,0,.18);
}

.process-list__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-list h3 {
  margin-bottom: 13px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
}

.process-list p {
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: .83rem;
  line-height: 1.65;
}

/* About */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink-900);
}

.about__media {
  position: relative;
  min-width: 0;
  min-height: 760px;
  overflow: hidden;
}

.about__media picture,
.about__media img {
  width: 100%;
  height: 100%;
}

.about__media img {
  object-fit: cover;
  object-position: 62% center;
}

.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(8,13,16,.32));
}

.about__badge {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 34px;
  width: min(350px, calc(100% - 68px));
  padding: 24px;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(0,0,0,.25);
}

.about__badge span {
  display: block;
  margin-bottom: 8px;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about__badge strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.08;
  text-transform: uppercase;
}

.about__copy {
  display: flex;
  min-width: 0;
  min-height: 760px;
  flex-direction: column;
  justify-content: center;
  padding: 88px clamp(42px, 7vw, 110px);
  background:
    radial-gradient(circle at 85% 10%, rgba(202,255,0,.09), transparent 28%),
    var(--ink-900);
}

.about h2 {
  max-width: 760px;
  margin-bottom: 26px;
}

.about__lead {
  max-width: 680px;
  margin-bottom: 35px;
  color: rgba(255,255,255,.65);
  font-size: 1.03rem;
  line-height: 1.72;
}

.about__points {
  display: grid;
  gap: 0;
  max-width: 700px;
  margin-bottom: 38px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.about__points article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.about__points article > span {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 900;
}

.about__points h3 {
  margin-bottom: 7px;
  font-size: 1rem;
}

.about__points p {
  margin-bottom: 0;
  color: rgba(255,255,255,.48);
  font-size: .82rem;
  line-height: 1.58;
}

.about__copy .button {
  align-self: flex-start;
}

/* Gallery */
.gallery {
  background: #0b1114;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr 1fr;
  grid-template-rows: 310px 310px;
  gap: 16px;
}

.gallery-tile,
.gallery-info {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.gallery-tile {
  padding: 0;
  display: block;
  color: var(--white);
  background: var(--ink-800);
  cursor: default;
  text-align: left;
  text-decoration: none;
}

/*
 * The premises tile is informational and therefore deliberately has no hover
 * movement or pointer cursor. Only the second tile is a link to the localized
 * vehicle catalogue, so its interaction treatment communicates a real action.
 */
.gallery-tile--link {
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s ease;
}

.gallery-tile--link:hover,
.gallery-tile--link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 58px rgba(167, 255, 0, .18);
}

.gallery-tile--link:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

.gallery-tile--wide {
  grid-column: span 2;
}

.gallery-tile--tall {
  grid-row: span 2;
}

.gallery-tile picture,
.gallery-tile img {
  width: 100%;
  height: 100%;
}

.gallery-tile img {
  object-fit: cover;
  transition: transform .65s var(--ease), filter .65s ease;
}

.gallery-tile--link:hover img,
.gallery-tile--link:focus-visible img {
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.045);
}

.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4,8,10,.88) 0, rgba(4,8,10,.15) 55%, transparent 78%);
}

.gallery-tile > span {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 24px;
}

.gallery-tile strong,
.gallery-tile small {
  display: block;
}

.gallery-tile strong {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.gallery-tile small {
  color: rgba(255,255,255,.54);
}

.gallery-tile > i {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 14px;
}

.gallery-tile > i svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .28s var(--ease);
}

.gallery-tile--link:hover > i svg,
.gallery-tile--link:focus-visible > i svg {
  transform: translateX(3px);
}

.gallery-info {
  padding: 28px;
  color: var(--white);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
}

.gallery-info--report {
  background: linear-gradient(145deg, rgba(202,255,0,.14), rgba(255,255,255,.035));
}

.gallery-info--check {
  color: var(--ink-950);
  background: var(--lime);
  border-color: var(--lime);
}

.gallery-info__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 24px;
  color: var(--lime);
  background: rgba(202,255,0,.08);
  border: 1px solid rgba(202,255,0,.2);
  border-radius: 14px;
}

.gallery-info--check .gallery-info__icon {
  color: var(--ink-950);
  background: rgba(8,13,16,.08);
  border-color: rgba(8,13,16,.15);
}

.gallery-info__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-info > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.4);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gallery-info--check > span {
  color: rgba(8,13,16,.48);
}

.gallery-info h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.gallery-info p,
.gallery-info li {
  color: rgba(255,255,255,.52);
  font-size: .77rem;
  line-height: 1.55;
}

.gallery-info--check li {
  color: rgba(8,13,16,.68);
}

.gallery-info ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  margin-bottom: 0;
}

.report-lines {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: grid;
  gap: 7px;
}

.report-lines i {
  height: 4px;
  background: rgba(255,255,255,.09);
  border-radius: 99px;
}

.report-lines i:nth-child(1) { width: 92%; }
.report-lines i:nth-child(2) { width: 68%; }
.report-lines i:nth-child(3) { width: 84%; }
.report-lines i:nth-child(4) { width: 48%; background: var(--lime); }

/* Testimonials */
.testimonials {
  color: var(--text-dark);
  background: var(--paper);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: .8fr 1.4fr .8fr;
  align-items: stretch;
  gap: 18px;
}

.testimonial-grid figure {
  position: relative;
  min-height: 365px;
  padding: 32px;
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(9,16,19,.06);
}

.testimonial-grid figure::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(9,16,19,.06);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(9,16,19,.025);
}

.testimonial-grid .testimonial--featured {
  color: var(--white);
  background: var(--ink-850);
}

.testimonial--featured::after {
  border-color: rgba(202,255,0,.16) !important;
  box-shadow: 0 0 0 22px rgba(202,255,0,.03) !important;
}

.quote-mark {
  margin-bottom: 48px;
  color: var(--lime-deep);
  font-family: Georgia, serif;
  font-size: 5.5rem;
  line-height: .6;
}

.testimonial--featured .quote-mark {
  color: var(--lime);
}

.testimonial-grid blockquote {
  position: relative;
  z-index: 1;
  margin-bottom: 42px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.testimonial-grid figcaption {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  left: 32px;
}

.testimonial-grid figcaption strong,
.testimonial-grid figcaption span {
  display: block;
}

.testimonial-grid figcaption strong {
  margin-bottom: 4px;
  font-size: .84rem;
}

.testimonial-grid figcaption span {
  color: var(--text-soft);
  font-size: .71rem;
}

.testimonial--featured figcaption span {
  color: rgba(255,255,255,.44);
}

/* FAQ */
.faq {
  color: var(--text-dark);
  background: var(--white);
}

.faq__grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: start;
  gap: 86px;
}

.faq__intro {
  position: sticky;
  top: calc(var(--header-height) + 30px);
}

.faq h2 {
  margin-bottom: 24px;
}

.faq__intro > p:not(.eyebrow) {
  margin-bottom: 30px;
  color: var(--text-soft);
  line-height: 1.72;
}

.faq-list {
  border-top: 1px solid var(--line-light);
}

.faq-list details {
  border-bottom: 1px solid var(--line-light);
}

.faq-list summary {
  display: grid;
  min-height: 86px;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 18px;
  padding: 19px 0;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: var(--paper-2);
  border-radius: 12px;
  transition: background-color .2s ease, transform .3s var(--ease);
}

.faq-list summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.faq-list details[open] summary span {
  color: var(--ink-950);
  background: var(--lime);
  transform: rotate(45deg);
}

.faq-list details > div {
  display: grid;
  grid-template-rows: 0fr;
}

.faq-list details[open] > div {
  grid-template-rows: 1fr;
}

.faq-list details > div > p {
  max-width: 720px;
  padding: 0 60px 26px 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.72;
}

/* Contact */
.contact {
  position: relative;
  padding: 116px 0;
  overflow: hidden;
  background: var(--ink-900);
}

.contact__background {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 26%, rgba(202,255,0,.12), transparent 31%),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(202,255,0,.07) 1px),
    linear-gradient(0deg, transparent calc(100% - 1px), rgba(202,255,0,.06) 1px);
  background-size: auto, 72px 72px, 72px 72px;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35));
}

.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: 74px;
}

.contact h2 {
  margin-bottom: 24px;
}

.contact__copy > p:not(.eyebrow):not(.contact__visit) {
  max-width: 600px;
  margin-bottom: 34px;
  color: rgba(255,255,255,.58);
  line-height: 1.72;
}

.contact-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.contact-cards a {
  display: grid;
  min-height: 88px;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 15px;
  padding: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  transition: transform .25s var(--ease), background-color .25s ease, border-color .25s ease;
}

.contact-cards a:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(202,255,0,.35);
  transform: translateX(4px);
}

.contact-cards a > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--lime);
  background: rgba(202,255,0,.08);
  border-radius: 14px;
}

.contact-cards svg,
.contact__visit svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-cards small,
.contact-cards strong,
.contact-cards em {
  display: block;
}

.contact-cards small {
  margin-bottom: 4px;
  color: rgba(255,255,255,.36);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-cards strong {
  color: rgba(255,255,255,.86);
  font-size: .9rem;
}

.contact-cards em {
  margin-top: 4px;
  color: var(--lime);
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
}

.contact__visit {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.4);
  font-size: .72rem;
}

.contact__visit svg {
  width: 16px;
  height: 16px;
  color: var(--lime);
}

.inquiry-form {
  padding: 34px;
  color: var(--text-dark);
  background: var(--paper);
  border-radius: 30px;
  box-shadow: 0 34px 90px rgba(0,0,0,.31);
}

.inquiry-form__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-light);
}

.inquiry-form__header span,
.inquiry-form__header strong {
  display: block;
}

.inquiry-form__header span {
  color: #507400;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.inquiry-form__header strong {
  max-width: 270px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.12;
  text-align: right;
  text-transform: uppercase;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: block;
}

.field--full {
  grid-column: 1 / -1;
}

.field > span,
.field legend {
  display: block;
  margin-bottom: 8px;
  color: #394348;
  font-size: .73rem;
  font-weight: 800;
}

.field b {
  color: #638f00;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid rgba(9,16,19,.16);
  border-radius: 13px;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.field input,
.field select {
  min-height: 51px;
  padding: 12px 14px;
}

.field textarea {
  min-height: 132px;
  padding: 14px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(9,16,19,.3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #82b900;
  box-shadow: 0 0 0 4px rgba(156,255,0,.16);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c84141;
  box-shadow: 0 0 0 3px rgba(200,65,65,.11);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #99a2a6;
}

.field-hint {
  display: block;
  margin-top: 7px;
  color: #7a858a;
  font-size: .67rem;
}

.field-error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  color: #b82f2f;
  font-size: .68rem;
  font-weight: 700;
}

.field-error:not(:empty) {
  min-height: 1em;
}

.contact-preference {
  padding: 0;
  margin: 0;
  border: 0;
}

.contact-preference > label {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  margin-right: 8px;
  cursor: pointer;
}

.contact-preference input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-preference label span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 14px;
  color: var(--text-soft);
  background: var(--white);
  border: 1px solid rgba(9,16,19,.15);
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
}

.contact-preference input:checked + span {
  color: var(--white);
  background: var(--ink-850);
  border-color: var(--ink-850);
}

.contact-preference input:focus-visible + span {
  outline: 3px solid var(--lime-deep);
  outline-offset: 3px;
}

.consent {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  cursor: pointer;
}

.consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #6fa300;
}

.consent span {
  color: #667176;
  font-size: .69rem;
  line-height: 1.55;
}

.field-error--consent {
  grid-column: 1 / -1;
  margin-top: -12px;
}

.inquiry-form > .button {
  margin-top: 22px;
}

.form-status {
  min-height: 0;
  margin: 14px 4px 0;
  color: #4d7000;
  font-size: .73rem;
  font-weight: 750;
  line-height: 1.5;
}

.form-status.is-error {
  color: #b82f2f;
}

/* Footer */
.site-footer {
  padding: 72px 0 24px;
  background: var(--ink-950);
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, .6fr);
  gap: 56px;
  padding-bottom: 58px;
}

.site-footer__brand img {
  width: 240px;
  height: auto;
  margin-bottom: 19px;
}

.site-footer__brand p {
  max-width: 370px;
  margin-bottom: 0;
  color: rgba(255,255,255,.4);
  font-size: .8rem;
  line-height: 1.62;
}

.site-footer h2 {
  margin-bottom: 17px;
  color: rgba(255,255,255,.38);
  font-size: .65rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.site-footer__main > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.site-footer__main a,
.site-footer__main button {
  min-height: 30px;
  padding: 0;
  color: rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  text-align: left;
  transition: color .2s ease;
}

.site-footer__main a:hover,
.site-footer__main button:hover {
  color: var(--lime);
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  align-items: start;
  gap: 18px;
  padding-top: 22px;
  color: rgba(255,255,255,.3);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .66rem;
}

.site-footer__bottom p {
  min-width: 0;
  margin-bottom: 0;
}

/* The privacy and cookie disclosure can be substantially longer than the copyright line, especially after Analytics disclosure is localized. A bounded two-column cluster keeps the notice on several readable lines instead of letting its intrinsic width stretch the whole footer, while the minmax tracks preserve room for both footer columns without clipping them. */
.site-footer__privacy {
  display: grid;
  width: min(100%, 40rem);
  max-width: 40rem;
  min-width: 0;
  grid-template-columns: max-content minmax(0, 34rem);
  align-items: start;
  justify-content: end;
  justify-self: end;
  gap: 9px 18px;
}

.site-footer__cookie-notice {
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.site-footer__bottom a:hover {
  color: var(--lime);
}


.mobile-actions {
  display: none;
}

.back-to-top {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--ink-950);
  background: var(--lime);
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,.27);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .25s var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reveal animation is enabled only after JavaScript initializes. */
html[data-js="true"] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

html[data-js="true"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Privacy and simple pages */
.simple-page {
  min-height: 100svh;
  color: var(--text-dark);
  background: var(--paper);
}

.simple-page__header {
  padding: 24px 0;
  background: var(--ink-900);
}

.simple-page__header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.simple-page__header img {
  width: 220px;
}

.simple-page__header a:last-child {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  font-weight: 800;
}

.simple-page__content {
  max-width: 850px;
  padding: 92px 0 120px;
}

.simple-page__content h1 {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.simple-page__content h2 {
  margin: 42px 0 14px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  text-transform: uppercase;
}

.simple-page__content p,
.simple-page__content li {
  color: var(--text-soft);
  line-height: 1.72;
}

.simple-page__content a {
  color: #4c7000;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 36px, 1060px);
  }

  .site-header__inner {
    grid-template-columns: 188px 1fr auto;
    gap: 18px;
  }

  .brand {
    width: 184px;
  }

  .primary-nav {
    gap: 16px;
  }

  .primary-nav a {
    font-size: .75rem;
  }

  .hero__content {
    grid-template-columns: minmax(0, 1fr) minmax(370px, .82fr);
    gap: 36px;
  }

  .hero h1 {
    font-size: clamp(3.5rem, 7vw, 6.4rem);
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card--featured {
    grid-column: span 2;
  }

  .battery__grid {
    gap: 50px;
  }

  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-list li:nth-child(2) {
    border-right: 0;
  }

  .process-list li:nth-child(-n+2) {
    border-bottom: 1px solid var(--line-light);
  }

  .process-list::before {
    display: none;
  }

  .about__copy {
    padding-inline: 54px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-grid figure:last-child {
    grid-column: span 2;
    min-height: 300px;
  }

  .contact__grid {
    gap: 46px;
  }
}

@media (max-width: 940px) {
  :root {
    --header-height: 72px;
  }

  .contact-rail__inner {
    justify-content: center;
  }

  .contact-rail__inner > a:nth-of-type(2),
  .contact-rail__inner > a:nth-of-type(3),
  .contact-rail__note {
    display: none;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .brand {
    width: 195px;
  }

  .menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .header-cta {
    display: none;
  }

  .primary-nav {
    position: fixed;
    top: calc(var(--header-height) + 36px);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 26px max(18px, calc((100vw - var(--shell)) / 2)) 120px;
    overflow-y: auto;
    background: rgba(8,13,16,.98);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .25s var(--ease);
  }

  .primary-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-nav a {
    min-height: 68px;
    padding: 0;
    color: rgba(255,255,255,.8);
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-family: var(--font-display);
    font-size: 1.45rem;
    text-transform: uppercase;
  }

  .primary-nav a::after {
    display: none;
  }

  .section-heading--split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hero {
    min-height: auto;
  }

  .hero__media img {
    object-position: 61% center;
  }

  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(4,9,11,.97), rgba(4,9,11,.72) 68%, rgba(4,9,11,.5)),
      linear-gradient(0deg, rgba(4,9,11,.92), transparent 50%);
  }

  .hero__content {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .hero__copy {
    max-width: 760px;
  }

  .hero-card {
    width: 100%;
    max-width: 720px;
  }

  .hero__scroll {
    display: none;
  }

  .trust-band__grid {
    grid-template-columns: 1fr;
  }

  .trust-band article,
  .trust-band article:first-child {
    min-height: 126px;
    border-right: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
  }

  .trust-band article:last-child {
    border-bottom: 0;
  }

  .vehicle-grid,
  .need-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Keep the decorative route drawing inside the tablet viewport. The base
     desktop treatment intentionally overhangs its card, but that overhang can
     enlarge the document scroll width on Chromium at this breakpoint. */
  .service-card__visual {
    right: 0;
    width: 48%;
  }

  .service-card__visual svg {
    overflow: hidden;
  }

  .need-card:last-child {
    grid-column: span 2;
  }

  .battery__grid {
    grid-template-columns: 1fr;
  }

  .battery-console {
    max-width: 740px;
  }

  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__media,
  .about__copy {
    min-height: auto;
  }

  .about__media {
    aspect-ratio: 16 / 10;
  }

  .about__copy {
    padding: 82px max(18px, calc((100vw - var(--shell)) / 2));
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 330px 300px 300px;
  }

  .gallery-tile--wide {
    grid-column: span 2;
  }

  .gallery-tile--tall {
    grid-row: auto;
  }

  .faq__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .faq__intro {
    position: static;
  }

  .contact__copy {
    max-width: 720px;
  }

  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-cards a {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .site-footer__main {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: span 3;
  }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100vw - 28px);
    --radius-l: 24px;
  }

  html {
    scroll-padding-top: 86px;
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .section,
  .contact {
    padding: 82px 0;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2,
  .battery h2,
  .about h2,
  .contact h2,
  .faq h2 {
    font-size: clamp(2.35rem, 11vw, 3.65rem);
  }

  .eyebrow {
    font-size: .68rem;
    line-height: 1.45;
  }

  .contact-rail__inner {
    min-height: 34px;
  }

  .contact-rail a {
    min-height: 34px;
  }

  .site-header {
    --header-height: 68px;
  }

  .brand {
    width: 170px;
  }

  .primary-nav {
    top: 102px;
    padding-inline: 22px;
  }

  .hero__media img {
    object-position: 64% center;
  }

  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(4,9,11,.96), rgba(4,9,11,.74)),
      linear-gradient(0deg, rgba(4,9,11,.96), rgba(4,9,11,.1) 78%);
  }

  .hero__content {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 15.7vw, 5.25rem);
    line-height: .9;
  }

  .hero__lead {
    font-size: .98rem;
  }

  .hero__actions {
    display: grid;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__proof {
    display: grid;
    gap: 10px;
  }

  .hero-card {
    padding: 21px;
    border-radius: 24px;
  }

  .hero-card::before {
    left: 21px;
  }

  .hero-card__topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 20px;
    line-height: 1.5;
  }

  .choice-card {
    min-height: 104px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    padding: 16px;
  }

  .choice-card > svg {
    display: none;
  }

  .choice-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
  }

  .choice-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .choice-card strong {
    margin-bottom: 6px;
    font-size: .98rem;
    line-height: 1.42;
  }

  .choice-card small {
    font-size: .76rem;
    line-height: 1.55;
  }

  .hero-card__foot {
    margin-top: 19px;
  }

  .trust-band article {
    grid-template-columns: 42px 1fr;
    padding: 24px 20px;
  }

  .inventory-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .filter-chip {
    flex: 1 1 auto;
  }

  .inventory-count {
    padding-left: 8px;
  }

  .vehicle-grid,
  .need-grid {
    grid-template-columns: 1fr;
  }

  .need-card:last-child {
    grid-column: auto;
  }

  .inventory-empty {
    min-height: 340px;
    padding: 34px 22px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .service-card--featured {
    grid-column: auto;
    min-height: 350px;
    padding-right: 28px;
  }

  .service-card__visual {
    top: auto;
    right: -100px;
    bottom: -60px;
    width: 100%;
    height: 250px;
    opacity: .38;
  }

  .service-card__icon,
  .service-card--featured .service-card__icon {
    margin-bottom: 64px;
  }

  .battery__grid {
    gap: 48px;
  }

  .battery__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .battery__actions .button {
    width: 100%;
  }

  .battery-console {
    padding: 15px;
    border-radius: 22px;
  }

  .battery-console__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .console-row {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .console-row strong {
    text-align: left;
  }

  .process-list {
    grid-template-columns: 1fr;
  }

  .process-list li,
  .process-list li:nth-child(2) {
    min-height: 270px;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .process-list li:last-child {
    border-bottom: 0;
  }

  .process-list__icon {
    margin-bottom: 48px;
  }

  .about__media {
    aspect-ratio: 4 / 3;
  }

  .about__badge {
    right: 15px;
    bottom: 15px;
    width: calc(100% - 30px);
    padding: 18px;
  }

  .about__copy {
    padding: 76px 20px;
  }

  .about__points article {
    grid-template-columns: 36px 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 320px 280px 320px;
  }

  .gallery-tile--wide {
    grid-column: auto;
  }

  .gallery-tile > i {
    width: 42px;
    height: 42px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-grid figure,
  .testimonial-grid figure:last-child {
    grid-column: auto;
    min-height: 330px;
  }

  .faq-list summary {
    min-height: 78px;
    grid-template-columns: 1fr 38px;
    font-size: .87rem;
  }

  .faq-list summary span {
    width: 38px;
    height: 38px;
  }

  .faq-list details > div > p {
    padding-right: 0;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-cards a {
    grid-template-columns: 48px 1fr;
  }

  .inquiry-form {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .inquiry-form__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .inquiry-form__header strong {
    text-align: left;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field--full,
  .consent,
  .field-error--consent {
    grid-column: auto;
  }

  .site-footer {
    padding-top: 56px;
  }

  .site-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 36px 26px;
  }

  .site-footer__brand {
    grid-column: span 2;
  }

  .site-footer__main > div:last-child {
    grid-column: span 2;
  }

  .site-footer__bottom {
    grid-template-columns: 1fr;
  }

  /* Once the footer stacks vertically, the privacy link and the bounded notice also stack so neither element competes for horizontal room on phones and narrow tablets. */
  .site-footer__privacy {
    width: min(100%, 34rem);
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    justify-self: start;
    gap: 7px;
  }

  .mobile-actions {
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: calc(66px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr 1fr;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
    background: rgba(8,13,16,.95);
    border-top: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
  }

  .mobile-actions a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--white);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    font-size: .77rem;
    font-weight: 850;
  }

  .mobile-actions a:last-child {
    color: var(--ink-950);
    background: var(--lime);
    border-color: var(--lime);
  }

  .mobile-actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .back-to-top {
    right: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .simple-page__header img {
    width: 170px;
  }

  .simple-page__content {
    padding: 70px 0 95px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html[data-js="true"] [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-dark: rgba(255,255,255,.3);
    --line-light: rgba(9,16,19,.28);
  }

  .primary-nav a,
  .hero__lead,
  .service-card p,
  .about__lead,
  .contact__copy > p:not(.eyebrow):not(.contact__visit) {
    color: var(--white);
  }
}

@media print {
  .contact-rail,
  .site-header,
  .hero__actions,
  .hero-card,
  .mobile-actions,
  .back-to-top,
  .button,
  .site-footer button {
    display: none !important;
  }

  body,
  .section,
  .services,
  .gallery,
  .contact,
  .about,
  .about__copy {
    color: #000 !important;
    background: #fff !important;
  }

  .hero {
    min-height: auto;
    color: #000;
    background: #fff;
  }

  .hero__media,
  .hero__scrim,
  .hero__circuit {
    display: none;
  }

  .hero__content {
    min-height: auto;
    padding: 30px 0;
  }
}

/* ============================================================
   V5 TYPOGRAPHY, SERVICE-CHOICE AND VEHICLE-CATALOGUE AUDIT
   Screen-only overrides intentionally follow the print rules so the
   print stylesheet remains compact while every interactive viewport gets
   the corrected Czech-safe type scale and catalogue geometry.
   ============================================================ */
@media screen {
  :root {
    /* Segoe UI and the UI fallbacks include Czech glyphs and do not squeeze
       háčeks/accents into the line above. The prior condensed fallback was
       responsible for the broken hero rhythm. */
    --font-display: "Segoe UI", Arial, var(--font-ui);
    --type-caption: clamp(.82rem, .79rem + .12vw, .89rem);
    --type-body-small: clamp(.9rem, .87rem + .1vw, .96rem);
    --type-body: clamp(1rem, .97rem + .12vw, 1.08rem);
  }

  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Primary display hierarchy: deliberately firm, never billboard-sized. */
  .hero h1 {
    max-width: 790px;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5.45vw, 5.75rem);
    font-weight: 850;
    line-height: 1.01;
    letter-spacing: -.047em;
    text-transform: none;
    text-wrap: balance;
  }

  .hero h1 em {
    margin-top: .05em;
    line-height: 1.04;
  }

  .section-heading h2,
  .battery h2,
  .about h2,
  .contact h2,
  .faq h2 {
    font-size: clamp(2.25rem, 3.8vw, 4.15rem);
    font-weight: 820;
    line-height: 1.055;
    letter-spacing: -.041em;
    text-transform: none;
    text-wrap: balance;
  }

  .simple-page__content h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.85rem);
    line-height: 1.03;
    text-transform: none;
  }

  .simple-page__content h2 {
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    line-height: 1.16;
    text-transform: none;
  }

  /* Small copy now stays readable instead of becoming decorative dust. */
  .contact-rail__inner { font-size: var(--type-caption); }
  .primary-nav a { font-size: .88rem; }
  .eyebrow { font-size: .82rem; line-height: 1.45; }
  .button { min-height: 56px; padding: 16px 24px; font-size: .97rem; }
  .button--compact { min-height: 48px; padding: 12px 19px; font-size: .89rem; }
  .section-heading > p,
  .section-heading--split > p,
  .section-heading--center > p { font-size: var(--type-body); }
  .hero__lead { font-size: clamp(1.06rem, 1.25vw, 1.2rem); }
  .hero__proof { font-size: .9rem; line-height: 1.45; }
  .hero__scroll { font-size: .78rem; }
  .trust-band p { font-size: .91rem; line-height: 1.62; }
  .trust-band strong { font-size: 1.04rem; }
  .need-card__kicker { font-size: .8rem; }
  .need-card p,
  .service-card p { font-size: .95rem; line-height: 1.66; }
  .service-card__link { font-size: .9rem; }
  .battery-console__head > div > span,
  .gallery-info > span,
  .about__badge span,
  .contact-cards small,
  .inquiry-form__header span,
  .site-footer h2 { font-size: .78rem; }
  .console-status,
  .console-row,
  .battery-console__note,
  .contact__visit,
  .field-hint,
  .field-error,
  .site-footer__bottom { font-size: .8rem; }
  .console-row strong { font-size: .86rem; }
  .process-list p,
  .about__points p { font-size: .92rem; line-height: 1.65; }
  .gallery-info p,
  .gallery-info li { font-size: .88rem; line-height: 1.6; }
  .testimonial-grid figcaption strong { font-size: .91rem; }
  .testimonial-grid figcaption span { font-size: .82rem; }
  .faq-list details > div > p { font-size: .97rem; }
  .contact-cards strong { font-size: .98rem; }
  .contact-cards em { font-size: .8rem; }
  .field > span,
  .field legend,
  .contact-preference label span,
  .form-status { font-size: .83rem; }
  .consent span { font-size: .87rem; line-height: 1.58; }
  .site-footer__brand p { font-size: .9rem; }
  .site-footer__main a,
  .site-footer__main button { font-size: .88rem; }

  /* Co právě řešíte: three distinct routes, one consistent component. */
  .hero-card {
    padding: 32px;
  }

  .hero-card__topline {
    font-size: .83rem;
    line-height: 1.5;
  }

  .choice-card {
    --choice-accent: var(--lime);
    --choice-rgb: 202, 255, 0;
    position: relative;
    overflow: hidden;
    min-height: 116px;
    border-color: rgba(var(--choice-rgb), .22);
    background:
      linear-gradient(90deg, rgba(var(--choice-rgb), .085), rgba(255,255,255,.045) 44%),
      rgba(255,255,255,.025);
  }

  .choice-card::before {
    content: "";
    position: absolute;
    inset: 13px auto 13px 0;
    width: 3px;
    background: var(--choice-accent);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 20px rgba(var(--choice-rgb), .34);
  }

  .choice-card--buy {
    --choice-accent: #caff00;
    --choice-rgb: 202, 255, 0;
  }

  .choice-card--import {
    --choice-accent: #64d8ff;
    --choice-rgb: 100, 216, 255;
  }

  .choice-card--battery {
    --choice-accent: #ffb45e;
    --choice-rgb: 255, 180, 94;
  }

  .choice-card:hover {
    border-color: rgba(var(--choice-rgb), .62);
    background:
      linear-gradient(90deg, rgba(var(--choice-rgb), .16), rgba(255,255,255,.075) 48%),
      rgba(255,255,255,.04);
  }

  .choice-card__icon {
    color: var(--choice-accent);
    background: rgba(var(--choice-rgb), .1);
    border-color: rgba(var(--choice-rgb), .3);
    box-shadow: inset 0 0 24px rgba(var(--choice-rgb), .035);
  }

  .choice-card > svg { color: var(--choice-accent); }
  .choice-card strong { font-size: 1.08rem; line-height: 1.42; }
  .choice-card small { font-size: .88rem; line-height: 1.58; }
  .hero-card__foot { font-size: .84rem; line-height: 1.62; }

  /* Static semantic vehicle catalogue. */
  .vehicle-grid--catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 26px;
  }

  .vehicle-grid--catalog .vehicle-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .vehicle-card__image {
    display: block;
    aspect-ratio: 16 / 10;
  }

  .vehicle-card__image--front img { object-position: center 55%; }
  .vehicle-card__image--wide-source img { object-position: center 48%; }

  .vehicle-card__badge {
    max-width: calc(100% - 28px);
    padding: 8px 11px;
    font-size: .78rem;
    line-height: 1.25;
    letter-spacing: .035em;
    white-space: normal;
  }

  .vehicle-card__badge--petrol {
    color: #fff;
    background: #b74c31;
  }

  .vehicle-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 24px;
  }

  .vehicle-card__heading {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
  }

  .vehicle-card__heading span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 9px;
    color: #354248;
    background: var(--paper-2);
    border: 1px solid rgba(9,16,19,.1);
    border-radius: 999px;
    font-size: .79rem;
    font-weight: 820;
    line-height: 1.2;
  }

  .vehicle-card__heading span:first-child {
    color: #304900;
    background: rgba(202,255,0,.22);
    border-color: rgba(117,201,0,.28);
  }

  .vehicle-card__body h3 {
    margin-bottom: 10px;
    font-size: clamp(1.35rem, 1.35vw, 1.58rem);
    line-height: 1.16;
    letter-spacing: -.025em;
  }

  .vehicle-card__body > p {
    margin-bottom: 22px;
    color: #4e5d62;
    font-size: .95rem;
    line-height: 1.64;
  }

  .vehicle-card__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: auto 0 20px;
  }

  .vehicle-card__specs > div {
    min-width: 0;
    padding: 11px 12px;
    background: #f4f7f1;
    border: 1px solid rgba(9,16,19,.09);
    border-radius: 12px;
  }

  .vehicle-card__specs dt {
    margin-bottom: 3px;
    color: #647176;
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.32;
  }

  .vehicle-card__specs dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.32;
  }

  .button--vehicle {
    width: 100%;
    min-height: 54px;
    color: var(--white);
    background: var(--ink-850);
    border-radius: 15px;
    box-shadow: none;
  }

  .button--vehicle:hover {
    color: var(--ink-950);
    background: var(--lime);
  }

  .vehicle-spec-note {
    max-width: 930px;
    padding: 18px 20px;
    margin: 4px auto 0;
    color: #4b5a5f;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(9,16,19,.11);
    border-radius: 16px;
    font-size: .9rem;
    line-height: 1.62;
    text-align: center;
  }

  .vehicle-spec-note strong { color: var(--text-dark); }

}

@media screen and (max-width: 1120px) {
  .primary-nav a { font-size: .83rem; }
  .hero h1 { font-size: clamp(3.2rem, 6.6vw, 5.35rem); }
  .vehicle-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 940px) {
  .primary-nav a {
    font-size: 1.35rem;
    line-height: 1.15;
    text-transform: none;
  }

  .hero__copy { max-width: 720px; }
  .hero h1 { max-width: 720px; font-size: clamp(3.35rem, 8.7vw, 5.15rem); }
}

@media screen and (max-width: 680px) {
  .section-heading h2,
  .battery h2,
  .about h2,
  .contact h2,
  .faq h2 {
    font-size: clamp(2.05rem, 9.3vw, 3.15rem);
    line-height: 1.08;
  }

  .eyebrow { font-size: .78rem; }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.65rem, 12.2vw, 3.8rem);
    line-height: 1.035;
    letter-spacing: -.043em;
  }

  .hero h1 em { margin-top: .08em; }
  .hero__lead { font-size: 1rem; line-height: 1.66; }
  .hero__proof { font-size: .88rem; }

  .hero-card { padding: 22px; }
  .hero-card::before { left: 22px; }
  .hero-card__topline { font-size: .8rem; }

  .choice-card {
    min-height: 110px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 15px;
    padding: 17px;
  }

  .choice-card__icon { width: 56px; height: 56px; }
  .choice-card strong { font-size: 1.02rem; line-height: 1.43; }
  .choice-card small { font-size: .85rem; line-height: 1.57; }
  .hero-card__foot { font-size: .82rem; }

  .vehicle-grid--catalog { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vehicle-card__body { padding: 21px; }
  .vehicle-card__specs { gap: 7px; }
  .vehicle-card__specs > div { padding: 10px; }
  .vehicle-card__body h3 { font-size: 1.42rem; }
  .vehicle-card__body > p { font-size: .94rem; }
  .vehicle-spec-note { font-size: .87rem; text-align: left; }
  .mobile-actions a { font-size: .86rem; }
  .faq-list summary { font-size: .98rem; line-height: 1.45; }
}

@media screen and (max-width: 380px) {
  .hero h1 { font-size: clamp(2.45rem, 12.5vw, 3rem); }
  .choice-card { grid-template-columns: 50px minmax(0, 1fr); padding: 15px; }
  .choice-card__icon { width: 50px; height: 50px; }
  .vehicle-card__specs { grid-template-columns: minmax(0, 1fr); }
}

/* Final minimum-readable caption pass after computed-style audit. */
@media screen {
  .hero h1 { line-height: 1.04; }
  .hero h1 em { line-height: 1.075; }
  .hero__scroll { font-size: .83rem; }
  .vehicle-card__badge,
  .vehicle-card__heading span,
  .vehicle-card__specs dt,
  .need-card__kicker,
  .battery-console__head > div > span,
  .console-status,
  .console-row,
  .battery-console__note,
  .about__badge span,
  .gallery-info > span,
  .gallery-tile small,
  .contact-cards small,
  .contact-cards em,
  .contact__visit,
  .inquiry-form__header span,
  .field-hint,
  .site-footer h2,
  .site-footer__bottom {
    font-size: .84rem;
  }

  .vehicle-card__badge--hybrid {
    color: #052b33;
    background: #76e8f2;
  }
}

@media screen and (max-width: 680px) {
  .eyebrow { font-size: .82rem; }
  .hero h1 { line-height: 1.07; }
  .hero h1 em { line-height: 1.09; }
}

@media screen and (max-width: 380px) {
  .vehicle-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Testimonial and narrow-card overflow corrections discovered in visual replay. */
@media screen {
  .hero-card__topline { font-size: .84rem; }

  .gallery-info h3 {
    font-size: 1.25rem;
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  .testimonial-grid {
    grid-template-columns: 1fr 1.3fr 1fr;
  }

  .testimonial-grid blockquote {
    max-width: 100%;
    font-size: clamp(1.18rem, 1.65vw, 1.55rem);
    line-height: 1.3;
    letter-spacing: -.02em;
    text-transform: none;
    overflow-wrap: break-word;
  }

  .testimonial-grid figcaption {
    right: 32px;
    max-width: calc(100% - 64px);
  }
}

@media screen and (max-width: 1120px) {
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-grid figure:last-child { grid-column: span 2; }
}

@media screen and (max-width: 680px) {
  .testimonial-grid { grid-template-columns: 1fr; }

  .testimonial-grid figure,
  .testimonial-grid figure:last-child {
    display: flex;
    min-height: 310px;
    grid-column: auto;
    flex-direction: column;
    padding: 28px;
  }

  .quote-mark { margin-bottom: 30px; }

  .testimonial-grid blockquote {
    margin-bottom: 30px;
    font-size: clamp(1.16rem, 5.4vw, 1.35rem);
    line-height: 1.34;
  }

  .testimonial-grid figcaption {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: 100%;
    margin-top: auto;
  }
}

@media screen {
  .quote-mark {
    margin-bottom: 30px;
    font-size: 4rem;
    line-height: 1;
  }
}

@media screen and (max-width: 680px) {
  .quote-mark {
    margin-bottom: 24px;
    font-size: 3.5rem;
  }
}

@media screen {
  .quote-mark { line-height: 1.1; }
}

/* -------------------------------------------------------------------------
   Multilingual navigation and server-backed form states
   ------------------------------------------------------------------------- */

/**
 * The language switcher lives in the slim contact rail so it remains visible
 * without competing with the primary dealership navigation. Real SVG flags
 * are shown as recognition aids; language names remain the accessible label.
 */
.language-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.language-switcher a {
  min-height: 30px;
  gap: 6px;
  padding: 3px 7px;
  color: rgba(255,255,255,.62);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
  color: var(--white);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

.language-switcher a[aria-current="page"] {
  color: var(--ink-950);
  background: var(--lime);
  border-color: var(--lime);
}

.language-switcher img {
  display: block;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/** Keep automated spam traps out of the visual and keyboard flow. */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/** POST/Redirect/GET result shown only after a real server-side submission. */
.form-alert {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  padding: 15px 16px;
  margin: 0 0 22px;
  border: 1px solid;
  border-radius: 14px;
  font-size: .82rem;
  font-weight: 720;
  line-height: 1.55;
}

.form-alert svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-alert p {
  margin: 0;
}

.form-alert--success {
  color: #345500;
  background: #efffd4;
  border-color: #9ccf42;
}

.form-alert--error {
  color: #8c2222;
  background: #fff0f0;
  border-color: #e8a8a8;
}

.consent a {
  color: #476900;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.inquiry-form button[disabled] {
  cursor: wait;
  opacity: .72;
}

.inquiry-form button.is-submitting svg {
  animation: avm-submit-arrow .8s ease-in-out infinite alternate;
}

@keyframes avm-submit-arrow {
  from { transform: translateX(-2px); }
  to { transform: translateX(3px); }
}

@media (max-width: 1120px) {
  .contact-rail__inner {
    gap: 16px;
  }

  .contact-rail__note {
    display: none;
  }
}

@media (max-width: 940px) {
  .contact-rail__inner {
    justify-content: space-between;
  }

  .language-switcher {
    margin-left: auto;
  }

  /* Keep all nested language links visible. Older responsive rules hide only
     the direct telephone and e-mail links to make room on narrow screens. */
  .contact-rail .language-switcher a {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  .language-switcher {
    gap: 2px;
    padding-left: 6px;
  }

  .language-switcher a {
    width: 34px;
    min-height: 30px;
    justify-content: center;
    padding-inline: 4px;
  }

  .language-switcher a span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .form-alert {
    font-size: .78rem;
  }
}

/* Privacy-page language navigation uses the same component on a wider header. */
.simple-page__header .shell {
  flex-wrap: wrap;
}

.simple-page__languages {
  margin-left: auto;
  border-left-color: rgba(255,255,255,.16);
}

.simple-page__header .language-switcher a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
}

.simple-page__header .language-switcher a[aria-current="page"] {
  color: var(--ink-950);
}

.language-switcher a {
  font-size: .82rem;
}

@media (max-width: 760px) {
  .simple-page__header .shell {
    row-gap: 16px;
  }

  .simple-page__languages {
    width: 100%;
    order: 3;
    justify-content: center;
    margin-left: 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-left: 0;
  }

  .simple-page__header .language-switcher a {
    width: auto;
    min-height: 38px;
    padding-inline: 10px;
  }

  .simple-page__header .language-switcher a span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .simple-page__header img {
    width: 148px;
  }

  .simple-page__header > .shell > a:last-child {
    font-size: .82rem;
  }

  .simple-page__header .language-switcher a {
    gap: 5px;
    padding-inline: 7px;
    font-size: .78rem;
  }
}

/* --------------------------------------------------------------------------
   Generated vehicle catalogue and detail pages
   --------------------------------------------------------------------------
   These rules are kept together because the editor generates the homepage
   showcase, the complete catalogue and every vehicle detail page from the same
   JSON records. Shared hover, focus and spacing rules therefore remain visually
   consistent across all three publication levels instead of drifting apart.
   -------------------------------------------------------------------------- */
.vehicle-home-showcase {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.vehicle-home-group {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.vehicle-home-group__title {
  margin: 0;
  color: var(--text-dark, #10171b);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.18;
}

/* The secondary selection is deliberately quieter than the main featured
   heading. It still remains a real heading for document structure and SEO. */
.vehicle-home-group--compact {
  gap: .9rem;
}

.vehicle-home-group--compact .vehicle-home-group__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #314047;
  font-size: clamp(1.02rem, 1.45vw, 1.28rem);
  font-weight: 820;
  letter-spacing: -.012em;
}

.vehicle-home-group--compact .vehicle-home-group__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(80, 105, 113, .25), transparent);
}

.vehicle-grid--featured,
.vehicle-grid--catalog-page {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.vehicle-grid--featured-sparse {
  /*
   * The generator adds this modifier only when the homepage has fewer than
   * three featured cards. Bounding those sparse tracks prevents one or two
   * 16:10 images from turning into unusually tall billboards, while centering
   * the complete row preserves the same surrounding section margins.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 26rem));
  justify-content: center;
}

.vehicle-card,
.vehicle-compact-card {
  min-width: 0;
  border-color: rgba(8, 20, 26, .13);
  transition:
    transform .28s var(--ease),
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease;
}

.vehicle-card:hover,
.vehicle-card:focus-within,
.vehicle-compact-card:hover,
.vehicle-compact-card:focus-within {
  border-color: rgba(137, 222, 0, .42);
  box-shadow:
    0 24px 62px rgba(44, 76, 0, .17),
    0 0 34px rgba(167, 255, 0, .22);
  transform: translateY(-5px);
}

.vehicle-card h2 a,
.vehicle-card h3 a {
  color: inherit;
  text-decoration: none;
}

.vehicle-card__image {
  display: block;
}

.vehicle-card__badge--electric { background: #a7ff00; color: #0a1200; }
.vehicle-card__badge--petrol { background: #ffb84d; color: #1d1100; }
.vehicle-card__badge--diesel { background: #7cc7ff; color: #001522; }
.vehicle-card__badge--hybrid { background: #63e6be; color: #002118; }

/*
 * Every featured vehicle card is one equal-height grid item. The description is
 * allowed to consume its natural space, while the dedicated footer owns both
 * the highlighted specifications and the two actions. This relation keeps the
 * buttons aligned even when one description is considerably longer than the
 * others, without truncating operator-authored copy or measuring text in JS.
 */
.vehicle-grid--featured,
.vehicle-grid--catalog-page {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.vehicle-card--featured,
.vehicle-card--catalog {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.vehicle-grid--featured-sparse .vehicle-card--featured {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
}

.vehicle-card--featured .vehicle-card__image {
  width: 100%;
  max-height: 16.25rem;
}

.vehicle-card--featured .vehicle-card__body,
.vehicle-card--catalog .vehicle-card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.vehicle-card--featured .vehicle-card__footer,
.vehicle-card--catalog .vehicle-card__footer {
  display: grid;
  gap: 1rem;
  margin-top: auto;
}

.vehicle-card--featured .vehicle-card__specs,
.vehicle-card--catalog .vehicle-card__specs {
  margin: 0;
}

.vehicle-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.button--vehicle-card {
  display: inline-flex;
  min-width: 0;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .82rem 1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: .95rem;
  font-size: clamp(.82rem, 1vw, .94rem);
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  transition:
    transform .25s var(--ease),
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.button--vehicle-card-detail {
  color: #eaffca;
  background: #10191d;
  border-color: #10191d;
}

.button--vehicle-card-interest {
  color: #0b1500;
  background: #a7ff00;
  border-color: #8fdb00;
  box-shadow: 0 .7rem 1.8rem rgba(96, 151, 0, .18);
}

.button--vehicle-card .button__arrow {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  transform: translateX(0);
  transition: transform .25s var(--ease), opacity .25s ease, filter .25s ease;
}

.button--vehicle-card:hover,
.button--vehicle-card:focus-visible {
  transform: translateY(-2px);
}

.button--vehicle-card-detail:hover,
.button--vehicle-card-detail:focus-visible {
  color: #0b1500;
  background: #a7ff00;
  border-color: #8fdb00;
  box-shadow: 0 .8rem 2rem rgba(93, 148, 0, .24);
}

.button--vehicle-card-interest:hover,
.button--vehicle-card-interest:focus-visible {
  color: #f4ffd9;
  background: #10191d;
  border-color: #10191d;
  box-shadow: 0 .8rem 2rem rgba(9, 25, 31, .22);
}

.button--vehicle-card:hover .button__arrow,
.button--vehicle-card:focus-visible .button__arrow {
  opacity: 1;
  filter: drop-shadow(0 0 .3rem currentColor);
  transform: translateX(4px);
}

.button--vehicle-card:focus-visible {
  outline: 3px solid rgba(167, 255, 0, .48);
  outline-offset: 3px;
}

/* Compact homepage cards are horizontal so they read as a quick secondary
   choice rather than competing with the large specification cards above. */
.vehicle-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.vehicle-compact-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 20, 26, .13);
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 .8rem 2.2rem rgba(9, 25, 31, .075);
}

.vehicle-compact-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 34%, 12rem);
  min-height: 10.25rem;
  color: inherit;
  text-decoration: none;
}

.vehicle-compact-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: .55rem;
  min-width: 0;
  padding: 1.1rem 3.7rem 1.1rem 1.15rem;
}

.vehicle-compact-card__body h3,
.vehicle-compact-card__body p {
  margin: 0;
}

.vehicle-compact-card__body h3 {
  color: #111c20;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}

.vehicle-compact-card__body p {
  display: -webkit-box;
  overflow: hidden;
  color: #526066;
  font-size: .84rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vehicle-compact-card__body .vehicle-card__badge {
  position: static;
  justify-self: start;
  padding: 5px 8px;
  font-size: .61rem;
}

.vehicle-compact-card__image {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #dfe6e9;
}

.vehicle-compact-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 40%);
  pointer-events: none;
}

.vehicle-compact-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .42s var(--ease), filter .42s ease;
}

.vehicle-compact-card__arrow {
  position: absolute;
  right: .95rem;
  bottom: .95rem;
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  color: #0b1500;
  background: #a7ff00;
  border-radius: 999px;
  box-shadow: 0 .55rem 1.5rem rgba(89, 141, 0, .28);
  opacity: 0;
  transform: translateX(-8px) scale(.88);
  transition: opacity .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}

.vehicle-compact-card__arrow svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vehicle-compact-card:hover .vehicle-compact-card__image img,
.vehicle-compact-card:focus-within .vehicle-compact-card__image img {
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.045);
}

.vehicle-compact-card:hover .vehicle-compact-card__arrow,
.vehicle-compact-card:focus-within .vehicle-compact-card__arrow {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* The catalogue link is a standalone visual bridge between the generated car
   selection and the service cards that follow it. Its own bottom space prevents
   the next grid from appearing glued to the button. */
.vehicle-home-showcase__footer {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(3rem, 6vw, 5.2rem);
  padding: clamp(1rem, 2vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(117, 191, 0, .32);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 12% 50%, rgba(167, 255, 0, .16), transparent 15rem),
    linear-gradient(120deg, #0b1519, #18262b);
  box-shadow: 0 1rem 3rem rgba(8, 20, 26, .16);
}

.button--catalog {
  min-width: min(100%, 19rem);
  min-height: 3.7rem;
  justify-content: space-between;
  padding: .72rem .82rem .72rem .72rem;
  color: #f7fbfc;
  background: #0b1114;
  border-color: rgba(167, 255, 0, .58);
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .24);
}

.button--catalog__icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  place-items: center;
  color: #102000;
  background: #a7ff00;
  border-radius: .78rem;
  transition: transform .25s var(--ease), background-color .25s ease;
}

.button--catalog__icon svg,
.button--catalog__arrow {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button--catalog__arrow {
  flex: 0 0 auto;
  color: #a7ff00;
  transition: transform .25s var(--ease);
}

.button--catalog:hover,
.button--catalog:focus-visible {
  color: #0a1300;
  background: #a7ff00;
  border-color: #a7ff00;
  box-shadow: 0 1rem 2.8rem rgba(167, 255, 0, .25);
}

.button--catalog:hover .button--catalog__icon,
.button--catalog:focus-visible .button--catalog__icon {
  background: #0b1114;
  color: #a7ff00;
  transform: rotate(-4deg) scale(1.04);
}

.button--catalog:hover .button--catalog__arrow,
.button--catalog:focus-visible .button--catalog__arrow {
  color: #0a1300;
  transform: translateX(4px);
}

.vehicle-page-hero {
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  color: #10191d;
  background:
    radial-gradient(circle at 85% 15%, rgba(167, 255, 0, .2), transparent 28rem),
    linear-gradient(145deg, #f7faf8, #e8efec);
}

.vehicle-page-hero h1,
.vehicle-detail-hero h1 {
  max-width: 18ch;
  margin: .6rem 0 1rem;
  font-size: clamp(2.35rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

/* These explicit colors prevent global hero typography from producing white
   text on the catalogue's light background while preserving the dark detail
   hero's intended high contrast. */
.vehicle-page-hero h1 { color: #10191d; }
.vehicle-detail-hero h1 { color: #f8fcfd; }

.vehicle-page-hero p:not(.eyebrow) {
  max-width: 52rem;
  color: #3c4b52;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.vehicle-page-back {
  display: inline-flex;
  margin-bottom: 1.4rem;
  color: #304047;
  font-weight: 750;
  text-decoration: none;
  transition: color .2s ease, transform .2s var(--ease);
}

.vehicle-page-back:hover,
.vehicle-page-back:focus-visible {
  color: #527f00;
  transform: translateX(-3px);
}

.vehicle-catalog-page { padding-top: 0; }
.vehicle-catalog-empty {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 48rem;
  padding: 2rem;
  border-radius: 1.5rem;
  background: #fff;
}

.vehicle-detail-hero {
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  color: #f7fbfc;
  background:
    radial-gradient(circle at 78% 5%, rgba(167, 255, 0, .18), transparent 27rem),
    linear-gradient(145deg, #071013, #14242b);
}

.vehicle-detail-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.vehicle-detail-hero__copy > div { min-width: 0; }
.vehicle-detail-hero__copy p:not(.eyebrow) {
  max-width: 52rem;
  margin: 0;
  color: #c0ced3;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}
.vehicle-detail-hero .vehicle-page-back { color: #d4e1e5; }
.vehicle-detail-hero .vehicle-page-back:hover { color: #a7ff00; }
.vehicle-detail-hero .vehicle-card__badge { position: static; display: inline-flex; margin-bottom: 1rem; }

.vehicle-detail-gallery {
  padding: clamp(2rem, 5vw, 4.5rem) 0;
  color: #fff;
  background: #0d171b;
}

.vehicle-detail-gallery__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.vehicle-detail-gallery__heading h2 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.35rem); }
.vehicle-detail-gallery__heading span {
  display: grid;
  min-width: 2.4rem;
  min-height: 2.4rem;
  place-items: center;
  color: #a7ff00;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-weight: 800;
}

.vehicle-gallery {
  display: grid;
  min-width: 0;
  gap: clamp(.85rem, 2vw, 1.15rem);
}

.vehicle-gallery__main {
  display: grid;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: clamp(1rem, 2vw, 1.75rem);
  background: #05090b;
  box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,.2);
}
.vehicle-gallery__main-image {
  display: block;
  width: 100%;
  height: min(70vh, 52rem);
  min-height: clamp(18rem, 42vw, 30rem);
  object-fit: contain;
  background: #05090b;
}
.vehicle-gallery__main figcaption {
  min-height: 3rem;
  margin: 0;
  padding: .82rem 1rem;
  color: #b8c6cb;
  border-top: 1px solid rgba(255,255,255,.08);
  line-height: 1.45;
}

/*
 * The navigation row is independent from the thumbnail rail. This separation
 * keeps its controls aligned when the gallery contains many photographs and
 * allows the rail to scroll horizontally without moving either button.
 */
.vehicle-gallery__controls {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(5.5rem, 1fr) minmax(0, auto);
  min-width: 0;
  align-items: center;
  gap: .85rem;
}

.vehicle-gallery__nav {
  display: inline-flex;
  min-width: 0;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  padding: .76rem 1.05rem;
  color: #ecf7e2;
  background: linear-gradient(145deg, #132025, #0b1317);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 780;
  transition:
    transform .22s var(--ease),
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease;
}

.vehicle-gallery__nav svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s var(--ease);
}
.vehicle-gallery__nav--previous svg { transform: rotate(180deg); }
.vehicle-gallery__nav--previous:hover svg,
.vehicle-gallery__nav--previous:focus-visible svg { transform: rotate(180deg) translateX(3px); }
.vehicle-gallery__nav--next:hover svg,
.vehicle-gallery__nav--next:focus-visible svg { transform: translateX(3px); }

.vehicle-gallery__nav:hover,
.vehicle-gallery__nav:focus-visible {
  color: #10190d;
  background: linear-gradient(145deg, #d5ff7a, #a7ff00);
  border-color: rgba(167,255,0,.82);
  box-shadow: 0 0 26px rgba(167,255,0,.22);
  transform: translateY(-2px);
}
.vehicle-gallery__nav:focus-visible {
  outline: 3px solid rgba(255,255,255,.8);
  outline-offset: 3px;
}

.vehicle-gallery__status {
  display: inline-flex;
  min-width: 0;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding: .76rem 1rem;
  color: #d5e1e6;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
}

/*
 * Every thumbnail has a definite width and height. The original image ratio
 * therefore cannot make a grid row several hundred pixels tall, while the
 * horizontal overflow remains contained inside this rail even for a very large
 * gallery.
 */
.vehicle-gallery__thumbs {
  display: flex;
  max-width: 100%;
  min-width: 0;
  gap: .78rem;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: .45rem .25rem .8rem;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: .25rem;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(167,255,0,.58) rgba(255,255,255,.07);
  scrollbar-width: thin;
}
.vehicle-gallery__thumbs::-webkit-scrollbar { height: .65rem; }
.vehicle-gallery__thumbs::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 999px; }
.vehicle-gallery__thumbs::-webkit-scrollbar-thumb { background: rgba(167,255,0,.58); border-radius: 999px; }

.vehicle-gallery__thumb {
  flex: 0 0 clamp(7.25rem, 12vw, 10rem);
  width: clamp(7.25rem, 12vw, 10rem);
  height: clamp(5.45rem, 9vw, 7.5rem);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: .95rem;
  background: #071013;
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    transform .22s var(--ease),
    border-color .22s ease,
    border-width .22s ease,
    box-shadow .22s ease;
}
.vehicle-gallery__thumb:hover,
.vehicle-gallery__thumb:focus-visible {
  border-color: rgba(167,255,0,.72);
  box-shadow: 0 0 24px rgba(167,255,0,.18);
  transform: translateY(-2px);
}
.vehicle-gallery__thumb.is-active {
  border-width: 4px;
  border-color: #a7ff00;
  box-shadow: 0 0 0 2px rgba(167,255,0,.24), 0 0 28px rgba(167,255,0,.24);
}
.vehicle-gallery__thumb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vehicle-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.vehicle-detail-content {
  color: #10191d;
  background: #f4f7f5;
}

/*
 * When a vehicle has no real photography, the generator removes the complete
 * gallery section rather than showing the showroom fallback as if it depicted
 * the car. This modifier gives the light information section a deliberate
 * transition from the dark hero and keeps the same visual rhythm that would
 * otherwise be provided by the gallery's outer padding. No empty placeholder
 * or fixed-height spacer is introduced, so long and short detail pages behave
 * identically at every viewport width.
 */
.vehicle-detail-content--without-gallery {
  padding-top: clamp(3.75rem, 7vw, 6.5rem);
  border-top: 1px solid rgba(11, 25, 29, .08);
}
.vehicle-detail-content h2 { color: #10191d; }
.vehicle-detail-content > .shell > h2 { margin-top: 0; }

.vehicle-key-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 1rem 0 clamp(2.5rem, 5vw, 4.5rem);
}

.vehicle-key-spec {
  --spec-accent: #507d00;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  min-width: 0;
  padding: clamp(1.05rem, 2.2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--spec-accent) 28%, transparent);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--spec-accent) 13%, transparent), transparent 7rem),
    linear-gradient(145deg, #f1ffdc, #ddffa8);
  box-shadow: 0 .8rem 2rem rgba(68, 110, 0, .08);
  transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease;
}

.vehicle-key-spec:hover {
  border-color: color-mix(in srgb, var(--spec-accent) 48%, transparent);
  box-shadow: 0 1rem 2.5rem rgba(88, 139, 0, .16), 0 0 24px rgba(167, 255, 0, .14);
  transform: translateY(-3px);
}

.vehicle-key-spec--range,
.vehicle-key-spec--dimensions { --spec-accent: #4c8200; }
.vehicle-key-spec--battery,
.vehicle-key-spec--charging { --spec-accent: #008b62; }
.vehicle-key-spec--power,
.vehicle-key-spec--performance { --spec-accent: #6b7600; }
.vehicle-key-spec--engine,
.vehicle-key-spec--drivetrain { --spec-accent: #2b7468; }
.vehicle-key-spec--consumption,
.vehicle-key-spec--luggage { --spec-accent: #568600; }

.vehicle-key-spec__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: #f8fff0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--spec-accent) 78%, #172400), var(--spec-accent));
  border-radius: .9rem;
  box-shadow: 0 .55rem 1.3rem color-mix(in srgb, var(--spec-accent) 25%, transparent);
}

.vehicle-key-spec__icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vehicle-key-spec > div {
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.vehicle-key-spec span:not(.vehicle-key-spec__icon) {
  color: #365500;
  font-size: .78rem;
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1.3;
  text-transform: uppercase;
}
.vehicle-key-spec strong {
  overflow-wrap: anywhere;
  color: #0c1800;
  font-size: clamp(1.16rem, 2.2vw, 1.72rem);
  line-height: 1.12;
}

.vehicle-detail-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}
.vehicle-detail-copy h2 { margin-top: 0; color: #10191d; font-size: clamp(1.55rem, 3vw, 2.4rem); }
.vehicle-detail-copy p { color: #3e4b51; line-height: 1.75; }
.vehicle-spec-table-wrap { overflow-x: auto; border-radius: 1.25rem; box-shadow: 0 1rem 2.5rem rgba(8,20,26,.08); }
.vehicle-spec-table { width: 100%; border-collapse: collapse; background: #fff; }
.vehicle-spec-table th,
.vehicle-spec-table td { padding: .9rem 1rem; border-bottom: 1px solid #e1e8e5; text-align: left; vertical-align: top; }
.vehicle-spec-table th { width: 47%; color: #34454c; font-weight: 750; }
.vehicle-spec-table td { color: #10191d; font-weight: 650; }
.vehicle-spec-table tr:last-child th,
.vehicle-spec-table tr:last-child td { border-bottom: 0; }
.vehicle-detail-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 5vw, 4rem); }

.button--vehicle,
.vehicle-detail-actions .button,
.vehicle-detail-hero__copy .button {
  transition:
    transform .25s var(--ease),
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.vehicle-form-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  color: #eaffca;
  background: rgba(167,255,0,.12);
  border: 1px solid rgba(167,255,0,.45);
  border-radius: 1rem;
}
.vehicle-form-notice[hidden] { display: none; }
.vehicle-form-notice svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #a7ff00; stroke-width: 1.8; }
.vehicle-form-notice p { margin: 0; line-height: 1.5; }

@media (max-width: 800px) {
  .vehicle-detail-hero__copy,
  .vehicle-detail-copy { grid-template-columns: 1fr; }
  .vehicle-detail-hero__copy { align-items: start; }
  .vehicle-detail-hero__copy .button { justify-self: stretch; text-align: center; }
  .vehicle-gallery__main-image { height: min(58vh, 36rem); min-height: clamp(16rem, 54vw, 24rem); }
  .vehicle-gallery__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-gallery__status { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .vehicle-card__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .button--vehicle-card {
    min-height: 3rem;
  }

  .vehicle-compact-card__link {
    grid-template-columns: minmax(0, 1fr) 38%;
    min-height: 9.5rem;
  }
  .vehicle-compact-card__body { padding: .95rem 3.25rem .95rem 1rem; }
  .vehicle-compact-card__body p { font-size: .78rem; }
  .vehicle-home-showcase__footer { padding: .8rem; }
  .button--catalog { width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
  .vehicle-gallery__thumb {
    flex-basis: 7.4rem;
    width: 7.4rem;
    height: 5.55rem;
  }
  .vehicle-gallery__nav { padding-inline: .8rem; font-size: .86rem; }
  .vehicle-key-specs { grid-template-columns: 1fr; }
  .vehicle-key-spec { padding: 1rem; }
  .vehicle-key-spec strong { font-size: 1.16rem; }
  .vehicle-detail-actions > * { width: 100%; justify-content: center; }
}

/*
 * Catalogue cards intentionally mirror featured cards: the description stays
 * above a four-item specification summary and the two actions remain pinned to
 * the bottom. The complete specification set still belongs to the dedicated
 * vehicle page, where it can be read without turning catalogue cards into
 * independently scrolling panels.
 */
.vehicle-card--catalog h2 {
  margin: 0;
  color: #10191d;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
}
.vehicle-card--catalog h2 a { color: inherit; text-decoration: none; }


/*
 * The temporary announcement is independent from the permanent contact rail.
 * The generator can place it at the top, bottom, or both without changing the
 * page header hierarchy or the layout of translated content below it.
 */
.site-announcement {
  position: relative;
  z-index: 65;
  background: linear-gradient(90deg, #a7ff00 0%, #c8ff51 50%, #a7ff00 100%);
  color: #071014;
  border-block: 1px solid rgba(7,16,20,.3);
  box-shadow: 0 12px 34px rgba(167,255,0,.2);
}
.site-announcement__inner {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding-block: .65rem;
  text-align: center;
}
.site-announcement__inner svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-announcement__inner p {
  margin: 0;
  font-weight: 850;
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .site-announcement__inner { align-items: flex-start; text-align: left; }
  .site-announcement__inner svg { margin-top: .08rem; }
}

/*
 * Small phones render the emphasized second hero line as solid lime text. Some
 * mobile GPU/font combinations fail to paint transparent glyphs with only a
 * WebKit stroke, which can make the localized phrase disappear completely.
 * Desktop and tablet layouts retain the outlined treatment because this rule is
 * intentionally constrained to the existing phone breakpoint in every language.
 */
@media screen and (max-width: 680px) {
  .hero h1 em {
    color: #caff00;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 12px 34px rgba(0,0,0,.42);
  }
}