/* Gear Heads website, Showroom theme.
   Light, studio-lit pages; graphite type; Gear Heads orange used only for the one action and live states. */

/* Outfit, self-hosted (SIL Open Font License, see assets/fonts/OFL.txt). One variable file covers weights 200–700. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arial resized to Outfit's width and line height, so text does not jump when Outfit arrives */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  size-adjust: 99.31%;
  ascent-override: 100.7%;
  descent-override: 26.18%;
  line-gap-override: 0%;
}

:root {
  --color-ground: #f3f2ef;
  --color-surface: #ffffff;
  --color-ink: #141414;
  --color-ink-soft: #4a4843;
  --color-ink-mute: #6a6862;
  --color-line: #dcdad4;
  --color-line-strong: #c9c7c1;
  --color-accent: #ff9800;
  --color-accent-ink: #1a1000;
  --color-accent-text: #985800;
  --color-night: #141414;
  --color-whatsapp: #25d366;

  --font-body: "Outfit", "Outfit Fallback", Arial, sans-serif;
  --font-gauge: "Outfit", "Outfit Fallback", Arial, sans-serif;

  --radius-card: 14px;
  --radius-pill: 999px;
  --page-max: 1280px;
  --gutter: max(20px, 4vw);
  --section-pad: clamp(56px, 7vw, 96px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
}
img,
svg {
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-text);
}
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 b,
h2 b,
h3 b {
  font-weight: 600;
}
p {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--color-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus {
  left: 8px;
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section {
  padding-block: var(--section-pad);
}
.section--white {
  background: var(--color-surface);
}
.section--night {
  background: var(--color-night);
  color: #fff;
}
.section--night a:hover {
  color: var(--color-accent);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 32px;
  margin-bottom: 44px;
}
.section-head p {
  color: var(--color-ink-soft);
  max-width: 32em;
}
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Six-item grids split 3 + 3 on desktop and 2 + 2 + 2 on tablet, so no row is left half-empty */
@media (min-width: 640px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.center {
  text-align: center;
  align-items: center;
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-gauge);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.eyebrow--accent {
  color: var(--color-accent-text);
}
.section--night .eyebrow--accent {
  color: var(--color-accent);
}
.gauge {
  font-family: var(--font-gauge);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.display {
  font-size: clamp(48px, 8vw, 116px);
  line-height: 0.98;
}
.title {
  font-size: clamp(38px, 5vw, 72px);
}
.lede {
  font-size: clamp(18px, 1.6vw, 20px);
  color: var(--color-ink-soft);
  max-width: 36em;
}
.section--night .lede {
  color: rgba(255, 255, 255, 0.75);
}
.muted {
  color: var(--color-ink-soft);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 24px;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .btn__dot {
  transform: translateX(3px);
}
.btn--dark {
  background: var(--color-ink);
  color: #fff;
}
.btn--dark:hover {
  background: #2b2b2b;
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--color-ink);
}
.btn--light:hover {
  color: var(--color-ink);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  padding: 0 24px;
}
.btn--ghost:hover {
  background: var(--color-ink);
  color: #fff;
}
.section--night .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.section--night .btn--ghost:hover {
  background: #fff;
  color: var(--color-ink);
}
.link-line {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(243, 242, 239, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--color-ground);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo__img {
  display: block;
  height: 42px;
  width: auto;
}
.footer-logo {
  display: block;
  height: 56px;
  width: auto;
  flex: none;
  align-self: flex-start;
  margin-bottom: 8px;
}
@media (max-width: 860px) {
  .logo__img {
    height: 34px;
  }
}
.nav {
  display: flex;
  gap: 32px;
  font-size: 16px;
  font-weight: 400;
}
.nav a[aria-current="page"] {
  color: var(--color-accent-text);
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-ink);
  width: 24px;
  transition:
    transform 0.25s,
    width 0.25s;
}
.nav-toggle span:last-child {
  width: 16px;
}
.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:last-child {
  width: 24px;
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- hero / showroom stage ---------- */
.hero {
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: 24px;
}
.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
/* Home hero headline sits on one line on desktop so the car shows above the fold */
.hero .display {
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1;
}
.hero .lede {
  max-width: 44em;
}
.stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 21 / 9;
  min-height: 260px;
  margin-top: 44px;
  background: radial-gradient(
    60% 70% at 50% 35%,
    #ffffff,
    #e6e4df 70%,
    #d6d3cc
  );
}
.stage__ring {
  position: absolute;
  left: 50%;
  bottom: -48%;
  width: 72%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 68%,
    rgba(255, 152, 0, 0.35) 80%,
    transparent 92%
  );
  animation: spin 9s linear infinite;
}
.stage__floor {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 8%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.2), transparent);
}
.stage__car {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 9%;
  animation: float 5s ease-in-out infinite;
  color: var(--paint, #7d8085);
  transition: color 0.45s var(--ease-out);
}
.stage__car svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.stage__sweep {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
.stage__note {
  position: absolute;
  left: 20px;
  top: 16px;
  font-size: 13px;
  color: var(--color-ink-mute);
}
.car-highlight {
  transition: opacity 0.45s;
}
.finish-gloss .car-highlight {
  opacity: 0.85;
}
.finish-satin .car-highlight {
  opacity: 0.35;
}
.finish-matte .car-highlight {
  opacity: 0;
}

.picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 28px;
  padding-top: 28px;
}
.swatches,
.finishes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--color-line-strong);
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-ink);
}
.chip {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  min-height: 44px;
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 15px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.chip:hover {
  border-color: var(--color-ink);
}
.chip[aria-pressed="true"] {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}
.picker__label {
  font-size: 15px;
  color: var(--color-ink-soft);
  min-width: 12em;
  text-align: center;
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 28px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat__value {
  font-family: var(--font-gauge);
  font-size: clamp(32px, 3.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__value small {
  font-size: 0.38em;
  letter-spacing: 0.1em;
  margin-left: 6px;
}
.stat__label {
  font-size: 15px;
  color: var(--color-ink-soft);
}

/* ---------- cards ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s;
  min-width: 0;
}
a.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  color: inherit;
}
.card--dark {
  background: var(--color-night);
  color: #fff;
}
.card--dark .muted {
  color: rgba(255, 255, 255, 0.75);
}
.card--dark .eyebrow--accent {
  color: var(--color-accent);
}
.card__title {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card__more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 500;
}
.spec {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-line);
}
.spec dt {
  color: var(--color-ink-soft);
}
.spec dd {
  margin: 0;
  font-family: var(--font-gauge);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: right;
}
.card--dark .spec,
.card--dark .spec div {
  border-color: rgba(255, 255, 255, 0.14);
}
.card--dark .spec dt {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- compare table ---------- */
.table-scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-card);
}
.compare {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.compare th,
.compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  font-size: 16px;
}
.compare thead th {
  border-bottom: 2px solid var(--color-ink);
  font-size: 19px;
  font-weight: 600;
}
.compare tbody th {
  font-weight: 400;
  color: var(--color-ink-soft);
}
.compare .is-featured {
  background: #f8f7f4;
}
.compare td.gauge {
  font-size: 13px;
}

/* ---------- lists ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 2px solid var(--color-ink);
}
.steps li {
  padding: 24px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.steps .num {
  font-family: var(--font-gauge);
  font-size: 11px;
  color: var(--color-accent-text);
}
.steps b {
  font-size: 20px;
  font-weight: 500;
}
.steps span:last-child {
  font-size: 15px;
  color: var(--color-ink-soft);
}
/* six-stage lists: 2 + 2 + 2 on phones, 3 + 3 on tablets, one row of six on desktop */
.steps--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
@media (min-width: 700px) { .steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.section--night .steps {
  border-color: rgba(255, 255, 255, 0.3);
}
.section--night .steps .num {
  color: var(--color-accent);
}
.section--night .steps span:last-child {
  color: rgba(255, 255, 255, 0.72);
}

.faq {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-ink);
}
.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--font-gauge);
  transition: transform 0.25s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq p {
  margin-top: 10px;
  color: var(--color-ink-soft);
}
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
}
.split > :first-child {
  flex: 1 1 300px;
}
.split > :last-child {
  flex: 2 1 520px;
  min-width: 0;
}

/* ---------- placeholders ---------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, #6f727a, #2f3136);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 40%,
    transparent 47%
  );
}
.photo span {
  position: relative;
  z-index: 1;
}
.plate {
  display: inline-flex;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-family: var(--font-gauge);
  font-size: 10px;
  overflow: hidden;
  flex: none;
  line-height: 1;
}
.plate small {
  background: #1d4fbf;
  color: #fff;
  padding: 6px 4px;
  font-size: 6px;
  display: flex;
  align-items: flex-end;
}
.plate span {
  padding: 6px 8px;
  letter-spacing: 0.06em;
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.work-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.work-card__meta b {
  display: block;
  font-size: 19px;
  font-weight: 500;
}
.work-card__meta span {
  font-size: 15px;
  color: var(--color-ink-soft);
}

/* ---------- performance ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 6px 16px 6px 6px;
  width: max-content;
  max-width: 100%;
}
.badge b {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: var(--font-gauge);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 400;
}
.badge span {
  font-family: var(--font-gauge);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.leds {
  display: flex;
  gap: 8px;
}
.leds i {
  width: 26px;
  height: 9px;
  border-radius: 3px;
  animation: led 2.6s linear infinite;
}
.tach {
  width: min(340px, 100%);
  height: auto;
}
.tach__needle {
  transform-origin: 170px 170px;
  animation:
    needle-sweep 2.4s var(--ease-out) 0.3s both,
    needle-idle 1.6s ease-in-out 2.7s infinite;
}
.dyno {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 24px;
}
.dyno svg {
  width: 100%;
  height: auto;
  display: block;
}
.dyno__curve {
  stroke-dasharray: 1400;
  animation: draw 1.8s cubic-bezier(0.4, 0.1, 0.2, 1) both;
}
.dyno__curve--late {
  animation-delay: 0.45s;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  color: var(--color-ink-soft);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend i {
  width: 22px;
  height: 3px;
  display: block;
}
.stage-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stage-panel > div {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-panel > div:first-child {
  background: var(--color-night);
  color: #fff;
}
.stage-panel__big {
  font-family: var(--font-gauge);
  font-size: 30px;
  letter-spacing: -0.02em;
}

/* ---------- booking ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.form legend {
  padding: 0;
  margin-bottom: 12px;
}
.field-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 14px;
  color: var(--color-ink-soft);
}
.input {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 17px;
  width: 100%;
  background: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  padding: 13px 16px;
  min-height: 52px;
}
.input:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}
.input[aria-invalid="true"] {
  border-color: #c4361d;
}
.error {
  font-size: 14px;
  color: #b3301a;
}
.days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.day {
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  min-height: 64px;
}
.day b {
  font-family: var(--font-gauge);
  font-weight: 400;
  font-size: 18px;
}
.day span {
  font-size: 13px;
}
.day[aria-pressed="true"] {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}
.day:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.btn-whatsapp {
  border: 0;
  border-radius: 12px;
  padding: 16px;
  min-height: 56px;
  background: var(--color-whatsapp);
  color: #04210f;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
.btn-whatsapp:hover {
  filter: brightness(1.05);
}
.visit {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.map-box {
  min-height: 260px;
  border-radius: var(--radius-card);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.05) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.05) 0 1px,
      transparent 1px 48px
    ),
    #e9e7e2;
  display: grid;
  place-items: center;
  color: var(--color-ink-soft);
  font-size: 15px;
  text-align: center;
  padding: 20px;
}

/* ---------- footer + mobile bar ---------- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}
.site-footer {
  padding-block: 36px;
  font-size: 14px;
  color: var(--color-ink-soft);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 28px;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.callbar {
  display: none;
}

/* ---------- motion ---------- */
.reveal {
  animation: rise 0.9s var(--ease-out) both;
}
.reveal--2 {
  animation-delay: 0.08s;
}
.reveal--3 {
  animation-delay: 0.16s;
}
.reveal--4 {
  animation-delay: 0.24s;
}
@keyframes rise {
  from {
    transform: translateY(22px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sweep {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }
  60%,
  100% {
    transform: translateX(520%) skewX(-18deg);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes led {
  0%,
  8% {
    opacity: 0.15;
  }
  12%,
  70% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0.15;
  }
}
@keyframes needle-sweep {
  0% {
    transform: rotate(-120deg);
  }
  45% {
    transform: rotate(112deg);
  }
  62% {
    transform: rotate(70deg);
  }
  100% {
    transform: rotate(84deg);
  }
}
@keyframes needle-idle {
  0%,
  100% {
    transform: rotate(84deg);
  }
  50% {
    transform: rotate(90deg);
  }
}
@keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .leds i {
    opacity: 1;
  }
  .tach__needle {
    transform: rotate(84deg);
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }
  .site-header__cta {
    display: none;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--color-ground);
    border-bottom: 1px solid var(--color-line);
    padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 20px;
    font-size: 22px;
  }
  .nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-line);
  }
  .nav[data-open="false"] {
    display: none;
  }
  /* phones: a solid header, because iPhone Safari lets the frosted (backdrop-filter) header
     bleed through the menu inside it and leaves the links faint */
  .site-header {
    background: var(--color-ground);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header.is-racing .nav[data-open] a {
    animation: none;
  }
  /* iPhone Safari's overflow-x: clip also cuts off below the header, which hid the menu;
     the header stops clipping on phones and its sideways race streak is skipped */
  .site-header.site-header {
    overflow: visible;
  }
  .site-header.site-header::after {
    display: none;
  }
  /* open menu: a solid panel down to the call bar, page locked behind it */
  .nav-open {
    overflow: hidden;
  }
  html.nav-open .site-header.site-header.site-header {
    transform: none;
    transition: none;
  }
  .nav-open .nav {
    position: fixed;
    top: var(--nav-top, 80px);
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 0;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .nav-open .callbar {
    z-index: 55;
  }
  .stage {
    aspect-ratio: 4 / 3;
  }
  .stage__car {
    left: 4%;
    right: 4%;
  }
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px max(12px, env(safe-area-inset-right, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    background: rgba(20, 20, 20, 0.96);
  }
  .callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 10px;
    background: #2a2a2a;
    color: #fff;
    font-size: 15px;
  }
  .callbar a:last-child {
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 600;
  }
  body {
    padding-bottom: 76px;
  }
}

/* SVG groups toggled with the hidden attribute need this too */
[hidden] {
  display: none !important;
}

/* ---------- footer (shared partial) ---------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding-block: 64px 28px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.1fr);
  gap: 40px 32px;
}
.footer-brand,
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.footer-brand p {
  color: var(--color-ink-soft);
}
.footer-col a {
  color: var(--color-ink);
  width: max-content;
}
.footer-col .eyebrow {
  margin-bottom: 4px;
}
.footer-reminders p {
  color: var(--color-ink-soft);
  font-size: 15px;
}
.footer-reminders .btn {
  width: max-content;
  margin-top: 6px;
}
.socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  display: grid;
  place-items: center;
  color: var(--color-ink);
  transition:
    background 0.2s,
    color 0.2s;
}
.socials a:hover {
  background: var(--color-ink);
  color: #fff;
}
.footer-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  color: var(--color-ink-mute);
}
@media (max-width: 960px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- storefront + studio ---------- */
.storefront {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 10;
  background: #1a1a1a;
}
.storefront img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  display: block;
}
.storefront__caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-gauge);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}
.prose p {
  color: var(--color-ink-soft);
}
.prose h2,
.prose h3 {
  margin-top: 18px;
  color: var(--color-ink);
}
.prose h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.prose ul {
  margin: 0;
  padding-left: 20px;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  font-family: var(--font-gauge);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}
.card--dark .tags span {
  border-color: rgba(255, 255, 255, 0.25);
}
.review {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}
.review figcaption {
  font-size: 14px;
  color: var(--color-ink-soft);
}
.privacy-note {
  font-size: 14px;
  color: var(--color-ink-mute);
}
/* photo + text rows: give the photo an equal share instead of the narrow column */
.split.split--even > * {
  flex: 1 1 420px;
}

/* real project photos */
.photo-frame img.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 0;
  background: #1a1a1a;
}
.photo-frame img.photo--tall {
  aspect-ratio: 4 / 5;
}
.marquee--photos .marquee__track {
  gap: 16px;
  animation-duration: 70s;
}
.marquee--photos img {
  display: block;
  height: clamp(220px, 28vw, 380px);
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.to-confirm {
  color: var(--color-ink-mute);
}

/* footer links are ink-coloured; keep the dark button label white */
.footer-col .btn--dark,
.footer-col .btn--dark:hover {
  color: #fff;
}

/* home hero photo: slow push-in on load, light sweep, gentle parallax */
.hero-photo { position: relative; overflow: hidden; margin: 28px 0 0; border-radius: var(--radius-card); aspect-ratio: 21 / 9; background: #0d0d0d; }
.hero-photo__zoom { position: absolute; inset: 0; animation: hero-push 2.6s cubic-bezier(.2, .8, .2, 1) both; }
.hero-photo img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 55%; display: block; }
.hero-photo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.hero-photo__video.is-playing { opacity: 1; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .45)); }
.hero-photo__caption { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; font-family: var(--font-gauge); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.hero-photo .stage__sweep { z-index: 1; }
@keyframes hero-push { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 860px) { .hero-photo { aspect-ratio: 1 / 1; margin-top: 22px; } .hero-photo img { object-position: 50% 62%; } }
/* phones: keep the hero to roughly one screen so the car is in view */
@media (max-width: 560px) {
  .hero__intro { gap: 12px; }
  .hero .lede { font-size: 16px; line-height: 1.5; }
  .hero .btn { min-height: 44px; font-size: 15px; gap: 10px; }
  .hero .btn--dark { padding: 4px 4px 4px 18px; }
  .hero .btn--dark .btn__dot { width: 34px; height: 34px; }
  .hero .btn--ghost { padding: 0 18px; }
  .hero__intro > div { gap: 10px !important; flex-wrap: nowrap !important; }
}

/* labels, specs and captions now share Outfit with the body; a heavier weight keeps small caps crisp */
.eyebrow, .gauge, .marquee__item, .badge b, .badge span, .storefront__caption, .hero-photo__caption, .plate, .intro__skip { font-weight: 500; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; }
.stat__value, .stage-panel__big { font-weight: 600; letter-spacing: -0.02em; }

/* performance hero: live dyno pull */
.dyno-live { flex: 1 1 440px; max-width: 580px; background: var(--color-surface); border-radius: var(--radius-card); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .07); min-width: 0; }
.dyno-live__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dyno-live__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--color-ink-soft); }
.dyno-live__status i { width: 8px; height: 8px; border-radius: 50%; background: #e5352b; animation: dyno-blink 1.1s ease-in-out infinite; }
.dyno-live.is-holding .dyno-live__status i { background: #2ecc71; animation: none; }
.dyno-live__chart { width: 100%; height: auto; display: block; }
.dyno-live__readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; border-top: 1px solid var(--color-line); padding-top: 14px; }
.dyno-live__readouts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dyno-live__readouts b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dyno-live__readouts b small { font-size: 13px; font-weight: 500; color: var(--color-ink-mute); letter-spacing: 0; }
.dyno-live__readouts [data-dyno-gain] { color: var(--color-accent-text); }
.dyno-live__legend { flex-direction: column; font-size: 13px; color: var(--color-ink-soft); }
.dyno-live__legend span { display: flex; align-items: center; gap: 8px; }
.dyno-live__legend i { width: 18px; height: 3px; display: block; border-radius: 2px; }
@keyframes dyno-blink { 50% { opacity: .25; } }
@media (max-width: 560px) { .dyno-live__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dyno-live__legend { grid-column: 1 / -1; flex-direction: row; gap: 16px; } }

/* a card that holds two views of one car: crossfades between them, pauses on hover */
.photo-frame--swap { position: relative; }
.photo-frame--swap .photo--alt { position: absolute; inset: 0; opacity: 0; animation: photo-swap 9s ease-in-out 1.5s infinite both; }
.work-card:hover .photo-frame--swap .photo--alt { animation-play-state: paused; }
@keyframes photo-swap { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
/* Three-photo cards: each alt photo holds the frame for a third of the cycle */
.photo-frame--swap3 .photo--alt { animation-name: photo-swap3; animation-duration: 13.5s; animation-delay: 0s; }
.photo-frame--swap3 .photo--alt + .photo--alt { animation-delay: 4.5s; }
@keyframes photo-swap3 { 0%, 28% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-frame--swap .photo--alt { animation: none; opacity: 0; } }

.work-filters { display: flex; flex-wrap: wrap; gap: 10px; }

/* Google rating badge + review cards */
.rating { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); transition: border-color .2s, transform .2s; }
.rating:hover { border-color: var(--color-ink); color: var(--color-ink); transform: translateY(-2px); }
.rating__score { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.rating__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--color-ink-soft); }
.rating__stars { color: #f2a900; letter-spacing: 2px; font-size: 15px; }
.review { background: var(--color-ground); }
.review blockquote { font-size: 17px; }
.review blockquote::before { content: "“"; display: block; font-size: 44px; line-height: .6; color: var(--color-accent); margin-bottom: 6px; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review figcaption b { color: var(--color-ink); font-weight: 600; font-size: 15px; }

/* tap-to-load Google map */
.map-embed { position: relative; overflow: hidden; border-radius: var(--radius-card); min-height: 320px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 44px), #e9e7e2; }
.map-embed__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.map-embed__cover p { color: var(--color-ink-soft); font-size: 15px; line-height: 1.5; }
.map-embed__cover b { color: var(--color-ink); font-size: 18px; font-weight: 600; }
.map-embed__pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--color-accent); transform: rotate(-45deg); box-shadow: 0 0 0 6px rgba(255, 152, 0, .2); }
.map-embed__actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: center; }
.map-embed__note { font-size: 12px !important; color: var(--color-ink-mute) !important; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed.is-loaded .map-embed__cover { display: none; }
.site-footer .footer-brand a[href^="mailto:"] { color: var(--color-ink); }

/* Hidden on screen but still read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- YouTube videos: local thumbnail until tapped, then the player loads in place ---------- */
.video-card { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #0d0d0d; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) brightness(0.86); transition: filter 0.4s, transform 0.6s var(--ease-out); }
.video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5)); }
.video:hover img { filter: none; transform: scale(1.03); }
.video__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; border: 0; background: transparent; cursor: pointer; }
.video__play span { width: 68px; height: 68px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); display: grid; place-items: center; transition: transform 0.3s var(--ease-out); }
.video__play span::before { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--color-accent-ink); }
.video__play:hover span, .video__play:focus-visible span { transform: scale(1.08); }
.video__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; border-radius: var(--radius-card); }
.video__time { position: absolute; right: 14px; bottom: 12px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video.is-playing img, .video.is-playing .video__play, .video.is-playing .video__time, .video.is-playing::after { display: none; }
.video-card__meta { display: flex; flex-direction: column; gap: 4px; }
.video-card__meta b { font-weight: 600; font-size: 17px; }
.video-card__meta span { color: var(--color-ink-mute); font-size: 14px; }
.section--night .video-card__meta span { color: rgba(255, 255, 255, 0.65); }
.video-card--lead .video__play span { width: 84px; height: 84px; }
.video-card--lead .video-card__meta b { font-size: 21px; }

/* Home: the anniversary film leads, two builds stack beside it */
.video-feature { display: grid; gap: 24px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-feature .video-card--lead { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .video-feature .video-card:not(.video-card--lead) .video__play span { width: 46px; height: 46px; }
  .video-feature .video-card:not(.video-card--lead) .video__play span::before { border-width: 8px 0 8px 13px; margin-left: 3px; }
  .video-feature .video-card:not(.video-card--lead) .video-card__meta b { font-size: 15px; }
  .video-feature .video-card:not(.video-card--lead) .video-card__meta span { font-size: 13px; }
  .video-feature .video-card:not(.video-card--lead) .video__time { right: 8px; bottom: 8px; font-size: 11px; }
}
@media (min-width: 900px) {
  .video-feature { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .video-feature .video-card--lead { grid-column: auto; grid-row: span 2; }
}
/* Work: four across on desktop, two on tablet, one on phones */
.video-grid { display: grid; gap: 28px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .video-grid .video-card__meta b { font-size: 16px; } }
/* About: one wide film */
.video-solo { max-width: 1040px; }

/* ---------- Home studio block: three columns of finished cars drifting at different speeds ---------- */
.collage {
  position: relative;
  margin: 0;
  height: clamp(380px, 42vw, 560px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #111;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 10px;
}
.collage__col {
  margin-top: -18%;
  will-change: transform;
}
.collage__col:nth-child(2) { margin-top: -42%; }
/* Each column holds its photos twice and slides by half its height, so the loop has no seam.
   The bottom padding matches the gap so both halves are exactly the same height. */
.collage__track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  animation: collage-loop 70s linear infinite;
}
.collage__col:nth-child(2) .collage__track { animation-direction: reverse; animation-duration: 80s; }
.collage__col:nth-child(3) .collage__track { animation-duration: 62s; }
.collage:hover .collage__track { animation-play-state: paused; }
@keyframes collage-loop { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .collage__track { animation: none; } }
.collage__col img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  filter: saturate(0.9);
  transition: filter 0.4s, transform 0.6s var(--ease-out);
}
.collage__col img:hover { filter: saturate(1.1); transform: scale(1.02); }
/* soft dark fade at top and bottom so the columns read as a backdrop, not a grid */
.collage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.55) 0%, transparent 18%, transparent 70%, rgba(17, 17, 17, 0.85) 100%);
}
.collage__caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-gauge);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .collage { height: 420px; gap: 8px; padding: 0 8px; }
  .collage__track { gap: 8px; padding-bottom: 8px; }
}

/* ---------- Services: plain-English index under the hero ---------- */
.svc-index { display: grid; gap: 28px 32px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-index__group ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.svc-index__group li { border-bottom: 1px solid var(--color-line); }
.svc-index__group a { display: flex; flex-direction: column; gap: 3px; padding: 12px 22px 12px 0; position: relative; transition: color 0.2s; }
.svc-index__group a::after { content: "→"; position: absolute; right: 2px; top: 12px; color: var(--color-accent-text); transition: transform 0.2s; }
.svc-index__group a:hover::after { transform: translateX(3px); }
.svc-index__group b { font-weight: 600; font-size: 16px; }
.svc-index__group span { font-size: 14px; color: var(--color-ink-mute); line-height: 1.45; }

/* ---------- Services: one explained card per service ---------- */
.svc-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; scroll-margin-top: 100px; box-shadow: 0 1px 0 var(--color-line); }
.section--white .svc-card { background: var(--color-ground); }
.svc-card .photo-frame img.photo { aspect-ratio: 16 / 9; }
.svc-card__body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 28px; flex: 1; }
.svc-card__title { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: -6px 0 0; }
.svc-card__what { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); }
.svc-card__good { font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); }
.svc-card__good b { color: var(--color-ink); font-weight: 600; }
.svc-card__incl ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.svc-card__incl li { position: relative; padding-left: 22px; font-size: 15px; }
.svc-card__incl li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 5px; border-left: 2px solid var(--color-accent-text); border-bottom: 2px solid var(--color-accent-text); transform: rotate(-45deg); }
.svc-card__brands { font-size: 15px; font-weight: 500; }
.svc-card__brands .eyebrow { margin-right: 8px; }
.svc-card__proof p { margin-top: 6px; font-size: 15px; line-height: 1.6; }
.svc-card__proof a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line); }
.svc-card__proof a:hover { text-decoration-color: var(--color-ink); }
.svc-card__cta { width: max-content; margin-top: auto; }

/* text-only cards (no job photo yet): an accent rule on top keeps them from looking unfinished */
.svc-card--plain { border-top: 3px solid var(--color-accent); }
.svc-card--plain .svc-card__body { padding-top: 30px; }
/* an odd last card spans the row on desktop: photo on the left, details on the right */
@media (min-width: 900px) {
  .svc-grid > .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .svc-grid > .svc-card:last-child:nth-child(odd):not(.svc-card--plain) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-grid > .svc-card:last-child:nth-child(odd):not(.svc-card--plain) .photo-frame,
  .svc-grid > .svc-card:last-child:nth-child(odd):not(.svc-card--plain) .photo-frame img.photo { height: 100%; aspect-ratio: auto; }
}

/* PPF options table under the PPF card */
.svc-options { margin-top: 48px; display: flex; flex-direction: column; gap: 18px; }
.svc-options__title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.01em; }

/* Home "What we do": one card per service group, its services as small tags */
.svc-cat { gap: 12px; }
.svc-cat__list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-cat__list li { font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--color-ground); color: var(--color-ink-soft); }
.card--dark .svc-cat__list li { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
@media (max-width: 640px) {
  .svc-cat { position: relative; padding: 20px 20px 18px; gap: 8px; }
  .svc-cat .card__more { display: none; }
  .svc-cat::before { content: "→"; position: absolute; top: 18px; right: 20px; font-size: 18px; color: var(--color-accent-text); }
  .svc-cat.card--dark::before { color: var(--color-accent); }
  .svc-cat .card__title { font-size: 22px; }
  .svc-cat__list li { font-size: 12px; padding: 4px 9px; }
}

/* Phones: "What we do" becomes a swipe rail; the next card peeks in so it reads as more to see */
.rail-dots { display: none; }
@media (max-width: 640px) {
  .svc-rail {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    padding: 4px max(var(--gutter), env(safe-area-inset-left, 0px)) 8px;
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .svc-rail::-webkit-scrollbar { display: none; }
  .svc-rail > * { flex: 0 0 82%; scroll-snap-align: start; }
  /* Cards off to the side never cross the reveal line, so on the rail they show straight away */
  .js .svc-rail > [data-reveal] { opacity: 1; transform: none; }
  .rail-dots { display: flex; justify-content: center; margin-top: 6px; }
  /* The button is a comfortable tap target; the visible dot is drawn inside it */
  .rail-dots__dot {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 28px;
    padding: 0 4px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .rail-dots__dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-line);
    transition: width 0.3s var(--ease-out), background 0.3s;
  }
  .rail-dots__dot[aria-current="true"]::before { width: 22px; background: var(--color-ink); }
}

/* section heads that carry an intro and a link on the right */
.section-head__aside { gap: 12px; align-items: flex-start; }
/* landing pages with two or three videos keep them in one row on desktop */
@media (min-width: 1100px) {
  .video-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Home reviews: ask happy customers for a Google review */
.review-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px 28px; border-radius: var(--radius-card); background: var(--color-ground); }
.review-cta p { max-width: 40em; color: var(--color-ink-soft); }

/* Work cards: link to the job's story or video */
.work-card__link { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line-strong); }
.work-card__link:hover { text-decoration-color: var(--color-ink); }

/* About: founder named in text (no portrait) */
.founder { display: flex; flex-direction: column; gap: 8px; padding: 28px 30px; border-radius: var(--radius-card); background: var(--color-surface); border-left: 3px solid var(--color-accent); max-width: 640px; }
.founder__name { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; }
.founder__role { color: var(--color-ink-soft); }

/* spam trap on the forms: hidden from people, filled in only by bots */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Home: live job tracking ---------- */
.track { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .track { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } }
.track__copy { display: flex; flex-direction: column; gap: 22px; }
.track__lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, 0.75); max-width: 36em; }
.track__points { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 18px; }
.track__points li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 4px; }
.track__n { grid-row: span 2; color: var(--color-accent); font-size: 13px; font-weight: 600; padding-top: 3px; }
.track__points b { font-size: 18px; font-weight: 600; }
.track__points li > span:last-child { color: rgba(255, 255, 255, 0.68); line-height: 1.55; }
.track__visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.track__phone { width: min(100%, 380px); padding: 14px 14px 18px; border-radius: 38px; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 12px; }
.track__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 2px; }
.track__bar img { height: 18px; width: auto; }
.track__bar span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.track__hero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }
.track__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75)); }
.track__hero p { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font-weight: 600; font-size: 15px; display: flex; flex-direction: column; gap: 2px; }
.track__hero p span { font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.track__card { background: #161616; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.track__eyebrow { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.track__headline { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.track__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.track__facts div { display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.track__facts div + div { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.track__facts dt { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.track__facts dd { margin: 0; font-size: 16px; font-weight: 600; }
.track__facts small { font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.track__accent { color: var(--color-accent); }
.track__now { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.track__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.6); animation: track-pulse 1.6s ease-out infinite; }
@keyframes track-pulse { to { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } }
.track__note { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.track__photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 72px); gap: 8px; }
.track__photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.track__stages { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.track__stages button { width: 100%; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 9px 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: none; color: rgba(255, 255, 255, 0.5); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.track__stages button:hover, .track__stages button:focus-visible { color: #fff; }
.track__mark { width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.track__stages [data-state="done"] { color: rgba(255, 255, 255, 0.85); }
.track__stages [data-state="done"] .track__mark { background: var(--color-accent); border-color: var(--color-accent); }
.track__stages [data-state="now"] { color: #fff; font-weight: 600; }
.track__stages [data-state="now"] .track__mark { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.25); }
.track__stages [data-state="now"] .track__status { color: var(--color-accent); }
.track__status { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.track__caption { font-size: 13px; color: rgba(255, 255, 255, 0.55); text-align: center; max-width: 30em; }
@media (prefers-reduced-motion: reduce) { .track__pulse { animation: none; } }

/* Lock the page horizontally so nothing (an animation, a wide badge) can make phones slide sideways.
   clip keeps the sticky header working; very old browsers without clip fall back to hidden. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
img, video, svg, iframe { max-width: 100%; }
.badge { flex-wrap: wrap; }
.badge span { white-space: normal; min-width: 0; }
/* flex columns may shrink below their content's natural width, so long badges and words wrap instead of overflowing */
.stack { min-width: 0; }
@media (max-width: 480px) { .badge { width: auto; } }

/* iPhone Safari: rounded boxes that clip moving pictures (zoom, parallax, scrolling strips)
   lose their round corners while the picture moves; isolation keeps the corners clipped */
.stage,
.photo,
.plate,
.stage-panel,
.storefront,
.hero-photo,
.map-embed,
.video,
.collage,
.svc-card,
.track__hero,
.work-card .photo-frame {
  isolation: isolate;
}