/* =========================================================
   Serenova Travel  |  site.css
   Built from Figma homepage (node 39:2) + Brand Deck
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Proscenium";
  src: url("../assets/fonts/proscenium-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/dm-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --carbon: #1c1e1b;
  --carbon-2: #252724;
  --ivory: #ececec;
  --orange: #ff3f1a;
  --orange-dark: #e3330f;
  --teal: #366167;
  --mist: #97d6df;

  --ivory-60: rgba(236, 236, 236, 0.6);
  --ivory-20: rgba(236, 236, 236, 0.2);
  --ivory-10: rgba(236, 236, 236, 0.1);
  --carbon-60: rgba(28, 30, 27, 0.6);
  --carbon-15: rgba(28, 30, 27, 0.15);

  --f-display: "Proscenium", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(20px, 2.78vw, 40px);
  --max: 1600px;
  --cut: 20px;
  --cut-sm: 10px;
  --section-y: clamp(80px, 8.4vw, 120px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--carbon);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 200;
  background: var(--orange);
  color: var(--ivory);
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
}
.is-dark {
  background: var(--carbon);
  color: var(--ivory);
}
.is-dark-grad {
  background: linear-gradient(137deg, var(--carbon) 48%, #3c3e3b 140%);
  color: var(--ivory);
}
.is-teal {
  background: var(--teal);
  color: var(--ivory);
}

/* ---------- Type ---------- */
.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.04em;
}
.display {
  font-size: clamp(34px, 4.45vw, 72px);
}
.h1 {
  font-size: clamp(34px, 3.9vw, 64px);
}
.h2 {
  font-size: clamp(30px, 3.34vw, 56px);
}
.h3 {
  font-size: clamp(22px, 1.95vw, 30px);
  line-height: 1.1;
}
.h4 {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.1;
}
.muted-line {
  opacity: 0.6;
}
.accent {
  color: var(--orange);
}
.statement {
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.lead {
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.5;
}
.body-sm {
  font-size: 14px;
  line-height: 1.5;
}
.dim {
  opacity: 0.6;
}
.measure {
  max-width: 34em;
}

/* Small label with orange marker (from Figma) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.tag--tight {
  gap: 8px;
}
.tri {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------- Buttons (cut corners: top-right + bottom-left) ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-sm)) 0,
    100% var(--cut-sm),
    100% 100%,
    var(--cut-sm) 100%,
    0 calc(100% - var(--cut-sm))
  );
  transition: background-color 0.25s var(--ease), padding 0.3s var(--ease);
}
.btn:hover {
  --btn-bg: var(--orange-dark);
  padding-right: 34px;
}
.btn:focus-visible {
  outline: 2px solid var(--btn-fg);
  outline-offset: -6px;
}
.btn--ivory {
  --btn-bg: var(--ivory);
  --btn-fg: var(--carbon);
}
.btn--ivory:hover {
  --btn-bg: #ffffff;
}
.btn--ghost {
  --btn-bg: var(--ivory-10);
  --btn-fg: var(--ivory);
}
.btn--ghost:hover {
  --btn-bg: var(--ivory-20);
}

/* Notched media (cut corners: top-left + bottom-right) */
.notch {
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}
.media {
  position: relative;
  overflow: hidden;
  background: var(--carbon-2);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text links */
.link-line {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease);
}
.link-line:hover {
  background-size: 100% 1px;
}

/* =========================================================
   Header + menu
   ========================================================= */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
}
.site-logo {
  display: block;
  width: clamp(150px, 14.4vw, 208px);
}
.site-logo img {
  width: 100%;
  height: auto;
}
.site-logo .logo-dark {
  display: none;
}
.site-header--light .site-logo .logo-light {
  display: none;
}
.site-header--light .site-logo .logo-dark {
  display: block;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 24px;
  min-width: 62px;
  padding: 0 10px;
  background: var(--ivory-10);
  color: var(--ivory);
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: background-color 0.2s var(--ease);
}
.menu-toggle:hover {
  background: var(--ivory-20);
}
.site-header--light .menu-toggle {
  background: var(--carbon-15);
  color: var(--carbon);
}
.menu-toggle__bars {
  display: grid;
  gap: 4px;
  width: 14px;
}
.menu-toggle__bars span {
  display: block;
  height: 1px;
  background: currentColor;
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--carbon);
  color: var(--ivory);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease), visibility 0s linear 0.6s;
}
.site-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease), visibility 0s;
}
.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
}
.site-menu__nav {
  align-self: center;
  padding-block: 40px;
}
.site-menu__nav ol {
  display: grid;
  border-top: 1px solid var(--ivory-10);
}
.site-menu__nav li {
  border-bottom: 1px solid var(--ivory-10);
}
.site-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(14px, 1.8vw, 22px);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: clamp(30px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), padding-left 0.35s var(--ease);
}
.site-menu__nav a span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  opacity: 0.6;
  min-width: 2.5em;
}
.site-menu__nav a:hover,
.site-menu__nav a[aria-current="page"] {
  color: var(--orange);
}
.site-menu__nav a:hover {
  padding-left: 12px;
}
.site-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
}
.site-menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.site-menu__contact a {
  text-decoration: none;
}
body.menu-open {
  overflow: hidden;
}

/* =========================================================
   HOME
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(110px, 6.6vw, 95px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr);
  grid-template-areas:
    "copy media"
    "sub  scroll";
  column-gap: 40px;
  row-gap: 36px;
  align-items: center;
}
.hero__copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  margin-right: -260%;
  pointer-events: none;
}
.hero__copy .btn {
  pointer-events: auto;
}
.hero__copy .h1 .reveal-line {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hero__copy .h1 {
    font-size: clamp(22px, 7.3vw, 34px);
  }
}
.hero__copy .btn {
  margin-top: clamp(32px, 4.4vw, 64px);
}
.intro {
  background: linear-gradient(137.65deg, var(--carbon) 49%, #464845 135%);
}
.hero__media {
  grid-area: media;
  aspect-ratio: 1002 / 587;
  --cut: clamp(18px, 3.2vw, 46px);
}
.hero__sub {
  grid-area: sub;
  width: min(38em, 92vw);
  text-indent: 4.6em;
}
.hero__scroll {
  grid-area: scroll;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s var(--ease);
}
.hero__scroll:hover svg {
  transform: translateY(4px);
}

/* Hero load sequence
   Hidden states only apply when JS is on and the visitor allows motion,
   so the hero is always visible otherwise. */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.reveal-line > span {
  display: block;
}
.hero__scroll-arrow {
  display: inline-flex;
}

@media (prefers-reduced-motion: no-preference) {
  /* starting states */
  .js .site-header .site-logo,
  .js .site-header .menu-toggle,
  .js .hero .btn,
  .js .hero__sub,
  .js .hero__scroll {
    opacity: 0;
  }
  .js .hero .reveal-line > span {
    translate: 0 110%;
  }
  .js .hero .hero__media.notch {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 0);
  }

  /* sequence (starts when JS adds .hero-go) */
  .js.hero-go .site-header .site-logo {
    animation: hero-down 0.9s var(--ease-out) 0.05s both;
  }
  .js.hero-go .site-header .menu-toggle {
    animation: hero-down 0.9s var(--ease-out) 0.15s both;
  }
  .js.hero-go .hero .hero__media.notch {
    animation: hero-wipe 1.4s var(--ease-out) 0.1s both;
  }
  .js.hero-go .hero .hero__media img {
    animation: hero-zoom 2.4s var(--ease-out) 0.1s both;
  }
  .js.hero-go .hero .reveal-line > span {
    animation: hero-line 1.1s var(--ease-out) both;
  }
  .js.hero-go .hero .reveal-line:nth-child(1) > span {
    animation-delay: 0.3s;
  }
  .js.hero-go .hero .reveal-line:nth-child(2) > span {
    animation-delay: 0.42s;
  }
  .js.hero-go .hero .reveal-line:nth-child(3) > span {
    animation-delay: 0.54s;
  }
  .js.hero-go .hero .btn {
    animation: hero-up 0.9s var(--ease-out) 0.85s both;
  }
  .js.hero-go .hero__sub {
    animation: hero-up 0.9s var(--ease-out) 1s both;
  }
  .js.hero-go .hero__scroll {
    animation: hero-fade 0.8s var(--ease) 1.2s both;
  }
  .js.hero-go .hero__scroll svg {
    animation: hero-bob 2.2s var(--ease) 2.2s infinite;
  }

  /* first-visit intro screen: logomark scales in */
  .is-intro .page-veil svg {
    opacity: 1;
    animation: intro-mark 0.8s var(--ease-out) 0.1s both;
  }
}

@keyframes hero-down {
  from {
    opacity: 0;
    translate: 0 -14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes hero-up {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes hero-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-line {
  from {
    translate: 0 110%;
  }
  to {
    translate: 0 0;
  }
}
@keyframes hero-wipe {
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 0);
  }
  to {
    clip-path: polygon(
      var(--cut) 0,
      100% 0,
      100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%,
      0 100%,
      0 var(--cut)
    );
  }
}
@keyframes hero-zoom {
  from {
    scale: 1.18;
  }
  to {
    scale: 1;
  }
}
@keyframes hero-bob {
  0%,
  60%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 0 5px;
  }
}
@keyframes intro-mark {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* About statement */
.apart {
  text-align: center;
  padding-top: clamp(64px, 7vw, 100px);
  padding-bottom: var(--section-y);
}
.apart .tag {
  margin-bottom: clamp(32px, 3.4vw, 48px);
}
.apart .statement {
  max-width: 26em;
  margin-inline: auto;
}
.apart .btn {
  margin-top: clamp(32px, 3.4vw, 48px);
}

/* Logo row (from Figma) */
.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(64px, 7vw, 100px);
  padding-top: clamp(44px, 4.8vw, 69px);
  border-top: 1px solid rgba(236, 236, 236, 0.15);
}
.logo-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
}
.logo-row img {
  width: auto;
  max-width: 100%;
  height: auto;
}
@media (max-width: 1100px) {
  .logo-row img {
    zoom: 0.85;
  }
}
@media (max-width: 700px) {
  .logo-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
  }
  .logo-row li:nth-child(3n + 1) {
    justify-content: flex-start;
  }
  .logo-row li:nth-child(3n) {
    justify-content: flex-end;
  }
  .logo-row img {
    zoom: 0.8;
  }
}

/* Services preview: text + expanding panels */
.svc-preview {
  overflow: hidden;
}
.svc-preview__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr);
  gap: 40px;
  align-items: stretch;
}
.svc-preview__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 100%;
}
.svc-preview__intro .h2 {
  margin-bottom: 40px;
}
.svc-preview__intro p {
  max-width: 23em;
}
.svc-preview__intro .btn {
  margin-top: 36px;
  align-self: flex-start;
}
.panels {
  display: flex;
  gap: 42px;
  height: clamp(440px, 41.7vw, 600px);
  margin-right: calc(var(--gutter) * -1);
}
.panel {
  position: relative;
  flex: 0 0 clamp(110px, 12vw, 176px);
  min-width: 0;
  overflow: hidden;
  background: var(--carbon-2);
  color: var(--ivory);
  text-align: left;
  transition: flex-basis 0.7s var(--ease);
}
.panel {
  --cut: clamp(14px, 1.67vw, 24px);
}
.panel.is-active {
  flex-basis: clamp(320px, 31.25vw, 450px);
  --cut: clamp(18px, 2.2vw, 32px);
}
.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 30, 27, 0.55) 0%, rgba(28, 30, 27, 0) 35%, rgba(28, 30, 27, 0) 55%, rgba(28, 30, 27, 0.75) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.panel.is-active::after {
  opacity: 1;
}
.panel__num {
  position: absolute;
  left: 20px;
  top: 28px;
  z-index: 2;
  transition: opacity 0.3s var(--ease);
}
.panel__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  width: clamp(320px, 31.25vw, 450px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.panel.is-active .panel__body {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}
.panel.is-active .panel__num {
  opacity: 0;
}
.panel__body .h3 {
  max-width: 10em;
}
.panel__body p {
  max-width: 24em;
}
.panel:not(.is-active):hover img {
  transform: scale(1.04);
}

/* Fleet preview */
.fleet-preview {
  padding-top: var(--section-y);
  padding-bottom: clamp(64px, 7vw, 100px);
  overflow: hidden;
}
.fleet-preview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
  margin-bottom: clamp(48px, 3.5vw, 56px);
}
.fleet-preview__head .tag {
  margin-bottom: 40px;
}
.fleet-preview__head .h2 {
  max-width: 20em;
  margin-bottom: 40px;
}
.fleet-preview__head p {
  max-width: 33em;
}

.cars {
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: 24px;
  /* Locked to the featured card's height so the page below never moves when cars swap */
  height: 525px;
  overflow-y: hidden;
}
@media (min-width: 901px) and (max-width: 1240px) {
  .cars {
    justify-content: flex-start;
    overflow-x: auto;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .cars::-webkit-scrollbar {
    display: none;
  }
  .car {
    flex-shrink: 0;
  }
}
.nowrap {
  white-space: nowrap;
}
.car {
  position: relative;
  flex: 0 0 330px;
  height: 386px;
  color: var(--ivory);
  transition: flex-basis 0.6s var(--ease), height 0.6s var(--ease);
}
.car__frame {
  position: absolute;
  inset: 0;
  background: var(--ivory-20);
}
.car__frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: inherit;
}
.car__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.car__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 30, 27, 0) 40%, rgba(28, 30, 27, 0.85) 100%);
}
.car__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px;
}
.car__desc {
  margin-top: 70px;
  max-width: 19.5em;
  font-size: 14px;
  opacity: 0.6;
}
.car__rule {
  height: 3px;
  background: var(--orange);
  margin-top: 28px;
}
.car__name {
  margin-top: 28px;
  max-width: 9em;
}
.car__chips {
  display: none;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--ivory-20);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}
.car__thumb {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 100px;
  height: 100px;
  --cut: 8px;
}
.car__cta {
  display: none;
  margin-top: 28px;
  align-self: flex-start;
}
.car__select {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
}
.car.is-active {
  flex-basis: 450px;
  height: 525px;
}
.car.is-active .car__frame {
  display: none;
}
.car.is-active .car__photo {
  --cut: 28px;
}
.car.is-active .car__photo {
  opacity: 1;
}
.car.is-active .car__inner {
  justify-content: flex-end;
}
.car.is-active .car__desc {
  order: 3;
  margin-top: 12px;
  opacity: 1;
  font-size: 14px;
}
.car.is-active .car__rule,
.car.is-active .car__thumb,
.car.is-active .car__select {
  display: none;
}
.car.is-active .car__chips {
  display: flex;
  order: 1;
}
.car.is-active .car__name {
  order: 2;
  margin-top: 0;
  max-width: none;
  font-size: clamp(22px, 1.67vw, 26px);
}
.car.is-active .car__cta {
  display: inline-flex;
  order: 4;
}
.car.is-active .tag {
  position: absolute;
  top: 28px;
  left: 28px;
}

/* Soft crossfade of the card content when cars swap.
   Two keyframe names so the animation restarts whenever a card changes state. */
.car.is-active .car__inner {
  animation: car-content-a 0.55s var(--ease) 0.2s both;
}
.car:not(.is-active) .car__inner {
  animation: car-content-b 0.45s var(--ease) 0.15s both;
}
.car:not(.is-active) .car__thumb {
  animation: car-content-b 0.45s var(--ease) 0.15s both;
}
@keyframes car-content-a {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes car-content-b {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cars-controls {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 64px;
}
.cars-progress {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--ivory-10);
}
/* Drag to scroll (mouse) when the row is wider than the screen */
.cars.is-draggable {
  cursor: grab;
}
.cars.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.cars.is-dragging * {
  pointer-events: none;
}
.cars-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--ivory);
  transition: width 0.6s var(--ease), left 0.6s var(--ease);
}
/* When the row scrolls, the bar follows the finger/mouse directly */
.cars-progress.is-scroll span {
  transition: none;
}

/* Contact prompt band */
.prompt {
  position: relative;
  min-height: clamp(420px, 38.5vw, 555px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon-2);
}
.prompt__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.prompt__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.prompt__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.prompt .tag {
  margin-bottom: 40px;
}
.prompt .h2 {
  max-width: 13em;
  margin-inline: auto;
}
.prompt .btn {
  margin-top: 64px;
}

/* =========================================================
   FOOTER (contact form on every page)
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--teal);
  color: var(--ivory);
  padding-top: var(--section-y);
}
.site-footer__mark {
  position: absolute;
  right: -2%;
  top: 0;
  height: 100%;
  width: auto;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px clamp(40px, 6vw, 120px);
  align-items: start;
}
.footer-top .h1 {
  max-width: 10em;
}
.footer-top__intro p {
  margin-top: 28px;
  max-width: 28em;
}
.footer-top__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
}
.footer-top__direct a {
  text-decoration: none;
}

/* Form */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.field {
  display: grid;
  gap: 10px;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.8;
}
.field label .opt {
  opacity: 0.6;
  text-transform: none;
  font-family: var(--f-body);
}
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(236, 236, 236, 0.4);
  border-radius: 0;
  background: transparent;
  padding: 6px 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: inherit;
  transition: border-color 0.2s var(--ease);
}
.field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
  color: currentColor;
  opacity: 0.4;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: currentColor;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-bottom-color: var(--orange);
  box-shadow: 0 1px 0 0 var(--orange);
}
.field.has-error input,
.field.has-error textarea {
  border-bottom-color: var(--orange);
}
.field__error {
  font-size: 13px;
  color: var(--ivory);
  display: none;
}
.field.has-error .field__error {
  display: block;
}
.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 4px;
}
.form__note {
  font-size: 13px;
  opacity: 0.7;
  max-width: 30em;
}
.form__note a {
  text-underline-offset: 3px;
}
.form__hp {
  position: absolute;
  left: -9999px;
}
.form__status {
  grid-column: 1 / -1;
  font-size: 15px;
  padding: 16px 18px;
  background: rgba(236, 236, 236, 0.12);
  display: none;
}
.form__status.is-visible {
  display: block;
}
.form.is-sending .btn {
  opacity: 0.6;
  pointer-events: none;
}

/* Light variant (contact page) */
.form--light .field input,
.form--light .field textarea {
  border-bottom-color: rgba(28, 30, 27, 0.3);
}
.form--light .form__status {
  background: rgba(28, 30, 27, 0.06);
}
.form--light .field__error {
  color: #c4290b;
}

.footer-bottom {
  margin-top: clamp(80px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.footer-col .tag {
  margin-bottom: 24px;
}
.footer-col ul {
  display: grid;
  gap: 12px;
}
.footer-col a {
  text-decoration: none;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 56px;
  padding-block: 24px 32px;
  border-top: 1px solid rgba(236, 236, 236, 0.15);
  font-size: 14px;
  font-weight: 400;
}
.footer-legal > * {
  opacity: 0.6;
}
.footer-legal a {
  text-decoration: none;
}
.footer-legal a:hover {
  text-decoration: underline;
}
.footer-legal__links {
  display: flex;
  gap: 32px;
}

/* =========================================================
   INNER PAGES: shared page head
   ========================================================= */
.page-head {
  padding-top: clamp(150px, 13vw, 200px);
  padding-bottom: clamp(56px, 5.6vw, 80px);
}
.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.page-head .tag {
  margin-bottom: 40px;
}
.page-head .lead {
  max-width: 28em;
}

/* ---------- SERVICES PAGE: sticky image + indexed list ---------- */
.svc-index__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.svc-index__media {
  position: sticky;
  top: 40px;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - 80px);
  width: 100%;
}
.svc-index__media img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.svc-index__media img.is-current {
  opacity: 1;
}
.svc-index__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  color: var(--ivory);
}
.svc-list {
  border-top: 1px solid var(--carbon-15);
}
.svc-item {
  border-bottom: 1px solid var(--carbon-15);
}
.svc-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  padding-block: 28px;
  text-align: left;
}
.svc-item__num {
  font-family: var(--f-mono);
  font-size: 12px;
}
.svc-item__plus {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
}
.svc-item__plus::before,
.svc-item__plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.svc-item__plus::after {
  transform: rotate(90deg);
}
.svc-item.is-open .svc-item__plus::after {
  transform: rotate(0deg);
}
.svc-item.is-open .svc-item__btn .h3 {
  color: var(--orange);
}
.svc-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.svc-item.is-open .svc-item__panel {
  grid-template-rows: 1fr;
}
.svc-item__panel > div {
  overflow: hidden;
}
.svc-item__content {
  padding: 0 40px 32px 80px;
  display: grid;
  gap: 18px;
}
.svc-item__content p {
  max-width: 34em;
}
.svc-item__for {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.svc-item__for .chip {
  background: var(--carbon-15);
}
.svc-item__img {
  display: none;
}

/* Corporate accounts block */
.corporate__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.corporate .tag {
  margin-bottom: 40px;
}
.corporate .h2 {
  margin-bottom: 32px;
}
.corporate p + p {
  margin-top: 16px;
}
.corporate .btn {
  margin-top: 40px;
}
.ticks {
  border-top: 1px solid var(--ivory-20);
}
.ticks li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--ivory-20);
}
.ticks li .tri {
  transform: translateY(-1px);
}
.ticks strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.ticks span.dim {
  display: block;
}

/* ---------- ABOUT PAGE ---------- */
.about-head {
  padding-top: clamp(150px, 13vw, 200px);
  background: linear-gradient(to bottom, var(--ivory) calc(100% - clamp(80px, 9vw, 160px)), var(--carbon) 0);
}
.about-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 6vw, 120px);
  align-items: end;
}
.about-head .tag {
  margin-bottom: 40px;
}
.about-head .display {
  max-width: 11em;
}
.about-head__copy p + p {
  margin-top: 16px;
}
.about-band {
  margin-top: clamp(56px, 6vw, 96px);
  aspect-ratio: 1440 / 620;
}
@media (max-width: 700px) {
  .about-band {
    aspect-ratio: 4 / 3;
  }
}
.details__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 40px clamp(40px, 6vw, 120px);
}
.details__intro {
  position: sticky;
  top: 40px;
  align-self: start;
}
.details__intro .tag {
  margin-bottom: 40px;
}
.details__intro .h2 {
  margin-bottom: 32px;
}
.details__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ivory-20);
}
.detail {
  padding: 36px 32px 44px 0;
  border-bottom: 1px solid var(--ivory-20);
}
.detail:nth-child(odd) {
  border-right: 1px solid var(--ivory-20);
}
.detail:nth-child(even) {
  padding-left: 32px;
  padding-right: 0;
}
.detail .tri {
  margin-bottom: 64px;
}
.detail__title {
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  max-width: 16em;
}
.details__close {
  grid-column: 1 / -1;
  padding-top: 36px;
  max-width: 40em;
}
.audiences__head {
  max-width: 900px;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.audiences__head .tag {
  margin-bottom: 40px;
}
.audiences__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.audience {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #e2e2e2;
}
.audience__media {
  aspect-ratio: 16 / 10;
}
.audience__body {
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  align-content: start;
  gap: 18px;
}
.audience__body ul {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.audience__body li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.audience__body li .tri {
  transform: translateY(-1px);
}

/* ---------- FLEET PAGE ---------- */
.vehicle {
  padding-block: clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--ivory-10);
}
.vehicle:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.vehicle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.vehicle--flip .vehicle__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}
.vehicle--flip .vehicle__media {
  order: 2;
}
.vehicle__media {
  aspect-ratio: 3 / 2;
}
.vehicle__index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.vehicle__index .tag:last-child {
  opacity: 0.6;
}
.vehicle .h2 {
  margin-bottom: 24px;
}
.vehicle__text {
  max-width: 28em;
}
.specs {
  margin-top: 36px;
  border-top: 1px solid var(--ivory-20);
}
.specs div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--ivory-20);
}
.specs dt {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 3px;
}
.vehicle .btn {
  margin-top: 36px;
}
.fleet-list {
  padding-bottom: var(--section-y);
}
.fleet-list .vehicle:first-of-type {
  padding-top: clamp(32px, 4vw, 64px);
}
.fleet-help {
  background: var(--ivory);
  color: var(--carbon);
}
.fleet-help__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.fleet-help p {
  max-width: 30em;
}
.fleet-help__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* ---------- CONTACT PAGE ---------- */
.contact-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  min-height: 100vh;
}
.contact-page__side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  padding: clamp(150px, 13vw, 200px) clamp(20px, 4vw, 64px) 48px var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.contact-page__side .tag {
  margin-bottom: 40px;
}
.contact-page__side .h1 {
  max-width: 8em;
  margin-bottom: 32px;
}
.contact-page__side .lead {
  max-width: 24em;
}
.contact-lines {
  display: grid;
  border-top: 1px solid var(--ivory-20);
}
.contact-lines > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--ivory-20);
}
.contact-lines dt {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 4px;
}
.contact-lines a {
  text-decoration: none;
}
.contact-page__main {
  padding: clamp(150px, 13vw, 200px) var(--gutter) 64px clamp(20px, 4vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.contact-page__main .form {
  max-width: 760px;
}
.next-steps {
  max-width: 760px;
  border-top: 1px solid var(--carbon-15);
}
.next-steps h2 {
  margin: 28px 0 24px;
}
.next-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.next-steps li {
  counter-increment: step;
  font-size: 15px;
}
.next-steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  margin-bottom: 12px;
  color: var(--orange);
}
.site-footer--mini {
  padding-top: clamp(56px, 5vw, 72px);
}
.site-footer--mini .footer-bottom {
  margin-top: 0;
}

/* ---------- Legal pages ---------- */
.legal {
  padding-top: clamp(150px, 13vw, 200px);
  padding-bottom: var(--section-y);
}
.legal .h2 {
  margin-bottom: 32px;
}
.legal__body {
  max-width: 44em;
}
.legal__body p + p {
  margin-top: 16px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .footer-bottom {
    grid-template-columns: repeat(3, auto);
  }
  .details__grid,
  .corporate__grid,
  .vehicle__grid,
  .vehicle--flip .vehicle__grid {
    grid-template-columns: 1fr;
  }
  .vehicle--flip .vehicle__media {
    order: 0;
  }
  .details__intro {
    position: static;
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "media"
      "sub"
      "scroll";
    row-gap: 32px;
  }
  .hero__copy {
    margin-right: 0;
  }
  .hero__sub {
    text-indent: 0;
  }
  .hero__scroll {
    justify-self: start;
  }

  .svc-preview__grid {
    grid-template-columns: 1fr;
  }
  .svc-preview__intro {
    min-height: 0;
  }
  .panels {
    margin-right: calc(var(--gutter) * -1);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .panels::-webkit-scrollbar {
    display: none;
  }
  .panel,
  .panel.is-active {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .panel::after {
    opacity: 1;
  }
  .panel .panel__body {
    width: 100%;
    opacity: 1;
    transform: none;
    padding: 24px;
  }
  .panel__num {
    display: none;
  }

  .fleet-preview__head {
    grid-template-columns: 1fr;
  }
  .fleet-preview__head .btn {
    justify-self: start;
  }
  .fleet-preview__head .h2 {
    margin-bottom: 24px;
  }
  .cars {
    justify-content: flex-start;
    align-items: stretch;
    scroll-behavior: smooth;
    height: auto;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .cars::-webkit-scrollbar {
    display: none;
  }
  .car,
  .car.is-active {
    flex: 0 0 84%;
    height: 480px;
    scroll-snap-align: start;
  }
  /* On mobile every car shows as the photo card */
  .car .car__frame,
  .car .car__rule,
  .car .car__thumb,
  .car .car__select {
    display: none;
  }
  .car .car__photo {
    opacity: 1;
  }
  .car .car__inner {
    justify-content: flex-end;
  }
  .car .car__chips {
    display: flex;
    order: 1;
  }
  .car .car__name {
    order: 2;
    margin-top: 0;
    max-width: none;
  }
  .car .car__desc {
    order: 3;
    margin-top: 12px;
    opacity: 1;
  }
  .car .car__cta {
    display: inline-flex;
    order: 4;
  }
  .car .tag {
    position: absolute;
    top: 24px;
    left: 24px;
  }
  .cars-controls {
    margin-top: 40px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .page-head__grid,
  .about-head__grid,
  .fleet-help__grid {
    grid-template-columns: 1fr;
  }

  .svc-index__grid {
    grid-template-columns: 1fr;
  }
  .svc-index__media {
    display: none;
  }
  .svc-item__img {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
  }
  .svc-item__content {
    padding: 0 0 28px;
  }
  .svc-item__btn {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
  }

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

  .contact-page {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .contact-page__main {
    padding: 64px var(--gutter);
  }
}

@media (max-width: 600px) {
  :root {
    --cut: 14px;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .details__list {
    grid-template-columns: 1fr;
  }
  .detail,
  .detail:nth-child(even) {
    padding: 28px 0 32px;
    border-right: 0;
  }
  .detail:nth-child(odd) {
    border-right: 0;
  }
  .detail .tri {
    margin-bottom: 32px;
  }
  .next-steps ol {
    grid-template-columns: 1fr;
  }
  .footer-legal {
    flex-direction: column;
  }
  .specs div,
  .contact-lines > div {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .site-menu__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Contact page header: light logo over the dark side, dark menu button over the ivory side */
.site-header--split .menu-toggle {
  background: var(--carbon-15);
  color: var(--carbon);
}
@media (max-width: 900px) {
  .site-header--split .menu-toggle {
    background: var(--ivory-10);
    color: var(--ivory);
  }
}

/* =========================================================
   Motion: scroll entrance + exit, and page transitions
   Uses keyframe animations and the individual translate/scale
   properties so they never clash with hover or layout transitions.
   ========================================================= */
:root {
  --rv-y: 44px;
  --rv-step: 90ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 900px) {
  :root {
    --rv-y: 26px;
    --rv-step: 60ms;
  }
}

.js [data-rv] {
  opacity: 0;
}
.js [data-rv].is-in {
  animation: rv-in 1s var(--ease-out) calc(var(--i, 0) * var(--rv-step)) both;
}
.js [data-rv].is-out {
  animation: rv-out 0.5s var(--ease) both;
}
.js [data-rv="fade"].is-in {
  animation-name: rv-fade-in;
  animation-duration: 0.9s;
}
.js [data-rv="fade"].is-out {
  animation-name: rv-fade-out;
}

@keyframes rv-in {
  from {
    opacity: 0;
    translate: 0 var(--rv-y);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes rv-out {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 calc(var(--rv-y) * 0.5 * var(--rv-exit, 1));
  }
}
@keyframes rv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rv-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Images: fade up, and the photo settles from a slight zoom */
.js [data-rv="media"].is-in img {
  animation: rv-img 1.6s var(--ease-out) calc(var(--i, 0) * var(--rv-step)) both;
}
@keyframes rv-img {
  from {
    scale: 1.14;
  }
  to {
    scale: 1;
  }
}

/* Page transition veil */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--carbon);
  translate: 0 100%;
  pointer-events: none;
}
.page-veil svg {
  width: 44px;
  height: auto;
  opacity: 0;
}
.veil-cover .page-veil {
  translate: 0 0;
}
.veil-cover .page-veil svg {
  opacity: 1;
}
.page-veil.is-leaving {
  animation: veil-up 0.8s var(--ease-out) 0.1s both;
}
.page-veil.is-leaving svg {
  animation: rv-fade-out 0.3s var(--ease) both;
}
.page-veil.is-entering {
  animation: veil-in 0.55s var(--ease) both;
}
.page-veil.is-entering svg {
  animation: rv-fade-in 0.3s var(--ease) 0.25s both;
}
@keyframes veil-in {
  from {
    translate: 0 100%;
  }
  to {
    translate: 0 0;
  }
}
@keyframes veil-up {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .car .car__inner,
  .car .car__thumb {
    animation: none !important;
  }
  .js [data-rv],
  .js [data-rv].is-in,
  .js [data-rv].is-out {
    opacity: 1;
    animation: none;
  }
  .js [data-rv] img {
    animation: none !important;
  }
  .page-veil {
    display: none;
  }
}
@media print {
  .js [data-rv] {
    opacity: 1 !important;
    animation: none !important;
  }
  .page-veil {
    display: none;
  }
}

/* Fleet on tablets: show about two cards at a time so it's clear the row scrolls */
@media (min-width: 601px) and (max-width: 900px) {
  .car,
  .car.is-active {
    flex: 0 0 46%;
    height: 460px;
  }
}

/* Fleet on desktop: Figma layout. The row bleeds off both edges and slides so the
   featured car always sits in the same spot (second slot from the left). */
@media (min-width: 1241px) {
  .cars {
    justify-content: flex-start;
    overflow: visible;
    transition: transform 0.7s var(--ease-out);
    will-change: transform;
  }
  .cars.is-draggable {
    cursor: grab;
  }
}
@media (min-width: 1241px) and (prefers-reduced-motion: reduce) {
  .cars {
    transition: none;
  }
}

/* =========================================================
   QA round (9 Oct): Figma alignment, services row, touch motion,
   small screens, tap targets
   ========================================================= */

/* Responsive <picture> wrappers shouldn't affect layout */
picture {
  display: contents;
}

/* Match Figma's text boxes: trim to cap height and baseline, so spacing
   between text blocks is measured the same way as in the design.
   (Chrome 133+, Safari 18.2+; other browsers just keep normal line boxes.) */
h1,
h2,
h3,
p:not(.tag),
.statement,
.lead {
  text-box: trim-both cap alphabetic;
}
/* Figma labels are 9px tall (the size of the orange marker). Block-level so
   they don't sit on a text line, which would add a few pixels above them. */
.tag {
  display: flex;
  width: fit-content;
  height: 9px;
  line-height: 9px;
}
.apart .tag,
.prompt .tag {
  margin-inline: auto;
}

@media (min-width: 901px) {
  /* Hero: photo at 1002 x 587 from x398, y95 (at 1440px) */
  .hero {
    padding-top: 95px;
    padding-bottom: 0;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 73.68%;
    column-gap: 0;
    row-gap: 36px;
    align-items: start;
  }
  .hero__copy {
    margin-top: min(13.4vw, 214px);
  }
  .hero__copy .btn {
    /* 64px below the trimmed headline, as in Figma */
    margin-top: 55px;
  }
  .hero__scroll {
    align-self: end;
    height: 20px;
  }
  .hero__sub {
    width: min(606px, 92vw);
    text-indent: 110px;
  }

  /* About statement */
  .apart {
    padding-top: 120px;
    padding-bottom: 148px;
  }
  .apart .tag {
    margin-bottom: 64px;
  }
  .logo-row {
    margin-top: 100px;
  }

  /* Services: text column 474px, panels start at x554 */
  .svc-preview {
    padding-top: 120px;
    padding-bottom: 117px;
  }
  .svc-preview__grid {
    grid-template-columns: minmax(0, 474fr) minmax(0, 846fr);
  }
  .svc-preview__intro .btn {
    margin-top: 80px;
  }
  .svc-preview__intro p {
    max-width: 364px;
  }

  /* Fleet header */
  .fleet-preview__head {
    margin-bottom: 48px;
  }
  .fleet-preview__head .tag,
  .fleet-preview__head .h2 {
    margin-bottom: 40px;
  }
}

/* ---------- Services row: reachable at every width (QA 4) ---------- */
.panels-wrap {
  min-width: 0;
}
.panels {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.panels::-webkit-scrollbar {
  display: none;
}
.panels.is-draggable {
  cursor: grab;
}
.panels.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.panels.is-dragging * {
  pointer-events: none;
}
.panels .panel {
  flex-shrink: 0;
}
.panels-progress {
  position: relative;
  height: 2px;
  margin-top: 32px;
  margin-right: 0;
  background: var(--carbon-15);
}
.panels-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: var(--carbon);
}
.panels-progress[hidden] {
  display: none;
}
@media (min-width: 901px) {
  /* bar sits inside the section's bottom spacing so the section height matches Figma */
  .svc-preview {
    padding-bottom: 83px;
  }
  .svc-preview__intro {
    padding-bottom: 34px;
  }
}

/* ---------- Fleet: readable text on light photos (QA 7) ---------- */
.car__photo::after {
  background: linear-gradient(
    180deg,
    rgba(28, 30, 27, 0.25) 0%,
    rgba(28, 30, 27, 0) 22%,
    rgba(28, 30, 27, 0.35) 48%,
    rgba(28, 30, 27, 0.92) 100%
  );
}

/* ---------- Services accordion heading wrapper (QA 10) ---------- */
.svc-item__heading {
  margin: 0;
  font: inherit;
  text-box: none;
}

/* ---------- Very small phones, under 375px (QA 11) ---------- */
@media (max-width: 374px) {
  .display {
    font-size: clamp(22px, 8.4vw, 30px);
  }
  .h2 {
    font-size: clamp(22px, 8vw, 30px);
  }
  .svc-item__btn {
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    gap: 10px;
  }
  .svc-item__btn .h3 {
    font-size: 17px;
  }
}
@media (max-width: 600px) {
  .svc-item__btn .h3 {
    font-size: clamp(17px, 5.2vw, 22px);
  }
}

/* ---------- Tap targets, at least 44px (QA 12) ---------- */
.menu-toggle {
  position: relative;
}
.menu-toggle::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.footer-col ul {
  gap: 0;
}
.footer-col li {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-col a {
  display: inline-block;
  padding-block: 11px;
}
.footer-legal a,
.form__note a,
.site-menu__contact a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
.hero__scroll {
  position: relative;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

/* ---------- Touch devices: calmer scroll reveals (QA 19) ---------- */
@media (hover: none) and (pointer: coarse) {
  :root {
    --rv-y: 12px;
    --rv-step: 40ms;
  }
  .js [data-rv].is-in {
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
  }
  .js [data-rv="media"].is-in img {
    animation: none;
  }
}

/* Text trimming removes the space around each paragraph, so give consecutive paragraphs more room */
p:not(.tag) + p:not(.tag) {
  margin-top: 24px;
}

/* ---------- Review mode (?review in the URL) ---------- */
.confirm-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 90;
}
.confirm-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffd400;
  color: #1c1e1b;
  border: 2px solid #1c1e1b;
  font: 600 12px/1 var(--f-mono);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.confirm-pin.is-flash,
.confirm-panel li.is-flash {
  animation: confirm-flash 1.2s ease 2;
}
@keyframes confirm-flash {
  50% {
    transform: scale(1.25);
    background: #ff3f1a;
    color: #fff;
  }
}
.confirm-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1c1e1b;
  border: 2px solid #1c1e1b;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  font: 400 13px/1.45 var(--f-body);
  letter-spacing: 0;
}
.confirm-panel__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #ffd400;
  font: 600 12px/1 var(--f-mono);
  text-transform: uppercase;
  text-align: left;
}
.confirm-panel ol {
  overflow-y: auto;
  padding: 6px 0;
}
.confirm-panel li {
  padding: 8px 14px;
  border-bottom: 1px solid #eee;
}
.confirm-panel li b {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  margin-right: 6px;
  background: #ffd400;
  border-radius: 10px;
  font: 600 11px/1 var(--f-mono);
}
.confirm-panel li.is-here {
  cursor: pointer;
}
.confirm-panel li.is-here:hover {
  background: #fff8cc;
}
.confirm-panel li em {
  color: #777;
}
.confirm-panel.is-collapsed ol {
  display: none;
}
@media print {
  .confirm-layer,
  .confirm-panel {
    display: none !important;
  }
}

/* ---------- Responsive polish (all pages, all devices) ---------- */
.detail__title {
  margin-bottom: 14px;
}
.ticks strong {
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  /* Headings use the full width on phones and tablets, instead of a narrow desktop measure */
  .about-head .display,
  .page-head .display,
  .contact-page__side .h1,
  .footer-top .h1 {
    max-width: none;
  }
  .svc-preview__intro .h2,
  .fleet-preview__head .h2 {
    margin-bottom: 28px;
  }
  .fleet-preview__head .tag,
  .svc-preview__intro .tag {
    margin-bottom: 32px;
  }
}
/* Phones in landscape: short screens, keep the big headings in proportion */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  .display {
    font-size: clamp(30px, 5.2vw, 44px);
  }
  .h1 {
    font-size: clamp(28px, 4.8vw, 40px);
  }
  .page-head,
  .about-head,
  .legal {
    padding-top: 110px;
  }
  .contact-page__side,
  .contact-page__main {
    padding-top: 110px;
  }
}

/* Footer on phones: Main + Socials side by side, Contact full width below (the email needs the room) */
@media (max-width: 600px) {
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom .footer-col:nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Browser autofill: keep the design's transparent fields instead of Chrome's light blue box */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  caret-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.form--light .field input:-webkit-autofill,
.form--light .field input:-webkit-autofill:hover,
.form--light .field input:-webkit-autofill:focus,
.form--light .field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--carbon);
  caret-color: var(--carbon);
}

/* ---------- Final check (9 Oct) ---------- */
/* Open service title: deeper orange for text on ivory, passes contrast at any size (4.8:1) */
.svc-item.is-open .svc-item__btn .h3 {
  color: #c02c0d;
}
/* "(optional)" label readable on both form backgrounds */
.field label .opt {
  opacity: 0.85;
}
/* iPhone: full-height areas use the small viewport height so they don't jump when the address bar moves */
.contact-page {
  min-height: 100vh;
  min-height: 100svh;
}
@media (max-width: 900px) {
  .contact-page {
    min-height: 0;
  }
}
.svc-index__media {
  max-height: calc(100vh - 80px);
  max-height: calc(100svh - 80px);
}

/* ---------- Smoother scrolling (video review, 9 Oct) ----------
   Gentler reveal on every device: content drifts 20px (12px on touch) over 0.7s,
   reveals once, and photos fade in without the zoom (the zoom on large photos
   was expensive to draw while scrolling and could drop frames). */
:root {
  --rv-y: 20px;
}
.js [data-rv].is-in {
  animation-duration: 0.7s;
}
.js [data-rv="media"].is-in img {
  animation: none;
}
@media (hover: none) and (pointer: coarse) {
  :root {
    --rv-y: 12px;
  }
  .js [data-rv].is-in {
    animation-duration: 0.4s;
  }
}

/* ---------- QA re-test (second pass) ---------- */
/* N1: hide the service card numbers on phones and tablets. The later ".tag { display: flex }"
   rule was overriding the original hide rule, so this one is more specific. */
@media (max-width: 900px) {
  .panels .panel .panel__num {
    display: none;
  }
}
/* N4: Contact page details list links get a 44px tap area (looks unchanged) */
.contact-lines a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}
/* N5: 320px phones, keep long service titles clear of the card's notched corner */
@media (max-width: 374px) {
  .panel .panel__body .h3 {
    font-size: 19px;
    padding-right: 10px;
  }
}
/* Footer legal line: room for the registered office on small screens */
.footer-legal p {
  max-width: 62em;
}

/* ---------- Legal pages: readable long-form text ---------- */
.legal__body {
  max-width: 44em;
}
.legal__body h2 {
  margin: 48px 0 16px;
  font-family: var(--f-body);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.legal__body p {
  line-height: 1.6;
}
.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul {
  margin-top: 16px;
}
.legal__body ul {
  display: grid;
  gap: 10px;
  padding-left: 0;
}
.legal__body li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
}
.legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.legal__body a {
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal__body a[href^="mailto"],
.legal__body a[href^="tel"],
.legal__body a[href^="/"],
.legal__body a[target] {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
}
.legal__updated {
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.78;
}

/* ---------- Static navigation on laptops and desktops (1025px+) ----------
   Phones and tablets keep the Menu button and full-screen menu. */
.site-nav {
  display: none;
}
@media (min-width: 1025px) {
  .site-header .menu-toggle {
    display: none;
  }
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.6vw, 40px);
  }
  .site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.2vw, 36px);
  }
  .site-nav ul a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 12px;
    color: var(--ivory);
    font-family: var(--f-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
  }
  /* underline grows on hover */
  .site-nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .site-nav ul a:hover::after,
  .site-nav ul a:focus-visible::after {
    transform: scaleX(1);
  }
  /* current page: orange marker, as used on the design's labels */
  .site-nav ul a[aria-current="page"]::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--orange);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  .site-nav__cta.btn {
    min-height: 34px;
    padding: 0 20px;
  }
  .site-nav__cta.btn:hover {
    padding-right: 24px;
  }
  /* dark text where the header sits on a light background */
  .site-header--light .site-nav ul a,
  .site-header--split .site-nav ul a {
    color: var(--carbon);
  }
}
/* joins the header's load animation (same timing as the Menu button) */
@media (prefers-reduced-motion: no-preference) {
  .js .site-header .site-nav {
    opacity: 0;
  }
  .js.hero-go .site-header .site-nav {
    animation: hero-down 0.9s var(--ease-out) 0.15s both;
  }
}

/* A-Class studio photo: frame the front three-quarters in the tall Home cards,
   and a slightly darker top so the small number label reads on the light background */
.car[data-car="a"] .car__photo img,
.car[data-car="a"] .car__thumb img,
.car[data-car="s"] .car__photo img,
.car[data-car="s"] .car__thumb img,
.car[data-car="ev"] .car__photo img,
.car[data-car="ev"] .car__thumb img {
  object-position: 74% 55%;
}
.car[data-car="a"] .car__photo::after,
.car[data-car="s"] .car__photo::after,
.car[data-car="ev"] .car__photo::after {
  background: linear-gradient(
    180deg,
    rgba(28, 30, 27, 0.55) 0%,
    rgba(28, 30, 27, 0) 20%,
    rgba(28, 30, 27, 0.3) 46%,
    rgba(28, 30, 27, 0.92) 100%
  );
}

/* ---------- Button hover without moving anything around it ----------
   The hover still stretches the button, but a matching negative margin keeps its
   footprint the same, so nav links and neighbouring items stay exactly where they are. */
.btn {
  transition: background-color 0.25s var(--ease), padding 0.3s var(--ease), margin 0.3s var(--ease);
}
.btn:hover {
  padding-right: 34px;
  margin-right: -6px;
}
@media (min-width: 1025px) {
  .site-nav__cta.btn:hover {
    padding-right: 24px;
    margin-right: -4px;
  }
}

/* Organic fleet photos: frame the front three-quarters of each car in the tall Home cards */
.car[data-car="a"] .car__photo img,
.car[data-car="a"] .car__thumb img {
  object-position: 82% 72%;
}
.car[data-car="ev"] .car__photo img,
.car[data-car="ev"] .car__thumb img {
  object-position: 80% 60%;
}
.car[data-car="s"] .car__photo img,
.car[data-car="s"] .car__thumb img {
  object-position: 70% 60%;
}

/* A-Class Home card: the car sits low in this photo, so zoom in on the front */
.car[data-car="a"] .car__photo img {
  transform: scale(1.45);
  transform-origin: 84% 88%;
}

/* ---------- Type size bump (client request) ----------
   Desktop menu links 14px; every button on every page 13px. */
.btn,
.menu-toggle {
  font-size: 13px;
}
@media (min-width: 1025px) {
  .site-nav ul a {
    font-size: 14px;
  }
}

/* ---------- Larger button and menu text ----------
   Buttons and the Menu button: 14px, or 13px on phones up to 480px wide.
   Desktop menu links: 14px. Applies to every button on every page. */
.btn,
.menu-toggle {
  font-size: 14px;
}
@media (max-width: 480px) {
  .btn,
  .menu-toggle {
    font-size: 13px;
  }
}
@media (min-width: 1025px) {
  .site-nav ul a {
    font-size: 14px;
  }
}