/* ============================================================
   EZ FINISH AUTO · mobile detailing
   Black cinematic hero, light grey body with dark type.
   One variable family, four voices:
     condensed 800 display · wide 800 wordmark
     tracked 600 labels · 480 body
   Bricolage Grotesque: width, weight and optical size axes,
   so display type tightens and text type opens automatically.
   Electric blue accent, sharp geometry, poster-faithful.
   ============================================================ */

@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: block;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dmsans-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: block;
}

:root {
  --bg-dark: #050609;
  --light: #f2f4f8;
  --light-dim: #b9becb;
  /* the accent system: chrome silver on dark, graphite on light.
     No blue anywhere */
  --blue: #c7cdd6;
  --blue-deep: #dfe3e9;
  --blue-text: #5d5e64;
  --grey-1: #f5f5f7;
  --grey-2: #f5f5f7;
  --grey-3: #d9dde5;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --line-l: #e7e7ec;
  --ink: #0b0e17;
  --ink-dim: #4b5163;
  --ink-soft: #737a8d;
  --card: #ffffff;
  --hairline-l: rgba(11, 14, 23, 0.14);
  --hairline-d: rgba(242, 244, 248, 0.16);
  --sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-x: clamp(20px, 5vw, 92px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* the hidden attribute always wins, even over display: flex/grid */
[hidden] { display: none !important; }

html { background: #050609; scroll-behavior: auto; }

/* the footer card: how far it travels, and how round its top edge is */
:root {
  --fs-lift: clamp(26px, 4.4vw, 74px);
  --fs-radius: clamp(14px, 2vw, 30px);
}

body {
  background: var(--bg-dark);
  color: var(--light);
  font-family: var(--sans);
  font-weight: 480;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
}
body.ready { opacity: 1; }

::selection { background: var(--blue); color: #ffffff; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.label {
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  transition: background 0.4s var(--ease-out);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(3, 4, 8, 0.72), rgba(3, 4, 8, 0.28) 55%, transparent);
  transition: opacity 0.4s var(--ease-out);
}
.nav.on-light::before { opacity: 0; }
/* the mark leads the wordmark. Both are drawn in currentColor, so
   the lockup is white over the dark film and turns black the moment
   the nav crosses onto paper - one logo, either ground. */
.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  min-height: 44px;
  padding: 4px 2px;
  color: var(--light);
  transition: color 0.35s var(--ease-out);
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.logo-mark {
  display: block;
  width: clamp(38px, 3vw, 46px);
  height: auto;
  flex: none;
  color: inherit;
}
.brand-main {
  font-weight: 800;
  font-stretch: 100%;
  font-size: 20px;
  letter-spacing: 0.105em;
  color: var(--light);
  transition: color 0.35s var(--ease-out);
}
.brand-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--light-dim);
  transition: color 0.35s var(--ease-out);
}
.nav-book {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #ffffff;
  background: var(--blue);
  padding: 0 24px;
  transition: background 0.3s var(--ease-out);
}
.nav-book:hover { background: var(--blue-deep); }
.nav-book .nb-short { display: none; }

.nav.on-light {
  background: rgba(238, 240, 243, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav.on-light .brand { color: var(--ink); }
.nav.on-light .brand-main { color: var(--ink); }
.nav.on-light .brand-tag { color: var(--ink-dim); }

/* ---------- hero · sequence stage ---------- */

.seq {
  position: relative;
  height: 100svh;
  min-height: min(560px, 100svh);
  overflow: hidden;
  background: var(--bg-dark);
}
#wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#wash.fit {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.seq-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, rgba(3, 4, 8, 0.6), transparent 16%),
    linear-gradient(to left, rgba(3, 4, 8, 0.5), transparent 36%),
    linear-gradient(to top, rgba(3, 4, 8, 0.82) 6%, rgba(3, 4, 8, 0.5) 24%, transparent 46%);
}

.ov { position: absolute; inset: 0; pointer-events: none; }

/* ---------- hero title frames ----------
   Three full title cards ride the wash. Each is one editorial
   composition: rule + eyebrow + full-width display headline,
   a baseline row of copy and call to action, then a hairline
   credit strip. Frames alternate left / right like cut scenes.
------------------------------------------------------------ */
.frame {
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(88px, 10vh, 118px);
}
.frame-inner { width: 100%; }
.frame-r .f-head { text-align: right; }
.frame-r .f-rule { margin-left: auto; }
/* the right-hand frame keeps its lead and button under its own
   headline: copy hangs from the same right edge, not the far side */
.frame-r .f-side { justify-items: end; text-align: right; }

.f-rule {
  display: block;
  width: clamp(58px, 7vw, 118px);
  height: 3px;
  margin-bottom: clamp(12px, 1.8vh, 20px);
  background: var(--blue);
  transform-origin: left center;
  will-change: transform;
}
.frame-r .f-rule { transform-origin: right center; }
.f-title {
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(43px, 7.1vw, 138px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--light);
  text-shadow: 0 3px 34px rgba(3, 4, 8, 0.55);
}
.f-title em { font-style: normal; color: var(--blue); }
.f-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.f-line { display: inline-block; will-change: transform; }

.f-side { display: grid; justify-items: start; gap: clamp(18px, 2.6vh, 28px); }
.f-lead {
  max-width: 22ch;
  font-size: clamp(19px, 1.75vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--light);
  text-shadow: 0 2px 4px rgba(3, 4, 8, 1), 0 3px 18px rgba(3, 4, 8, 0.95),
    0 6px 40px rgba(3, 4, 8, 0.9);
}
.f-price {
  font-size: clamp(15.5px, 1.32vw, 22px);
  font-weight: 800;
  font-stretch: 95%;
  letter-spacing: 0.04em;
  color: #a8bcff;
  text-shadow: 0 2px 4px rgba(3, 4, 8, 1), 0 3px 18px rgba(3, 4, 8, 0.95);
}
.f-cta { pointer-events: auto; padding: 20px 30px; }
.f-cta .cta-label { font-size: 15px; letter-spacing: 0.15em; }
.f-cta svg { width: 21px; height: 21px; }

/* CTA block */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  background: var(--blue);
  color: #ffffff;
  transition: background 0.3s var(--ease-out);
  will-change: transform;
}
.cta-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
.cta svg { width: 19px; height: 19px; transition: transform 0.4s var(--ease-out); }
.cta:hover { background: var(--blue-deep); }
.cta:hover svg { transform: translateX(4px); }

/* progress */
.seq-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(242, 244, 248, 0.1);
}
.seq-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================================================
   LIGHT BODY
   ============================================================ */

.zone-light {
  position: relative;
  z-index: 10;
  background: var(--grey-1);
  color: var(--ink);
  padding: clamp(76px, 12vh, 148px) var(--pad-x);
}
.sec-eyebrow {
  font-size: clamp(10px, 0.92vw, 12px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-text);
  max-width: 46ch;
  line-height: 1.7;
}
.lede { font-weight: 600; color: var(--ink); }

.t-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.t-line { display: inline-block; will-change: transform; }

/* ---------- packages: dark glass over living water light ----------
   A truck interior sits behind the whole section, tinted down so the
   glass cards refract a real photograph while every line of type keeps
   its contrast. Same master image at three sizes, so no device pulls
   more pixels than its screen can show.
------------------------------------------------------------ */

.services {
  position: relative;
  overflow: hidden;
  background-color: #070a12;
  background-image:
    linear-gradient(180deg, rgba(6, 9, 16, 0.9) 0%, rgba(6, 9, 16, 0.82) 42%, rgba(6, 9, 16, 0.93) 100%),
    url("../assets/pricing-bg-2400.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--light);
  padding: clamp(80px, 13vh, 150px) var(--pad-x) clamp(90px, 13vh, 150px);
}
@media (min-width: 761px) {
  .services {
    background-image:
      linear-gradient(180deg, rgba(6, 9, 16, 0.9) 0%, rgba(6, 9, 16, 0.82) 42%, rgba(6, 9, 16, 0.93) 100%),
      url("../assets/pricing-bg-3840.webp");
  }
}
@media (min-width: 1601px) {
  .services {
    background-image:
      linear-gradient(180deg, rgba(6, 9, 16, 0.9) 0%, rgba(6, 9, 16, 0.82) 42%, rgba(6, 9, 16, 0.93) 100%),
      url("../assets/pricing-bg.webp");
  }
}
.services::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(7, 10, 18, 0.9) 100%);
}
.services-head,
.cards { position: relative; z-index: 2; }

.services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6.5vh, 76px);
}
.services-title {
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(61px, 10.3vw, 189px);
  line-height: 0.85;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--light);
}
.services-title em { font-style: normal; color: var(--blue); }
.services-sub {
  font-size: clamp(10.5px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7d99ff;
  padding-bottom: 0.6em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  perspective: 1400px;
}
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 55%, rgba(125, 153, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 34px 70px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.card:hover {
  border-color: rgba(125, 153, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(47, 84, 255, 0.18);
}
.card-inner {
  padding: clamp(28px, 2.8vw, 44px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-name {
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(38px, 3.2vw, 58px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--light);
}
/* the vehicle plate bleeds to the card edges and melts into the glass */
.card-shot {
  margin: 20px calc(-1 * clamp(28px, 2.8vw, 44px)) 4px;
  overflow: hidden;
}
.card-shot img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease-out);
  filter: saturate(0.9);
}
.card:hover .card-shot img { transform: scale(1.06); filter: saturate(1.05); }

/* the package contents read as a spec sheet: hairline rows */
.card-list { margin-top: 6px; flex: 1; }
.card-list li {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--light-dim);
  padding: 11px 0;
  border-top: 1px solid rgba(242, 244, 248, 0.1);
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card:hover .card-list li { color: var(--light); transform: translateX(4px); }
.card-price {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price {
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(56px, 4.6vw, 85px);
  line-height: 0.9;
  letter-spacing: -0.012em;
  background: linear-gradient(115deg, #7d99ff, #dfe7ff 60%, #7d99ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--light-dim);
}

/* ---------- booking ---------- */

.book {
  background: var(--grey-2);
  padding: clamp(80px, 13vh, 150px) var(--pad-x);
}
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
}

/* the service area, drawn as a living map */
.map-panel {
  background: var(--ink);
  border: 1px solid rgba(11, 14, 23, 0.3);
  padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) 0;
  box-shadow: 0 30px 80px rgba(11, 14, 23, 0.18);
}
.map-slot {
  position: relative;
  aspect-ratio: 1000 / 620;
  background: #0e1524;
  overflow: hidden;
}
.map-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(5, 8, 16, 0.75);
}
.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  filter: invert(0.9) hue-rotate(182deg) saturate(0.78) brightness(1.04) contrast(0.92);
}
.map-live .map-embed { opacity: 1; }

.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47, 84, 255, 0.16), transparent 62%),
    #0e1524;
  transition: opacity 0.5s var(--ease-out);
}
.map-live .map-fallback { opacity: 0; pointer-events: none; }
.mf-rule { width: 54px; height: 3px; background: var(--blue); }
.mf-title {
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(26px, 2.9vw, 46px);
  letter-spacing: 0;
  color: var(--light);
}
.mf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--light-dim);
  box-shadow: inset 0 -1px 0 rgba(242, 244, 248, 0.28);
  pointer-events: auto;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mf-link:hover { color: #7d99ff; border-color: #7d99ff; }
.map-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(4px, 0.6vw, 8px) 18px;
  border-top: 1px solid rgba(242, 244, 248, 0.12);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-dim);
}
.map-bar svg { width: 16px; height: 16px; color: var(--blue); flex: none; }

.book-title {
  margin-top: 18px;
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(57px, 8.3vw, 152px);
  line-height: 0.85;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--ink);
}
.book-title em { font-style: normal; color: var(--blue-text); }
.book-city {
  margin-top: clamp(20px, 3vh, 30px);
  font-weight: 800;
  font-stretch: 96%;
  font-size: clamp(18.5px, 1.75vw, 26px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.book-area {
  margin-top: 12px;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.socials { margin-top: clamp(28px, 4.6vh, 46px); display: flex; flex-wrap: wrap; gap: 12px; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  background: var(--ink);
  color: var(--light);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 0.3s var(--ease-out);
}
.social svg { width: 18px; height: 18px; }
.social:hover { background: var(--blue); color: #ffffff; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr; gap: 32px; }
  .book-col .cta { margin-top: 26px; }
}

@media (max-width: 760px) {
  .nav { height: 70px; }
  .nav-book .nb-full { display: none; }
  .nav-book .nb-short { display: inline; }
  .nav-book { padding: 12px 18px; }
  .brand-main { font-size: 16.5px; }

  /* frames stack: title first, one big line under, car below */
  .frame { align-items: flex-start; padding: 12vh var(--pad-x) 0; }
  .frame-inner { grid-template-columns: 1fr; gap: 20px; }
  .frame-r .f-head { order: 1; text-align: left; justify-items: start; }
  .frame-r .f-side { order: 2; justify-items: start; text-align: left; }
  .frame-r .f-rule { margin-left: 0; transform-origin: left center; }
  .f-rule { width: 54px; margin-bottom: 13px; }
  .f-title { font-size: clamp(34px, 10.2vw, 68px); }
  .f-side { gap: 18px; }
  .f-lead { max-width: 24ch; font-size: clamp(18px, 5.1vw, 23px); line-height: 1.32; }
  .f-price { font-size: clamp(15px, 4.1vw, 18.5px); }
  .f-cta { padding: 17px 24px; }
  .f-cta .cta-label { font-size: 13px; letter-spacing: 0.13em; }

  .services-head { flex-direction: column; align-items: flex-start; }
  .services-sub { padding-bottom: 0; }
  .book-grid { grid-template-columns: 1fr; gap: 34px; }
  .book-title { font-size: clamp(62px, 19.4vw, 128px); }
  .book-city { font-size: 17.5px; letter-spacing: 0.04em; }
  .map-bar { font-size: 8.5px; letter-spacing: 0.1em; }
  .gta-label { font-size: 34px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-mark { font-size: 15.7vw; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .pstage { height: auto; min-height: 0; }
  .pslide { position: static; }
  .pslide + .pslide { margin-top: clamp(48px, 8vh, 84px); }
  .pname, .pinfo { position: static; }
  .pshot { position: static; width: min(92vw, 700px); margin: 18px auto; }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  body { opacity: 1; }

  /* no pinning here, so the three cards read as a stacked sequence
     under one still of the finished car */
  .seq { height: auto; min-height: 0; }
  #wash { position: relative; inset: auto; height: 52svh; min-height: 260px; }
  .seq-scrim, .seq-progress { display: none; }
  .frame {
    position: relative;
    inset: auto;
    align-items: flex-start;
    padding: clamp(34px, 6vh, 60px) var(--pad-x);
  }
  .frame + .frame { border-top: 1px solid var(--hairline-d); }
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */

/* ---------- booking ---------- */

.book-body {
  margin-top: clamp(22px, 3.4vh, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
}
.book-body p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--ink-dim);
}
.book-col .cta { margin-top: clamp(26px, 4vh, 40px); }
.cta-ink { background: var(--ink); }
.cta-ink:hover { background: var(--blue); }

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 10;
  color: var(--light);
  background-color: var(--bg-dark);
  /* one photo, three sizes: each viewport gets the smallest file that is
     pixel-identical at its display size (same 8K master, downscaled) */
  background-image:
    linear-gradient(180deg, rgba(5, 6, 9, 0.86) 0%, rgba(5, 6, 9, 0.7) 45%, rgba(5, 6, 9, 0.9) 100%),
    url("../assets/footer-bg-2400.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(60px, 9vh, 100px) var(--pad-x) 0;
  overflow: hidden;
  /* the card sits a travel's depth inside the section above and is
     held back down at the seam until the last screen of scroll */
  margin-top: calc(var(--fs-lift) * -1);
  border-radius: var(--fs-radius) var(--fs-radius) 0 0;
  box-shadow: 0 -22px 60px -24px rgba(0, 0, 0, 0.72);
  transform: translate3d(0, var(--fs-lift), 0);
  backface-visibility: hidden;
}
/* the card's own lit edge, so the seam reads as a layer, not a cut */
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 244, 248, 0), rgba(242, 244, 248, 0.16) 22%, rgba(242, 244, 248, 0.16) 78%, rgba(242, 244, 248, 0));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .footer { transform: none; }
}
@media (min-width: 761px) {
  .footer {
    background-image:
      linear-gradient(180deg, rgba(5, 6, 9, 0.86) 0%, rgba(5, 6, 9, 0.7) 45%, rgba(5, 6, 9, 0.9) 100%),
      url("../assets/footer-bg-3840.webp");
  }
}
@media (min-width: 1601px) {
  .footer {
    background-image:
      linear-gradient(180deg, rgba(5, 6, 9, 0.86) 0%, rgba(5, 6, 9, 0.7) 45%, rgba(5, 6, 9, 0.9) 100%),
      url("../assets/footer-bg.webp");
  }
}
.footer-top { padding-left: 0; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
  padding-bottom: clamp(36px, 6vh, 64px);
}
.footer-name {
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(22px, 2vw, 31px);
  letter-spacing: 0.05em;
  color: var(--light);
}
.footer-tag {
  margin-top: 10px;
  font-size: clamp(10px, 0.9vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--light-dim);
}
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-self: end;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--light);
  box-shadow: none;
  transition: color 0.3s var(--ease-out);
}
.footer-socials a svg { width: 19px; height: 19px; color: var(--blue); flex: none; }
.footer-socials a:hover { color: var(--blue); }
.footer-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  color: var(--light);
}
.footer-logo { width: clamp(76px, 8.6vw, 138px); }
.footer-mark {
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(82px, 16.1vw, 303px);
  line-height: 0.78;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--light);
  white-space: nowrap;
  text-align: center;
  transform: translateY(0.16em);
}

/* ---------- floating text button ----------
   The iPhone Messages mark, so it reads as "text us" with no label.
   The one rounded shape on the page: it is a recognised app icon,
   not site furniture, so it keeps its own geometry.
------------------------------------------------------------ */

.sms {
  position: fixed;
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 23%;
  background: linear-gradient(180deg, #5bf675 0%, #0bbf2c 100%);
  box-shadow: 0 12px 30px rgba(8, 132, 38, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: transform 0.4s var(--ease-out), filter 0.3s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.sms-ico { width: 34px; height: 34px; fill: #ffffff; }
.sms:hover {
  filter: brightness(1.06);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(8, 132, 38, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sms:active { transform: translateY(-1px) scale(0.98); }
/* a single quiet pulse ring so it is noticed without nagging */
.sms::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #3ce35e;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sms::before { animation: smsPulse 4.5s ease-out 2.5s infinite; }
}
@keyframes smsPulse {
  0% { transform: scale(1); opacity: 0.55; }
  55% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- responsive: content sections ---------- */

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-socials { justify-self: start; }
}

@media (max-width: 760px) {
  .zone-light { padding: clamp(60px, 9vh, 92px) var(--pad-x); }
  .sec-eyebrow { font-size: 10px; letter-spacing: 0.2em; }

  .hero-eyebrow { font-size: 9px; letter-spacing: 0.24em; margin-bottom: 10px; }
  .final-strip { font-size: 9px; letter-spacing: 0.2em; }


  .book-title { font-size: clamp(34px, 9.7vw, 63px); }
  .book-body p { font-size: 15px; }


  .footer { padding: clamp(48px, 7vh, 72px) var(--pad-x) 0; }
  .footer-name { font-size: 21px; }
  .footer-socials a { font-size: 13px; }
  .footer-mark { font-size: 15.7vw; }

  .sms { width: 48px; height: 48px; }
  .sms-ico { width: 31px; height: 31px; }
}

/* portrait tablets: the cards hold the top of the frame and the
   car gets the lower half to itself */
@media (min-width: 761px) and (orientation: portrait) {
  .frame { align-items: flex-start; padding: max(15vh, 128px) var(--pad-x) 0; }
  .frame-r .f-head { text-align: left; }
  .frame-r .f-rule { margin-left: 0; transform-origin: left center; }
  .frame-r .f-side { justify-items: start; text-align: left; }
  .f-title { font-size: clamp(56px, 9.8vw, 110px); }
}

/* small phones: tighten spacing, never the type */
@media (max-width: 360px), (max-height: 600px) and (max-width: 760px) {
  .frame { padding-top: 10vh; }
  .f-title { font-size: clamp(31px, 9.6vw, 54px); }
  .f-rule { width: 44px; margin-bottom: 10px; }
  .frame-inner { gap: 15px; }
  .f-side { gap: 14px; }
  .f-lead { font-size: 17px; max-width: 26ch; }
  .f-price { font-size: 13.5px; }
  .f-cta { padding: 15px 20px; }
  .f-cta .cta-label { font-size: 12px; letter-spacing: 0.11em; }
}

/* very small phones: trim the mark, keep it a comfortable tap target */
@media (max-width: 380px) {
  .sms { width: 46px; height: 46px; }
  .sms-ico { width: 30px; height: 30px; }
  .brand-tag { display: none; }   /* the wordmark carries it at this width */
  .brand { min-height: 44px; }
}

/* short landscape wide enough to miss the phone blocks: the film leads,
   so the headline is capped by height and stays clear of the wordmark */
@media (max-height: 520px) and (min-width: 761px) {
  .f-title { font-size: min(7.1vw, 13vh); }
}

/* short landscape: keep the button clear of the content */
@media (max-height: 480px) {
  .sms { width: 44px; height: 44px; }
  .sms-ico { width: 28px; height: 28px; }
}

/* ============================================================
   SITE CHROME · skip link + footer navigation
   ============================================================ */

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  transform: translateY(-260%);
}
.skip:focus-visible {
  transform: none;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(22px, 3vw, 44px);
  padding: 6px 0 clamp(22px, 3.5vh, 34px);
  border-top: 1px solid var(--hairline-d);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light-dim);
  transition: color 0.3s var(--ease-out);
}
.footer-nav a:hover,
.footer-nav a[aria-current="page"] { color: var(--light); }

/* ============================================================
   SUBPAGES · contact + 404 share the dark shell
   ============================================================ */

html.sub { scroll-behavior: smooth; }
body.sub { opacity: 1; }

.page {
  min-height: 60svh;
  padding: calc(84px + clamp(48px, 9vh, 110px)) var(--pad-x) clamp(70px, 10vh, 130px);
  background: var(--bg-dark);
}
.page-eyebrow {
  font-size: clamp(10px, 0.92vw, 12px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #7d99ff;
}
.page-title {
  margin-top: 18px;
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(46px, 8.6vw, 158px);
  line-height: 0.87;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--light);
}
.page-title em { font-style: normal; color: var(--blue); }
.page-title span { display: block; }
.page-lead {
  margin-top: clamp(20px, 3vh, 30px);
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--light-dim);
}

/* subpage entrance: a quiet rise, killed for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .sub .rise-in {
    opacity: 0;
    transform: translateY(26px);
    animation: subRise 0.9s var(--ease-out) forwards;
  }
  .sub .rise-in:nth-child(2) { animation-delay: 0.08s; }
  .sub .rise-in:nth-child(3) { animation-delay: 0.16s; }
  @keyframes subRise { to { opacity: 1; transform: none; } }
}

/* ---------- contact methods ---------- */

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(44px, 7vh, 84px);
}
.method {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 178px;
  padding: clamp(20px, 2vw, 30px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 60%);
  border: 1px solid var(--hairline-d);
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
a.method:hover {
  border-color: rgba(125, 153, 255, 0.55);
  transform: translateY(-4px);
}
.m-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--light-dim);
}
.m-v {
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--light);
  overflow-wrap: anywhere;
}
.m-a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #7d99ff;
}
.m-a svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
a.method:hover .m-a svg { transform: translateX(4px); }
.method-area .m-v { color: var(--light); }

/* ---------- booking request form ---------- */

/* ---------- contact: split hero ----------
   The detailed truck interior holds the left of the screen edge to
   edge and rides along while the booking panel scrolls: photo one
   side, composition the other, in the site's own sharp geometry.
   Same master photo at three sizes so no device over-downloads.
------------------------------------------------------------ */

.cpage { padding: 0 0 clamp(70px, 10vh, 130px); }
.cpage .contact-methods,
.cpage .page-strip { padding-inline: var(--pad-x); }

.chero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--bg-dark);
}
.chero-media {
  position: sticky;
  top: 0;
  height: 100svh;
  background-color: #0a0d14;
  background-image:
    linear-gradient(to right, rgba(5, 6, 9, 0) 52%, rgba(5, 6, 9, 0.62) 84%, #050609 100%),
    linear-gradient(180deg, rgba(5, 6, 9, 0.5) 0%, rgba(5, 6, 9, 0.12) 26%, rgba(5, 6, 9, 0.1) 72%, rgba(5, 6, 9, 0.55) 100%),
    url("../assets/contact-bg-1400.webp");
  background-size: cover;
  background-position: 42% center;
  background-repeat: no-repeat;
}
@media (min-width: 761px) {
  .chero-media {
    background-image:
      linear-gradient(to right, rgba(5, 6, 9, 0) 52%, rgba(5, 6, 9, 0.62) 84%, #050609 100%),
      linear-gradient(180deg, rgba(5, 6, 9, 0.5) 0%, rgba(5, 6, 9, 0.12) 26%, rgba(5, 6, 9, 0.1) 72%, rgba(5, 6, 9, 0.55) 100%),
      url("../assets/contact-bg-2600.webp");
  }
}
@media (min-width: 1601px) {
  .chero-media {
    background-image:
      linear-gradient(to right, rgba(5, 6, 9, 0) 52%, rgba(5, 6, 9, 0.62) 84%, #050609 100%),
      linear-gradient(180deg, rgba(5, 6, 9, 0.5) 0%, rgba(5, 6, 9, 0.12) 26%, rgba(5, 6, 9, 0.1) 72%, rgba(5, 6, 9, 0.55) 100%),
      url("../assets/contact-bg.webp");
  }
}
/* the blue rule travels here too: a thin identity seam on the split */
.chero-media::after {
  content: "";
  position: absolute;
  top: clamp(96px, 14vh, 150px);
  right: 0;
  width: 3px;
  height: clamp(72px, 12vh, 132px);
  background: var(--blue);
}
.chero-panel {
  min-width: 0;
  padding: calc(84px + clamp(28px, 5vh, 56px)) var(--pad-x) clamp(48px, 7vh, 80px) clamp(30px, 4.2vw, 84px);
}
.chero-panel .page-lead { margin-top: clamp(18px, 2.6vh, 26px); }
.chero-panel .qform,
.chero-panel .qdone { margin-top: clamp(30px, 4.5vh, 46px); }

.chero-links {
  margin-top: clamp(28px, 4.5vh, 44px);
  padding-top: 8px;
  border-top: 1px solid var(--hairline-d);
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(24px, 3vw, 40px);
}
.chero-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--light-dim);
  transition: color 0.3s var(--ease-out);
}
.chero-links a:first-child {
  color: var(--light);
  box-shadow: inset 0 2px 0 var(--blue);
}
.chero-links a:hover { color: #7d99ff; }

.q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

/* the display headline sits in a half-width panel here, so it scales
   to the column, not the viewport */
.chero-panel .page-title { font-size: clamp(44px, 5.6vw, 104px); }
.chero-panel .page-lead { max-width: 56ch; font-size: clamp(15px, 1.08vw, 17.5px); }

/* underline fields: label over a hairline rule, nothing boxed:
   the input is the line */
.cpage .field { gap: 4px; }
.cpage .field :is(input, select, textarea) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 244, 248, 0.28);
  padding: 8px 2px 14px;
  transition: border-color 0.3s var(--ease-out);
}
.cpage .field select { padding-right: 42px; background-position: right 8px center; }
.cpage .field textarea { min-height: 96px; }
.cpage .field :is(input, select, textarea):hover { border-bottom-color: rgba(242, 244, 248, 0.5); }
.cpage .field :is(input, select, textarea):focus-visible {
  outline: none;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 13px;
  background: linear-gradient(to top, rgba(47, 84, 255, 0.07), transparent 60%);
}
.cpage .field:focus-within label { color: #7d99ff; }
.cpage .field [aria-invalid="true"] { border-bottom-color: #ff8080; }

.qform { display: grid; gap: clamp(18px, 2.4vh, 26px); }
.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--light-dim);
}
.field :is(input, select, textarea) {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--light);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hairline-d);
  border-radius: 0;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b9becb' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.field select:invalid { color: var(--light-dim); }
.field option { color: #0b0e17; background: #ffffff; }
.field :is(input, select, textarea):hover { border-color: rgba(242, 244, 248, 0.32); }
.field :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.07);
}
.field ::placeholder { color: rgba(185, 190, 203, 0.55); }
.field [aria-invalid="true"] { border-color: #ff8080; }
.f-err {
  display: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ff9d9d;
}
.field.has-err .f-err { display: block; }
.q-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.q-note { font-size: 12.5px; line-height: 1.6; color: rgba(185, 190, 203, 0.75); }
.q-submit { justify-self: start; border: 0; cursor: pointer; font: inherit; }

/* prepared-message state */
.qdone { display: grid; gap: 22px; }
.qdone-k {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #7dffa8;
}
.qdone-k::before { content: ""; width: 14px; height: 3px; background: #2fd465; }
.qdone-msg {
  padding: clamp(18px, 2vw, 26px);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--light);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hairline-d);
  border-left: 3px solid var(--blue);
  white-space: pre-line;
}
.qdone-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light);
  background: transparent;
  border: 1px solid rgba(242, 244, 248, 0.3);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ghost:hover { border-color: var(--blue); color: #ffffff; }
.qdone-note { font-size: 12.5px; letter-spacing: 0.02em; color: rgba(185, 190, 203, 0.75); min-height: 1.2em; }

/* pricing recap strip */
.page-strip {
  margin-top: clamp(60px, 10vh, 120px);
  padding-top: clamp(30px, 4.5vh, 44px);
  border-top: 1px solid var(--hairline-d);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.page-strip-line {
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.04em;
  color: #a8bcff;
}
.page-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light);
  box-shadow: inset 0 -1px 0 rgba(242, 244, 248, 0.28);
  transition: color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.page-strip-link:hover { color: #7d99ff; box-shadow: inset 0 -1px 0 #7d99ff; }

/* ---------- 404 ---------- */

.nf { display: grid; justify-items: start; align-content: center; min-height: calc(100svh - 84px); }
.nf-code {
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(120px, 24vw, 420px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--light);
}
.nf-code em { font-style: normal; color: var(--blue); }
.nf-title {
  margin-top: clamp(20px, 3.5vh, 36px);
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(24px, 3.2vw, 52px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--light);
}
.nf-lead {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--light-dim);
}
.nf-actions {
  margin-top: clamp(28px, 4.5vh, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- subpage responsive ---------- */

@media (max-width: 1080px) {
  /* the split stacks: photo band on top, feathered into the page,
     the panel below at full width */
  .chero { grid-template-columns: 1fr; }
  .chero-media {
    position: relative;
    top: auto;
    height: clamp(300px, 46svh, 460px);
    background-position: 42% 30%;
    background-image:
      linear-gradient(to bottom, rgba(5, 6, 9, 0.55) 0%, rgba(5, 6, 9, 0.08) 34%, rgba(5, 6, 9, 0.5) 78%, #050609 100%),
      url("../assets/contact-bg-2600.webp");
  }
  .chero-media::after { top: auto; bottom: 0; right: var(--pad-x); width: 3px; height: clamp(56px, 9vh, 96px); }
  .chero-panel { padding: clamp(30px, 5vh, 48px) var(--pad-x) clamp(44px, 6vh, 64px); }
  .chero-panel .page-title { font-size: clamp(46px, 9.8vw, 104px); }
}
@media (max-width: 760px) {
  .page { padding-top: calc(70px + clamp(40px, 7vh, 70px)); }
  .cpage { padding-top: 0; }
  .chero-media {
    background-image:
      linear-gradient(to bottom, rgba(5, 6, 9, 0.55) 0%, rgba(5, 6, 9, 0.08) 34%, rgba(5, 6, 9, 0.5) 78%, #050609 100%),
      url("../assets/contact-bg-1400.webp");
  }
  .q-row { grid-template-columns: 1fr; }
  .method { min-height: 0; }
}
@media (max-width: 520px) {
  .qdone-actions .cta, .qdone-actions .ghost { width: 100%; justify-content: center; }
}

/* ============================================================
   REDESIGN LAYER · Sora + DM Sans, white/grey/black system
   The hero keeps its exact composition and motion: only the
   typeface and the accent (blue → chrome silver) change there.
   Everything between the hero and the footer turns light:
   white ground, grey surfaces, black type and buttons, in the
   editorial card language of the reference. Sizes for Sora are
   rescaled from measured width ratios so every masked line
   holds exactly the same wrapping as before.
   ============================================================ */

body { font-weight: 460; }

/* ---------- type system ---------- */

.f-title, .services-title, .book-title, .card-name, .price,
.page-title, .nf-code, .nf-title, .mf-title, .m-v,
.footer-name, .footer-mark, .brand-main, .book-city, .f-price,
.qdone-k, .page-strip-line {
  font-family: var(--display);
  font-stretch: normal;
}
.sec-eyebrow, .services-sub, .brand-tag, .price-label, .footer-tag,
.footer-nav a, .map-bar, .mf-link, .m-k, .m-a, .chero-links a,
.page-eyebrow, .field label, .skip, .cta-label, .ghost, .nav-book,
.page-strip-link, .footer-socials a span {
  font-family: var(--display);
}

/* ---------- hero · type rescale + chrome accent only ---------- */

.f-title { font-size: clamp(27px, 4.45vw, 86px); line-height: 0.95; letter-spacing: -0.025em; }
.f-price {
  color: #ccd1da;
  font-weight: 700;
  font-size: clamp(12.5px, 1.06vw, 17.5px);
  letter-spacing: 0.08em;
}
.f-cta .cta-label { font-size: 13px; letter-spacing: 0.12em; }
.f-lead { font-weight: 500; }

/* the one accent everywhere on dark ground: chrome silver */
.seq-progress span { background: #c7cdd6; }

/* ---------- buttons ----------
   Dark ground: white button, black label. Light ground: black
   button, white label. The hero button keeps its sharp corners. */

.cta { background: #f4f5f7; color: #0c0c0e; }
.cta:hover { background: #d9dde3; color: #0c0c0e; }
.cta-label { font-weight: 700; }

.nav-book { background: #f4f5f7; color: #0c0c0e; border-radius: 10px; letter-spacing: 0.12em; }
.nav-book:hover { background: #d9dde3; }
.nav.on-light .nav-book { background: #0e0e11; color: #ffffff; }
.nav.on-light .nav-book:hover { background: #26262b; }

.brand-main { font-size: 17.5px; letter-spacing: 0.06em; font-weight: 800; }
.brand-tag { font-size: 9.5px; letter-spacing: 0.2em; }

.skip { background: #0e0e11; }
::selection { background: #0b0e17; color: #ffffff; }
:focus-visible { outline-color: #0b0e17; }
.seq :focus-visible,
.footer :focus-visible,
.chero :focus-visible,
.nav:not(.on-light) :focus-visible { outline-color: #f2f4f8; }

/* ---------- packages · white editorial section ---------- */

.services {
  background-color: var(--paper);
  background-image: none;
  color: #0b0e17;
  padding-top: clamp(32px, 5vh, 64px);
}
.services::after { content: none; }
.services-head { margin-bottom: clamp(34px, 5vh, 60px); }
.services-title {
  color: #0b0e17;
  font-size: clamp(36px, 6.3vw, 114px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.services-title em { color: #8c8e95; }

/* one full-viewport stage, three vehicles.
   The giant ghost name sits behind the car, the services and the
   price ride a slim strip along the base, and the scroll scrubs
   one vehicle out and the next one in. */
.pstage {
  position: relative;
  height: 100svh;
  min-height: 640px;
}
/* one poster per vehicle: ghost name, the car, then the spec line.
   The three blocks are a centred stack so the composition holds its
   proportions on a laptop, a tablet held tall, and a phone alike -
   no pockets of dead space between them at any height. */
.pslide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 30px);
  padding: clamp(74px, 11vh, 130px) var(--pad-x) clamp(24px, 4.5vh, 54px);
}
.pslide .card-cta { pointer-events: auto; }

.pname {
  position: static;
  z-index: 1;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(58px, 9vw, 172px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #9aa0ab;
}
.pshot {
  position: static;
  width: min(64vw, 830px);
  max-width: 100%;
  z-index: 2;
}
.pshot img { display: block; width: 100%; height: auto; filter: saturate(0.9); }

.pinfo {
  position: static;
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.1vh, 22px);
  text-align: center;
}
.pstage .card-list {
  --spec-gap: clamp(22px, 3.2vw, 48px);
  margin: 0;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px var(--spec-gap);
}
.pstage .card-list li {
  position: relative;
  padding: 0;
  border: 0;
  font-size: clamp(12.5px, 0.95vw, 15px);
  line-height: 1.5;
  color: #5c5d63;
}
/* a middot carries the eye between specs, the same beat the pricing
   strips use elsewhere on the site. Only from the width where the
   four specs hold one line: a dot left hanging at the start of a
   wrapped row would read as a stray mark. */
@media (min-width: 1025px) {
  .pstage .card-list li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--spec-gap) / -2);
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: #c2c3c9;
  }
}
.prow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(18px, 2.6vw, 36px);
}
.pstage .card-price {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pstage .price {
  background: none;
  color: #0b0e17;
  font-size: clamp(44px, 3.6vw, 72px);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.pstage .price-label { color: #7d7e85; letter-spacing: 0.26em; }
.card-cta {
  background: #0e0e11;
  color: #ffffff;
  border-radius: 12px;
  padding: 0 24px;
  min-height: 54px;
}
.card-cta:hover { background: #26262b; color: #ffffff; }
.card-cta .cta-label { font-size: 11px; letter-spacing: 0.16em; }
.card-cta svg { width: 16px; height: 16px; }

/* the interior photo band: imagery kept, water light plays over it,
   the service line floats in a glass chip */
.svc-banner {
  position: relative;
  margin-top: clamp(18px, 2.6vw, 30px);
  height: clamp(220px, 34vh, 380px);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: #101116;
  background-image:
    linear-gradient(180deg, rgba(8, 9, 12, 0.42) 0%, rgba(8, 9, 12, 0.3) 50%, rgba(8, 9, 12, 0.56) 100%),
    url("../assets/pricing-bg-2400.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
@media (min-width: 761px) {
  .svc-banner {
    background-image:
      linear-gradient(180deg, rgba(8, 9, 12, 0.42) 0%, rgba(8, 9, 12, 0.3) 50%, rgba(8, 9, 12, 0.56) 100%),
      url("../assets/pricing-bg-3840.webp");
  }
}
@media (min-width: 1601px) {
  .svc-banner {
    background-image:
      linear-gradient(180deg, rgba(8, 9, 12, 0.42) 0%, rgba(8, 9, 12, 0.3) 50%, rgba(8, 9, 12, 0.56) 100%),
      url("../assets/pricing-bg.webp");
  }
}
.services-sub {
  position: relative;
  z-index: 2;
  color: #f4f5f8;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 27px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-align: center;
  padding: 20px 38px;
  border-radius: 999px;
  background: rgba(12, 13, 17, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* ---------- booking · soft grey, black ink ---------- */

.zone-light { background: var(--paper-2); color: #0b0e17; }
.book { background: var(--paper-2); }
.sec-eyebrow { color: #6e6f76; font-weight: 600; letter-spacing: 0.28em; }
.book-title {
  font-size: clamp(34px, 5.05vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.book-title em { color: #8c8e95; }
.book-body p { color: #55565c; }
.cta-ink,
.nf .cta {
  background: #0e0e11;
  color: #ffffff;
  border-radius: 12px;
}
.cta-ink:hover,
.nf .cta:hover { background: #26262b; color: #ffffff; }
.book-city {
  color: #6e6f76;
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 19px);
  letter-spacing: 0.12em;
}

.map-panel {
  background: var(--paper);
  border: 1px solid var(--line-l);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 15, 20, 0.07);
}
.map-slot { border-radius: 14px; background: #eceef1; }
.map-slot::after { box-shadow: inset 0 0 40px rgba(10, 10, 14, 0.08); }
.map-embed { filter: grayscale(1) contrast(1.03) brightness(1.01); }
.map-fallback { background: #eceef1; }
.mf-rule { background: #0e0e11; }
.mf-title { color: #0b0e17; font-size: clamp(17px, 1.85vw, 30px); }
.mf-link { color: #6e6f76; box-shadow: inset 0 -1px 0 #c9c9d0; }
.mf-link:hover { color: #0b0e17; border-color: #0b0e17; }
.map-bar { color: #6e6f76; border-top: 1px solid var(--line-l); }
.map-bar svg { color: #9a9ba1; }

/* ---------- footer · unchanged dark ground, retuned type ---------- */

.footer-name { font-size: clamp(19px, 1.72vw, 26px); letter-spacing: 0.03em; }
.footer-mark { font-size: clamp(50px, 9.8vw, 186px); letter-spacing: -0.02em; }
.footer-socials a span { font-weight: 600; }

/* ---------- contact split hero · chrome accents ---------- */

.page-eyebrow { color: #c3c8d2; }
.page-title { letter-spacing: -0.028em; }
.page-title em { color: #c7cdd6; }
.chero-panel .page-title { font-size: clamp(30px, 3.65vw, 68px); }
.chero-media::after { background: #c7cdd6; }
.chero-links a:first-child { box-shadow: inset 0 2px 0 #f2f4f8; }
.chero-links a:hover { color: #ffffff; }
.cpage .field :is(input, select, textarea):focus-visible {
  border-bottom: 2px solid #f2f4f8;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.06), transparent 60%);
}
.cpage .field:focus-within label { color: #eef0f4; }
.qdone-msg { border-left: 3px solid #c7cdd6; }
.ghost:hover { border-color: #f2f4f8; color: #ffffff; }

/* below the dark split, the page turns light */
.cpage { background: var(--paper); }
.cpage .method {
  background: var(--paper-2);
  border: 1px solid var(--line-l);
  border-radius: 18px;
}
.cpage a.method:hover { border-color: #cfcfd6; }
.cpage .m-k { color: #7c7d84; }
.cpage .m-v { color: #0b0e17; }
.cpage .m-a { color: #55565c; }
.cpage a.method:hover .m-a { color: #0b0e17; }

/* contact methods · a hairline-ruled strip, not cards
   Five ways to reach us in one thin band under the form: tiny key,
   the number or handle on a single unbroken line, a quiet action.
   No panels, no fills, nothing to break mid-value. */
.cpage .contact-methods {
  margin-top: clamp(22px, 3.2vh, 40px);
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(184px, 100%), 1fr));
  border-top: 1px solid var(--line-l);
}
.cpage .method {
  min-height: 0;
  gap: 5px;
  padding: 15px clamp(12px, 1vw, 18px) 13px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line-l);
  border-radius: 0;
}
.cpage .method:first-child {
  border-left: 0;
  padding-left: 0;
}
.cpage a.method:hover {
  transform: none;
  border-color: var(--line-l);
  background: rgba(11, 14, 23, 0.035);
}
.cpage .m-k {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  line-height: 1.2;
}
.cpage .m-v {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}
.cpage .method-area .m-v {
  white-space: normal;
  font-size: clamp(12px, 0.85vw, 13.5px);
  line-height: 1.3;
}
.cpage .m-a {
  min-height: 20px;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.18em;
}
.cpage .m-a svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .cpage .method {
    border-left: 0;
    border-top: 1px solid var(--line-l);
    padding: 13px 0 12px;
  }
  .cpage .method:first-child { border-top: 0; }
  .cpage .m-a { min-height: 44px; }   /* full thumb target on phones */
}
.cpage .page-strip { border-top: 1px solid var(--line-l); }
.cpage .page-strip-line { color: #0b0e17; font-weight: 700; letter-spacing: 0.02em; }
.cpage .page-strip-link { color: #0b0e17; box-shadow: inset 0 -1px 0 #c9c9d0; }

/* pricing recap · the same thin band as the methods strip above it,
   one quiet line of prices and one link, nothing more. */
.cpage .page-strip {
  margin-top: clamp(24px, 3.4vh, 42px);
  padding-top: 14px;
  gap: 10px 24px;
}
.cpage .page-strip-line {
  font-size: clamp(12.5px, 0.95vw, 15px);
  line-height: 1.2;
}
.cpage .page-strip-link {
  min-height: 26px;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.18em;
}
.cpage .page-strip-link svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .cpage .page-strip-link { min-height: 44px; }
}
.cpage .page-strip-link:hover { color: #55565c; box-shadow: inset 0 -1px 0 #55565c; }

/* ---------- 404 · light ---------- */

.nf { background: var(--paper); }
.nf-code { color: #0b0e17; font-size: clamp(92px, 18vw, 320px); letter-spacing: -0.03em; }
.nf-code em { color: #8c8e95; }
.nf-title { color: #0b0e17; letter-spacing: -0.015em; }
.nf-lead { color: #55565c; }
.nf .ghost {
  color: #0b0e17;
  border: 1px solid #d3d3da;
  border-radius: 12px;
}
.nf .ghost:hover { border-color: #0b0e17; color: #0b0e17; }
.nf :focus-visible { outline-color: #0b0e17; }

/* ---------- responsive type rescale (Sora widths) ---------- */

@media (max-width: 760px) {
  .brand-main { font-size: 14px; }
  .f-title { font-size: clamp(21px, 6.35vw, 42px); }
  .f-price { font-size: clamp(11.5px, 3.3vw, 15px); }
  .f-cta .cta-label { font-size: 12px; letter-spacing: 0.1em; }
  .book-title { font-size: clamp(26px, 6.1vw, 40px); }
  .book-city { font-size: 14px; letter-spacing: 0.1em; }
  .footer-mark { font-size: 9.55vw; }
  .services-sub { font-size: clamp(12.5px, 3.5vw, 16px); letter-spacing: 0.18em; text-indent: 0.18em; padding: 15px 24px; max-width: 88%; }
  .svc-banner { border-radius: 18px; height: clamp(190px, 30vh, 300px); }
  .pstage { min-height: 560px; }
  .pslide { gap: clamp(8px, 1.6vh, 18px); padding: clamp(78px, 12vh, 108px) var(--pad-x) clamp(20px, 3.4vh, 34px); }
  .pname { font-size: clamp(40px, 12.5vw, 64px); }
  .pshot { width: min(88vw, 500px); }
  .pstage .card-list { --spec-gap: 16px; max-width: 92%; margin-inline: auto; row-gap: 6px; }
  .pstage .card-list li { font-size: 12.5px; }
  .pstage .price { font-size: clamp(40px, 11vw, 56px); }
  .pinfo { gap: 12px; }
  .prow { gap: 12px 18px; }
}

/* tablets held tall: the poster grows into the extra height instead
   of floating three small blocks in a big empty frame */
@media (min-width: 761px) and (orientation: portrait) {
  .pslide { gap: clamp(18px, 3vh, 40px); padding: clamp(96px, 13vh, 150px) var(--pad-x) clamp(30px, 5vh, 60px); }
  .pname { font-size: clamp(72px, 12vw, 128px); }
  .pshot { width: min(86vw, 760px); }
  .pstage .price { font-size: clamp(52px, 7vw, 74px); }
  .pstage .card-list li { font-size: clamp(13.5px, 1.8vw, 16px); }
}
@media (min-width: 761px) and (orientation: portrait) {
  .f-title { font-size: clamp(35px, 6.1vw, 68px); }
}
@media (max-width: 360px), (max-height: 600px) and (max-width: 760px) {
  .f-title { font-size: clamp(19px, 6vw, 34px); }
  .f-price { font-size: 11px; }
  .f-cta .cta-label { font-size: 11px; letter-spacing: 0.09em; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .f-title { font-size: min(4.45vw, 8.1vh); }
}
@media (max-width: 1080px) {
  .chero-panel .page-title { font-size: clamp(30px, 6.2vw, 64px); }
}

/* ============================================================
   NAVIGATION · inline links + mobile hamburger
   ============================================================ */

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin-left: auto;
  margin-right: clamp(20px, 2.6vw, 40px);
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--light-dim);
  transition: color 0.3s var(--ease-out);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--light); }
.nav.on-light .nav-links a { color: #55565c; }
.nav.on-light .nav-links a:hover,
.nav.on-light .nav-links a[aria-current="page"] { color: #0b0e17; }

.nav-side { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--light);
}
.nav.on-light .nav-toggle { color: #0b0e17; }
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(70px + 8vh) var(--pad-x) max(6vh, 40px);
  background: #050609;
  overscroll-behavior: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-menu:not([hidden]) { animation: menuIn 0.28s var(--ease-out); }
  @keyframes menuIn { from { opacity: 0; transform: translateY(10px); } }
}
.nav-menu-links { display: grid; gap: 6px; }
.nav-menu-links a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 6.8vw, 34px);
  letter-spacing: -0.01em;
  color: var(--light);
  transition: color 0.3s var(--ease-out);
}
.nav-menu-links a:hover { color: #c7cdd6; }
.nav-menu-links a[aria-current="page"] { color: #8a8f99; }
.nav-menu-foot {
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
  border-top: 1px solid var(--hairline-d);
  padding-top: 10px;
}
.nav-menu-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light-dim);
}
.nav-menu-foot a:hover { color: var(--light); }

/* while the menu is open, the bar sits above the panel in dark dress */
html.menu-open { overflow: hidden; }
.menu-open .sms { display: none; }
.menu-open .nav { z-index: 70; }
.menu-open .nav.on-light { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .nav.on-light .brand-main { color: var(--light); }
.menu-open .nav.on-light .brand-tag { color: var(--light-dim); }
.menu-open .nav.on-light .nav-book { background: #f4f5f7; color: #0c0c0e; }
.menu-open .nav.on-light .nav-toggle { color: var(--light); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 760px) {
  .nav-side { gap: 4px; }
}

/* Sora runs wider: the brand tagline needs more room than before */
@media (max-width: 540px) {
  .brand-tag { display: none; }
  .brand { min-height: 44px; }
}

/* reduced motion: the stage does not pin, the three vehicles stack
   in flow (must live after the stage rules to win the cascade) */
@media (prefers-reduced-motion: reduce) {
  .pstage { height: auto; min-height: 0; }
  .pslide { position: static; }
  .pslide + .pslide { margin-top: clamp(48px, 8vh, 84px); }
  .pname, .pinfo { position: static; }
  .pshot { position: static; width: min(84vw, 620px); margin: 18px auto; }
}

/* ============================================================
   PHONE · the number with call and text everywhere it appears
   ============================================================ */

/* STARTING FROM reads at label size, not fine print */
.price-label { font-size: clamp(12px, 0.95vw, 14.5px); }

.book-phone {
  margin-top: clamp(14px, 2vh, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
}
.book-phone .bp-num {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 21px);
  letter-spacing: 0.02em;
  color: #0b0e17;
}
.book-phone .bp-actions { display: inline-flex; column-gap: 16px; }
.book-phone .bp-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #6e6f76;
  box-shadow: inset 0 -1px 0 #c9c9d0;
  transition: color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.book-phone .bp-actions a:hover { color: #0b0e17; box-shadow: inset 0 -1px 0 #0b0e17; }

.footer-phone {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
}
.footer-phone .fp-num {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: 0.02em;
  color: var(--light);
  transition: color 0.3s var(--ease-out);
}
.footer-phone .fp-num:hover { color: #c7cdd6; }
.footer-phone .fp-actions { display: inline-flex; column-gap: 16px; }
.footer-phone .fp-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light-dim);
  box-shadow: inset 0 -1px 0 rgba(242, 244, 248, 0.3);
  transition: color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.footer-phone .fp-actions a:hover { color: var(--light); box-shadow: inset 0 -1px 0 var(--light); }

/* ============================================================
   BOOKING FORM · glass card
   The form reads as one prominent object: a bordered glass
   panel over the dark ground, roomier type, brighter labels,
   and a clear required/optional hierarchy.
   ============================================================ */

.cpage .qform,
.cpage .qdone {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: clamp(26px, 2.8vw, 46px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.4);
}
.cpage .qform { gap: clamp(20px, 2.6vh, 30px); }

.qhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(14px, 1.8vh, 20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.qhead-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: 0.14em;
  color: var(--light);
}
.qhead-hint {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9aa0ab;
}

/* roomier, brighter fields inside the card */
.cpage .field { gap: 9px; }
.cpage .field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #d7dbe2;
}
.cpage .field label .lab-opt {
  margin-left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: #8a8f99;
}
.cpage .field :is(input, select, textarea) {
  font-size: 17px;
  min-height: 56px;
  border-bottom-color: rgba(242, 244, 248, 0.34);
}
.cpage .field textarea { min-height: 108px; }
.cpage .q-note { font-size: 13px; }

.q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .cpage .qform,
  .cpage .qdone { border-radius: 18px; padding: clamp(22px, 5.5vw, 30px); }
}

/* ============================================================
   GREY TITLE WORDS · inked outline
   Every title word set in grey — the <em> accents in the hero,
   booking, contact and 404 headlines, and the vehicle names on
   the pricing stage — carries a black outline so it reads clean
   over photography and over paper alike. The ring is drawn with
   shadows, never a centre stroke, so the letterform keeps its
   full weight. Radius follows the type size and never falls
   under a hairline on small screens.
   ------------------------------------------------------------ */

.f-title em,
.services-title em,
.book-title em,
.page-title em,
.faq-title em,
.nf-code em,
.pname {
  --ink-r: clamp(1.2px, 0.024em, 5px);
  --ink-x: clamp(0.85px, 0.017em, 3.6px);
  text-shadow:
    var(--ink-r) 0 0 #000,
    calc(var(--ink-r) * -1) 0 0 #000,
    0 var(--ink-r) 0 #000,
    0 calc(var(--ink-r) * -1) 0 #000,
    var(--ink-x) var(--ink-x) 0 #000,
    calc(var(--ink-x) * -1) var(--ink-x) 0 #000,
    var(--ink-x) calc(var(--ink-x) * -1) 0 #000,
    calc(var(--ink-x) * -1) calc(var(--ink-x) * -1) 0 #000;
}


/* ============================================================
   FAQ · the last thing before the footer
   Two columns of open questions, nothing folded away: the answer
   people came for is on the page, at reading size, on both the
   home page and the contact page.
   ------------------------------------------------------------ */

.faq { background: var(--paper); }
.faq-head { max-width: 68ch; }
.faq-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #0b0e17;
}
.faq-title em { font-style: normal; color: #8c8e95; }
.faq-lead {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 56ch;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  color: #55565c;
}
.faq-grid {
  margin-top: clamp(34px, 5vh, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 52px) clamp(40px, 5vw, 96px);
}
.faq-item {
  display: grid;
  gap: clamp(8px, 0.9vw, 12px);
  padding-top: clamp(18px, 1.9vw, 26px);
  border-top: 1px solid var(--line-l);
}
.faq-n {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #9a9ba1;
}
.faq-q {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(21px, 1.94vw, 33px);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: #0b0e17;
}
.faq-a {
  max-width: 60ch;
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.6;
  color: #43444b;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 34px); }
}
@media (max-width: 760px) {
  .faq-title { font-size: clamp(34px, 9.4vw, 62px); }
  .faq-lead { font-size: clamp(15.5px, 4.1vw, 18px); }
  .faq-q { font-size: clamp(20px, 5.4vw, 26px); }
  .faq-a { font-size: clamp(16.5px, 4.5vw, 19px); line-height: 1.56; }
}