:root {
  /* the logo's electric blue and brushed chrome */
  --blue: #2e66ff;
  --blue-hi: #7aa2ff;
  --blue-deep: #0b2a9e;
  --blue-rgb: 46, 102, 255;
  --blue-sheen: linear-gradient(100deg, #1745d6 0%, #3a74ff 35%, #6f9bff 50%, #2e66ff 66%, #1238b8 100%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #eef1f5 22%, #b9c0ca 48%, #f4f6f9 60%, #8d95a1 82%, #d9dde3 100%);
  --chrome-bar: linear-gradient(100deg, #8d95a1 0%, #dfe3e8 22%, #ffffff 40%, #b9c0ca 58%, #eef1f5 76%, #8d95a1 100%);
  --serif: 'Cinzel', Georgia, serif;
  --danger: #ff6b5e;
  --ink: #050506;
  --ink-2: #111214;
  --ink-3: #18191c;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #f4f4f5;
  --muted: #a1a2a8;
  --glass: rgba(16, 17, 20, 0.62);
  --paper: #f6f5f2;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Archivo', system-ui, sans-serif;
  --host-badge: 52px; /* Netlify's free-plan badge sits in the bottom-right corner; keep buttons above it */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--display);
  font-stretch: 100%;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.accent {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.display,
.display-m,
.display-s,
.display-xl {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.88;
  margin: 0;
}
.display { font-size: clamp(38px, 8.4vw, 136px); }
.display span { display: block; }
.display-m { font-size: clamp(40px, 6.4vw, 96px); }
.display-s { font-size: clamp(28px, 3.2vw, 40px); }
.display-xl { font-size: clamp(44px, 10.5vw, 180px); line-height: 0.84; }
.display-xl span { white-space: nowrap; }

.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker b { color: var(--blue); font-weight: 800; }
.kicker.dark { color: #6b6b70; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.2s, box-shadow 0.25s;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }
.btn-blue { background: var(--blue-sheen); background-size: 160% 100%; background-position: 0% 0; color: #fff; box-shadow: 0 8px 30px -10px rgba(var(--blue-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-blue:hover { background-position: 100% 0; box-shadow: 0 10px 40px -8px rgba(var(--blue-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #eef1f5; }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.7); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }
a.btn { text-decoration: none; }
.btn-black { background: var(--ink); color: #fff; }
.btn-black:hover { background: #000; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 60px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; height: 56px; font-size: 16px; }
.btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--ink);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-logo { width: 230px; height: auto; animation: pulse 1.6s ease-in-out infinite; }
.loader-label { margin: 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.loader-bar { width: 180px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0%; background: var(--blue-sheen); transition: width 0.3s; }
@keyframes pulse { 50% { transform: scale(0.94); } }

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  padding-top: max(14px, env(safe-area-inset-top));
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: auto; filter: brightness(1.3) contrast(1.1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-call svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.nav-call:hover svg { transform: none; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- story ---------- */

.story { position: relative; height: 880vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #0b0c0e;
}
.stage-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(255, 255, 255, 0.08), transparent 70%),
    repeating-linear-gradient(100deg, transparent 0 14%, rgba(255, 255, 255, 0.05) 14% 14.4%),
    #0b0c0e;
}
#swirl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#swirl { opacity: 0; }
.dip { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 26%, transparent 46%),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}
/* faint film grain over the 3D, like a photo */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.2 -0.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- photo story (when photos/ has the images) ---------- */
.photo-mode .grain,
.photo-mode #swirl,
.photo-mode .stage-fallback { display: none; }
.photos { position: absolute; inset: 0; overflow: hidden; background: #050506; }
.ph-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ph-hero { opacity: 1; visibility: visible; }
.ph-move { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-wipe { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.ph-layer { position: absolute; inset: 0; will-change: transform, opacity; }
.ph-wipe .ph-img { will-change: transform; }
.ph-reveal {
  --r: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), #000 calc(var(--r) - 160px), transparent var(--r));
  mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), #000 calc(var(--r) - 160px), transparent var(--r));
}
.ph-over { opacity: 0; }
.ph-steam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -120px;
  width: 240px;
  background: radial-gradient(50% 65% at 50% 50%, rgba(255, 250, 240, 0.32), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  will-change: transform;
}
.ph-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 70% at var(--gx, 28%) var(--gy, 36%), rgba(255, 168, 88, 0.42), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
/* suds on the hero and steam on the seat, in a band around the sliding line: canvases drawn by photo.js */
.ph-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}
/* right at the line both photos blur: narrow strips either side, the after photo fading in from
   the left and the before photo out to the right (strips, so only a sliver is ever masked) */
.ph-strip { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; visibility: hidden; will-change: transform; }
.ph-strip .ph-img { right: auto; will-change: transform; }
.ph-fog-left {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.ph-fog-right {
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
/* sunlight flooding in through the garage door */
.ph-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at var(--gx, 30%) var(--gy, 42%), #ffe8c4 0%, #f5bd7c 30%, #d98a4a 65%, #8a4a25 100%);
  opacity: 0;
  pointer-events: none;
}
.ph-missing {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #0d0e10 0 18px, #111214 18px 36px);
}

/* the wash line */
.wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9), 0 0 28px 6px rgba(190, 220, 255, 0.45), 0 0 90px 24px rgba(190, 220, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.wipe i {
  position: absolute;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
  animation: drip 2.4s linear infinite;
}
.wipe i:nth-child(1) { animation-delay: 0s; --x: -14px; }
.wipe i:nth-child(2) { animation-delay: -0.5s; --x: 10px; }
.wipe i:nth-child(3) { animation-delay: -1.1s; --x: -6px; }
.wipe i:nth-child(4) { animation-delay: -1.6s; --x: 16px; }
.wipe i:nth-child(5) { animation-delay: -2s; --x: 4px; }
@keyframes drip {
  0% { top: -2%; opacity: 0; transform: translateX(0) scale(0.6); }
  10% { opacity: 1; }
  100% { top: 102%; opacity: 0; transform: translateX(var(--x)) scale(1.2); }
}

.chapters { position: absolute; inset: 0; pointer-events: none; }
.chapter {
  --v: 0;
  position: absolute;
  bottom: clamp(96px, 13vh, 150px);
  left: var(--gutter);
  right: var(--gutter);
  visibility: hidden;
}
.chapter.right { text-align: right; }
.chapter.right .kicker { justify-content: flex-end; }
.chapter.right .sub { margin-left: auto; }
.chapter.on { visibility: visible; }
/* only opacity and transform move with scroll, so the text never has to be redrawn */
.chapter .kicker,
.chapter .l1,
.chapter .l2,
.chapter .sub { will-change: transform, opacity; }
.chapter .kicker { opacity: clamp(0, calc(var(--v) * 1.6 - 0.2), 1); transform: translateY(calc((1 - var(--v)) * 20px)); }
.chapter .l1 {
  opacity: clamp(0, calc(var(--v) * 1.4), 1);
  transform: translateY(calc((1 - var(--v)) * 70px)) skewX(calc((1 - var(--v)) * -8deg));
}
.chapter .l2 {
  opacity: clamp(0, calc(var(--v) * 1.6 - 0.4), 1);
  transform: translateY(calc((1 - var(--v)) * 110px)) skewX(calc((1 - var(--v)) * -8deg));
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}
.chapter .l1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.chapter .sub {
  max-width: 420px;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255, 255, 255, 0.82);
  opacity: clamp(0, calc(var(--v) * 1.8 - 0.8), 1);
  transform: translateY(calc((1 - var(--v)) * 30px));
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.chapter.last { bottom: clamp(150px, 20vh, 210px); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: opacity 0.4s;
}
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(#fff, transparent); animation: hint 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.rail {
  position: absolute;
  right: var(--gutter);
  top: 30%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.rail button::after {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.35s var(--ease), background 0.3s;
}
.rail:hover button span,
.rail button.active span { opacity: 1; transform: none; }
.rail button.active { color: #fff; }
.rail button.active::after { width: 34px; background: var(--blue); }
.rail button:hover { color: #fff; }

.bookbar {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  transform: translate(-50%, 30px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.bookbar.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bookbar label {
  display: grid;
  padding: 4px 18px;
  border-right: 1px solid var(--line);
  min-width: 150px;
}
.bookbar label span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bookbar select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 12px;
  border: 0;
  padding: 0 20px 0 0;
  font-weight: 700;
  font-size: 15px;
  outline: none;
}
.bookbar select option { color: #000; }
.bookbar .btn { height: 52px; margin-left: 6px; }

.progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; display: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }

/* ---------- ticker ---------- */

/* brushed chrome, like the logo's letters */
.ticker {
  overflow: hidden;
  background: var(--chrome-bar);
  color: var(--ink);
  border-block: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 var(--blue);
}
.ticker-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker span {
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 36px);
  padding: 14px 0;
  display: flex;
  align-items: center;
}
.ticker span::after { content: ''; width: 8px; height: 8px; margin: 0 28px; background: var(--blue); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */

.section { padding: clamp(80px, 12vw, 160px) 0; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-note { margin: 0; max-width: 340px; color: var(--muted); font-size: 15px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--blue-rgb), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.svc:hover { transform: translateY(-4px); border-color: rgba(var(--blue-rgb), 0.55); }
.svc:hover::before { opacity: 1; }
.svc > * { position: relative; }
.svc-n {
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  font-size: 15px;
  color: var(--blue);
}
.svc h3 {
  margin: 34px 0 6px;
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.svc-blurb { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.svc ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.svc li { display: flex; gap: 10px; align-items: baseline; }
.svc li::before { content: ''; flex: none; width: 8px; height: 2px; background: var(--blue); transform: translateY(-4px); }
.svc-foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.svc-price { font-stretch: 112%; font-weight: 800; font-size: 26px; line-height: 1.05; }
.svc-price small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); font-stretch: 100%; margin-top: 4px; }
.svc-price .svc-from { margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; font-weight: 700; }
.svc .btn { height: 40px; padding: 0 16px; font-size: 13px; }
.svc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.svc-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.5);
  color: var(--blue-hi);
}
.svc-note { margin: -12px 0 24px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--blue-rgb), 0.1); color: #c9d6ff; font-size: 13px; }
/* the most popular package stands out */
.svc-hot { border-color: rgba(var(--blue-rgb), 0.6); background: linear-gradient(180deg, #0e1a3d, var(--ink-2) 55%); box-shadow: 0 30px 80px -40px rgba(var(--blue-rgb), 0.8); }
.svc-hot::before { opacity: 1; }
.svc-hot .svc-tag { background: var(--blue-sheen); color: #fff; border-color: transparent; }

.addons {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px 40px;
  align-items: center;
  padding: 26px 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.addons-head h3 { margin: 0 0 4px; font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: 22px; }
.addons-head p { margin: 0; color: var(--muted); font-size: 14px; }
.addon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; }
.addon-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 15px; font-weight: 600; }
.addon-list small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.addon-list b { color: var(--blue-hi); font-stretch: 112%; }

/* recent work */
.work { padding-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shot { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ink-3); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  display: grid;
  gap: 2px;
}
.shot figcaption b { font-size: 15px; }
.shot figcaption span { font-size: 12px; color: var(--blue-hi); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery .shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* reviews */
.reviews { background: radial-gradient(80% 60% at 50% 0%, rgba(var(--blue-rgb), 0.14), transparent 70%), var(--ink); }
.rating { display: grid; justify-items: end; gap: 2px; }
.rating strong { font-stretch: 125%; font-weight: 900; font-size: 56px; line-height: 0.9; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rating small { color: var(--muted); font-size: 13px; }
.stars { color: #ffc23d; letter-spacing: 0.12em; font-size: 16px; }
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.review {
  margin: 0;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  display: grid;
  gap: 16px;
}
.review blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: #dcdde2; }
.review figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.review figcaption b { display: block; }
.review figcaption small { display: block; color: var(--muted); font-size: 12px; }
.review figcaption em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.review-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--blue-sheen); color: #fff; }

/* process: light section in brushed silver */
.process { background: linear-gradient(180deg, #f3f5f8, #e4e8ee); color: var(--ink); }
.accent-dark { color: var(--blue-deep); }
.process .display-m { margin-bottom: clamp(48px, 6vw, 80px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.step { border-top: 2px solid var(--ink); padding-top: 24px; }
.step-n {
  display: block;
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(96px, 11vw, 160px);
  line-height: 0.8;
  background: var(--blue-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.03em 0.04em 0 var(--ink));
  margin-bottom: 20px;
}
.step h3 {
  margin: 0 0 10px;
  font-stretch: 125%;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
}
.step p { margin: 0; color: #4a4a50; max-width: 340px; }

.faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; color: var(--muted); max-width: 560px; }

.cta {
  background: radial-gradient(70% 90% at 85% 10%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(135deg, #0b2a9e 0%, #2e66ff 55%, #1745d6 100%);
  color: #fff;
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
}
.cta-wrap { display: grid; gap: 40px; justify-items: start; }
.cta .display-xl span { display: block; }
.cta .display-xl span:last-child { color: transparent; -webkit-text-stroke: 2px #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer { padding: 56px 0 calc(var(--host-badge) + 40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.footer-wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand { flex-wrap: wrap; gap: 18px; }
.footer-brand img { height: 72px; width: auto; }
.footer-credit { opacity: 0.7; }
.footer-brand span { color: var(--muted); font-size: 14px; }
.footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); transition: border-color 0.2s, background 0.2s; }
.footer-links a:hover { border-color: var(--blue); background: rgba(var(--blue-rgb), 0.12); }
.footer-fine { grid-column: 1 / -1; margin: 0; color: #6b6c72; font-size: 12px; }

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

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s;
}
.scrim.on { opacity: 1; }

.drawer {
  position: fixed;
  z-index: 70;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(480px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(14, 15, 18, 0.92);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  transform: translateX(calc(100% + 24px));
  transition: transform 0.6s var(--ease);
  overflow: hidden;
}
.drawer.on { transform: none; }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .kicker { margin-bottom: 10px; }
.icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  transition: background 0.2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.book-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.book-form > fieldset:first-of-type { padding-top: 22px; }
.book-form fieldset { border: 0; margin: 0; padding: 0 24px 26px; min-width: 0; }
.book-form legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.book-form legend b { color: var(--blue); margin-right: 8px; }
.book-form { overflow-y: auto; overscroll-behavior: contain; }

.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span {
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.opt:hover > span { border-color: rgba(255, 255, 255, 0.35); }
.opt input:checked + span { border-color: var(--blue); background: rgba(var(--blue-rgb), 0.12); box-shadow: inset 0 0 0 1px var(--blue); }
.opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.vehicle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vehicle-grid .opt > span { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; font-size: 13px; font-weight: 600; }
.vehicle-grid svg { width: 46px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.svc-pick { display: grid; gap: 8px; }
.svc-pick .opt > span { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; }
.svc-pick strong { font-weight: 700; }
.svc-pick em { font-style: normal; font-weight: 700; color: #fff; text-align: right; }
.svc-pick small { color: var(--muted); font-size: 13px; }
.svc-pick small:last-child { text-align: right; }

.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 -24px 10px; padding-inline: 24px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days .opt { flex: none; }
.days .opt > span { width: 62px; padding: 10px 0; text-align: center; line-height: 1.15; }
.days .opt small { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.days .opt strong { font-size: 20px; font-stretch: 112%; }
.times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.times .opt > span { padding: 11px 0; text-align: center; font-size: 14px; font-weight: 600; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field > span { font-size: 13px; color: var(--muted); font-weight: 600; }
.field em { font-style: normal; font-weight: 400; opacity: 0.7; }
.field input,
.field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  resize: none;
  transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.field input:focus,
.field textarea:focus { border-color: var(--blue); background: rgba(255, 255, 255, 0.06); }
.field.invalid input { border-color: var(--danger); }

.form-error { margin: 0 24px; color: var(--danger); font-size: 14px; font-weight: 600; min-height: 0; }
.form-error:empty { display: none; }
.form-error:not(:empty) { margin-bottom: 14px; }

.drawer-foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 16px 24px calc(var(--host-badge) + 20px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(14, 15, 18, 0.96) 22%);
  display: grid;
  gap: 12px;
}
.summary { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.summary:empty { display: none; }
.summary span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 600; }

.summary-total { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(var(--blue-rgb), 0.2); color: #fff; font-size: 13px; }

.book-form legend em { font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: none; opacity: 0.7; margin-left: 6px; }
.hint { margin: 14px 0 10px; color: var(--muted); font-size: 13px; }
.hint-top { margin-top: -4px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills .opt > span { padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.qualify { margin-top: 14px; padding: 16px; border-radius: 14px; background: rgba(var(--blue-rgb), 0.08); border: 1px solid rgba(var(--blue-rgb), 0.3); }
.qualify > p { margin: 0 0 12px; font-size: 14px; }
.qualify-no { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.link-btn { background: none; border: 0; padding: 0; margin-right: 12px; color: var(--blue-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mini-tag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--blue-sheen); vertical-align: 2px; }
.addon-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addon-pick .opt > span { display: flex; justify-content: space-between; gap: 8px; padding: 11px 14px; font-size: 13px; }
.addon-pick strong { font-weight: 600; }
.addon-pick em { font-style: normal; font-weight: 700; color: var(--blue-hi); }

.done { flex: 1; display: grid; align-content: start; justify-items: center; text-align: center; gap: 16px; padding: 24px 22px calc(var(--host-badge) + 24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.done[hidden] { display: none; }
.done-text { margin: 0; color: var(--muted); max-width: 340px; }
.done-actions { width: 100%; display: grid; gap: 8px; justify-items: center; }
.done-actions .btn { width: 100%; }
.done-actions .link-btn { margin: 6px 0 0; }

/* the request as a flyer: what Daniel gets */
.flyer {
  position: relative;
  width: 100%;
  text-align: left;
  border-radius: 20px;
  padding: 2px;
  background: var(--chrome);
  box-shadow: 0 24px 60px -20px rgba(var(--blue-rgb), 0.7);
  animation: flyer-in 0.7s var(--ease) both;
}
@keyframes flyer-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.flyer > * { position: relative; }
.flyer::before { content: ''; position: absolute; inset: 2px; border-radius: 18px; background: radial-gradient(120% 50% at 50% 0%, #0f2266, #07080b 60%); }
.fl-head { padding: 22px 20px 14px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.fl-head img { width: 170px; margin: 0 auto; }
.fl-kind { margin: 12px 0 0; font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--blue-hi); }
.fl-body { margin: 0; padding: 6px 20px; }
.fl-row { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); font-size: 14px; }
.fl-row dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.fl-row dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.fl-row dd small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.fl-chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px; border-radius: 999px; background: rgba(var(--blue-rgb), 0.18); font-size: 12px; font-weight: 600; }
.fl-total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--blue-sheen); color: #fff; }
.fl-total span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fl-total strong { font-stretch: 125%; font-weight: 900; font-size: 26px; }
.fl-foot { margin: 0; padding: 12px 20px 16px; text-align: center; font-family: var(--serif); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  z-index: 90;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px 10px 10px;
  border-radius: 18px;
  background: rgba(24, 25, 28, 0.86);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -140%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.toast.on { transform: translate(-50%, 0); }
.toast img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.toast b { display: block; font-size: 13px; }
.toast span { display: block; font-size: 13px; color: var(--muted); }

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

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .shot:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .addons { grid-template-columns: 1fr; }
  .addon-list { grid-template-columns: repeat(2, 1fr); }
  .bookbar { bottom: calc(var(--host-badge) + 24px); }
}

@media (max-width: 1180px) {
  .nav-call span { display: none; }
  .nav-call { width: 40px; padding: 0; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .rail { display: none; }
  .progress { display: block; }
  .steps { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .footer-wrap { grid-template-columns: 1fr; }
  .rating { justify-items: start; }
}

@media (max-width: 640px) {
  .brand img { height: 30px; }
  .review-grid { grid-template-columns: 1fr; }
  .gallery { gap: 8px; }
  .gallery .shot:first-child { aspect-ratio: 4 / 5; }
  .addon-list { grid-template-columns: 1fr; }
  .addons { padding: 22px 20px; }
  .addon-pick { grid-template-columns: 1fr; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 100%; }
  .chapter { bottom: clamp(88px, 14svh, 130px); }
  .chapter.right { text-align: left; }
  .chapter.right .kicker { justify-content: flex-start; }
  .chapter.right .sub { margin-left: 0; }
  .chapter .sub { font-size: 15px; max-width: 320px; margin-top: 16px; }
  .chapter.last { bottom: 196px; }
  .svc-grid { grid-template-columns: 1fr; }
  .bookbar {
    left: 16px;
    right: 16px;
    bottom: calc(var(--host-badge) + 16px + env(safe-area-inset-bottom));
    transform: translateY(30px);
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 8px;
  }
  .bookbar.on { transform: none; }
  .bookbar label { flex: 1 1 40%; min-width: 0; padding: 6px 12px; }
  .bookbar select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .bookbar label:nth-of-type(2) { border-right: 0; }
  .bookbar .btn { flex: 1 1 100%; margin: 4px 0 0; height: 50px; }
  .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92svh; border-radius: 24px 24px 0 0; transform: translateY(105%); }
  .drawer.on { transform: none; }
  .fields { grid-template-columns: 1fr; }
}

/* Phones and portrait tablets: the wide photos play in a cinematic frame across the top of the
   screen instead of being cropped to the tall screen. The whole car stays in view, the photos are
   barely enlarged (so they stay sharp), and the phone has far fewer pixels to move each frame. */
@media (max-aspect-ratio: 9/10) {
  .stage {
    --ph-h: min(88vw, 46svh);
    /* centered in the space between the nav and the chapter text */
    --ph-top: max(calc(env(safe-area-inset-top) + 72px), calc(50svh - var(--ph-h) * 0.85));
    background: #050506;
  }
  .photos { top: var(--ph-top); bottom: auto; height: var(--ph-h); }
  .photos::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(180deg, #050506 0%, transparent 16%, transparent 80%, #050506 100%);
  }
  .wipe { top: var(--ph-top); bottom: auto; height: var(--ph-h); }
  .shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 12%); }
  /* the text sits on black under the frame, so it needs no shadow (and the phone draws it faster) */
  .chapter .l2 { filter: none; }
  .chapter .l1, .chapter .sub { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .scroll-hint i, .wipe i, .loader-logo { animation: none; }
}