/* ============================================================
   A.H Exterior Detailing — Wexford, Ireland
   iOS-flavoured: system type, soft "bubble" surfaces, physical
   press feedback, one dark band per page.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Brand primitives — never themed */
  --brand-ink: #0a0d12;
  --brand-blue: #1668d8;
  --brand-cream: #f4efe4;

  /* Surfaces — black, with translucent "glass" over the photo backdrop */
  --bg: #05070b;
  --bg-elevated: rgba(17, 24, 35, 0.62);
  --bg-elevated-solid: #111823;
  --bg-sunken: rgba(7, 10, 15, 0.58);
  --bg-ink: #05070b;
  --bg-ink-2: #0b1017;

  /* Translucent fills — light-on-dark now */
  --fill-1: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.1);
  --fill-3: rgba(255, 255, 255, 0.16);
  --fill-on-dark-1: rgba(255, 255, 255, 0.1);
  --fill-on-dark-2: rgba(255, 255, 255, 0.16);

  /* Text */
  --label: #eff3f8;
  --label-2: #c6d2df;
  --label-3: #8090a3;
  --label-on-dark: #ffffff;
  --label-on-dark-2: #c6d2df;

  /* Accent.
     --blue is the button FILL (always dark enough for white text).
     --blue-text is for text/icons on the page background.
     Dark mode lightens --blue-text but must NOT lighten --blue. */
  --blue: #1668d8;              /* button fill — white text reads 5.9:1 */
  --blue-press: #1257b4;
  --blue-text: #6cb2ff;         /* blue as TEXT on the dark page */
  --blue-lit: #4a9bff;
  --blue-deep: #0f4ea6;
  --blue-glow: rgba(30, 120, 240, 0.34);   /* backdrop atmosphere */
  --on-blue: #ffffff;
  --blue-wash: rgba(74, 155, 255, 0.14);
  --blue-ring: rgba(74, 155, 255, 0.55);

  /* Semantic — tuned for a dark page */
  --green-bg: rgba(32, 96, 52, 0.28); --green-text: #86e0a0;
  --red: #e0483c; --red-press: #c2382d;
  --red-bg: rgba(140, 40, 32, 0.3); --red-text: #ff9c92;
  --amber: #f0b03c;

  /* Hairlines */
  --separator: rgba(255, 255, 255, 0.1);
  --separator-opaque: #1b2431;
  --separator-on-dark: rgba(255, 255, 255, 0.11);

  /* Type — system stack, no downloads */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px;
  --r-xl: 26px; --r-2xl: 34px; --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-18: 72px; --s-24: 96px;

  /* Shadows — tight key + wide ambient */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5), 0 14px 36px -10px rgba(0,0,0,.55);
  --shadow-3: 0 10px 26px -8px rgba(0,0,0,.55), 0 34px 80px -18px rgba(0,0,0,.75);
  --shadow-thumb: 0 2px 8px rgba(0,0,0,.5);
  --shadow-blue: 0 8px 24px -6px rgba(22,104,216,.55);

  /* Blur */
  --blur-nav: saturate(180%) blur(20px);
  --blur-sheet: saturate(180%) blur(30px);

  /* Layout */
  --shell: 1100px;
  --shell-narrow: 700px;
  --gutter: clamp(20px, 5vw, 32px);
  --band-y: clamp(72px, 9vw, 132px);

  /* Motion */
  --press-in: 105ms;
  --press-out: 400ms;
  --sheet-in: 460ms;
  --sheet-out: 300ms;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.15);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* Aliases — older rules and inline styles still reference these */
  --ink: var(--bg-ink);
  --ink-2: var(--bg-ink-2);
  --cream: var(--bg);
  --paper: var(--bg-elevated);
  --tx: var(--label);
  --muted: var(--label-2);
  --rule: var(--separator);
  --rule-lt: var(--separator-on-dark);
  --steel: var(--label-on-dark-2);
  --steel-dim: var(--label-on-dark-2);
  --display: var(--font);
  --body: var(--font);
}

/* ============================================================
   Backdrop — blurred "after" photos, tinted black + blue.
   The source images are pre-generated at 96px wide, so the blur
   is almost free: upscaling does most of it and CSS only smooths
   the result. Never put body text directly on this — the
   brightest photo peaks near white even after blurring.
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg);
}
/* No runtime filter: the tiles are 96px wide and already blurred and tinted
   by tools/make-backdrops.ps1, so the browser's upscale does the rest. The
   generator caps every pixel at L=0.091, which is 6.66:1 for body text. */
.backdrop .shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.backdrop .shot.on { opacity: 1; }
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--blue-glow), transparent 62%),
    radial-gradient(140% 100% at 50% 50%, transparent 30%, rgba(3,5,9,.55));
}
/* Fine grain stops the big blurred areas from banding */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) {
  .backdrop .shot { display: none; }
  .grain { display: none; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--label);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* position:fixed is what actually stops iOS Safari scrolling the page behind
   a sheet; JS supplies the `top` offset and restores scroll on close. */
body.menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.shell-narrow { max-width: var(--shell-narrow); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: 1.24rem; letter-spacing: -0.02em; line-height: 1.25; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }
p + p { margin-top: 0.85em; }

.lead {
  font-size: clamp(1.06rem, 1.6vw, 1.28rem);
  color: var(--label-2);
  max-width: 34ch;
  letter-spacing: -0.014em;
  line-height: 1.45;
}
.lead.on-dark { color: var(--label-on-dark-2); }

.eyebrow {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blue-text);
  margin-bottom: 10px;
}
.eyebrow.on-dark { color: var(--blue-lit); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: background var(--press-out) var(--ease-out),
              transform var(--press-out) var(--ease-spring),
              filter var(--press-out) var(--ease-out),
              opacity 140ms linear;
}
.btn:hover { background: var(--blue-press); }
.btn.outline {
  background: var(--fill-2);
  color: var(--label);
  box-shadow: inset 0 0 0 1px var(--separator);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn.outline:hover { background: var(--fill-3); }
/* Only genuinely dark surfaces get the light-on-dark outline button.
   The hero is a light surface now, so it must not be included here. */
.band.dark .btn.outline, .cta-card .btn.outline {
  background: var(--fill-on-dark-1);
  color: #fff;
}
.band.dark .btn.outline:hover, .cta-card .btn.outline:hover { background: var(--fill-on-dark-2); }
/* This is where the remaining white lives: the high-emphasis light button. */
.btn.dark { background: #f2f5f9; color: #0a0f16; box-shadow: var(--shadow-2); }
.btn.dark:hover { background: #ffffff; }
.btn.neutral { background: var(--fill-2); color: var(--label); box-shadow: none; }
.btn.neutral:hover { background: var(--fill-3); }
.btn.danger { background: var(--red); box-shadow: none; }
.btn.danger:hover { background: var(--red-press); }
.btn.small { min-height: 40px; padding: 9px 18px; font-size: 0.95rem; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* Solid, not the 22%-alpha ring — that was far too faint to see. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Cards clip their own children, so the ring goes on the card instead */
.work-card:has(.card-open:focus-visible),
.wash-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.card-open:focus-visible { outline: none; }

/* ---------- Masthead — frosted ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 7, 11, 0.86);      /* opaque-ish fallback first */
  border-bottom: 1px solid var(--separator);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead {
    background: rgba(5, 7, 11, 0.52);
    -webkit-backdrop-filter: var(--blur-nav);
    backdrop-filter: var(--blur-nav);
  }
}
.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand-fallback { line-height: 1.15; }
.brand-fallback .n { font-size: 1.09rem; font-weight: 700; letter-spacing: -0.024em; }
.brand-fallback .n em { font-style: normal; color: var(--blue-text); }
.brand-fallback .s {
  display: block;
  font-size: 0.76rem;
  color: var(--label-3);
  letter-spacing: -0.006em;
  margin-top: 1px;
}
.mast-right { display: flex; align-items: center; gap: 10px; }
.mast-phone {
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--blue-text);
  padding: 10px 8px;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--label);
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--press-out) var(--ease-out),
              transform var(--press-out) var(--ease-spring),
              filter var(--press-out) var(--ease-out);
}
.menu-btn:hover { background: var(--fill-3); }
.menu-btn .bars { display: inline-block; width: 17px; }
.menu-btn .bars i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; margin: 4px 0; }

/* ---------- Sheet menu ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 11, 16, 0.4);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly on open (so the panel is focusable straight
     away) and only on close is it delayed until the fade has finished. */
  transition: opacity var(--sheet-out) var(--ease-out),
              visibility 0s linear var(--sheet-out);
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--sheet-in) var(--ease-out), visibility 0s linear 0s;
}
.menu-panel {
  position: absolute;
  left: 12px; right: 12px; top: 12px; bottom: 12px;
  margin-left: auto;
  width: min(420px, calc(100% - 24px));
  background: rgba(12, 17, 25, 0.94);    /* opaque fallback first */
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-3);
  padding: 18px 22px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 14px, 0) scale(0.97);
  opacity: 0;
  transition: transform var(--sheet-out) var(--ease-ios), opacity var(--sheet-out) linear;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .menu-panel {
    background: rgba(12, 17, 25, 0.72);
    -webkit-backdrop-filter: var(--blur-sheet);
    backdrop-filter: var(--blur-sheet);
  }
}
.menu-overlay.open .menu-panel {
  transform: none;
  opacity: 1;
  transition-duration: var(--sheet-in);
  transition-timing-function: var(--ease-ios);
}
.menu-grabber {
  width: 38px; height: 5px; border-radius: 3px;
  background: var(--fill-3);
  margin: 0 auto 6px;
  display: none;
}
.menu-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--fill-2);
  color: var(--label-2);
  cursor: pointer;
  transition: transform var(--press-out) var(--ease-spring), background 160ms;
}
.menu-close:hover { background: var(--fill-3); }
.menu-close svg { width: 15px; height: 15px; }

.menu-nav { display: flex; flex-direction: column; }
.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 14px;
  margin: 0 -14px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  transition: background var(--press-out) var(--ease-out);
}
.menu-link + .menu-link { box-shadow: 0 -1px 0 var(--separator); }
.menu-link:hover { background: var(--fill-1); }
.menu-link .chev { width: 16px; height: 16px; color: var(--label-3); }
.menu-link.current { color: var(--blue-text); }
.menu-foot { margin-top: auto; padding-top: 26px; }
.menu-foot h4 { color: var(--label-3); font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; }
.menu-foot a { display: block; color: var(--blue-text); text-decoration: none; font-weight: 500; padding: 7px 0; }
.menu-foot p { color: var(--label-2); font-size: 0.95rem; margin-top: 4px; }
.menu-foot .btn { margin-top: 16px; width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: clamp(44px, 7vw, 78px) 0 0; text-align: center; }
.hero h1 { max-width: 15ch; margin: 0 auto; }
.hero h1 .lit {
  background: linear-gradient(180deg, var(--blue-lit), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { margin: 18px auto 28px; max-width: 40ch; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  background: var(--blue-wash);
  color: var(--blue-text);
  font-size: 0.88rem;
  font-weight: 600;
}
.hero-place svg { width: 14px; height: 14px; }

.hero-media { margin-top: clamp(38px, 6vw, 64px); padding: 0 var(--gutter); }
.hero-media > div {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--bg-sunken);
}
/* height:auto is required — the img's height="900" attribute is a
   presentational hint that otherwise beats aspect-ratio. */
.hero-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.hero-credentials { padding: clamp(26px, 4vw, 40px) 0 0; }
.hero-credentials .shell { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cred .t {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--fill-1);
  color: var(--label-2);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Bands ---------- */
.band { padding: var(--band-y) 0; }
.band.tight { padding: clamp(40px, 5vw, 64px) 0 clamp(30px, 4vw, 44px); }
.band.sunken { background: var(--bg-sunken); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* On a black page a "dark band" can't stand out by being darker, so it
   becomes a raised glass slab with a blue edge instead. */
.band.dark {
  background: rgba(13, 19, 28, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--separator);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-3);
  border-radius: var(--r-2xl);
  margin: 0 var(--gutter);
}
.band.dark h2, .band.dark h3 { color: #fff; }

.band-head { max-width: 40ch; margin-bottom: var(--s-12); }
.split-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: var(--s-12);
}
.split-head > div { max-width: 46ch; }
.split-head .lead { margin-top: 10px; }

/* ---------- Services ---------- */
.svc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc {
  background: var(--fill-on-dark-1);
  border-radius: var(--r-xl);
  padding: 26px 24px 28px;
}
.svc h3 { margin-bottom: 6px; }
.svc p { color: var(--label-on-dark-2); font-size: 0.98rem; }
.band:not(.dark) .svc { background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.band:not(.dark) .svc p { color: var(--label-2); }

/* ---------- Powerwash cards (home) ---------- */
.wash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wash-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-sunken);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform var(--press-out) var(--ease-spring);
}
.wash-card > img.clean { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wash-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wash-card canvas.wash-water { pointer-events: none; }
.wash-stamp {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(11, 14, 19, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wash-stamp.after { background: color-mix(in srgb, var(--blue) 82%, transparent); }
.wash-replay {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--brand-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 260ms var(--ease-out), transform var(--press-out) var(--ease-spring);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wash-card.done .wash-replay { opacity: 1; }
.wash-replay svg { width: 13px; height: 13px; }
.wash-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 44px 16px 15px;
  background: linear-gradient(transparent, rgba(6, 9, 13, 0.9));
  color: #fff;
  pointer-events: none;
}
.wash-card figcaption .t { font-weight: 600; font-size: 0.96rem; line-height: 1.3; }
.wash-card figcaption .c { color: #b9d6ff; font-size: 0.8rem; margin-top: 2px; }

/* ---------- Work gallery ---------- */
/* iOS segmented control */
.filters {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--s-8);
  background: var(--fill-1);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--label-2);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 260ms var(--ease-out), color 200ms,
              transform var(--press-out) var(--ease-spring);
}
.chip:hover { color: var(--label); }
.chip.on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: var(--shadow-thumb), inset 0 1px 0 rgba(255,255,255,.14);
}

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--bg-sunken);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-1);
  transition: transform var(--press-out) var(--ease-spring);
}
.work-card.plain img { width: 100%; height: 100%; object-fit: cover; }
.card-open {
  position: absolute; inset: 0; z-index: 5;
  background: none; border: 0; cursor: zoom-in;
}
.work-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 44px 16px 15px;
  background: linear-gradient(transparent, rgba(6, 9, 13, 0.9));
  color: #fff;
  pointer-events: none;
}
.work-card figcaption .t { font-weight: 600; font-size: 0.96rem; line-height: 1.3; }
.work-card figcaption .c { color: #b9d6ff; font-size: 0.8rem; margin-top: 2px; }

/* scroll-coupled wipe (kept for /work) */
.pull > img.after { width: 100%; height: 100%; object-fit: cover; }
.pull .before-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 0); will-change: clip-path, transform; }
.pull .before-layer img { width: 100%; height: 100%; object-fit: cover; }
.pull .seam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(transparent, rgba(255,255,255,.95) 12%, rgba(255,255,255,.95) 88%, transparent);
  box-shadow: 0 0 22px 4px rgba(74, 155, 255, 0.5);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2;
}
.pull.running .seam { opacity: 1; }
.pull .stamp {
  position: absolute; top: 12px; z-index: 3;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 600; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pull .stamp-b { left: 12px; background: rgba(11,14,19,.55); color: #fff; }
.pull .stamp-a { right: 12px; background: color-mix(in srgb, var(--blue) 82%, transparent); color: #fff; }

.empty-state {
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
  padding: 58px 30px;
  text-align: center;
  color: var(--label-2);
}
.empty-state h3 { color: var(--label); margin-bottom: 8px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 9, 13, 0.92);
  display: none; align-items: center; justify-content: center;
  padding: 30px; cursor: zoom-out;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1000px, 94vw); max-height: 84vh; border-radius: var(--r-lg); }
.lightbox .lb-cap {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center; color: #c9d2de; font-size: 0.94rem;
}
.lightbox .lb-close {
  position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 0; border-radius: 50%;
  color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}

/* ---------- Reviews ---------- */
.review-top {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bg-elevated);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 22px 26px;
  margin-bottom: var(--s-8);
}
.review-top .score { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stars { display: inline-flex; gap: 3px; color: var(--amber); }
.stars svg { width: 18px; height: 18px; }
.stars .off { color: var(--fill-3); }

.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.review-card {
  background: var(--bg-elevated);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 26px;
}
.review-card .text { margin: 12px 0 14px; font-size: 1.04rem; letter-spacing: -0.014em; }
.review-card .who { font-weight: 600; font-size: 0.96rem; }
.review-card .meta { color: var(--label-3); font-size: 0.86rem; }

.star-input { display: flex; gap: 6px; }
.star-input button {
  background: none; border: 0; cursor: pointer;
  padding: 7px; min-width: 44px; min-height: 44px;
  color: var(--fill-3);
  transition: transform var(--press-out) var(--ease-spring), color 160ms;
}
.star-input button svg { width: 30px; height: 30px; }
.star-input button.on { color: var(--amber); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-elevated);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2);
  padding: clamp(24px, 4vw, 38px);
}
.band.dark .form-card { background: var(--bg-ink-2); box-shadow: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--label); }
.band.dark .field label { color: #fff; }
.field label .opt { color: var(--label-3); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 17px;                 /* below 16px iOS zooms the page on focus */
  color: var(--label);
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-ring);
  background: var(--bg-elevated);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input[type="file"] { padding: 10px; background: var(--fill-1); }
.field input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600;
  border: 0; border-radius: var(--r-pill);
  background: var(--fill-2); color: var(--label);
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
.form-note { color: var(--label-3); font-size: 0.88rem; margin-top: 14px; }
.form-msg { display: none; margin-top: 16px; padding: 14px 17px; border-radius: var(--r-md); font-size: 0.97rem; }
.form-msg.ok { display: block; background: var(--green-bg); color: var(--green-text); }
.form-msg.err { display: block; background: var(--red-bg); color: var(--red-text); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.contact-item {
  display: flex; gap: 15px;
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
}
.contact-item .ic { width: 21px; height: 21px; color: var(--blue); flex: none; margin-top: 3px; }
.contact-item h3 { font-size: 0.98rem; margin-bottom: 2px; }
.contact-item p, .contact-item a { color: var(--label-2); font-size: 0.97rem; text-decoration: none; word-break: break-word; }
.contact-item a { color: var(--blue-text); font-weight: 500; }

/* ---------- CTA ---------- */
.cta { padding: 0 0 var(--band-y); }
.cta-card {
  background: linear-gradient(160deg, var(--blue), var(--blue-deep));
  color: #fff;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-3);
  padding: clamp(38px, 6vw, 62px) clamp(24px, 5vw, 54px);
  text-align: center;
}
.cta-card h2 { color: #fff; }
.cta-card p { opacity: 0.92; margin: 12px auto 26px; max-width: 44ch; }
/* Sits on the blue gradient card — both values fixed so dark mode can't
   re-theme the label into low contrast against the white fill. */
.cta-card .btn.dark { background: #fff; color: #0a5fc4; box-shadow: none; }
.cta-card .btn.dark:hover { background: #eaf1ff; color: #0a5fc4; }

.towns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-10); }
.towns span {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--fill-1);
  color: var(--label-2);
  font-size: 0.9rem;
  font-weight: 500;
}
.towns-note { text-align: center; color: var(--label-3); font-size: 0.92rem; margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-sunken); color: var(--label-2); }
.site-footer .shell { padding: var(--s-14) var(--gutter) var(--s-6); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 38px; padding-bottom: var(--s-10); }
.site-footer h4 { color: var(--label); font-size: 0.92rem; margin-bottom: 13px; }
.site-footer p { font-size: 0.94rem; max-width: 42ch; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--label-2); text-decoration: none; font-size: 0.94rem; }
.site-footer a:hover { color: var(--blue-text); }
.foot-brand img { height: 54px; width: auto; margin-bottom: 14px; }
.foot-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid var(--separator);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.85rem; color: var(--label-3);
}
.foot-bottom a { font-size: 0.85rem; }

/* ---------- Scroll reveal ---------- */
/* Only ARMED elements start hidden, and only JS arms them — so if the script
   fails to load the content is still visible rather than a blank page. */
.rise-armed, .reveal { opacity: 0; transform: translateY(18px); }
.reveal-fade { opacity: 0; }
.rise-armed.in, .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-ios);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal-fade.in { opacity: 1; transition: opacity 620ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }

/* ---------- Press feedback ---------- */
.is-pressed {
  transform: scale(var(--press-scale, 0.965));
  filter: brightness(var(--press-dim, 0.94));
  opacity: var(--press-alpha, 1);
  transition-duration: var(--press-in);
  transition-timing-function: var(--ease-out);
}
.btn:active, .menu-btn:active, .chip:active,
.star-input button:active, .wash-replay:active {
  transform: scale(var(--press-scale, 0.965));
  transition-duration: var(--press-in);
}
/* Scale by roughly equal pixel travel, so bigger things move less */
.btn { --press-scale: .965; --press-dim: .94; }
.btn.small { --press-scale: .955; }
.menu-btn { --press-scale: .955; }
.chip { --press-scale: .94; --press-dim: 1; }
.work-card, .wash-card { --press-scale: .982; --press-dim: .93; }
.wash-replay { --press-scale: .9; --press-dim: 1; }
.star-input button { --press-scale: .86; --press-dim: 1; }
.menu-close, .lb-close, .admin-work-card .del { --press-scale: .88; --press-dim: 1; }
.menu-link { --press-scale: 1; --press-dim: 1; }
.menu-link.is-pressed { background: var(--fill-2); }
/* Inline text links dim rather than shrink — but never swallow a .btn */
.site-footer a:not(.btn), .menu-foot a:not(.btn), .contact-item a:not(.btn),
.mast-phone, .brand {
  --press-scale: 1; --press-dim: 1; --press-alpha: .5;
}

/* ---------- Admin ---------- */
.admin-body { background: var(--bg); min-height: 100vh; }
.admin-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--fill-1);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-panel { display: none; }
.admin-panel.on { display: block; }
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-item {
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.admin-item.handled { opacity: 0.55; }
.admin-item .info { flex: 1; min-width: 240px; }
.admin-item .info strong { font-size: 1.04rem; }
.admin-item .info p { color: var(--label-2); font-size: 0.92rem; margin-top: 3px; }
.admin-item .actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.badge {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--fill-2); color: var(--label-2);
  margin-left: 8px;
}
.badge.new { background: var(--blue); color: #fff; }
.badge.pending { background: var(--amber); color: #fff; }
.admin-work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.admin-work-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
}
.admin-work-card img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.admin-work-card .del {
  position: absolute; top: 8px; right: 8px;
  background: rgba(6,9,13,.72); color: #fff; border: 0;
  border-radius: var(--r-pill); padding: 10px 14px; min-height: 40px;
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.admin-work-card .del:hover { background: var(--red); }
.admin-work-card .ba-flag {
  position: absolute; top: 8px; left: 8px;
  background: var(--blue); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.admin-work-card .cap { padding: 10px 12px; font-size: 0.86rem; }
.admin-work-card .cap .c { color: var(--label-3); font-size: 0.78rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .svc-list, .wash-grid, .work-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-work-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .mast-phone { display: none; }
  .brand-fallback .s { display: none; }
  .band.dark { margin: 0; border-radius: 0; }
  .hero { text-align: left; }
  .hero h1, .hero .lead { margin-left: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-credentials .shell { justify-content: flex-start; }
  .hero-media img { aspect-ratio: 4 / 3; }
  .svc-list, .wash-grid, .work-grid, .reviews-grid, .form-grid, .contact-grid { grid-template-columns: 1fr; }
  .admin-work-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }

  /* menu becomes a bottom sheet */
  .menu-panel {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding: 10px 22px calc(26px + env(safe-area-inset-bottom));
    transform: translate3d(0, 100%, 0);
  }
  .menu-grabber { display: block; }
  /* Keep the Close button on phones. It used to be hidden here, leaving
     drag-to-dismiss as the only affordance — undiscoverable, and it also
     broke the focus trap because the hidden button stayed in the tab list. */
  .menu-head { display: flex; margin-top: 2px; }
  .menu-panel.dragging { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal, .reveal-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .is-pressed { transform: none; }
  .menu-panel, .menu-overlay { transition-duration: 1ms; }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Glass surfaces + backdrop legibility (appended last so these
   win over the earlier component rules).
   ============================================================ */
:root { color-scheme: dark; }

/* Every content surface is dark glass. Text must live INSIDE one of
   these — never directly on the photo backdrop. */
.form-card,
.review-card,
.contact-item,
.empty-state,
.svc,
.admin-item,
.admin-work-card,
.review-top {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-2);
}
/* Deliberately NO backdrop-filter on cards. The backdrop is already blurred
   at source, so there is nothing sharp behind a card left to blur — it would
   cost a per-frame blur pass per card for an identical picture. Only the two
   surfaces that pass over real CONTENT keep it: the masthead and the sheet. */
/* No backdrop-filter support: go opaque rather than muddy */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .form-card, .review-card, .contact-item, .empty-state,
  .svc, .admin-item, .admin-work-card, .review-top,
  .menu-panel, .masthead, .band.dark {
    background: var(--bg-elevated-solid);
  }
}

.band:not(.dark) .svc { background: var(--bg-elevated); }
.band:not(.dark) .svc p { color: var(--label-2); }
.band.dark .svc {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

/* Photos need a ring, or they dissolve into a photographic backdrop */
.work-card, .wash-card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    var(--shadow-3);
  background: #0a0e14;
}

/* Form fields on glass */
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.05);
  border-color: var(--separator);
  color: var(--label);
}
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(255,255,255,.09);
  border-color: var(--blue-lit);
  box-shadow: 0 0 0 4px var(--blue-ring);
}
.field select option { background: #0e141d; color: var(--label); }
.field input[type="file"] { background: rgba(255,255,255,.05); }
.field input[type="file"]::file-selector-button {
  background: var(--fill-2); color: var(--label);
}

/* Footer + sunken bands */
.site-footer { background: rgba(4,6,9,.72); border-top: 1px solid var(--separator); }
@supports (backdrop-filter: blur(1px)) {
  .site-footer { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}

/* The blue CTA keeps its saturated fill — it is the one loud thing */
.cta-card {
  background: linear-gradient(160deg, #2079ee, var(--blue-deep));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), var(--shadow-3);
}

/* Hero copy sits closest to the raw backdrop, so it gets its own soft
   scrim. Guarantees contrast even behind the brightest sky photo. */
.hero { position: relative; }
/* Everything in the hero sits ABOVE the text scrim — otherwise ::before
   paints over the hero photo and blacks it out. */
.hero > .shell,
.hero > .hero-media,
.hero > .hero-credentials { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6%;
  height: 118%;
  background: radial-gradient(58% 52% at 50% 42%, rgba(5,7,11,.82), rgba(5,7,11,.45) 62%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.hero-place { background: rgba(74,155,255,.16); color: var(--blue-lit); }
.cred .t { background: rgba(255,255,255,.07); color: var(--label-2); }

/* Chips / segmented control track */
.filters, .admin-tabs { background: rgba(255,255,255,.06); }
.towns span { background: rgba(255,255,255,.06); color: var(--label-2); }

/* Stars and status colours already re-token above; the lightbox goes darker */
.lightbox { background: rgba(3,5,8,.94); }

/* Focus ring must clear both photo and glass */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #8cc4ff;
  outline-offset: 2px;
}
.work-card:has(.card-open:focus-visible), .wash-card:focus-visible {
  outline: 3px solid #8cc4ff;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .backdrop, .grain { display: none; }
  .form-card, .review-card, .contact-item, .svc, .work-card, .wash-card,
  .menu-panel, .masthead { border: 1px solid CanvasText; background: Canvas; }
}

/* ============================================================
   Contrast corrections measured against the baked backdrop.
   ============================================================ */

/* White on amber was 1.86:1. The badge takes dark text instead. */
.badge.pending { background: var(--amber); color: #17120a; }
.badge.new { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }

/* White on #e0483c was ~4.0:1 — under AA for the admin Delete button. */
:root { --red: #d7362b; --red-press: #b22b1e; }

/* ".btn.dark" appears twice on the home page, so a white pill there fights
   the "less white" brief and duplicates the CTA's emphasis. Glass instead —
   white is reserved for the single CTA pill. */
.btn.dark {
  background: var(--fill-3);
  color: var(--label);
  box-shadow: inset 0 0 0 1px var(--separator);
}
.btn.dark:hover { background: rgba(255,255,255,.22); }
/* the one real white button on the site */
.cta-card .btn.dark { background: #fff; color: #0a3f86; box-shadow: none; }
.cta-card .btn.dark:hover { background: #eaf2ff; color: #0a3f86; }

/* A translucent thumb on a translucent track both move with the photo behind
   them, so the selected filter never reads. Opaque track + blue thumb. */
.filters, .admin-tabs { background: #0a121e; }
.chip { color: var(--label-2); }
.chip.on {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-thumb);
}

/* Press should BRIGHTEN on a dark UI — darkening is invisible here. */
.is-pressed { filter: brightness(var(--press-dim, 1.18)); }
.btn { --press-dim: 1.16; }
.work-card, .wash-card { --press-dim: 1.12; }
.menu-link.is-pressed { background: var(--fill-2); }

/* --label-3 is the one text token that does not clear AA on the backdrop,
   so it is confined to surfaces. These two sat on the backdrop. */
.towns-note { color: var(--label-2); }
.brand-fallback .s { color: var(--label-2); }

/* Caption gradients sit over photos that can be blown out at the top. */
.work-card figcaption, .wash-card figcaption {
  background: linear-gradient(transparent, rgba(4,7,12,.72) 38%, rgba(4,7,12,.95));
}

/* The blue CTA's lightest gradient stop carried white at only 3.3:1. */
.cta-card { background: linear-gradient(160deg, #1470e6, var(--blue-deep)); }

/* Stars: differentiate by shape as well as colour, so the rating survives
   greyscale and forced-colors. */
.stars .off { color: rgba(255,255,255,.34); }
.star-input button { color: rgba(255,255,255,.34); }

/* .menu-foot a (0,1,1) was beating .btn (0,1,0) and painting the sheet's
   CTA label blue-on-blue at 2.36:1. Link colours must never claim a button. */
.menu-foot a:not(.btn) { color: var(--blue-text); }
.menu-foot a.btn { color: #fff; }
.site-footer a:not(.btn), .contact-item a:not(.btn) { color: var(--blue-text); }

/* The eyebrow can sit on the raw backdrop, where --blue-text is only 3.2:1.
   A paler blue keeps the accent and clears AA at 4.6:1. */
.eyebrow, .eyebrow.on-dark { color: #a8d4ff; }

/* Trim the remaining redundant blur passes. Only the masthead and the sheet
   genuinely pass over scrolling content; everything else sits on a backdrop
   that is already blurred, so the blur buys nothing and costs a pass. */
.btn.outline,
.wash-stamp, .wash-replay, .pull .stamp,
.band.sunken, .band.dark,
.site-footer,
.admin-work-card .del,
.lightbox {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* .menu-foot a (0,1,1) also beat .btn's display:inline-flex, leaving the
   sheet's CTA label left-aligned. Restore the button's own layout so it
   centres like every other button. */
.menu-foot a.btn {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: 18px;
}

/* ---------- Replay button on before/after gallery cards ---------- */
.pull-replay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: #0a0f16;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background 160ms, transform var(--press-out) var(--ease-spring);
}
.pull-replay:hover { background: #fff; }
.pull-replay svg { width: 14px; height: 14px; }
.pull-replay { --press-scale: .9; --press-dim: 1; }

/* keep the caption clear of the button */
.work-card.pull figcaption { padding-right: 118px; }

@media (max-width: 700px) {
  .pull-replay { right: 8px; bottom: 8px; }
  .work-card.pull figcaption { padding-right: 112px; }
}

/* A neutral "next step" state — not a failure. Used when the booking form
   hands off to the customer's own mail app. */
.form-msg.step {
  display: block;
  background: var(--blue-wash);
  color: var(--label);
  box-shadow: inset 0 0 0 1px var(--blue-ring);
}