:root {
  --font-main: "Arimo", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --color-silver: #d4d2d1;
  --color-charcoal: #282728;
  --color-cloud: #e1e1e1;
  --color-grey: #7f7e7e;
  --color-earth: #734b46;
  --color-gold: #ab8d4c;
  --color-warm-grey: #99908c;
  --color-soft-grey: #acacad;
  --color-sand: #c7b08b;
  --color-blue-muted: #4474bc;
  --color-blue-slate: #4c5c7c;
  --color-white: #ffffff;
  --color-steel: #858586;
  --color-ink: #292827;
  --color-mist: #bec1c5;
  --color-yellow: #fed243;
  --color-link: #1862db;
  --color-red: #e30613;
  --color-support-red: #e30613;
  --color-video-red: #e30613;
  --color-video-yellow: #ffc20e;
  --color-sky: #649ffd;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --text-small: 14px;
  --text-medium: 16px;
  --text-large: 32px;

  --header-height: 84px;
  --content-width: 1184px;
  --hero-content-width: 860px;
  --radius-pill: 999px;
  --radius-card: 24px;
  --focus-ring: 0 0 0 3px var(--color-sky);
  font-family: var(--font-main);
  color: var(--color-white);
  background: var(--color-white);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-white);
}

body.menu-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

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

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

button:focus-visible,
a:focus-visible,
input:focus-visible {
  border-radius: 8px;
  outline: none;
  box-shadow: var(--focus-ring);
}

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

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
  background: color-mix(in srgb, var(--color-charcoal) 88%, transparent);
  backdrop-filter: blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  width: min(calc(100% - var(--space-5)), 1376px);
  height: 100%;
  margin: 0 auto;
  gap: var(--space-3);
}

.van-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.van-logo img {
  display: block;
  width: auto;
  height: 52px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.25vw, var(--space-3));
}

.nav-link {
  position: relative;
  padding: var(--space-4) 0 27px;
  color: var(--color-cloud);
  font-size: clamp(0.72rem, 0.78vw, 0.86rem);
  font-weight: 700;
  white-space: nowrap;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.nav-link:hover {
  color: var(--color-white);
  transform: translateY(-1px);
}

.nav-link--active {
  color: var(--color-yellow);
}

.nav-link--active::after {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  content: "";
}

.header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.action-button,
.hero-button,
.result-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-weight: 800;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.action-button {
  min-height: 42px;
  padding: 0 15px;
  gap: var(--space-1);
  font-size: 0.78rem;
  white-space: nowrap;
}

.action-button svg,
.login-link svg {
  width: 17px;
  height: 17px;
}

.action-button--yellow,
.hero-button--yellow {
  color: var(--color-charcoal);
  background: var(--color-yellow);
}

.action-button--red,
.hero-button--red {
  color: var(--color-white);
  background: var(--color-red);
}

.action-button:hover,
.hero-button:hover,
.result-card__button:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.login-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) 2px;
  gap: 6px;
  color: var(--color-cloud);
  font-size: 0.78rem;
  font-weight: 700;
}

.login-link:hover {
  color: var(--color-white);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
  border-radius: 50%;
  color: var(--color-white);
  background: transparent;
  cursor: pointer;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
}

.mobile-menu {
  display: none;
}

.hero {
  --hero-image: none;
  position: relative;
  display: flex;
  min-height: max(100svh, 800px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-4)) var(--space-3)
    var(--space-4);
  isolation: isolate;
  background-color: var(--color-charcoal);
}

.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--hero-image);
  background-position: center center;
  background-size: cover;
  content: "";
  transform: scale(1.01);
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  content: "";
}

.eurorepar-badge {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-height) + var(--space-3));
  left: var(--space-4);
  display: block;
  width: 240px;
  filter: drop-shadow(
    0 8px 18px color-mix(in srgb, var(--color-charcoal) 45%, transparent)
  );
  transition: transform 180ms ease;
}

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

.eurorepar-badge img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.hero-content {
  display: flex;
  width: min(100%, var(--hero-content-width));
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-4);
  text-align: center;
}

.hero-heading h1 {
  margin: 0;
  text-wrap: balance;
  font-size: clamp(2.65rem, 4.25vw, 4.45rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-shadow: 0 2px 10px
    color-mix(in srgb, var(--color-charcoal) 48%, transparent);
}

.hero-heading h1 span {
  color: var(--color-yellow);
}

.hero-location {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 2px 8px
    color-mix(in srgb, var(--color-charcoal) 45%, transparent);
}

.hero-subtitle {
  max-width: 760px;
  margin: 10px auto 0;
  color: var(--color-cloud);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 500;
  line-height: 1.55;
  text-shadow: 0 2px 8px
    color-mix(in srgb, var(--color-charcoal) 45%, transparent);
}

.search-shell {
  position: relative;
  z-index: 4;
  width: min(100%, 760px);
  margin-top: var(--space-3);
}

.search-bar {
  display: flex;
  height: 64px;
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: 0 16px 44px
    color-mix(in srgb, var(--color-charcoal) 48%, transparent);
}

.search-bar:focus-within {
  border-color: var(--color-yellow);
}

.search-bar__icon {
  width: 24px;
  height: 24px;
  flex: none;
  margin-left: var(--space-3);
  color: var(--color-grey);
}

.search-bar input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 var(--space-2);
  color: var(--color-charcoal);
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
}

.search-bar input::placeholder {
  color: var(--color-grey);
  opacity: 1;
}

.search-bar input::-webkit-search-cancel-button {
  display: none;
}

.microphone-button {
  display: flex;
  width: 48px;
  height: 48px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-red);
  cursor: pointer;
}

.microphone-button svg {
  width: 22px;
  height: 22px;
}

.microphone-button--listening {
  animation: listening 1.2s ease-in-out infinite;
}

@keyframes listening {
  0%,
  100% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--color-red) 60%, transparent);
  }
  50% {
    box-shadow: 0 0 0 10px
      color-mix(in srgb, var(--color-red) 0%, transparent);
  }
}

.search-results {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-card);
  color: var(--color-charcoal);
  background: var(--color-white);
  box-shadow: 0 24px 48px
    color-mix(in srgb, var(--color-charcoal) 50%, transparent);
  text-align: left;
}

.search-result-link {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  border: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-link);
  background: var(--color-white);
  font-weight: 800;
  cursor: pointer;
}

.search-result-link:hover {
  background: var(--color-cloud);
}

.result-card {
  padding: var(--space-3);
}

.result-card p {
  margin: 0;
  color: var(--color-charcoal);
  font-weight: 650;
  line-height: 1.5;
}

.result-card__phones {
  display: flex;
  margin-bottom: var(--space-1);
  gap: var(--space-3);
}

.result-card__phones a,
.result-card > a:not(.result-card__button) {
  color: var(--color-link);
  font-weight: 800;
}

.result-card__button {
  min-height: 42px;
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  gap: var(--space-1);
  color: var(--color-white);
  background: var(--color-red);
  font-size: 0.9rem;
}

.result-card__button svg {
  width: 17px;
  height: 17px;
}

.result-card--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.result-card--inline .result-card__button {
  flex: none;
  margin-top: 0;
}

.hero-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.hero-button {
  min-width: 206px;
  min-height: 56px;
  padding: 0 var(--space-3);
  gap: 10px;
  font-size: 1rem;
}

.hero-button svg {
  width: 21px;
  height: 21px;
}

.hero-divider {
  width: 60%;
  height: 1px;
  margin-top: var(--space-4);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-cloud) 72%, transparent) 24%,
    color-mix(in srgb, var(--color-cloud) 72%, transparent) 76%,
    transparent
  );
}

.features {
  display: grid;
  width: min(100%, 790px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-3);
  gap: var(--space-5);
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.feature p {
  max-width: 220px;
  margin: 10px 0 0;
  color: var(--color-white);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 8px
    color-mix(in srgb, var(--color-charcoal) 45%, transparent);
}

.benefits-drawer {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
}

.benefits-mobile-layer {
  display: none;
}

.benefits-scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 25%);
  cursor: default;
  pointer-events: auto;
}

.benefits-tab {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -1px;
  display: flex;
  width: 48px;
  height: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0;
  border-radius: 22px 0 0 22px !important;
  padding: 18px 10px 22px;
  margin-right: 0;
  gap: var(--space-2);
  color: var(--color-white);
  background: var(--color-red);
  box-shadow: -10px 0 22px
    color-mix(in srgb, var(--color-charcoal) 34%, transparent);
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition:
    right 350ms ease-out,
    transform 350ms ease-out;
}

.benefits-drawer--open .benefits-tab {
  right: 399px;
}

.benefits-tab__chevron {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}

.benefits-tab__desktop-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.benefits-tab__mobile-label {
  display: none;
}

.benefits-tab__badge {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-charcoal);
  background: var(--color-video-yellow);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: rotate(-90deg);
}

.benefits-tab--hint {
  animation: benefits-hint 700ms ease-in-out 2;
}

@keyframes benefits-hint {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(-7px);
  }
}

.benefits-panel {
  position: absolute;
  z-index: 1;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  display: flex;
  visibility: hidden;
  width: 400px;
  overflow-y: auto;
  flex-direction: column;
  border: 1px solid var(--color-blue-slate);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  padding: var(--space-4);
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-charcoal) 94%, transparent);
  box-shadow: -16px 0 36px
    color-mix(in srgb, var(--color-charcoal) 42%, transparent);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transform: translateX(100%);
  transition:
    transform 350ms ease-out,
    visibility 0s linear 350ms;
}

.benefits-drawer--open .benefits-panel {
  visibility: visible;
  transform: translateX(0);
  transition:
    transform 350ms ease-out,
    visibility 0s;
}

.benefits-panel__handle {
  display: none;
}

.benefits-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-blue-slate) 80%, transparent);
  padding-bottom: var(--space-2);
  gap: var(--space-2);
}

.benefits-panel__header h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.2;
}

.benefits-panel__close {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid
    color-mix(in srgb, var(--color-white) 24%, transparent);
  border-radius: 50%;
  padding: 0 0 3px;
  color: var(--color-white);
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.benefits-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: var(--space-4) 0;
  padding: 0;
  gap: var(--space-3);
  list-style: none;
}

.benefits-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 761px) {
  .benefits-item:last-child {
    padding-bottom: var(--space-1);
  }
}

.benefits-item__icon {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 50%;
}

.benefits-item__icon img {
  position: relative;
  top: 50%;
  left: 50%;
  display: block;
  width: 82px;
  height: 82px;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.benefits-item:nth-child(5) .benefits-item__icon img {
  width: 62px;
  height: 62px;
}

.benefits-item h3 {
  margin: 0;
  color: var(--color-white);
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.25;
}

.benefits-item p {
  margin: 4px 0 0;
  color: var(--color-soft-grey);
  font-size: 0.82rem;
  line-height: 1.35;
}

.benefits-booking {
  width: 100%;
  min-height: 52px;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-charcoal);
  background: var(--color-yellow);
  font-weight: 900;
  cursor: pointer;
}

.support-section {
  display: grid;
  min-height: 600px;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  color: var(--color-charcoal);
  background: var(--color-white);
}

.support-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.support-media__image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.support-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: var(--space-7) clamp(var(--space-4), 5vw, var(--space-7))
    var(--space-7) var(--space-6);
}

.support-heading h2 {
  max-width: 640px;
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(2.25rem, 3vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}

.support-heading > p {
  margin: var(--space-2) 0 0;
  color: var(--color-grey);
  font-size: clamp(1.1rem, 1.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
}

.support-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-5);
  gap: var(--space-4);
}

.support-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.support-item__icon {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.support-item h3 {
  margin: 0;
  color: var(--color-support-red);
  font-size: clamp(1.12rem, 1.4vw, 1.3rem);
  font-weight: 850;
  line-height: 1.35;
}

.support-item p {
  max-width: 660px;
  margin: 3px 0 0;
  color: var(--color-charcoal);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 450;
  line-height: 1.6;
}

.services-section {
  position: relative;
  overflow: hidden;
  padding: var(--space-1) var(--space-3) var(--space-4);
  color: var(--color-charcoal);
  background: var(--color-white);
}

.section-anchor {
  position: absolute;
  top: 0;
}

.services-inner {
  width: 100%;
  margin: 0 auto;
}

.services-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto var(--space-3);
  text-align: center;
}

.services-eyebrow {
  margin: 0 0 4px;
  padding-top: var(--space-3);
  color: var(--color-red);
  font-size: 0.9rem;
  font-weight: 900;
}

.services-heading h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.75rem, 2.25vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.services-intro {
  max-width: 820px;
  margin: 10px auto 0;
  color: var(--color-grey);
  font-size: 0.96rem;
  font-weight: 450;
  line-height: 1.5;
}

.services-carousel {
  position: relative;
  width: min(calc(100% - 160px), var(--content-width));
  margin: 0 auto;
}

.services-control {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--color-charcoal);
  background: var(--color-yellow);
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--color-charcoal) 15%, transparent);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    filter 180ms ease,
    opacity 180ms ease;
}

.services-control--previous {
  left: -96px;
}

.services-control--next {
  right: -96px;
}

.services-control:hover:not(:disabled) {
  filter: brightness(1.04);
}

.services-control:disabled {
  cursor: default;
  opacity: 1;
}

.services-control svg {
  width: 27px;
  height: 27px;
  stroke-width: 3;
}

.services-track {
  display: flex;
  overflow-x: auto;
  padding: var(--space-1) 0 var(--space-2);
  gap: var(--space-3);
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.services-track::-webkit-scrollbar {
  display: none;
}

.service-card {
  min-width: calc((100% - (var(--space-3) * 3)) / 4);
  overflow: hidden;
  border-radius: var(--space-2);
  background: var(--color-white);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--color-charcoal) 14%, transparent);
  scroll-snap-align: start;
}

.service-card__media {
  overflow: hidden;
  aspect-ratio: 7 / 4;
  background: var(--color-charcoal);
}

.service-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__content {
  position: relative;
  display: flex;
  min-height: 218px;
  align-items: center;
  flex-direction: column;
  padding: 39px var(--space-3) var(--space-3);
  text-align: center;
}

.service-card__icon {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 50%;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 4px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-white);
  transform: translateX(-50%);
}

.service-card__icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 74px;
  height: 74px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.service-card h3 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.16;
}

.service-card h3 span {
  display: block;
}

.service-card__content > p {
  margin: 12px 0 0;
  color: var(--color-grey);
  font-size: 0.88rem;
  line-height: 1.4;
}

.service-card__content > a {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-red);
  font-size: 0.88rem;
  font-weight: 900;
}

.services-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  gap: 10px;
}

.services-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--color-silver);
  cursor: pointer;
}

.services-dot--active {
  background: var(--color-red);
}

.brands-section {
  padding: 76px var(--space-3);
  color: var(--color-charcoal);
  background: #f1f1f1;
}

.brands-heading {
  text-align: center;
}

.brands-heading h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(2rem, 2.5vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

.brands-heading p {
  margin: 14px auto 0;
  color: var(--color-grey);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.5;
}

.brands-list {
  display: flex;
  width: min(100%, var(--content-width));
  align-items: center;
  justify-content: space-between;
  margin: var(--space-5) auto 0;
  gap: var(--space-3);
}

.brand-logo {
  display: flex;
  width: 190px;
  height: 165px;
  flex: none;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 250ms ease-out;
}

.brand-logo:hover img {
  transform: translateY(-4px) scale(1.06);
}

.results-section {
  padding: var(--space-7) var(--space-3);
  color: var(--color-charcoal);
  background: var(--color-white);
}

.results-inner {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.results-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-red);
  font-size: 0.9rem;
  font-weight: 900;
}

.results-heading h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(2rem, 2.5vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.results-intro {
  max-width: 360px;
  margin: 0;
  color: var(--color-grey);
  font-size: 1rem;
  line-height: 1.5;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  gap: 28px;
}

.before-after-card {
  overflow: hidden;
  border: 1px solid var(--color-cloud);
  border-radius: var(--space-2);
  background: var(--color-white);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--color-charcoal) 10%, transparent);
  transition:
    transform 250ms ease-out,
    box-shadow 250ms ease-out;
}

.before-after-card:hover {
  box-shadow: 0 14px 30px
    color-mix(in srgb, var(--color-charcoal) 14%, transparent);
  transform: translateY(-4px);
}

.comparison {
  --comparison-position: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-cloud);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.comparison__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.comparison__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--comparison-position));
}

.comparison__handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--comparison-position);
  width: 2px;
  background: var(--color-white);
  transform: translateX(-1px);
}

.comparison__handle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-charcoal);
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--color-charcoal) 34%, transparent);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 200ms ease-out;
}

.comparison__handle > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.before-after-card:hover .comparison__handle::after {
  transform: translate(-50%, -50%) scale(1.08);
}

.comparison__handle:focus-visible {
  outline: none;
}

.comparison__handle:focus-visible::after {
  box-shadow:
    var(--focus-ring),
    0 4px 12px color-mix(in srgb, var(--color-charcoal) 34%, transparent);
}

.comparison__label {
  position: absolute;
  z-index: 2;
  bottom: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 1;
  transition: opacity 180ms ease;
}

.comparison__label--before {
  left: var(--space-2);
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
}

.comparison__label--after {
  right: var(--space-2);
  color: var(--color-charcoal);
  background: var(--color-white);
  font-weight: 900;
}

.comparison__label--hidden {
  opacity: 0;
}

.comparison--demoing .comparison__after,
.comparison--demoing .comparison__handle {
  transition:
    clip-path 600ms ease-in-out,
    left 600ms ease-in-out;
}

.before-after-card__content {
  padding: 20px var(--space-3) var(--space-3);
  text-align: center;
}

.before-after-card__content h3 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.3;
}

.before-after-card__content p {
  margin: 4px 0 0;
  color: var(--color-grey);
  font-size: 0.88rem;
  line-height: 1.4;
}

.process-section {
  padding: 72px var(--space-3);
  color: var(--color-charcoal);
  background: #f1f1f1;
}

.process-inner {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.process-inner > h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.75rem, 2.25vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.2;
  text-align: center;
}

.process-inner > h2 span {
  color: var(--color-red);
}

.process-steps {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 128px minmax(0, 1fr) 128px
    minmax(0, 1fr);
  align-items: center;
  margin-top: var(--space-6);
}

.process-step {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.process-step__badge {
  display: flex;
  width: 88px;
  height: 88px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-mist);
  border-radius: 50%;
  color: var(--color-charcoal);
  background: var(--color-white);
  box-shadow: 0 7px 20px
    color-mix(in srgb, var(--color-charcoal) 10%, transparent);
}

.process-step__badge svg {
  width: 40px;
  height: 40px;
}

.process-step__content {
  max-width: 270px;
}

.process-step h3 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.25;
}

.process-step p {
  margin: 10px 0 0;
  color: var(--color-grey);
  font-size: 1rem;
  line-height: 1.6;
}

.process-arrow {
  position: relative;
  width: 64px;
  height: 2px;
  justify-self: center;
  border-top: 2px dotted var(--color-soft-grey);
}

.process-arrow::after {
  position: absolute;
  top: -5px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-soft-grey);
  border-right: 2px solid var(--color-soft-grey);
  content: "";
  transform: rotate(45deg);
}

.reviews-section {
  padding: var(--space-7) var(--space-3);
  color: var(--color-white);
  background: var(--color-charcoal);
}

.reviews-inner {
  display: grid;
  width: min(100%, 1200px);
  grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
  align-items: center;
  margin: 0 auto;
  gap: 56px;
}

.reviews-summary {
  min-width: 0;
}

.reviews-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-cloud);
  font-size: 0.88rem;
  line-height: 1.4;
}

.reviews-summary h2 {
  max-width: 370px;
  margin: 0;
  color: var(--color-white);
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

.reviews-rating {
  margin-top: var(--space-3);
}

.reviews-rating__main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.google-icon {
  width: 32px;
  height: 32px;
  flex: none;
}

.reviews-rating__main > strong {
  flex: none;
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rating-stars,
.review-stars {
  display: flex;
  align-items: center;
}

.rating-stars {
  gap: 2px;
  color: var(--color-yellow);
}

.rating-stars > svg,
.rating-star,
.rating-star svg {
  width: 21px;
  height: 21px;
  flex: none;
}

.rating-stars svg,
.review-stars svg {
  display: block;
  fill: currentColor;
}

.rating-star {
  position: relative;
  display: block;
}

.rating-star__base {
  color: var(--color-soft-grey);
}

.rating-star__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  overflow: hidden;
  color: var(--color-yellow);
}

.rating-star__fill svg {
  max-width: none;
}

.reviews-rating > p {
  margin: var(--space-1) 0 0 42px;
  color: var(--color-soft-grey);
  font-size: 0.82rem;
  line-height: 1.4;
}

.reviews-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  border-radius: var(--space-1);
  padding: 0 var(--space-2);
  color: var(--color-white);
  background: var(--color-red);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.reviews-link:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.reviews-slider {
  position: relative;
  min-width: 0;
}

.reviews-slider__track {
  display: flex;
  overflow-x: auto;
  padding: var(--space-1) 0 12px;
  gap: 20px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.reviews-slider__track::-webkit-scrollbar {
  display: none;
}

.reviews-slider__controls {
  display: contents;
}

.reviews-slider__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-red);
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--color-charcoal) 26%, transparent);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.reviews-slider__arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.04);
}

.reviews-slider__arrow:disabled {
  cursor: default;
  background: var(--color-steel);
  opacity: 0.55;
}

.reviews-slider__arrow svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.reviews-slider__arrow--previous {
  left: -24px;
}

.reviews-slider__arrow--next {
  right: -24px;
}

.review-card {
  display: flex;
  min-width: 0;
  height: 320px;
  align-items: center;
  flex-direction: column;
  flex: 0 0 calc((100% - 60px) / 4);
  border-radius: 12px;
  padding: var(--space-3);
  color: var(--color-charcoal);
  background: var(--color-white);
  box-shadow: 0 12px 28px
    color-mix(in srgb, var(--color-charcoal) 30%, transparent);
  scroll-snap-align: start;
  text-align: center;
  transition:
    transform 250ms ease-out,
    box-shadow 250ms ease-out;
}

.review-card:hover {
  box-shadow: 0 16px 32px
    color-mix(in srgb, var(--color-charcoal) 34%, transparent);
  transform: translateY(-4px);
}

.review-stars {
  min-height: 20px;
  justify-content: center;
  gap: 2px;
  color: var(--color-red);
}

.review-stars svg {
  width: 20px;
  height: 20px;
}

.review-card__text-area {
  display: flex;
  height: 144px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: var(--space-2) 0;
}

.review-card__text-area p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--color-charcoal);
  font-size: 0.94rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.review-card__author {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: auto;
  gap: 4px;
}

.review-card__author strong {
  color: var(--color-charcoal);
  font-size: 0.9rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.review-card__author span {
  color: var(--color-grey);
  font-size: 0.78rem;
}

.videos-section {
  padding: 40px;
  color: var(--color-charcoal);
  background: var(--color-white);
}

.videos-inner {
  width: 100%;
  margin: 0 auto;
}

.videos-heading {
  max-width: 1000px;
}

.videos-heading h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.videos-heading p {
  margin: var(--space-1) 0 0;
  color: var(--color-grey);
  font-size: 16px;
  line-height: 1.5;
}

.videos-slider {
  position: relative;
  width: 100%;
  margin: var(--space-3) auto 0;
}

.videos-slider__track {
  display: flex;
  overflow-x: auto;
  padding: var(--space-1) 0 0;
  gap: 20px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.videos-slider__track::-webkit-scrollbar {
  display: none;
}

.video-card {
  min-width: 0;
  flex: 0 0 18%;
  scroll-snap-align: start;
  transition: transform 300ms ease-out;
}

.video-card:hover {
  transform: scale(1.03);
}

.video-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: var(--color-charcoal);
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--color-charcoal) 18%, transparent);
  transition: box-shadow 300ms ease-out;
}

.video-card:hover .video-card__media {
  box-shadow: 0 16px 32px
    color-mix(in srgb, var(--color-charcoal) 26%, transparent);
}

.video-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__gradient {
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 58%));
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-video-red);
  box-shadow: 0 7px 18px rgb(0 0 0 / 30%);
  transform: translate(-50%, -50%);
}

.video-card__play svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.video-card__content {
  padding: 10px 2px 0;
}

.video-card__content h3 {
  display: -webkit-box;
  min-height: 39px;
  overflow: hidden;
  margin: 0;
  color: var(--color-charcoal);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.videos-slider__arrow {
  position: absolute;
  z-index: 2;
  top: 42%;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--color-charcoal);
  background: var(--color-video-yellow);
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--color-charcoal) 22%, transparent);
  cursor: pointer;
  transform: translateY(-50%);
}

.videos-slider__arrow:disabled {
  cursor: default;
  opacity: 0.38;
}

.videos-slider__arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.videos-slider__arrow--previous {
  left: -32px;
}

.videos-slider__arrow--next {
  right: -32px;
}

.videos-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  gap: 9px;
}

.videos-slider__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--color-cloud);
  cursor: pointer;
}

.videos-slider__dot--active {
  background: var(--color-video-yellow);
}

.eurorepar-banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  isolation: isolate;
}

.eurorepar-banner__background {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.eurorepar-banner__content {
  display: flex;
  width: min(calc(100% - 400px), var(--content-width));
  min-height: 280px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: var(--space-4) 0;
  gap: var(--space-5);
}

.eurorepar-banner__copy {
  min-width: 0;
  padding-left: var(--space-3);
}

.eurorepar-banner__copy h2 {
  max-width: 720px;
  margin: 0;
  color: var(--color-red);
  font-size: clamp(2rem, 2.7vw, 2.65rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}

.eurorepar-banner__membership {
  display: flex;
  align-items: center;
  margin-top: var(--space-3);
  gap: 12px;
  color: var(--color-charcoal);
  font-size: 1rem;
  font-weight: 750;
}

.eurorepar-banner__logo {
  position: relative;
  display: block;
  width: 132px;
  height: 34px;
  flex: none;
  overflow: hidden;
}

.eurorepar-banner__logo img {
  position: absolute;
  top: -48px;
  left: -36px;
  display: block;
  width: 220px;
  max-width: none;
  height: 107px;
}

.eurorepar-banner__actions {
  display: flex;
  width: 230px;
  flex: none;
  flex-direction: column;
  gap: 12px;
}

.eurorepar-banner__button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.015em;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.eurorepar-banner__button:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.eurorepar-banner__button svg {
  width: 20px;
  height: 20px;
}

.eurorepar-banner__button--red {
  color: var(--color-white);
  background: var(--color-red);
}

.eurorepar-banner__button--yellow {
  color: var(--color-charcoal);
  background: var(--color-yellow);
}

.experience-section {
  padding: 40px;
  color: var(--color-white);
  background: var(--color-charcoal);
}

.experience-inner {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  margin: 0 auto;
  gap: var(--space-5);
}

.experience-story {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.experience-heading h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.experience-heading p {
  max-width: 650px;
  margin: var(--space-2) 0 0;
  color: var(--color-cloud);
  font-size: 16px;
  line-height: 1.5;
}

.experience-video-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-white) 24%, transparent);
  border-radius: 16px;
  background: var(--color-ink);
  padding: 0;
  color: var(--color-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 42px
    color-mix(in srgb, var(--color-charcoal) 55%, transparent);
  transition:
    box-shadow 250ms ease,
    transform 250ms ease;
}

.experience-video-card:hover {
  box-shadow: 0 24px 54px
    color-mix(in srgb, var(--color-charcoal) 72%, transparent);
  transform: scale(1.018);
}

.experience-video-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.experience-video-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, rgb(0 0 0 / 72%));
}

.experience-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-support-red);
  box-shadow: 0 10px 26px rgb(0 0 0 / 32%);
  transform: translate(-50%, -50%);
  transition: transform 220ms ease;
}

.experience-video-card:hover .experience-video-card__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.experience-video-card__play > span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid var(--color-white);
}

.experience-features {
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-direction: column;
  gap: 28px;
}

.experience-feature {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.experience-feature__icon {
  position: relative;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.experience-feature__icon img {
  display: block;
  max-width: none;
  flex: none;
}

.experience-feature__icon--standard img {
  width: 89px;
  height: 89px;
}

.experience-feature__icon--check img {
  width: 93px;
  height: 93px;
}

.experience-feature__icon--headset img {
  width: 63px;
  height: 63px;
}

.experience-feature__text h3 {
  margin: 0;
  color: var(--color-white);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.experience-feature__text p {
  margin: 4px 0 0;
  color: var(--color-cloud);
  font-size: 15px;
  line-height: 1.4;
}

.booking-section {
  padding: var(--space-4) 40px;
  color: var(--color-charcoal);
  background: var(--color-white);
}

.booking-inner {
  display: grid;
  width: 100%;
  grid-template-columns:
    minmax(0, 45fr) minmax(0, 28fr)
    minmax(0, 27fr);
  align-items: stretch;
  margin: 0 auto;
  gap: var(--space-3);
}

.booking-form,
.booking-map {
  min-width: 0;
}

.booking-heading > span {
  color: var(--color-video-red);
  font-size: 13px;
  font-weight: 800;
}

.booking-heading h2,
.booking-map h2 {
  color: var(--color-charcoal);
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.booking-heading h2 {
  margin: 4px 0 0;
  font-size: 28px;
}

.booking-heading p {
  max-width: 470px;
  margin: 6px 0 0;
  color: var(--color-grey);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.booking-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-2);
  gap: 12px;
}

.booking-field {
  position: relative;
  min-width: 0;
}

.booking-required-placeholder {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 12px;
  color: var(--color-grey);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.booking-required-placeholder b {
  color: var(--color-video-red);
}

.booking-field:focus-within .booking-required-placeholder,
.booking-field:has(input:not(:placeholder-shown))
  .booking-required-placeholder,
.booking-field:has(select:valid) .booking-required-placeholder {
  display: none;
}

.booking-field input,
.booking-field select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--color-silver);
  border-radius: 6px;
  outline: none;
  padding: 0 12px;
  color: var(--color-charcoal);
  background: var(--color-white);
  font-size: 14px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.booking-field input::placeholder,
.booking-field select:invalid {
  color: var(--color-grey);
  opacity: 1;
}

.booking-field select:invalid {
  color: transparent;
}

.booking-field select option {
  color: var(--color-charcoal);
}

.booking-field select {
  appearance: none;
  padding-right: 38px;
}

.booking-field input:focus,
.booking-field select:focus {
  border-color: var(--color-video-red);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--color-video-red) 12%, transparent);
}

.booking-field--error input,
.booking-field--error select {
  border-color: var(--color-video-red);
}

.booking-field small,
.booking-consent__error {
  display: block;
  margin-top: 4px;
  color: var(--color-video-red);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}

.booking-field__control {
  position: relative;
  display: block;
}

.booking-field__control > svg {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-grey);
  pointer-events: none;
  transform: translateY(-50%);
}

.booking-field input[type="date"] {
  padding-right: 38px;
}

.booking-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.booking-consent {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
  gap: 8px;
  color: var(--color-grey);
  font-size: 0.76rem;
  line-height: 1.4;
  cursor: pointer;
}

.booking-consent input {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: var(--color-video-red);
}

.booking-consent--error {
  color: var(--color-video-red);
}

.booking-submit {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  padding: 0 var(--space-3);
  gap: var(--space-1);
  color: var(--color-white);
  background: var(--color-video-red);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.booking-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.booking-success {
  margin: 12px 0 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--color-charcoal);
  background: color-mix(in srgb, var(--color-yellow) 42%, var(--color-white));
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.booking-image-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  background: var(--color-cloud);
}

.booking-image-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.booking-image-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 12%),
    transparent 48%,
    rgb(0 0 0 / 62%)
  );
}

.booking-image-card__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: flex-start;
  border-radius: 12px;
  padding: 9px 10px;
  gap: 8px;
  color: var(--color-white);
  background: var(--color-video-red);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.booking-image-card__badge svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.booking-map h2 {
  margin: 0;
  font-size: 18px;
}

.booking-map {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.booking-map__frame {
  position: relative;
  overflow: hidden;
  height: 60%;
  min-height: 240px;
  flex: none;
  margin-top: var(--space-3);
  border-radius: 12px;
  background: var(--color-cloud);
}

.booking-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.72) contrast(0.88) brightness(1.08);
}

.booking-map__address {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  margin-top: 12px;
  gap: 10px;
}

.booking-map__address svg {
  width: 22px;
  height: 22px;
  color: var(--color-video-red);
}

.booking-map__address p {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.45;
}

.booking-map__link {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0 32px;
  gap: 6px;
  color: var(--color-video-red);
  font-size: 0.84rem;
  font-weight: 900;
}

.booking-map__link:hover {
  text-decoration: underline;
}

.site-footer {
  padding: var(--space-5) 40px;
  color: var(--color-white);
  background: var(--color-ink);
}

.footer-columns {
  display: grid;
  width: 100%;
  grid-template-columns:
    minmax(0, 30fr) minmax(0, 24fr)
    minmax(0, 27fr) minmax(0, 19fr);
  align-items: start;
  gap: var(--space-5);
}

.footer-columns h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
}

.footer-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-logo {
  display: block;
  object-fit: contain;
}

.footer-logo--eurorepar {
  width: 140px;
  height: auto;
  border-radius: 6px;
}

.footer-logo--van {
  width: 120px;
  height: auto;
}

.footer-link-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-2);
  gap: var(--space-3);
}

.footer-link-groups ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.footer-link-groups a {
  color: var(--color-cloud);
  font-size: 14px;
  line-height: 1.35;
  transition: color 160ms ease;
}

.footer-link-groups a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  color: var(--color-white);
}

.footer-contact__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
  gap: 10px;
}

.footer-contact__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.footer-contact__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-white);
}

.footer-contact__icon svg {
  width: 17px;
  height: 17px;
}

.footer-contact__item p {
  margin: 0;
  color: var(--color-cloud);
  font-size: 14px;
  line-height: 1.4;
}

.footer-social {
  min-width: 0;
}

.footer-social__links {
  display: flex;
  align-items: center;
  margin-top: var(--space-2);
  gap: 12px;
}

.footer-social__links a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-white);
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.footer-social__links a:hover {
  color: var(--color-video-red);
  transform: translateY(-2px);
}

.footer-social__links svg {
  width: 20px;
  height: 20px;
}

.footer-legal {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 0;
  padding-top: var(--space-2);
  gap: 12px;
}

.footer-legal__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

.footer-legal__links a {
  color: var(--color-grey);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.footer-legal__links a + a {
  margin-left: 8px;
  border-left: 1px solid var(--color-grey);
  padding-left: 8px;
}

.footer-powered {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  color: var(--color-grey);
  font-size: 12px;
  line-height: 1;
}

.footer-powered__logo {
  position: relative;
  display: block;
  width: 220px;
  height: 42px;
  overflow: hidden;
}

.footer-powered__logo img {
  position: absolute;
  top: -40px;
  left: 0;
  display: block;
  width: 220px;
  height: auto;
}

@media (max-width: 1210px) {
  .desktop-nav,
  .header-actions {
    display: none;
  }

  .header-inner {
    position: relative;
    z-index: 2;
    justify-content: space-between;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    visibility: hidden;
    align-items: center;
    justify-content: safe center;
    flex-direction: column;
    overflow-y: auto;
    padding: calc(var(--header-height) + var(--space-4)) var(--space-3)
      var(--space-4);
    gap: var(--space-4);
    background: color-mix(in srgb, var(--color-charcoal) 97%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity 220ms ease,
      transform 220ms ease,
      visibility 220ms ease;
  }

  .mobile-menu--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-nav {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .mobile-nav__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 4px var(--space-2);
    color: var(--color-white);
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 800;
  }

  .mobile-nav__link--active {
    color: var(--color-yellow);
  }

  .mobile-menu__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .eurorepar-badge {
    left: var(--space-3);
  }

  .support-section {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .support-media {
    min-height: 360px;
  }

  .support-media__image {
    position: absolute;
    object-position: center 52%;
  }

  .support-content {
    padding: var(--space-6) var(--space-4);
  }

  .services-carousel {
    width: calc(100% - 128px);
  }

  .services-control--previous {
    left: -72px;
  }

  .services-control--next {
    right: -72px;
  }

  .service-card {
    min-width: calc((100% - var(--space-3)) / 2);
  }

  .brands-list {
    max-width: 720px;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }

  .eurorepar-banner__content {
    width: min(calc(100% - 320px), 900px);
  }

  .experience-inner {
    gap: var(--space-5);
  }

  .booking-inner {
    grid-template-columns:
      minmax(0, 45fr) minmax(0, 28fr)
      minmax(0, 27fr);
    gap: var(--space-3);
  }

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

  .footer-legal {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .results-section {
    padding: var(--space-6) var(--space-4);
  }

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

  .before-after-card:last-child {
    width: calc((100% - 28px) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .process-section {
    padding: var(--space-6) var(--space-4);
  }

  .process-steps {
    grid-template-columns:
      minmax(0, 1fr) 64px minmax(0, 1fr) 64px
      minmax(0, 1fr);
  }

  .process-step {
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .process-step__badge {
    width: 72px;
    height: 72px;
  }

  .process-step__badge svg {
    width: 34px;
    height: 34px;
  }

  .process-step h3 {
    font-size: 1.2rem;
  }

  .process-step p {
    font-size: 0.9rem;
  }

  .process-arrow {
    width: 40px;
  }

  .reviews-section {
    padding: var(--space-6) var(--space-4);
  }

  .reviews-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .reviews-summary {
    text-align: center;
  }

  .reviews-summary h2 {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  .reviews-rating__main {
    justify-content: center;
  }

  .reviews-rating > p {
    margin-left: 0;
  }

  .review-card {
    flex-basis: calc((100% - 20px) / 2);
    height: 344px;
  }

  .review-card__text-area {
    height: 168px;
  }

  .review-card__text-area p {
    -webkit-line-clamp: 7;
  }

  .videos-section {
    padding: 40px;
  }

  .videos-slider {
    width: 100%;
  }

  .video-card {
    flex-basis: calc((100% - 20px) / 2);
  }

  .eurorepar-banner {
    min-height: 360px;
  }

  .eurorepar-banner__content {
    width: min(calc(100% - 240px), 720px);
    min-height: 360px;
  }

  .eurorepar-banner__copy h2 {
    font-size: clamp(1.7rem, 4vw, 2rem);
  }

  .experience-section {
    padding: 40px;
  }

  .experience-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .experience-story {
    width: 100%;
    margin: 0;
  }

  .experience-features {
    width: 100%;
    margin: 0;
  }

  .booking-section {
    padding: var(--space-4) 40px;
  }

  .booking-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.65fr);
    gap: var(--space-4);
  }

  .booking-map {
    grid-column: 1 / -1;
  }

  .booking-map__frame {
    height: 220px;
  }

  .site-footer {
    padding: var(--space-5) 40px;
  }
}

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

  .header-inner {
    width: calc(100% - var(--space-4));
  }

  .van-logo img {
    height: 40px;
  }

  .hero {
    min-height: max(100svh, 900px);
    overflow: visible;
    padding: calc(var(--header-height) + 118px) var(--space-2) var(--space-4);
  }

  .hero::before {
    background-position: 48% center;
  }

  .eurorepar-badge {
    top: calc(var(--header-height) + var(--space-2));
    left: 50%;
    width: 160px;
    transform: translateX(-50%);
  }

  .eurorepar-badge:hover {
    transform: translateX(-50%) translateY(-2px);
  }

  .hero-content {
    margin-top: 0;
  }

  .hero-heading h1 {
    font-size: clamp(2.25rem, 10.6vw, 3.25rem);
  }

  .hero-subtitle {
    max-width: 580px;
  }

  .search-bar {
    height: 58px;
  }

  .search-bar__icon {
    width: 21px;
    height: 21px;
    margin-left: var(--space-2);
  }

  .search-bar input {
    padding: 0 10px;
    font-size: 0.9rem;
  }

  .microphone-button {
    width: 44px;
    height: 44px;
  }

  .hero-actions {
    width: min(100%, 520px);
    flex-direction: column;
  }

  .hero-button {
    width: 100%;
  }

  .hero-divider {
    width: 80%;
  }

  .features {
    gap: var(--space-2);
  }

  .feature p {
    font-size: 0.74rem;
  }

  .benefits-drawer {
    position: absolute;
    z-index: 999999;
    inset: 0;
  }

  .benefits-scrim {
    position: fixed;
  }

  .benefits-tab {
    z-index: 999999;
    top: auto;
    right: 0;
    bottom: var(--space-3);
    width: auto;
    height: 50px;
    justify-content: flex-start;
    flex-direction: row;
    border-radius: 24px 0 0 24px !important;
    padding: 0 10px 0 var(--space-2);
    gap: 7px;
    transform: none;
  }

  .benefits-drawer--open .benefits-tab {
    right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }

  .benefits-tab__chevron,
  .benefits-tab__desktop-label {
    display: none;
  }

  .benefits-tab__mobile-label {
    display: inline;
    font-size: 0.9rem;
    font-weight: 850;
  }

  .benefits-tab__badge {
    width: 25px;
    height: 25px;
    order: -1;
    transform: none;
  }

  .benefits-tab--hint {
    animation: benefits-hint-mobile 700ms ease-in-out 2;
  }

  @keyframes benefits-hint-mobile {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-7px);
    }
  }

  .benefits-scrim,
  .benefits-panel {
    display: none;
  }

  .benefits-mobile-layer {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: block;
    animation: benefits-overlay-in 300ms ease-out both;
  }

  .benefits-mobile-overlay {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(0 0 0 / 60%);
    cursor: pointer;
  }

  .benefits-mobile-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    max-height: 85dvh;
    overflow: hidden;
    flex-direction: column;
    border-radius: 24px 24px 0 0;
    padding: 20px;
    gap: 20px;
    color: var(--color-white);
    background: #1e1e1e;
    box-shadow: 0 -18px 48px rgb(0 0 0 / 45%);
    animation: benefits-sheet-in 300ms ease-out both;
  }

  .benefits-mobile-sheet__handle {
    width: 48px;
    height: 5px;
    flex: none;
    align-self: center;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-white) 38%, transparent);
  }

  .benefits-mobile-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    border-bottom: 1px solid
      color-mix(in srgb, var(--color-white) 16%, transparent);
    padding-bottom: 20px;
    gap: var(--space-2);
  }

  .benefits-mobile-sheet__header h2 {
    margin: 0;
    color: var(--color-white);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.2;
  }

  .benefits-mobile-sheet__close {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid
      color-mix(in srgb, var(--color-white) 28%, transparent);
    border-radius: 50%;
    padding: 0 0 3px;
    color: var(--color-white);
    background: transparent;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
  }

  .benefits-mobile-list {
    display: flex;
    min-height: 0;
    overflow-y: auto;
    flex-direction: column;
    margin: 0;
    padding: 0 2px 0 0;
    gap: 20px;
    overscroll-behavior: contain;
    list-style: none;
  }

  .benefits-mobile-item {
    display: grid;
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
  }

  .benefits-mobile-item__icon {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
  }

  .benefits-mobile-item__icon img {
    position: relative;
    top: 50%;
    left: 50%;
    display: block;
    width: 76px;
    height: 76px;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }

  .benefits-mobile-item:nth-child(5) .benefits-mobile-item__icon img {
    width: 54px;
    height: 54px;
  }

  .benefits-mobile-item__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .benefits-mobile-item__text h3 {
    margin: 0;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.3;
  }

  .benefits-mobile-item__text p {
    margin: 4px 0 0;
    color: var(--color-soft-grey);
    font-size: 14px;
    line-height: 1.4;
  }

  @keyframes benefits-overlay-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes benefits-sheet-in {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .support-content {
    padding: var(--space-5) var(--space-3) var(--space-6);
  }

  .support-heading h2 {
    font-size: clamp(2rem, 8.5vw, 2.7rem);
  }

  .support-list {
    margin-top: var(--space-4);
  }

  .support-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--space-2);
  }

  .support-item__icon {
    width: 48px;
    height: 48px;
  }

  .services-section {
    padding: var(--space-6) var(--space-3);
  }

  .services-heading {
    margin-bottom: var(--space-4);
  }

  .services-heading h2 {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
  }

  .services-carousel {
    width: calc(100% - 72px);
  }

  .services-control--previous {
    left: -58px;
  }

  .services-control--next {
    right: -58px;
  }

  .service-card {
    min-width: 100%;
  }

  .brands-section {
    padding: var(--space-6) var(--space-3);
  }

  .brands-heading h2 {
    font-size: clamp(1.5rem, 6.5vw, 1.625rem);
  }

  .brands-heading p {
    font-size: 0.95rem;
  }

  .brands-list {
    max-width: 320px;
    margin-top: var(--space-4);
    gap: var(--space-2);
  }

  .brand-logo {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 639px) {
  .results-section {
    padding: var(--space-6) var(--space-3);
  }

  .results-heading {
    flex-direction: column;
    gap: var(--space-2);
  }

  .results-heading h2 {
    font-size: clamp(1.75rem, 8vw, 2rem);
  }

  .results-intro {
    max-width: none;
  }

  .results-grid {
    grid-template-columns: 1fr;
    margin-top: var(--space-4);
    gap: var(--space-3);
  }

  .comparison__handle::after {
    width: 40px;
    height: 40px;
  }

  .process-section {
    padding: var(--space-5) var(--space-3);
  }

  .process-inner > h2 {
    font-size: 1.5rem;
  }

  .process-steps {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    margin-top: var(--space-5);
  }

  .process-step {
    align-items: center;
    gap: var(--space-3);
  }

  .process-step__badge {
    width: 72px;
    height: 72px;
  }

  .process-step__badge svg {
    width: 34px;
    height: 34px;
  }

  .process-step__content {
    max-width: none;
  }

  .process-step h3 {
    font-size: 1.2rem;
  }

  .process-step p {
    margin-top: var(--space-1);
    font-size: 0.95rem;
  }

  .process-arrow {
    width: 2px;
    height: 40px;
    align-self: flex-start;
    justify-self: auto;
    margin-left: 35px;
    border-top: 0;
    border-left: 2px dotted var(--color-soft-grey);
  }

  .process-arrow::after {
    top: auto;
    right: auto;
    bottom: 1px;
    left: -5px;
    border-top: 0;
    border-right: 2px solid var(--color-soft-grey);
    border-bottom: 2px solid var(--color-soft-grey);
    transform: rotate(45deg);
  }

  .reviews-section {
    padding: var(--space-6) var(--space-3);
  }

  .reviews-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .reviews-summary {
    text-align: center;
  }

  .reviews-summary h2 {
    font-size: 1.625rem;
    margin-right: auto;
    margin-left: auto;
  }

  .reviews-rating__main {
    justify-content: center;
    flex-wrap: wrap;
  }

  .reviews-rating > p {
    margin-left: 0;
  }

  .reviews-link {
    width: 100%;
    white-space: normal;
  }

  .reviews-slider__track {
    gap: var(--space-2);
  }

  .review-card {
    flex-basis: 85%;
    height: 344px;
  }

  .reviews-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    gap: var(--space-2);
  }

  .reviews-slider__arrow {
    position: static;
    transform: none;
  }

  .reviews-slider__arrow:hover:not(:disabled) {
    transform: scale(1.04);
  }

  .videos-section {
    padding: 40px var(--space-3);
  }

  .videos-heading h2 {
    font-size: 1.625rem;
  }

  .videos-slider {
    width: 100%;
    margin-top: var(--space-3);
  }

  .video-card {
    flex-basis: 85%;
  }

  .videos-slider__arrow--previous {
    left: -16px;
  }

  .videos-slider__arrow--next {
    right: -16px;
  }

  .eurorepar-banner {
    min-height: 520px;
  }

  .eurorepar-banner__content {
    width: calc(100% - 160px);
    min-height: 520px;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    padding: var(--space-5) 0;
    gap: var(--space-4);
    text-align: center;
  }

  .eurorepar-banner__copy h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .eurorepar-banner__membership {
    justify-content: center;
    flex-direction: column;
    margin-top: var(--space-2);
    gap: var(--space-1);
  }

  .eurorepar-banner__actions {
    width: min(100%, 280px);
    align-self: center;
  }

  .experience-section {
    overflow-x: hidden;
    padding: var(--space-4) 20px;
  }

  .experience-inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-3);
  }

  .experience-story {
    width: 100%;
  }

  .experience-heading h2 {
    margin: 0;
    background: none;
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.2;
    text-align: left;
  }

  .experience-heading p {
    max-width: none;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
  }

  .experience-video-card {
    width: 100%;
    margin-top: var(--space-3);
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .experience-video-card__play {
    width: 56px;
    height: 56px;
  }

  .experience-video-card__play > span {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 16px;
  }

  .experience-features {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 20px;
  }

  .experience-feature {
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
  }

  .experience-feature__icon {
    width: 48px;
    height: 48px;
  }

  .experience-feature__icon--standard img {
    width: 76px;
    height: 76px;
  }

  .experience-feature__icon--check img {
    width: 80px;
    height: 80px;
  }

  .experience-feature__icon--headset img {
    width: 54px;
    height: 54px;
  }

  .experience-feature__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .experience-feature__text h3 {
    font-size: 16px;
    line-height: 1.3;
  }

  .experience-feature__text p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
  }

  .booking-section {
    padding: var(--space-4) var(--space-3);
  }

  .booking-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .booking-form,
  .booking-image-card,
  .booking-map {
    width: 100%;
  }

  .booking-fields {
    grid-template-columns: 1fr;
  }

  .booking-image-card {
    width: min(100%, 420px);
    height: auto;
    aspect-ratio: 5 / 4;
    align-self: center;
  }

  .booking-map__frame {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .site-footer {
    padding: var(--space-5) var(--space-3);
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-legal {
    grid-column: auto;
  }

}

@media (max-width: 480px) {
  .hero {
    min-height: 1120px;
    padding-bottom: var(--space-5);
  }

  .hero-heading h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .hero-location {
    font-size: 1rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .search-bar input {
    font-size: 0.82rem;
  }

  .features {
    width: 100%;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .feature {
    display: grid;
    width: min(100%, 310px);
    grid-template-columns: 48px 1fr;
    margin: 0 auto;
    gap: var(--space-2);
    text-align: left;
  }

  .feature p {
    max-width: none;
    margin: 0;
    font-size: 0.84rem;
  }

  .result-card__phones,
  .result-card--inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-menu__actions {
    width: min(100%, 340px);
    flex-direction: column;
  }

  .mobile-menu__actions .action-button,
  .mobile-menu__actions .login-link {
    width: 100%;
    justify-content: center;
  }

  .support-media {
    min-height: 300px;
  }

  .services-section {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }

  .services-carousel {
    width: calc(100% - 56px);
  }

  .services-control {
    width: 42px;
    height: 42px;
  }

  .services-control--previous {
    left: -50px;
  }

  .services-control--next {
    right: -50px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .benefits-tab--hint {
    animation: none;
  }
}

button,
a.action-button,
a.hero-button,
a.result-card__button,
a.reviews-link,
a.eurorepar-banner__button {
  border-radius: 15px !important;
}

/* Shared typography scale */
.support-heading h2,
.services-heading h2,
.brands-heading h2,
.results-heading h2,
.process-inner > h2,
.reviews-summary h2,
.videos-heading h2,
.eurorepar-banner__copy h2,
.experience-heading h2,
.booking-heading h2 {
  font-size: var(--text-large);
}

.hero-location,
.hero-subtitle,
.support-heading > p,
.services-intro,
.brands-heading p,
.results-intro,
.videos-heading p,
.experience-heading p,
.support-item h3,
.service-card h3,
.before-after-card__content h3,
.process-step h3,
.video-card__content h3,
.experience-feature__text h3,
.benefits-item h3,
.benefits-mobile-item__text h3,
.footer-columns h2,
.booking-map h2,
.action-button,
.hero-button,
.result-card__button,
.reviews-link,
.eurorepar-banner__button,
.booking-submit,
.benefits-booking {
  font-size: var(--text-medium);
}

.nav-link,
.login-link,
.feature p,
.support-item p,
.services-eyebrow,
.service-card__content > p,
.service-card__content > a,
.results-eyebrow,
.before-after-card__content p,
.process-step p,
.reviews-eyebrow,
.reviews-rating > p,
.review-card__text-area p,
.review-card__author span,
.video-card__content p,
.experience-feature__text p,
.booking-heading > span,
.booking-heading p,
.booking-field input,
.booking-field select,
.booking-required-placeholder,
.booking-consent,
.booking-map__address p,
.booking-map__link,
.footer-link-groups a,
.footer-contact__item p,
.footer-legal__links a,
.footer-powered,
.benefits-item p,
.benefits-mobile-item__text p {
  font-size: var(--text-small);
}

/* Scroll-triggered section reveals */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal .video-card,
.scroll-reveal .review-card,
.scroll-reveal .booking-inner > *,
.scroll-reveal .footer-columns > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.scroll-reveal--visible .video-card,
.scroll-reveal--visible .review-card,
.scroll-reveal--visible .booking-inner > *,
.scroll-reveal--visible .footer-columns > * {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal--visible .video-card:hover {
  transform: scale(1.03);
}

.scroll-reveal--visible .review-card:hover {
  transform: translateY(-4px);
}

.scroll-reveal .video-card:nth-child(2),
.scroll-reveal .review-card:nth-child(2),
.scroll-reveal .booking-inner > :nth-child(2),
.scroll-reveal .footer-columns > :nth-child(2) {
  transition-delay: 100ms;
}

.scroll-reveal .video-card:nth-child(3),
.scroll-reveal .review-card:nth-child(3),
.scroll-reveal .booking-inner > :nth-child(3),
.scroll-reveal .footer-columns > :nth-child(3) {
  transition-delay: 200ms;
}

.scroll-reveal .video-card:nth-child(4),
.scroll-reveal .review-card:nth-child(4),
.scroll-reveal .footer-columns > :nth-child(4) {
  transition-delay: 300ms;
}

.scroll-reveal .video-card:nth-child(5),
.scroll-reveal .review-card:nth-child(5),
.scroll-reveal .footer-columns > :nth-child(5) {
  transition-delay: 400ms;
}

.scroll-reveal .video-card:nth-child(6) {
  transition-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal .video-card,
  .scroll-reveal .review-card,
  .scroll-reveal .booking-inner > *,
  .scroll-reveal .footer-columns > * {
    opacity: 1;
    transform: none;
  }
}


/* Classic PHP theme compatibility */
:root{--color-red:#e30613;--color-yellow:#fed243}img{max-width:100%;height:auto}picture{display:contents}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #649ffd;outline-offset:3px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:9999;background:white;color:black}.header-inner{display:flex;align-items:center;gap:22px;max-width:1350px;margin:auto;padding:10px 24px}.site-header{background:#171717;color:white;position:relative;z-index:20}.site-logo img{width:110px;max-height:65px;object-fit:contain}.primary-nav{flex:1}.primary-nav ul,.site-footer ul{list-style:none;padding:0;margin:0;display:flex;gap:17px}.primary-nav a,.login-link{color:white;text-decoration:none;font-size:13px;font-weight:700}.header-actions{display:flex;gap:8px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 17px;border-radius:5px;font-weight:800;text-decoration:none;border:0;cursor:pointer}.btn-yellow{background:#fed243;color:#111}.btn-red{background:#e30613;color:white}.menu-toggle{display:none}.hero{position:relative;min-height:660px;background:linear-gradient(#0005,#0008),url('../img/Cinematic_Garage_Car_Service.webp') center/cover;color:white;text-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 190px at var(--mouse-x,50%) var(--mouse-y,50%),#fed24322,transparent 70%)}.hero-content{position:relative;z-index:1;max-width:800px;padding:55px 18px 30px}.hero-badge{position:absolute;top:5px;left:-150px}.hero-badge img{width:170px}.hero h1{font-size:clamp(32px,4vw,56px);line-height:1.1;margin:20px 0 12px;font-weight:900}.hero h2{font-size:23px;margin:0}.hero-content>p{font-size:18px;max-width:640px;margin:18px auto}.hero-search{max-width:610px;margin:24px auto 14px;display:flex;align-items:center;background:white;border-radius:40px;color:#222;padding:5px 8px 5px 20px}.hero-search input{border:0;outline:0;flex:1;min-width:0;padding:12px;font-size:14px}.voice-btn{background:#e30613;border:0;color:white;border-radius:50%;width:45px;height:45px}.hero-buttons{display:flex;justify-content:center;gap:15px}.trust-row{display:flex;gap:30px;justify-content:center;border-top:1px solid #ffffff55;margin:28px auto 0;padding-top:20px}.trust-row>div{width:150px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}.trust-row img{width:42px}.benefits-tab{position:absolute;right:0;top:40%;writing-mode:vertical-rl;background:#e30613;color:white;border:0;padding:18px 10px;font-weight:800;cursor:pointer}.benefit-count{background:#fed243;color:#111;border-radius:50%;padding:7px}.drawer-backdrop{position:fixed;inset:0;background:#0009;z-index:99}.benefits-drawer{position:fixed;right:0;top:0;bottom:0;width:min(430px,92vw);z-index:100;background:white;color:#171717;padding:35px;overflow:auto;text-align:left;box-shadow:0 0 30px #0005}.benefits-drawer p{display:flex;align-items:center;gap:16px}.benefits-drawer img{width:45px}.drawer-close{float:right;background:#e30613;color:white;border:0;padding:10px;cursor:pointer}.support-inner,.experience-inner,.booking-inner{max-width:1250px;margin:auto;display:grid;gap:35px;align-items:center}.support-inner{grid-template-columns:1.2fr 1fr}.support-section{color:#181818;background:#fff}.support-image img{width:100%}.support-content{padding:35px 20px}.support-item{display:flex;gap:14px;margin:18px 0}.support-item img{width:48px;height:48px;object-fit:contain}.support-item strong{color:#e30613}.support-item p{margin:4px 0}.services-section,.brands-section,.results-section,.process-section,.videos-section,.booking-section{color:#161616}.services-section,.results-section,.videos-section,.booking-section{padding:55px 24px}.services-inner,.results-inner,.videos-inner{max-width:1200px;margin:auto}.services-heading,.videos-heading{text-align:center;margin-bottom:32px}.services-eyebrow,.results-eyebrow,.booking-eyebrow{color:#e30613;font-weight:800}.services-carousel,.video-carousel,.reviews-carousel{display:flex;align-items:center;gap:18px}.services-track,.video-track,.reviews-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:22px;flex:1}.services-track::-webkit-scrollbar,.video-track::-webkit-scrollbar,.reviews-track::-webkit-scrollbar{display:none}.service-card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start;text-align:center;box-shadow:0 2px 12px #0002;border-radius:9px;overflow:hidden;min-width:0;padding-bottom:18px;background:white}.service-card__media img{width:100%;height:155px;object-fit:cover}.service-card__icon img{width:48px;height:48px;object-fit:contain;margin-top:-24px;position:relative}.service-card h3{font-size:17px;min-height:42px}.service-card p{font-size:13px;min-height:64px;padding:0 12px}.service-card a{color:#e30613;font-weight:800;text-decoration:none}.services-control,.video-carousel>button,.reviews-carousel>button{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#fed243;border:0;font-size:20px;cursor:pointer}.services-control:disabled,.video-carousel>button:disabled,.reviews-carousel>button:disabled{opacity:.4}.slider-dots{text-align:center;padding-top:18px}.slider-dots button{width:9px;height:9px;border:0;border-radius:50%;background:#aaa;margin:3px;padding:0}.slider-dots button.active{background:#e30613}.brands-section{background:#f1f1f1;text-align:center;padding:28px 24px}.brands-row{max-width:1050px;margin:25px auto 0;display:flex;align-items:center;justify-content:space-around;gap:25px}.brands-row img{width:115px;max-height:85px;object-fit:contain}.results-heading{display:flex;justify-content:space-between;align-items:end;gap:40px}.results-heading>p{max-width:330px}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}.comparison{text-align:center}.comparison-visual{--split:50%;height:210px;position:relative;overflow:hidden;border-radius:8px}.comparison-before,.comparison-after{position:absolute;inset:0}.comparison-visual img{width:100%;height:100%;object-fit:cover}.comparison-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-line{position:absolute;top:0;bottom:0;left:var(--split);border-left:3px solid white;pointer-events:none}.comparison-visual input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.before-tag,.after-tag{position:absolute;bottom:12px;background:#111b;color:white;padding:5px 9px;border-radius:5px;pointer-events:none}.before-tag{left:10px}.after-tag{right:10px}.comparison h3{margin:10px 0 0}.comparison p{margin:4px}.process-section{background:#eee;padding:30px 25px;text-align:center}.process-row{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:1200px;margin:20px auto}.process-step{display:flex;align-items:center;text-align:left;gap:18px}.process-step>span{display:grid;place-items:center;border:2px solid #aaa;border-radius:50%;width:82px;height:82px;flex:none;font-size:32px}.reviews-section{background:#151515;color:white;padding:30px 25px}.reviews-inner{max-width:1250px;margin:auto;display:grid;grid-template-columns:300px 1fr;gap:20px}.reviews-summary h2{font-size:25px}.rating{color:#fed243;font-size:26px;margin:20px 0}.review-card{background:white;color:#151515;border-radius:6px;padding:20px;flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start;min-height:210px;display:flex;flex-direction:column}.review-card p{font-size:12px;flex:1}.review-card small{display:block}.stars{color:#e30613}.video-card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start}.video-facade{position:relative;width:100%;padding:0;border:0;cursor:pointer;background:#111;display:block}.video-facade img{width:100%;height:245px;object-fit:cover}.video-facade span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#e30613;color:white;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;font-size:23px}.video-card iframe,.experience-video+iframe{width:100%;aspect-ratio:9/12;border:0}.video-card h3{font-size:15px}.eurorepar-section{min-height:150px;display:flex;align-items:center;justify-content:center;gap:35px;padding:20px;background:#e8e8e8 url('../img/eurorepar-section-background.jpg') center/cover;color:#222;text-align:center}.eurorepar-section h2{color:#e30613}.eurorepar-section img{max-width:150px}.experience-section{background:#171717;color:white;padding:45px 25px}.experience-inner{grid-template-columns:1.2fr 1fr}.experience-video img{height:310px}.experience-benefits>div{display:flex;gap:20px;align-items:center;margin:15px 0}.experience-benefits img{width:55px}.booking-inner{grid-template-columns:1.1fr 1fr 1fr;align-items:start}.booking-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.booking-fields input,.booking-fields select,.booking-fields textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font:inherit;min-width:0}.booking-fields textarea{grid-column:1/-1}.consent{display:flex;gap:8px;font-size:12px;margin:12px 0}.booking-form>.btn{width:100%}.hp-field{position:absolute;left:-9999px}.booking-photo{position:relative}.booking-photo img{height:430px;width:100%;object-fit:cover}.booking-photo-note{position:absolute;right:0;top:20px;background:#e30613;color:white;padding:20px;max-width:180px}.booking-map iframe,.map-placeholder{height:260px;width:100%;border:0;background:#e9ecef}.map-placeholder{display:grid;place-content:center;text-align:center;color:#e30613;font-size:38px}.map-placeholder span{font-size:16px}.booking-map a{color:#e30613}.site-footer{background:#171717;color:white;padding:35px 25px}.footer-inner{max-width:1250px;margin:auto;display:grid;grid-template-columns:2fr 1.4fr 1.2fr 1fr;gap:35px}.site-footer img{width:100px;max-height:70px;object-fit:contain}.site-footer ul{display:block;columns:2}.site-footer li{margin-bottom:8px}.site-footer a{color:white;text-decoration:none}.site-footer p{font-size:12px}.generic-page{max-width:1100px;margin:70px auto;padding:20px;min-height:55vh;color:#222}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){.menu-toggle{display:block;background:transparent;border:1px solid white;color:white;padding:10px}.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#171717;padding:25px}.primary-nav.open{display:block}.primary-nav ul{flex-direction:column}.header-actions{margin-left:auto}.header-actions .login-link{display:none}.service-card,.video-card{flex-basis:calc((100% - 22px)/2)}.review-card{flex-basis:calc((100% - 22px)/2)}.booking-inner{grid-template-columns:1fr 1fr}.booking-map{grid-column:1/-1}.hero-badge{left:0;top:-20px}.hero-content{padding-top:130px}}
@media(max-width:680px){.header-inner{padding:8px 12px;gap:8px}.site-logo img{width:80px}.header-actions .btn{padding:9px;font-size:11px}.header-actions .btn-yellow{display:none}.hero{min-height:710px}.hero h1{font-size:32px}.hero h2{font-size:17px}.hero-content>p{font-size:14px}.hero-badge{top:20px;left:20px}.hero-badge img{width:115px}.trust-row{gap:8px}.trust-row>div{width:100px;font-size:11px}.trust-row img{width:34px}.support-inner,.experience-inner,.booking-inner,.reviews-inner{grid-template-columns:1fr}.support-content{padding:20px}.service-card,.video-card{flex-basis:85%}.review-card{flex-basis:85%}.brands-row{flex-wrap:wrap}.brands-row>div{width:27%}.brands-row img{width:100%}.results-grid,.process-row{grid-template-columns:1fr}.results-heading{display:block}.booking-map{grid-column:auto}.footer-inner{grid-template-columns:1fr 1fr}.eurorepar-section{flex-wrap:wrap}.process-step>span{width:65px;height:65px}.benefits-tab{top:58%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}


/* === Integrated Arimo (formerly arimo.css) === */
/* Self-hosted Arimo: Greek and Latin */
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-greek-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-036F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-greek-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-latin-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-036F, U+2000-206F, U+20AC, U+2122; }
html { font-family: var(--font-main); }
body, body *, button, input, select, textarea, option { font-family: var(--font-main); }
button, input, select, textarea { font: inherit; }

/* === Integrated homepage sections (formerly task-c-stage1.css) === */
/* VAN Auto Task C — Stage 1: overall scale, customer support, service cards.
   Loaded AFTER main.css, hero-fixes.css and arimo.css. No other sections changed. */
:root { --content-width: 1280px; }
/* Preserve the existing header/hero patch: only the below-the-fold sections are scoped here. */
.support-section { grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 440px; }
.support-media { min-width:0; }
.support-media__image { object-fit:cover; width:100%; height:100%; }
.support-content { min-width:0; }
.support-heading h2 { font-size:clamp(26px,2.4vw,36px); line-height:1.15; }
.support-list { gap:22px; }
.support-item { grid-template-columns:56px minmax(0,1fr); gap:18px; }
.support-item__icon { width:56px; height:56px; object-fit:contain; background:transparent; }
.support-item h3 { font-size:clamp(17px,1.35vw,21px); font-weight:700; }
.support-item p { font-size:clamp(15px,1.12vw,17px); line-height:1.4; }
.services-section { padding:24px 24px 42px; }
.services-inner { width:min(100%,1280px); margin-inline:auto; }
.services-heading h2 { font-size:clamp(28px,2.6vw,36px); font-weight:700; }
.services-intro { font-size:16px; max-width:930px; }
.services-carousel { width:min(calc(100% - 128px),1150px); }
.services-track { gap:24px; padding:14px 0 22px; }
.service-card { flex:0 0 calc((100% - 72px)/4); min-width:0; border-radius:8px; }
.service-card__media { aspect-ratio:1.75; }
.service-card__content { padding:38px 18px 22px; min-height:230px; }
.service-card__icon { width:60px; height:60px; top:-30px; border:4px solid white; background:#e30613; }
.service-card__icon img { object-fit:contain; }
.service-card h3 { font-size:20px; font-weight:700; }
.service-card__content > p { font-size:15px; }
.service-card__content > a { font-size:15px; font-weight:700; }
.services-control { width:54px; height:54px; background:#fed243; color:#181818; opacity:1; }
.services-control--previous { left:-69px; }
.services-control--next { right:-69px; }
@media(max-width:1024px) {
  .support-section { min-height:390px; }
  .services-carousel { width:calc(100% - 100px); }
  .service-card { flex-basis:calc((100% - 48px)/3); }
  .services-control--previous { left:-55px; }
  .services-control--next { right:-55px; }
}
@media(max-width:767px) {
  .support-section { display:flex; flex-direction:column; min-height:0; }
  .support-media { min-height:290px; aspect-ratio:1.65; }
  .support-media__image { position:absolute; inset:0; }
  .support-content { padding:26px 20px 32px; }
  .support-heading h2 { font-size:26px; }
  .support-item { grid-template-columns:44px minmax(0,1fr); gap:12px; }
  .support-item__icon { width:44px; height:44px; }
  .services-section { padding:24px 12px 36px; }
  .services-carousel { width:calc(100% - 76px); }
  .services-track { gap:14px; }
  .service-card { flex-basis:calc((100% - 14px)/2); }
  .services-control { width:36px; height:36px; }
  .services-control--previous { left:-39px; }
  .services-control--next { right:-39px; }
  .service-card h3 { font-size:17px; }
  .service-card__content { padding:34px 10px 16px; }
}
@media(max-width:480px) {
  .service-card { flex-basis:100%; }
  .services-carousel { width:calc(100% - 76px); }
}

/* === Integrated header and hero (formerly hero-step1.css) === */
/* VAN Auto — Task C, Step 1. Load after main.css, hero-fixes.css and task-c-stage1.css. */
:root{--van-yellow:#fed243;--van-red:#e30613;--van-header-height:78px}
.site-header{height:var(--van-header-height)!important;background:rgba(15,15,15,.89)!important;z-index:100!important}
.admin-bar .site-header{top:32px!important}
.header-inner{width:100%!important;max-width:1600px!important;padding-inline:clamp(18px,4.4vw,78px)!important;gap:clamp(12px,1.5vw,25px)!important}
.site-logo{flex:0 0 auto!important;background:none!important}
.site-logo img{height:52px!important;width:auto!important;max-width:155px!important;object-fit:contain!important;background:none!important}
.primary-nav{min-width:0!important;flex:1 1 auto!important}
.primary-nav ul{gap:clamp(9px,1.1vw,19px)!important;justify-content:center!important}
.primary-nav a{font-size:clamp(12px,.98vw,16px)!important;font-weight:700!important;white-space:nowrap!important}
.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a{color:var(--van-yellow)!important}
.header-actions{gap:10px!important;flex:0 0 auto!important}
.header-actions .btn{font-size:clamp(12px,.88vw,15px)!important;min-height:48px!important;padding:12px 15px!important;border-radius:6px!important;font-weight:700!important}
.header-actions svg,.login-link svg{width:18px!important;height:18px!important}
.login-link{font-size:clamp(12px,.85vw,15px)!important;font-weight:700!important}
.hero{min-height:clamp(650px,56vw,850px)!important;padding:calc(var(--van-header-height) + 48px) 22px 48px!important;isolation:isolate!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#141414!important}
.hero::before,.hero::after{content:none!important}
.hero-picture{position:absolute!important;inset:0!important;display:block!important;z-index:-3!important}
.hero-picture img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:40% center!important}
.hero-shade{position:absolute!important;inset:0!important;z-index:-2!important;background:linear-gradient(to bottom,rgba(0,0,0,.39) 0%,rgba(0,0,0,.25) 22%,rgba(0,0,0,.31) 65%,rgba(0,0,0,.33) 100%)!important;pointer-events:none!important}
.hero-glow{opacity:.20!important;pointer-events:none!important}
.hero-content{position:relative!important;z-index:2!important;width:min(100%,1040px)!important;max-width:1040px!important;margin-inline:auto!important;padding:12px 12px 0!important;text-align:center!important}
.hero h1{font-family:var(--font-main,"Arimo",Arial,sans-serif)!important;font-size:clamp(40px,3.85vw,64px)!important;font-weight:700!important;line-height:1.09!important;letter-spacing:-.025em!important;margin:0 0 15px!important;color:#fff!important;text-shadow:0 2px 7px #0008!important}
.hero h1 span{display:block!important;color:var(--van-yellow)!important}
.hero h2{font-size:clamp(19px,1.5vw,24px)!important;font-weight:700!important;line-height:1.3!important;margin:0 0 12px!important;color:#fff!important}
.hero-content>p{font-size:clamp(16px,1.25vw,20px)!important;line-height:1.42!important;max-width:39em!important;margin:0 auto 18px!important;color:#fff!important}
.hero-search{width:min(100%,640px)!important;max-width:640px!important;height:56px!important;min-height:56px!important;margin:16px auto 14px!important;padding:5px 7px 5px 17px!important;display:flex!important;align-items:center!important;gap:10px!important;border-radius:999px!important;background:#fff!important;box-shadow:0 3px 12px #0004!important}
.hero-search .search-icon svg{width:25px!important;height:25px!important}
.hero-search input{flex:1 1 auto!important;width:100%!important;min-width:0!important;font-size:14px!important;padding:8px 3px!important;color:#222!important;background:transparent!important;border:0!important;box-shadow:none!important}
.hero-search input::placeholder{color:#666!important;opacity:1!important}
.hero-search .voice-btn{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:50%!important;background:var(--van-red)!important;padding:9px!important;display:grid;place-items:center}
.hero-search .voice-btn[hidden]{display:none!important}
.hero-search .voice-btn svg{width:24px!important;height:24px!important}
.hero-buttons{display:flex!important;justify-content:center!important;align-items:center!important;gap:12px!important;margin-top:3px!important}
.hero-buttons .btn{min-height:52px!important;min-width:174px!important;padding:13px 23px!important;font-size:15px!important;font-weight:700!important;border-radius:6px!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;gap:9px!important}
.hero-buttons svg{width:19px!important;height:19px!important}
.trust-row{width:min(100%,560px)!important;max-width:560px!important;gap:clamp(22px,3vw,48px)!important;margin:23px auto 0!important;padding-top:17px!important;border-top:1px solid #ffffff88!important;display:flex!important;justify-content:center!important;align-items:flex-start!important}
.trust-row>div{flex:1 1 0!important;max-width:160px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important}
.trust-row img{width:48px!important;height:48px!important;object-fit:contain!important}
.trust-row span{max-width:145px!important;font-size:15px!important;line-height:1.25!important;font-weight:700!important;text-align:center!important;color:#fff!important}
.hero-badge{position:absolute!important;z-index:5!important;top:calc(var(--van-header-height) + 18px)!important;left:0!important;background:transparent!important;filter:drop-shadow(0 5px 9px #0005)!important}
.hero-badge img{width:clamp(140px,13vw,212px)!important;max-width:212px!important;height:auto!important;background:transparent!important}
.benefits-tab{position:absolute!important;z-index:6!important;top:30%!important;right:0!important;width:45px!important;min-height:195px!important;padding:12px 6px 9px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;border-radius:12px 0 0 12px!important;background:var(--van-red)!important;color:#fff!important;transform:none!important;writing-mode:initial!important;overflow:visible!important}
.benefit-label{writing-mode:vertical-rl!important;white-space:nowrap!important;font-size:13px!important;font-weight:700!important}
.benefit-count{position:static!important;transform:none!important;flex:none!important;display:grid!important;place-items:center!important;width:26px!important;height:26px!important;border-radius:50%!important;background:var(--van-yellow)!important;color:#171717!important;font-size:14px!important;font-weight:700!important}
@media(max-width:1250px){.header-inner{padding-inline:3vw!important;gap:12px!important}.primary-nav ul{gap:10px!important}.primary-nav a{font-size:12px!important}.header-actions .btn{padding:10px 11px!important;font-size:12px!important}}
@media(max-width:1050px){.site-header .menu-toggle{display:flex!important}.site-header .primary-nav{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;background:#151515!important;padding:18px 5vw!important;max-height:calc(100dvh - 110px)!important;overflow:auto!important}.site-header .primary-nav.open{display:block!important}.site-header .primary-nav ul{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}.site-header .primary-nav a{font-size:16px!important}.header-actions{margin-left:auto!important}.hero h1{font-size:clamp(39px,5.1vw,54px)!important}}
@media(max-width:782px){.admin-bar .site-header{top:46px!important}}
@media(max-width:680px){:root{--van-header-height:66px}.header-inner{padding-inline:15px!important}.site-logo img{height:44px!important;max-width:105px!important}.header-actions .btn-yellow,.header-actions .login-link{display:none!important}.header-actions .btn-red{font-size:11px!important;padding:8px 10px!important;min-height:40px!important}.hero{min-height:690px!important;padding:calc(var(--van-header-height) + 94px) 15px 35px!important}.hero-content{padding:0 8px!important}.hero h1{font-size:clamp(30px,7.3vw,42px)!important}.hero h2{font-size:17px!important}.hero-content>p{font-size:15px!important}.hero-search{width:100%!important;height:54px!important;min-height:54px!important}.hero-search input{font-size:12px!important}.hero-buttons{flex-direction:column!important;gap:10px!important}.hero-buttons .btn{width:min(100%,340px)!important;min-height:48px!important}.hero-badge{top:calc(var(--van-header-height) + 10px)!important}.hero-badge img{width:130px!important}.benefits-tab{top:32%!important;width:37px!important;min-height:175px!important}.benefit-label{font-size:11px!important}.trust-row{gap:8px!important;padding-top:15px!important}.trust-row>div{max-width:110px!important}.trust-row img{width:40px!important;height:40px!important}.trust-row span{font-size:11px!important}.hero-picture img{object-position:43% center!important}}
@media(hover:none),(pointer:coarse){.hero-glow{display:none!important}}
@media(prefers-reduced-motion:reduce){.hero-glow{display:none!important}}


/* Consolidated homepage refinements: no extra stylesheet required. */
:root { --font-main: "Arimo", Arial, Helvetica, sans-serif; }
html,body,button,input,select,textarea {font-family:var(--font-main);}
.hero {background-image:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.34)),url('../img/Cinematic_Garage_Car_Service.webp')!important;background-position:40% center!important;background-size:cover!important;}
.hero:has(.hero-picture) {background-image:none!important;}
.hero h1 span {color:#fed243!important;}
.hero-search .voice-btn[hidden],.voice-btn[hidden] {display:none!important;}
.hero-search .voice-btn:not([hidden]) {display:grid!important;}
.benefits-tab .benefit-count {position:static!important;transform:none!important;margin:0 auto!important;writing-mode:horizontal-tb!important;}
@media(max-width:1050px){.site-header .primary-nav.open{display:block!important}}
@media(max-width:680px){.hero-search{max-width:100%!important}.hero-search input{min-width:0!important}}