/* Walo Cleaning Services: responsive layout layer.
   Design tokens, colours and components come from the bound design system.
   This file only carries what an inline style attribute cannot express:
   shared layout classes and their media queries.
   Breakpoints: 1000px (tablet, matches the DS .ck-header__nav rule) and 640px (phone). */

/* Walo green, the sparing secondary accent. Mirrors --green-* in the DS tokens/colors.css so
   pages paint it before the DS stylesheet (injected by ds-base.js) arrives.
   500 is decorative only (rules, ticks); white text sits on 600; 700 is the hover for 600. */
:root { --green-500: #3F9A1F; --green-600: #2E7A14; --green-700: #24620F; }

/* ── shell ─────────────────────────────────────────────── */
.ck-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ck-wrap--narrow { max-width: 820px; }
.ck-sec { padding: 96px 0; }
.ck-sec--tight { padding: 64px 0; }
.ck-sec--close { padding: 96px 0 120px; }
.ck-sec--head { padding: 40px 0 0; }
.ck-subtle { background: #F4F8FD; }
.ck-brand { background: #EEF4FD; border-top: 1px solid #DCE8FA; }
.ck-brand--both { border-bottom: 1px solid #DCE8FA; }

/* ── type ──────────────────────────────────────────────── */
.ck-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #0F5BC0; }
.ck-eyebrow--inv { color: #A8C6F0; }
.ck-rule { display: block; width: 28px; height: 2px; border-radius: 999px;
  background: var(--green-500); }
.ck-h1 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 76px; font-weight: 500;
  line-height: 1.02; letter-spacing: -.025em; color: #0B2A5B; text-wrap: balance; }
.ck-h1--page { font-size: 58px; line-height: 1.06; letter-spacing: -.022em; }
.ck-h2 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 46px; font-weight: 500;
  line-height: 1.16; letter-spacing: -.015em; color: #0B2A5B; text-wrap: balance; }
.ck-h3 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 500;
  line-height: 1.18; color: #0B2A5B; text-wrap: balance; }
.ck-h4 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 500;
  line-height: 1.24; color: #0B2A5B; text-wrap: balance; }
.ck-lead { margin: 0; font-size: 20px; line-height: 1.45; color: #33415A; text-wrap: pretty; }
.ck-body { margin: 0; font-size: 17px; line-height: 1.6; color: #33415A; text-wrap: pretty; }
.ck-prose { margin: 0; font-size: 18px; line-height: 1.7; color: #33415A; text-wrap: pretty; }
.ck-meta { font-size: 14px; color: #627088; }
.ck-inv { color: #fff; }
.ck-inv-soft { color: rgba(255,255,255,.94); }

.ck-stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ck-stack--lg { gap: 20px; }
.ck-stack--head { max-width: 620px; }

/* ── grids ─────────────────────────────────────────────── */
.ck-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.ck-split--start { align-items: start; }
.ck-split--media-l { grid-template-columns: minmax(0,.82fr) minmax(0,1fr); }
.ck-split--media-r { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); }
.ck-split--copy-l { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.ck-split--map { grid-template-columns: minmax(0,.92fr) minmax(0,1fr); }
.ck-split--faq { grid-template-columns: minmax(0,.7fr) minmax(0,1fr); }
.ck-split--article { grid-template-columns: minmax(0,220px) minmax(0,1fr); }

.ck-headrow { display: flex; gap: 64px; align-items: flex-end; flex-wrap: wrap; }
.ck-headrow > .ck-body { flex: 1; min-width: 300px; margin-bottom: 6px; }

.ck-services { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 24px; }
.ck-span-4 { grid-column: span 4; }
.ck-span-3 { grid-column: span 3; }
.ck-span-2 { grid-column: span 2; }
.ck-colstack { display: grid; gap: 24px; align-content: start; }

.ck-mosaic { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; align-items: start; }
.ck-mosaic--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ck-reviews { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.ck-reviews--2 { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.ck-ig { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.ck-rooms { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ck-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; }
.ck-towngrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.ck-posts { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(0,1fr); gap: 28px; align-items: start; }
.ck-posts--flip { grid-template-columns: minmax(0,1fr) minmax(0,1.28fr); }
.ck-posts--even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ck-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── bits ──────────────────────────────────────────────── */
.ck-btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #A8C6F0; font-size: 14px; font-weight: 600; color: #0B2A5B;
  text-decoration: none; white-space: nowrap; }
.ck-chip:hover { background: #DCE8FA; color: #0B2A5B; }
.ck-chip--plain { border-color: #D9E4F4; }
.ck-chip--plain:hover { background: #EEF4FD; border-color: #A8C6F0; }
.ck-chip--on { background: #0F5BC0; border-color: #0F5BC0; color: #fff; }
.ck-chip--on:hover { background: #0B4A9E; border-color: #0B4A9E; color: #fff; }
.ck-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #A8C6F0; font-size: 14px; font-weight: 700; color: #0B2A5B; white-space: nowrap; }
.ck-badge--soft { background: #EEF4FD; }
.ck-media { border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(11,42,91,.16); }
.ck-media img, .ck-media video { display: block; width: 100%; }
.ck-mapframe { border-radius: 28px; overflow: hidden; border: 1px solid #A8C6F0; background: #fff;
  box-shadow: 0 12px 32px rgba(11,42,91,.10); }
.ck-mapframe iframe { display: block; width: 100%; height: 520px; border: 0; }
.ck-card { background: #fff; border: 1px solid #D9E4F4; border-radius: 14px; text-decoration: none; display: block; }
.ck-card:hover { box-shadow: 0 8px 24px rgba(11,42,91,.10); }

/* ── hero ──────────────────────────────────────────────── */
.ck-hero { position: relative; height: 100vh; min-height: 840px; max-height: 960px; overflow: hidden; }
.ck-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg,
  rgba(11,42,91,.46) 0%, rgba(11,42,91,.12) 26%, rgba(11,42,91,.58) 50%, rgba(11,42,91,.86) 100%); }
.ck-hero__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 56px; }
.ck-hero__row { max-width: 1200px; margin: 0 auto; display: flex; gap: 48px; align-items: flex-end; }
.ck-hero__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 660px; }
/* scoped so hero text always beats the base type colours regardless of source order */
.ck-hero__copy .ck-eyebrow, .ck-hero__copy .ck-h1 { color: #fff; }
.ck-hero__copy .ck-lead { color: rgba(255,255,255,.94); }
.ck-hero__pills { margin-left: auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.ck-pill { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(11,42,91,.14); text-decoration: none;
  font-size: 14px; font-weight: 700; color: #0B2A5B; white-space: nowrap; }
.ck-pill--video { gap: 14px; padding: 10px 16px 10px 10px; }
.ck-pill__avatar { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.ck-pill__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── site header (SiteNav.dc.html) ──────────────────────
   Two variants: solid (sticky, white) and data-over="1" (transparent, over hero media).
   Desktop row + hover/click dropdown panels above 1000px; below that the row is
   replaced by a full-height sheet under the bar. Phone + "Get a quote" never move. */
.ck-hdr { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid #D9E4F4; }
.ck-hdr[data-over="1"] { position: relative; background: transparent; border-bottom: 0; }
.ck-hdr__bar { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 76px;
  display: flex; align-items: center; gap: 22px; }
.ck-hdr__logo { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
/* Walo's logo is about 1.87:1 (house, wordmark, tagline), so it is sized by height to sit
   inside the 76px bar: 48px desktop, 40px at 1000px and below. */
.ck-hdr__logo img { height: 48px; width: auto; }
.ck-hdr[data-over="1"] .ck-hdr__logo { background: #fff; border-radius: 10px; padding: 6px 12px; }
.ck-hdr[data-over="1"] .ck-hdr__logo img { height: 42px; }

.ck-hdr__nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ck-hdr__item { position: relative; display: inline-flex; align-items: center; border-radius: 6px; }
.ck-hdr__item:hover, .ck-hdr__item[data-open="1"] { background: #EEF4FD; }
.ck-hdr__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 6px; font-size: 14px; font-weight: 600; color: #33415A; text-decoration: none; white-space: nowrap; }
.ck-hdr__item:hover .ck-hdr__link, .ck-hdr__item[data-open="1"] .ck-hdr__link,
.ck-hdr__item[data-on="1"] .ck-hdr__link { color: #0F5BC0; }
.ck-hdr__item[data-on="1"] .ck-hdr__link::after { content: ''; position: absolute; left: 12px; right: 12px;
  bottom: 5px; height: 2px; border-radius: 999px;
  background: linear-gradient(180deg, #2F74D6 0%, #5B92DE 55%, #8FB0DE 100%); }
.ck-hdr__toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 44px;
  margin-left: -8px; padding: 0; border: 0; background: none; color: #55627A; cursor: pointer; border-radius: 6px; }
.ck-hdr__toggle svg { transition: rotate 140ms cubic-bezier(.22,.61,.36,1); }
.ck-hdr__item[data-open="1"] .ck-hdr__toggle svg { rotate: 180deg; }
.ck-hdr__link:focus-visible, .ck-hdr__toggle:focus-visible { outline: 2px solid #0F5BC0; outline-offset: 2px; }

.ck-hdr[data-over="1"] .ck-hdr__item:hover, .ck-hdr[data-over="1"] .ck-hdr__item[data-open="1"] { background: rgba(255,255,255,.18); }
.ck-hdr[data-over="1"] .ck-hdr__link, .ck-hdr[data-over="1"] .ck-hdr__toggle,
.ck-hdr[data-over="1"] .ck-hdr__item:hover .ck-hdr__link,
.ck-hdr[data-over="1"] .ck-hdr__item[data-open="1"] .ck-hdr__link { color: #fff; }
.ck-hdr[data-over="1"] .ck-hdr__link:focus-visible,
.ck-hdr[data-over="1"] .ck-hdr__toggle:focus-visible { outline-color: #fff; }

/* dropdown panels — hidden but in the DOM, so hover and the chevron share one panel */
.ck-hdr__panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; padding: 8px;
  display: flex; align-items: flex-start;
  background: #fff; border: 1px solid #D9E4F4; border-radius: 14px; box-shadow: 0 18px 44px rgba(11,42,91,.18);
  max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity 140ms cubic-bezier(.22,.61,.36,1), translate 140ms cubic-bezier(.22,.61,.36,1), visibility 140ms; }
.ck-hdr__col { flex: none; width: 306px; display: flex; flex-direction: column; }
.ck-hdr__item:hover > .ck-hdr__panel,
.ck-hdr__item[data-open="1"] > .ck-hdr__panel { opacity: 1; visibility: visible; translate: 0 0; }
.ck-hdr__item--end > .ck-hdr__panel { left: auto; right: 0; }
.ck-hdr__item--wide { position: static; }
.ck-hdr__panel--wide { left: 50%; transform: translateX(-50%); top: calc(100% - 4px);
  width: 690px; max-width: calc(100vw - 40px); display: block; }

/* the merged menu: service areas branch off the services panel, one card that cannot overflow */
.ck-hdr__hair { display: block; height: 1px; background: #D9E4F4; margin: 6px 12px; }
.ck-hdr__branch { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 12px;
  border-radius: 10px; text-decoration: none; }
.ck-hdr__branch b { font-size: 14px; font-weight: 600; color: #0B2A5B; }
.ck-hdr__branch span span { font-size: 13px; color: #55627A; }
.ck-hdr__branch svg { margin-left: auto; flex: none; color: #0F5BC0; }
.ck-hdr__branch:hover, .ck-hdr__panel[data-areas="1"] .ck-hdr__branch { background: #EEF4FD; }
.ck-hdr__flyout { display: none; }
.ck-hdr__panel[data-areas="1"] .ck-hdr__flyout { flex: none; width: 276px; display: flex; flex-direction: column;
  margin-left: 8px; padding-left: 8px; border-left: 1px solid #D9E4F4;
  animation: cqRise 140ms cubic-bezier(.22,.61,.36,1) both; }
.ck-hdr__flyout .ck-hdr__towns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ck-hdr__flyout .ck-hdr__towns a:first-child { grid-column: span 2; }
.ck-hdr__all { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px;
  border-radius: 10px; background: #EEF4FD; border: 1px solid #DCE8FA; text-decoration: none; }
.ck-hdr__all:hover { background: #DCE8FA; }
.ck-hdr__all b { font-size: 14px; font-weight: 700; color: #0B2A5B; }
.ck-hdr__all span { font-size: 13px; color: #55627A; }
.ck-hdr__all svg { margin-left: auto; color: #0F5BC0; flex: none; }
.ck-hdr__row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none; }
.ck-hdr__row:hover { background: #F4F8FD; }
.ck-hdr__row b { font-size: 14px; font-weight: 600; color: #0B2A5B; }
.ck-hdr__row span { font-size: 13px; color: #55627A; }
.ck-hdr__towns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; margin-top: 6px; }
.ck-hdr__town { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: #0B2A5B; text-decoration: none; }
.ck-hdr__town:hover { background: #F4F8FD; color: #0F5BC0; }
.ck-hdr__town i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #0F5BC0; }

.ck-hdr__actions { flex: none; display: flex; align-items: center; gap: 10px; }
.cq-iconbtn.ck-hdr__burger { width: 48px; height: 48px; border-radius: 10px; background: #fff;
  border: 1px solid #A8C6F0; color: #0B2A5B; }
.cq-iconbtn.ck-hdr__burger:hover { background: #EEF4FD; color: #0F5BC0; }
.ck-hdr[data-over="1"] .cq-iconbtn.ck-hdr__burger { background: rgba(255,255,255,.94); border-color: transparent;
  box-shadow: 0 2px 8px rgba(11,42,91,.14); }
.ck-hdr__phone { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px;
  font-size: 14px; font-weight: 700; color: #0B2A5B; text-decoration: none; white-space: nowrap; }
.ck-hdr__phone:hover { color: #0F5BC0; }
.ck-hdr__phone svg { color: #0F5BC0; flex: none; }
.ck-hdr[data-over="1"] .ck-hdr__phone { color: #fff; }
.ck-hdr[data-over="1"] .ck-hdr__phone svg { color: #fff; }
/* Instant estimate link beside Get a quote (2026-10-07). Desktop only; the phone sheet has its own row. */
.ck-hdr__est { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  font-size: 14px; font-weight: 700; color: #0F5BC0; text-decoration: none; white-space: nowrap; }
.ck-hdr__est:hover { color: #0B4A9E; text-decoration: underline; text-underline-offset: 3px; }
.ck-hdr[data-over="1"] .ck-hdr__est { color: #fff; }
.ck-hdr__call, .cq-iconbtn.ck-hdr__burger { display: none; }
/* the DS Button sizes itself from its own padding, so pin the touch targets here */
.ck-hdr__actions .cq-btn { min-height: 46px; }
.ck-hdr__call .cq-btn { width: 46px; height: 46px; padding: 0; }

/* the sheet sits under the bar, so the phone and CTA stay visible while it is open */
.ck-sheet { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff;
  display: flex; flex-direction: column; overflow-x: hidden;
  animation: cqRise 200ms cubic-bezier(.22,.61,.36,1) both; }
.ck-sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 48px; }
.ck-sheet__label { margin: 26px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #0F5BC0; }
.ck-sheet__label:first-child { margin-top: 0; }
.ck-sheet__all { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  margin: 8px 0 6px; border-radius: 10px; background: #EEF4FD; border: 1px solid #DCE8FA; text-decoration: none; }
.ck-sheet__all b { font-size: 16px; font-weight: 700; color: #0B2A5B; flex: 1; }
.ck-sheet__all svg { margin-left: auto; color: #0F5BC0; flex: none; }
.ck-sheet__row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px;
  padding: 10px 2px; border-bottom: 1px solid #EAF0F8; text-decoration: none; }
.ck-sheet__row b { font-size: 16px; font-weight: 600; color: #0B2A5B; }
.ck-sheet__row span { font-size: 14px; color: #55627A; }
.ck-sheet__row:active { background: #F4F8FD; }
.ck-igph { border: 1.5px dashed #C4D8F5; border-radius: 18px; padding: 20px;
  background: linear-gradient(#F9FBFE, #F4F8FD); display: flex; flex-direction: column; gap: 16px; }
.ck-igph__grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.ck-igph__grid > span { aspect-ratio: 1 / 1; border-radius: 12px; background: #EAF1FB;
  border: 1px solid #DCE8FA; }
.ck-igph__note { display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: #55627A; }
.ck-igph__note svg { flex: none; margin-top: 1px; color: #0F5BC0; }
@media (max-width: 900px) { .ck-igph__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .ck-igph { padding: 16px; }
  .ck-igph__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } }

/* NOT --radius-pill, and that is the whole bug Kalvin reported as "text overflow in the
   our cleaning tech box". A pill radius is half the element's height: right for one line, wrong
   the moment it wraps. At two lines the corner curve is ~54px deep and it cuts through the start
   of "Our cleaning technicians:" and through "Jessica" on the line below. Eight names never fit
   on one line in a 557px column, so this has to be a rounded rectangle with padding that keeps
   the text clear of the curve. */
.ck-crew { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: 12px 22px 14px 12px;
  background: var(--surface-brand-soft); border: 1px solid var(--magenta-200);
  border-radius: 24px; max-width: 100%; }
.ck-crew__faces { display: inline-flex; flex: none; }
.ck-crew__faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  display: block; box-shadow: 0 0 0 2px var(--surface-card); }
.ck-crew__faces img + img { margin-left: -12px; }
.ck-crew__text { font-family: var(--font-sans); font-size: var(--text-meta); line-height: 1.5;
  color: var(--text-secondary); min-width: 0; }
.ck-crew__text > span { color: var(--text-muted); }
.ck-crew__text strong { color: var(--text-primary); font-weight: var(--weight-bold); }
@media (max-width: 620px) {
  .ck-crew { padding: 12px 16px 14px 12px; }
  .ck-crew__faces img { width: 38px; height: 38px; }
  .ck-crew__faces img + img { margin-left: -10px; }
}

.ck-sheet__fold { border-top: 1px solid #EAF0F8; }

.ck-sheet__fold > summary { display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 16px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700;
  color: #44526B; }
.ck-sheet__fold > summary::-webkit-details-marker { display: none; }
.ck-sheet__fold > summary svg { margin-left: auto; color: #0F5BC0; flex: none;
  transition: transform 160ms ease; }
.ck-sheet__fold[open] > summary svg { transform: rotate(180deg); }
.ck-sheet__fold[open] > summary { color: #0B2A5B; }
.ck-sheet__towns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 14px; }
.ck-sheet__towns a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 2px;
  border-bottom: 1px solid #EAF0F8; font-size: 16px; font-weight: 600; color: #0B2A5B; text-decoration: none; }
.ck-sheet__towns a i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #0F5BC0; }

/* ── promo popup ───────────────────────────────────────── */
.ck-promo__backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(11,42,91,.58);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.ck-promo { width: 460px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; background: #fff;
  border-radius: 20px; box-shadow: 0 32px 64px rgba(11,42,91,.42);
  animation: cqRise 320ms cubic-bezier(.22,.61,.36,1) both; }
.ck-promo__img { width: 100%; height: 196px; object-fit: cover; display: block; }
.ck-promo__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(11,42,91,.14);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: #0B2A5B; }
.ck-promo__close:hover { background: #fff; }
.ck-promo__code { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; min-height: 50px; border-radius: 10px; background: #EEF4FD; border: 1px solid #DCE8FA;
  cursor: pointer; font-family: 'Nunito Sans', system-ui, sans-serif; }
.ck-promo__code:hover { background: #DCE8FA; }

/* ── article ───────────────────────────────────────────── */
.ck-toc { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 12px; }
.ck-toc a { font-size: 14px; font-weight: 600; color: #33415A; text-decoration: none; padding: 8px 0;
  border-top: 1px solid #D9E4F4; }
.ck-toc a:hover { color: #0F5BC0; }
.ck-article { max-width: 68ch; display: flex; flex-direction: column; gap: 26px; }
.ck-quote { margin: 12px 0; padding: 0 0 0 24px; border-left: 2px solid #A8C6F0;
  display: flex; flex-direction: column; gap: 10px; }
.ck-callout { margin: 12px 0; padding: 24px 26px; border-radius: 14px; background: #EEF4FD; border: 1px solid #DCE8FA;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ck-draft { padding: 24px 26px; border: 1px dashed #8FB0DE; border-radius: 14px; background: rgba(255,255,255,.6);
  display: flex; flex-direction: column; gap: 10px; }

/* ── footer (SiteFooter ships no media queries) ────────── */
.ck-foot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.ck-foot__links a { font-size: 14px; color: rgba(255,255,255,.76); text-decoration: none; padding: 6px 0; }
.ck-foot__links a:hover { color: #fff; }

@keyframes cqRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ══ tablet ════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* the desktop row becomes the sheet; phone becomes a 44px call button */
  .ck-hdr__nav, .ck-hdr__phone, .ck-hdr__est { display: none; }
  .ck-hdr__bar { height: 68px; gap: 10px; }
  .ck-hdr__logo img { height: 40px; }
  .ck-hdr[data-over="1"] .ck-hdr__logo img { height: 36px; }
  .ck-hdr[data-over="1"] .ck-hdr__logo { padding: 5px 10px; }
  .ck-hdr__actions { margin-left: auto; }
  .ck-hdr__call { display: inline-flex; }
  .cq-iconbtn.ck-hdr__burger { display: inline-flex; }

  .ck-split, .ck-split--media-l, .ck-split--media-r, .ck-split--copy-l,
  .ck-split--map, .ck-split--faq, .ck-split--article { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .ck-toc { position: static; }
  .ck-article { max-width: none; }
  .ck-headrow { gap: 32px; }
  .ck-services { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ck-span-4, .ck-span-3, .ck-span-2 { grid-column: span 2; }
  .ck-mosaic, .ck-mosaic--4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ck-reviews, .ck-reviews--2 { grid-template-columns: minmax(0,1fr); }
  .ck-ig { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ck-rooms { grid-template-columns: minmax(0,1fr); }
  .ck-towngrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ck-posts, .ck-posts--flip, .ck-posts--even { grid-template-columns: minmax(0,1fr); }

  .ck-h1 { font-size: 56px; }
  .ck-h1--page { font-size: 46px; }
  .ck-h2 { font-size: 38px; }
  .ck-sec, .ck-sec--close { padding: 72px 0; }

  .ck-hero { height: auto; min-height: 720px; max-height: none; }
  .ck-hero__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ck-hero__pills { margin-left: 0; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .ck-mapframe iframe { height: 420px; }

  /* SiteFooter renders 4 grid children: brand block + 3 link columns → even 2×2 here */
  .ck-foot > div > div { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 40px !important; }
  /* the DS TrustBar renders its own grid with no ck- class, so reach into it */
  .ck-trust > * { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 32px !important; }

  /* 47B tap targets: 44px minimum on touch. Held by admin/apply-local-patches.mjs.
     "43 of 61 tap targets under Google's 44px minimum" is one of the three headline findings in
     the audit this demo exists to support, and measured at 390px the demo was failing its own
     pitch: 47 of 81 on the homepage, all of them 32-40px. The design system's own .ck-navstrip
     already does this, so this is the same rule applied to the links it missed.
     Mostly height — the two width rules below are the last three targets that were still short,
     and both widen by single-digit pixels inside a flex row, so the 390px overflow result holds. */
  .ck-chip { min-height: 44px; }
  .cq-btn--sm { min-height: 44px; }
  .cq-iconbtn--md { min-width: 44px; min-height: 44px; }
  .ck-foot a, .ck-sec--head a { min-height: 44px; display: inline-flex; align-items: center; }
  .ck-toc a { min-height: 44px; display: flex; align-items: center; }

  /* Breadcrumb "Home" measured 35x44 on every page that has one — 44 tall from the rule above,
     but only 35 wide, which is the whole target, not half of it. The component renders a bare
     <a> with no class inside nav[aria-label="Breadcrumb"], so the aria-label IS the hook. */
  nav[aria-label="Breadcrumb"] a { min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }

  /* The footer's two social icon links, 38x44. They carry an INLINE width:38px, but min-width
     clamps a width regardless of specificity, so this needs no !important. Icon-only links are
     the only ones in the footer carrying an aria-label, which is what makes this selector exact
     rather than a guess at a class the design system does not emit. */
  .ck-foot a[aria-label] { min-width: 44px; justify-content: center; }

  /* SiteNav's logo link, measured 66x32 on every page after the 2026-08-02 nav rework — the
     one target that came back under the line. It is an <a> wrapping only an <img>, so it takes
     the image's height. inline-flex + align-items:center are already on it, so min-height pads
     the hit area without moving or stretching the logo. The over-media variant already cleared
     44px via its white pill's padding; this is the solid header. */
  .ck-hdr__logo { min-height: 44px; }
}

/* ══ 47Built phone pass, 2026-08-02 ══════════════════════════════════════
   Kalvin, on a real phone: the first section under the hero "looks funky", the section below
   "Then we keep it that way" is "broken ... cant see all the text", and Recent work is uneven.
   Everything below is phone-only. Desktop is untouched by every rule in it. */

@media (max-width: 1000px) {
  /* TrustBar renders <div style="display:contents"><ul class=grid>. A rule on .ck-trust > *
     therefore styles a box that generates none, which is why the existing 2-column rule above
     never applied. Reach the <ul>, which is the element actually doing the layout. */
  .ck-trust ul { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 28px !important; }
}
@media (max-width: 620px) {
  /* At 390px even two columns give each item ~160px, and a longer trust claim wraps to
     four ragged lines. One column per claim, icon beside the text. */
  .ck-trust ul { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  .ck-trust ul > li { flex-direction: row !important; align-items: flex-start; gap: 14px; }
  .ck-trust ul > li > svg { flex: none; margin-top: 2px; }

  /* .cqs-row is img + text + meta + arrow, four children in three columns. Place them
     explicitly: the picture and the arrow span both rows, the name sits above its own meta.
     Nothing is hidden, so "Weekly · Biweekly · Monthly" is readable instead of clipped. */
  .cqs-row { grid-template-columns: 64px minmax(0,1fr) 18px; row-gap: 4px; align-items: center; }
  .cqs-row > img { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .cqs-row-text { grid-column: 2; grid-row: 1; }
  .cqs-row-meta { grid-column: 2; grid-row: 2; display: flex !important;
    flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cqs-row-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

/* Six tiles, not five: three columns divides them evenly, two columns on a phone divides them
   evenly, and the old five-wide strip divided nothing. .ck-mosaic--4 (the town pages) is a
   different class and is deliberately left alone. */
.ck-mosaic { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ══ services section (Claude Design direction 1b, 2026-08-02) ══════════
   Source of truth is admin/section-services.css — edit there, not here.
   Everything is .cqs- prefixed so it cannot collide with the .ck- system. */
.cqs { padding: 96px 0; background: #fff; }
.cqs *, .cqs *::before, .cqs *::after { box-sizing: border-box; }
.cqs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 40px; }

/* section header */
.cqs-headrow { display: flex; gap: 64px; align-items: flex-end; flex-wrap: wrap; }
.cqs-headstack { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.cqs-eyebrow { font: 700 13px/1 "Nunito Sans"; letter-spacing: .09em; text-transform: uppercase; color: #0F5BC0; }
.cqs-rule { display: block; width: 28px; height: 2px; background: var(--green-500); }
.cqs-h2 { font: 500 42px/1.12 "Playfair Display"; letter-spacing: -.02em; color: #0B2A5B; margin: 0; text-wrap: balance; }
.cqs-lead { font: 400 16px/1.6 "Nunito Sans"; color: #44526B; margin: 0 0 6px; flex: 1; min-width: 300px; text-wrap: pretty; }

/* flagship band */
.cqs-flag { display: grid; grid-template-columns: 420px minmax(0,1fr); gap: 44px; align-items: start;
  padding: 32px; border-radius: 20px; background: #EEF4FD; border: 1px solid #DCE8FA; }
.cqs-flag-media { position: relative; border-radius: 20px; overflow: hidden; }
.cqs-flag-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
.cqs-flag-media:hover img { transform: scale(1.03); }
.cqs-pill { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; height: 30px;
  padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.92); font: 700 12px/1 "Nunito Sans";
  letter-spacing: .05em; text-transform: uppercase; color: #0F5BC0; box-shadow: 0 1px 2px rgba(11,42,91,.12); }
.cqs-flag-body { display: flex; flex-direction: column; gap: 20px; }
.cqs-h3 { font: 500 34px/1.12 "Playfair Display"; letter-spacing: -.015em; color: #0B2A5B; margin: 0; }
.cqs-flag-lead { font: 400 20px/1.45 "Nunito Sans"; color: #44526B; margin: 0; max-width: 60ch; text-wrap: pretty; }
.cqs-more { font: 600 15px/1.5 "Nunito Sans"; color: #0F5BC0; margin: 0; }
.cqs-hr { height: 1px; background: #DCE8FA; }
.cqs-btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* checklists */
.cqs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; }
.cqs-list--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cqs-list--1 { grid-template-columns: minmax(0,1fr); gap: 8px; }
.cqs-list li { display: flex; gap: 10px; align-items: flex-start;
  font: 400 15px/1.45 "Nunito Sans"; color: #0B2A5B; }
.cqs-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green-500); }

/* buttons */
.cqs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  padding: 0 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font: 600 16px/1 "Nunito Sans"; text-decoration: none;
  transition: background 140ms cubic-bezier(.22,.61,.36,1), transform 90ms cubic-bezier(.22,.61,.36,1); }
.cqs-btn svg { width: 20px; height: 20px; }
.cqs-btn--primary { background: #0F5BC0; color: #fff; }
.cqs-btn--primary:hover { background: #0B4A9E; }
.cqs-btn--secondary { background: #fff; color: #0F5BC0; border-color: #A8C6F0; }
.cqs-btn--secondary:hover { background: #EEF4FD; }
.cqs-btn:active { transform: scale(.985); }
.cqs-btn:focus-visible, .cqs a:focus-visible, .cqs summary:focus-visible { outline: 2px solid #0F5BC0; outline-offset: 2px; }

/* service list */
.cqs-listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cqs-h3--sm { font: 500 28px/1.15 "Playfair Display"; color: #0B2A5B; margin: 0; }
.cqs-alllink { font: 600 15px/1 "Nunito Sans"; color: #0F5BC0; text-decoration: underline;
  text-decoration-color: #DCE8FA; text-underline-offset: 4px; }
.cqs-alllink:hover { color: #0B4A9E; text-decoration-color: currentColor; }
.cqs-rows { display: flex; flex-direction: column; border: 1px solid #D9E4F4; border-radius: 14px;
  overflow: hidden; background: #fff; }
.cqs-row { display: grid; grid-template-columns: 88px minmax(0,1fr) 240px 24px; gap: 22px; align-items: center;
  padding: 16px; border-top: 1px solid #EAF0F8; text-decoration: none;
  transition: background 140ms cubic-bezier(.22,.61,.36,1); }
.cqs-row:first-child { border-top: 0; }
.cqs-row:hover { background: #F4F8FD; }
.cqs-row img { width: 88px; height: 72px; border-radius: 10px; object-fit: cover; display: block; }
.cqs-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cqs-row-name { font: 700 18px/1.25 "Nunito Sans"; color: #0B2A5B; }
.cqs-row-desc { font: 400 15px/1.5 "Nunito Sans"; color: #44526B; }
.cqs-row-meta { display: flex; flex-direction: column; gap: 3px; }
.cqs-row-metalabel { font: 700 12px/1 "Nunito Sans"; letter-spacing: .06em; text-transform: uppercase; color: #55627A; }
.cqs-row-metavalue { font: 600 15px/1.35 "Nunito Sans"; color: #0B2A5B; }
.cqs-row-arrow { display: inline-flex; align-items: center; justify-self: end; color: #0F5BC0; }
.cqs-row-arrow svg { width: 20px; height: 20px; }

/* add-ons */
.cqs-addons { display: flex; flex-direction: column; gap: 26px; padding: 30px 32px; border-radius: 20px;
  background: #F4F8FD; border: 1px solid #D9E4F4; }
.cqs-addons-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.cqs-addon { display: flex; flex-direction: column; background: #fff; border: 1px solid #D9E4F4;
  border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,42,91,.05); }
.cqs-addon-head { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 12px;
  list-style: none; cursor: default; }
.cqs-addon-head::-webkit-details-marker { display: none; }
.cqs-addon-thumb { position: relative; display: block; flex: none; width: 100%; height: 128px;
  border-radius: 10px; overflow: hidden; background: #F4F8FD; }
.cqs-addon-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cqs-addon-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cqs-addon-name { flex: 1; min-width: 0; font: 700 17px/1.25 "Nunito Sans"; color: #0B2A5B; }
.cqs-chev { display: none; flex: none; margin-left: auto; width: 18px; height: 18px; color: #0F5BC0;
  transition: transform 200ms cubic-bezier(.22,.61,.36,1); }
.cqs-addon[open] .cqs-chev { transform: rotate(180deg); }
.cqs-addon-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 0 20px 20px; }
.cqs-addon-blurb { font: 400 14px/1.55 "Nunito Sans"; color: #44526B; margin: 0; text-wrap: pretty; }
.cqs-note { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid #EAF0F8; }
.cqs-note span { font: 700 12px/1 "Nunito Sans"; letter-spacing: .06em; text-transform: uppercase; color: #55627A; }
.cqs-note p { font: 400 13px/1.55 "Nunito Sans"; color: #55627A; margin: 0; text-wrap: pretty; }

/* ── tablet ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cqs { padding: 72px 0; }
  .cqs-h2 { font-size: 38px; }
  .cqs-flag { grid-template-columns: 320px minmax(0,1fr); gap: 32px; }
  .cqs-list--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cqs-row { grid-template-columns: 88px minmax(0,1fr) 24px; }
  .cqs-row-meta { display: none; }
  .cqs-addons-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .cqs { padding: 56px 0; }
  .cqs-wrap { padding: 0 20px; gap: 28px; }
  .cqs-headrow { gap: 12px; }
  .cqs-h2 { font-size: 32px; }
  .cqs-lead { margin: 0; min-width: 0; }

  .cqs-flag { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 16px; border-radius: 20px; }
  .cqs-flag-media { border-radius: 14px; }
  .cqs-flag-media img { aspect-ratio: 4/3; }
  .cqs-h3 { font-size: 26px; }
  .cqs-flag-lead { font-size: 16px; line-height: 1.55; }
  .cqs-list--3 { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .cqs-btn { width: 100%; }

  .cqs-h3--sm { font-size: 24px; }
  .cqs-row { grid-template-columns: 64px minmax(0,1fr) 18px; gap: 14px; padding: 14px; min-height: 76px; }
  .cqs-row img { width: 64px; height: 56px; border-radius: 8px; }
  .cqs-row-name { font-size: 16px; }
  .cqs-row-desc { display: none; }
  .cqs-row-meta { display: flex; }
  .cqs-row-metalabel { display: none; }
  .cqs-row-metavalue { font: 400 14px/1.45 "Nunito Sans"; color: #44526B; }
  .cqs-row-arrow svg { width: 18px; height: 18px; }

  /* add-ons collapse to a tap-to-open accordion */
  .cqs-addons { gap: 18px; padding: 20px 18px; border-radius: 16px; }
  .cqs-addons-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .cqs-addon[open] { border: 2px solid #0F5BC0; }
  .cqs-addon-head { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px;
    min-height: 72px; cursor: pointer; }
  .cqs-addon-thumb { width: 64px; height: 64px; }
  .cqs-addon-title { flex: 1; }
  .cqs-chev { display: inline-flex; }
  .cqs-addon-body { padding: 0 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cqs *, .cqs *::before, .cqs *::after { transition-duration: 0ms !important; }
}

/* ══ phone ═════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ck-wrap { padding: 0 20px; }
  .ck-sec, .ck-sec--close { padding: 56px 0; }
  .ck-sec--tight { padding: 40px 0; }

  .ck-h1 { font-size: 44px; }
  .ck-h1--page { font-size: 38px; }
  .ck-h2 { font-size: 34px; }
  .ck-h3 { font-size: 26px; }
  .ck-h4 { font-size: 22px; }
  .ck-lead { font-size: 17px; }
  .ck-prose { font-size: 17px; }

  .ck-services { grid-template-columns: minmax(0,1fr); }
  .ck-span-4, .ck-span-3, .ck-span-2 { grid-column: span 1; }
  .ck-mosaic, .ck-mosaic--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ck-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 16px; }
  .ck-towngrid { grid-template-columns: minmax(0,1fr); }
  .ck-videos { gap: 12px; }

  /* full-width 50px buttons */
  .ck-btnrow { flex-direction: column; align-items: stretch; width: 100%; }
  .ck-btnrow > * { width: 100%; }
  .ck-btnrow .cq-btn { width: 100%; min-height: 50px; }

  /* the hero flows on phone: fixed height + absolute foot made the content
     overflow upward and slide behind the logo bar */
  .ck-hero { height: auto; min-height: 0; max-height: none; }
  .ck-hero__foot { position: relative; padding: 40px 20px 44px; }
  .ck-hero__copy { gap: 14px; }
  .ck-hero__pills { flex-direction: column; align-items: stretch; width: 100%; }
  .ck-hero__pills > * { width: 100%; justify-content: center; }
  .ck-pill--video { justify-content: flex-start; }

  /* 47Built fix 2026-08-01 — phone hero was unreadable: content covered 92% of a 390x844
     screen (measured), leaving 68px of video, all of it behind the logo bar. The video Kalvin
     kept deliberately was invisible. DESKTOP IS UNTOUCHED: on desktop .ck-hero__row lays the
     pills BESIDE the copy, so they cost no vertical space and none of this applies.

     Anchored with flexbox, NOT by making .ck-hero__foot absolute again — see the 2026-07-31
     note above, that is exactly what pushed the copy up behind the logo bar last time.
     margin-top:auto keeps the foot in normal flow AND above the scrim. */
  .ck-hero { min-height: 100svh; display: flex; flex-direction: column; }
  .ck-hero__foot { margin-top: auto; }

  /* Kalvin 2026-08-01: on phone the two pills sit SIDE BY SIDE at half width each — reviews on
     one side, Sandrine on the other — instead of one full-width bar. Overrides the column/stretch
     rules set above. Desktop is unaffected: there .ck-hero__pills is a right-aligned column
     beside the copy.

     THERE USED TO BE A THIRD PILL and a `> *:nth-child(2) { display:none }` rule to drop it on
     phone. Kalvin had the properties-count pill removed on 2026-08-02, and it now comes out
     at build time via a required placeholder — so nth-child(2) had quietly become the Sandrine pill,
     and the phone hero was shipping ONE full-width pill, not the pair described here. Verified
     on the deployed preview at 390px before the rule was dropped. A positional selector over
     markup that a placeholder edits is a trap; do not reintroduce one. */
  .ck-hero__pills { flex-direction: row; align-items: stretch; gap: 10px; }
  .ck-hero__pills > * { width: auto; flex: 1 1 0; min-width: 0; }
  .ck-hero__pills .ck-pill { padding: 10px 12px; justify-content: center; }

  /* Sandrine has to shed weight to survive at ~165px: the subtitle and the arrow button go, leaving
     avatar + title. The arrow's x-import wrapper carries inline display:contents, hence the
     !important — see the DS inline-style trap. */
  .ck-pill--video { justify-content: center; gap: 8px; padding: 8px 12px 8px 8px; }
  .ck-pill--video .ck-pill__vsub,
  .ck-pill--video .ck-pill__varrow { display: none !important; }
  .ck-pill--video .ck-pill__vtitle { font-size: 13px !important; line-height: 1.2; }
  .ck-pill--video .ck-pill__avatar { width: 34px; height: 34px; }

  /* The DS StarRating lays its stars and its rating label on ONE 220px row, which
     overflows a 170px half-width pill (measured: 195px content in a 170px box). Stacking them
     inside the pill fits at 106px wide without shrinking the stars, and lands the same 54px
     height as the Sandrine pill so the pair reads as one unit. */
  .ck-hero__pills > *:first-child .sc-host-x > span {
    flex-direction: column !important; gap: 2px !important; align-items: center;
  }

  /* Phone-only copy trim. The text lives ONCE in the markup and the part the phone does not
     need is wrapped in .ck-trim-sm, so desktop still reads the full sentence and there is no
     duplicated copy to keep in sync. The lead's closing full stop sits OUTSIDE the span on
     purpose, so the short version still ends on a full sentence. */
  .ck-trim-sm { display: none !important; }

  /* There used to be a rule here hiding .ck-hero__copy .ck-eyebrow on phone, which was the line
     "Residential & commercial · Southern Massachusetts". Kalvin removed the line
     outright on 2026-08-02 ("remove the top text in the hero thee residential line"), so it now
     comes out of the markup for every screen via a required placeholder in client-data.json,
     and a rule hiding an element that no longer exists is just a thing to be puzzled by later. */

  /* One primary action on the phone. "Book now" and "Get a quote" were two equal-weight
     full-width buttons stacked (116px), and the phone call button already sits in the header.
     !important is required, not sloppiness: each x-import wrapper carries an INLINE
     style="display:contents", and an inline style beats a class rule. Without it this
     declaration is silently dropped and both buttons still render (verified). */
  .ck-hero__copy .ck-btnrow > *:nth-child(2) { display: none !important; }
  .ck-mapframe iframe { height: 300px; }

  .ck-promo__backdrop { padding: 16px; }
  .ck-promo { max-height: calc(100vh - 32px); }
  .ck-promo__img { height: 150px; }

  .ck-hdr__bar { padding: 0 16px; }
  .ck-sheet__body { padding: 18px 16px 48px; }
  .ck-foot > div > div { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  .ck-foot > div { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ══ Mobile QA round 3, 2026-10-07 ═══════════════════════════════════════
   Three reviewers walked every page at 375 and 390px (docs/MOBILE-REVIEW-1..3.md).
   Each rule below names the finding it answers. */

/* Sticky header on inner pages. SiteNav renders inside the dc runtime's own wrapper
   (div.sc-host) which is exactly the header's height, so position:sticky on the header had no
   room to stick and the bar scrolled away after 69px. The wrapper sticks instead. The home
   page's transparent hero header (data-over="1") is excluded: home has its own fixed bar. */
.sc-host:has(> header.ck-hdr:not([data-over="1"])) { position: sticky; top: 0; z-index: 40; }

/* Jump targets land below the sticky bar (68px + border on phones, 76px on desktop). */
[id] { scroll-margin-top: 84px; }
@media (min-width: 1001px) { [id] { scroll-margin-top: 92px; } }
/* CQ-18: focus moved by Shift+Tab lands below the sticky header too, not under it. */
html { scroll-padding-top: 84px; }
@media (min-width: 1001px) { html { scroll-padding-top: 92px; } }
/* CQ-18: stat values ("Mon-Sat") no longer push a 320px screen sideways. The DS sets the size
   inline, hence !important. */
@media (max-width: 640px) {
  .ck-stats > div > span:first-child, .ck-stats > * > div > span:first-child { font-size: clamp(32px, 11vw, 44px) !important; }
}

/* Home page with the menu open: the see-through hero bar showed a band of photo above the
   white sheet. Solid while the sheet is open. */
.ck-hdr[data-over="1"]:has(.ck-sheet) { background: #fff; }

/* Menu sheet: the fold labels started 14px right of the rows under them. */
.ck-sheet__fold > summary { padding-left: 2px; padding-right: 2px; }

/* Service-area map: on touch and narrow screens the iframe ignores touches until tapped once
   (47b-cta.js adds .is-live), so a thumb scrolling the page is never caught by the map. */
.ck-mapframe { position: relative; }
@media (max-width: 1000px), (pointer: coarse) {
  .ck-mapframe:not(.is-live) iframe { pointer-events: none; }
  .ck-mapframe:not(.is-live)::after {
    content: "Tap to explore the map"; position: absolute; right: 12px; bottom: 30px;
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    background: rgba(11,42,91,.88); color: #fff; font: 700 13px/1 'Nunito Sans', system-ui, sans-serif;
    white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(11,42,91,.25);
  }
  .ck-mapframe:not(.is-live) { cursor: pointer; }
}

/* Small stand-alone links that were 15 to 27px tall: 44px tap height. */
.cqs-alllink { display: inline-flex; align-items: center; min-height: 44px; }
a[data-reviews-maps] { display: inline-flex; align-items: center; min-height: 44px; }
.ck-headrow > p.ck-body > a, .ck-stack--head > p.ck-body > a { display: inline-flex; align-items: center; min-height: 44px; }

/* Blog posts: headings wrap in balanced lines, not with one word left over. */
.cqb-body h2, .cqb-body h3 { text-wrap: balance; }

@media (max-width: 1000px) {
  /* Closing call-to-action headings were 50px, bigger than the page titles. */
  .ck-sec--close .ck-h2 { font-size: 40px !important; line-height: 1.12 !important; }
}

@media (max-width: 640px) {
  /* Big inline section headings scale down to the phone h2 size (they were 40 to 50px and
     left one or two words per line). The closing CTA sits below every page title. */
  .ck-h2[style*="font-size:4"], .ck-h2[style*="font-size:5"],
  .ck-h2[style*="font-size:38px"], .ck-h2[style*="font-size:36px"] { font-size: 34px !important; line-height: 1.16 !important; }
  .ck-sec--close .ck-h2 { font-size: 32px !important; }

  /* Trust strip under the home hero: icon in its own column, label above its detail, so every
     row starts at the same left edge (four different edges before). The DS sets display:flex
     inline, hence !important. */
  .ck-trust ul > li { display: grid !important; grid-template-columns: 22px minmax(0,1fr); column-gap: 14px; row-gap: 2px; }
  .ck-trust ul > li > svg { grid-row: 1 / span 2; margin-top: 2px; }
  .ck-trust ul > li > span { grid-column: 2; }

  /* Breadcrumb on one line; the current page shortens with an ellipsis instead of wrapping
     under a dangling arrow. */
  nav[aria-label="Breadcrumb"] { flex-wrap: nowrap !important; max-width: 100%; min-width: 0; }
  nav[aria-label="Breadcrumb"] > a, nav[aria-label="Breadcrumb"] > svg { flex: none; }
  nav[aria-label="Breadcrumb"] > span[aria-current] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Post byline: the author name and its dot drop on phones so the date and read time stay on one line. */
  .cqb-meta > span:nth-child(-n+2) { display: none; }

  /* Footer was 1,940px (2.4 screens). Smaller logo plate, no repeat of the hero blurb, the
     service links in two columns, areas and company side by side. Every link stays a 44px row. */
  .ck-foot > div { padding-top: 36px !important; padding-bottom: 24px !important; }
  .ck-foot > div > div:first-child { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px 16px !important; }
  .ck-foot > div > div:first-child > div:first-child { grid-column: 1 / -1; gap: 14px !important; }
  .ck-foot > div > div:first-child > div:first-child > p { display: none !important; }
  .ck-foot > div > div:first-child > div:first-child > span:first-child { padding: 6px 10px !important; }
  .ck-foot > div > div:first-child > div:first-child > span:first-child img { height: 32px !important; width: auto !important; }
  .ck-foot > div > div:first-child > div:nth-child(2) { grid-column: 1 / -1; column-count: 2; column-gap: 16px; }
  .ck-foot > div > div:first-child > div:nth-child(2) > div:first-child { column-span: all; margin-bottom: 4px; }
  .ck-foot > div > div:first-child > div:not(:first-child) > a { display: flex !important; align-items: center; break-inside: avoid; line-height: 1.3; }
  .ck-foot > div > div:last-child { margin-top: 24px !important; padding-top: 18px !important; }
  .ck-foot > div > div:last-child span { font-size: 14px !important; }
}

/* Service-area hub on a phone: eighteen full-width photo cards made a 12,100px page. Two
   columns of compact cards (photo and town name) instead; the town page carries the detail. */
@media (max-width: 640px) {
  .ck-towngrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .ck-towngrid > a.ck-card { padding: 8px !important; }
  .ck-towngrid > a.ck-card > span:first-child { border-radius: 8px !important; }
  .ck-towngrid > a.ck-card img { aspect-ratio: 3 / 2 !important; }
  .ck-towngrid > a.ck-card > span:last-child { padding: 8px 2px 2px !important; gap: 0 !important; }
  .ck-towngrid > a.ck-card > span:last-child > span:not(:first-child) { display: none !important; }
  .ck-towngrid > a.ck-card .ck-h4 { font-size: 18px !important; line-height: 1.25; }
}

/* Menu sheet: the row for the page you are on, and a soft fade at the bottom that says the
   list scrolls (Careers sat 120px below the edge with no hint). */
.ck-sheet a[aria-current="page"] { background: #EEF4FD; box-shadow: inset 3px 0 0 #0F5BC0; padding-left: 12px; }
.ck-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0), #fff); }
/* Breadcrumb text was 13px. */
nav[aria-label="Breadcrumb"] > a, nav[aria-label="Breadcrumb"] > span { font-size: 14px !important; }
@media (max-width: 640px) {
  .ck-towngrid > a.ck-card img { aspect-ratio: 2 / 1 !important; }
  /* Closing CTA photo: a wide strip on phones instead of a near-square block. */
  .ck-sec--close .ck-media img { aspect-ratio: 16 / 10 !important; }
  /* Footer bottom line: the town list repeats the Service areas column right above it. */
  .ck-foot > div > div:last-child > span:nth-child(2) { display: none !important; }
  .ck-foot > div > div:first-child > div:first-child > div { gap: 4px !important; }
}
@media (max-width: 640px) {
  /* Blog post titles are set inline at 44px; on a phone "post-construction" (kept whole) filled the line. */
  .cqb-hero .ck-h1 { font-size: 36px !important; }
}
@media (max-width: 640px) {
  .ck-towngrid > a.ck-card img { aspect-ratio: 5 / 2 !important; }
  .ck-sec--close .ck-split { gap: 28px !important; }
}