/* Cloak inner pages: services, showroom, about, warranty, contact, privacy.
   Same tokens as the homepage. The gold seam stays: every page is still
   an argument between exposed and cloaked, just quieter. */

:root {
  --ink: #f3eee4;
  --ink-soft: #b9b09a;
  --gold: #c9a45c;
  --gold-hi: #dcbb72;
  --gold-ink: #14110a;
  --canvas: #0c0c0d;
  --surface: #151514;
  --cold: #17181a;
  --cold-ink: #e6e6e4;
  --cold-soft: #a7aaaf;
  --line: rgb(243 238 228 / .12);
  --display: "Archivo", "Geist", system-ui, sans-serif;
  --text: "Geist", system-ui, sans-serif;
  --gut: clamp(1.15rem, 4vw, 4rem);
  --maxw: 78rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar: 4.5rem;
}
* { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; scroll-padding-top: calc(var(--bar) + 1rem); }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--text); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgb(201 164 92 / .35); color: #fff; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: .5rem 1rem; }
.skip:focus { left: .5rem; }

/* ----------------------------------------------------------- type --- */
.h1, .h2, .h3 { font-family: var(--display); font-stretch: 112%; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4.1rem); line-height: 1; font-weight: 560; }
.h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.05; font-weight: 560; }
.h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.label {
  font-family: var(--display); font-stretch: 125%; font-weight: 600;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin: 0; text-wrap: pretty; }
.prose { max-width: 66ch; color: var(--ink-soft); }
.prose p { margin: 0 0 1em; }
.prose h2 { font-family: var(--display); font-stretch: 112%; color: var(--ink); font-size: 1.35rem; letter-spacing: -0.01em; margin: 2.4em 0 .7em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1em; }
.prose li { margin: .35em 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.todo {
  display: inline; padding: .05em .4em; border-radius: 2px;
  background: rgb(224 128 106 / .14); color: #f2a593; font-size: .92em;
  border: 1px dashed rgb(224 128 106 / .55);
}

/* --------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1.3rem; white-space: nowrap; text-decoration: none;
  font-family: var(--display); font-stretch: 118%; font-weight: 650; font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold); border: 1px solid var(--gold); border-radius: 2px;
  box-shadow: 0 2px 8px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 240 200 / .35); cursor: pointer;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease), color 160ms var(--ease);
}
.btn:hover { background: var(--gold-hi); color: var(--gold-ink); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgb(243 238 228 / .3); box-shadow: none; }
.btn--ghost:hover { background: rgb(201 164 92 / .1); color: var(--ink); border-color: var(--gold); }

/* ------------------------------------------------------------ bar --- */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--gut);
  background: rgb(12 12 13 / .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(201 164 92 / .22);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav > a, .nav__toggle {
  font: inherit; font-size: .9rem; color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: .6rem .8rem; border-radius: 2px; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: color 140ms var(--ease);
}
.nav > a:hover, .nav__toggle:hover { color: var(--gold); }
.nav [aria-current="page"], .nav__toggle.is-current { color: var(--gold); }
.nav__toggle svg { width: .7rem; transition: transform 180ms var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__group { position: relative; }
.nav__drop {
  position: absolute; top: calc(100% + .6rem); left: -.5rem; min-width: 17rem;
  list-style: none; margin: 0; padding: .5rem;
  background: #121212; border: 1px solid rgb(201 164 92 / .28); border-radius: 3px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .55);
  opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
}
.nav__group.is-open .nav__drop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav__drop a { display: block; padding: .6rem .75rem; text-decoration: none; border-radius: 2px; font-size: .95rem; }
.nav__drop a:hover, .nav__drop a:focus-visible { background: rgb(201 164 92 / .1); color: var(--ink); }
.nav__drop a[aria-current="page"] { color: var(--gold); }
.nav__drop small { display: block; color: var(--ink-soft); font-size: .78rem; }
.nav__drop .nav__all { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .7rem; font-size: .85rem; color: var(--ink-soft); }
.bar .btn { margin-left: .75rem; }
.menu-btn { display: none; }

/* ------------------------------------------------- full-screen menu --- */
.menu-btn {
  font: inherit; font-family: var(--display); font-stretch: 118%; font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: none; border: 1px solid rgb(243 238 228 / .28); border-radius: 2px;
  min-height: 2.5rem; padding: 0 .9rem; cursor: pointer; align-items: center; gap: .55rem;
}
.menu-btn:hover { border-color: var(--gold); color: var(--gold); }
.menu-btn i { display: grid; gap: 4px; }
.menu-btn i::before, .menu-btn i::after { content: ""; display: block; width: 16px; height: 1.5px; background: currentColor; }
.overlay {
  position: fixed; inset: 0; z-index: 120; background: #0b0b0c;
  display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--gut);
  overflow-y: auto; overscroll-behavior: contain;
}
.overlay[hidden] { display: none; }
.overlay__top { display: flex; align-items: center; justify-content: space-between; height: var(--bar); border-bottom: 1px solid rgb(201 164 92 / .22); }
.overlay__close { font: inherit; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-family: var(--display); font-stretch: 118%; font-weight: 600; color: var(--ink); background: none; border: 1px solid rgb(243 238 228 / .28); border-radius: 2px; min-height: 2.5rem; padding: 0 1rem; cursor: pointer; }
.overlay__close:hover { border-color: var(--gold); color: var(--gold); }
.overlay__body { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 6vw, 6rem); padding: clamp(2rem, 6vh, 4rem) 0; align-content: start; }
.overlay__list { list-style: none; margin: 0; padding: 0; }
.overlay__list a {
  display: block; text-decoration: none; padding: .45rem 0;
  font-family: var(--display); font-stretch: 112%; font-weight: 560; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.12;
}
.overlay__list--services a { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); color: var(--ink); }
.overlay__list--services a span { display: block; font-family: var(--text); font-stretch: 100%; font-weight: 400; font-size: .85rem; letter-spacing: 0; color: var(--ink-soft); }
.overlay__list a:hover, .overlay__list a[aria-current="page"] { color: var(--gold); }
.overlay__foot { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; padding: 1.25rem 0 1.75rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); }
.overlay__foot a { text-decoration: none; }
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------- layout --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.stack { display: grid; gap: 1.25rem; align-content: start; }
.crumbs { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.crumbs a { text-decoration: none; }
.crumbs span { margin: 0 .45rem; opacity: .5; }

/* page hero: the split, quietly. Exposed on the left, cloaked on the right */
.phero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(68vh, 40rem); border-bottom: 1px solid var(--line); position: relative; }
.phero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, rgb(201 164 92 / .6) 15%, rgb(201 164 92 / .6) 85%, transparent); }
.phero__l { background: var(--cold); color: var(--cold-ink); display: flex; align-items: flex-end; padding: clamp(2.5rem, 6vw, 5rem) var(--gut); }
.phero__l .stack { max-width: 34rem; margin-left: auto; width: 100%; }
.phero__l .lede { color: var(--cold-soft); }
.phero__r { position: relative; overflow: hidden; background: #0a0a0a; }
.phero__r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__r figcaption { position: absolute; left: var(--gut); right: var(--gut); bottom: 1.2rem; z-index: 2; font-size: .78rem; color: #ddd5c4; }
.phero__r::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(to top, rgb(8 8 8 / .85), transparent); }
.phero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.phero--text { min-height: auto; }
.phero--text .phero__l { align-items: flex-end; min-height: 22rem; }
.phero--text .phero__r { display: flex; align-items: flex-end; padding: clamp(2.5rem, 6vw, 5rem) var(--gut); background: radial-gradient(80% 70% at 30% 100%, rgb(201 164 92 / .08), transparent 70%), var(--canvas); }

/* two-column body: the side column carries the facts */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.cols--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.options { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.options li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .25rem; }
.options b { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.options span { color: var(--ink-soft); font-size: .95rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.steps li { counter-increment: step; padding-top: 1.1rem; border-top: 1px solid rgb(201 164 92 / .45); display: grid; gap: .45rem; align-content: start; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-stretch: 125%; font-size: .75rem; letter-spacing: .2em; color: var(--gold); }
.steps b { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.05rem; }
.steps span { color: var(--ink-soft); font-size: .93rem; }

.note { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 1.5rem; display: grid; gap: .75rem; }
.note .h3 { font-size: 1.1rem; }
.note p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.note ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .93rem; }
.note li { margin: .3em 0; }

/* ------------------------------------------------------ job cards --- */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.job { display: grid; gap: .75rem; text-decoration: none; align-content: start; }
.job__img { overflow: hidden; border-radius: 2px; background: #111; aspect-ratio: 4 / 3; }
.job__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.job b { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.job span { color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.job:hover { color: var(--ink); }
.job:hover b { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .job:hover .job__img img { transform: scale(1.04); } }
.job[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.filters button {
  font: inherit; font-size: .88rem; color: var(--ink); background: transparent; cursor: pointer;
  min-height: 2.5rem; padding: 0 1rem; border: 1px solid rgb(243 238 228 / .22); border-radius: 2px;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}
.filters button:hover { border-color: rgb(201 164 92 / .7); }
.filters button[aria-pressed="true"] { background: rgb(201 164 92 / .14); border-color: var(--gold); color: #f0d79e; }
.count { color: var(--ink-soft); font-size: .88rem; margin: -1rem 0 1.5rem; }

/* job detail */
.work { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.work li { padding: .45rem .8rem; border: 1px solid rgb(201 164 92 / .45); border-radius: 2px; font-size: .9rem; }
.gallery { columns: 3 18rem; column-gap: 1rem; }
.gallery figure { margin: 0 0 1rem; break-inside: avoid; }
.gallery img { width: 100%; border-radius: 2px; }
.gallery figcaption { font-size: .78rem; color: var(--ink-soft); margin-top: .45rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--display); font-stretch: 118%; }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pager a { text-decoration: none; display: grid; gap: .2rem; }
.pager small { color: var(--ink-soft); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------- service cards --- */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc a { background: var(--canvas); display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem; padding: 1.25rem; text-decoration: none; align-items: center; }
.svc a:hover { background: #121212; color: var(--ink); }
.svc a:hover b { color: var(--gold); }
.svc img { width: 9rem; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.svc b { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; display: block; margin-bottom: .3rem; }
.svc span { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }

/* --------------------------------------------------------- quotes --- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.quotes blockquote { margin: 0; padding: 1.5rem 0 0; border-top: 1px solid rgb(201 164 92 / .45); display: grid; gap: 1rem; align-content: start; }
.quotes p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.quotes cite { font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--display); font-stretch: 118%; }

/* ------------------------------------------------------ CTA band --- */
.band { background: radial-gradient(70% 120% at 80% 0%, rgb(201 164 92 / .12), transparent 60%), var(--surface); border-top: 1px solid rgb(201 164 92 / .3); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------- forms --- */
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
.field { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field label, .field legend { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--display); font-stretch: 118%; font-weight: 600; color: var(--ink-soft); padding: 0; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgb(243 238 228 / .28); padding: .55rem 0; border-radius: 0; resize: vertical; }
.field input::placeholder { color: rgb(185 176 154 / .55); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.field [aria-invalid="true"] { border-bottom-color: #e0806a; }
.services { display: flex; flex-wrap: wrap; gap: .5rem; }
.services legend { margin-bottom: .6rem; width: 100%; }
.services label { position: relative; text-transform: none; letter-spacing: 0; font-family: var(--text); font-stretch: 100%; font-weight: 400; font-size: .9rem; color: var(--ink); cursor: pointer; }
.services input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.services span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid rgb(243 238 228 / .22); border-radius: 2px; transition: border-color 140ms var(--ease), background-color 140ms var(--ease); }
.services label:hover span { border-color: rgb(201 164 92 / .7); }
.services input:checked + span { background: rgb(201 164 92 / .14); border-color: var(--gold); color: #f0d79e; }
.services input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.quote__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .5rem; }
.quote__status { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.quote__status.is-error { color: #ef9b86; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.facts li { display: grid; gap: .3rem; }
.facts small { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-family: var(--display); font-stretch: 118%; font-weight: 600; }
.facts a { font-size: 1.1rem; }

/* --------------------------------------------------------- footer --- */
.foot { border-top: 1px solid rgb(201 164 92 / .25); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .9rem; color: var(--ink-soft); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.foot__grid img { width: 8rem; margin-bottom: 1rem; }
.foot h2 { font-family: var(--display); font-stretch: 118%; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { text-decoration: none; }
.foot address { font-style: normal; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8rem; }

/* entrance: small, once */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
  .rise.is-in { opacity: 1; transform: none; }
}

/* ========================================================= phones === */
@media (max-width: 980px) {
  .nav, .bar > .btn { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --bar: 3.75rem; }
  .phero { grid-template-columns: 1fr; min-height: 0; }
  .phero::after { display: none; }
  .phero__l { order: 2; padding-top: 2rem; }
  .phero__l .stack { margin: 0; }
  .phero__r { order: 1; aspect-ratio: 4 / 3; border-bottom: 1px solid rgb(201 164 92 / .55); }
  .phero--text .phero__l { min-height: 0; order: 1; }
  .phero--text .phero__r { order: 2; padding-top: 0; aspect-ratio: auto; border-bottom: 0; }
  .cols, .cols--wide { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc a { grid-template-columns: 6rem 1fr; }
  .svc img { width: 6rem; }
  .overlay__body { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; }
}
.kicker { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--cold-soft); max-width: 34ch; }
@media (max-width: 520px) {
  .jobs { grid-template-columns: 1fr 1fr; gap: 1.25rem .8rem; }
  .job b { font-size: .95rem; }
  .job span { font-size: .8rem; }
  .foot__grid { grid-template-columns: 1fr; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* phone action bar: quote and call within thumb reach */
.dock { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  .dock {
    display: grid; grid-template-columns: auto 1fr; gap: .6rem;
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background: rgb(12 12 13 / .92); border-top: 1px solid rgb(201 164 92 / .3); backdrop-filter: blur(10px);
    transition: transform 260ms var(--ease), opacity 200ms var(--ease);
  }
  .dock.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .dock a { min-height: 3rem; }
  .dock__call { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1rem; border: 1px solid rgb(243 238 228 / .3); border-radius: 2px; color: var(--ink); text-decoration: none; font-size: .95rem; }
  .dock__call svg { width: 1.05rem; height: 1.05rem; color: var(--gold); }
}

/* ============================================================ lean UI ===
   Slimmer controls: sentence case, lighter weight, no heavy boxes. */
.btn {
  min-height: 2.5rem; padding: 0 1.15rem; border-radius: 4px;
  font-family: var(--text); font-stretch: 100%; font-weight: 550;
  font-size: .86rem; letter-spacing: .01em; text-transform: none;
  box-shadow: none;
}
.btn--ghost { border-color: rgb(243 238 228 / .18); }
.menu-btn {
  min-height: 2.5rem; padding: 0 .4rem 0 .5rem; gap: .6rem;
  background: none; border: 0; border-radius: 4px; backdrop-filter: none;
  font-family: var(--text); font-stretch: 100%; font-weight: 500;
  font-size: .86rem; letter-spacing: .01em; text-transform: none;
}
.menu-btn i { gap: 5px; }
.menu-btn i::before { width: 18px; height: 1.5px; }
.menu-btn i::after { width: 12px; height: 1.5px; margin-left: auto; }
.menu-btn:hover i::after { width: 18px; }
.menu-btn i::after { transition: width 180ms ease-out; }
.overlay__close { font-family: var(--text); font-stretch: 100%; font-weight: 500; font-size: .86rem; letter-spacing: .01em; text-transform: none; border-color: rgb(243 238 228 / .18); border-radius: 4px; }
@media (max-width: 760px) {
  .dock { grid-template-columns: 2.75rem 1fr; gap: .5rem; padding: .55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom)); }
  .dock a { min-height: 2.75rem; }
  .dock .btn { font-size: .92rem; }
  .dock__call { justify-content: center; padding: 0; gap: 0; font-size: 0; border: 1px solid rgb(243 238 228 / .18); border-radius: 4px; background: rgb(243 238 228 / .04); }
  .dock__call svg { width: 1.15rem; height: 1.15rem; }
}
@media (max-width: 380px) { .menu-btn { font-size: .86rem; gap: .6rem; } }

/* ---------------------------------------------------- job carousel --- */
.carousel { position: relative; }
.carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 4px; background: #0a0a0b;
  border: 1px solid var(--line);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.carousel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; height: min(74vh, 48rem); display: grid; place-items: center; }
.carousel__slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.carousel__slide figcaption {
  position: absolute; left: 1rem; bottom: 1rem; padding: .3rem .6rem; border-radius: 4px;
  background: rgb(10 10 11 / .72); backdrop-filter: blur(4px); color: var(--ink);
  font-size: .78rem; letter-spacing: .02em;
}
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgb(10 10 11 / .7); color: var(--ink); border: 1px solid rgb(243 238 228 / .2); backdrop-filter: blur(6px);
  transition: background-color 160ms var(--ease), opacity 160ms var(--ease);
}
.carousel__btn svg { width: 1.15rem; height: 1.15rem; }
.carousel__btn:hover { background: rgb(201 164 92 / .25); }
.carousel__btn:disabled { opacity: 0; pointer-events: none; }
.carousel__btn--prev { left: .9rem; }
.carousel__btn--next { right: .9rem; }
.carousel__count {
  position: absolute; right: 1rem; bottom: 1rem; margin: 0; padding: .3rem .6rem; border-radius: 4px;
  background: rgb(10 10 11 / .72); font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: 0 0 auto; width: 4.5rem; height: 3.4rem; padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #111; cursor: pointer; opacity: .55; transition: opacity 160ms var(--ease), border-color 160ms var(--ease); }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover { opacity: .85; }
.thumbs button[aria-current="true"] { opacity: 1; border-color: var(--gold); }
@media (max-width: 760px) {
  .carousel__slide { height: auto; aspect-ratio: 4 / 5; max-height: 64svh; }
  .carousel__btn { width: 2.4rem; height: 2.4rem; }
  .carousel__btn--prev { left: .5rem; } .carousel__btn--next { right: .5rem; }
  .wrap:has(> .carousel) { padding-left: 0; padding-right: 0; }
  .carousel__track { border-radius: 0; border-left: 0; border-right: 0; }
  .thumbs { padding-left: var(--gut); padding-right: var(--gut); }
}
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }

/* cookie banner */
.consent {
  position: fixed; z-index: 110; left: 1.25rem; bottom: 1.25rem; max-width: 26rem;
  display: grid; gap: .9rem; padding: 1.1rem 1.15rem;
  background: rgb(18 18 19 / .96); backdrop-filter: blur(10px);
  border: 1px solid rgb(201 164 92 / .3); border-radius: 6px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .5);
  font-family: var(--text); font-size: .88rem; line-height: 1.5; color: #e9e4d8;
}
.consent p { margin: 0; }
.consent a { color: var(--gold); }
.consent__btns { display: flex; gap: .5rem; justify-content: flex-end; }
.consent .btn { min-height: 2.4rem; }
body.consent-open .dock { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .consent { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); max-width: none; }
  .consent__btns .btn { flex: 1; }
}

/* =========================================================== smooth ===
   Scroll performance: nothing is repainted per frame. No backdrop blur,
   no full-screen grain, no masked or blended layers that move, and the
   moving parts are plain transforms on their own layers. */
.sc-grain { display: none !important; }
.divider, .divider::before, .divider__mark, .dock, .menu-btn, .divider__menu,
.frame__tag, .consent, .carousel__btn, .bar, .overlay, .overlay__close { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.carousel__slide figcaption { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bar { background: rgb(12 12 13 / .97); }
@media (max-width: 760px) { .dock { background: #0c0c0d; } }

/* ============================================================== menu ===
   One compact list. Services opens in place. Rounded controls. */
.overlay__body { display: block; padding: 1.25rem 0 1.5rem; max-width: 34rem; width: 100%; }
.ov { list-style: none; margin: 0; padding: 0; }
.ov > li { border-bottom: 1px solid rgb(243 238 228 / .09); }
.ov > li > a, .ov__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .1rem; text-decoration: none; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-stretch: 108%; font-weight: 560; font-size: 1.28rem; letter-spacing: -0.015em; line-height: 1.2;
  list-style: none;
}
.ov__group > summary::-webkit-details-marker { display: none; }
.ov__group > summary svg { width: .8rem; height: .8rem; color: var(--ink-soft); transition: transform 200ms ease-out; flex: none; }
.ov__group[open] > summary svg { transform: rotate(180deg); }
.ov > li > a:hover, .ov__group > summary:hover, .ov a[aria-current="page"] { color: var(--gold); }
.ov__sub { list-style: none; margin: 0; padding: 0 0 .8rem .15rem; display: grid; gap: .1rem; }
.ov__sub a { display: block; padding: .5rem .9rem; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-family: var(--text); font-size: 1rem; }
.ov__sub a:hover, .ov__sub a[aria-current="page"] { color: var(--ink); background: rgb(243 238 228 / .06); }
.ov__cta { margin-top: 1.5rem; border-radius: 999px; min-height: 3rem; padding: 0 1.6rem; }
.overlay__close { border-radius: 999px; padding: 0 1.1rem; }
.overlay__foot { font-size: .85rem; }
@media (max-width: 760px) {
  .menu-btn, .divider__menu { border: 1px solid rgb(243 238 228 / .16) !important; border-radius: 999px !important; padding: 0 .95rem !important; min-height: 2.4rem; background: rgb(243 238 228 / .04) !important; }
  .ov__cta { width: 100%; }
  .overlay__foot { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
@media (hover: none) {
  .ov > li > a:hover, .ov__group > summary:hover { color: inherit; }
  .ov a[aria-current="page"] { color: var(--ov-gold, #c9a45c); }
  .overlay__close:hover { color: inherit; border-color: rgb(243 238 228 / .28); }
}

/* ===================================================== google reviews === */
.rating { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-family: var(--text); font-size: .9rem; line-height: 1.2; }
.rating b { font-weight: 650; }
.rating span:last-child { color: var(--ink-soft); }
.rating:hover span:last-child { color: var(--ink); }
.rating__stars { color: #e8b84a; letter-spacing: .08em; font-size: .95em; white-space: nowrap; }
.rating--hero { display: flex; margin-top: .9rem; font-size: .88rem; }
.rating--foot { margin-top: 1rem; font-size: .82rem; }
.reviews { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--canvas); border-top: 1px solid rgb(243 238 228 / .08); position: relative; z-index: 1; }
.reviews__wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--gut); }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.reviews__title { margin: .4rem 0 .3rem; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); display: flex; align-items: center; gap: .9rem; }
.reviews__title .rating__stars { font-size: .45em; }
.reviews__sub { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.reviews__all { border-radius: 999px; }
.reviews__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review { margin: 0; padding: 1.4rem 1.4rem 1.25rem; border-radius: 10px; background: var(--surface); border: 1px solid rgb(243 238 228 / .08); display: flex; flex-direction: column; gap: .9rem; }
.review blockquote { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); flex: 1; }
.review figcaption { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; border-top: 1px solid rgb(243 238 228 / .08); padding-top: .8rem; }
.review figcaption b { font-weight: 600; color: var(--ink); }
.review figcaption span { color: var(--ink-soft); text-align: right; }
@media (max-width: 980px) { .reviews__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .reviews__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) .25rem; scroll-padding: 0 var(--gut); gap: .75rem; }
  .reviews__rail::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 84%; scroll-snap-align: start; }
  .reviews__all { width: 100%; }
  .rating--hero { justify-content: center; }
}
html { scroll-behavior: auto; }

/* ============================================================ misc === */
.mark-symbol { display: block; width: auto; height: 2.1rem; }
.overlay__top .mark-symbol { height: 2rem; }
@media (max-width: 760px) { .mark-symbol { height: 1.85rem; } }
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.team li { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.team li:first-child { border-top: 0; padding-top: 0; }
.team b { color: var(--ink); font-weight: 600; font-size: 1rem; }
.team span { color: var(--ink-soft); font-size: .9rem; }
.note .team { padding-left: 0; }
.bar { background: #0c0c0d; }

/* ============================================================ brand ===
   The full CLOAK wordmark at the top. On scroll the letters close in on
   the swift (the O), then the swift slides into the corner on its own.
   The swift image sits exactly over the swift inside the wordmark. */
.brand { position: relative; display: block; flex: none; height: 2rem; aspect-ratio: 5 / 1; }
.brand img { position: absolute; display: block; max-width: none; }
.brand__word {
  inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 0);
  transition: opacity 0s linear 360ms, clip-path 380ms var(--ease) 360ms;
}
.brand__bird {
  left: 26.667%; top: 1.667%; width: 32.333%; height: auto; opacity: 0;
  transition: transform 360ms var(--ease), opacity 0s linear 360ms;
}
.is-scrolled .brand__word { clip-path: inset(0 41% 0 26.6%); opacity: 0; transition: clip-path 340ms var(--ease), opacity 0s linear 340ms; }
.is-scrolled .brand__bird { opacity: 1; transform: translateX(-82.47%); transition: opacity 0s linear 340ms, transform 420ms var(--ease) 340ms; }
.ov-word { display: block; height: 1.6rem; width: auto; }
@media (max-width: 760px) { .brand { height: 1.6rem; } .ov-word { height: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .brand img { transition: none !important; } }

/* =========================================================== homepage === */
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* opener: the road, over a real photo */
.op { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100svh - var(--bar)), 56rem); border-bottom: 1px solid var(--line); }
.op__img { margin: 0; position: relative; overflow: hidden; order: 2; background: #0a0a0a; }
.op__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.op__copy { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: clamp(2.5rem, 6vw, 5rem) var(--gut); max-width: 44rem; margin-left: auto; width: 100%; }
.op__title { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 640; letter-spacing: -0.035em; line-height: .95; font-size: clamp(2.7rem, 1.2rem + 4.6vw, 5.4rem); text-wrap: balance; }
.op__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; }
.op__list li { position: relative; padding-left: 1.2rem; }
.op__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: .55rem; height: 1px; background: var(--gold); }
.op__meta { margin: 0; font-size: .9rem; color: var(--ink); }

/* before / after pairs */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.4vw, 1.1rem); }
.shot { margin: 0; }
.shot__img { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; background: #111; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; }
.shot__tag { position: absolute; left: .7rem; top: .7rem; z-index: 1; padding: .28rem .7rem; border-radius: 999px; background: rgb(10 10 11 / .8); color: var(--ink); font-size: .78rem; font-weight: 550; letter-spacing: .01em; }
.shot__tag--after { background: var(--gold); color: var(--gold-ink); }

/* how we get them, how we give them back */
.hand__head, .svcs__head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sign { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.5rem; border-top: 1px solid rgb(201 164 92 / .45); max-width: 40rem; }
.sign p { margin: 0 0 .7rem; font-family: var(--display); font-stretch: 110%; font-weight: 560; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); }
.sign cite { font-style: normal; color: var(--gold); font-size: .95rem; }
.hand__more { margin: 1.25rem 0 0; font-size: .92rem; }

/* services, one row each */
.ba { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2.25rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
.ba__text { display: grid; gap: .9rem; align-content: start; }
.ba__text p { margin: 0; color: var(--ink-soft); }
.ba__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.ba__car { display: grid; gap: .1rem; font-size: .88rem; }
.ba__car a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ba__car a:hover { color: var(--gold); }
.ba__more { justify-self: start; color: var(--gold); font-size: .92rem; }

/* the shop and recent work */
.shop__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.shop__text { display: grid; gap: 1.1rem; align-content: start; }
.shop__pics { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; aspect-ratio: 5 / 4; }
.shop__pics figure { margin: 0; overflow: hidden; border-radius: 6px; background: #111; }
.shop__pics figure:first-child { grid-row: 1 / 3; }
.shop__pics img { width: 100%; height: 100%; object-fit: cover; }
.recent { margin-top: clamp(3.5rem, 7vw, 6rem); }
.recent__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.75rem; }
.social { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.social p { margin: 0; color: var(--ink-soft); }

/* quote */
.ask { background: radial-gradient(70% 90% at 85% 0%, rgb(201 164 92 / .1), transparent 60%), var(--surface); border-top: 1px solid rgb(201 164 92 / .3); }
.car-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.5rem; }

@media (max-width: 980px) {
  .ba { grid-template-columns: 1fr; }
  .shop__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .op { grid-template-columns: 1fr; min-height: 0; }
  .op__img { order: 0; aspect-ratio: 4 / 5; max-height: 70svh; }
  .op__img::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to top, var(--canvas), rgb(12 12 13 / 0)); }
  .op__copy { position: relative; z-index: 1; margin-top: -7.5rem; padding-top: 0; padding-bottom: 2.75rem; gap: 1.25rem; }
  .op__title { font-size: clamp(2.6rem, 11.5vw, 3.4rem); }
  .op__list { font-size: 1rem; }
  .pair { grid-template-columns: 1fr; gap: .6rem; }
  .shop__pics { aspect-ratio: auto; grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
  .shop__pics figure { aspect-ratio: 3 / 4; }
  .shop__pics figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .recent__head .btn { width: 100%; }
  .car-row { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .car-row .field:last-child { grid-column: 1 / -1; }
}
.field input, .field textarea { width: 100%; }
/* portrait pair (arrival / handover) */
.pair--tall { max-width: 52rem; }
.pair--tall .shot__img { aspect-ratio: 4 / 5; }

/* ===================================================== scroll reveal ===
   Apple-style: each block waits until it scrolls into view. Text rises in
   line by line; each photo lifts while its image settles from a slight
   zoom. Transform and opacity only. */
.reveal-ready .svcs__head[data-reveal] > *,
.reveal-ready [data-reveal] .ba__text > *,
.reveal-ready [data-reveal] .shot {
  opacity: 0; transform: translateY(34px);
  transition: opacity 900ms cubic-bezier(.16,1,.3,1), transform 1100ms cubic-bezier(.16,1,.3,1);
}
.reveal-ready [data-reveal] .shot__img img { transform: scale(1.12); transition: transform 1600ms cubic-bezier(.16,1,.3,1); }
.reveal-ready .svcs__head[data-reveal].is-in > *,
.reveal-ready [data-reveal] .ba__text.is-in > *,
.reveal-ready [data-reveal] .shot.is-in { opacity: 1; transform: none; }
.reveal-ready [data-reveal] .shot.is-in .shot__img img { transform: none; }
.reveal-ready .svcs__head[data-reveal] > :nth-child(2), .reveal-ready [data-reveal] .ba__text > :nth-child(2) { transition-delay: 80ms; }
.reveal-ready .svcs__head[data-reveal] > :nth-child(3), .reveal-ready [data-reveal] .ba__text > :nth-child(3) { transition-delay: 160ms; }
.reveal-ready [data-reveal] .ba__text > :nth-child(4) { transition-delay: 240ms; }
.reveal-ready [data-reveal] .ba__text > :nth-child(5) { transition-delay: 320ms; }
/* side by side on desktop: the after photo follows the before */
@media (min-width: 761px) {
  .reveal-ready [data-reveal] .shot:first-child, .reveal-ready [data-reveal] .shot:first-child img { transition-delay: 120ms; }
  .reveal-ready [data-reveal] .shot:last-child, .reveal-ready [data-reveal] .shot:last-child img { transition-delay: 320ms; }
}

/* ===================================================== softer photos ===
   Cloak team feedback: pictures smaller and rounded rather than square. */
:root { --r-img: 18px; }
.shot__img, .shop__pics figure, .job__img, .gallery img, .svc img,
.carousel__track, .thumbs button, .op__img img { border-radius: var(--r-img); }
.job__img { border-radius: 14px; }
.thumbs button { border-radius: 10px; }
/* before / after: a narrower photo column, shorter frames */
.ba { grid-template-columns: minmax(0, 24rem) minmax(0, 40rem); justify-content: space-between; }
.pair { max-width: 40rem; }
.shot__img { aspect-ratio: 3 / 2; }
.pair--tall { max-width: 34rem; }
.pair--tall .shot__img { aspect-ratio: 4 / 5; }
/* the bay photos */
.shop__pics { aspect-ratio: auto; max-width: 36rem; justify-self: end; width: 100%; grid-template-rows: auto auto; }
.shop__pics figure { aspect-ratio: 3 / 4; }
.shop__pics figure:first-child { aspect-ratio: auto; }
/* opener photo: inset and rounded on desktop instead of full bleed */
@media (min-width: 761px) {
  .op__img { margin: clamp(1.25rem, 3vw, 2.5rem) var(--gut) clamp(1.25rem, 3vw, 2.5rem) 0; background: none; }
  .op__img img { border-radius: 22px; }
}
@media (max-width: 980px) {
  .ba { grid-template-columns: 1fr; }
  .shop__pics { justify-self: start; }
}
@media (max-width: 760px) {
  :root { --r-img: 14px; }
  /* phone: before and after side by side, so each photo is half the size */
  .pair { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .shot__img { aspect-ratio: 1 / 1; }
  .pair--tall .shot__img { aspect-ratio: 4 / 5; }
  .shot__tag { left: .45rem; top: .45rem; padding: .2rem .5rem; font-size: .7rem; }
  .op__img { aspect-ratio: auto; height: 52svh; max-height: none; margin: 0 var(--gut); border-radius: 0 0 var(--r-img) var(--r-img); overflow: hidden; }
  .op__img img { border-radius: 0; }
  .op__copy { margin-top: -4rem; }
  .shop__pics { max-width: none; }
  .shop__pics figure:first-child { aspect-ratio: 16 / 10; }
  .carousel__track { border-radius: var(--r-img); border: 1px solid var(--line); }
  .wrap:has(> .carousel) { padding-left: var(--gut); padding-right: var(--gut); }
  .thumbs { padding-left: 0; padding-right: 0; }
}

/* ================================================= services carousel ===
   One service at a time. Tabs jump straight to a service; swipe, the
   arrows or the arrow keys move between them. */
.sc { position: relative; }
.sc__tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 1.25rem; padding-bottom: .15rem; }
.sc__tabs::-webkit-scrollbar { display: none; }
.sc__tabs button {
  flex: none; font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer;
  min-height: 2.5rem; padding: 0 1.05rem; border-radius: 999px;
  background: rgb(243 238 228 / .04); border: 1px solid rgb(243 238 228 / .14);
  transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.sc__tabs button:hover { color: var(--ink); border-color: rgb(201 164 92 / .6); }
.sc__tabs button[aria-selected="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.sc__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; gap: var(--gut);
}
.sc__track::-webkit-scrollbar { display: none; }
.sc__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 6px; }
.sc__track > .ba { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; border-top: 0; padding: .5rem 0; }
.sc__nav { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; margin-top: 1.25rem; }
.sc__count { margin: 0; font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sc__count b { color: var(--ink); font-weight: 600; }
.sc__arrow {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgb(243 238 228 / .04); border: 1px solid rgb(243 238 228 / .18);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms var(--ease);
}
.sc__arrow svg { width: 1.1rem; height: 1.1rem; }
.sc__arrow:hover { border-color: var(--gold); background: rgb(201 164 92 / .12); }
.sc__arrow:disabled { opacity: .3; pointer-events: none; }
@media (max-width: 760px) {
  /* photos first on a phone, the text under them */
  .sc__track > .ba { gap: 1.1rem; }
  .sc__track > .ba .pair { order: -1; }
  .sc__tabs { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
  .sc__nav { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .sc__track { scroll-behavior: auto; } }
/* tabs: full names on desktop; on phones four equal short tabs that always fit */
.sc__short { display: none; }
@media (max-width: 760px) {
  .sc__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .sc__tabs button { padding: 0 .4rem; font-size: .88rem; min-width: 0; }
  .sc__long { display: none; }
  .sc__short { display: inline; }
}
.op__intro { margin: 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.5; color: var(--ink); max-width: 34rem; text-wrap: pretty; }
/* rounded buttons everywhere, matching the menu button and service tabs */
.btn { border-radius: 999px; padding: 0 1.35rem; }
@media (max-width: 760px) { .dock .btn, .dock__call { border-radius: 999px; } }
.op__brand { color: var(--gold); font-weight: 600; }

/* how we get them / give them back: text left, photos right on desktop */
@media (min-width: 981px) {
  .hand > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "head pair" "sign pair" "more pair";
    grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
  }
  .hand .hand__head { grid-area: head; margin-bottom: 0; }
  .hand .pair { grid-area: pair; max-width: none; align-self: center; }
  .hand .sign { grid-area: sign; margin-top: 2.25rem; }
  .hand .hand__more { grid-area: more; }
}

/* desktop: photos back to their earlier size (the smaller-photo feedback was
   for phones). Rounded corners stay everywhere. */
@media (min-width: 761px) {
  .ba { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); justify-content: normal; }
  .pair { max-width: none; }
  .shot__img { aspect-ratio: 4 / 3; }
  .pair--tall .shot__img { aspect-ratio: 4 / 5; }
  .shop__pics { max-width: none; justify-self: stretch; aspect-ratio: 5 / 4; grid-template-rows: 1fr 1fr; }
  .shop__pics figure, .shop__pics figure:first-child { aspect-ratio: auto; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .ba { grid-template-columns: 1fr; }
  .hand .pair--tall { max-width: 52rem; }
}

/* desktop: bigger photos in the handover and services sections. These two
   sections run wider than the rest of the page and give the photos more
   of the row. */
@media (min-width: 981px) {
  .hand > .wrap, .svcs > .wrap { max-width: 96rem; }
  .hand > .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
  .hand .pair--tall { gap: 1.1rem; }
  .ba { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); }
  .ba .pair { gap: 1.1rem; }
}
/* more room between the before and after photos */
.pair { gap: 2rem; }
@media (min-width: 981px) { .hand .pair--tall, .ba .pair { gap: clamp(1.75rem, 2.4vw, 2.75rem); } }
@media (max-width: 760px) { .pair { gap: .9rem; } }

/* instagram reel links */
.job__img { position: relative; }
.job__reel {
  position: absolute; z-index: 1; right: .55rem; top: .55rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem .22rem .45rem; border-radius: 999px; background: rgb(10 10 11 / .78); color: var(--ink);
  font-size: .72rem; font-weight: 550; letter-spacing: .01em;
}
.job__reel svg { width: .85rem; height: .85rem; }
.reel-link { margin: .25rem 0 0; }
.reel-link .btn svg { width: 1.05rem; height: 1.05rem; color: var(--gold); }
/* rounded work tags, reel link under the photos */
.work li { border-radius: 999px; padding: .45rem .95rem; }
.reel-link { margin: 1.25rem 0 0; }
/* car page: photos sit right under the name and tags */
.job-head { padding-bottom: 0; }
.section.job-photos { padding-top: 1.25rem; border-top: 0; }
@media (max-width: 760px) {
  /* frame hugs a landscape photo instead of leaving black bars above it */
  .job-photos .carousel__slide { aspect-ratio: 4 / 3.4; }
}

/* handover: car name under the heading, showroom link under the photos */
.hand__car { margin-top: -.25rem; }
.hand__more { margin: 1rem 0 0; }
@media (min-width: 981px) {
  .hand > .wrap { grid-template-areas: "head pair" "sign more" "sign ."; grid-template-rows: auto auto 1fr; }
  .hand .hand__more { grid-area: more; margin-top: 1rem; }
  .hand .sign { align-self: start; }
}

/* ============================================ scroll reveal, site wide ===
   Blocks rise in as they scroll into view, a beat apart, and photos settle
   from a slight zoom. Classes are added by site.js, so nothing is hidden
   without it, and reduced motion skips it. */
.rv-ready .rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 1000ms cubic-bezier(.16,1,.3,1);
}
.rv-ready .rv.is-in { opacity: 1; transform: none; }
.rv-ready .rv.rv--img img { transform: scale(1.08); transition: transform 1500ms cubic-bezier(.16,1,.3,1); }
.rv-ready .rv.rv--img.is-in img { transform: none; }
.foot__base { align-items: center; }
.foot__base span { margin-right: auto; }
.foot__credit { color: var(--ink-soft); }
.foot__credit:hover { color: var(--gold); }
@media (max-width: 520px) { .foot__base { gap: .5rem 1.25rem; } .foot__base span { flex-basis: 100%; } }

/* services carousel: slides move by transform, never by free scrolling */
.sc--js .sc__track { overflow: hidden; scroll-snap-type: none; gap: 0; touch-action: pan-y; }
.sc--js .sc__track > .ba { transition: transform 460ms cubic-bezier(.22,1,.36,1); will-change: transform; }
.sc--js .sc__track.is-dragging > .ba { transition: none; }
@media (prefers-reduced-motion: reduce) { .sc--js .sc__track > .ba { transition: none; } }

/* reviews on phones: moved by transform, not free scrolling */
@media (max-width: 760px) {
  .reviews__rail.rail--js { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
  .rail--js > .review { transition: transform 460ms cubic-bezier(.22,1,.36,1); }
  .rail--js.is-dragging > .review { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .rail--js > .review { transition: none; } }
/* The phone dock tucks away whenever the footer's phone number is on
   screen, so the page doesn't need empty room under the footer for it. */
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  .foot { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* footer on phones: the shop details on top, the two link lists side by
   side, then hours with the social links as buttons */
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .foot__grid > div:first-child { grid-column: 1 / -1; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
  .foot__grid > div:last-child { grid-column: 1 / -1; padding-top: 1.75rem; border-top: 1px solid var(--line); }
  .foot__grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: .6rem; }
  .foot__grid > div:last-child ul a {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
    border: 1px solid rgb(243 238 228 / .18); background: rgb(243 238 228 / .04); color: var(--ink);
  }
  .foot__base { margin-top: 2rem; }
}

/* slower, softer reveal (feedback: it happened too fast) */
.rv-ready .rv {
  transform: translateY(40px);
  transition: opacity 1300ms cubic-bezier(.16,1,.3,1), transform 1650ms cubic-bezier(.16,1,.3,1);
}
.rv-ready .rv.rv--img img { transform: scale(1.1); transition: transform 2300ms cubic-bezier(.16,1,.3,1); }
.reveal-ready .svcs__head[data-reveal] > *,
.reveal-ready [data-reveal] .ba__text > *,
.reveal-ready [data-reveal] .shot {
  transform: translateY(40px);
  transition: opacity 1300ms cubic-bezier(.16,1,.3,1), transform 1650ms cubic-bezier(.16,1,.3,1);
}
.reveal-ready [data-reveal] .shot__img img { transition: transform 2300ms cubic-bezier(.16,1,.3,1); }
.reveal-ready .svcs__head[data-reveal] > :nth-child(2), .reveal-ready [data-reveal] .ba__text > :nth-child(2) { transition-delay: 130ms; }
.reveal-ready .svcs__head[data-reveal] > :nth-child(3), .reveal-ready [data-reveal] .ba__text > :nth-child(3) { transition-delay: 260ms; }
.reveal-ready [data-reveal] .ba__text > :nth-child(4) { transition-delay: 390ms; }
.reveal-ready [data-reveal] .ba__text > :nth-child(5) { transition-delay: 520ms; }

/* ===================================================== service pages ===
   One section for what we do and how it goes, then the fine print as a
   row of panels (accordions on phones). */
.svc-head { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.svc-head--steps { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.opts li { display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1.15rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.opts b { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.opts span { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.svc-extra { margin: 1rem 0 0; color: var(--ink-soft); font-size: .92rem; max-width: 70ch; }
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
.info__item { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.info__item > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.15rem; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.02rem;
}
.info__item > summary::-webkit-details-marker { display: none; }
.info__item > summary::after { content: ""; width: .55rem; height: .55rem; border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft); transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease); }
.info__item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.info__item > div { padding: 0 1.15rem 1.1rem; color: var(--ink-soft); font-size: .92rem; }
.info__item p { margin: 0 0 .6rem; }
.info__item ul { margin: 0; padding-left: 1.1rem; }
.info__item li { margin: .25em 0; }
@media (min-width: 761px) {
  .info__item > summary { cursor: default; }
  .info__item > summary::after { display: none; }
}
@media (max-width: 980px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .opts { grid-template-columns: 1fr; gap: .5rem; }
  .opts li { padding: .9rem 1rem; }
  .info { grid-template-columns: 1fr; gap: .5rem; }
  .svc-body + #work .jobs > :nth-child(n+5) { display: none; }
}

/* options as tap-to-open rows on phones */
.opts li { padding: 0; }
.opts details > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.15rem .3rem; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em;
}
.opts details > summary::-webkit-details-marker, .info__item > summary::-webkit-details-marker { display: none; }
.opts details > summary::marker, .info__item > summary::marker { content: ""; }
.opts details > span { display: block; padding: 0 1.15rem 1.1rem; }
@media (min-width: 761px) { .opts details > summary { cursor: default; } }
@media (max-width: 760px) {
  .opts details > summary { padding: .95rem 1rem; cursor: pointer; }
  .opts details[open] > summary { padding-bottom: .3rem; }
  .opts details > span { padding: 0 1rem .95rem; }
  .opts details > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft); transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease); }
  .opts details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .svc-body .steps { grid-template-columns: 1fr 1fr; gap: 1.1rem .9rem; }
  .svc-body .steps b { font-size: .95rem; }
  .svc-body .steps span { font-size: .84rem; line-height: 1.45; }
}

/* reviews carousel: 3 at a time on desktop, 2 on tablets, 1 on phones */
.reviews__rail.rail--js { display: flex; gap: 1rem; overflow: hidden; touch-action: pan-y; scroll-snap-type: none; }
.rail--js > .review { flex: 0 0 calc((100% - 2rem) / 3); transition: transform 560ms cubic-bezier(.22,1,.36,1); }
.rail--js.is-dragging > .review { transition: none; }
.reviews__nav { display: none; }
.rail--js + .reviews__nav { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; margin-top: 1.25rem; }
@media (max-width: 980px) { .rail--js > .review { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 760px) {
  .reviews__rail.rail--js { gap: .75rem; }
  .rail--js > .review { flex-basis: 84%; }
  .rail--js + .reviews__nav { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .rail--js > .review { transition: none; } }

/* Instagram and Facebook: gold line icons in round pills */
.social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-links a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1.1rem 0 .85rem; border-radius: 999px;
  border: 1px solid rgb(201 164 92 / .35); background: rgb(201 164 92 / .06); color: var(--ink); text-decoration: none; font-size: .9rem;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.social-links a:hover { background: rgb(201 164 92 / .16); border-color: var(--gold); color: var(--ink); }
.social-links svg { width: 1.2rem; height: 1.2rem; color: var(--gold); flex: none; }
.social-links--foot { margin-top: 1.1rem; }
/* icon-only circles in the menu footer */
.social-links--icons a { width: 2.6rem; padding: 0; justify-content: center; }
.social-links--icons span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.facts .social-links { margin-top: .35rem; }

/* ========================================================= quote button ===
   A floating "Get a quote" pill on every page (with a call button on
   phones). It tucks away over the page's own form and the footer. */
.fab {
  position: fixed; z-index: 70; right: max(1.25rem, env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom));
  display: flex; gap: .55rem; align-items: center;
  transition: transform 320ms var(--ease), opacity 240ms var(--ease);
}
.fab.is-hidden, body.consent-open .fab { transform: translateY(140%); opacity: 0; pointer-events: none; }
.fab__btn { min-height: 3.1rem; padding: 0 1.6rem; font-size: .95rem; box-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 0 1px rgb(201 164 92 / .4); }
.fab__call { display: none; }
@media (max-width: 760px) {
  .fab { left: var(--gut); right: var(--gut); bottom: calc(.9rem + env(safe-area-inset-bottom)); }
  .fab__btn { flex: 1; }
  .fab__call {
    display: grid; place-items: center; flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%;
    background: #141414; border: 1px solid rgb(201 164 92 / .4); color: var(--gold); box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  }
  .fab__call svg { width: 1.2rem; height: 1.2rem; }
}

/* ========================================================== quote panel === */
html.qd-open { overflow: hidden; }
.qd {
  padding: 0; border: 0; background: transparent; color: var(--ink); max-width: none; max-height: none;
  width: 100%; height: 100%; inset: 0; margin: 0; display: none;
}
.qd[open] { display: grid; place-items: center; }
.qd::backdrop { background: rgb(5 5 6 / .72); }
.qd__inner {
  width: min(40rem, calc(100% - 2.5rem)); max-height: calc(100svh - 3rem); overflow-y: auto; overscroll-behavior: contain;
  background: #121212; border: 1px solid rgb(201 164 92 / .3); border-radius: 22px; padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: 0 30px 80px rgb(0 0 0 / .6);
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}
.qd.is-open .qd__inner { opacity: 1; transform: none; }
.qd__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.qd__head .h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin: .35rem 0 .5rem; }
.qd__sub { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.qd__close {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgb(243 238 228 / .05); border: 1px solid rgb(243 238 228 / .16); color: var(--ink);
}
.qd__close svg { width: 1.1rem; height: 1.1rem; }
.qd__close:hover { border-color: var(--gold); }
@media (max-width: 760px) {
  .qd[open] { place-items: end stretch; }
  .qd__inner {
    width: 100%; max-height: 92svh; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 1.25rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 200ms linear;
  }
  .qd.is-open .qd__inner { transform: none; }
  .qd__inner::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 4px; background: rgb(243 238 228 / .2); margin: 0 auto 1rem; }
  .qd .quote { grid-template-columns: 1fr; }
  .qd .quote__foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .qd__inner { transition: none; } }

/* year dropdown, styled like the other fields */
.field select {
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgb(243 238 228 / .28);
  padding: .55rem 1.4rem .55rem 0; border-radius: 0; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.field select option { background: #141414; color: var(--ink); }
.field select:invalid, .field select option[value=""] { color: rgb(185 176 154 / .7); }
.op__cloaked { color: var(--gold); }

/* the swift is cut from the full logo, so it lands exactly on the swift
   inside the wordmark when the header collapses */
.brand__bird { left: 25.75%; top: 2.5%; width: 33%; }
.is-scrolled .brand__word { clip-path: inset(0 41.25% 0 25.75%); }
.is-scrolled .brand__bird { transform: translateX(-78.03%); }

/* menu button: icon only */
.menu-btn { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0 !important; justify-content: center; gap: 0; border-radius: 50% !important; }
.menu-btn i { gap: 5px; }
@media (max-width: 760px) { .menu-btn { display: inline-flex; } }

/* ============================================ before / after slider === */
.pair.cmp {
  display: block; position: relative; overflow: hidden; border-radius: 18px; background: #111;
  aspect-ratio: 4 / 5; max-width: 34rem; width: 100%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp__tag { position: absolute; top: .8rem; z-index: 2; transition: opacity 200ms var(--ease); }
.cmp__tag--l { left: .8rem; }
.cmp__tag--r { right: .8rem; left: auto; }
.cmp__handle {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--gold); box-shadow: 0 0 0 1px rgb(0 0 0 / .25); outline: none;
}
.cmp__handle span {
  position: absolute; top: 50%; left: 50%; width: 2.9rem; height: 2.9rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 8px 24px rgb(0 0 0 / .45);
}
.cmp__handle span svg { width: 1.2rem; height: 1.2rem; }
.cmp__handle:focus-visible span { outline: 2px solid #fff; outline-offset: 3px; }
.cmp.is-nudging .cmp__before, .cmp.is-nudging .cmp__handle { transition: clip-path 700ms cubic-bezier(.45,0,.2,1), left 700ms cubic-bezier(.45,0,.2,1); }
@media (min-width: 981px) { .hand .pair.cmp { max-width: 30rem; justify-self: center; } }
@media (max-width: 760px) { .pair.cmp { max-width: none; aspect-ratio: 4 / 5; } }
.op__img img { object-position: 50% 62%; }
@media (max-width: 760px) {
  .op__img { height: 58svh; }
  .op__img img { object-position: 50% 78%; }
  .op__img::after { inset: 78% 0 0 0; }
  .op__copy { margin-top: -2.5rem; }
}

/* handover pair: each photo at its own shape so both cars show in full;
   side by side at equal height on wider screens, stacked on phones */
.pair.hpair { display: flex; gap: clamp(.9rem, 2vw, 1.5rem); max-width: none; align-items: stretch; }
.hpair .shot__img { aspect-ratio: auto; height: 100%; }
.hpair__in { flex: 0.75 1 0; }
.hpair__out { flex: 1.309 1 0; }
.hpair__in .shot__img { aspect-ratio: 3 / 4; }
.hpair__out .shot__img { aspect-ratio: 1440 / 1100; }
@media (max-width: 760px) {
  .pair.hpair { flex-direction: column; gap: .75rem; }
  .hpair__in .shot__img { aspect-ratio: 4 / 5; }
  .hpair__in img { object-position: 50% 70%; }
}

/* handover: pills to switch photos, phones only */
.hflip { grid-area: pair; }
.hflip__tabs { display: none; }
@media (max-width: 760px) {
  .hflip--on .hflip__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .75rem; }
  .hflip__tabs button {
    font: inherit; font-size: .9rem; min-height: 2.5rem; border-radius: 999px; cursor: pointer; color: var(--ink-soft);
    background: rgb(243 238 228 / .04); border: 1px solid rgb(243 238 228 / .14);
  }
  .hflip__tabs button[aria-selected="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
  .hflip--on .pair.hpair { flex-direction: row; gap: 0; overflow: hidden; touch-action: pan-y; align-items: flex-start; transition: height 420ms cubic-bezier(.22,1,.36,1); }
  .hflip--on .hpair > .shot { flex: 0 0 100%; transition: transform 460ms cubic-bezier(.22,1,.36,1), opacity 300ms var(--ease); }
  .hflip--on .hpair.is-dragging > .shot { transition: none; }
  .hflip--on .hpair .shot__tag { display: none; }
  .hflip--on .hpair__in .shot__img { aspect-ratio: 3 / 4; }
}
@media (min-width: 981px) { .hand .hflip { align-self: center; } .hand .hflip .pair { grid-area: auto; } }

/* handover photos switch one at a time on every screen */
.hflip--on .hflip__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .9rem; max-width: 26rem; }
.hflip__tabs button {
  font: inherit; font-size: .9rem; min-height: 2.5rem; border-radius: 999px; cursor: pointer; color: var(--ink-soft);
  background: rgb(243 238 228 / .04); border: 1px solid rgb(243 238 228 / .14);
}
.hflip__tabs button:hover { color: var(--ink); border-color: rgb(201 164 92 / .6); }
.hflip__tabs button[aria-selected="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.hflip--on .pair.hpair { flex-direction: row; gap: 0; overflow: hidden; touch-action: pan-y; align-items: flex-start; transition: height 420ms cubic-bezier(.22,1,.36,1); cursor: grab; user-select: none; }
.hflip--on .pair.hpair.is-dragging { cursor: grabbing; }
.hflip--on .hpair > .shot { flex: 0 0 100%; transition: transform 460ms cubic-bezier(.22,1,.36,1), opacity 300ms var(--ease); }
.hflip--on .hpair.is-dragging > .shot { transition: none; }
.hflip--on .hpair .shot__tag { display: none; }
.hflip--on .hpair img { pointer-events: none; -webkit-user-drag: none; }
@media (min-width: 761px) {
  /* one frame shape on desktop so the section doesn't change height */
  .hflip--on .hpair .shot__img { aspect-ratio: 4 / 3 !important; }
  .hflip--on .hpair__in img { object-position: 50% 78%; }
}
@media (min-width: 761px) {
  /* the arrival photo is upright: show all of it, with a blurred copy behind */
  .hflip--on .hpair__in .shot__img { position: relative; overflow: hidden; }
  .hflip--on .hpair__in .shot__img::before {
    content: ""; position: absolute; inset: -30px; background: var(--hflip-bg) center / cover;
    filter: blur(28px) brightness(.45); transform: scale(1.1);
  }
  .hflip--on .hpair__in img { position: relative; object-fit: contain; object-position: center; }
}
/* M3 hero: keep the car and the CLOAK banner in frame */
.op__img img { object-position: 50% 40%; }
@media (max-width: 760px) { .op__img img { object-position: 50% 42%; } .op__img::after { inset: 82% 0 0 0; } }
@media (min-width: 981px) { .hand > .wrap { grid-template-areas: "head pair" "more pair" ". pair"; } }

/* phone hero: full bleed, set a little below the header, sized so the
   headline, intro and both buttons fit on the first screen */
@media (max-width: 760px) {
  .op__img {
    margin: .9rem 0 0; border-radius: 0; overflow: hidden;
    height: max(18rem, calc(100svh - var(--bar) - .9rem - 19.5rem));
  }
  .op__img img { border-radius: 0; object-position: 50% 30%; }
  .op__img::after { inset: 70% 0 0 0; }
  .op__copy { margin-top: -3.25rem; padding-bottom: 2.25rem; gap: 1rem; }
}

/* iPhone: keep the header below the status bar when Safari's toolbar
   collapses and the page draws under the clock and battery */
.bar {
  height: calc(var(--bar) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}
.overlay { padding-top: env(safe-area-inset-top); }
html { scroll-padding-top: calc(var(--bar) + env(safe-area-inset-top) + 1rem); }

/* phone with a fixed +1 */
.phone { display: flex; align-items: stretch; border-bottom: 1px solid rgb(243 238 228 / .28); }
.phone:focus-within { border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.phone__cc { display: flex; align-items: center; padding: 0 .55rem 0 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.field .phone input { border-bottom: 0; box-shadow: none !important; flex: 1; min-width: 0; letter-spacing: .02em; }
.phone:has(input[aria-invalid="true"]) { border-bottom-color: #e0806a; }
.services.is-invalid span { border-color: #e0806a; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.services legend .opt { display: inline; border: 0; padding: 0; min-height: 0; background: none; color: var(--ink-soft); }
.phero__r img[src*="/services/tint"] { object-position: 50% 85%; }

/* tint shade options */
div.svc-extra { margin: 1.5rem 0 0; display: grid; gap: .7rem; max-width: none; }
.shades__label { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.shades { display: flex; flex-wrap: wrap; gap: .5rem; }
.shades > span { display: grid; gap: .1rem; min-width: 7.5rem; padding: .7rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: .85rem; }
.shades b { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; }
@media (max-width: 760px) { .shades { display: grid; grid-template-columns: 1fr 1fr; } .shades > span:last-child { grid-column: 1 / -1; } }

/* footer: bigger logo, one heading style, one body text style */
.foot__grid img { width: 13rem; margin: -.35rem 0 1.25rem; }
.foot h2 { font-size: .82rem; letter-spacing: .2em; color: var(--gold); margin: 0 0 1.1rem; line-height: 1.4; }
.foot__grid, .foot__grid p, .foot__grid address, .foot__grid li, .foot__grid a { font-size: .95rem; line-height: 1.6; }
.foot__grid a, .foot__grid address, .foot__grid p, .foot .rating span:last-child { color: var(--ink-soft); }
.foot__grid a:hover { color: var(--gold); }
.foot .rating { font-size: .9rem; }
.foot .social-links a { color: var(--ink); font-size: .9rem; }
@media (max-width: 760px) { .foot__grid img { width: 11rem; } }

/* ======================================================= lighter feel ===
   A softer charcoal instead of near-black, with warm gradients that
   alternate section to section so the page doesn't read as one dark slab. */
:root { --canvas: #16161a; --surface: #202024; --line: rgb(243 238 228 / .1); }
html, body { background: var(--canvas); }
.bar, .overlay { background: #121215; }
.op { background: radial-gradient(90% 70% at 85% 10%, rgb(201 164 92 / .12), transparent 60%), linear-gradient(180deg, #19191d 0%, var(--canvas) 100%); }
.hand { background: linear-gradient(180deg, var(--canvas) 0%, #1d1c1f 100%); }
.svcs { background: radial-gradient(70% 60% at 10% 0%, rgb(201 164 92 / .09), transparent 60%), #1a1a1e; }
.reviews { background: linear-gradient(180deg, #1d1c20 0%, var(--canvas) 100%); }
.shop { background: radial-gradient(80% 60% at 90% 100%, rgb(201 164 92 / .08), transparent 60%), #18181c; }
.ask { background: radial-gradient(70% 90% at 85% 0%, rgb(201 164 92 / .14), transparent 60%), #1f1e22; }
.phero__l { background: linear-gradient(160deg, #222226 0%, #1a1a1e 100%); }
.phero--text .phero__r { background: radial-gradient(80% 70% at 30% 100%, rgb(201 164 92 / .1), transparent 70%), #18181c; }
main > .section:nth-of-type(even) { background: linear-gradient(180deg, #1b1b1f 0%, var(--canvas) 100%); }
.band { background: radial-gradient(70% 120% at 80% 0%, rgb(201 164 92 / .16), transparent 60%), #1f1e22; }
.foot { background: linear-gradient(180deg, #131316 0%, #0f0f12 100%); }
.op__img::after { background: linear-gradient(to top, #18181c, rgb(24 24 28 / 0)); }
.review, .opts li, .info__item, .note, .shades > span { background: #222227; }
.qd__inner { background: #1c1c20; }
@media (max-width: 760px) { .fab__call { background: #1c1c20; } }

/* quote sent */
.thanks { display: grid; justify-items: start; gap: .85rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 18px; background: #222227; border: 1px solid rgb(201 164 92 / .35); outline: none; animation: thanks-in 420ms cubic-bezier(.22,1,.36,1); }
.thanks__mark { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--gold-ink); }
.thanks__mark svg { width: 1.5rem; height: 1.5rem; }
.thanks__title { margin: .25rem 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; }
.thanks__body { margin: 0; color: var(--ink); font-size: 1.02rem; max-width: 34rem; }
.thanks__ref { margin: .25rem 0 0; display: grid; gap: .2rem; padding: .8rem 1.1rem; border-radius: 12px; background: rgb(201 164 92 / .1); border: 1px dashed rgb(201 164 92 / .55); }
.thanks__ref small { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-family: var(--display); font-stretch: 118%; font-weight: 600; }
.thanks__ref b { font-size: 1.35rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink); user-select: all; }
.thanks__help { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thanks { animation: none; } }
form.quote[hidden] { display: none !important; }