:root {
  --red: var(--text-primary);
  --blue: var(--text-primary);
  --ink: var(--text-primary);
  --paper: var(--surface-2);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --display: "Manrope", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(1.1rem, 3.6vw, 4.5rem);
  --max: 1440px;
  /* Shared type scale: major third (1.25), based on 1rem.
     The top two steps interpolate from the previous step. */
  --type-small: .8rem;
  --type-0: 1rem;
  --type-1: 1.25rem;
  --type-2: 1.5625rem;
  --type-3: 1.953125rem;
  --type-4: clamp(1.953125rem, 1.72rem + 1vw, 2.44140625rem);
  --type-5: clamp(2.44140625rem, 2.15rem + 1.25vw, 3.0517578125rem);

  /* Motion scale. 27 distinct durations across 39 declarations become 8 steps.
     Delays are untouched: 80/160/240/320ms is already a deliberate stagger. */
  --t-1: 250ms;
  --t-2: 360ms;
  --t-3: 460ms;
  --t-4: 560ms;
  --t-5: 720ms;
  --t-6: 880ms;
  --t-7: 1100ms;
  --t-8: 1400ms;

  /* Two curves, and which one you use is decided by the property, not taste.
     Geometry -- transform, grid-template-*, max-height, border-radius -- moves
     on --ease. Appearance -- opacity, filter, colour, border-colour -- fades on
     --ease-fade. The existing sheet already followed this in 24 of 26 cases;
     naming it keeps a later edit from "tidying" the fades onto the house curve
     and flattening the distinction. --ease-fade is plain `ease`, so this
     renames the convention without changing a single computed value. */
  --ease-fade: ease;/* Neutral alpha ladders. 32 distinct white alphas and 8 black ones collapse
     to these; no value moved by more than .05 alpha. Named by alpha because
     that is what they are -- they serve borders, scrims and muted text alike,
     so a role name would be a lie. */
  --w-04: rgba(243,240,234,0.04);
  --w-13: rgba(243,240,234,0.13);
  --w-16: rgba(243,240,234,0.16);
  --w-22: rgba(243,240,234,0.22);
  --w-30: rgba(243,240,234,0.3);
  --w-36: rgba(243,240,234,0.36);
  --w-45: rgba(243,240,234,0.45);
  --w-55: rgba(243,240,234,0.55);
  --w-65: rgba(243,240,234,0.65);
  --w-74: rgba(243,240,234,0.74);
  --k-08: rgba(40,37,31,0.08);
  --k-18: rgba(40,37,31,0.18);
  --k-50: rgba(40,37,31,0.5);
  --k-62: rgba(40,37,31,0.62);
  --k-84: rgba(40,37,31,0.84);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  transition: background var(--t-5) var(--ease), color var(--t-5) var(--ease);
}
body.chooser-open { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--red); color: var(--text-on-dark); }
/* The surfaces the browser draws still belong to the design: one focus ring for every control, and a scrollbar
   that follows the business you are looking at rather than the OS default. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html { scrollbar-color: var(--text-primary) var(--transparent); }
body[data-mode="auto"] { scrollbar-color: var(--text-muted) var(--transparent); }
body[data-mode="home"] ::selection { background: var(--surface-dark); color: var(--text-on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1200; top: 10px; left: 10px; padding: .75rem 1rem; background: var(--surface-1); color: var(--text-primary); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
/* Hide the business that is not showing. The "js" class is added by the small script at the top of <body> in
   index.html, so with JavaScript off nothing is hidden and both businesses are shown. */
.js body[data-mode="auto"] .mode-home,
.js body[data-mode="home"] .mode-auto { display: none !important; }

/* Service chooser */
.chooser { position: fixed; inset: 0; z-index: 900; background: var(--surface-dark); color: var(--text-on-dark); opacity: 1; visibility: visible; transition: opacity var(--t-3) var(--ease), visibility var(--t-3); }
.chooser.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.chooser-top { position: absolute; z-index: 5; inset: 0 0 auto; height: 88px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--w-16); }
.chooser-top p { margin: 0; font-size: var(--type-small);  text-transform: uppercase; }
.parent-mark { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--display);  text-decoration: none; }
.parent-c { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--blue); color: var(--red); }
.chooser-grid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.choice { position: relative; isolation: isolate; overflow: hidden; padding: 0; border: 0; background: var(--surface-dark); text-align: left; cursor: pointer; }
.choice + .choice { border-left: 1px solid var(--w-22); }
.choice-bg, .choice-shade { position: absolute; inset: 0; }
.choice-bg { z-index: -3; background-size: cover; background-position: center; transform: scale(1.025); filter: saturate(.72); transition: transform var(--t-8) var(--ease), filter var(--t-5); }
.choice-auto .choice-bg { background: var(--surface-dark) url('/media/cankaj/wash-board.jpg') center 30% / cover no-repeat; }
.choice-home .choice-bg { background-image: url('/media/cankaj/work-stonework.jpg'); background-position: center 30%; }
.choice-shade { z-index: -2; background: linear-gradient(180deg, var(--scrim-12) 18%, var(--scrim-94) 95%), linear-gradient(90deg, var(--scrim-45), var(--transparent)); }
.choice-content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(5.5rem, 11vh, 9rem); display: grid; gap: 1rem; transition: transform var(--t-5) var(--ease); }
.choice-no { color: var(--w-74); font-size: var(--type-small); font-weight: 600;  }
.choice strong { font-family: var(--serif); font-size: var(--type-5); font-weight: 400; line-height: .8; }
.choice-sub { color: var(--w-74); line-height: 1.55; }
.choice-cta { display: flex; justify-content: space-between; width: min(320px,100%); padding-top: 1rem; border-top: 1px solid var(--w-45); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.choice-cta span { color: var(--blue); font-size: var(--type-1); }
.choice-home .choice-cta span { color: var(--text-muted-on-dark); }
.choice:hover .choice-bg, .choice:focus-visible .choice-bg { transform: scale(1.025); filter: saturate(1); }
.choice:hover .choice-content, .choice:focus-visible .choice-content { transform: none; }
.choice:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.chooser-foot { position: absolute; z-index: 5; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0; color: var(--w-65); font-size: var(--type-small);  text-transform: uppercase; white-space: nowrap; }

/* Transition and header */
.mode-wipe { position: fixed; z-index: 800; inset: 0; pointer-events: none; background: var(--wipe-color, var(--surface-2)); transform: translateX(-102%); }
.mode-wipe.run { animation: wipe var(--t-6) var(--ease) both; }
@keyframes wipe { 0% { transform: translateX(-102%); } 48%,55% { transform: translateX(0); } 100% { transform: translateX(102%); } }
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 88px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-bottom: 1px solid var(--w-16); color: var(--text-on-dark); transition: height var(--t-2), background var(--t-2), color var(--t-2), border-color var(--t-2); }
.site-header.scrolled { height: 72px; background: var(--scrim-88); backdrop-filter: blur(16px); }
body[data-mode="home"] .site-header { color: var(--text-primary); border-color: var(--border-subtle); background: var(--light-overlay-90); backdrop-filter: blur(16px); }
.brand { display: block; width: min(290px,28vw); }
.brand-img { width: 100%; height: 56px; object-fit: contain; object-position: left center; }
body[data-mode="auto"] .brand-img-home, body[data-mode="home"] .brand-img-auto { display: none; }
.main-nav, .nav-set { display: flex; gap: clamp(1.25rem,2.7vw,2.8rem); }
.main-nav a { text-decoration: none; font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.main-nav a:hover { color: var(--accent); }
.mode-toggle { position: relative; justify-self: end; display: grid; grid-template-columns: 1fr 1fr; min-width: 178px; padding: 4px; border: 1px solid currentColor; border-radius: 999px; }
.mode-toggle button { position: relative; z-index: 2; min-height: 36px; padding: 0 .9rem; border: 0; background: var(--transparent); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; cursor: pointer; transition: color var(--t-3); }
.toggle-pill { position: absolute; z-index: 1; top: 4px; left: 4px; width: calc(50% - 4px); height: 36px; border-radius: 999px; background: var(--accent); transition: transform var(--t-4) var(--ease), background var(--t-4); }
body[data-mode="auto"] .toggle-pill { transform: translateX(100%); background: var(--blue); }
body[data-mode="auto"] [data-switch="auto"], body[data-mode="home"] [data-switch="home"] { color: var(--text-on-dark); }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--surface-dark); color: var(--text-on-dark); }
.hero-media, .hero-image, .hero-overlay { position: absolute; inset: 0; }
.hero-media { z-index: -3; }
.hero-image { background-position: center; background-size: cover; transition: opacity var(--t-5) var(--ease), transform var(--t-8) var(--ease); }
.hero-image-auto { background-image: url('/media/cankaj/wash-board.jpg'); background-position: center 30%; }
body[data-mode="auto"] .hero { background: var(--surface-dark); }
.hero-image-home { background-image: url('/media/cankaj/work-wall-build.jpg'); background-position: center 35%; }
/* The property photo is portrait phone footage, so on wider screens it sits as a panel on the right
   instead of being stretched across the whole hero. */
body[data-mode="home"] .hero { background: var(--surface-dark); }
@media (min-width: 701px) {
  .hero-image-auto,
  .hero-image-home { left: auto; width: min(46vw, 640px); -webkit-mask-image: linear-gradient(90deg, var(--transparent), var(--text-primary) 34%); mask-image: linear-gradient(90deg, var(--transparent), var(--text-primary) 34%); }
}
body[data-mode="auto"] .hero-image-home, body[data-mode="home"] .hero-image-auto { opacity: 0; transform: scale(1.04); }
.hero-overlay { z-index: -2; background: linear-gradient(90deg, var(--scrim-96), var(--scrim-66) 41%, var(--scrim-07) 74%), linear-gradient(0deg, var(--scrim-75), var(--transparent) 55%); }
body[data-mode="home"] .hero-overlay { background: linear-gradient(90deg, var(--scrim-91), var(--scrim-57) 42%, var(--scrim-05) 76%), linear-gradient(0deg, var(--scrim-61), var(--transparent) 55%); }
.hero-inner { width: min(var(--max),calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: 11rem 0 clamp(8rem,16vh,11rem); }
.eyebrow, .kicker { margin: 0; font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.hero .eyebrow { margin-bottom: 1.5rem; color: var(--w-74); }
.hero h1 { max-width: 1080px; margin: 0; font-family: var(--display);    text-transform: uppercase; }
.hero h1 em { color: var(--blue); font-family: var(--serif); font-weight: 500; text-transform: none; }
body[data-mode="home"] .hero h1 { max-width: 980px; font-family: var(--serif); font-weight: 500;  text-transform: none; }
body[data-mode="home"] .hero h1 em { color: var(--text-muted-on-dark); }
.hero-copy { max-width: 560px; margin: 1.7rem 0 0; color: var(--w-74); font-size: var(--type-1); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 51px; padding: .85rem 1.4rem; align-items: center; justify-content: center; gap: .75rem; border: 1px solid var(--transparent); text-decoration: none; text-transform: uppercase; font-size: var(--type-small); font-weight: 600;  cursor: pointer; transition: transform var(--t-1), background var(--t-2), color var(--t-2), border var(--t-2); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: var(--text-on-dark); }
.button-ghost { border-color: var(--w-55); background: var(--k-08); color: var(--text-on-dark); }
.button-ghost:hover { background: var(--surface-1); color: var(--text-primary); }
.button-light { background: var(--surface-1); color: var(--text-primary); }
.hero-status { position: absolute; left: var(--gutter); bottom: 2rem; display: flex; align-items: center; gap: .75rem; color: var(--w-74); font-size: var(--type-small); }
.hero-status strong { color: var(--text-on-dark); font-weight: 500; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--shadow-soft); }
body[data-mode="home"] .status-dot { background: var(--surface-3); box-shadow: 0 0 0 5px var(--shadow-soft); }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 2rem; display: flex; gap: 1rem; color: var(--w-74); text-decoration: none; font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }

/* Shared content */
.section { padding: clamp(5rem,10vw,10rem) var(--gutter); background: var(--bg); }
.section-heading { max-width: var(--max); margin: 0 auto clamp(3rem,6vw,6rem); }
.section-heading-row { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 7vw; }
.kicker { margin-bottom: 1.25rem; color: var(--accent); }
h2 { margin: 0; font-family: var(--display);    text-transform: uppercase; }
body[data-mode="home"] h2 { font-family: var(--serif); font-weight: 500;  text-transform: none; }
.section-intro { max-width: 650px; margin: 1.5rem 0 0; color: var(--muted); font-size: var(--type-1); line-height: 1.7; }
.service-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { min-height: 340px; padding: 1.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-card-featured { background: var(--surface); }
.service-number { color: var(--muted); font-size: var(--type-small);  }
.service-card h3 { margin: auto 0 1rem; font-family: var(--serif);  font-weight: 500;  }
.service-card p { min-height: 4.6em; margin: 0 0 2rem; color: var(--muted); line-height: 1.55; }
.service-card a { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); text-decoration: none; font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.service-card a span { color: var(--blue); }
.heritage-services { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }
.heritage-services article { display: grid; grid-template-columns: 11% 39% 1fr; gap: 2rem; align-items: start; padding: clamp(1.7rem,3.6vw,3.2rem) 0; border-bottom: 1px solid var(--line); }
.heritage-services article > span { color: var(--accent); font-family: var(--serif); font-size: var(--type-1); }
.heritage-services article > div { display: contents; }
.heritage-services h3 { margin: 0; font-family: var(--serif);  font-weight: 500;  }
.heritage-services p { max-width: 560px; margin: .25rem 0 0; color: var(--muted); line-height: 1.65; }

/* Work */
.work-section { padding: clamp(5rem,9vw,9rem) var(--gutter); background: var(--surface); }
.work-copy { max-width: var(--max); margin: 0 auto 3rem; display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; align-items: end; }
.work-copy .kicker { grid-column: 1 / -1; }
.work-copy p { margin: 0; color: var(--muted); line-height: 1.65; }
.disclosure { color: var(--muted); font-size: var(--type-small); line-height: 1.5; }
.work-copy .disclosure { grid-column: 2; margin-top: -1rem; }
.compare { --pos: 52%; position: relative; max-width: var(--max); min-height: 430px; aspect-ratio: 16/8; margin: 0 auto; overflow: hidden; background: var(--surface-dark); }
.compare-before, .compare-after, .compare-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.compare::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--surface-1); transform: translateX(-1px); }
.compare-handle { position: absolute; z-index: 4; top: 50%; left: var(--pos); width: 48px; height: 48px; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 50%; background: var(--surface-1); color: var(--text-primary); }
.compare-label { position: absolute; z-index: 4; top: 1rem; padding: .5rem .65rem; background: var(--scrim-72); color: var(--text-on-dark); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.compare-label-before { right: 1rem; }
.compare-label-after { left: 1rem; }
.heritage-work { max-width: var(--max); margin: 0 auto; }
.heritage-work-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7vw; align-items: end; margin-bottom: clamp(3rem,6vw,6rem); }
.heritage-work-head .kicker { grid-column: 1 / -1; }
.heritage-work-head p:last-child { margin: 0; color: var(--muted); font-size: var(--type-0); line-height: 1.7; }

/* Gallery and reviews */
.gallery-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: repeat(2,minmax(280px,1fr)); gap: .8rem; }
.gallery-item { position: relative; min-height: 300px; overflow: hidden; padding: 0; border: 0; background: var(--surface-dark); cursor: zoom-in; }
.gallery-item-large { grid-row: 1 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-5) var(--ease), filter var(--t-4); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); filter: brightness(.8); }
/* The caption is white type laid straight onto the photograph, with nothing
   behind it. Sampling the pixels under the five captions (object-fit: cover
   mapping, with the img's own saturate/contrast filter applied), the brightest
   8x8 patch beneath the text gives 1.30, 1.39, 2.32, 3.18 and 3.57 against
   white. All are under the 4.5 AA floor and the first two are effectively white
   on white. Mean contrast passes on every one of them (5.19 to 15.62), which is
   why an averaging check reports no problem: the failure is local, wherever a
   letter crosses a bright part of the frame.

   Every other caption on this site already sits on a scrim -- .compare-label,
   .work-label, .process-media -- so this is the house treatment
   applied to the one place it was missed, not a new device.

   z-index is load-bearing. On hover the img takes transform: scale(1.04), and a
   transformed element creates a stacking context painted with the positioned
   descendants, so without an explicit order it would cover the scrim exactly
   when the photo is also being brightened. */
.gallery-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(var(--transparent), var(--scrim-88));
  pointer-events: none;
  z-index: 1;
}
.gallery-item span { position: absolute; inset: auto 1rem 1rem; z-index: 2; color: var(--text-on-dark); font-size: var(--type-small); font-weight: 600;  text-align: left; text-transform: uppercase; }
.gallery > .disclosure { max-width: var(--max); margin: 1rem auto 0; }
.reviews { padding: clamp(5rem,10vw,10rem) var(--gutter); background: var(--surface-dark); color: var(--text-on-dark); }
.reviews-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .35fr 1fr; column-gap: 8vw; }
.review-score { display: grid; align-content: start; gap: .5rem; }
.review-score strong { font-family: var(--display); font-size: var(--type-5); line-height: .8; }
.review-score span { color: var(--text-on-dark);  }
.review-score small { max-width: 230px; color: var(--w-74); line-height: 1.5; }
.reviews blockquote { margin: 0; font-family: var(--serif); font-size: var(--type-5); line-height: .98; }
.review-attribution { grid-column: 2; display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--w-36); color: var(--w-74); font-size: var(--type-small);  text-transform: uppercase; }
.review-actions { grid-column: 2; display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.review-proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(3rem,6vw,5rem); border-top: 1px solid var(--w-30); border-bottom: 1px solid var(--w-30); }
.review-proof div { display: grid; gap: .35rem; padding: 1.25rem 1.25rem 1.25rem 0; }
.review-proof div + div { padding-left: 1.25rem; border-left: 1px solid var(--w-30); }
.review-proof strong { font-size: var(--type-1); font-weight: 600; }
.review-proof span { color: var(--w-65); font-size: var(--type-small);  text-transform: uppercase; }
.text-link { text-underline-offset: 4px; font-size: var(--type-small); }

/* Location, approach, confidence */
.location { max-width: none; display: grid; grid-template-columns: 1.25fr .75fr; gap: 7vw; align-items: center; }
.location-map { min-height: 610px; }
.location-map iframe { width: 100%; height: 100%; min-height: 610px; border: 0; filter: grayscale(.35) contrast(.95); }
.location-copy { max-width: 520px; }
.location-copy address { margin: 2.2rem 0; color: var(--muted); font-style: normal; font-size: var(--type-1); line-height: 1.7; }
.location-copy dl { margin: 0 0 2rem; border-top: 1px solid var(--line); }
.location-copy dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.location-copy dt, .location-copy dd { margin: 0; font-size: var(--type-0); }
.location-copy dd { color: var(--muted); }
.approach { padding: clamp(5rem,10vw,10rem) var(--gutter); background: var(--surface-dark); color: var(--text-on-dark); }
.approach-head { max-width: var(--max); margin: 0 auto clamp(3rem,6vw,6rem); display: grid; grid-template-columns: .4fr 1fr; align-items: start; gap: 6vw; }
.approach .kicker { color: var(--text-muted-on-dark); }
.process-list { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--w-22); }
.process-list li { display: grid; grid-template-columns: 11% 35% 1fr; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--w-22); }
.process-list li > span { color: var(--text-muted-on-dark); font-family: var(--serif); }
.process-list li > div { display: contents; }
.process-list h3 { margin: 0; font-family: var(--serif);  font-weight: 500; }
.process-list p { max-width: 520px; margin: .3rem 0 0; color: var(--w-65); line-height: 1.6; }
.confidence { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.confidence-facts { border-top: 1px solid var(--line); }
.confidence-facts div { display: grid; gap: .35rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.confidence-facts strong { font-weight: 500; }
.confidence-facts span { color: var(--muted); font-size: var(--type-small); }

/* Contact and footer */
.contact { padding: clamp(5rem,10vw,10rem) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; background: var(--bg); }
.contact-copy > p:not(.kicker) { max-width: 570px; color: var(--muted); line-height: 1.65; }
.direct-links { margin-top: 3rem; border-top: 1px solid var(--line); }
.direct-links a { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.direct-links span { color: var(--muted); font-size: var(--type-small);  text-transform: uppercase; }
.direct-links strong { font-weight: 500; word-break: break-word; }
.photo-brief { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--line); background: color-mix(in srgb,var(--surface) 72%,var(--transparent)); }
.photo-brief h3 { margin: 0 0 1rem; font-family: var(--serif);  font-weight: 500; }
.photo-brief ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.photo-brief li { display: grid; grid-template-columns: 2.3rem 1fr; gap: .65rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--type-0); }
.photo-brief li span { color: var(--muted); font-size: var(--type-small);  }
.photo-brief p { margin: 1rem 0 0; color: var(--muted); font-size: var(--type-small); line-height: 1.55; }
.enquiry-form { align-self: start; padding: clamp(1.3rem,3vw,2.6rem); background: var(--surface); }
.enquiry-form label { display: grid; gap: .55rem; margin-bottom: 1.1rem; color: var(--muted); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; background: var(--transparent); color: var(--text); font-size: var(--type-0);  text-transform: none; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--accent); }
.enquiry-form select option { color: var(--text-primary); }
.form-note { margin: 1rem 0 0; color: var(--muted); font-size: var(--type-small); line-height: 1.5; }
footer { padding: 2.5rem var(--gutter) 4.5rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 2rem; border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: var(--type-small); }
footer p { margin: 0; text-align: center; }
footer a { text-underline-offset: 4px; }
.footer-logo { max-width: 255px; max-height: 60px; object-fit: contain; object-position: left; }
.footer-centre { display: grid; gap: .8rem; }
.footer-centre nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem 1.2rem; }
.footer-centre nav a, .footer-end a { font-size: var(--type-small);  text-transform: uppercase; }
.footer-end { display: flex; justify-content: flex-end; gap: 1rem; }
.mobile-actions { display: none; }

/* Gallery dialog */
.gallery-dialog { width: min(1050px,calc(100% - 2rem)); max-width: none; padding: 0; border: 0; background: var(--surface-dark); color: var(--text-on-dark); box-shadow: 0 25px 90px var(--k-50); }
.gallery-dialog::backdrop { background: var(--k-84); backdrop-filter: blur(7px); }
.gallery-dialog img { width: 100%; max-height: 78vh; object-fit: contain; }
.gallery-dialog p { margin: 0; padding: 1rem 1.2rem; color: var(--w-74); }
.dialog-close { position: absolute; z-index: 2; top: .75rem; right: .75rem; width: 42px; height: 42px; border: 1px solid var(--w-45); border-radius: 50%; background: var(--k-62); color: var(--text-on-dark); font-size: var(--type-2); cursor: pointer; }

/* Review page */
.review-page { background: var(--bg); color: var(--text); }
.review-header { height: 86px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); }
.review-header img { width: min(280px,48vw); height: 58px; object-fit: contain; object-position: left; }
.review-header a:last-child { font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; text-underline-offset: 4px; }
.review-main { max-width: 1240px; margin: 0 auto; padding: clamp(4rem,9vw,8rem) var(--gutter); }
.review-hero { max-width: 900px; margin-bottom: clamp(3rem,6vw,5rem); }
.review-hero h1 { margin: 0; font-family: var(--display);    text-transform: uppercase; }
.review-hero h1 em { color: var(--text-muted); font-family: var(--serif); font-weight: 500; text-transform: none; }
.review-hero p { max-width: 620px; margin: 1.5rem 0 0; color: var(--muted); font-size: var(--type-0); line-height: 1.65; }
.feedback-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feedback-card { min-height: 310px; padding: clamp(1.4rem,3vw,2.5rem); display: flex; flex-direction: column; border: 1px solid var(--border-subtle); background: var(--surface-1); text-decoration: none; }
.feedback-card span { color: var(--text-muted); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
.feedback-card h2 { margin: auto 0 1rem; font-family: var(--serif);  font-weight: 500;   text-transform: none; }
.feedback-card p { max-width: 490px; margin: 0; color: var(--muted); line-height: 1.6; }
.feedback-card strong { margin-top: 1.5rem; color: var(--text-muted); font-size: var(--type-small);  text-transform: uppercase; }
.feedback-card:hover { border-color: var(--border-subtle); }
.feedback-note { margin: 1rem 0 0; color: var(--muted); font-size: var(--type-small); }
.private-feedback { margin-top: clamp(5rem,10vw,9rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; scroll-margin-top: 2rem; }
.private-feedback-copy p { color: var(--muted); line-height: 1.65; }
.private-feedback .enquiry-form { background: var(--surface-2); }
.private-feedback .enquiry-form input, .private-feedback .enquiry-form textarea { color: var(--text-primary); border-color: var(--border-subtle); }

@media (max-width: 980px) {
  .main-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .brand { width: min(250px,48vw); }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .section-heading-row, .work-copy, .heritage-work-head, .approach-head { grid-template-columns: 1fr; align-items: start; }
  .work-copy .kicker, .work-copy .disclosure, .heritage-work-head .kicker { grid-column: auto; }
  .reviews-inner { grid-template-columns: 1fr; }
  .reviews blockquote { margin-top: 3rem; }
  .review-attribution, .review-actions { grid-column: 1; }
  .location { grid-template-columns: 1fr 1fr; gap: 4vw; }
  .contact { gap: 4vw; }
  .confidence { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --gutter: 1rem; }
  body { padding-bottom: 62px; }
  .chooser-top { height: 64px; }
  .chooser-top p { display: none; }
  .chooser-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding-top: 64px; }
  .choice + .choice { border-left: 0; border-top: 1px solid var(--w-22); }
  .choice-content { bottom: 1.25rem; }
  .choice strong { font-size: var(--type-5); }
  .choice-sub { display: none; }
  .choice-cta { width: 100%; padding-top: .7rem; }
  .chooser-foot { display: none; }
  .site-header, .site-header.scrolled { height: 66px; gap: .6rem; }
  .brand { width: 45vw; max-width: 205px; }
  .brand-img { height: 45px; }
  .mode-toggle { min-width: 145px; }
  .mode-toggle button { min-height: 32px; padding: 0 .5rem; font-size: var(--type-small); }
  .toggle-pill { height: 32px; }
  .hero { min-height: 760px; }
  .hero-image-auto { background-position: 66% center; }
  .hero-image-home { background-position: 62% center; }
  .hero-overlay, body[data-mode="home"] .hero-overlay { background: linear-gradient(0deg,var(--scrim-94),var(--scrim-18) 80%); }
  .hero-inner { padding: 8rem 0 9rem; }

  .hero-copy { font-size: var(--type-0); }
  .hero-status { bottom: 4.8rem; }
  .scroll-cue { display: none; }
  .section-heading-row, .work-copy, .heritage-work-head, .approach-head { display: block; }
  .section-intro, .work-copy p, .heritage-work-head p:last-child { margin-top: 1.3rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 285px; }
  .heritage-services article, .process-list li { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .heritage-services article > div, .process-list li > div { display: block; }
  .heritage-services p, .process-list p { margin-top: .8rem; }
  .compare { min-height: 430px; aspect-ratio: 4/5; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-item, .gallery-item-large { min-height: 230px; grid-row: auto; }
  .gallery-item-large { grid-column: 1 / -1; min-height: 430px; }
  .reviews-inner { display: block; }
  .review-score strong { font-size: var(--type-5); }
  .reviews blockquote { margin-top: 2.5rem; font-size: var(--type-4); }
  .review-actions { align-items: flex-start; flex-direction: column; }
  .review-proof { grid-template-columns: 1fr; }
  .review-proof div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--w-30); }
  .location { grid-template-columns: 1fr; }
  .location-map, .location-map iframe { min-height: 400px; }
  .contact { grid-template-columns: 1fr; gap: 3rem; }
  footer { grid-template-columns: 1fr; align-items: start; padding-bottom: 2rem; }
  footer p { text-align: left; }
  .footer-centre nav { justify-content: flex-start; }
  .footer-end { justify-content: flex-start; }
  .mobile-actions { position: fixed; z-index: 90; inset: auto 0 0; height: 62px; display: grid; grid-template-columns: repeat(3,1fr); background: var(--surface-dark); color: var(--text-on-dark); box-shadow: 0 -8px 28px var(--k-18); }
  .mobile-actions a { display: grid; place-items: center; text-decoration: none; font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
  .mobile-actions a + a { border-left: 1px solid var(--w-16); }
  .feedback-choices, .private-feedback { grid-template-columns: 1fr; }
  .feedback-card { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Quiet-luxury refinement: restrained colour, editorial type, precise contrast */
body {
  --bg: var(--ink);
  --surface: var(--surface-2);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border-on-dark);
  --accent: var(--surface-dark);
}
body[data-mode="home"] {
  --bg: var(--paper);
  --surface: var(--surface-2);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border-subtle);
  --accent: var(--surface-dark);
}
.parent-c { border-color: var(--border-subtle); color: var(--text-muted); }
.choice-bg { filter: saturate(.46) contrast(1.03); }
.choice:hover .choice-bg, .choice:focus-visible .choice-bg { filter: saturate(.64) contrast(1.03); }
.choice-shade { background: linear-gradient(180deg,var(--scrim-10) 15%,var(--scrim-93) 94%),linear-gradient(90deg,var(--scrim-52),var(--transparent)); }
.choice strong { font-family: var(--serif);  }

.choice-cta span, .choice-home .choice-cta span { color: var(--text-muted-on-dark); }
.site-header.scrolled { background: var(--scrim-93); }
body[data-mode="home"] .site-header { color: var(--text-primary); background: var(--light-overlay-94); }
.main-nav a { font-weight: 500;  }
.mode-toggle { border-color: var(--w-45); }
body[data-mode="home"] .mode-toggle { border-color: var(--border-subtle); }
.toggle-pill { background: var(--surface-dark); }
body[data-mode="auto"] .toggle-pill { background: var(--surface-2); }
body[data-mode="auto"] [data-switch="auto"] { color: var(--text-primary); }
.hero-overlay { background: linear-gradient(90deg,var(--scrim-94),var(--scrim-62) 43%,var(--scrim-08) 76%),linear-gradient(0deg,var(--scrim-72),var(--transparent) 57%); }
body[data-mode="home"] .hero-overlay { background: linear-gradient(90deg,var(--scrim-91),var(--scrim-54) 43%,var(--scrim-04) 76%),linear-gradient(0deg,var(--scrim-60),var(--transparent) 56%); }
.hero h1 {
  max-width: 1040px;
  font-family: var(--sans);

  font-weight: 500;


  text-transform: none;
}
.hero h1 em { color: var(--text-muted-on-dark); font-family: var(--serif); font-weight: 500; }
body[data-mode="home"] .hero h1 { font-family: var(--serif);  }
body[data-mode="home"] .hero h1 em { color: var(--text-muted-on-dark); }
.eyebrow, .kicker { font-weight: 500;  }
h2, body[data-mode="home"] h2 {
  font-family: var(--serif);
  font-weight: 500;

  text-transform: none;
}
.button { min-height: 52px; font-weight: 500;  }
.button-primary { background: var(--surface-2); color: var(--text-primary); }
body[data-mode="home"] .button-primary { background: var(--surface-dark); color: var(--text-on-dark); }
.button-ghost { border-color: var(--w-36); }
.status-dot { background: var(--surface-3); box-shadow: 0 0 0 5px var(--shadow-soft); }
body[data-mode="home"] .status-dot { background: var(--surface-dark); box-shadow: 0 0 0 5px var(--shadow-soft); }
.service-card-featured { background: var(--w-04); }
.service-card a span { color: var(--text-muted-on-dark); }
.heritage-services article > span { color: var(--text-muted); }
.approach .kicker, .process-list li > span { color: var(--text-muted); }
.reviews { background: var(--surface-dark); }
.review-score strong { font-family: var(--sans); font-weight: 400;  }
.review-score span { color: var(--text-muted); }
.reviews .button-light { background: var(--surface-2); color: var(--text-primary); }
.location-map iframe { filter: grayscale(.72) sepia(.08) contrast(.94); }
.approach { background: var(--surface-dark); }
.gallery-item img { filter: saturate(.72); }
.gallery-item:hover img, .gallery-item:focus-visible img { filter: saturate(.72) brightness(.78); }
.review-page { --bg: var(--surface-1); --surface: var(--surface-2); --text: var(--text-primary); --muted: var(--text-muted); }
.brand-img-auto, .footer-logo-auto, .review-header img, .review-page footer img { filter: saturate(.58) contrast(.94); }
.review-hero h1 { font-family: var(--serif); font-weight: 500;  text-transform: none; }
.review-hero h1 em { color: var(--text-muted); }
.feedback-card { background: var(--surface-2); border-color: var(--border-subtle); }
.feedback-card span, .feedback-card strong { color: var(--text-muted); }
.feedback-card:hover { border-color: var(--border-subtle); }
.private-feedback .enquiry-form { background: var(--surface-3); }
.review-page .button-primary { background: var(--surface-dark); color: var(--text-on-dark); }

@media (max-width: 700px) {

  .hero-overlay, body[data-mode="home"] .hero-overlay { background: linear-gradient(0deg,var(--scrim-94),var(--scrim-20) 80%); }
}

/* Motion language: tactile transitions, editorial reveals, restrained depth */
.mode-wipe {
  z-index: 1000;
  overflow: hidden;
  background: var(--wipe-color, var(--surface-3));
  box-shadow: 18px 0 70px var(--k-18);
  will-change: transform;
}
.mode-wipe::before,
.mode-wipe::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  pointer-events: none;
}
.mode-wipe::before {
  width: clamp(14px,2.2vw,34px);
  background: linear-gradient(90deg,var(--transparent),var(--wipe-edge,var(--surface-dark)));
  opacity: .9;
}
.mode-wipe::after {
  right: clamp(8px,1.4vw,22px);
  width: 1px;
  background: var(--wipe-glint,var(--w-65));
  box-shadow: -18px 0 46px var(--wipe-glint,var(--w-45));
}
.mode-wipe.run { pointer-events: auto; animation: material-wipe var(--t-7) cubic-bezier(.78, 0, .18, 1) both; }
@keyframes material-wipe {
  0% { transform: translate3d(-104%,0,0); }
  45%, 55% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(104%,0,0); }
}

.hero-media {
  inset: -2.5rem;
  transform: translate3d(0,var(--hero-shift,0),0) scale(1.035);
  transition: transform var(--t-7) var(--ease), filter var(--t-5) var(--ease-fade);
  will-change: transform;
}
body.is-switching .hero-media { transform: translate3d(0,var(--hero-shift,0),0) scale(1.055); filter: saturate(.72) blur(1.5px); }
body.is-switching .hero-inner,
body.is-switching .hero-status,
body.is-switching .scroll-cue { opacity: .72; transform: translateY(6px); }
.hero-inner,
.hero-status,
.scroll-cue { transition: opacity var(--t-3) var(--ease-fade), transform var(--t-5) var(--ease); }

.main-nav a { position: relative; transition: color var(--t-2) var(--ease-fade); }
.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.55rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-3) var(--ease);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--w-13);
  transform: translateX(-102%);
  transition: transform var(--t-4) var(--ease);
  pointer-events: none;
}
.button:hover::after,
.button:focus-visible::after { transform: translateX(0); }

.gallery-item::after {
  content: "View";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--w-55);
  border-radius: 50%;
  background: var(--scrim-28);
  backdrop-filter: blur(8px);
  color: var(--text-on-dark);
  font-size: var(--type-small);
  font-weight: 600;

  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%,-42%) scale(.82);
  transition: opacity var(--t-2) var(--ease-fade), transform var(--t-4) var(--ease);
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }

html.motion-ready:not(.page-ready) .hero .eyebrow,
html.motion-ready:not(.page-ready) .hero h1,
html.motion-ready:not(.page-ready) .hero-copy,
html.motion-ready:not(.page-ready) .hero-actions,
html.motion-ready:not(.page-ready) .hero-status,
html.motion-ready:not(.page-ready) .scroll-cue,
html.motion-ready:not(.page-ready) .landing-hero-copy > * {
  opacity: 0;
  transform: translateY(22px);
}
.hero .eyebrow,
.hero h1,
.hero-copy,
.hero-actions,
.hero-status,
.scroll-cue,
.landing-hero-copy > * {
  transition: opacity var(--t-2) var(--ease-fade), transform var(--t-3) var(--ease);
}
.hero h1,
.landing-hero-copy h1 { transition-delay: 80ms; }
.hero-copy,
.landing-hero-copy > p:not(.kicker):not(.breadcrumbs) { transition-delay: 160ms; }
.hero-actions,
.landing-hero-copy .button { transition-delay: 240ms; }
.hero-status,
.scroll-cue { transition-delay: 320ms; }

html.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-2) var(--ease-fade) var(--reveal-delay, 0ms), transform var(--t-3) var(--ease) var(--reveal-delay, 0ms);
}
html.motion-ready .motion-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) {
  .mode-wipe::before { width: 14px; }
  .gallery-item::after { width: 62px; height: 62px; }
  .hero-media { inset: -1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-wipe { display: none; }
  .hero-media,
  body.is-switching .hero-media { transform: none; filter: none; }
  html.motion-ready .motion-reveal,
  html.motion-ready:not(.page-ready) .hero .eyebrow,
  html.motion-ready:not(.page-ready) .hero h1,
  html.motion-ready:not(.page-ready) .hero-copy,
  html.motion-ready:not(.page-ready) .hero-actions,
  html.motion-ready:not(.page-ready) .hero-status,
  html.motion-ready:not(.page-ready) .scroll-cue,
  html.motion-ready:not(.page-ready) .landing-hero-copy > * { opacity: 1; transform: none; }
}

/* Cinematic chapter selector */
.chooser {
  background: var(--surface-dark);
}
.chooser-top {
  height: 96px;
  border-bottom: 0;
  background: linear-gradient(180deg,var(--scrim-90),var(--transparent));
}
.chooser-top p {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.chooser-top p::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--w-45);
}
.chooser-grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(.65rem,1.2vw,1.15rem);
  height: 100%;
  padding: 96px clamp(.65rem,1.2vw,1.15rem) clamp(.65rem,1.2vw,1.15rem);
  transition: grid-template-columns var(--t-6) var(--ease);
}
.choice {
  border: 0;
  border-radius: clamp(1.7rem,3vw,3.6rem);
  box-shadow: inset 0 0 0 1px var(--w-16), 0 24px 70px var(--k-18);
  transition: opacity var(--t-5) var(--ease-fade), border-radius var(--t-6) var(--ease);
}
.choice-auto { border-radius: clamp(1.7rem,3vw,3.6rem) clamp(4rem,8vw,9rem) clamp(1.7rem,3vw,3.6rem) clamp(1.7rem,3vw,3.6rem); }
.choice-home { border-radius: clamp(4rem,8vw,9rem) clamp(1.7rem,3vw,3.6rem) clamp(1.7rem,3vw,3.6rem) clamp(1.7rem,3vw,3.6rem); }
.choice + .choice { border: 0; }
.choice-bg,
.choice-video,
.choice-shade { position: absolute; inset: 0; }
.choice-bg { z-index: -4; }
.choice-video {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.52) contrast(1.04) brightness(.86);
  transform: scale(1.025);
  transition: transform var(--t-8) var(--ease), filter var(--t-6) var(--ease-fade);
}
.choice-auto .choice-video { object-position: 58% center; }
.choice-home .choice-video { object-position: 50% center; }
.choice-shade {
  background: linear-gradient(180deg,var(--scrim-06) 18%,var(--scrim-90) 96%), linear-gradient(90deg,var(--scrim-68),var(--scrim-05) 70%);
}
.choice-content {
  left: clamp(1.5rem,3.3vw,4rem);
  right: clamp(1.5rem,3.3vw,4rem);
  bottom: clamp(4.5rem,9vh,7rem);
  gap: .85rem;
}
.choice-logo {
  width: min(360px,62%);
  height: clamp(42px,5vw,68px);
  margin-bottom: clamp(.7rem,1.8vh,1.4rem);
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.choice-logo-home { width: min(410px,72%); }
.choice-no { color: var(--w-65); }
.choice strong {
  font-size: var(--type-5);

}
.choice-sub { color: var(--w-74); }
.choice-cta { width: min(380px,100%); border-color: var(--w-30); }
.chooser-foot {
  bottom: 1.55rem;
  padding: .6rem .9rem;
  border: 1px solid var(--w-13);
  border-radius: 999px;
  background: var(--scrim-50);
  backdrop-filter: blur(10px);
}

@media (hover:hover) and (min-width:701px) {
  .choice:hover .choice-video,
  .choice:focus-visible .choice-video { filter: saturate(.7) contrast(1.04) brightness(.94); transform: scale(1.025); }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity var(--t-6) var(--ease), transform var(--t-8) var(--ease);
}
.hero-video-auto { object-position: 58% center; }
.hero-video-home { object-position: center; }
body[data-mode="auto"] .hero-video-auto,
body[data-mode="home"] .hero-video-home { opacity: 1; transform: scale(1); }
html.save-data .choice-video,
html.save-data .hero-video { display: none; }

@media (max-width:700px) {
  .chooser-top { height: 70px; }
  .chooser-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) minmax(0,1fr);
    gap: .55rem;
    padding: 70px .55rem .55rem;
  }
  .choice,
  .choice-auto,
  .choice-home { border-radius: 1.65rem; }
  .choice-content { left: 1.35rem; right: 1.35rem; bottom: 1.15rem; gap: .45rem; }
  .choice-logo { width: min(230px,58%); height: 38px; margin-bottom: .25rem; }
  .choice-logo-home { width: min(270px,68%); }
  .choice strong { font-size: var(--type-4); }
  .choice-no { font-size: var(--type-small); }
  .chooser-foot { display: none; }
}

@media (prefers-reduced-motion:reduce) {
  .choice-video,
  .hero-video { display: none; }
}

/* Final split-brand polish: lively auto care and quiet property craft */
:root { --auto-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; }

body[data-mode="auto"] {
  --bg: var(--surface-1);
  --surface: var(--surface-2);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border-subtle);
  --accent: var(--surface-dark);
}
body[data-mode="auto"] .site-header.scrolled {
  background: var(--scrim-94);
  border-color: var(--w-16);
}
.brand-img-auto,
.footer-logo-auto { filter: none; }
body[data-mode="auto"] .toggle-pill { background: var(--surface-3); }
body[data-mode="auto"] .hero-overlay {
  background: linear-gradient(90deg,var(--scrim-94),var(--scrim-70) 42%,var(--scrim-08) 76%), linear-gradient(0deg,var(--scrim-70),var(--transparent) 58%);
}
body[data-mode="auto"] .hero h1 {
  max-width: 980px;
  font-family: var(--auto-display);

  font-style: italic;
  font-weight: 600;


  text-transform: uppercase;
}
body[data-mode="auto"] .hero h1 em {
  color: var(--text-muted-on-dark);
  font-family: inherit;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 8px 32px var(--shadow-soft);
}
body[data-mode="auto"] h2 {
  font-family: var(--auto-display);
  font-style: italic;
  font-weight: 600;


  text-transform: uppercase;
}
body[data-mode="auto"] .kicker { color: var(--text-muted); font-weight: 600; }
body[data-mode="auto"] .button { border-radius: 999px; }
body[data-mode="auto"] .button-primary { background: var(--surface-dark); color: var(--text-on-dark); }
body[data-mode="auto"] .button-primary:hover { background: var(--surface-dark); }
body[data-mode="auto"] .button-ghost { border-color: var(--w-55); }
body[data-mode="auto"] .status-dot { background: var(--surface-3); box-shadow: 0 0 0 5px var(--shadow-soft); }

.choice-logo {
  box-sizing: border-box;
  height: clamp(58px,6vw,82px);
  padding: .55rem .8rem;
  background: var(--light-overlay-90);
  filter: none;
  box-shadow: 0 12px 38px var(--k-18);
}
.choice-logo-auto { border-radius: 999px; }
.choice-logo-home { border-radius: 4px; background: var(--light-overlay-92); }
.choice-auto strong {
  font-family: var(--auto-display);
  font-style: italic;
  font-weight: 600;

  text-transform: uppercase;
}
.choice-home strong { font-family: var(--serif); font-weight: 400; }
.choice-auto .choice-video { filter: saturate(.82) contrast(1.05) brightness(.94); }
.choice-home .choice-video { filter: saturate(.42) contrast(1.03) brightness(.78); }
.choice-auto .choice-shade {
  background: linear-gradient(180deg,var(--scrim-02) 15%,var(--scrim-88) 96%), linear-gradient(90deg,var(--scrim-58),var(--scrim-02) 72%);
}
.choice-home .choice-shade {
  background: linear-gradient(180deg,var(--scrim-08) 15%,var(--scrim-92) 96%), linear-gradient(90deg,var(--scrim-68),var(--scrim-04) 72%);
}
.choice-auto .choice-cta span { color: var(--text-muted-on-dark); }
.choice-home .choice-cta span { color: var(--text-muted-on-dark); }
@media (hover:hover) and (min-width:701px) {
  .choice-auto:hover .choice-video,
  .choice-auto:focus-visible .choice-video { filter: saturate(1) contrast(1.03) brightness(1); }
  .choice-home:hover .choice-video,
  .choice-home:focus-visible .choice-video { filter: saturate(.55) contrast(1.03) brightness(.86); }
}

body[data-mode="auto"] .section,
body[data-mode="auto"] .contact,
body[data-mode="auto"] footer { background: var(--bg); }
body[data-mode="auto"] .service-grid { gap: 1rem; border: 0; }
body[data-mode="auto"] .service-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: 0 16px 48px var(--shadow-soft);
  transition: transform var(--t-3) var(--ease), border-color var(--t-2) var(--ease-fade), box-shadow var(--t-3) var(--ease);
}
body[data-mode="auto"] .service-card-featured {
  background: linear-gradient(145deg,var(--surface-1),var(--surface-1) 72%);
  border-color: var(--border-subtle);
}
body[data-mode="auto"] .service-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-subtle);
  box-shadow: 0 24px 60px var(--shadow-soft);
}
body[data-mode="auto"] .service-card h3 {
  font-family: var(--auto-display);

  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
}
body[data-mode="auto"] .service-card a span { color: var(--text-muted); }
body[data-mode="auto"] .compare {
  max-width: min(var(--max), 1050px);
  min-height: 0;
  aspect-ratio: 4/3;
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  background: var(--surface-dark);
  box-shadow: 0 28px 72px var(--shadow-soft);
}
body[data-mode="auto"] .compare-before,
body[data-mode="auto"] .compare-after img { object-fit: contain; object-position: center; }
body[data-mode="auto"] .compare-after { will-change: clip-path; }
body[data-mode="auto"] .compare-label {
  border-radius: 999px;
  background: var(--scrim-86);
  font-family: var(--auto-display);
  font-size: var(--type-0);
  font-style: italic;
  font-weight: 600;

}
body[data-mode="auto"] .compare-handle {
  width: 56px;
  height: 56px;
  background: var(--surface-3);
  box-shadow: 0 8px 26px var(--shadow-soft);
  color: var(--text-primary);
  font-size: var(--type-1);
}
body[data-mode="auto"] .compare:focus-within {
  outline: 3px solid var(--text-primary);
  outline-offset: 5px;
}
body[data-mode="auto"] .gallery-grid { gap: 1rem; }
body[data-mode="auto"] .gallery-item { border-radius: 22px; background: var(--surface-3); }
body[data-mode="auto"] .gallery-item img { filter: saturate(.88) contrast(1.02); }
body[data-mode="auto"] .gallery-item:hover img,
body[data-mode="auto"] .gallery-item:focus-visible img { filter: saturate(1) contrast(1.02) brightness(.8); }
body[data-mode="auto"] .reviews { background: var(--surface-dark); }
body[data-mode="auto"] .review-score strong {
  color: var(--text-muted-on-dark);
  font-family: var(--auto-display);
  font-style: italic;
  font-weight: 600;
}
body[data-mode="auto"] .review-score span { color: var(--text-muted); }
body[data-mode="auto"] .location { background: var(--surface-1); }
body[data-mode="auto"] .location-map,
body[data-mode="auto"] .location-map iframe { border-radius: 24px; overflow: hidden; }
body[data-mode="auto"] .location-map iframe { filter: saturate(1.08) contrast(1.01); }
body[data-mode="auto"] .confidence { background: var(--surface-1); }
body[data-mode="auto"] .enquiry-form {
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: 0 20px 64px var(--shadow-soft);
}
body[data-mode="auto"] footer { border-color: var(--line); }
body[data-mode="auto"] .mobile-actions { background: var(--surface-dark); }

.review-page {
  --auto-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  background: var(--surface-1);
}
.review-page .review-hero h1 {
  font-family: var(--auto-display);
  font-style: italic;
  font-weight: 600;

  text-transform: uppercase;
}
.review-page .review-hero h1 em { color: var(--text-muted); font-family: inherit; font-weight: inherit; }
.review-page .feedback-card { border-radius: 22px; box-shadow: 0 16px 48px var(--shadow-soft); }

@media (max-width:700px) {

  body[data-mode="auto"] .service-card:hover { transform: none; }
  body[data-mode="auto"] .compare { aspect-ratio: 4/3; border-radius: 20px; }
  .choice-logo { height: 48px; padding: .4rem .55rem; }
  .choice-auto strong { font-size: var(--type-5); }
  .choice-home strong { font-size: var(--type-4); }
  .choice-video,
  .hero-video { display: none; }
}

/* 21st-inspired interaction polish, adapted for the two Cankaj trades */
html { scroll-padding-top: 156px; }
#services, #work, #gallery, #reviews, #location, #approach, #contact { scroll-margin-top: 156px; }

.site-header,
.site-header.scrolled {
  height: 76px;
  grid-template-columns: 1fr auto;
  background: var(--surface-dark);
  border-color: var(--w-16);
  backdrop-filter: none;
}
body[data-mode="home"] .site-header,
body[data-mode="home"] .site-header.scrolled {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  backdrop-filter: none;
}
.site-header .brand { width: min(280px,30vw); }

.mode-rail {
  position: fixed;
  z-index: 99;
  top: 76px;
  right: 0;
  left: 0;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 6px var(--gutter);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
body[data-mode="home"] .mode-rail {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.mode-rail .mode-toggle {
  width: min(520px,100%);
  min-width: 0;
  height: 52px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  box-shadow: 0 7px 22px var(--shadow-soft);
}
body[data-mode="home"] .mode-rail .mode-toggle {
  border-color: var(--border-subtle);
  background: var(--surface-3);
  box-shadow: none;
}
.mode-rail .mode-toggle button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 0 1rem;
  color: inherit;

}
.mode-rail .mode-toggle button small {
  font-size: var(--type-small);
  font-weight: 500;

  color: var(--text-muted);
  opacity: 1;
}
.mode-rail .toggle-pill {
  top: 4px;
  left: 4px;
  height: 44px;
  background: var(--surface-dark);
}
body[data-mode="auto"] .mode-rail .toggle-pill { background: var(--surface-dark); }
body[data-mode="auto"] .mode-rail .mode-toggle button[data-switch="auto"] small { color: var(--text-on-dark); }
body[data-mode="home"] .mode-rail .mode-toggle button small { color: var(--text-muted); }
body[data-mode="home"] .mode-rail .mode-toggle button[data-switch="home"] small { color: var(--text-on-dark); }
body[data-mode="auto"] .mode-rail [data-switch="auto"],
body[data-mode="home"] .mode-rail [data-switch="home"] { color: var(--text-on-dark); }
body[data-mode="home"] .mode-rail .toggle-pill { background: var(--surface-dark); }
.mode-toggle button:focus-visible,
.chooser-switch button:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
}
body[data-mode="home"] .mode-toggle button:focus-visible,
.chooser-switch [data-choose="home"]:focus-visible { outline-color: var(--text-primary); }

.chooser-top { background: var(--surface-dark); }
.chooser-switch {
  position: relative;
  width: min(360px,42vw);
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--w-36);
  border-radius: 999px;
  background: var(--surface-dark);
}
.chooser-switch button {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--transparent);
  color: var(--text-on-dark);
  font-size: var(--type-small);
  font-weight: 600;

  text-transform: uppercase;
  cursor: pointer;
}
.chooser-switch [data-choose="auto"] { background: var(--surface-dark); }
.chooser-switch [data-choose="home"] { background: var(--surface-dark); }
.choice-auto .choice-shade { background: var(--scrim-58); }
.choice-home .choice-shade { background: var(--scrim-62); }
.chooser-foot { backdrop-filter: none; background: var(--surface-dark); }

.hero-inner { padding-top: 15rem; }
body[data-mode="auto"] .hero-overlay { background: var(--scrim-47); }
body[data-mode="home"] .hero-overlay { background: var(--scrim-50); }

.service-panels {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: .7rem;
}
.service-panel {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: 0 10px 30px var(--shadow-soft);
  transition: border-color var(--t-2) var(--ease-fade), box-shadow var(--t-2) var(--ease-fade);
}
.service-panel.is-active {
  border-color: var(--border-subtle);
  box-shadow: 0 18px 44px var(--shadow-soft);
}
.service-panel-trigger {
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns: 64px 1fr 48px;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 0;
  background: var(--transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.service-panel-trigger .service-number {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: var(--type-small);
  font-style: normal;

}
.service-panel-trigger strong {
  font-family: var(--auto-display);

  font-style: italic;

  text-transform: uppercase;
}
.panel-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: var(--type-1);
}
.service-panel-trigger:focus-visible { outline: 3px solid var(--text-primary); outline-offset: -3px; }
.service-panel-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-3) var(--ease), opacity var(--t-1) var(--ease-fade);
}
.service-panel.is-active .service-panel-body { grid-template-rows: 1fr; opacity: 1; }
.service-panel-body > div {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-left: 89px;
  padding: 0 1.25rem 1.6rem;
}
.service-panel-body p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.service-panel-body a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-size: var(--type-small);
  font-weight: 600;

  text-transform: uppercase;
}

.service-panels-home { gap: 0; border-top: 1px solid var(--line); }
.service-panels-home .service-panel,
.service-panels-home .service-panel.is-active {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--transparent);
  box-shadow: none;
}
.service-panels-home .service-panel-trigger { min-height: 106px; padding-right: 0; padding-left: 0; }
.service-panels-home .service-panel-trigger .service-number { color: var(--text-muted); font-family: var(--serif); font-size: var(--type-0); }
.service-panels-home .service-panel-trigger strong {
  font-family: var(--serif);

  font-style: normal;
  font-weight: 400;

  text-transform: none;
}
.service-panels-home .panel-mark { border-color: var(--border-subtle); color: var(--text-muted); }
.service-panels-home .service-panel-body > div { margin-left: 89px; padding-right: 0; padding-left: 0; }
.service-panels-home .service-panel-trigger:focus-visible { outline-color: var(--text-primary); }

.compare-help {
  max-width: min(var(--max),1050px);
  margin: .9rem auto 0;
  color: var(--muted);
  font-size: var(--type-small);
  text-align: center;
}
.compare input:focus-visible { outline: 0; }
.compare:focus-within .compare-handle { box-shadow: 0 0 0 4px var(--shadow-soft), 0 0 0 7px var(--shadow-soft); }

.process-showcase {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr);
  gap: clamp(2rem,5vw,6rem);
  align-items: stretch;
}
.process-list { border-top-color: var(--w-22); }
.process-list li { display: block; padding: 0; }
.process-list button {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border: 0;
  background: var(--transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.process-list button > span:first-child { color: var(--text-muted-on-dark); font-family: var(--serif); }
.process-list button > span:last-child { display: grid; gap: .35rem; }
.process-list strong { font-family: var(--serif); font-size: var(--type-1); font-weight: 400; line-height: 1; }
.process-list small {
  max-width: 510px;
  max-height: 0;
  overflow: hidden;
  color: var(--w-74);
  font-size: var(--type-0);
  line-height: 1.55;
  opacity: 0;
  transition: max-height var(--t-2) var(--ease), opacity var(--t-1) var(--ease-fade);
}
.process-list .is-active small { max-height: 5rem; opacity: 1; }
.process-list .is-active strong { color: var(--text-muted-on-dark); }
.process-list button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 5px; }
.process-media { margin: 0; display: grid; grid-template-rows: 1fr auto; background: var(--surface-dark); }
.process-image-button {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--surface-dark);
  cursor: zoom-in;
}
.process-image-button img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.02); opacity: 1; transition: opacity var(--t-1) var(--ease-fade); }
.process-image-button img.is-changing { opacity: .18; }
.process-image-button span {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  border: 1px solid var(--w-65);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-size: var(--type-small);

  text-transform: uppercase;
}
.process-image-button:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }
.process-media figcaption { padding: 1rem 1.15rem; color: var(--w-74); font-size: var(--type-small); line-height: 1.5; }
.process-disclosure { max-width: var(--max); margin: 1rem auto 0; color: var(--w-55); }

.gallery-dialog { cursor: zoom-out; }
.gallery-dialog::backdrop { background: var(--k-84); backdrop-filter: none; }
.gallery-dialog img { cursor: zoom-out; }

@media (max-width: 980px) {
  .site-header .brand { width: min(270px,54vw); }
  .process-showcase { grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); gap: 2rem; }
  .process-media { min-height: 0; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 132px; }
  #services, #work, #gallery, #reviews, #location, #approach, #contact { scroll-margin-top: 132px; }
  body { padding-bottom: 72px; }
  .site-header,
  .site-header.scrolled { height: 64px; padding-right: 1rem; padding-left: 1rem; }
  .site-header .brand { width: min(232px,72vw); }
  .brand-img { height: 46px; }
  .mode-rail { top: 64px; height: 60px; padding: 4px .7rem; }
  .mode-rail .mode-toggle { width: 100%; height: 52px; }
  .mode-rail .mode-toggle button { gap: .35rem; padding: 0 .55rem; font-size: var(--type-small); }
  .mode-rail .mode-toggle button small { display: none; }
  .chooser-top { height: 70px; gap: .8rem; padding: 0 .8rem; }
  .chooser-top .parent-mark { font-size: var(--type-small); }
  .chooser-switch { width: min(240px,67vw); min-height: 52px; }
  .chooser-switch button { min-height: 44px; padding: 0 .45rem; font-size: var(--type-small); }
  .chooser-grid { padding-top: 70px; }
  .hero { min-height: 800px; }
  .hero-inner { padding-top: 13rem; }
  body[data-mode="auto"] .hero-overlay { background: var(--scrim-57); }
  body[data-mode="home"] .hero-overlay { background: var(--scrim-59); }
  .service-panel { border-radius: 16px; }
  .service-panel-trigger,
  .service-panels-home .service-panel-trigger {
    min-height: 82px;
    grid-template-columns: 38px 1fr 44px;
    gap: .55rem;
    padding: 1rem .9rem;
  }

  .service-panels-home .service-panel-trigger { padding-right: 0; padding-left: 0; }

  .service-panel-body > div,
  .service-panels-home .service-panel-body > div {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    margin-left: 0;
    padding: 0 .9rem 1.2rem;
  }
  .service-panels-home .service-panel-body > div { padding-right: 0; padding-left: 38px; }
  .service-panel-body a { justify-self: start; }
  .process-showcase { grid-template-columns: 1fr; }
  .process-media { min-height: 430px; order: -1; }
  .process-list button { min-height: 80px; grid-template-columns: 42px 1fr; }
  .compare-help { padding: 0 1rem; }
  .mobile-actions {
    height: 72px;
    grid-template-columns: 1fr 1fr;
    background: var(--surface-dark);
  }
  body[data-mode="home"] .mobile-actions { background: var(--surface-dark); }
  .mobile-actions a {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .2rem;
    padding: .65rem 1rem;

  }
  .mobile-actions a span { color: var(--w-65); font-size: var(--type-small); }
  .mobile-actions a strong { max-width: 100%; overflow: hidden; font-size: var(--type-small); font-weight: 600;  text-overflow: ellipsis; white-space: nowrap; }
}

@media (pointer: coarse) {
  a,
  button { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel-body,
  .process-list small,
  .process-image-button img { transition: none; }
}

/* Completion pass: equal-brand chooser, collapsible services and review evidence */
.chooser-owner {
  display: grid;
  gap: .18rem;
  line-height: 1;
  text-transform: uppercase;
}
.chooser-owner strong {
  color: var(--text-on-dark);
  font-size: var(--type-small);
  font-weight: 600;

}
.chooser-owner span {
  color: var(--w-55);
  font-size: var(--type-small);
  font-weight: 600;

}

.chooser-grid {
  gap: 0;
  padding: 96px clamp(.65rem,1.2vw,1.15rem) clamp(.65rem,1.2vw,1.15rem);
}
.choice {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--w-16), 0 24px 70px var(--k-18);
}
.choice-auto {
  border-radius: clamp(1.7rem,3vw,3.6rem) 0 0 clamp(1.7rem,3vw,3.6rem);
}
.choice-home {
  border-left: 1px solid var(--w-36);
  border-radius: 0 clamp(1.7rem,3vw,3.6rem) clamp(1.7rem,3vw,3.6rem) 0;
}
.choice-logo-auto {
  width: min(430px,76%);
  height: clamp(66px,6vw,86px);
}
.choice-logo-home {
  width: min(540px,88%);
  height: clamp(76px,7vw,98px);
  padding: .45rem .65rem;
}
.choice-auto .choice-shade { background: var(--scrim-50); }
.choice-home .choice-shade { background: var(--scrim-55); }

.service-panel-body {
  transition: grid-template-rows var(--t-2) var(--ease), opacity var(--t-1) var(--ease-fade);
}

.reviews {
  padding-top: clamp(4.5rem,8vw,7.5rem);
  padding-bottom: clamp(4.5rem,8vw,7.5rem);
}
.reviews-inner {
  display: block;
  max-width: var(--max);
  margin: 0 auto;
}
.review-heading {
  display: grid;
  grid-template-columns: minmax(190px,.32fr) minmax(0,1fr);
  align-items: end;
  gap: clamp(2rem,6vw,7rem);
  padding-bottom: clamp(2.25rem,4vw,3.75rem);
  border-bottom: 1px solid var(--w-30);
}
.review-score {
  display: grid;
  gap: .5rem;
}
.review-score strong {
  font-size: var(--type-5);
  line-height: .78;
}
.review-score small {
  max-width: none;
  color: var(--w-65);
  font-size: var(--type-small);
  line-height: 1.55;

  text-transform: uppercase;
}
.review-intro .kicker {
  margin-bottom: 1rem;
  color: var(--text-muted-on-dark);
}
.review-intro h2 {
  max-width: 800px;
  margin: 0;
  color: var(--text-on-dark);

}
.review-intro > p:last-child {
  max-width: 520px;
  margin: 1.25rem 0 0;
  color: var(--w-74);
  line-height: 1.65;
}
.review-card {
  min-width: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem,2.5vw,2.25rem);
  background: var(--surface-dark);
}
.review-stars {
  color: var(--text-muted);
  font-size: var(--type-0);

}
.reviews .review-card blockquote {
  margin: clamp(2rem,4vw,3.5rem) 0 0;
  font-family: var(--sans);
  font-size: var(--type-1);
  font-weight: 500;
  line-height: 1.08;

}
.review-card > p {
  margin: 1.1rem 0 2.5rem;
  color: var(--w-65);
  line-height: 1.6;
}
.review-card footer {
  margin-top: auto;
  padding: 1.1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: .32rem;
  border-top: 1px solid var(--w-22);
  background: var(--transparent);
  color: inherit;
  font-size: inherit;
}
body[data-mode="auto"] .review-card footer {
  background: var(--transparent);
}
.review-card footer strong {
  color: var(--text-on-dark);
  font-size: var(--type-small);
  font-weight: 600;
}
.review-card footer span {
  color: var(--w-55);
  font-size: var(--type-small);
  font-weight: 600;

  text-transform: uppercase;
}
.review-actions {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .review-card { min-height: 0; }
}

@media (max-width: 700px) {
  .chooser-owner { max-width: 88px; }
  .chooser-owner strong { font-size: var(--type-small); line-height: 1.18; }
  .chooser-owner span { display: none; }
  .chooser-grid {
    gap: 0;
    padding: 70px .55rem .55rem;
  }
  .choice,
  .choice-auto {
    border-radius: 1.65rem 1.65rem 0 0;
  }
  .choice-home {
    border-top: 1px solid var(--w-36);
    border-left: 0;
    border-radius: 0 0 1.65rem 1.65rem;
  }
  .choice-logo-auto {
    width: min(250px,70%);
    height: 48px;
  }
  .choice-logo-home {
    width: min(300px,82%);
    height: 54px;
    padding: .3rem .45rem;
  }
  .review-heading { grid-template-columns: 1fr; gap: 2rem; }
  .review-intro { order: -1; }

  .review-card { padding: 1.35rem; }
  .reviews .review-card blockquote { margin-top: 2rem; font-size: var(--type-3); }
  .review-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel-body { transition: none; }
}

/* WCAG 2.2 SC 2.5.8, target size (minimum) 24x24.

   Measured at 375px across the homepage, a landing page and the review page.
   Every failure was height, never width: these links boxed only as tall as
   their own text -- 16.5px in the two footers, 18px on the landing and review
   headers, 21px on the reviews link. Widths ran 53 to 343px.

   inline-flex with a min-height grows the hit area around the existing text
   rather than displacing it. Every parent here is already a flex row, so the
   items were blockified anyway and this changes no horizontal placement; the
   two footer rows each gain about 7px of height. Row gaps are 13.6px and 16px,
   both larger than the 7.5px the boxes grow by, so the enlarged targets do not
   overlap each other.

   Links sitting inside a sentence are deliberately excluded -- the phone number
   in .form-note, for one. SC 2.5.8 exempts a target whose size is constrained
   by the line-height of the surrounding text, and padding those would break the
   paragraph's rhythm to fix something the spec does not ask for. */
.text-link,
.footer-centre nav a,
.footer-end a,
.landing-footer-links a,
.review-header a,
footer > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Price list -- the wash's own board (Exterior / Valeting, then large vehicles and extras).
   Auto mode only: the property side is quoted per job, so it has no board to publish. */
.pricing { max-width: var(--max); margin: 0 auto; }
.price-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.price-card {
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: 0 10px 30px var(--shadow-soft);
}
.price-card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; }
.price-card h4 { margin: 0;   }
.price-pair { display: flex; gap: 1.15rem; margin: 0; }
.price-cell { display: flex; align-items: baseline; gap: .35rem; }
.price-cell b { font-family: var(--auto-display); font-style: italic; font-size: var(--type-2); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.price-cell small { color: var(--muted); font-size: var(--type-small);  text-transform: uppercase; }
.price-includes { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.price-includes li { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--type-small); }
.price-addon { margin: .85rem 0 0; color: var(--text); font-size: var(--type-small); }
.price-addon b { font-weight: 600; }
.price-card-feature { border-color: var(--border-subtle); box-shadow: 0 14px 38px var(--shadow-soft); }
.price-card-feature .price-cell b { color: var(--accent); }

.price-table-block h4 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .5rem;   text-transform: uppercase; }
.price-table-block h4 span { color: var(--muted);  font-weight: 500;  }
.price-rows { margin: 0; }
.price-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dotted var(--line); }
.price-rows > div:last-child { border-bottom: 0; }
.price-rows dt { color: var(--muted); font-size: var(--type-small); }
.price-rows dd { margin: 0; font-weight: 600; font-size: var(--type-0); font-variant-numeric: tabular-nums; }
.price-rows-extras { columns: 2; column-gap: 2rem; }
.price-rows-extras > div { break-inside: avoid; }

.price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: clamp(1.4rem, 3vw, 2.6rem); }
.price-foot .disclosure { max-width: 46ch; margin: 0; }

@media (max-width: 900px) {
  .price-rows-extras { columns: 1; }
}
@media (max-width: 460px) {
  .price-card-top { flex-direction: column; align-items: flex-start; }
  .price-pair { gap: 1.4rem; }
}

/* The work wall: photographs and clips from real jobs, in one grid. Portrait phone footage, so every tile is 9/16 --
   height:auto because a video's width/height attributes are presentational hints and would otherwise win. Stills open
   in the shared lightbox; clips play in place. */
.work-wall {
  max-width: var(--max);
  margin: clamp(2.2rem, 4vw, 3.4rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}
.work-item { display: block; }
.work-play, .work-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  cursor: pointer;
}
.work-open { cursor: zoom-in; }
.work-video, .work-open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--surface-dark);
  transition: transform var(--t-5) var(--ease), filter var(--t-4) var(--ease-fade);
}
.work-play:hover .work-video, .work-play:focus-visible .work-video,
.work-open:hover img, .work-open:focus-visible img { transform: scale(1.04); filter: brightness(.82); }
.work-label {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 3.2rem .8rem .75rem;
  background: linear-gradient(0deg, var(--scrim-82), var(--scrim-42) 42%, var(--transparent));
  font-size: var(--type-small);
  font-weight: 600;

  line-height: 1.3;
  text-align: left;
  text-wrap: balance;
}
.work-mark {
  position: absolute;
  z-index: 3;
  right: .7rem;
  bottom: .7rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--light-overlay-93);
  box-shadow: 0 2px 10px var(--shadow-soft);
  transition: opacity var(--t-2) var(--ease-fade), transform var(--t-2) var(--ease);
}
.work-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  transform: translate(-50%,-50%);
  border-left: 9px solid var(--border-subtle);
  border-top: 6px solid var(--transparent);
  border-bottom: 6px solid var(--transparent);
}
.work-play:hover .work-mark { transform: scale(1.08); }
.work-item.is-playing .work-mark { opacity: 0; }
.work-item.is-playing .work-label { opacity: 0; transition: opacity var(--t-2) var(--ease-fade); }
.heritage-work > .disclosure { margin-top: clamp(1rem, 2vw, 1.6rem); }

@media (max-width: 1100px) { .work-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .work-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two up on a phone: one portrait tile per row fills the screen and buries the rest. */
@media (max-width: 560px) { .work-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Supplied logos (Sept 2026): full-colour marks shown as drawn, with no pill, tint or filter. */
.choice-logo,
.choice-logo-home,
.choice-logo-auto { width: auto; max-width: 88%; padding: 0; background: none; box-shadow: none; border-radius: 0; opacity: 1; filter: drop-shadow(0 6px 18px var(--scrim-35)); }
.choice-logo-home { height: clamp(88px, 9vw, 132px); }
.choice-logo-auto { height: clamp(62px, 6.2vw, 92px); }
.brand-img-auto, .footer-logo-auto, .review-header img, .review-page footer img { filter: none; }
.brand-img-home { height: 64px; }
@media (max-width: 700px) {
  .choice-logo-home { height: 72px; }
  .choice-logo-auto { height: 50px; }
  .brand-img-home { height: 52px; }
}
@media (max-width: 700px) {
  .choice-auto .choice-bg,
  .hero-image-auto { background-image: url('/media/cankaj/wash-board-600.jpg'); background-position: center 22%; }
}
/* The price-board photo is busy, so the wash side sits under a heavier shade than a plain photo needs. */
.choice-auto .choice-shade { background: linear-gradient(180deg, var(--scrim-55) 0%, var(--scrim-90) 72%); }
@media (max-width: 700px) {
  body[data-mode="auto"] .hero-overlay { background: var(--scrim-80); }
}

/* Usability pass, Sept 2026 ------------------------------------------------ */
/* Open / closed, worked out live in site.js */
.hero-status.is-closed .status-dot { background: var(--surface-3); box-shadow: 0 0 0 5px var(--shadow-soft); }
body[data-mode="auto"] .hero-status:not(.is-closed) .status-dot { background: var(--surface-3); box-shadow: 0 0 0 5px var(--shadow-soft); }
.open-now { margin: 0 0 1rem; font-size: var(--type-1); }
.open-now strong { color: var(--text-muted); }
.open-now.is-closed strong { color: var(--text-muted); }
.location-copy dl div.is-today dt, .location-copy dl div.is-today dd { font-weight: 600; }
.location-copy dl div.is-today dt::after { content: " · today"; font-weight: 400; opacity: .7; }

/* Price shortcuts */
.price-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.price-jump a { padding: .55rem .95rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-1); color: var(--text-primary); font-size: var(--type-small); font-weight: 600; text-decoration: none; }
.price-jump a:hover, .price-jump a:focus-visible { background: var(--surface-dark); color: var(--text-on-dark); }

/* The phone bar holds as many actions as the current service shows */

@media (max-width: 700px) {
  /* What each wash includes reads as one line of text on a phone, not a wall of pills */
  .price-includes { display: block; margin-top: .6rem; color: var(--muted); font-size: var(--type-small); line-height: 1.5; }
  .price-includes li { display: inline; padding: 0; border: 0; border-radius: 0; font-size: inherit; }
  .price-includes li + li::before { content: " · "; }
  .price-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; scrollbar-width: none; }
  .price-jump a { flex: none; }
  .mobile-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mode-rail { transition: transform var(--t-2) var(--ease), opacity var(--t-2); }
  body.rail-away .mode-rail { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}
@media (pointer: coarse) {
  .mobile-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mode-rail { transition: none; }
}

/* Owner update pass, 30 Sept 2026 ------------------------------------------- */

/* Price list as four collapsible groups. The header is a button inside the h3; the panel opens with the
   0fr -> 1fr grid-row trick, so it animates to its natural height. Collapsing only happens once site.js has
   marked the list .is-enhanced -- without JavaScript every price stays visible. */
.price-groups { display: grid; gap: .75rem; }
.price-group { border: 1px solid var(--border-subtle); border-radius: 22px; background: var(--surface); }
.price-group.is-open { background: var(--surface-1); box-shadow: 0 14px 38px var(--shadow-soft); }
.price-group-title { margin: 0; }
.price-toggle {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.price-toggle-text { display: grid; gap: .3rem; }
.price-toggle-name { font-family: var(--auto-display); font-size: var(--type-3); font-style: italic; font-weight: 600; line-height: 1;  text-transform: uppercase; }
.price-toggle-sub { color: var(--muted); font-size: var(--type-small); font-weight: 400; }
/* Plus that turns into a minus: two bars, the upright one rotates flat. */
.price-toggle-mark { position: relative; flex: none; width: 40px; height: 40px; border: 1px solid var(--border-subtle); border-radius: 50%; background: var(--surface-1); }
.price-toggle-mark::before,
.price-toggle-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--surface-dark); transition: transform var(--t-2) var(--ease); }
.price-toggle-mark::after { transform: rotate(90deg); }
.price-toggle[aria-expanded="true"] .price-toggle-mark { border-color: var(--accent); background: var(--accent); }
.price-toggle[aria-expanded="true"] .price-toggle-mark::before,
.price-toggle[aria-expanded="true"] .price-toggle-mark::after { background: var(--surface-1); }
.price-toggle[aria-expanded="true"] .price-toggle-mark::after { transform: rotate(0deg); }
.price-toggle:hover .price-toggle-mark { border-color: var(--border-subtle); }
.price-panel-inner { padding: 0 1.25rem 1.35rem; }
.pricing.is-enhanced .price-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-3) var(--ease), visibility 0s; }
.pricing.is-enhanced .price-panel > .price-panel-inner { min-height: 0; overflow: hidden; }
.pricing.is-enhanced .price-group:not(.is-open) .price-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-3) var(--ease), visibility 0s var(--t-3); }
.pricing.is-enhanced .price-group:not(.is-open) .price-panel-inner { padding-bottom: 0; }
/* Inside an open group, cards sit side by side so packages compare at a glance. */
.price-panel .price-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.price-panel .price-card { box-shadow: none; }
.price-group-table .price-panel-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2rem; }
.price-group-table .price-rows-extras { grid-column: 1 / -1; columns: 3; }
.price-jump a { min-height: 40px; display: inline-flex; align-items: center; }

@media (max-width: 900px) {
  .price-group-table .price-panel-inner { grid-template-columns: minmax(0, 1fr); }
  .price-group-table .price-rows-extras { columns: 1; }
}
@media (max-width: 700px) {
  .price-toggle { padding: .95rem 1rem; }
  .price-toggle-name { font-size: var(--type-2); }
  .price-panel-inner { padding-inline: 1rem; }
  .price-toggle-mark { width: 36px; height: 36px; }
}

/* Contact: direct routes only, in the column the form used to hold. */
.contact-routes { align-self: start; }
.contact .direct-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact .direct-links a { min-height: 64px; align-items: center; padding: 1.15rem .25rem; font-size: var(--type-1); transition: background var(--t-2) var(--ease-fade), padding var(--t-2) var(--ease); }
.contact .direct-links a:hover, .contact .direct-links a:focus-visible { padding-left: .75rem; background: var(--surface); }
.contact .direct-links strong { font-weight: 600; }
.contact-note { margin: 1.25rem 0 0; color: var(--muted); font-size: var(--type-small); line-height: 1.55; }

/* Review carousel: native horizontal scrolling with snap points. Three cards on a wide screen,
   one and a peek of the next on a phone. */
.review-carousel { position: relative; margin-top: clamp(2.5rem,4vw,4rem); }
.review-carousel-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.review-carousel.is-static .review-carousel-controls { visibility: hidden; }
.carousel-button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--w-36); border-radius: 50%; background: var(--transparent); color: var(--text-on-dark); font-size: var(--type-1); cursor: pointer; transition: background var(--t-2) var(--ease-fade), opacity var(--t-2); }
.carousel-button:hover:not(:disabled) { background: var(--w-16); }
.carousel-button:disabled { opacity: .35; cursor: default; }
.review-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1rem) / 3);
  gap: 1rem;
  margin: 0;
  padding: 0 0 .75rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--w-36) var(--transparent);
}
.review-track:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
.review-track .review-card { min-height: 280px; border: 1px solid var(--w-22); border-radius: 22px; scroll-snap-align: start; }
.review-card footer a { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; color: var(--w-74); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; text-underline-offset: 3px; }
.review-card footer time { color: var(--w-55); font-size: var(--type-small); }
@media (max-width: 980px) { .review-track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 700px) {
  .review-track { grid-auto-columns: 84%; gap: .75rem; }
  .review-track .review-card { min-height: 240px; }
}

/* Wash gallery: tiles keep the photographs' own 3:2 shape instead of being stretched to fill fixed rows. */
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
.gallery-item { min-height: 0; aspect-ratio: 3 / 2; }
.gallery-item-large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.illustrative-tag { position: absolute; z-index: 2; top: .7rem; left: .7rem; padding: .25rem .55rem; border-radius: 999px; background: var(--scrim-72); color: var(--text-on-dark); font-size: var(--type-small); font-style: normal; font-weight: 600;  text-transform: uppercase; pointer-events: none; }
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item, .gallery-item-large { min-height: 0; }
  .gallery-item-large { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}

/* Lightbox caption bar with previous / next for photographs in the same gallery. */
.dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: .75rem; }
.gallery-dialog .dialog-bar p { flex: 1; }
.dialog-nav { display: flex; align-items: center; gap: .4rem; }
.dialog-nav[hidden] { display: none; }
.dialog-nav button { width: 44px; height: 44px; border: 1px solid var(--border-on-dark); border-radius: 50%; background: var(--transparent); color: var(--text-on-dark); font-size: var(--type-1); cursor: pointer; }
.dialog-nav button:hover { background: var(--light-overlay-12); }
.dialog-count { min-width: 4.5em; color: var(--text-on-dark); font-size: var(--type-small); text-align: center; font-variant-numeric: tabular-nums; }

/* Instagram: a compact linked grid, hidden until the business's address is set in site.js. */
.instagram { padding-top: clamp(3.5rem,7vw,6rem); padding-bottom: clamp(3.5rem,7vw,6rem); }
.instagram[hidden] { display: none; }
.instagram-head { max-width: var(--max); margin: 0 auto 1.6rem; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.instagram-head h2 { margin: 0; }
.instagram-grid { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.4rem,1vw,.8rem); }
.instagram-grid a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--surface-dark); }
.instagram-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-5) var(--ease), filter var(--t-4) var(--ease-fade); }
.instagram-grid a[href]:hover img { transform: scale(1.04); filter: brightness(.85); }
body[data-mode="home"] .instagram { background: var(--bg); }
.instagram.is-preview .instagram-link { opacity: .45; pointer-events: none; }
.instagram-preview-note { max-width: var(--max); margin: 1rem auto 0; padding: .7rem 1rem; border: 1px dashed var(--line); color: var(--muted); font-size: var(--type-small); }
@media (max-width: 700px) {
  .instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing.is-enhanced .price-panel,
  .pricing.is-enhanced .price-group:not(.is-open) .price-panel,
  .price-toggle-mark::before,
  .price-toggle-mark::after,
  .contact .direct-links a,
  .instagram-grid img { transition: none; }
  .review-track { scroll-behavior: auto; }
}

/* Premium pass, 30 Sept 2026 ---------------------------------------------------
   From the owner's visual-refinement brief: calmer type, one content width, tighter rhythm, photo-led heroes,
   one contact section per business. Everything is scoped under body[data-mode] so it wins over the earlier
   passes above without !important. */
body[data-mode] {
  --g: clamp(20px, 4.4vw, 64px);
  --pad-x: max(var(--g), calc((100% - 1240px) / 2));
  --sec-y: clamp(52px, 6vw, 80px);
  --radius: 6px;
  --t-quick: 180ms;
}
body[data-mode="auto"] {
  --p-ink: var(--text-primary); --p-paper: var(--surface-1); --p-muted: var(--text-muted); --p-accent: var(--surface-dark);
  --p-line: var(--border-subtle); --p-soft: var(--surface-2); --p-card: var(--surface-1);
  --bg: var(--p-paper); --text: var(--p-ink); --muted: var(--p-muted); --line: var(--p-line); --accent: var(--p-accent); --surface: var(--p-soft);
}
body[data-mode="home"] {
  --p-ink: var(--text-primary); --p-paper: var(--surface-1); --p-muted: var(--text-muted); --p-accent: var(--surface-dark);
  --p-line: var(--border-subtle); --p-soft: var(--surface-2); --p-card: var(--surface-1);
  --bg: var(--p-paper); --text: var(--p-ink); --muted: var(--p-muted); --line: var(--p-line); --accent: var(--surface-dark); --surface: var(--p-soft);
}
body[data-mode] { background: var(--p-paper); color: var(--p-ink); }
html { scroll-padding-top: calc(var(--header-h, 96px) + 12px); }
html body :is(#top, #services, #work, #gallery, #reviews, #location, #approach, #contact) { scroll-margin-top: 0; }

/* Header: opaque, sticky, with the business switch inside it */
body[data-mode] .site-header,
body[data-mode] .site-header.scrolled {
  position: sticky; top: 0; inset: auto; z-index: 100; display: block; height: auto;
  padding: 0 var(--pad-x); border-bottom: 1px solid var(--p-line); background: var(--p-paper); color: var(--p-ink);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.header-bar { min-height: 84px; display: flex; align-items: center; gap: 28px; }
body[data-mode] .site-header .brand { width: auto; flex: none; }
body[data-mode] .brand-img { width: auto; height: 46px; }
body[data-mode] .brand-img-home { height: 58px; }
body[data-mode] .main-nav { margin-left: auto; gap: 26px; }
body[data-mode] .main-nav .nav-set { gap: 26px; }
body[data-mode] .main-nav a { font-size: var(--type-0); font-weight: 500;  text-transform: none; color: var(--p-ink); }
body[data-mode] .main-nav a::after { background: var(--p-accent); }
.business-switch { flex: none; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
.business-switch button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 5px; background: none; color: var(--p-muted); font-weight: 500; font-size: var(--type-small); line-height: 1; font-family: var(--sans); cursor: pointer; transition: background var(--t-quick) ease, color var(--t-quick) ease; }
.business-switch button:hover { color: var(--p-ink); }
.business-switch button[aria-selected="true"] { background: var(--p-ink); color: var(--p-paper); }

/* Buttons and links */
body[data-mode] .button { min-height: 50px; padding: 0 22px; border-radius: var(--radius); font-size: var(--type-0); font-weight: 600;  text-transform: none; transition: background var(--t-quick) ease, color var(--t-quick) ease; }
body[data-mode] .button:hover { transform: none; }
body[data-mode] .button::after { display: none; }
body[data-mode] .button-primary { background: var(--p-accent); color: var(--text-on-dark); }
body[data-mode="auto"] .button-primary:hover { background: var(--surface-dark); }
body[data-mode="home"] .button-primary { color: var(--p-paper); }
body[data-mode="home"] .button-primary:hover { background: var(--surface-dark); }
body[data-mode] .text-link { color: var(--p-ink); font-size: var(--type-small); font-weight: 600; }

/* Hero: the photograph sits beside the copy, not under a heavy overlay */
body[data-mode] .hero { min-height: 0; display: block; overflow: visible; isolation: auto; padding: 56px var(--pad-x) 64px; background: var(--p-paper); color: var(--p-ink); }
body[data-mode] .hero-inner { width: auto; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
body[data-mode="home"] .hero-inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
body[data-mode] .hero .eyebrow { margin: 0 0 18px; color: var(--p-accent); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
body[data-mode="home"] .hero .eyebrow { color: var(--p-muted); }
body[data-mode] .hero h1 { max-width: 12ch; margin: 0; color: var(--p-ink); font-family: var(--sans);  font-style: normal; font-weight: 600;   text-transform: none; text-shadow: none; }
body[data-mode="home"] .hero h1 { max-width: 13ch; font-family: var(--serif);  font-weight: 500;   }
body[data-mode="home"] .hero h1 em { color: var(--text-muted); font-family: inherit; font-style: italic; font-weight: 500; }
body[data-mode] .hero-copy { max-width: 440px; margin: 22px 0 0; color: var(--p-muted); font-size: var(--type-1); line-height: 1.6; }
body[data-mode] .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.hero-link { padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--p-ink); font-size: var(--type-0); font-weight: 600; text-decoration: none; transition: opacity var(--t-quick) ease; }
.hero-link:hover { opacity: .75; }
body[data-mode] .hero-status { position: static; margin: 26px 0 0; display: flex; align-items: center; gap: 10px; color: var(--p-muted); font-size: var(--type-small); }
body[data-mode] .hero-status strong { color: var(--p-ink); font-weight: 600; }
body[data-mode] .status-dot { flex: none; }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }
.hero-figure-auto img { aspect-ratio: 4 / 3; object-position: 55% 50%; }
.hero-figure-home { justify-self: end; width: 100%; max-width: 500px; }
.hero-figure-home img { aspect-ratio: 4 / 5; object-position: 50% 58%; }

/* Sections: content-sized, one width, one rhythm */
body[data-mode] :is(.section, .work-section, .reviews, .approach, .contact) { min-height: 0; padding: var(--sec-y) var(--pad-x); }
body[data-mode] .section-heading { max-width: none; margin: 0 0 clamp(24px, 3vw, 36px); }
body[data-mode] .section-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; gap: 40px; }
body[data-mode] .kicker { margin: 0 0 14px; color: var(--p-accent); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
body[data-mode="home"] .kicker { color: var(--p-muted); }
body[data-mode] main h2 { max-width: 20ch; margin: 0; color: var(--p-ink); font-family: var(--sans);  font-style: normal; font-weight: 600;   text-transform: none; }
body[data-mode="home"] main h2 { font-family: var(--serif); font-weight: 500;  }
body[data-mode] .section-intro { max-width: 520px; margin: 14px 0 0; color: var(--p-muted); font-size: var(--type-0); line-height: 1.65; }
body[data-mode] .section-heading-row .section-intro { margin: 0; }
body[data-mode] .disclosure { color: var(--p-muted); font-size: var(--type-small); }

/* Prices: the board photograph beside the heading; the accordion in the brand's calmer type */
.services-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.board-figure { width: 170px; margin: 0; }
.board-open { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--p-line); border-radius: var(--radius); background: var(--p-card); cursor: zoom-in; }
.board-open img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; transition: transform var(--t-quick) ease; }
.board-open:hover img { transform: scale(1.03); }
.board-figure figcaption { margin-top: 8px; color: var(--p-muted); font-size: var(--type-small); }
body[data-mode] .price-jump a { min-height: 38px; padding: 0 14px; border-color: var(--p-line); border-radius: var(--radius); background: var(--p-card); color: var(--p-ink); font-size: var(--type-small); font-weight: 500; transition: background var(--t-quick) ease, color var(--t-quick) ease; }
body[data-mode] .price-jump a:hover, body[data-mode] .price-jump a:focus-visible { background: var(--p-ink); color: var(--p-paper); }
body[data-mode] .price-groups { gap: 10px; }
body[data-mode] .price-group { border: 1px solid var(--p-line); border-radius: 8px; background: var(--surface-1); }
body[data-mode] .price-group.is-open { background: var(--surface-1); box-shadow: none; }
body[data-mode] .price-toggle { min-height: 64px; padding: 16px 20px; border-radius: 8px; }
body[data-mode] .price-toggle-name { font-family: var(--sans); font-size: var(--type-1); font-style: normal; font-weight: 600;  text-transform: none; }
body[data-mode] .price-toggle-sub { font-size: var(--type-small); }
body[data-mode] .price-toggle-mark { width: 34px; height: 34px; border-color: var(--p-line); }
body[data-mode] .price-toggle-mark::before, body[data-mode] .price-toggle-mark::after { width: 12px; margin-left: -6px; background: var(--p-ink); transition-duration: var(--t-quick); }
body[data-mode] .price-toggle[aria-expanded="true"] .price-toggle-mark { border-color: var(--p-ink); background: var(--p-ink); }
body[data-mode] .price-panel-inner { padding: 0 20px 20px; }
body[data-mode] .pricing.is-enhanced .price-panel { transition: grid-template-rows 220ms var(--ease), visibility 0s; }
body[data-mode] .pricing.is-enhanced .price-group:not(.is-open) .price-panel { transition: grid-template-rows 220ms var(--ease), visibility 0s 220ms; }
body[data-mode] .price-card { padding: 16px 18px 18px; border: 1px solid var(--p-line); border-radius: var(--radius); background: var(--p-card); box-shadow: none; }
body[data-mode] .price-card h4 {  font-weight: 600; }
body[data-mode] .price-cell b { font-family: var(--sans); font-size: var(--type-1); font-style: normal; font-weight: 600;  font-variant-numeric: tabular-nums; }
body[data-mode] .price-card-feature { border-color: var(--border-subtle); box-shadow: none; }
body[data-mode] .price-includes li { border-radius: 4px; }
body[data-mode] .price-rows dd { font-variant-numeric: tabular-nums; }
body[data-mode] .price-foot .disclosure { font-size: var(--type-small); }

/* Property services: the list beside one painting photograph */
.services-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.services-figure { margin: 0; }
.services-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.services-figure figcaption { margin-top: 10px; color: var(--p-muted); font-size: var(--type-small); }
body[data-mode] .service-panels-home .service-panel-trigger { min-height: 76px; }

body[data-mode] .service-panels-home .panel-mark { width: 36px; height: 36px; }

/* Property job gallery: real footage and photographs, unchanged, in the calmer frame */
body[data-mode] .work-section { background: var(--p-soft); }
body[data-mode] .heritage-work { max-width: none; }
body[data-mode] .heritage-work-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 40px; margin: 0 0 clamp(24px, 3vw, 36px); }
body[data-mode] .heritage-work-head p:last-child { font-size: var(--type-0); }
body[data-mode] .work-wall { max-width: none; margin-top: 0; }
body[data-mode] .work-play, body[data-mode] .work-open { border-radius: var(--radius); }

/* Wash gallery: four photographs, captions below, no overlays */
body[data-mode] .gallery-grid { max-width: none; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 24px; }
.gallery-cell { margin: 0; }
body[data-mode] .gallery-item { display: block; width: 100%; min-height: 0; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--p-soft); }
body[data-mode] .gallery-item picture { display: block; width: 100%; height: 100%; }
body[data-mode] .gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform 220ms ease; }
body[data-mode] .gallery-item:hover img, body[data-mode] .gallery-item:focus-visible img { transform: scale(1.03); filter: none; }
body[data-mode] .gallery-item::before, body[data-mode] .gallery-item::after { display: none; }
.gallery-caption { margin: 12px 0 0; color: var(--p-ink); font-size: var(--type-0); font-weight: 500; }

/* Reviews: light band, controls beside the heading, cards sized to their words */
body[data-mode] .reviews { background: var(--p-soft); color: var(--p-ink); }
body[data-mode] .reviews-inner { display: block; max-width: none; margin: 0; }
body[data-mode] .review-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding: 0; border: 0; }
body[data-mode] .review-intro .kicker { color: var(--p-accent); }
.review-side { display: flex; align-items: center; gap: 28px; }
body[data-mode] .review-score { display: flex; align-items: center; gap: 12px; color: var(--p-ink); text-decoration: none; }
body[data-mode] .review-score strong { color: var(--p-ink); font-family: var(--sans); font-size: var(--type-4); font-style: normal; font-weight: 500; line-height: 1;  }
body[data-mode] .review-score > span { display: block; color: var(--p-ink); font-size: var(--type-small); font-weight: 500;  line-height: 1.35; }
body[data-mode] .review-score small { display: block; margin-top: 3px; color: var(--p-muted); font-size: var(--type-small); font-weight: 400;  text-transform: none; }
body[data-mode] .review-score:hover small { color: var(--p-ink); text-decoration: underline; }
body[data-mode] .review-carousel-controls { margin: 0; display: flex; gap: 8px; }
body[data-mode] .reviews-inner.is-static .review-carousel-controls { display: none; }
body[data-mode] .carousel-button { width: 44px; height: 44px; border: 1px solid var(--border-subtle); color: var(--p-ink); transition: background var(--t-quick) ease, opacity var(--t-quick) ease; }
body[data-mode] .carousel-button:hover:not(:disabled) { background: var(--scrim-08); }
body[data-mode] .review-track { margin-top: 32px; grid-auto-columns: minmax(300px, calc((100% - 20px) / 2)); gap: 20px; padding-bottom: 8px; scrollbar-color: var(--text-primary) var(--transparent); }
body[data-mode] .review-track:focus-visible { outline: 2px solid var(--p-accent); }
body[data-mode] .review-track .review-card { min-height: 220px; padding: 26px 26px 22px; border: 1px solid var(--border-on-dark); border-radius: var(--radius); background: var(--p-card); color: var(--p-ink); }
body[data-mode] .review-stars { color: var(--text-muted); font-size: var(--type-0);  }
body[data-mode] .reviews .review-card blockquote { margin: 16px 0 24px; color: var(--p-ink); font-family: var(--sans); font-size: var(--type-2); font-weight: 500; line-height: 1.32;  }
body[data-mode] .review-card footer { margin-top: auto; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border: 0; }
body[data-mode] .review-card footer strong { display: block; color: var(--p-ink); font-size: var(--type-0); font-weight: 600; }
body[data-mode] .review-card footer small { display: block; margin-top: 4px; color: var(--p-muted); font-size: var(--type-small); }
body[data-mode] .review-card footer a { flex: none; color: var(--p-ink); font-size: var(--type-small); font-weight: 600;  text-transform: none; }
body[data-mode] .review-card footer a span { color: inherit; font-size: inherit;  text-transform: none; }
.review-foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--p-muted); font-size: var(--type-small); }
.review-foot p { margin: 0; }

/* Contact: one section per business; the wash's visit details and map live here */
body[data-mode] .contact { display: block; background: var(--p-paper); border-top: 1px solid var(--p-line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }

.contact-lead { max-width: 460px; margin: 16px 0 0; color: var(--p-muted); font-size: var(--type-0); line-height: 1.6; }
body[data-mode] .contact address { margin: 22px 0 18px; color: var(--p-ink); font-size: var(--type-0); font-style: normal; line-height: 1.65; }
body[data-mode] .contact .open-now { margin: 0 0 10px; font-size: var(--type-0); }
.visit-hours { max-width: 380px; margin: 0; border-top: 1px solid var(--p-line); }
.visit-hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--p-line); font-size: var(--type-0); }
.visit-hours dt, .visit-hours dd { margin: 0; }
.visit-hours dd { color: var(--p-muted); }
.visit-hours div.is-today dt, .visit-hours div.is-today dd { color: var(--p-ink); font-weight: 600; }
.visit-hours div.is-today dt::after { content: " · today"; font-weight: 400; opacity: .7; }
body[data-mode] .contact-note { max-width: 460px; margin: 16px 0 0; color: var(--p-muted); font-size: var(--type-small); line-height: 1.6; }
body[data-mode] .contact .direct-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
body[data-mode] .contact .direct-links li { border-bottom: 1px solid var(--p-line); }
body[data-mode] .contact .direct-links a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 18px 0; border: 0; background: none; font-size: var(--type-0); text-decoration: none; transition: opacity var(--t-quick) ease; }
body[data-mode] .contact .direct-links a:hover { padding-left: 0; background: none; opacity: .75; }
body[data-mode] .contact .direct-links span { color: var(--p-muted); font-size: var(--type-small); font-weight: 600;  text-transform: uppercase; }
body[data-mode] .contact .direct-links strong { font-weight: 500; overflow-wrap: anywhere; }
body[data-mode] .contact .direct-links i { color: var(--p-muted); font-style: normal; }
body[data-mode] .contact .location-map { min-height: 0; height: 260px; margin-top: 24px; overflow: hidden; border: 1px solid var(--p-line); border-radius: var(--radius); background: var(--p-soft); }
body[data-mode] .contact .location-map iframe { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; filter: none; }

/* Property process: a compact text-only sequence */
body[data-mode] .approach { background: var(--p-paper); color: var(--p-ink); border-top: 1px solid var(--p-line); }
body[data-mode] .approach-head { display: block; max-width: none; margin: 0 0 28px; }
.process-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--p-line); }
.process-strip li { display: grid; align-content: start; gap: 6px; padding: 20px 24px 4px 0; }
.process-strip li + li { padding-left: 24px; border-left: 1px solid var(--p-line); }
.process-strip span { color: var(--p-muted); font-family: var(--serif); font-size: var(--type-0); }
.process-strip strong { font-family: var(--serif);  font-weight: 400;  }
.process-strip small { color: var(--p-muted); font-size: var(--type-small); line-height: 1.55; }

/* Footer: one compact line */
body[data-mode] .site-footer { display: block; padding: 26px var(--pad-x); border-top: 1px solid var(--p-line); background: var(--p-paper); color: var(--p-muted); font-size: var(--type-small); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
body[data-mode] .footer-id { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; text-align: left; }
.footer-owner { color: var(--p-muted); }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body[data-mode] .footer-inner nav a { display: inline-flex; align-items: center; min-height: 24px; color: var(--p-muted); font-size: var(--type-small);  text-transform: none; }
body[data-mode] .footer-inner nav a:hover { color: var(--p-ink); }

body[data-mode="auto"] .mobile-actions { background: var(--p-ink); }
body[data-mode] .work-section .disclosure { color: var(--text-muted); }
body[data-mode] .open-now strong, body[data-mode] .hero-status .open-label { color: var(--text-muted); }
body[data-mode="home"] .mobile-actions { background: var(--p-ink); }

/* Chooser: sharp stills instead of low-resolution video behind the text */
html.deep-link body:not(.chooser-open) .choice-bg { background-image: none !important; }
.choice-home .choice-bg { background-image: url('/media/cankaj/work-at-the-wall-900.jpg'); background-position: center 45%; }
.choice-auto .choice-bg { background: var(--surface-dark) url('/media/cankaj/wash-galaxy-900.jpg') center 60% / cover no-repeat; }

@media (max-width: 980px) {
  body[data-mode] .business-switch { margin-left: auto; }
  body[data-mode] .section-heading-row,
  body[data-mode] .heritage-work-head { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
  body[data-mode] .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-strip li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .header-bar { min-height: 0; flex-wrap: wrap; gap: 8px 16px; padding: 9px 0; }
  body[data-mode] .brand-img { height: 34px; }
  body[data-mode] .brand-img-home { height: 40px; }
  body[data-mode] .business-switch { width: 100%; margin-left: 0; }
  .business-switch button { flex: 1; min-height: 36px; }
  body[data-mode] .hero-inner,
  body[data-mode="home"] .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-figure-home { justify-self: stretch; max-width: none; }
  .hero-figure-home img { aspect-ratio: 5 / 4; }
  .services-heading { grid-template-columns: minmax(0, 1fr) 104px; gap: 18px; align-items: start; }
  .board-figure { width: 104px; }
  .services-home { grid-template-columns: minmax(0, 1fr); }
  .services-figure img { aspect-ratio: 4 / 3; object-position: 50% 62%; }
  body[data-mode] .gallery-grid { gap: 20px 14px; }
  body[data-mode] .review-heading { flex-direction: column; align-items: stretch; }
  .review-side { justify-content: space-between; }
  body[data-mode] .review-track { grid-auto-columns: 85%; }
  body[data-mode] .review-card footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-mode] .contact .direct-links a { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 10px; font-size: var(--type-0); }
  .process-strip { grid-template-columns: minmax(0, 1fr); }
  .process-strip li, .process-strip li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--p-line); }
  body[data-mode] .site-footer { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .business-switch button, .hero-link, .board-open img, body[data-mode] .gallery-item img { transition: none; }
}

/* Approved sizing revision: readable supporting text and balanced photo proportions. */
body[data-mode] .hero-link { font-size: var(--type-0); }
body[data-mode] .contact .direct-links a { min-height: 74px; font-size: var(--type-1); }
body[data-mode] .contact .direct-links span { font-size: var(--type-small); }
body[data-mode] .gallery-item { aspect-ratio: 16 / 9; }
@media (max-width: 980px) and (min-width: 761px) {
  .header-bar { flex-wrap: wrap; padding-block: 14px; gap: 12px 20px; }
  body[data-mode] .business-switch { margin-left: auto; }
}
@media (max-width: 760px) {
  body[data-mode] { --sec-y: 48px; }
  body[data-mode] .hero { padding-block: 36px 42px; }

  body[data-mode] .hero-copy { font-size: var(--type-0); }
  body[data-mode] .main-nav a { font-size: var(--type-small); }
  body[data-mode] .hero-figure-auto img { aspect-ratio: 3 / 2; }
  body[data-mode] .gallery-item { aspect-ratio: 1.08; }
  .gallery-caption { font-size: var(--type-small); }
  body[data-mode] .reviews .review-card blockquote { font-size: var(--type-1); }
  body[data-mode] .contact .direct-links a { min-height: 70px; font-size: var(--type-0); }
  body[data-mode] .contact .direct-links span { font-size: var(--type-small); }
}

/* Real media pass, 30 Sept 2026 ---------------------------------------------------
   Real wash photographs and clips (portrait phone footage), the before-and-after pairs, the truck beside its
   prices, and "from" prices on valets. */
body[data-mode] .gallery-grid.gallery-grid-real { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { body[data-mode] .gallery-grid.gallery-grid-real { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
/* Price pairs: the second price moves to its own line in a narrow card instead of breaking its label letter by letter */
body[data-mode] .price-pair { flex-wrap: wrap; row-gap: 4px; }
body[data-mode] .price-cell small { white-space: nowrap; }
body[data-mode] .gallery-grid-real .gallery-item-tall,
body[data-mode] .gallery-grid-real .gallery-film { aspect-ratio: 3 / 4; }
.gallery-film { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--surface-dark); cursor: pointer; }
body[data-mode] .gallery-film .work-video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.gallery-cell.work-item.is-playing .work-mark { opacity: 0; }

.ba-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; align-items: start; }
.ba-item { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--p-line); border-radius: var(--radius); background: var(--p-soft); cursor: zoom-in; }
.ba-item img { display: block; width: 100%; height: auto; transition: transform 220ms ease; }
.ba-item:hover img { transform: scale(1.02); }
body[data-mode] .before-after { border-top: 1px solid var(--p-line); }

.truck-figure { margin: 14px 0 0; }
.truck-figure button { display: block; width: 100%; max-width: 220px; padding: 0; overflow: hidden; border: 1px solid var(--p-line); border-radius: var(--radius); background: var(--p-soft); cursor: zoom-in; }
.truck-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.truck-figure figcaption { margin-top: 6px; color: var(--p-muted); font-size: var(--type-small); }

.price-cell .price-from { margin-right: 4px; color: var(--p-muted); font-size: var(--type-small); font-weight: 500;  text-transform: none; }
.price-note { margin: 14px 0 0; color: var(--p-muted); font-size: var(--type-small); }

/* Property job gallery: 15 tiles; the landscape patio photograph spans two columns so it is not cropped to a sliver */
body[data-mode] .work-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; }
.work-item-wide { grid-column: span 2; }
.work-item-wide .work-open { height: 100%; }
body[data-mode] .work-item-wide .work-open img { height: 100%; aspect-ratio: auto; object-fit: cover; }

@media (max-width: 1100px) { body[data-mode] .work-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body[data-mode] .work-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-grid { grid-template-columns: minmax(0, 1fr); }
  .work-item-wide .work-open img { aspect-ratio: 4 / 3; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ba-item img { transition: none; } }

/* Layout pass, 30 Sept 2026 (evening) ---------------------------------------------
   Shorter photo tiles, three columns on tablets, and before-and-after pairs side by side on phones. */
body[data-mode] .work-video, body[data-mode] .work-open img { aspect-ratio: 3 / 4; }
body[data-mode] .hero-figure-auto img { object-position: 50% 60%; }
.ba-item { border-radius: 12px; }
.ba-item { background: var(--surface-1); }
.ba-item img { aspect-ratio: 1; object-fit: contain; }
@media (max-width: 980px) and (min-width: 761px) {
  body[data-mode] .gallery-grid.gallery-grid-real,
  .ba-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  body[data-mode] .work-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .ba-grid .gallery-caption, .ba-grid figcaption, .ba-grid p { font-size: var(--type-small); }
}


/* Identity pass, 1 Oct 2026 ------------------------------------------------------
   The logos carry the loud colour; the page around them stays disciplined and lets the real photographs work.
   Each business gets one confident colour field (the wash's navy hero and reviews, the property's slate work
   gallery and navy contact band) and otherwise sits on a light ground. One body face (Barlow) ties the site
   together; each business has its own heading face: Barlow Semi Condensed for the wash, like forecourt signage,
   Source Serif 4 for the stonework. */
:root {
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --auto-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}
body[data-mode="auto"] {
  --p-ink: var(--text-primary); --p-paper: var(--surface-1); --p-muted: var(--text-muted); --p-accent: var(--surface-dark);
  --p-line: var(--border-subtle); --p-soft: var(--surface-2); --p-card: var(--surface-1);
  --deep: var(--surface-dark); --deep-2: var(--surface-dark); --on-deep: var(--text-on-dark); --on-deep-muted: var(--text-muted-on-dark);
  --head: var(--display);
}
body[data-mode="home"] {
  --p-ink: var(--text-primary); --p-paper: var(--surface-1); --p-muted: var(--text-muted); --p-accent: var(--surface-dark);
  --p-line: var(--border-subtle); --p-soft: var(--surface-2); --p-card: var(--surface-1);
  --deep: var(--surface-dark); --deep-2: var(--surface-dark); --on-deep: var(--text-on-dark); --on-deep-muted: var(--text-muted-on-dark);
  --head: var(--serif);
}
body[data-mode] { font-family: var(--sans); font-size: var(--type-0); -webkit-font-smoothing: antialiased; }

/* Labels above headings repeat what the heading says; the headings carry the page on their own. */
body[data-mode] main .kicker, body[data-mode] .hero .eyebrow { display: none; }

/* Headings */
body[data-mode] .hero h1, body[data-mode] main h2 { font-family: var(--head); font-style: normal; text-transform: none; }
body[data-mode="auto"] .hero h1 { max-width: 11ch;  font-weight: 600;   }
body[data-mode="auto"] main h2 {  font-weight: 600;   }
body[data-mode="home"] .hero h1 {  font-weight: 600;   }
body[data-mode="home"] .hero h1 em { color: inherit; font-style: normal; }
body[data-mode="home"] main h2 {  font-weight: 600;   }
body[data-mode] .section-intro, body[data-mode] .hero-copy { font-size: var(--type-1); line-height: 1.6; }

/* Header and switch */
body[data-mode] .site-header, body[data-mode] .site-header.scrolled { background: var(--p-paper); }
.business-switch { border-radius: 999px; padding: 4px; }
.business-switch button { border-radius: 999px; padding: 0 16px; font-family: var(--sans); font-weight: 500; }
.business-switch button[aria-selected="true"] { background: var(--p-accent); color: var(--text-on-dark); }
body[data-mode="auto"] .business-switch button[aria-selected="true"] { background: var(--deep); }

/* Buttons */
body[data-mode] .button { border-radius: 4px; font-family: var(--sans); font-size: var(--type-0); font-weight: 600; }
body[data-mode] .button-primary { background: var(--p-accent); color: var(--text-on-dark); }
body[data-mode="auto"] .button-primary:hover { background: var(--surface-dark); }
body[data-mode="home"] .button-primary { color: var(--text-on-dark); }
body[data-mode="home"] .button-primary:hover { background: var(--surface-dark); }
body[data-mode] .hero-phone { display: none; }

/* Wash hero: one deep navy field with the forecourt photograph on it */
body[data-mode="auto"] .hero { background: var(--deep); color: var(--on-deep); padding-block: clamp(44px, 6vw, 88px); }
body[data-mode="auto"] .hero h1 { color: var(--text-on-dark); }
body[data-mode="auto"] .hero-copy { color: var(--on-deep-muted); }
body[data-mode="auto"] .hero .button-primary { background: var(--surface-1); color: var(--deep); }
body[data-mode="auto"] .hero .button-primary:hover { background: var(--surface-2); }
body[data-mode="auto"] .hero-link { color: var(--text-on-dark); }
body[data-mode="auto"] .hero-status, body[data-mode="auto"] .hero-status strong { color: var(--on-deep-muted); }
body[data-mode="auto"] .hero-status strong { color: var(--text-on-dark); }
body[data-mode="auto"] .hero-figure img { border-radius: 4px; }
body[data-mode="auto"] .open-now strong, body[data-mode="auto"] .hero-status .open-label { color: var(--text-muted-on-dark); }
body[data-mode="auto"] .contact .open-now strong { color: var(--text-muted); }

/* Property hero: limestone ground, serif heading, the wall photograph */
body[data-mode="home"] .hero { background: var(--p-paper); padding-block: clamp(44px, 6vw, 88px); }
body[data-mode="home"] .hero-figure img { border-radius: 2px; }

/* Wash prices: white ground, quiet cards, prices set large in navy */
body[data-mode="auto"] .services { background: var(--surface-1); }
body[data-mode] .price-jump a { border-radius: 999px; font-family: var(--sans); font-size: var(--type-0); }
body[data-mode="auto"] .price-jump a:hover, body[data-mode="auto"] .price-jump a:focus-visible { background: var(--p-accent); border-color: var(--p-accent); color: var(--text-on-dark); }
body[data-mode] .price-group { border-radius: 6px; }
body[data-mode="auto"] .price-group.is-open { border-color: var(--border-subtle); }
body[data-mode="auto"] .price-toggle-name { font-family: var(--display); font-size: var(--type-2); font-weight: 600;  }
body[data-mode="auto"] .price-toggle[aria-expanded="true"] .price-toggle-mark { border-color: var(--p-accent); background: var(--p-accent); }
body[data-mode="auto"] .price-card { background: var(--p-soft); border-color: var(--transparent); border-radius: 6px; }
body[data-mode="auto"] .price-card h4 { font-family: var(--sans);  font-weight: 600; }
body[data-mode="auto"] .price-cell b { font-family: var(--display); font-size: var(--type-3); font-weight: 600; color: var(--p-ink);  }
body[data-mode="auto"] .price-cell small { color: var(--p-muted); }
body[data-mode="auto"] .price-includes li { background: var(--surface-1); border-color: var(--transparent); color: var(--p-muted); }
body[data-mode="auto"] .price-card-feature { background: var(--surface-1); border: 1px solid var(--p-accent); }

/* Section grounds: the wash alternates white and mist with navy for reviews */
body[data-mode="auto"] .gallery { background: var(--p-soft); }
body[data-mode="auto"] .before-after { background: var(--surface-1); border-top: 0; }
body[data-mode="auto"] .instagram { background: var(--p-soft); }
body[data-mode="auto"] .contact { background: var(--p-soft); border-top: 0; }

/* Before and after: each pair at its own shape, no letterboxing */
.ba-grid, body[data-mode] .ba-grid { display: block; columns: 3 240px; column-gap: 20px; }
.ba-grid > li { break-inside: avoid; margin: 0 0 22px; }
.ba-item, body[data-mode] .ba-item { border: 0; border-radius: 4px; background: var(--p-soft); }
.ba-item img { aspect-ratio: auto; object-fit: initial; }
.ba-grid .gallery-caption { margin-top: 8px; color: var(--p-muted); font-size: var(--type-small); }
@media (max-width: 560px) { .ba-grid, body[data-mode] .ba-grid { columns: 2; column-gap: 10px; } .ba-grid > li { margin-bottom: 14px; } }

/* Gallery tiles: square corners kept small, captions in the body face */
body[data-mode] .gallery-item, body[data-mode] .work-play, body[data-mode] .work-open { border-radius: 4px; }
.gallery-caption { font-family: var(--sans); font-size: var(--type-0); color: var(--p-muted); }

/* Reviews: the wash's second navy field */
body[data-mode="auto"] .reviews { background: var(--deep); color: var(--on-deep); }
body[data-mode="auto"] .reviews main h2, body[data-mode="auto"] .reviews h2 { color: var(--text-on-dark); }
body[data-mode="auto"] .review-score, body[data-mode="auto"] .review-score strong, body[data-mode="auto"] .review-score > span { color: var(--text-on-dark); }
body[data-mode="auto"] .review-score small, body[data-mode="auto"] .review-foot { color: var(--on-deep-muted); }
body[data-mode="auto"] .review-foot a { color: var(--text-on-dark); }
body[data-mode="auto"] .carousel-button { border-color: var(--border-on-dark); color: var(--text-on-dark); }
body[data-mode="auto"] .carousel-button:hover:not(:disabled) { background: var(--light-overlay-10); }
body[data-mode="auto"] .review-track { scrollbar-color: var(--text-on-dark) var(--transparent); }
body[data-mode="auto"] .review-track .review-card { background: var(--deep-2); border-color: var(--transparent); color: var(--text-on-dark); }
body[data-mode="auto"] .reviews .review-card blockquote { color: var(--text-on-dark); font-family: var(--display); font-size: var(--type-2); font-weight: 600;  }
body[data-mode="auto"] .review-card footer strong, body[data-mode="auto"] .review-card footer a { color: var(--text-on-dark); }
body[data-mode="auto"] .review-card footer small { color: var(--on-deep-muted); }
body[data-mode] .review-stars { color: var(--text-muted-on-dark); }

/* Property: the work gallery is the dark field so the stone photographs carry */
body[data-mode="home"] .services { background: var(--p-paper); }
body[data-mode="home"] .service-panels-home .service-panel-trigger strong { font-family: var(--serif); font-weight: 500; }
body[data-mode="home"] .work-section { background: var(--deep); color: var(--on-deep); }
body[data-mode="home"] .work-section h2 { color: var(--on-deep); }
body[data-mode="home"] .work-section p, body[data-mode="home"] .work-section .disclosure { color: var(--on-deep-muted); }
body[data-mode="home"] .instagram { background: var(--p-soft); }
body[data-mode="home"] .approach { background: var(--p-paper); border-top: 0; }
.process-strip span { font-family: var(--serif); color: var(--p-accent); font-weight: 600; }
.process-strip strong { font-family: var(--serif); font-weight: 600; }

/* Property contact: navy band in the logo's blue */
body[data-mode="home"] .contact { background: var(--deep-2); color: var(--on-deep); border-top: 0; }
body[data-mode="home"] .contact h2 { color: var(--text-on-dark); }
body[data-mode="home"] .contact-lead, body[data-mode="home"] .contact-note, body[data-mode="home"] .contact p { color: var(--text-muted-on-dark); }
body[data-mode="home"] .contact .direct-links, body[data-mode="home"] .contact .direct-links li { border-color: var(--border-on-dark); }
body[data-mode="home"] .contact .direct-links a, body[data-mode="home"] .contact .direct-links strong { color: var(--text-on-dark); }
body[data-mode="home"] .contact .direct-links span, body[data-mode="home"] .contact .direct-links i { color: var(--text-muted-on-dark); }

/* Contact labels in sentence case */
body[data-mode] .contact .direct-links span { font-size: var(--type-small); font-weight: 500;  text-transform: none; }

/* Footer and phone bar take each business's dark colour */
body[data-mode] .site-footer { background: var(--deep); border-top: 0; color: var(--on-deep-muted); }
body[data-mode] .footer-owner, body[data-mode] .footer-inner nav a { color: var(--on-deep-muted); }
body[data-mode] .footer-inner nav a:hover { color: var(--text-on-dark); }
body[data-mode] .mobile-actions { background: var(--deep); }
body[data-mode="home"] .mobile-actions { background: var(--deep-2); }
body[data-mode] .mobile-actions a span { text-transform: none;  font-size: var(--type-small); }
body[data-mode] .mobile-actions a strong { text-transform: none;  font-size: var(--type-0); }

/* Chooser: the photographs as they are, a plain dark fade for the words, no tint */
.choice-shade, .choice-auto .choice-shade, .choice-home .choice-shade { background: linear-gradient(180deg, var(--scrim-05) 30%, var(--scrim-82) 100%); }
.choice-bg, .choice-auto .choice-video, .choice-home .choice-video { filter: none; }
.choice strong, .choice-auto strong, .choice-home strong { font-style: normal; text-transform: none;  }
.choice-auto strong { font-family: var(--display); font-weight: 600; }
.choice-home strong { font-family: var(--serif); font-weight: 600; }
.choice-no, .choice-cta {  text-transform: none; font-family: var(--sans); }
body[data-mode="home"] .hero h1 em { font-weight: inherit; }
body[data-mode] .service-panels-home .service-panel-trigger { grid-template-columns: minmax(0, 1fr) auto; }
.ba-item, body[data-mode] .ba-item { border: 1px solid var(--p-line); background: var(--surface-1); }
.ba-grid .gallery-caption { display: none; }

/* Before and after sliders, 1 Oct 2026. The after photo sits on top and is clipped from the left at --split. */
.ba-grid > li { margin: 0 0 20px; }
.ba-slider {
  --split: 50%;
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: 4px; background: var(--p-soft);
  cursor: ew-resize; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: var(--transparent);
}
.ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.ba-slider .ba-after { clip-path: inset(0 0 0 var(--split)); transition: clip-path .45s cubic-bezier(.22,.7,.2,1); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2;
  width: 2px; margin-left: -1px; background: var(--surface-1); box-shadow: 0 0 0 1px var(--shadow-soft);
  pointer-events: none; transition: left .45s cubic-bezier(.22,.7,.2,1);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--surface-1); box-shadow: 0 2px 10px var(--shadow-soft);
  transition: transform .2s ease;
}
.ba-knob::before, .ba-knob::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--p-accent); border-left: 2px solid var(--p-accent);
}
.ba-knob::before { left: 10px; transform: translateY(-50%) rotate(-45deg); }
.ba-knob::after { right: 10px; transform: translateY(-50%) rotate(135deg); }
.ba-slider:hover .ba-knob, .ba-slider[data-dragging] .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
.ba-slider[data-dragging] .ba-after, .ba-slider[data-dragging] .ba-handle { transition: none; }
.ba-tag {
  position: absolute; top: 10px; z-index: 1; padding: 4px 9px; border-radius: 3px;
  background: var(--scrim-62); color: var(--text-on-dark);
  font-weight: 600; font-size: var(--type-small); line-height: 1.2; font-family: var(--sans);  pointer-events: none;
  transition: opacity .2s ease;
}
.ba-tag-before { left: 10px; }
.ba-tag-after { right: 10px; }
.ba-slider[data-near="left"] .ba-tag-before, .ba-slider[data-near="right"] .ba-tag-after { opacity: 0; }
.ba-slider:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }
@media (max-width: 560px) {
  .ba-grid > li { margin-bottom: 10px; }
  .ba-knob { width: 30px; height: 30px; }
  .ba-knob::before { left: 7px; } .ba-knob::after { right: 7px; }
  .ba-tag { top: 6px; padding: 3px 6px; font-size: var(--type-small); }
  .ba-tag-before { left: 6px; } .ba-tag-after { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-slider .ba-after, .ba-handle, .ba-knob { transition: none; }
}

/* Portfolio pass, 1 Oct 2026: no captions in the galleries, three before/after sliders in one justified row. */
#dialog-caption:empty { display: none; }
@media (min-width: 561px) {
  body[data-mode] .work-item-wide .work-open { position: relative; display: block; height: 100%; min-height: 100%; }
  body[data-mode] .work-item-wide .work-open img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
/* Each item grows in proportion to its photo's shape, so all three end up the same height. */
.ba-grid, body[data-mode] .ba-grid { display: flex; columns: auto; gap: 12px; align-items: flex-start; }
.ba-grid > li, body[data-mode] .ba-grid > li { margin: 0; min-width: 0; }
.ba-grid > li.ba-tall { flex: 0.75 1 0; }
.ba-grid > li.ba-wide { flex: 2.17 1 0; }
@media (max-width: 760px) {
  .ba-grid, body[data-mode] .ba-grid { flex-wrap: wrap; gap: 8px; }
  .ba-grid > li.ba-wide { order: -1; flex: 1 1 100%; }
  .ba-grid > li.ba-tall { flex: 1 1 calc(50% - 4px); }
}
@media (min-width: 761px) {
  .ba-grid > li:nth-child(1) { flex-grow: .730; }
  .ba-grid > li:nth-child(2) { flex-grow: 2.171; }
  .ba-grid > li:nth-child(3) { flex-grow: .748; }
}

/* One header, one switch (2 Oct 2026). The header carries a single text lockup, "Cankaj" with a second line for the
   side that is showing, and the business switch sits on its own row directly under the header, at the top of <main>.
   Fonts, colours and the switch's own look are the existing tokens and .business-switch styles above. */
body[data-mode] .site-header .brand-lockup { display: flex; flex-direction: column; gap: 2px; max-width: none; color: var(--p-ink); text-decoration: none; }
.brand-name { font-family: var(--sans); font-size: var(--type-2); font-weight: 600; line-height: 1.1; }
.brand-line { color: var(--p-muted); font-size: var(--type-small); line-height: 1.3; }
/* Without JavaScript both businesses are shown and the switch could do nothing, so it is left out. */
html:not(.js) .side-switch-bar { display: none; }
.side-switch-bar { display: flex; justify-content: center; padding: 12px var(--pad-x); border-bottom: 1px solid var(--p-line); background: var(--p-paper); }
@media (max-width: 760px) {
  .brand-line { font-size: var(--type-small); }
}