/* =====================================================================================================================
   CANKAJ — one stylesheet for the main page (index.html)

   One owner, two businesses, one family look. <body data-mode="..."> says which business is showing:
     data-mode="auto"  Cankaj Super Car Wash    deep navy, clean white and a bright water blue (from the SCW logo);
                                                 bold Barlow capitals for headings.
     data-mode="home"  BC Stone Mason           warm limestone with a deep burgundy accent; Marcellus headings.
   Both share the CANKAJ wordmark, the same floating header, buttons, labels, body type (Barlow), the navy footer and
   the "other business" band, so moving between them feels like one site.
   Colours and fonts live in the two token blocks below. Change a token, not a rule.
   The landing pages (/car-wash-newmarket-on-fergus etc.) still use site.css and friends; this file is index.html only.
   ===================================================================================================================== */

/* ---- Fonts (self-hosted in /fonts, no Google request) ---------------------------------------------------------- */
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Michroma'; src: url('/fonts/michroma-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Marcellus'; src: url('/fonts/marcellus-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* ---- Tokens ---------------------------------------------------------------------------------------------------- */
:root {
  --max: 1240px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  --section-y: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 84px;
  --radius: 8px;
  --sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --wordmark: 'Michroma', 'Barlow', Arial, sans-serif;
  --navy: #0a1a33;          /* shared: footer, family band, wordmark plates */
  --navy-2: #0f2546;
}
body[data-mode="auto"] {
  --theme-color: #07111f;
  --bg: #07111f;            /* page: deep navy */
  --bg-2: #0c1b31;          /* alternate band */
  --bg-3: var(--navy);      /* footer */
  --light: #eef4fa;         /* the cool light band (prices, visit) */
  --card: #ffffff;
  --ink: #f3f7fc;           /* text on navy */
  --muted: #a9bad0;
  --ink-dark: #0a1626;      /* text on light */
  --muted-dark: #4a5b70;
  --line: rgba(150, 195, 255, .16);
  --line-dark: #d2deeb;
  --accent: #39b4ff;        /* water blue */
  --accent-hover: #6cc8ff;
  --accent-deep: #0a6cc2;   /* the same blue, readable on white */
  --accent-soft: rgba(57, 180, 255, .14);
  --on-accent: #04121f;
  --display: var(--sans);
}
body[data-mode="home"] {
  --theme-color: #f7f4ef;
  --bg: #f7f4ef;            /* limestone */
  --bg-2: #eee8df;          /* warmer band */
  --bg-3: var(--navy);      /* footer */
  --card: #ffffff;
  --ink: #1d2533;
  --muted: #5c6370;
  --line: #e0d8cd;
  --accent: #6e1c2c;        /* burgundy, the same as the stonework panel on the main menu */
  --accent-hover: #561522;
  --accent-deep: #6e1c2c;
  --accent-soft: rgba(110, 28, 44, .09);
  --on-accent: #ffffff;
  --display: 'Marcellus', Georgia, serif;
}

/* ---- Base -------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17.5px; font-weight: 500; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
.js body[data-mode="auto"] .mode-home, .js body[data-mode="home"] .mode-auto { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 600; padding: 10px 16px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Every full-width band shares one inner width through padding, so no extra wrappers are needed. */
.detail, .services, .gallery, .before-after, .reviews, .instagram, .work-section, .approach, .contact, .sister { padding: var(--section-y) var(--pad); }

/* ---- Shared type ------------------------------------------------------------------------------------------------ */
.kicker, .eyebrow { display: block; margin-bottom: 18px; color: var(--accent); font: 700 12.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
body[data-mode="auto"] h2 { font: 700 clamp(30px, 3.2vw, 48px)/1.08 var(--display); letter-spacing: -.005em; text-transform: uppercase; }
/* Marcellus has one weight; a hairline stroke in its own colour gives it a touch more body. */
body[data-mode="home"] :is(h1, h2, h3, .process-strip strong, .brand-sub) { -webkit-text-stroke: .018em currentColor; }
body[data-mode="home"] h2 { font: 400 clamp(32px, 3.6vw, 52px)/1.12 var(--display); letter-spacing: -.01em; }
body[data-mode="home"] h3 { font-family: var(--display); }

.text-link { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 15px; color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s; }
body[data-mode="auto"] .text-link { color: var(--accent); }
.text-link:hover { text-decoration-thickness: 2.5px; }

/* ---- Buttons (identical on both sides; only the colours change) ------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--radius); font: 700 15.5px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.button:active { transform: translateY(1px); }
:is(.button-solid, .button-primary) { background: var(--accent); color: var(--on-accent); }
:is(.button-solid, .button-primary):hover { background: var(--accent-hover); }
.button-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; }
.button-ghost:hover { background: #fff; color: #0a1626; border-color: #fff; }
body[data-mode="home"] .hero .button-solid { background: #fff; color: var(--accent); }
body[data-mode="home"] .hero .button-solid:hover { background: #f6eced; }

/* ---- Header (one component for both businesses) ----------------------------------------------------------------- */
.site-header { position: fixed; z-index: 100; inset: 14px var(--gutter) auto; max-width: calc(var(--max) + 48px); margin: 0 auto; border-radius: 14px; border: 1px solid transparent; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color .25s, box-shadow .25s, border-color .25s; }
.header-bar { display: flex; align-items: center; gap: 24px; min-height: 70px; padding: 0 22px; }
.brand { display: flex; flex-direction: column; gap: 5px; flex: none; line-height: 1; }
.brand-name { font: 400 18px/1 var(--wordmark); letter-spacing: .16em; text-transform: uppercase; -webkit-text-stroke: .03em currentColor; }
.brand-line { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
body[data-mode="home"] .brand-line { color: var(--muted); }
.main-nav { margin-left: auto; }
.nav-set { display: flex; gap: 26px; }
.main-nav a { position: relative; padding: 6px 0; font-size: 15px; font-weight: 600; transition: color .2s; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.main-nav a:hover::after { transform: scaleX(1); }
.business-switch { display: flex; flex: none; padding: 3px; border-radius: 999px; }
.business-switch button { min-height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; transition: background-color .2s, color .2s; }
body[data-mode] .business-switch button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.header-call { flex: none; padding: 10px 16px; border-radius: var(--radius); font-size: 15px; font-weight: 700; white-space: nowrap; transition: color .2s, background-color .2s; }

body[data-mode="auto"] .site-header { color: #fff; background: rgba(7, 17, 31, .55); border-color: rgba(255, 255, 255, .14); }
body[data-mode="auto"] .site-header.scrolled { background: rgba(7, 17, 31, .9); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
body[data-mode="auto"] .main-nav a { color: rgba(255, 255, 255, .88); }
body[data-mode="auto"] .business-switch { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
body[data-mode="auto"] .business-switch button { color: rgba(255, 255, 255, .8); }
body[data-mode="auto"] .header-call { background: var(--accent); color: var(--on-accent); }
body[data-mode="auto"] .header-call:hover { background: var(--accent-hover); }

body[data-mode="home"] .site-header { color: var(--ink); background: rgba(255, 255, 255, .95); box-shadow: 0 10px 40px rgba(20, 24, 40, .14); }
body[data-mode="home"] .business-switch { background: var(--bg-2); }
body[data-mode="home"] .business-switch button { color: var(--muted); }
body[data-mode="home"] .header-call { background: var(--accent); color: #fff; }
body[data-mode="home"] .header-call:hover { background: var(--accent-hover); }
.business-switch button[aria-selected="false"]:hover { color: inherit; }
body[data-mode="auto"] .business-switch button[aria-selected="false"]:hover { color: #fff; }
body[data-mode="home"] .business-switch button[aria-selected="false"]:hover { color: var(--ink); }

/* ---- Hero -------------------------------------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; display: flex; min-height: min(100svh, 940px); color: #fff; overflow: hidden; background: var(--navy); }
.hero-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ''; position: absolute; inset: 0; }
.hero-inner { width: 100%; padding: calc(var(--header-h) + 72px) var(--pad) clamp(56px, 8vw, 104px); display: flex; align-items: flex-end; }
.hero-copy { font-size: clamp(17px, 1.1vw + 10px, 20px); line-height: 1.6; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-status { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.hero-status strong { color: #fff; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4cd38a; box-shadow: 0 0 0 5px rgba(76, 211, 138, .22); }
.hero-status.is-closed .status-dot { background: #8f9bab; box-shadow: 0 0 0 5px rgba(255, 255, 255, .08); }

body[data-mode="auto"] .hero-media img { object-position: 50% 55%; }
body[data-mode="auto"] .hero-media::after { background: linear-gradient(90deg, rgba(5, 14, 28, .86) 0%, rgba(5, 14, 28, .55) 36%, rgba(5, 14, 28, .08) 70%, rgba(5, 14, 28, 0) 100%), linear-gradient(0deg, rgba(5, 14, 28, .75) 0%, rgba(5, 14, 28, 0) 35%); }
body[data-mode="auto"] .hero-text { max-width: 760px; }
body[data-mode="auto"] .hero h1 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; text-transform: uppercase; }
body[data-mode="auto"] .hero h1 strong { font: 700 clamp(42px, 5.6vw, 84px)/.96 var(--sans); letter-spacing: -.01em; }
body[data-mode="auto"] .hero h1 strong::after { content: ''; display: block; width: 72px; height: 4px; margin-top: 22px; background: var(--accent); border-radius: 2px; }
body[data-mode="auto"] .hero h1 span { font-size: clamp(22px, 2.4vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: .01em; color: rgba(255, 255, 255, .94); }
body[data-mode="auto"] .hero-copy { max-width: 540px; color: rgba(255, 255, 255, .82); }
body[data-mode="auto"] .hero .eyebrow { margin-bottom: 22px; }

body[data-mode="home"] .hero { min-height: min(100svh, 900px); }
body[data-mode="home"] .hero-media img { object-position: 30% 27%; } /* frames the curved wall and its coping */
body[data-mode="home"] .hero-media::after { background: rgba(26, 12, 15, .46); } /* one even tint, no fade */
body[data-mode="home"] .hero-text { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
body[data-mode="home"] .hero h1 { font: 400 clamp(40px, 5vw, 76px)/1.06 var(--display); letter-spacing: -.015em; }
body[data-mode="home"] .hero-copy { color: #fff; }
body[data-mode="home"] .hero-text { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
body[data-mode="home"] .hero-actions { margin-top: 26px; }

/* hero entrance: once, short, and off for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-text { animation: hero-in .9s var(--ease) both; }
  .hero-media img { animation: hero-img 1.6s var(--ease) both; }
  html.hero-settled .hero-text, html.hero-settled .hero-media img { animation: none; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-img { from { transform: scale(1.07); } }

/* ---- Car wash: facts band --------------------------------------------------------------------------------------- */
.wash-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding: 22px var(--pad); background: var(--bg-3); border-block: 1px solid var(--line); }
.wash-facts p { padding: 4px 30px; font: 600 13.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; }
.wash-facts p + p { border-left: 1px solid var(--line); }
.wash-facts strong { color: var(--accent); font-weight: 600; }

/* ---- Car wash: what we do ---------------------------------------------------------------------------------------- */
.detail { background: var(--bg-2); }
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.detail-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.detail-head p:last-child { color: var(--muted); max-width: 52ch; }
.detail-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.detail-row + .detail-row { margin-top: clamp(64px, 8vw, 112px); }
.detail-row-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.detail-row-flip .detail-figure { order: 2; }
.detail-figure { position: relative; }
.detail-figure .gallery-item { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; }
.detail-figure img { width: 100%; aspect-ratio: 4 / 5; max-height: 600px; object-fit: cover; transition: transform .8s var(--ease); }
.detail-figure .gallery-item:hover img { transform: scale(1.03); }
.detail-copy h3 { margin-bottom: 14px; font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--display); color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.detail-copy > p { max-width: 50ch; color: #d3deec; font-size: 18px; margin-bottom: 30px; }
.detail-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.detail-list li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 0 18px 34px; border-bottom: 1px solid var(--line); }
.detail-list li::before { content: ''; position: absolute; left: 4px; top: 26px; width: 10px; height: 10px; border: 2px solid var(--accent); transform: rotate(45deg); }
.detail-list strong { font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.detail-list span { font-size: 16.5px; font-weight: 500; color: #c3d2e4; }

/* ---- Services / price list --------------------------------------------------------------------------------------- */
body[data-mode="auto"] .services { background: var(--light); color: var(--ink-dark); }
.services-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.services-heading > div:first-child { display: contents; }
.services-heading .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.services-heading h2 { grid-column: 1; }
.services-heading .section-intro { grid-column: 2; max-width: 52ch; }
.board-figure { grid-column: 2; }
body[data-mode="auto"] .services .kicker { color: var(--accent-deep); }
body[data-mode="auto"] .services h2 { color: var(--ink-dark); }
body[data-mode="auto"] .section-intro { color: var(--muted-dark); }
body[data-mode="home"] .section-intro { color: var(--muted); font-size: 18px; }
.board-text-link { font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: var(--ink-dark); }
.board-text-link:hover { color: var(--accent-deep); }

.price-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.price-jump a { padding: 9px 16px; border: 1px solid var(--line-dark); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dark); border-radius: 999px; transition: background-color .2s, color .2s, border-color .2s; }
.price-jump a:hover { background: var(--ink-dark); border-color: var(--ink-dark); color: #fff; }

.price-group { border-top: 1px solid var(--ink-dark); }
.price-group:last-child { border-bottom: 1px solid var(--line-dark); }
.price-group-title { font: inherit; }
.price-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; text-align: left; }
.price-toggle-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.price-toggle-name { font: 700 clamp(22px, 2vw, 30px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink-dark); }
.price-toggle-sub { color: var(--muted-dark); font-size: 15px; }
.price-toggle-mark { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.price-toggle-mark::before, .price-toggle-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink-dark); transform: translate(-50%, -50%); transition: transform .3s var(--ease), background-color .2s; }
.price-toggle-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.price-toggle[aria-expanded="true"] .price-toggle-mark { background: var(--ink-dark); border-color: var(--ink-dark); }
.price-toggle[aria-expanded="true"] .price-toggle-mark::before, .price-toggle[aria-expanded="true"] .price-toggle-mark::after { background: #fff; }
.price-toggle[aria-expanded="true"] .price-toggle-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.price-toggle:hover .price-toggle-mark { border-color: var(--ink-dark); }
.is-enhanced .price-group:not(.is-open) .price-panel { display: none; }
.price-panel-inner { padding-bottom: 40px; }

/* each priced service is a card, laid side by side like a tier table */
.price-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.price-card { display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-dark); color: var(--ink-dark); }
.price-card h4 { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-dark); font: 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.price-card-top { display: contents; }
.price-pair { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.price-cell { display: flex; flex-direction: column; line-height: 1.1; }
.price-cell b { font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price-cell small { margin-top: 6px; color: var(--muted-dark); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.price-cell .price-from { order: -1; margin: 0 0 3px; font-size: 10.5px; }
.price-includes { order: 2; display: grid; gap: 0; margin-bottom: 20px; }
.price-includes li { padding: 7px 0 7px 18px; position: relative; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #111c2b; }
.price-includes li::before { content: ''; position: absolute; left: 1px; top: 14px; width: 6px; height: 6px; border: 1.5px solid var(--accent-deep); transform: rotate(45deg); }
.price-addon { order: 2; margin: -6px 0 18px; padding: 10px 12px; background: #edf4fb; border-radius: 6px; font-size: 14px; color: var(--muted-dark); }
.price-addon b { color: var(--ink-dark); }
.price-card-feature { background: #0a1a33; border-color: #0a1a33; color: #fff; }
.price-card-feature h4, .price-card-feature .price-pair { border-color: rgba(255, 255, 255, .16); }
.price-card-feature h4 { color: var(--accent); }
.price-card-feature .price-includes li { color: #fff; }
.price-card-feature .price-includes li::before { border-color: var(--accent); }
.price-card-feature .price-cell small { color: rgba(255, 255, 255, .6); }
.price-card-feature .price-addon { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }
.price-note { margin-top: 16px; font-size: 14px; color: var(--muted-dark); }

.price-group-table .price-panel-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.price-table-block { padding: 26px 24px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-dark); color: var(--ink-dark); }
.price-table-block h4 { margin-bottom: 14px; font: 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.price-table-block h4 span { display: block; margin-top: 6px; font: 600 11px/1 var(--sans); letter-spacing: .14em; color: var(--muted-dark); }
.price-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
.price-rows > div:last-child { border-bottom: 0; }
.price-rows dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.truck-figure { margin-top: 18px; }
.truck-figure button { display: block; width: 100%; overflow: hidden; }
.truck-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.truck-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted-dark); }
.price-rows-extras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; padding: 14px 24px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-dark); color: var(--ink-dark); }
.price-rows-extras > div:last-child { border-bottom: 1px solid var(--line-dark); }
.price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 36px; }
.price-foot .disclosure { color: var(--muted-dark); }

/* stonework services: photo cards */
body[data-mode="home"] .services { background: var(--bg); }
.stone-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px); }
.service-card { display: flex; flex-direction: column; }
.service-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 22px; border-radius: 10px; }
.service-card h3 { margin-bottom: 10px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; }
.service-card p { color: var(--muted); font-size: 16px; }
.service-card .text-link { margin-top: 14px; align-self: flex-start; }
.services-also { margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
.services-also strong { color: var(--ink); }

/* ---- Car wash: gallery, vans & trucks ----------------------------------------------------------------------------- */
.gallery { background: var(--bg); }
.section-heading-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: 40px; }
.gallery-intro { color: var(--muted); max-width: 40ch; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery-item { position: relative; display: block; width: 100%; overflow: hidden; background: #12233d; border-radius: 6px; cursor: zoom-in; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.gallery-item:hover img { transform: scale(1.035); }
.commercial-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.commercial-copy h3 { margin-bottom: 16px; font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--display); text-transform: uppercase; }
.commercial-copy p { color: var(--muted); margin-bottom: 26px; max-width: 46ch; }
.commercial-copy .hero-link { color: var(--accent); font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.film-caption { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* ---- Clips (shared) ----------------------------------------------------------------------------------------------- */
.work-play { position: relative; display: block; width: 100%; overflow: hidden; background: #12233d; border-radius: 6px; }
.work-play img, .work-play video { width: 100%; height: 100%; object-fit: cover; }
.work-play video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.is-playing .work-play video { opacity: 1; }
.has-media-error video { display: none; }
.work-mark { position: absolute; right: 16px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); transition: transform .25s var(--ease), opacity .25s; }
.work-mark::before { content: ''; position: absolute; left: 22px; top: 18px; border-left: 14px solid #111; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.is-playing .work-mark { opacity: 0; }
.work-play:hover .work-mark { transform: scale(1.08); }
.commercial-film .work-play { aspect-ratio: 16 / 11; }

/* ---- Car wash: before and after ----------------------------------------------------------------------------------- */
.before-after { background: var(--bg-2); }
.comparison-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.comparison-copy > p { margin-top: 16px; color: var(--muted); }
.comparison-choices { display: grid; margin-top: 34px; border-top: 1px solid var(--line); }
.comparison-choices button { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .2s, padding .25s var(--ease); }
.comparison-choices button span { opacity: 0; transition: opacity .2s; color: var(--accent); }
.comparison-choices button:hover { color: #fff; }
.comparison-choices button[aria-pressed="true"] { color: var(--accent); padding-left: 14px; box-shadow: inset 2px 0 0 var(--accent); }
.comparison-choices button[aria-pressed="true"] span { opacity: 1; }
.ba-grid { display: block; }
.ba-grid li { display: block; width: 100%; }
.ba-slider { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #12233d; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; --split: 50%; }
.ba-slider img { -webkit-user-drag: none; pointer-events: none; }
.ba-before, .ba-after { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--split)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #fff; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); }
.ba-knob::before, .ba-knob::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateY(-50%); }
.ba-knob::before { left: 12px; border-right: 7px solid #111; }
.ba-knob::after { right: 12px; border-left: 7px solid #111; }
.ba-tag { position: absolute; top: 14px; padding: 6px 10px; background: rgba(5, 14, 28, .82); color: #fff; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: opacity .2s; }
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; background: var(--accent); color: var(--on-accent); }
.ba-slider[data-near="left"] .ba-tag-before, .ba-slider[data-near="right"] .ba-tag-after { opacity: 0; }

/* ---- Car wash: reviews -------------------------------------------------------------------------------------------- */
.reviews { background: var(--bg-3); border-top: 1px solid var(--line); }
.review-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px 64px; margin-bottom: 44px; }
.review-intro h2 { max-width: 18ch; }
.review-side { display: flex; align-items: center; gap: 28px; }
.review-score { display: flex; align-items: center; gap: 16px; }
.review-score strong { font: 700 64px/1 var(--display); color: var(--accent); }
.review-score span { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.review-score small { color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.review-carousel-controls { display: flex; gap: 8px; }
.is-static .review-carousel-controls { display: none; }
.carousel-button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .2s, opacity .2s; }
.carousel-button:hover { border-color: var(--accent); }
.carousel-button:disabled { opacity: .35; cursor: default; }
.review-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.review-track::-webkit-scrollbar { display: none; }
.review-card { flex: 1 0 min(460px, 88%); display: flex; flex-direction: column; scroll-snap-align: start; padding: 36px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.review-stars { color: var(--accent); letter-spacing: .2em; font-size: 15px; }
.review-card blockquote { margin: 18px 0 28px; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; font-weight: 500; }
.review-card footer { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.review-card footer div { display: flex; flex-direction: column; }
.review-card footer strong { font-weight: 600; }
.review-card footer small, .review-card footer a { font-size: 13px; color: var(--muted); }
.review-card footer a:hover { color: var(--accent); }
.review-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 13px; color: var(--muted); }

/* ---- Stonework: recent work --------------------------------------------------------------------------------------- */
.work-section { background: var(--bg-2); }
.heritage-work-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.heritage-work-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.heritage-work-head p:last-child { color: var(--muted); }
.work-group + .work-group { margin-top: clamp(56px, 7vw, 96px); }
.work-group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 64px; align-items: baseline; margin-bottom: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.work-group-head h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.work-group-head p { color: var(--muted); }
.work-wall { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.work-wall-6 { --cols: 3; --ratio: 1 / 1; }
.work-wall-5 { --cols: 5; --ratio: 3 / 4; }
.work-wall-4 { --cols: 4; --ratio: 3 / 4; }
.work-wall .work-item { position: relative; overflow: hidden; border-radius: 8px; background: #ddd5ca; }
.work-open { display: block; width: 100%; cursor: zoom-in; }
.work-open img, .work-wall .work-play { width: 100%; aspect-ratio: var(--ratio, 1 / 1); object-fit: cover; }
.work-open img { transition: transform .8s var(--ease); }
.work-open:hover img { transform: scale(1.035); }
.work-wall .work-play img { height: 100%; }

/* ---- Instagram ---------------------------------------------------------------------------------------------------- */
.instagram { background: var(--bg); }
.instagram-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.instagram-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.instagram-grid a { display: block; overflow: hidden; border-radius: 8px; }
.instagram-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.instagram-grid a:hover img { transform: scale(1.04); }
.instagram-preview-note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---- Stonework: how a job runs ------------------------------------------------------------------------------------ */
.approach { background: var(--bg); }
.approach-head { margin-bottom: clamp(40px, 5vw, 64px); }
.process-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.process-strip li { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.process-strip span { font: 700 13px/1 var(--sans); letter-spacing: .14em; color: var(--accent); }
.process-strip strong { font: 400 24px/1.2 var(--display); }
.process-strip small { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---- Contact ------------------------------------------------------------------------------------------------------ */
body[data-mode="auto"] .contact { background: var(--light); color: var(--ink-dark); }
body[data-mode="auto"] .contact .kicker { color: var(--accent-deep); }
body[data-mode="home"] .contact { background: var(--accent); color: #fff; }
body[data-mode="home"] .contact .kicker { color: #e4b8c0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-copy h2 { margin-bottom: 18px; }
.contact-lead { font-size: 18px; margin-bottom: 26px; }
body[data-mode="auto"] .contact-lead, body[data-mode="auto"] .contact-note { color: var(--muted-dark); }
body[data-mode="home"] .contact-lead, body[data-mode="home"] .contact-note { color: rgba(255, 255, 255, .82); }
.contact-note { font-size: 15px; margin-top: 14px; }
.contact address { margin-bottom: 20px; font-size: 16px; line-height: 1.7; }
.open-now { margin-bottom: 12px; font-size: 15px; }
.visit-hours { max-width: 440px; border-top: 1px solid var(--line-dark); }
.visit-hours > div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
.visit-hours .is-today { font-weight: 700; }
.visit-hours .is-today dt::after { content: ' · today'; font-weight: 400; color: var(--muted-dark); }
.direct-links { border-top: 1px solid; }
.direct-links li { border-bottom: 1px solid; }
body[data-mode="auto"] .direct-links, body[data-mode="auto"] .direct-links li { border-color: var(--line-dark); }
body[data-mode="home"] .direct-links, body[data-mode="home"] .direct-links li { border-color: rgba(255, 255, 255, .22); }
.direct-links a { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px 0; transition: padding .25s var(--ease); }
.direct-links a:hover { padding-left: 10px; }
.direct-links span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.direct-links strong { font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; overflow-wrap: anywhere; }
.direct-links i { font-style: normal; font-size: 18px; }
.location-map { margin-top: 28px; aspect-ratio: 16 / 10; background: #dfe7f0; border-radius: 10px; overflow: hidden; }
.location-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }

/* ---- Footer and phone bar ------------------------------------------------------------------------------------------ */
.site-footer { padding: 40px var(--pad); background: var(--bg-3); color: rgba(255, 255, 255, .62); font-size: 14px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.footer-id { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer nav, .site-footer nav > span { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a { color: rgba(255, 255, 255, .86); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; }
.site-footer nav a:hover { text-decoration-color: currentColor; }
.mobile-actions { display: none; }

/* ---- Lightbox ----------------------------------------------------------------------------------------------------- */
.gallery-dialog { width: min(100vw - 32px, 1100px); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.gallery-dialog::backdrop { background: rgba(4, 10, 20, .92); backdrop-filter: blur(4px); }
#dialog-image { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; object-fit: contain; cursor: zoom-out; }
.dialog-close { position: fixed; top: 16px; right: 20px; width: 48px; height: 48px; font-size: 30px; line-height: 1; color: #fff; }
.dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.dialog-nav { display: flex; align-items: center; gap: 12px; }
.dialog-nav button { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; }

/* ---- The other business (same band on both sides, pointing across) --------------------------------------------- */
.sister { background: var(--navy); color: #fff; }
.sister-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.sister-card figure { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; }
.sister-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sister-card:hover img { transform: scale(1.04); }
.sister-card .kicker { color: #8fc9ff; }
.sister-card h2 { margin-bottom: 14px; color: #fff; }
.sister-card p { max-width: 50ch; color: rgba(255, 255, 255, .78); }
.sister-card .button { margin-top: 28px; }
.sister-card.mode-auto h2 { font: 400 clamp(30px, 3.2vw, 46px)/1.12 'Marcellus', Georgia, serif; text-transform: none; -webkit-text-stroke: .018em currentColor; }
.sister-card.mode-home h2 { font: 700 clamp(30px, 3.2vw, 46px)/1.06 var(--sans); text-transform: uppercase; -webkit-text-stroke: 0; }
.sister-card .button { background: #fff; color: var(--navy); }
.sister-card:hover .button { background: #dcebfb; }

/* ---- Footer (shared) ---------------------------------------------------------------------------------------------- */
.site-footer { padding: 56px var(--pad) 40px; background: #06101f; color: rgba(255, 255, 255, .66); font-size: 14.5px; }
body[data-mode="home"] .site-footer { background: #1c080d; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 40px; padding-bottom: 32px; margin-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-mark { font: 400 26px/1 var(--wordmark); letter-spacing: .18em; text-transform: uppercase; color: #fff; -webkit-text-stroke: .03em currentColor; }
.footer-mark + p { margin-top: 10px; }
.footer-businesses { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px 48px; }
.footer-businesses strong { display: block; color: #fff; font-weight: 700; }

/* ---- Main menu: the two logos lead, each on its own brand background -------------------------------------------- */
.gate { display: none; }
html.gate-open { overflow: hidden; }
html.gate-open .gate { position: fixed; inset: 0; z-index: 500; display: flex; overflow-y: auto; background: #0b1e32; font-family: var(--sans); }
.gate-panels { display: flex; flex: 1; min-height: 100%; }
.gate-panel { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 64px clamp(28px, 4.5vw, 80px); text-align: center; transition: background-color .25s var(--ease); }
.gate-panel-auto { background: #0b1e32; color: #f5f8fc; }
.gate-panel-home { background: #3a0c16; color: #f8efef; }
.gate-panel-auto:hover { background: #102942; }
.gate-panel-home:hover { background: #46101c; }
.gate-panel:focus-visible { outline: 3px solid currentColor; outline-offset: -12px; }
.gate:focus { outline: none; }
.gate-panel:active .gate-logo { transform: scale(.985); }
.gate-kicker { position: absolute; top: clamp(26px, 5vh, 52px); font-size: 12px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.gate-panel-auto .gate-kicker { color: #a9c7e1; }
.gate-panel-home .gate-kicker { color: #dcb1b8; }
.gate-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(200px, 23vw, 330px); margin-bottom: 28px; transition: transform .25s var(--ease); }
.gate-logo img { display: block; width: 100%; height: auto; max-width: 620px; max-height: 100%; object-fit: contain; }
.gate-panel-home .gate-logo img { max-width: 490px; }
.gate-service { font-size: clamp(20px, 2vw, 27px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.gate-desc { max-width: 38ch; font-size: 16px; line-height: 1.5; }
.gate-panel-auto .gate-desc { color: #b3c5d6; }
.gate-panel-home .gate-desc { color: #d6c0c3; }
.gate-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 52px; margin-top: 24px; padding: 0 24px; border: 1px solid; border-radius: 4px; font-size: 16px; font-weight: 600; transition: background-color .25s, color .25s; }
.gate-panel-auto .gate-cta { border-color: #6c93b5; color: #f5f8fc; }
.gate-panel-home .gate-cta { border-color: #b8808a; color: #f8efef; }
.gate-panel-auto:hover .gate-cta, .gate-panel-auto:focus-visible .gate-cta { background: #f5f8fc; border-color: #f5f8fc; color: #0b1e32; }
.gate-panel-home:hover .gate-cta, .gate-panel-home:focus-visible .gate-cta { background: #f8efef; border-color: #f8efef; color: #3a0c16; }
/* Leaving the menu: the chosen panel steps forward, the other steps back, then the whole menu lifts away like a
   blind. site.js waits for GATE_LEAVE_MS before it removes the menu; keep the two in step. */
@media (prefers-reduced-motion: no-preference) {
  .gate-panel > * { transition: transform .45s var(--m-ease), opacity .3s var(--m-ease); }
  .gate-panel:hover .gate-logo { transform: translateY(-4px) scale(1.025); }
  .gate-panel:active .gate-logo { transform: scale(.985); }
  .gate-cta .arrow { display: inline-block; transition: transform .25s var(--m-ease); }
  .gate-panel:hover .gate-cta .arrow { transform: translate(3px, -3px); }
  html.gate-open:not(.gate-leaving) .gate-panel > * { animation: m-rise .7s var(--m-ease) both; }
  html.gate-open:not(.gate-leaving) .gate-panel > .gate-logo { animation-name: m-rise-logo; animation-duration: .9s; }
  html.gate-open:not(.gate-leaving) .gate-panel > :nth-child(2) { animation-delay: .05s; }
  html.gate-open:not(.gate-leaving) .gate-panel > :nth-child(3) { animation-delay: .16s; }
  html.gate-open:not(.gate-leaving) .gate-panel > :nth-child(4) { animation-delay: .21s; }
  html.gate-open:not(.gate-leaving) .gate-panel > :nth-child(5) { animation-delay: .26s; }
  html.gate-leaving .gate { transform: translateY(-100%); transition: transform .62s cubic-bezier(.76, 0, .24, 1) .14s; }
  html.gate-leaving .gate-panel.is-chosen .gate-logo { transform: scale(1.06); }
  html.gate-leaving .gate-panel:not(.is-chosen) > * { opacity: .25; }
}
@media (max-width: 760px) {
  .gate-panels { flex-direction: column; }
  .gate-panel { flex: 1 0 auto; min-height: 340px; padding: 50px 26px 26px; gap: 6px; }
  .gate-kicker { top: 20px; font-size: 10px; letter-spacing: .16em; }
  .gate-logo { height: clamp(105px, 18svh, 160px); max-width: 410px; margin-bottom: 12px; }
  .gate-panel-home .gate-logo { max-width: 330px; }
  .gate-service { font-size: 20px; }
  .gate-desc { font-size: 14px; }
  .gate-cta { min-height: 44px; margin-top: 14px; padding: 0 18px; font-size: 14px; }
}

/* ---- Motion (motion.js switches these classes on; with "reduce motion" on, none of it runs) ---------------------- */
:root { --m-ease: cubic-bezier(.22, 1, .36, 1); --m-spring: cubic-bezier(.34, 1.36, .64, 1); }
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-rise-logo { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes m-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes m-backdrop { from { opacity: 0; } }

/* Section blocks rise as they come up the screen; grids and lists bring their items in one after another. */
.reveal-pending { opacity: 0; transform: translateY(22px); }
[data-stagger] > .reveal-item { transition: opacity .7s var(--m-ease), transform .8s var(--m-ease); transition-delay: calc(min(var(--i, 0), 7) * 70ms); }
[data-stagger] > .reveal-item.reveal-pending { transform: translateY(26px) scale(.98); }
[data-stagger] > .reveal-item img { transition: transform 1.1s var(--m-ease); }
[data-stagger] > .reveal-item.reveal-pending img { transform: scale(1.08); }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-armed] { transition: opacity .8s var(--m-ease), transform .9s var(--m-ease); }

  /* The business switch: the selected pill glides across instead of jumping. */
  .business-switch { position: relative; isolation: isolate; }
  .business-switch.has-thumb::before { content: ''; position: absolute; z-index: -1; top: var(--thumb-y, 3px); left: 0; height: var(--thumb-h, 34px); width: var(--thumb-w, 0); border-radius: 999px; background: var(--accent); transform: translateX(var(--thumb-x, 0)); }
  .business-switch.thumb-ready::before { transition: transform .45s var(--m-spring), width .45s var(--m-ease), background-color .3s; }
  body[data-mode] .business-switch.has-thumb button[aria-selected="true"] { background: transparent; }
  .business-switch button:active { transform: scale(.96); }
  .business-switch button { transition: color .3s var(--m-ease), transform .15s ease-out; }

  /* Buttons: lift on hover, give a little on press; arrows nudge the way they point. */
  .button, .header-call, .gate-cta, .mobile-actions a, .carousel-button, .dialog-nav button, .price-jump a { transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s var(--m-ease), transform .25s var(--m-ease); }
  .button:hover, .header-call:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
  .button:active, .header-call:active, .mobile-actions a:active, .carousel-button:active, .dialog-nav button:active, .price-jump a:active { transform: scale(.96); box-shadow: none; transition-duration: .08s; }
  .arrow { display: inline-block; transition: transform .25s var(--m-ease); }
  a:hover > .arrow, a:hover > * > .arrow, a:hover .arrow { transform: translate(2px, -2px); }
  .text-link { transition: color .2s, text-decoration-thickness .2s, text-underline-offset .25s var(--m-ease); }
  .text-link:hover { text-underline-offset: 7px; }

  /* Contact rows: the arrow and text slide together, no layout shift. */
  .direct-links a { transition: none; }
  .direct-links a:hover { padding-left: 0; }
  .direct-links a > * { transition: transform .35s var(--m-ease); }
  .direct-links a:hover > strong, .direct-links a:hover > span { transform: translateX(8px); }
  .direct-links a:hover > .arrow { transform: translate(3px, -3px); }

  /* Photo tiles: a slow zoom and a soft lift. */
  .work-open img, .gallery-item img, .instagram-grid img, .detail-figure img, .sister-card img { transition: transform .9s var(--m-ease); }
  .work-wall .work-item, .gallery-grid > li, .instagram-grid > li { transition: transform .4s var(--m-ease), box-shadow .4s var(--m-ease); }
  .work-wall .work-item:hover, .gallery-grid > li:hover, .instagram-grid > li:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .45); }
  .work-mark { transition: transform .35s var(--m-spring), opacity .25s; }
  .work-play:hover .work-mark { transform: scale(1.12); }

  /* Price list: groups open and close smoothly instead of snapping. */
  .is-enhanced .price-group .price-panel, .is-enhanced .price-group:not(.is-open) .price-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--m-ease), opacity .35s var(--m-ease); }
  .is-enhanced .price-group:not(.is-open) .price-panel { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s var(--m-ease), opacity .2s, visibility 0s .4s; }
  .is-enhanced .price-panel > .price-panel-inner { min-height: 0; overflow: hidden; transition: padding-bottom .45s var(--m-ease); }
  .is-enhanced .price-group:not(.is-open) .price-panel > .price-panel-inner { padding-bottom: 0; }
  .price-toggle-mark { transition: background-color .25s, border-color .25s, transform .45s var(--m-spring); }
  .price-toggle[aria-expanded="true"] .price-toggle-mark { transform: rotate(180deg); }
  .price-card { transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease); }
  .price-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(10, 26, 51, .45); }

  /* Before/after: the knob swells while it is held. */
  .ba-knob { transition: transform .25s var(--m-spring), box-shadow .25s; }
  .ba-slider:hover .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
  .ba-slider[data-dragging] .ba-knob { transform: translate(-50%, -50%) scale(1.16); box-shadow: 0 6px 26px rgba(0, 0, 0, .45); }

  /* Lightbox: the photo comes forward, the room dims. */
  .gallery-dialog[open] { animation: m-pop .38s var(--m-ease) both; }
  .gallery-dialog[open]::backdrop { animation: m-backdrop .3s ease-out both; }
  #dialog-image.is-stepping { animation: m-pop .35s var(--m-ease) both; }

  /* Switching business: the new side's hero plays its entrance again. */
  .hero-media { will-change: transform; }
}

/* Decorative arrows: text-style, and left off on phones where some systems draw them as emoji. */
.arrow { font-style: normal; }
@media (max-width: 760px) { .arrow { display: none !important; } }

/* ---- Responsive --------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-set { gap: 20px; }
  .price-group-table .price-panel-inner { grid-template-columns: 1fr 1fr; }
  .price-rows-extras { grid-template-columns: 1fr 1fr; }
  .work-wall-5 { --cols: 3; }
}
@media (max-width: 980px) {
  .main-nav, .header-call { display: none; }
  .sister-card { grid-template-columns: 1fr; }
  .footer-businesses { grid-template-columns: 1fr; }
  .business-switch { margin-left: auto; }
  body[data-mode="home"] .hero-text { grid-template-columns: 1fr; gap: 22px; }
  .detail-head, .services-heading, .heritage-work-head, .comparison-layout, .contact-grid, .commercial-work { grid-template-columns: 1fr; }
  .services-heading h2, .services-heading .section-intro, .board-figure { grid-column: 1; }
  .detail-row, .detail-row-flip { grid-template-columns: 1fr; }
  .detail-row-flip .detail-figure { order: 0; }
  .detail-figure img { aspect-ratio: 4 / 3; }
  .stone-services { grid-template-columns: 1fr 1fr; }
  .process-strip { grid-template-columns: 1fr 1fr; }
  .work-group-head { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; padding-bottom: 68px; }
  .site-header { inset: 10px 10px auto; border-radius: 12px; }
  .header-bar { min-height: 58px; gap: 10px; padding: 0 12px 0 14px; }
  .brand-name { font-size: 14px; letter-spacing: .14em; }
  .brand-line { font-size: 9.5px; letter-spacing: .14em; }
  .business-switch button { padding: 0 11px; min-height: 32px; font-size: 12.5px; }
  .gate-panels { flex-direction: column; }

  .hero { min-height: max(620px, 92svh); }
  body[data-mode="auto"] .hero-media img { object-position: 30% 50%; }
  body[data-mode="auto"] .hero-media::after { background: linear-gradient(0deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .7) 45%, rgba(8, 8, 8, .3) 100%); }
  .hero-actions .button { flex: 1 1 100%; }
  .wash-facts { flex-direction: column; align-items: center; padding: 18px var(--gutter); }
  .wash-facts p { padding: 6px 0; }
  .wash-facts p + p { border-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery-grid li:first-child { grid-column: 1 / -1; }
  .gallery-grid li:first-child img { aspect-ratio: 4 / 3; }
  .price-list { grid-template-columns: 1fr; }
  .price-card { padding: 22px 20px 20px; }
  .price-includes { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .price-includes li { padding: 4px 0 4px 14px; font-size: 14px; }
  .price-includes li::before { top: 11px; width: 5px; height: 5px; }
  .price-group-table .price-panel-inner, .price-rows-extras { grid-template-columns: 1fr; }
  .price-toggle-text { flex-direction: column; gap: 4px; }
  .stone-services { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr; }
  .work-wall-6 { --cols: 2; }
  .work-wall-5, .work-wall-4 { --cols: 2; }
  .direct-links a { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .direct-links span { grid-column: 1 / -1; }
  .review-card { padding: 26px; }
  .review-side { width: 100%; justify-content: space-between; }
  .mobile-actions { position: fixed; z-index: 90; inset: auto 0 0; display: flex; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--bg-3); }
  .mobile-actions a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px 4px; text-align: center; line-height: 1.2; }
  .mobile-actions a + a { border-left: 1px solid var(--line); }
  .mobile-actions span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
  .mobile-actions strong { font-size: 14.5px; font-weight: 600; }
  body[data-mode="auto"] .mobile-actions { color: #fff; }
  body[data-mode="auto"] .mobile-actions strong { color: var(--accent); }
  body[data-mode="home"] .mobile-actions { color: #fff; background: #3a0c16; }
  body[data-mode="home"] .mobile-actions strong { color: #e4b8c0; }
}
@media (max-width: 380px) {
  .brand-line { display: none; }
  .business-switch button { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}