:root {
  /* electric orange and brushed chrome */
  --lime: #ff7a1a;
  --lime-hi: #ffb06b;
  --lime-deep: #a84500;
  --lime-rgb: 255, 122, 26;
  --lime-sheen: linear-gradient(100deg, #e05a00 0%, #ff7a1a 35%, #ffc08a 50%, #ff7a1a 66%, #c94f00 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%);
  --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(--lime); 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-lime { background: var(--lime-sheen); background-size: 160% 100%; background-position: 0% 0; color: #0b1002; box-shadow: 0 8px 30px -10px rgba(var(--lime-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-lime:hover { background-position: 100% 0; box-shadow: 0 10px 40px -8px rgba(var(--lime-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(--lime); 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(--lime-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: 42px; width: auto; filter: 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: 1000vh; }

.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-door { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.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-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(--lime); }
.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 .btn { height: 52px; }

.progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; display: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--lime); 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(--lime);
}
.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(--lime); 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(--lime-rgb), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.svc:hover { transform: translateY(-4px); border-color: rgba(var(--lime-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(--lime);
}
.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(--lime); 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(--lime-rgb), 0.5);
  color: var(--lime-hi);
}
.svc-note { margin: -12px 0 24px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--lime-rgb), 0.1); color: #c9d6ff; font-size: 13px; }
/* the most popular package stands out */
.svc-hot { border-color: rgba(var(--lime-rgb), 0.6); background: linear-gradient(180deg, #261a06, var(--ink-2) 55%); box-shadow: 0 30px 80px -40px rgba(var(--lime-rgb), 0.8); }
.svc-hot::before { opacity: 1; }
.svc-hot .svc-tag { background: var(--lime-sheen); color: #0b1002; 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(2, 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(--lime-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(--lime-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(--lime-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(3, 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(--lime-sheen); color: #0b1002; }

/* process: light section in brushed silver */
.process { background: linear-gradient(180deg, #f3f5f8, #e4e8ee); color: var(--ink); }
.accent-dark { color: var(--lime-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(--lime-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(--lime), var(--lime)) center / 14px 2px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 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, #4a2f05 0%, #a36e0b 55%, #613f06 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: 96px; 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(--lime); background: rgba(var(--lime-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(--lime); 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(--lime); background: rgba(var(--lime-rgb), 0.12); box-shadow: inset 0 0 0 1px var(--lime); }
.opt input:focus-visible + span { outline: 2px solid var(--lime); 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(--lime); 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: 22px 24px calc(var(--host-badge) + 20px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #0e0f12 16px);
  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(--lime-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; }
.link-btn { background: none; border: 0; padding: 0; margin-right: 12px; color: var(--lime-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.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 the owner 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(--lime-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%, #3f2a08, #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(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lime-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(--lime-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(--lime-sheen); color: #0b1002; }
.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(--display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

@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; }
    .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; }
  .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; }
  /* eight full cards would be a very long scroll: swipe through them instead */
  .svc-grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc { flex: 0 0 86%; scroll-snap-align: start; }
  .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 .btn { flex: 1 1 0; min-width: 0; height: 50px; padding-left: 12px; padding-right: 12px; }
  .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); }
  .wipe { top: var(--ph-top); bottom: auto; height: var(--ph-h); }
  /* fades the frame into the page: painted under the chapter text, so headlines stay on top of it */
  .shade {
    background: linear-gradient(180deg,
      #050506 var(--ph-top),
      transparent calc(var(--ph-top) + var(--ph-h) * 0.16),
      transparent calc(var(--ph-top) + var(--ph-h) * 0.8),
      #050506 calc(var(--ph-top) + var(--ph-h)));
  }
  /* 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; }
}

/* ---------- about ---------- */
.about-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-photos img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; }
.about-photos img:last-child { margin-top: 36px; object-position: 30% 50%; }
.about .display-m { margin-bottom: 24px; font-size: clamp(40px, 5.4vw, 72px); }
.about p:not(.kicker) { color: var(--muted); max-width: 52ch; }
.about-lead { color: var(--text) !important; font-size: 20px; font-weight: 600; }
.about-names { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.about-names span { display: grid; color: var(--muted); font-size: 14px; }
.about-names b { color: var(--text); font-size: 17px; }
.svc-ask { display: block; font-size: 24px; }
@media (max-width: 820px) {
  .about-wrap { grid-template-columns: 1fr; }
}

/* short phone screens: the booking bar already says it, so "Keys back" keeps clear of the photo */
@media (max-aspect-ratio: 9/10) and (max-height: 760px) {
  .chapter.last .sub { display: none; }
}

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

/* demo additions */
.demo-note { position: fixed; z-index: 2000; top: 0; left: 0; right: 0; padding: 5px 10px; background: #000; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }
.demo-note a { color: var(--lime-hi); font-weight: 800; }
.nav { top: 28px !important; }
.brand-text { margin: 0; font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: .06em; color: #fff; text-decoration: none; white-space: nowrap; }
.brand-text.big { font-size: 28px; }
.fl-head .brand-text { color: #fff; }
.owner-sec .owner-note { max-width: 620px; margin: 14px 0 26px; color: var(--muted); }
.owner { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: #0d1014; color: #e9edf1; }
.owner-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #262c33; font-weight: 800; }
.owner-top span { padding: 3px 10px; border-radius: 999px; background: var(--lime); color: #1b0d02; font-size: 13px; }
.lead { display: grid; grid-template-columns: 1fr 1fr 82px; gap: 10px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #1d2329; font-size: 15px; }
.lead:last-child { border-bottom: 0; }
.lead b { font-weight: 800; }
.lead small { display: block; color: #93a0ad; font-size: 13px; }
.lead .st { padding: 4px 6px; border-radius: 999px; background: #252c34; font-size: 12.5px; font-weight: 800; text-align: center; }
.lead.new { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--lime); }
.lead.new .st { background: var(--lime); color: #1b0d02; }