/* AUTO ACTION, HENDON — built on the Willesden MOT layout: dark workshop, Auto Action red accent. */
:root {
  --bg: #18181B;
  --panel: #222226;
  --ink: #EDEBE6;
  --accent: #E5483B;
  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.overline { font-size: 0.62rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--accent); }
.display { font-family: var(--display); font-weight: 600; font-size: clamp(3.2rem, 11vw, 9.5rem); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; }
.section-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 4.5vw, 3.4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.fine { display: block; font-size: 0.66rem; letter-spacing: 0.18em; opacity: 0.45; margin-top: 2.5rem; text-align: center; }

/* nav */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 4vw; transition: background 0.4s ease, padding 0.4s ease;
}
#nav.scrolled { background: rgba(11,11,12,0.9); backdrop-filter: blur(12px); padding: 0.9rem 4vw; }
.logo { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.28em; }
.logo em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.75; }
.nav-links a:hover { opacity: 1; }
.nav-cta { border: 1px solid var(--accent); color: var(--accent) !important; padding: 0.55rem 1.1rem; opacity: 1 !important; }
@media (max-width: 767px) { .nav-links a:not(.nav-cta) { display: none; } }

/* loader */
body.locked { overflow: hidden; height: 100vh; }
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem;
  transition: opacity 0.9s ease 0.15s, visibility 0.9s;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5em; opacity: 0.85; }
#loader-track { width: min(38vw, 300px); height: 1px; background: rgba(237,235,230,0.14); }
#loader-bar { width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s ease; }
#loader-pct { font-size: 0.62rem; letter-spacing: 0.35em; color: var(--accent); }

/* scrub chapters */
.chapter { position: relative; }
.chapter .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.chapter canvas, .fallback-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter .overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.no-scrub .chapter { height: 100vh !important; }
.no-scrub .callout { position: static; margin: 1rem 6vw; }

.callout { position: absolute; max-width: 240px; opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease, transform 0.8s ease; }
.callout.visible { opacity: 1; transform: none; }
.callout .line { display: block; width: 56px; height: 1px; background: var(--accent); margin-bottom: 0.7rem; opacity: 0.8; }
.callout strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.25rem; text-shadow: 0 1px 18px rgba(0,0,0,0.55); }
.callout span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; text-shadow: 0 1px 14px rgba(0,0,0,0.55); }

.chapter-line {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 8vw 14vh; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease;
}
.chapter-line.visible { opacity: 1; transform: none; }

/* hero overlay */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.12) 40%, rgba(11,11,12,0.75) 100%); }
.hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6vw; }
body.ready .hero-copy .display { animation: heroIn 2s cubic-bezier(.16,1,.3,1) both 0.2s; }
body.ready .hero-copy .overline, body.ready .hero-sub { animation: fadeIn 2s ease both 1s; }
.hero-copy .overline { display: block; margin-bottom: 1.2rem; opacity: 0; }
.hero-copy .display { opacity: 0; }
.hero-sub { font-size: 0.85rem; letter-spacing: 0.12em; line-height: 2; opacity: 0; margin: 1.6rem 0 0; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
body.ready .hero-copy .overline { opacity: 1; }
body.ready .hero-copy .display { opacity: 1; }
body.ready .hero-sub { opacity: 0.85; }
@keyframes heroIn { from { opacity: 0; letter-spacing: 0.2em; } to { opacity: 1; letter-spacing: 0.02em; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.scroll-cue { position: absolute; bottom: 2.6rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.5; }

.btn {
  display: inline-block; background: var(--accent); color: #0B0B0C; font-weight: 500;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 1rem 2.2rem; transition: filter 0.3s;
}
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: none; border: 1px solid var(--accent); color: var(--accent); }

/* ticker */
.ticker { overflow: hidden; border-top: 1px solid rgba(237,235,230,0.08); border-bottom: 1px solid rgba(237,235,230,0.08); padding: 1.1rem 0; }
.ticker-track { display: flex; white-space: nowrap; animation: tick 38s linear infinite; }
.ticker-track span { font-family: var(--display); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.5; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* sections */
.section { padding: 15vh 6vw; max-width: 1400px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 4.5rem; }
.section-head .overline { display: block; margin-bottom: 1rem; }

/* services grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3rem 2.2rem; }
.service-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--panel); }
.service-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.service:hover .service-media img { transform: scale(1.05); }
.service h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 1.2rem 0 0.5rem; }
.service p { font-size: 0.78rem; line-height: 1.9; opacity: 0.6; margin-bottom: 0.8rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-tags span { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; border: 1px solid rgba(237,235,230,0.14); padding: 0.3rem 0.6rem; }

/* stats strip */
.stats { padding-top: 4vh; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid rgba(237,235,230,0.1); padding-top: 3.5rem; }
.stat strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--accent); margin-bottom: 0.6rem; letter-spacing: 0.04em; }
.stat span { font-size: 0.7rem; line-height: 1.8; opacity: 0.55; }
@media (max-width: 767px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* visit block */
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5vw; align-items: start; }
.visit h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.2rem; color: var(--accent); }
.visit p { font-size: 0.88rem; line-height: 2; opacity: 0.75; }
.hours { width: 100%; border-collapse: collapse; }
.hours td { font-size: 0.78rem; letter-spacing: 0.08em; padding: 0.75rem 0; border-bottom: 1px solid rgba(237,235,230,0.08); opacity: 0.75; }
.hours td:last-child { text-align: right; }
.hours .today td { color: var(--accent); opacity: 1; }
.map-link { display: inline-block; margin-top: 1.6rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 0.3rem; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* contact */
.cta { text-align: center; }
.contact-actions { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3.5rem; }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 3rem 6vw 4rem; }
footer span { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.35; }

/* reveals */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
}

/* ---------- phones (2026-10-07): the scrub runs on phones now, so lay its text out for a tall screen ---------- */
.hero-copy .overline { text-shadow: 0 1px 14px rgba(0,0,0,0.7); }
@media (max-width: 767px) {
  #nav { padding: calc(1rem + env(safe-area-inset-top, 0px)) 5vw 1rem; }
  #nav.scrolled { padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 5vw 0.75rem; }
  .logo { font-size: 0.8rem; letter-spacing: 0.22em; }
  .nav-cta { padding: 0.5rem 0.8rem; letter-spacing: 0.18em !important; }
  .hero-scrim { background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.25) 35%, rgba(11,11,12,0.45) 60%, rgba(11,11,12,0.85) 100%); }
  .hero-copy { justify-content: flex-end; padding: 0 7vw 22vh; }
  .hero-copy .overline { letter-spacing: 0.3em; line-height: 1.9; }
  .hero-sub { font-size: 0.8rem; letter-spacing: 0.06em; line-height: 1.8; }
  .hero-sub br { display: none; }
  .scroll-cue { bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); opacity: 0.7; }
  /* callouts: one clean stack in the lower third, over a scrim, never under the nav */
  .chapter .overlay::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,0.7) 100%); }
  .chapter .callout { top: auto !important; bottom: 30vh !important; left: 7vw !important; right: 7vw !important; max-width: none; }
  .chapter .callout + .callout { bottom: 21vh !important; }
  .chapter-line { padding: 0 7vw calc(9vh + env(safe-area-inset-bottom, 0px)); font-size: 1.5rem; }
  .section { padding: 11vh 6vw; }
  .section-head { margin-bottom: 3rem; }
  .services-grid { gap: 3rem; }
  .service p { font-size: 0.85rem; opacity: 0.7; }
  .stat span { font-size: 0.78rem; }
  .stats-grid { gap: 2.2rem 1.4rem; }
  .contact-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .contact-actions .btn { text-align: center; }
  footer { flex-direction: column; padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- practical layer (2026-10-07): book first, one tap actions ---------- */
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; pointer-events: auto; opacity: 0; }
body.ready .hero-actions { animation: fadeIn 1.6s ease both 1.2s; opacity: 1; }
.book-sub { margin-top: 1.2rem; font-size: 0.9rem; opacity: 0.7; line-height: 1.7; }
.book-form { max-width: 720px; margin: 0 auto; display: grid; gap: 1.1rem; text-align: left; }
.book-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.book-form label { display: grid; gap: 0.45rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.book-form input, .book-form select { width: 100%; background: var(--panel); border: 1px solid rgba(237,235,230,0.16); color: var(--ink);
  font: 400 1rem var(--sans); letter-spacing: 0.02em; padding: 0.95rem 0.9rem; border-radius: 0; appearance: none; text-transform: none; }
.book-form select { background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.book-form input:focus, .book-form select:focus { outline: none; border-color: var(--accent); }
.book-form input[name="reg"] { text-transform: uppercase; font-family: var(--display); letter-spacing: 0.12em; }
.book-form .btn { justify-self: start; border: 0; cursor: pointer; margin-top: 0.4rem; }
.book-status { min-height: 1.4em; font-size: 0.9rem; color: var(--accent); line-height: 1.6; }
#book .contact-actions { margin: 2.6rem 0 0; }
.action-bar { display: none; }
@media (max-width: 767px) {
  .hero-copy { padding-bottom: 16vh; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 340px; }
  .hero-actions .btn { text-align: center; }
  .book-form .row { grid-template-columns: 1fr; }
  .book-form .btn { justify-self: stretch; text-align: center; padding: 1.15rem; }
  .action-bar { display: grid; grid-template-columns: 1fr 1fr 1.25fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(11,11,12,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(237,235,230,0.12); padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); gap: 0.45rem;
    transform: translateY(110%); transition: transform 0.4s ease; }
  body.ready .action-bar { transform: none; }
  .action-bar a { text-align: center; font-family: var(--display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.95rem 0.3rem; border: 1px solid rgba(229,72,59,0.55); color: var(--accent); }
  .action-bar a.primary { background: var(--accent); color: #0B0B0C; border-color: var(--accent); }
  footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
  .scroll-cue { display: none; }
}

/* ---------- lighter pass (2026-10-07, founder: "a bit dark") ---------- */
.hero-scrim { background: linear-gradient(180deg, rgba(24,24,27,0.42) 0%, rgba(24,24,27,0.05) 38%, rgba(24,24,27,0.55) 100%); }
#nav.scrolled, .action-bar { background: rgba(24,24,27,0.92) !important; }
.service p, .stat span { opacity: 0.78; }
.service-tags span { opacity: 0.7; }
.fine { opacity: 0.6; }
.hours td { opacity: 0.85; }
@media (max-width: 767px) {
  .hero-scrim { background: linear-gradient(180deg, rgba(24,24,27,0.45) 0%, rgba(24,24,27,0.08) 32%, rgba(24,24,27,0.35) 58%, rgba(24,24,27,0.82) 100%); }
}
.hero-copy .overline { text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.75); }
.hero-sub, .hero-copy .display { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 30px rgba(0,0,0,0.55); }

/* ---------- day-mode sections (2026-10-07): services, booking, visit on warm off-white ---------- */
.section { max-width: none; }
.section > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.section.day { --ink: #1B1B1E; --panel: #FFFFFF; --accent-text: #B72A21; background: #F4F2EE; color: var(--ink); }
.day .overline, .day .visit h3, .day .map-link, .day .book-form label, .day .book-status { color: var(--accent-text); }
.day .map-link { border-color: var(--accent-text); }
.day .section-title { color: #121214; }
.day .service-media { box-shadow: 0 10px 30px rgba(27,27,30,0.12); }
.day .service p, .day .visit p, .day .book-sub { opacity: 0.78; }
.day .service-tags span { border-color: rgba(27,27,30,0.18); opacity: 0.8; }
.day .fine { opacity: 0.65; }
.day .hours td { border-bottom-color: rgba(27,27,30,0.12); opacity: 0.85; }
.day .hours .today td { color: var(--accent-text); opacity: 1; font-weight: 500; }
.day .book-form input, .day .book-form select { background-color: #FFFFFF; border-color: rgba(27,27,30,0.2); color: #1B1B1E; }
.day .book-form input::placeholder { color: rgba(27,27,30,0.4); }
.day .book-form input:focus, .day .book-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229,72,59,0.25); }
.day .btn.ghost { color: #1B1B1E; border-color: rgba(27,27,30,0.45); }
.day .btn.ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.stats { padding-top: 12vh; padding-bottom: 12vh; }
.stats-grid { border-top: 0; padding-top: 0; }

/* ================= STATE-OF-THE-ART PASS (2026-10-07) ================= */
/* editorial section heads: big outlined index, title, lede */
.ed-head { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.6rem; align-items: end; margin: 0 auto 3.4rem; max-width: 1400px; text-align: left; }
.ed-num { grid-row: span 2; font-family: var(--display); font-weight: 600; font-size: clamp(3.6rem, 9vw, 7.5rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); letter-spacing: -0.02em; }
.ed-head .overline { display: block; margin-bottom: 0.7rem; }
.ed-head .section-title { font-size: clamp(2rem, 5vw, 4rem); line-height: 0.98; }
.ed-lede { grid-column: 2; max-width: 34rem; font-size: 0.95rem; line-height: 1.7; opacity: 0.72; margin-top: 0.6rem; }
.section.day { position: relative; }
.section.day::before { content: ""; position: absolute; left: 6vw; right: 6vw; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(162,101,15,0.35), transparent); }

/* live open / closed pill */
.open-pill { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(237,235,230,0.25); background: rgba(24,24,27,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); }
.open-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8A8A8F; }
.open-pill.is-open::before { background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: livePulse 2s infinite; }
.open-pill.is-closed::before { background: #E5483B; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,0.55); } 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.hero-pill { margin-bottom: 1.3rem; pointer-events: auto; opacity: 0; }
body.ready .hero-pill { animation: fadeIn 1.4s ease both 0.6s; opacity: 1; }
.day .open-pill { background: #fff; border-color: rgba(27,27,30,0.14); color: #1B1B1E; backdrop-filter: none; }

/* services bento: image cards with the copy laid over a gradient */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 1.2rem; max-width: 1400px; margin: 0 auto; }
.svc-card { position: relative; overflow: hidden; border-radius: 14px; background: #111; color: #EDEBE6; isolation: isolate; min-height: 320px;
  box-shadow: 0 18px 40px -18px rgba(27,27,30,0.45); }
.svc-card.feature { grid-column: span 2; grid-row: span 2; min-height: 640px; }
.svc-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,0.55) 58%, rgba(10,10,12,0.92) 100%); }
.svc-card:hover > img { transform: scale(1.06); }
.svc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.6rem 1.5rem; }
.svc-num { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--accent); }
.svc-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0.5rem 0 0.45rem; }
.svc-card.feature h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.svc-card p { font-size: 0.82rem; line-height: 1.7; opacity: 0.82; max-width: 36rem; }
.svc-card .service-tags { margin-top: 0.8rem; }
.svc-card .service-tags span { border-color: rgba(237,235,230,0.28); opacity: 0.85; }
.svc-book { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.svc-book i { font-style: normal; transition: transform 0.3s; } .svc-book:hover i { transform: translateX(4px); }
.swipe-hint { display: none; }

/* booking shell: dark "how it works" + white form card */
#book.cta { text-align: left; }
.book-shell { display: grid; grid-template-columns: 0.85fr 1.15fr; max-width: 1180px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(27,27,30,0.5); background: #fff; }
.book-aside { background: #18181B; color: #EDEBE6; padding: 2.6rem 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.book-aside h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.steps { list-style: none; counter-reset: st; display: grid; gap: 1.3rem; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.2rem 0.9rem; }
.steps li::before { content: counter(st); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(229,72,59,0.6); color: var(--accent);
  display: grid; place-items: center; font-family: var(--display); font-size: 0.9rem; }
.steps b { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; }
.steps span { font-size: 0.8rem; line-height: 1.6; opacity: 0.68; }
.aside-call { margin-top: auto; font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.04em; color: #EDEBE6; }
.aside-call small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.3rem; }
.mot-check { font-size: 0.78rem; line-height: 1.6; color: var(--accent); border-top: 1px solid rgba(237,235,230,0.12); padding-top: 1.2rem; }
.book-shell .book-form { max-width: none; margin: 0; padding: 2.6rem 2.4rem; }
/* the reg box is a real UK number plate */
.plate { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; border: 2px solid #1B1B1E; background: #F5C518; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.plate-uk { display: grid; place-items: end center; width: 2.6rem; padding-bottom: 0.45rem; background: #0B3D91; color: #fff; font-family: var(--display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; }
.day .book-form .plate input, .book-form .plate input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111 !important; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: 0.12em; padding: 0.5rem 0.6rem; text-transform: uppercase; }
.book-form .plate input::placeholder { color: rgba(17,17,17,0.32) !important; }
.plate:focus-within { box-shadow: 0 0 0 4px rgba(229,72,59,0.35); }
.plate-label { gap: 0.6rem !important; }

/* visit: info card + live map */
.visit-shell { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.4rem; max-width: 1400px; margin: 0 auto; }
.visit-card { background: #fff; border-radius: 18px; padding: 2.4rem; box-shadow: 0 24px 60px -30px rgba(27,27,30,0.35); display: flex; flex-direction: column; gap: 1.2rem; }
.visit-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: #121214; }
.visit-card p { font-size: 0.92rem; line-height: 1.8; opacity: 0.78; }
.visit-card .open-pill { align-self: flex-start; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.map-frame { border-radius: 18px; overflow: hidden; min-height: 420px; box-shadow: 0 24px 60px -30px rgba(27,27,30,0.35); background: #e7e4de; }
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(0.55) contrast(1.05); }

/* why-us strip: give the dark band a touch of glow */
.stats { background: radial-gradient(120% 140% at 50% 0%, #26262B 0%, #18181B 60%); }

@media (max-width: 960px) {
  .book-shell, .visit-shell { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .svc-card.feature { grid-column: span 2; grid-row: auto; min-height: 460px; }
}
@media (max-width: 767px) {
  .ed-head { grid-template-columns: 1fr; gap: 0.3rem; margin-bottom: 2.2rem; }
  .ed-num { grid-row: auto; font-size: 3.4rem; }
  .ed-lede { grid-column: 1; }
  /* services become a swipeable rail on phones */
  .bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem; margin: 0 -6vw; padding: 0.4rem 6vw 1.2rem; scrollbar-width: none; }
  .bento::-webkit-scrollbar { display: none; }
  .svc-card, .svc-card.feature { flex: 0 0 82%; min-height: 470px; scroll-snap-align: center; border-radius: 16px; }
  .swipe-hint { display: block; text-align: center; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; margin-top: 0.4rem; }
  .book-aside, .book-shell .book-form, .visit-card { padding: 1.8rem 1.4rem; }
  .book-aside { gap: 1.2rem; }
  .aside-call { margin-top: 0.4rem; }
  .map-frame, .map-frame iframe { min-height: 300px; }
  .visit-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* autoplay loops (2026-10-07): MOT feature card + why-us band; muted, inline, only play while on screen */
.svc-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.stats { position: relative; overflow: hidden; isolation: isolate; }
.stats-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.stats::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24,24,27,0.78), rgba(24,24,27,0.62) 50%, rgba(24,24,27,0.82)); }
.stats .stats-grid { position: relative; }
.stat span { opacity: 0.85 !important; }
.stats { padding-top: 22vh !important; padding-bottom: 22vh !important; }
@media (max-width: 767px) { .stats { padding-top: 14vh !important; padding-bottom: 14vh !important; } }
.section > .stats-video { max-width: none; margin: 0; }

/* ================= MOTION PASS (2026-10-08, founder: "still needs movement") ================= */
/* headings rise out of a mask; outlined numbers fill with gold */
.ed-head .section-title { overflow: hidden; padding-bottom: 0.08em; }
.ed-head .section-title .rise { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.16,1,.3,1) 0.1s; }
.ed-head.visible .section-title .rise { transform: none; }
.ed-num { background: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; transition: background-position 1.6s cubic-bezier(.65,0,.35,1) 0.35s; }
.ed-head.visible .ed-num { background-position: 0 0; }
.ed-head .overline, .ed-head .ed-lede { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s; }
.ed-head.visible .overline, .ed-head.visible .ed-lede { opacity: 1; transform: none; }
.ed-head.visible .ed-lede { opacity: 0.72; }
.ed-head.reveal { opacity: 1; transform: none; } /* the head animates its parts instead */

/* cards arrive one after another */
.bento .svc-card.reveal { transform: translateY(46px) scale(0.98); transition: opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 110ms); }
.bento .svc-card.reveal.visible { transform: none; }
/* slow Ken Burns on every card photo */
.svc-card > img { animation: kenburns 16s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.7s); transform-origin: 60% 40%; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.1; } }
.svc-card > img, .svc-card > video { translate: 0 var(--par, 0px); will-change: translate; }
/* tilt toward the pointer (desktop) */
.svc-card { transform-style: preserve-3d; transition: box-shadow 0.4s ease; }
.svc-card.tilting { transition: none; }
.svc-card .svc-body { transition: transform 0.4s ease; }
.svc-card:hover .svc-body { transform: translateY(-4px); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(229,72,59,0.16), transparent 60%); }
.svc-card:hover::before { opacity: 1; }

/* booking steps + stats one by one */
.book-shell .steps li { opacity: 0; transform: translateX(-16px); transition: opacity 0.8s ease, transform 0.8s ease; }
.book-shell.visible .steps li { opacity: 1; transform: none; }
.book-shell.visible .steps li:nth-child(2) { transition-delay: 0.18s; }
.book-shell.visible .steps li:nth-child(3) { transition-delay: 0.36s; }
.stats .stat.reveal { transition-delay: calc(var(--i, 0) * 120ms); }
.stat strong { position: relative; display: inline-block; }
.stat strong::after { content: ""; position: absolute; left: 0; bottom: -0.35rem; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16,1,.3,1) 0.4s; }
.stat.visible strong::after { transform: scaleX(1); }

/* the number plate gets a subtle sheen while you look at it */
.plate { position: relative; }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .svc-card > img, .plate::after { animation: none; }
  .ed-head .section-title .rise, .ed-head .overline, .ed-head .ed-lede { transform: none; opacity: 1; transition: none; }
  .ed-num { background-position: 0 0; transition: none; }
}
.svc-card > img, .svc-card > video { top: -30px; bottom: auto; height: calc(100% + 60px); }

/* real workshop photos (2026-10-08) */
.real-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1.2rem; max-width: 1400px; margin: 0 auto; }
.real-shot { position: relative; margin: 0; border-radius: 16px; overflow: hidden; height: 560px; box-shadow: 0 24px 50px -26px rgba(27,27,30,0.5); }
.real-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.real-shot:hover img { transform: scale(1.05); }
.real-shot figcaption { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #1B1B1E; background: rgba(255,255,255,0.92); padding: 0.5rem 0.8rem; border-radius: 999px; }
.real-shot figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.real-grid .real-shot.reveal { transform: translateY(40px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.real-grid .real-shot.reveal:nth-child(2) { transition-delay: 0.12s; } .real-grid .real-shot.reveal:nth-child(3) { transition-delay: 0.24s; }
.real-grid .real-shot.reveal.visible { transform: none; }
@media (max-width: 960px) { .real-grid { grid-template-columns: 1fr 1fr; } .real-shot.wide { grid-column: span 2; height: 420px; } .real-shot { height: 460px; } }
@media (max-width: 767px) {
  .real-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem; margin: 0 -6vw; padding: 0.4rem 6vw 1.2rem; scrollbar-width: none; }
  .real-grid::-webkit-scrollbar { display: none; }
  .real-shot, .real-shot.wide { flex: 0 0 82%; height: 460px; scroll-snap-align: center; }
}


/* ================= HERO v2 — floating frame (2026-10-09, inspired by 363sudbury.com/about) ================= */
:root { --plate: #E5483B; }
.hero2 { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #0b0b0c; isolation: isolate; }
.h2-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(26px) brightness(0.45) saturate(1.1); z-index: -1; }
.h2-frame { position: absolute; left: 28px; right: 28px; top: 28px; bottom: 116px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); background: #111; }
.h2-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h2-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,0.78) 0%, rgba(10,10,12,0.35) 45%, rgba(10,10,12,0) 70%), linear-gradient(0deg, rgba(10,10,12,0.55), rgba(10,10,12,0) 40%); }
.h2-tile { position: absolute; top: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; z-index: 2; }
.h2-logo { left: 18px; border: 1px solid rgba(255,255,255,0.35); background: rgba(10,10,12,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: #fff; }
.h2-icon { right: 18px; background: var(--plate); color: #111; }
.h2-copy { position: absolute; left: clamp(28px, 6vw, 96px); top: 50%; transform: translateY(-50%); max-width: 560px; z-index: 2; color: #fff; }
.h2-pill { margin-bottom: 1.4rem; }
.h2-copy h1 { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: none; }
.h2-dot { color: var(--plate); }
.h2-copy p { margin-top: 1.4rem; font-size: 1rem; line-height: 1.7; max-width: 30rem; opacity: 0.88; }
.h2-facts { list-style: none; display: flex; gap: 0; margin-top: 2rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%;
  background: rgba(10,10,12,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.h2-facts li { padding: 0.9rem 1.2rem; border-right: 1px solid rgba(255,255,255,0.12); }
.h2-facts li:last-child { border-right: 0; }
.h2-facts b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--plate); }
.h2-facts span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.h2-bar { position: absolute; left: 28px; right: 28px; bottom: 0; height: 116px; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 2; }
.h2-cta { display: inline-flex; align-items: center; gap: 0.9rem; background: var(--plate); color: #111; font-family: var(--display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 1.05rem 1.6rem; border-radius: 10px; box-shadow: 0 10px 30px -8px rgba(245,197,24,0.55); transition: transform 0.2s; }
.h2-cta:hover { transform: translateY(-2px); }
.h2-cta i { font-style: normal; font-size: 1rem; }
.h2-ghost { color: #fff; font-family: var(--display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1.05rem 1.4rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); }
.h2-link { position: absolute; right: 4px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
body.at-top #nav { opacity: 0; pointer-events: none; }
#nav { transition: opacity 0.4s ease, background 0.4s ease, padding 0.4s ease; }
@media (max-width: 767px) {
  .hero2 { min-height: 0; }
  .h2-frame { left: 10px; right: 10px; top: 10px; bottom: 150px; border-radius: 16px; }
  .h2-film { object-position: 58% 50%; }
  .h2-shade { background: linear-gradient(0deg, rgba(10,10,12,0.85) 0%, rgba(10,10,12,0.35) 55%, rgba(10,10,12,0.15) 100%); }
  .h2-copy { left: 20px; right: 20px; top: auto; bottom: 22px; transform: none; }
  .h2-copy h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .h2-copy p { font-size: 0.9rem; margin-top: 0.9rem; }
  .h2-facts { margin-top: 1.1rem; }
  .h2-facts li { padding: 0.65rem 0.75rem; }
  .h2-facts b { font-size: 0.95rem; } .h2-facts span { font-size: 0.55rem; letter-spacing: 0.08em; }
  .h2-bar { left: 10px; right: 10px; height: 150px; flex-direction: column; justify-content: flex-start; padding-top: 14px; gap: 10px; }
  .h2-cta, .h2-ghost { width: 100%; justify-content: center; text-align: center; }
  .h2-link { display: none; }
  .h2-ghost { padding: 0.85rem; }
}
@media (max-width: 767px) { body.ready.at-top .action-bar { transform: translateY(110%); } }
.h2-facts b { white-space: nowrap; }
@media (max-width: 767px) { .h2-facts { width: 100%; } .h2-facts li { flex: 1 1 0; min-width: 0; } .h2-facts span { display: block; line-height: 1.4; } }
@media (min-width: 768px) { .h2-film { transform: scale(1.2); transform-origin: 0% 55%; } }

/* ================= REAL WORKSHOP — dark, graded, glass labels (2026-10-09) ================= */
.section.realwork { background: radial-gradient(120% 90% at 50% 0%, #232328 0%, #141416 70%); color: #EDEBE6; position: relative; }
.realwork .section-title { color: #fff; }
.realwork .overline { color: var(--accent); }
.realwork .ed-head { position: relative; }
.real-badge { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.real-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plate, #F5C518); }
.realwork .real-shot { border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); background: #0d0d0f; }
.realwork .real-shot img { animation: kenburns 18s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.realwork .real-shot:nth-child(2) img { animation-delay: -6s; } .realwork .real-shot:nth-child(3) img { animation-delay: -12s; }
.realwork .real-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,12,0.7) 0%, rgba(10,10,12,0) 38%); }
.realwork .real-shot figcaption { left: 14px; bottom: 14px; z-index: 2; gap: 0.75rem; padding: 0.6rem 0.95rem 0.6rem 0.6rem; border-radius: 12px; color: #fff; letter-spacing: 0.16em;
  background: rgba(10,10,12,0.55); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.realwork .real-shot figcaption::before { display: none; }
.realwork .real-shot figcaption b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; background: var(--plate, #F5C518); color: #111;
  font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.04em; }
.realwork .real-shot figcaption span { font-size: 0.64rem; }
.realwork .section-title .rise { color: #fff; }
.section.realwork::before { display: none; }
@media (max-width: 767px) { .real-badge { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .realwork .real-shot img { animation: none; } }

/* ================= LUXURY PASS (2026-10-09) ================= */
/* 1. fine film grain over everything */
body::after { content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* 2. magnetic buttons (JS sets --mx/--my) */
.magnetic { transition: transform 0.35s cubic-bezier(.2,.8,.2,1); transform: translate(var(--tx, 0px), var(--ty, 0px)); }

/* 3. photos unveil with a sliding reveal */
.realwork .real-shot.reveal, .bento .svc-card.reveal { clip-path: inset(18% 0 0 0 round 18px); transition: clip-path 1.3s cubic-bezier(.16,1,.3,1), opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.realwork .real-shot.reveal.visible, .bento .svc-card.reveal.visible { clip-path: inset(0 0 0 0 round 18px); }

/* 4. a slow gold line circling the booking card */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.book-shell { position: relative; }
.book-shell::before { content: ""; position: absolute; inset: -1.5px; border-radius: 19px; padding: 1.5px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 70%, rgba(245,197,24,0.95) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.book-shell > * { position: relative; z-index: 1; }

/* 5. PERFORMANCE film strip: pinned + slides sideways on desktop, swipe rail on phones */
.perf { position: relative; background: #0d0d0f; color: #EDEBE6; height: 340vh; }
.perf-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.perf-track { display: flex; gap: 1.6rem; padding: 0 6vw; will-change: transform; align-items: stretch; }
.perf-intro { flex: 0 0 min(440px, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding-right: 2rem; }
.perf-intro .section-title { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); text-transform: none; }
.perf-intro em { font-style: normal; color: var(--plate, #F5C518); }
.perf-intro p { font-size: 0.95rem; line-height: 1.75; opacity: 0.75; max-width: 26rem; }
.perf-cta { align-self: flex-start; margin-top: 0.4rem; }
.perf-note { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.4; }
.perf-card { position: relative; flex: 0 0 min(560px, 78vw); height: min(72vh, 640px); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9); background: #111; isolation: isolate; }
.perf-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.perf-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,10,12,0.85) 0%, rgba(10,10,12,0) 50%); }
.perf-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem; }
.perf-num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 9px; background: var(--plate, #F5C518); color: #111; font-family: var(--display); font-weight: 600; font-size: 0.75rem; }
.perf-body h3 { font-family: var(--display); font-weight: 600; font-size: 1.7rem; margin: 0.9rem 0 0.4rem; }
.perf-body p { font-size: 0.88rem; line-height: 1.65; opacity: 0.8; max-width: 26rem; }
@media (max-width: 767px) {
  .perf { height: auto; padding: 12vh 0 10vh; }
  .perf-pin { position: static; height: auto; display: block; }
  .perf-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 6vw 1rem; scrollbar-width: none; transform: none !important; }
  .perf-track::-webkit-scrollbar { display: none; }
  .perf-intro { flex-basis: 84vw; scroll-snap-align: start; }
  .perf-card { flex-basis: 82vw; height: 70vh; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } .book-shell::before { animation: none; } .perf { height: auto; } .perf-pin { position: static; height: auto; } }
@media (max-width: 767px) { .perf-track { padding-left: 6vw !important; scroll-padding-left: 6vw; } .perf-intro { padding-right: 0; } .perf-intro .section-title { font-size: 2rem; } }

/* ================= REVIEWS (2026-10-09, real Google reviews) ================= */
.section.rv { background: #F4F2EE; color: #1B1B1E; }
.rv .section-title { color: #121214; }
.rv .overline { color: #B72A21; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 1400px; margin: -1rem auto 2.4rem; }
.rv-chips span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.55rem 0.9rem; border-radius: 999px; background: #fff; border: 1px solid rgba(27,27,30,0.1); }
.rv-chips span:last-child { background: #18181B; color: #F5C518; border-color: #18181B; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1400px; margin: 0 auto; }
.rv-card { margin: 0; background: #fff; border-radius: 18px; padding: 1.8rem 1.7rem; border: 1px solid rgba(27,27,30,0.08); box-shadow: 0 24px 50px -34px rgba(27,27,30,0.45);
  display: flex; flex-direction: column; gap: 1rem; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s; }
.rv-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(27,27,30,0.55); }
.rv-stars { color: #F5B400; letter-spacing: 0.18em; font-size: 0.95rem; }
.rv-card blockquote { margin: 0; font-size: 0.95rem; line-height: 1.7; flex: 1; }
.rv-card figcaption { display: flex; flex-direction: column; gap: 0.2rem; border-top: 1px solid rgba(27,27,30,0.1); padding-top: 0.9rem; }
.rv-card figcaption b { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.rv-card figcaption span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.rv-cta { text-align: center; margin-top: 2.6rem; }
.rv .btn.ghost { color: #1B1B1E; border-color: rgba(27,27,30,0.45); }
.h2-proof { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0.9; pointer-events: auto; }
.h2-proof span { color: #F5B400; letter-spacing: 0.15em; }
footer a { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.5; }
@media (max-width: 960px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .rv-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem; margin: 0 -6vw; padding: 0.4rem 6vw 1.2rem; scrollbar-width: none; }
  .rv-grid::-webkit-scrollbar { display: none; }
  .rv-card { flex: 0 0 84%; scroll-snap-align: center; }
  .rv-chips { margin-top: -0.6rem; }
  .h2-proof { margin-top: 0.8rem; font-size: 0.62rem; }
}
.rv-stars { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid rgba(27,27,30,0.12); color: #4285F4; font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; }
.h2-proof span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #4285F4; font-weight: 600; letter-spacing: 0; font-size: 0.7rem; }
.rv-stars { display: block; width: auto; height: auto; border: 0; background: none; color: #F5B400; letter-spacing: 0.18em; font-size: 0.95rem; font-family: inherit; border-radius: 0; }
.h2-proof b { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0; }
.h2-proof span { display: inline; width: auto; height: auto; background: none; color: #F5B400; letter-spacing: 0.15em; font-size: 0.8rem; border-radius: 0; }
.visit-photo { position: relative; margin: -2.4rem -2.4rem 0.4rem; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16/9; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-photo figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(10,10,12,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.45rem 0.75rem; border-radius: 999px; }
@media (max-width: 767px) { .visit-photo { margin: -1.8rem -1.4rem 0.4rem; } }

/* ================= MOT CHECK band (2026-10-09) ================= */
.motcheck { position: relative; background: linear-gradient(180deg, #141416 0%, #1c1c20 100%); color: #EDEBE6; padding: 9vh 6vw; overflow: hidden; }
.motcheck::before { content: ""; position: absolute; width: 60vw; height: 60vw; right: -20vw; top: -30vw; background: radial-gradient(circle, rgba(245,197,24,0.14), transparent 60%); pointer-events: none; }
.mc-inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 2rem 4rem; align-items: center; }
.mc-copy .section-title { color: #fff; text-transform: none; font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 0.8rem; }
.mc-copy p { margin-top: 1rem; font-size: 0.98rem; line-height: 1.7; opacity: 0.75; max-width: 28rem; }
.mc-form { display: flex; gap: 0.8rem; align-items: stretch; }
.mc-plate { flex: 1; }
.mc-plate input { background: transparent !important; border: 0 !important; color: #111 !important; text-align: center; width: 100%; outline: none;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: 0.12em; padding: 0.55rem 0.6rem; text-transform: uppercase; }
.mc-plate input::placeholder { color: rgba(17,17,17,0.35); letter-spacing: 0.1em; }
.mc-go { white-space: nowrap; border: 0; cursor: pointer; }
.mc-result { grid-column: 1 / -1; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); padding: 1.6rem 1.8rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.6rem; align-items: center; animation: mcIn 0.6s cubic-bezier(.16,1,.3,1); }
@keyframes mcIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mc-car b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: #fff; }
.mc-car span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.mc-due { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 1.6rem; }
.mc-due small { display: block; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; }
.mc-due strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.6rem; margin-top: 0.25rem; }
.mc-due em { font-style: normal; font-size: 0.82rem; }
.mc-ok strong { color: #3DDC84; } .mc-soon strong { color: #F5C518; } .mc-late strong { color: #FF6B5B; }
.mc-msg { grid-column: 1 / -1; font-size: 0.95rem; line-height: 1.7; opacity: 0.85; }
.mc-msg a { color: #F5C518; border-bottom: 1px solid rgba(245,197,24,0.5); }
.mc-tag { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #F5C518; color: #111; font-family: var(--display); font-weight: 600; font-size: 0.75rem; }
@media (max-width: 860px) {
  .mc-inner { grid-template-columns: 1fr; }
  .mc-form { flex-direction: column; }
  .mc-go { justify-content: center; }
  .mc-result { grid-template-columns: 1fr; padding: 1.3rem; }
  .mc-due { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1rem; }
  .mc-tag { display: none; }
}

/* Auto Action: white text on the red accent */
.h2-icon, .h2-cta, .perf-num, .btn:not(.ghost), .action-bar a.primary, .nav-cta:hover { color: #fff !important; }
.mc-tag { background: var(--accent); color: #fff; }
.h2-logo { font-size: 0.95rem; letter-spacing: 0.02em; }
.logo { letter-spacing: 0.14em; }
.logo b { color: var(--accent); font-weight: 600; }
.logo em { color: #C0C0C0 !important; }
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-radius: 14px; background: #18181B; color: #EDEBE6; }
.offer b { font-family: var(--display); font-size: 1.4rem; color: var(--accent); }
.offer span { font-size: 0.92rem; opacity: 0.85; }
.facility { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.facility span { padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid rgba(27,27,30,0.15); font-size: 0.78rem; }
.stats .stat strong { display: block; margin-bottom: 0.6rem; }

/* ===== Multi-page additions (Auto Action) ===== */
/* The menu stays visible at the top of every page (the frame sits below it). */
body.at-top #nav { opacity: 1; pointer-events: auto; }
.hero2 .h2-frame { top: 84px; }
.logo { text-decoration: none; color: #EDEBE6; }
.nav-links { gap: 1.6rem; }
.nav-links a.on { opacity: 1; color: var(--accent); }
.nav-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(237,235,230,0.25); border-radius: 10px; background: none; cursor: pointer; position: relative; }
.nav-burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: #EDEBE6; transition: transform .3s; }
.nav-burger i:first-child { top: 16px; } .nav-burger i:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 55; background: rgba(11,11,12,0.97); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: 0 8vw; }
.mnav[hidden] { display: none; }
.mnav a { font-family: var(--display); font-size: 1.7rem; color: #EDEBE6; }
.mnav a.on { color: var(--accent); }
.mnav .mnav-call { margin-top: 1rem; font-size: 1rem; color: var(--accent); border: 1px solid var(--accent); padding: 0.9rem 1.2rem; border-radius: 10px; width: max-content; }
body.menu-open { overflow: hidden; }
@media (max-width: 1100px) { .nav-links a:not(.nav-cta) { display: none; } .nav-burger { display: block; } .nav-links { margin-left: auto; margin-right: 12px; } }
@media (max-width: 767px) { .nav-cta { display: none; } .hero2 .h2-frame { top: 76px; } }

/* Sub-page hero: same frame, a little shorter */
.hero2.sub { height: 86svh; min-height: 600px; }
.sub-kicker { margin: 1rem 0 0.6rem; }
.hero2.sub .h2-copy h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); }

/* Service cards: book + details links */
.svc-links { display: flex; gap: 1.4rem; align-items: center; }
.svc-more { margin-top: 1rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: #EDEBE6; opacity: 0.8; border-bottom: 1px solid rgba(237,235,230,0.4); padding-bottom: 2px; }
.svc-more:hover { opacity: 1; }

/* Detail cards on service pages */
.dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; max-width: 1400px; margin: 0 auto; }
.dt-card { background: #fff; border: 1px solid rgba(27,27,30,0.08); border-radius: 18px; padding: 1.9rem 1.7rem; box-shadow: 0 24px 50px -38px rgba(27,27,30,0.45); scroll-margin-top: 100px; }
.dt-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; font-family: var(--display); font-weight: 600; font-size: 0.75rem; }
.dt-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin: 1rem 0 0.6rem; letter-spacing: 0; text-transform: none; color: #1B1B1E; }
.dt-card p { font-size: 0.95rem; line-height: 1.7; opacity: 0.8; }
.dt-card ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.dt-card li { font-size: 0.88rem; padding-left: 1.3rem; position: relative; }
.dt-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* FAQ */
.aa-faq { background: #121214; }
.aa-faq-list { max-width: 900px; margin: 0 auto; }
.aa-faq details { border-bottom: 1px solid rgba(237,235,230,0.12); }
.aa-faq details:first-child { border-top: 1px solid rgba(237,235,230,0.12); }
.aa-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; font-family: var(--display); font-size: 1.1rem; }
.aa-faq summary::-webkit-details-marker { display: none; }
.aa-faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.aa-faq details[open] summary::after { content: "−"; }
.aa-faq details p { padding: 0 2rem 1.4rem 0; line-height: 1.75; opacity: 0.8; }

/* Footer */
.aa-foot { display: block; background: #0B0B0C; padding: 4.5rem 5vw 7rem; border-top: 1px solid rgba(237,235,230,0.08); }
.aa-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; max-width: 1400px; margin: 0 auto; }
.aa-foot p { margin-top: 1rem; font-size: 0.9rem; line-height: 1.7; opacity: 0.65; max-width: 300px; }
.aa-foot h4 { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; font-weight: 500; }
.aa-foot-grid > div { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; }
.aa-foot-grid a { opacity: 0.75; } .aa-foot-grid a:hover { opacity: 1; color: var(--accent); }
.aa-foot-grid span { opacity: 0.6; line-height: 1.6; }
.aa-foot-bottom { max-width: 1400px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(237,235,230,0.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.75rem; opacity: 0.5; }
@media (max-width: 900px) { .aa-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .aa-foot-grid { grid-template-columns: 1fr; } }
#nav { z-index: 60; }
.aa-foot a, .aa-foot span, .aa-foot p { letter-spacing: 0 !important; text-transform: none !important; font-size: 0.9rem; }
.aa-foot .logo { letter-spacing: 0.14em !important; }
.aa-foot-bottom span { font-size: 0.75rem !important; }