/* ==========================================================================
   Crystal Clear Cleans — design system
   Palette derived from the logo mark #68BEAC (oklch 0.742 0.088 178.6).
   Every brand step below is checked for WCAG AA against its usual background.
   ========================================================================== */

/* ---------- Fonts (self-hosted: no third-party request, no GDPR exposure) -- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }

/* Stand-in shown until Poppins arrives. Poppins runs ~11% wider than Arial
   (~5% at 600), so an unadjusted fallback wraps differently and the page jumps
   when the real font swaps in. These faces scale Arial to Poppins' widths and
   vertical metrics (ascent 1.05, descent .35, gap .1) so the swap moves nothing. */
@font-face { font-family: 'Poppins Fallback'; font-weight: 300 500;
  src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
  size-adjust: 111%; ascent-override: 94.6%; descent-override: 31.5%; line-gap-override: 9%; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 600 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Roboto Bold'), local('Liberation Sans Bold');
  size-adjust: 105%; ascent-override: 100%; descent-override: 33.3%; line-gap-override: 9.5%; }

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Brand ramp, logo hue 178.6°. Contrast noted against the stated ground. */
  --brand-50:  #e8faf5;
  --brand-100: #d0f5eb;
  --brand-200: #a5e7d8;
  --brand-300: #7cd4c1;  /* 9.5:1 on --ink — dark-section accent */
  --brand-400: #60bdaa;
  --brand-500: #36a08d;
  --brand-600: #188372;  /* 4.64:1 white-on-brand — buttons (AA normal text) */
  --brand-700: #046a5b;  /* 6.53:1 on white — links, hover */
  --brand-800: #045145;
  --brand-logo: #68beac; /* the logo mark exactly; decorative use only */

  --ink:        #1c1c1e;
  --ink-2:      #45454a;
  --ink-3:      #55555c;
  --ink-4:      #6b6b73;  /* 5.3:1 on white — smallest safe body grey */
  --ink-dark-2: #b4b4bb;
  --ink-dark-3: #9a9aa2;

  --surface:     #ffffff;
  --surface-2:   #f5f5f7;
  --surface-3:   #f0f0f3;
  --line:        #ececee;
  --star:        #b8860b;

  --wrap: 1180px;
  --gutter: 26px;
  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 30px;
  --r-pill: 999px;

  --shadow-card: 0 10px 24px -18px rgba(0,0,0,.3);
  --shadow-float: 0 20px 50px -28px rgba(0,0,0,.28);
  --ease: .16s ease-out;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }
::selection { background: var(--brand-100); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-size: 15px; font-weight: 500; transition: top var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout -------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block-start: 110px; }
.section-tight { padding-block-start: 80px; }
@media (max-width: 700px) { .section { padding-block-start: 76px; } }

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}

/* ---------- Type ---------------------------------------------------------- */
.eyebrow { font-size: 13px; font-weight: 500; color: var(--brand-700); margin-bottom: 14px; }
.h1 { font-size: clamp(40px, 6.6vw, 82px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.025em; }
.lede { font-size: clamp(17px, 2.2vw, 23px); font-weight: 300; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.body { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.section-head { text-align: center; max-width: 30em; margin: 0 auto 48px; }
.section-head .body { font-size: 18px; line-height: 1.6; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500;
  padding: 15px 30px; border-radius: var(--r-pill); text-align: center;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease), color var(--ease);
}
.btn-primary { background: var(--brand-600); color: #fff; }
.btn-primary:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(4,106,91,.5); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--ink); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0,0,0,.28); }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font-size: 16px; font-weight: 500; color: var(--brand-700); }
.btn-link:hover { gap: 12px; }
.btn-link .icon { font-size: 19px; transition: transform var(--ease); }

/* ---------- Top strip ----------------------------------------------------- */
/* Scrolls away with the page; only the header below it is sticky, so the 62px
   sticky offsets in guide.css still hold. */
.topbar { background: var(--ink); color: rgba(255,255,255,.82); font-size: 12.5px; }
.topbar__inner { display: flex; align-items: center; gap: 28px; min-height: 36px; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item .icon { font-size: 15px; color: var(--brand-300); flex: none; }
.topbar__hours { margin-left: auto; }
.topbar__phone { color: #fff; font-weight: 500; }
.topbar__phone:hover { color: var(--brand-300); }

/* ---------- Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(0,0,0,.35); }
.site-header__inner { display: flex; align-items: center; gap: 30px; height: 62px; }
.brand { display: flex; align-items: center; min-height: 44px; gap: 10px; flex: none; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { height: 34px; width: auto; }
.nav { margin-left: auto; align-self: stretch; display: flex; font-size: 14px; }
.nav__list { display: flex; align-items: stretch; gap: 26px; margin: 0; padding: 0; list-style: none; }
/* Full header height, so the pointer can travel from a link down into its
   panel without leaving the item and closing it. */
.nav__item { display: flex; align-items: center; }
.nav__link { position: relative; color: var(--ink-2); }
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--ink); font-weight: 500; }
.nav__link[aria-current="page"]::after, .nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--brand-500);
}
.nav__more {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px;
  margin-left: 1px; padding: 0; background: none; border: 0; color: var(--ink-4); cursor: pointer;
}
.nav__more .icon { font-size: 15px; transition: transform var(--ease); }
.nav__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__drawer-actions { display: none; }
.header-cta { flex: none; }
.nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: 0; padding: 8px; margin-left: auto; cursor: pointer; color: var(--ink); }
.nav-toggle .icon { font-size: 26px; }

/* ---------- Header menus (desktop panels) --------------------------------- */
.nav-panel { display: none; }
.nav-panel ul { margin: 0; padding: 0; list-style: none; }
.nav-panel__aside p { color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.nav-panel__aside .nav-panel__kicker { color: var(--ink); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.nav-panel__aside .btn { margin-top: 18px; }
.nav-panel__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 500; color: var(--brand-700); }
.nav-panel__all .icon { font-size: 16px; transition: transform var(--ease); }
.nav-panel__all:hover .icon { transform: translateX(3px); }

.nav-card { display: flex; gap: 14px; padding: 14px; border-radius: 14px; color: var(--ink); transition: background var(--ease); }
.nav-card:hover { background: var(--surface-2); color: var(--ink); }
.nav-card__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-50); color: var(--brand-700); transition: background var(--ease), color var(--ease);
}
.nav-card__icon .icon { font-size: 21px; }
.nav-card:hover .nav-card__icon { background: var(--brand-600); color: #fff; }
.nav-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-card__title { font-weight: 500; font-size: 14.5px; }
.nav-card__desc {
  color: var(--ink-4); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.nav-areas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px 32px; }
.nav-areas__borough { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 0 12px 8px; }
.nav-areas__col:first-child ul { columns: 2; column-gap: 8px; }
.nav-areas a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--ink); break-inside: avoid; }
.nav-areas a:hover { background: var(--surface-2); color: var(--ink); }
.nav-areas a .icon { font-size: 16px; color: var(--brand-500); flex: none; }

.nav-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.nav-guide { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 0 14px 14px 0; color: var(--ink); border-left: 2px solid var(--brand-200); transition: background var(--ease), border-color var(--ease); }
.nav-guide:hover { background: var(--surface-2); border-color: var(--brand-600); color: var(--ink); }
.nav-guide__title { font-weight: 500; font-size: 14.5px; }
.nav-guide__desc { color: var(--ink-4); font-size: 13px; }

@media (min-width: 861px) {
  .nav-panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(0,0,0,.3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    /* The delay on close forgives a pointer that clips the edge on its way in. */
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
  }
  .nav-panel__inner { display: grid; grid-template-columns: 1fr 260px; gap: 40px; padding-top: 26px; padding-bottom: 30px; }
  .nav-panel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
  .nav-panel__aside { padding: 24px; border-radius: var(--r-sm); background: var(--surface-2); align-self: start; }
  .nav__item--menu.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (min-width: 861px) and (hover: hover) {
  .nav__item--menu:hover .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__item--menu:hover .nav__more .icon { transform: rotate(180deg); }
}
@media (max-width: 1060px) and (min-width: 861px) {
  .topbar__hours { display: none; }
  .topbar__phone { margin-left: auto; }
  .nav__list { gap: 18px; }
  .nav-panel__inner { grid-template-columns: 1fr 220px; gap: 28px; }
}

/* ---------- Mobile drawer ------------------------------------------------- */
@media (max-width: 860px) {
  .topbar { display: none; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 62px 0 auto; margin: 0; flex-direction: column;
    max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px;
    box-shadow: 0 20px 40px -30px rgba(0,0,0,.4);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav__link { flex: 1; padding: 15px 0; font-size: 17px; }
  .nav__link[aria-current="page"]::after, .nav__link.is-active::after { display: none; }
  .nav__more { width: 44px; height: 44px; margin-right: -10px; color: var(--ink-2); }
  .nav__more .icon { font-size: 20px; }
  .nav__item--menu.is-open .nav-panel { display: block; flex-basis: 100%; padding-bottom: 14px; }
  .nav-panel__inner { padding: 0; }
  .nav-card { padding: 9px 4px; gap: 12px; align-items: center; }
  .nav-card__icon { width: 34px; height: 34px; border-radius: 10px; }
  .nav-card__icon .icon { font-size: 18px; }
  .nav-card__desc { display: none; }
  .nav-areas { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .nav-areas__col:first-child { grid-column: 1 / -1; }
  .nav-areas__borough { padding: 6px 4px; }
  .nav-areas a { padding: 9px 4px; }
  .nav-guides { grid-template-columns: 1fr; }
  .nav-guide { padding: 9px 12px; border-radius: 0 10px 10px 0; }
  .nav-panel__aside p, .nav-panel__aside .btn { display: none; }
  .nav-panel__aside .nav-panel__all { padding-left: 4px; }
  .nav__drawer-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .nav__drawer-actions .btn-light { box-shadow: inset 0 0 0 1px var(--line); }
  .header-cta { display: none; }
}
/* Brand + a 44px toggle overflow 320px; let the toggle's padding sit in the gutter. */
@media (max-width: 359px) {
  .site-header__inner { gap: 8px; }
  .nav-toggle { margin-right: -19px; }
}

/* ---------- Hero ---------------------------------------------------------- */
@keyframes ccRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero { text-align: center; padding-block-start: 72px; }
.hero__rise { animation: ccRise .8s ease both; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2);
  border-radius: var(--r-pill); padding: 7px 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 28px;
}
.badge .icon { font-size: 17px; color: var(--brand-700); }
.hero .h1 { margin: 0 auto 22px; max-width: 17em; }
.hero .lede { font-size: clamp(16px, 1.7vw, 19px); max-width: 34em; margin: 0 auto 34px; }
.h1-line { display: block; }
.h1-dot { color: var(--brand-600); font-size: 1.3em; line-height: 0; margin-left: .02em; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; align-items: center; }
.hero__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); margin-top: 40px; }
.hero__cards {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 34px;
  max-width: 940px; margin: -62px auto 0; text-align: left;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--r-md); padding: 30px 34px; box-shadow: var(--shadow-float);
}
@media (max-width: 700px) {
  .hero { padding-block-start: 44px; }
  /* The badge wraps on a phone: hug the two lines instead of stretching the
     pill to full width with the icon stranded at the far edge. */
  .badge { max-width: 21.5em; padding: 8px 18px 8px 14px; border-radius: 22px; font-size: 12.5px; line-height: 1.4; text-align: left; text-wrap: balance; margin-bottom: 22px; }
  /* "Simply spotless," is ~7.9em wide; size the headline off the space it has
     so it fills two lines at every phone width rather than breaking into three. */
  .hero .h1 { font-size: clamp(32px, calc((100vw - 2 * var(--gutter)) / 8.2), 46px); margin-bottom: 18px; }
  .hero .lede { margin-bottom: 28px; }
  .hero__img { margin-top: 32px; }
  .hero__cards { margin-top: -30px; padding: 26px 24px; }
}

.feature { display: flex; gap: 14px; }
.feature .icon { font-size: 26px; color: var(--brand-700); }
.feature__title { font-size: 15.5px; font-weight: 500; }
.feature__body { font-size: 14px; line-height: 1.55; color: var(--ink-4); margin-top: 3px; }

/* ---------- Cards --------------------------------------------------------- */
/* min(…, 100%) keeps the column floor from overflowing a 320px screen. */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
/* Testimonials: wrap and centre, so five cards sit 3 + 2 instead of leaving one orphan. */
.grid-quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.grid-quotes > * { flex: 0 1 364px; }
.card {
  background: var(--surface-2); border-radius: var(--r-md); padding: 34px 32px 38px;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}
a.card { color: inherit; display: block; }
.card:hover { background: var(--surface-3); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card .icon { font-size: 34px; color: var(--brand-700); }
.card h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; margin: 20px 0 10px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14.5px; font-weight: 500; color: var(--brand-700); }
.card:hover .card__more { gap: 11px; }

/* ---------- Dark panel ---------------------------------------------------- */
.panel-dark {
  background: var(--ink); border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.panel-dark img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; background: #2a2a2d; }
.panel-dark__body { padding: clamp(34px, 4.6vw, 62px); }
/* Image on the right once the panel is two columns; stacked, it stays on top. */
.panel-dark--flip img { object-position: 75% center; }
@media (min-width: 860px) { .panel-dark--flip img { order: 2; } }
.panel-dark .eyebrow { color: var(--brand-300); }
.panel-dark h2 { color: #fff; margin-bottom: 18px; }
.panel-dark .body { color: var(--ink-dark-2); margin-bottom: 36px; }
.panel-dark .feature .icon { color: var(--brand-300); }
.panel-dark .feature__title { color: #fff; font-size: 16.5px; }
.panel-dark .feature__body { color: var(--ink-dark-3); font-size: 14.5px; }
.stack-22 { display: grid; gap: 22px; }

/* ---------- Service tabs -------------------------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: var(--surface-2); border-radius: var(--r-pill); padding: 6px;
  margin: 0 auto 40px; width: fit-content; max-width: 100%;
}
.tab {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; min-height: 44px;
  color: var(--ink-3); padding: 11px 20px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.tab .icon { font-size: 19px; }
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -2px rgba(0,0,0,.16); }
.tab:hover { color: var(--ink); }
/* Below one-row width the pill wraps into a blob; use an even grid instead. */
@media (max-width: 1079px) {
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; border-radius: var(--r-lg); }
  .tab { justify-content: center; padding: 10px 12px; }
}
@media (max-width: 560px) {
  .tabs { gap: 4px; padding: 5px; margin-bottom: 32px; border-radius: var(--r-md); }
  .tab {
    flex-direction: column; justify-content: flex-start; gap: 5px; padding: 12px 6px 10px; border-radius: 19px;
    font-size: 13px; line-height: 1.25; text-align: center;
  }
  .tab .icon { font-size: 20px; flex: none; }
}
.tab-panel[hidden] { display: none; }
.tab-panel__img {
  width: 100%; aspect-ratio: 21/9; min-height: 260px; object-fit: cover;
  border-radius: var(--r-lg); background: var(--surface-2);
}
.tab-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 34px 60px; margin-top: 44px; align-items: start; }
.tab-panel__grid h3 { margin-bottom: 14px; }
.tab-panel__grid .body { font-size: 17.5px; margin-bottom: 26px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ticks .icon { flex: none; font-size: 20px; color: var(--brand-700); }

/* ---------- Work / gallery ------------------------------------------------ */
.feature-figure {
  margin: 0 0 18px; background: var(--surface-2); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3.4vw, 46px); align-items: center;
}
.feature-figure img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 20px; background: #eaeaee; }
.feature-figure figcaption { order: 2; }
.feature-figure img { order: 1; }
.pill-badge {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--brand-700); margin-bottom: 18px;
}
.pill-badge .icon { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: #fff; border-radius: var(--r-pill); padding: 9px 16px; font-size: 13.5px; color: var(--ink-2); }
.gallery-figure { margin: 0; }
.gallery-figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.gallery-figure figcaption { padding: 16px 6px 0; }
.gallery-figure b { display: block; font-size: 16.5px; font-weight: 500; }
.gallery-figure span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink-4); margin-top: 3px; }

/* ---------- Testimonials -------------------------------------------------- */
.band { background: var(--surface-2); margin-top: 110px; padding: 92px 0; }
.quote-card { margin: 0; background: #fff; border-radius: var(--r-md); padding: 32px; }
.stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--star); }
.stars .icon { font-size: 18px; }
.quote-card blockquote { margin: 0 0 20px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.quote-card figcaption { font-size: 14.5px; color: var(--ink-4); }
.quote-card figcaption b { font-weight: 500; color: var(--ink); }

/* ---------- FAQ ----------------------------------------------------------- */
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--surface-2); border-radius: 20px; padding: 4px 6px; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 20px; text-align: left;
  font-family: inherit; font-size: 16.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.faq-q .icon { font-size: 24px; color: var(--brand-700); transition: transform var(--ease); }
.faq-q[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-a { padding: 0 20px 22px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.faq-a[hidden] { display: none; }
.faq-a ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- CTA ----------------------------------------------------------- */
.cta { background: var(--surface-2); border-radius: var(--r-lg); padding: clamp(40px,6vw,78px) clamp(28px,5vw,64px); text-align: center; }
.cta h2 { margin: 0 auto 18px; max-width: 20em; }
.cta .lede { font-size: 18.5px; line-height: 1.6; max-width: 26em; margin: 0 auto 34px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 46px; }
.cta__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 26px; max-width: 820px; margin: 0 auto; text-align: left; }
.info-item { display: flex; gap: 13px; }
.info-item .icon { font-size: 24px; color: var(--brand-700); }
.info-item .info-label { font-size: 13px; color: var(--ink-4); }
.info-item .info-value { margin: 2px 0 0; font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
/* 44px tap height; negative margin keeps the line where it was. Stays inline-flex so long emails wrap. */
.info-item .info-value a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: inherit; text-decoration: none; }
.info-item .info-value a:hover { color: var(--brand-700); }

/* ---------- Forms --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; align-items: start; text-align: left; }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 500; }
.field .req { color: var(--brand-700); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid #d9d9de; border-radius: 14px; padding: 14px 16px; width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100);
}
.field .hint { font-size: 13px; color: var(--ink-4); }
.field-error { font-size: 13.5px; color: #b3261e; }
.field-error[hidden] { display: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; }
.form-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-4); margin-top: 18px; }
.form-status { margin-top: 20px; padding: 16px 18px; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.form-status[hidden] { display: none; }
.form-status.is-ok { background: var(--brand-50); color: var(--brand-800); }
.form-status.is-err { background: #fdecea; color: #8c1d18; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact page: the form card, and a column of matching cards --
   Reworked 2026-09-19. The layout uses the full .wrap width so its edges line
   up with the header. Every panel is a --surface-2 card with the same radius
   and padding, so the sidebar sits on the same grid as the form. */
.contact-section { padding-block: 48px 24px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.contact-form, .contact-card { background: var(--surface-2); border-radius: var(--r-lg); }
.contact-form { padding: clamp(24px, 3.4vw, 44px); }
.contact-form__head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #e2e2e6; }
.contact-form__title { font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.contact-form .form-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.contact-form .form-grid .btn[type="submit"] { margin-top: 4px; }
.contact-form__privacy { margin: 20px 0 0; }

/* The map card grows to fill the column, so both columns end on one line. */
.contact-aside { display: grid; grid-template-rows: auto auto 1fr; gap: 24px; }
.contact-card--map { display: flex; flex-direction: column; }
.contact-card--map .map-embed { flex: 1 1 auto; min-height: 200px; }
.contact-card { padding: 28px; }
.contact-card__title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.contact-card__note { font-size: 14.5px; line-height: 1.55; color: var(--ink-4); margin: 6px 0 0; }
.contact-card__note a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.contact-aside__actions { display: grid; gap: 10px; margin-top: 20px; }
.contact-aside__actions .btn { justify-content: center; width: 100%; }
.contact-aside__actions .icon { font-size: 19px; }
.contact-card .map-embed { margin-top: 18px; aspect-ratio: 16/9; background: var(--surface); }
.contact-card .map-placeholder:hover { background: var(--surface); }
.contact-steps { list-style: none; counter-reset: step; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.contact-steps li::before {
  content: counter(step); flex: 0 0 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: var(--surface); color: var(--brand-700);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}

/* Tablet: the form takes the full width, the cards pair up beneath it. */
@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { grid-template-columns: 1fr 1fr; gap: 16px; }
  .contact-aside { grid-template-rows: none; }
  .contact-card--map { grid-column: 1 / -1; }
  .contact-card--map .map-embed { flex: none; aspect-ratio: 7/2; min-height: 0; }
}
/* Phone: one column of cards, tighter padding, same corners throughout. */
@media (max-width: 700px) {
  .contact-section { padding-block: 32px 8px; }
  .contact-layout, .contact-aside { gap: 14px; }
  .contact-aside { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 20px; border-radius: var(--r-md); }
  .contact-form__head { margin-bottom: 22px; padding-bottom: 18px; }
  .contact-form .form-grid { gap: 16px 12px; }
  .contact-card { padding: 22px 20px; border-radius: var(--r-md); }
}
@media (max-width: 359px) {
  .contact-form .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact split ------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(30px,5vw,64px); align-items: start; }
.contact-list { display: grid; gap: 24px; margin: 0; }
.map-embed { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: var(--r-md); background: var(--surface-2); }
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; color: var(--ink-3); cursor: pointer; padding: 20px; text-align: center;
  border: 1px dashed #d2d2d8; transition: background var(--ease), border-color var(--ease);
}
.map-placeholder:hover { background: var(--surface-3); border-color: var(--brand-600); }
.map-placeholder .icon { font-size: 30px; color: var(--brand-700); }
.map-placeholder__title { font-size: 16px; font-weight: 500; color: var(--ink); }
.map-placeholder__note { font-size: 13.5px; color: var(--ink-4); max-width: 26em; }

/* ---------- Prose (legal pages) ------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(22px,2.6vw,28px); font-weight: 600; letter-spacing: -.02em; margin: 44px 0 14px; }
.prose h3 { font-size: 18px; font-weight: 500; margin: 28px 0 10px; }
.prose p, .prose li { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--ink-3); }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.prose strong { font-weight: 500; color: var(--ink); }

/* Links inside running text get an underline — colour alone fails WCAG 1.4.1. */
.body a, .lede a, .prose a, .form-note a, .faq-a a, .quote-card a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* ---------- Footer -------------------------------------------------------- 
   Reworked 2026-09-19: a dark full-width band so the page has a clear end.
   On --ink: --ink-dark-2 is 9.2:1 and --ink-dark-3 is 6.6:1 (both AA). */
.site-footer { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(48px, 6vw, 72px); background: var(--ink); color: var(--ink-dark-2); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 32px 40px; padding-bottom: clamp(36px, 5vw, 56px); }
.site-footer__logo, .site-footer__logo:hover { color: #fff; }
.site-footer p { font-size: 14.5px; line-height: 1.65; color: var(--ink-dark-3); max-width: 24em; margin: 14px 0 0; }
.site-footer h2 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #fff; margin: 0 0 10px; }
.footer-links { display: grid; font-size: 14.5px; }
.footer-links a, .footer-links span { color: var(--ink-dark-2); overflow-wrap: anywhere; }
.footer-links > a, .footer-links > span { display: flex; align-items: center; min-height: 36px; }
.footer-links a:hover { color: #fff; }
.site-footer__contact .btn { margin-top: 16px; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  color: var(--brand-300); background: rgba(255,255,255,.07); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; transition: background var(--ease), color var(--ease);
}
.socials a:hover { background: var(--brand-600); color: #fff; }
.socials .icon { font-size: 21px; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; padding-block: 8px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--ink-dark-3); }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-dark-3); }
.site-footer__legal a:hover { color: #fff; }
.site-footer__legal .to-top { margin-left: auto; }
/* Tablet: brand and contact share the top row, the link columns sit below. */
@media (max-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "about about contact" "services areas company";
  }
  .site-footer__about { grid-area: about; }
  .site-footer__contact { grid-area: contact; }
  .site-footer__grid > nav:nth-of-type(1) { grid-area: services; }
  .site-footer__grid > nav:nth-of-type(2) { grid-area: areas; }
  .site-footer__grid > nav:nth-of-type(3) { grid-area: company; }
}

/* ---------- Floating quote button ----------------------------------------- */
.float-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 9px; background: var(--brand-600); color: #fff;
  padding: 14px 22px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(4,106,91,.6);
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease), opacity var(--ease), visibility var(--ease);
}
/* site.js shows it only between the hero and the footer, so it never doubles
   up with their own quote buttons. Visible with JS off. */
.float-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
.float-cta:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); }
.float-cta .icon { font-size: 20px; }
@media (max-width: 520px) { .float-cta { right: 14px; bottom: 14px; padding: 13px 18px; font-size: 14px; } }

/* ---------- Cookie banner (site.js initConsent) --------------------------- */
.cookie-banner {
  position: fixed; left: 22px; bottom: 22px; z-index: 70; max-width: 430px;
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  background: var(--ink); color: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-float);
  font-size: 13.5px; line-height: 1.5;
}
.cookie-banner p { margin: 0; color: rgba(255,255,255,.82); }
.cookie-banner a { color: var(--brand-300); text-decoration: underline; }
.cookie-banner a:hover { color: #fff; }
/* Banner: Accept and Customise, same size. Dialog: Reject all, Save, Accept all. */
.cookie-banner__actions, .cookie-dialog__actions { display: flex; gap: 10px; }
.cookie-btn { flex: 1; justify-content: center; background: #fff; color: var(--ink); }
.cookie-btn--accept { background: var(--brand-300); }
.cookie-btn:hover { background: var(--brand-200); color: var(--ink); box-shadow: none; }
.cookie-banner :focus-visible { outline-color: var(--brand-300); }
@media (max-width: 520px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; gap: 10px; padding: 12px 14px; } }

/* The second layer: a modal <dialog> over the page. */
.cookie-dialog {
  width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0;
  border-radius: var(--r-md); color: var(--ink); background: #fff; box-shadow: var(--shadow-float);
  font-size: 14px; line-height: 1.55;
}
.cookie-dialog::backdrop { background: rgba(20,20,22,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cookie-dialog__inner { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.cookie-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-dialog h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.cookie-dialog__close {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
}
.cookie-dialog__close:hover { background: var(--surface-2); }
.cookie-dialog__close .icon { font-size: 22px; }
.cookie-dialog p { color: var(--ink-3); }
.cookie-purpose { padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface-2); }
.cookie-purpose__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cookie-purpose h3 { font-size: 15px; font-weight: 600; }
.cookie-purpose p { font-size: 13.5px; }
.cookie-purpose code { font-size: 12.5px; }
.cookie-purpose__always { font-size: 12.5px; font-weight: 500; color: var(--brand-700); }
.cookie-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 26px; margin: 0;
  border-radius: 999px; background: #c7c7cc; cursor: pointer; transition: background var(--ease);
}
.cookie-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--ease);
}
.cookie-switch:checked { background: var(--brand-600); }
.cookie-switch:checked::after { transform: translateX(20px); }
.cookie-dialog .cookie-btn { background: var(--surface-3); }
.cookie-dialog .cookie-btn--accept { background: var(--brand-600); color: #fff; }
.cookie-dialog .cookie-btn:hover { background: var(--ink); color: #fff; }
@media (max-width: 420px) {
  .cookie-dialog__inner { padding: 22px 20px; }
  /* Reject all and Accept all side by side, Save underneath. */
  .cookie-dialog__actions { flex-wrap: wrap; }
  .cookie-dialog__actions [data-save] { order: 3; flex-basis: 100%; }
}

.cookie-settings {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0;
  background: none; font: inherit; color: var(--ink-dark-3); cursor: pointer;
}
.cookie-settings:hover { color: #fff; }

/* ---------- Page hero (inner pages) --------------------------------------- */
.page-hero { padding-block: 64px 0; text-align: center; }
.page-hero .h1 { font-size: clamp(34px, 5vw, 60px); margin: 0 auto 18px; max-width: 16em; }
.page-hero .lede { max-width: 30em; margin-inline: auto; }

/* ==========================================================================
   Service and area pages (/<service>-london, /cleaners/<area>)
   Added 2026-09-18 for the pages build.mjs generates. Tokens only; no new
   palette. Everything else on those pages reuses guide.css and the rules above.
   ========================================================================== */
/* "What's included" uses .card for its look, but these cards are not links,
   so they must not lift on hover the way a clickable card does. */
.svc-includes .card:hover { background: var(--surface-2); transform: none; box-shadow: none; }
.svc-includes .card { padding: 28px 28px 30px; }
.svc-includes .card h3 { font-size: 19px; margin-top: 16px; }
/* "What's included" is a sideways rail at every width, bleeding to both
   screen edges while the first card lines up with the heading. site.js adds
   the previous/next buttons and position dots below it. */
.guide-wrap-wide .svc-includes {
  --rail-pad: max(var(--gutter), calc((100vw - 980px) / 2 + var(--gutter)));
  display: flex; flex-wrap: nowrap; gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(50% - 50vw); padding: 4px var(--rail-pad) 12px; scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
}
.guide-wrap-wide .svc-includes::-webkit-scrollbar { display: none; }
.guide-wrap-wide .svc-includes > * { flex: 0 0 clamp(270px, 28vw, 340px); scroll-snap-align: start; }
.rail-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.rail-nav .rail-dots { display: flex; gap: 6px; margin: 0; }
.rail-nav .rail-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d2d2d8; transition: background var(--ease), width var(--ease); }
.rail-nav .rail-dots span.is-on { width: 18px; border-radius: 3px; background: var(--brand-600); }
.rail-nav__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: background var(--ease), opacity var(--ease);
}
.rail-nav__btn:hover:not(:disabled) { background: var(--surface-3); }
.rail-nav__btn:disabled { opacity: .35; cursor: default; }
.rail-nav__btn .icon { font-size: 20px; }
.rail-nav__btn--prev .icon { transform: scaleX(-1); }
@media (max-width: 700px) { .guide-wrap-wide .svc-includes > * { flex-basis: min(84%, 320px); } }

/* Generated area hero: a soft brand wash instead of a photo. --ink-4 on
   --brand-50 is 4.9:1, so the breadcrumb and meta line stay AA. */
.area-hero { background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%); padding-bottom: 36px; }

/* Neighbourhood, landmark and property-type lists on the grey band. */
.area-list-h { margin-top: 28px; }
.area-chips { list-style: none; margin: 12px 0 0; padding: 0; }

/* ==========================================================================
   Mobile density (added 2026-09-18)
   Card grids become swipeable rails, paired actions sit side by side, and the
   contact page and footer use two columns, to cut vertical scrolling on phones.
   ========================================================================== */
.btn-outline { background: transparent; color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-600); }
.btn-outline:hover { background: var(--brand-50); color: var(--brand-800); transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.tab-panel__grid .related { font-size: 15px; }
.quick-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.quick-contact .icon { font-size: 19px; }

@media (max-width: 700px) {
  /* Rails: one card and a peek of the next, snapping as you swipe. The rail
     bleeds to the screen edge and pads back in by the gutter. */
  .grid-cards, .grid-quotes, .facts {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px;
    scrollbar-width: none;
  }
  .grid-cards::-webkit-scrollbar, .grid-quotes::-webkit-scrollbar, .facts::-webkit-scrollbar { display: none; }
  .grid-cards > *, .grid-quotes > *, .facts > * { flex: 0 0 min(84%, 320px); scroll-snap-align: start; }
  .card { padding: 26px 24px 28px; }
  .card h3 { margin-top: 16px; }
  .quote-card { padding: 26px 24px; }

  /* Rail position dots, drawn by site.js. */
  .rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .rail-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d2d2d8; transition: background var(--ease), width var(--ease); }
  .rail-dots span.is-on { width: 18px; border-radius: 3px; background: var(--brand-600); }

  .btn-row .btn { flex: 1 1 auto; padding-inline: 20px; }

  /* Contact: paired fields, a full-width send, compact detail tiles. */
  .quick-contact .btn { flex: 1 1 0; padding: 13px 10px; font-size: 15px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .form-grid > .field:not(.field-wide) { min-width: 0; }
  .form-grid .btn[type="submit"] { width: 100%; }
  .field textarea { min-height: 110px; }
  .contact-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-list .info-item { flex-direction: column; gap: 8px; background: var(--surface-2); border-radius: var(--r-sm); padding: 16px; }
  .contact-list .info-item--wide { grid-column: 1 / -1; }
  .contact-list .info-value { font-size: 14.5px; }
  .map-embed.map-placeholder { aspect-ratio: auto; min-height: 0; flex-direction: row; flex-wrap: wrap; padding: 18px; }
  .map-placeholder__note { flex-basis: 100%; }

  /* Footer: link columns in pairs, touch-height rows. */
  .site-footer__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "about about" "contact contact" "services areas" "company ."; gap: 32px 16px; }
  .footer-links > a, .footer-links > span { min-height: 42px; }
  .site-footer__legal { gap: 0 20px; }
  .site-footer__legal > span { flex-basis: 100%; padding-top: 12px; }
}
@media (max-width: 359px) {
  .form-grid { grid-template-columns: 1fr; }
}
.rail-dots { display: none; }
@media (max-width: 700px) { .rail-dots { display: flex; } }
@media (max-width: 700px) {
  .form-grid { align-items: start; }
  .quick-contact .btn { white-space: nowrap; }
}
@media (max-width: 700px) { .grid-quotes { align-items: flex-start; } }