/* ================================================
   FONT
   Archivo, variable (width 62-125%, weight 400-900), self-hosted. Same
   three unicode-range subsets Google Fonts served, so a page only
   downloads the ones its text needs (nearly always just latin).
================================================ */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================
   TOKENS
   Palette sampled from the logo badge: brushed steel
   and the deep crystalline blue in the gear ring.
================================================ */
:root {
  /* ground: the near-black steel plate the badge sits on */
  --ink-0: oklch(0.160 0.012 240);
  --ink-1: oklch(0.205 0.014 240);
  --ink-2: oklch(0.255 0.016 240);
  --ink-3: oklch(0.320 0.018 240);

  /* the logo blue, pushed to full conviction */
  --blue-300: oklch(0.815 0.085 230);
  --blue-400: oklch(0.735 0.115 232);
  --blue-500: oklch(0.635 0.145 234);
  --blue-600: oklch(0.530 0.150 236);
  --blue-700: oklch(0.445 0.130 238);
  --blue-800: oklch(0.355 0.105 239);
  --blue-900: oklch(0.280 0.080 240);

  /* brushed steel: hairlines, machined edges */
  --steel:    oklch(0.720 0.010 240);
  --steel-d:  oklch(0.480 0.010 240);

  --star: oklch(0.82 0.155 85);
  --ok:   oklch(0.74 0.155 152);

  --t1: oklch(0.975 0.004 240);
  --t2: oklch(0.815 0.012 240);
  --t3: oklch(0.660 0.014 240);

  --line:      oklch(0.975 0.004 240 / 11%);
  --line-s:    oklch(0.975 0.004 240 / 19%);
  --line-blue: oklch(0.635 0.145 234 / 42%);

  --r-sm: 6px;
  --r:    11px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* the logo is a machined badge: thick concentric rings, brushed steel,
     rounded shoulders. these three carry that material onto flat surfaces. */
  --sheen: linear-gradient(101deg, transparent 12%, oklch(1 0 0 / 7%) 46%, transparent 74%);
  --ring: 0 0 0 1px oklch(0.975 0.004 240 / 9%) inset, 0 0 0 4px oklch(0.160 0.012 240) inset, 0 0 0 5px oklch(0.635 0.145 234 / 32%) inset;
  --hair: 1.5px;

  --plate: 0 1px 0 oklch(1 0 0 / 7%) inset, 0 26px 60px -24px oklch(0 0 0 / 85%);
  --plate-hi: 0 1px 0 oklch(1 0 0 / 10%) inset, 0 34px 76px -26px oklch(0 0 0 / 92%);
  --cta-shadow: 0 1px 0 oklch(1 0 0 / 28%) inset, 0 14px 34px -12px oklch(0.530 0.150 236 / 62%);

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-q: cubic-bezier(.25,1,.5,1);

  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 80;
  --z-nav: 100;
  --z-menu: 200;
  --z-backdrop: 300;
  --z-modal: 310;
}

/* ================================================
   BASE
================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink-0);
  color: var(--t1);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* photos are wrapped in <picture> to offer AVIF; the wrapper must not take
   part in layout so the img keeps sizing against its original parent */
picture { display: contents; }
button, input { font-family: inherit; }
::selection { background: var(--blue-600); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px;
  z-index: calc(var(--z-menu) + 1);
  background: var(--blue-600); color: #fff;
  font-weight: 700; padding: 12px 20px; border-radius: var(--r-pill);
}
.skip-link:focus { left: 12px; }

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

/* ================================================
   TYPE SCALE
   One family (Archivo variable), carried by width
   and weight contrast. Display is condensed heavy,
   the way it reads stencilled on the side of a truck.
================================================ */
/* The badge is wide, heavy and machined, so the display type is too:
   Archivo pushed to the top of its width axis reads like lettering
   stamped into a steel plate, not a condensed newspaper headline. */
.h1 {
  font-size: clamp(33px, 4.2vw, 56px);
  font-weight: 800;
  font-stretch: 116%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  font-stretch: 114%;
  line-height: 1.04;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.18;
  letter-spacing: -0.014em;
}
.h1 em, .h2 em { font-style: normal; color: var(--blue-400); }

.lead {
  font-size: clamp(16.5px, 1.3vw, 19px);
  color: var(--t2);
  line-height: 1.68;
  max-width: 64ch;
  text-wrap: pretty;
}
.sub { color: var(--t3); font-size: 15px; }

/* ================================================
   LAYOUT
================================================ */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 34px); }
.wrap-wide { max-width: 1480px; }

section { position: relative; padding: clamp(72px, 9vw, 124px) 0; scroll-margin-top: 84px; }
.sec-alt { background: var(--ink-1); }

.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 60px); }
.sec-head .lead { margin-top: 16px; }
.sec-head-c { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.sec-head-c .lead { margin-left: auto; margin-right: auto; }
/* heading left, one CTA on the right — for sections that link out
   somewhere else instead of just introducing what follows below */
.sec-head-split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; max-width: none;
}
.sec-head-split .sec-head-copy { max-width: 720px; }
.sec-head-split .btn { flex-shrink: 0; }
.sec-head-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
@media (max-width: 700px) {
  .sec-head-split { flex-direction: column; align-items: flex-start; }
  .sec-head-split .btn { align-self: flex-start; }
  .sec-head-actions { align-self: stretch; }
  .sec-head-actions .btn { align-self: flex-start; }
}

/* a hairline rule with a blue tick, used sparingly as section punctuation */
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.rule b {
  font-size: 13px; font-weight: 700; font-stretch: 104%;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-400);
  white-space: nowrap;
}

/* ================================================
   BUTTONS
================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 32px; border-radius: var(--r-pill);
  font-size: 16.5px; font-weight: 700; font-stretch: 106%;
  letter-spacing: 0.004em;
  cursor: pointer; border: none; min-height: 56px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
/* the light sweeping across brushed metal */
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--sheen);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn svg { flex-shrink: 0; width: 19px; height: 19px; }

.btn-cta {
  background: linear-gradient(178deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: var(--cta-shadow);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 oklch(1 0 0 / 32%) inset, 0 20px 46px -12px oklch(0.530 0.150 236 / 75%);
}
.btn-ghost {
  background: oklch(1 0 0 / 5%);
  color: var(--t1);
  border: var(--hair) solid var(--line-s);
  box-shadow: 0 1px 0 oklch(1 0 0 / 9%) inset;
}
.btn-ghost:hover { background: oklch(1 0 0 / 9%); border-color: var(--line-blue); transform: translateY(-2px); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ================================================
   NAV: a solid steel bar, not a floating pill
================================================ */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  background: oklch(0.160 0.012 240 / 86%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--hair) solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* a machined edge on the bar itself: hairline of blue under brushed steel */
#hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-blue) 22%, var(--line-blue) 78%, transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
#hdr.on {
  background: oklch(0.160 0.012 240 / 97%);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 40px -22px oklch(0 0 0 / 90%);
}
#hdr.on::after { opacity: 1; }
.hdr-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 13px; padding-bottom: 13px;
  transition: padding .35s var(--ease);
}
#hdr.on .hdr-inner { padding-top: 9px; padding-bottom: 9px; }

.brand-lockup { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* the mark is cut out now, so it sits on the bar as a badge, not a circle crop */
.brand-logo { height: 48px; width: 48px; object-fit: contain; flex-shrink: 0; transition: height .35s var(--ease), width .35s var(--ease); }
#hdr.on .brand-logo { height: 41px; width: 41px; }
.brand-text { line-height: 1.04; }
.brand-name {
  display: block; font-size: 17px; font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.018em; text-transform: uppercase; color: var(--t1);
}
.brand-sub {
  display: block; font-size: 10px; font-weight: 700; font-stretch: 106%;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-400); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links > li { position: relative; }
.nav-links a, .nav-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; font-stretch: 104%; color: var(--t2);
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover, .nav-trigger:hover { color: var(--t1); background: oklch(1 0 0 / 6%); }
.nav-trigger svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.nav-trigger[aria-expanded="true"] { color: var(--t1); background: oklch(1 0 0 / 7%); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- services dropdown ---- */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: var(--z-dropdown);
  width: 344px; padding: 8px;
  background: linear-gradient(168deg, var(--ink-2), var(--ink-1));
  border: var(--hair) solid var(--line-s);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 68px -24px oklch(0 0 0 / 94%), 0 1px 0 oklch(1 0 0 / 8%) inset;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 20% 0;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s .24s;
}
.has-menu.open .dropdown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
/* a hover bridge so the pointer can cross the gap without the menu closing */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.dd-item {
  display: grid !important; grid-template-columns: 38px 1fr; gap: 13px; align-items: center;
  padding: 11px 13px !important; border-radius: 16px !important;
  color: var(--t1) !important; font-size: 15px !important; font-weight: 600 !important;
}
.dd-item:hover { background: oklch(0.635 0.145 234 / 15%) !important; }
.dd-item > .dd-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: oklch(0.635 0.145 234 / 14%);
  border: var(--hair) solid var(--line-blue);
  display: flex; align-items: center; justify-content: center; color: var(--blue-300);
  margin: 0; font-size: 0; line-height: 0;
}
.dd-ico svg { width: 19px; height: 19px; display: block; }
.dd-item > span:last-child { display: block; min-width: 0; }
.dd-item b { display: block; font-weight: 700; font-stretch: 104%; letter-spacing: -0.008em; }
.dd-item b + span { display: block; font-size: 12.5px; font-weight: 500; color: var(--t3); margin-top: 2px; line-height: 1.35; }
.dd-foot {
  margin: 6px 4px 2px; padding-top: 10px; border-top: 1px solid var(--line);
}
.dd-foot a {
  display: flex !important; align-items: center; justify-content: space-between;
  font-size: 13.5px !important; color: var(--blue-300) !important; font-weight: 600 !important;
}
.dd-foot a:hover { color: var(--blue-200, var(--blue-300)) !important; background: oklch(1 0 0 / 5%) !important; }
.dd-foot svg { width: 15px; height: 15px; }

/* ---- service area dropdown: a town-pill grid instead of the icon list ---- */
.dropdown-wide { width: 420px; padding: 16px 14px 12px; }
.dd-area-head { padding: 0 4px 12px; }
.dd-area-head b { display: block; font-size: 15px; font-weight: 700; font-stretch: 104%; letter-spacing: -0.008em; color: var(--t1); }
.dd-area-head span { display: block; font-size: 12.5px; color: var(--t3); margin-top: 2px; }
.dd-towns {
  list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 4px 4px;
}
.dd-towns li {
  padding: 7px 12px; border-radius: var(--r-pill);
  border: var(--hair) solid var(--line-s);
  background: oklch(1 0 0 / 4%);
  font-size: 13px; font-weight: 600; color: var(--t2);
}
.dd-towns li.hub { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 16%); color: var(--t1); }

/* ---- mobile: same town list, plain wrap instead of a dropdown panel ---- */
.mm-towns { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 10px; }
.mm-town {
  padding: 8px 13px; border-radius: var(--r-pill);
  border: var(--hair) solid var(--line-s);
  background: oklch(1 0 0 / 4%);
  font-size: 13.5px; font-weight: 600; color: var(--t2);
}
.mm-town.hub { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 16%); color: var(--t1); }
.mm-town-call { width: 100%; margin-top: 4px; padding: 12px 0 4px !important; color: var(--blue-300) !important; font-weight: 600 !important; font-size: 14.5px !important; }
.nav-call {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(178deg, var(--blue-500), var(--blue-700));
  color: #fff; padding: 12px 22px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; font-stretch: 106%; white-space: nowrap;
  box-shadow: var(--cta-shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  min-height: 46px;
}
.nav-call:hover { transform: translateY(-1px); }
.nav-call svg { width: 15px; height: 15px; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: transparent; border: none; padding: 12px; border-radius: var(--r-sm); }
.hamburger span { display: block; width: 22px; height: 2.5px; background: var(--t1); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 76px 14px auto 14px; z-index: var(--z-menu);
  background: oklch(0.205 0.014 240);
  border: 1px solid var(--line-s);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: 0 30px 70px -20px oklch(0 0 0 / 92%);
  /* the services group opens by default, so this list can run long on a
     short phone; scroll it inside its own box rather than push off-screen */
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a { display: block; padding: 15px 18px; border-radius: var(--r-pill); font-size: 16.5px; font-weight: 600; color: var(--t1); }
.mobile-menu a:hover { background: oklch(1 0 0 / 6%); }

/* services group: open by default so the four services are visible
   the moment the menu is, no second tap to discover them */
.mm-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: var(--r-pill); cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; color: var(--t1);
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary svg { width: 16px; height: 16px; color: var(--blue-400); transition: transform .3s var(--ease); }
.mm-group[open] > summary svg { transform: rotate(180deg); }
.mm-sub { padding: 2px 0 8px 10px; margin-left: 8px; border-left: 1px solid var(--line-s); }
.mm-sub a { font-size: 15.5px; font-weight: 500; color: var(--t2); padding: 12px 14px; }
.mm-sub a:hover { color: var(--t1); }
.mm-call {
  margin-top: 10px;
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(178deg, var(--blue-500), var(--blue-700));
  color: #fff !important; font-weight: 700 !important;
}

/* ================================================
   CONTACT CHOOSER
   One button, three ways in. Native <dialog> so focus
   trapping, Escape and inertness come from the platform.
================================================ */
.contact-dialog {
  width: min(520px, calc(100vw - 32px));
  margin: auto;
  padding: 0; border: none; background: transparent;
  color: var(--t1);
  max-height: calc(100dvh - 40px);
}
.contact-dialog::backdrop {
  background: oklch(0.09 0.008 240 / 74%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.cd-plate {
  background: linear-gradient(168deg, var(--ink-2) 0%, var(--ink-1) 100%);
  border: var(--hair) solid var(--line-s);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -26px oklch(0 0 0 / 94%), 0 1px 0 oklch(1 0 0 / 9%) inset;
  padding: clamp(22px, 4vw, 30px);
}
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.cd-head h2 { font-size: 23px; font-weight: 800; font-stretch: 110%; letter-spacing: -0.022em; text-transform: uppercase; line-height: 1.1; }
.cd-sub { color: var(--t3); font-size: 14.5px; margin-bottom: 20px; }
.cd-close {
  flex-shrink: 0; width: 38px; height: 38px; margin: -6px -6px 0 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: var(--hair) solid var(--line-s);
  background: oklch(1 0 0 / 4%); color: var(--t2); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.cd-close:hover { color: var(--t1); background: oklch(1 0 0 / 9%); border-color: var(--line-blue); }
.cd-close svg { width: 17px; height: 17px; }

.cd-opts { display: flex; flex-direction: column; gap: 10px; }
.cd-opt {
  display: grid; grid-template-columns: 46px 1fr 18px; align-items: center; gap: 15px;
  padding: 15px 19px; min-height: 84px;
  border-radius: 22px;
  border: var(--hair) solid var(--line-s);
  background: oklch(1 0 0 / 3.5%);
  color: var(--t1); text-align: left; width: 100%;
  font-family: inherit; font-size: 16px; cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.cd-opt:hover { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 12%); transform: translateY(-2px); }
.cd-opt > .cd-opt-ico {
  width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
  background: oklch(0.635 0.145 234 / 15%);
  border: var(--hair) solid var(--line-blue);
  display: flex; align-items: center; justify-content: center; color: var(--blue-300);
  margin: 0; font-size: 0; line-height: 0;
}
.cd-opt-ico svg { width: 21px; height: 21px; display: block; }
.cd-opt > span:nth-child(2) { display: block; min-width: 0; }
/* the middle grid track needs min-width:0 or a long unbroken string
   (the email address) forces the track wide and overflows the card */
.cd-opt b { display: block; font-size: 16.5px; font-weight: 700; font-stretch: 104%; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cd-opt b + span { display: block; min-width: 0; font-size: 13.5px; color: var(--t3); margin-top: 3px; overflow-wrap: anywhere; }
.cd-opt > svg:last-child { width: 18px; height: 18px; color: var(--t3); }
.cd-opt:hover > svg:last-child { color: var(--blue-300); }
.cd-primary { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 11%); }
.cd-note { margin-top: 18px; font-size: 13px; color: var(--t3); text-align: center; }

.js .contact-dialog[open] .cd-plate { animation: cdIn .34s var(--ease) both; }
@keyframes cdIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .contact-dialog[open] .cd-plate { animation: none; } }

/* ================================================
   HERO: let the photograph be the design
================================================ */
.hero {
  position: relative;
  min-height: min(94svh, 820px);
  display: flex; align-items: flex-end;
  padding: 142px 0 0;
  overflow: hidden;
  isolation: isolate;
}
/* The photo is inset to the right so the crew member on the bins lands in
   the open half of the frame; the left of the hero is flat ink, and the
   two are joined by a blur that dissolves rather than a hard edge. */
.hero-photo { position: absolute; inset: 0 0 0 50%; z-index: -3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 26%; }
.hero-fade {
  position: absolute; inset: 0; z-index: -2;
  backdrop-filter: blur(34px) saturate(112%);
  -webkit-backdrop-filter: blur(34px) saturate(112%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.5) 63%, transparent 73%);
  mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.5) 63%, transparent 73%);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      var(--ink-0) 0%,
      var(--ink-0) 44%,
      oklch(0.160 0.012 240 / 90%) 55%,
      oklch(0.160 0.012 240 / 46%) 65%,
      oklch(0.160 0.012 240 / 12%) 75%,
      transparent 84%),
    linear-gradient(184deg, oklch(0.160 0.012 240 / 52%) 0%, transparent 26%, transparent 58%, oklch(0.160 0.012 240 / 82%) 88%, var(--ink-0) 99%);
}
/* a faint graph-paper texture over the flat ink, concentrated top-left
   where the nav sits and fading out before it reaches the photo */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, oklch(1 0 0 / 13%) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, oklch(1 0 0 / 13%) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 28%, transparent 58%);
  mask-image: linear-gradient(135deg, #000 0%, #000 28%, transparent 58%);
}
/* the graph paper stays on a phone too, just fainter and pulled tighter
   into the top-left corner so it reads behind the headline without
   fighting the photo underneath it */
@media (max-width: 900px) {
  .hero-grid {
    background-image:
      repeating-linear-gradient(0deg, oklch(1 0 0 / 9%) 0 1px, transparent 1px 38px),
      repeating-linear-gradient(90deg, oklch(1 0 0 / 9%) 0 1px, transparent 1px 38px);
    -webkit-mask-image: linear-gradient(150deg, #000 0%, #000 18%, transparent 46%);
    mask-image: linear-gradient(150deg, #000 0%, #000 18%, transparent 46%);
  }
}
@media (max-width: 900px) {
  /* on a phone there is no room for a side-by-side split: the photo goes
     full bleed again and the same treatment runs top-to-bottom */
  .hero-photo { inset: 0; }
  .hero-photo img { object-position: 56% 20%; }
  /* the copy fills the whole screen here, so the photo becomes texture:
     blurred nearly everywhere, with only the top edge left sharp */
  .hero-fade {
    backdrop-filter: blur(22px) saturate(110%);
    -webkit-backdrop-filter: blur(22px) saturate(110%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 15%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 15%, #000 30%);
  }
  .hero-scrim {
    background: linear-gradient(184deg,
      oklch(0.160 0.012 240 / 42%) 0%,
      oklch(0.160 0.012 240 / 74%) 20%,
      oklch(0.160 0.012 240 / 88%) 52%,
      var(--ink-0) 94%);
  }
}
.hero-inner { position: relative; width: 100%; padding-bottom: clamp(30px, 4vw, 46px); }
/* the text is held to a readable measure, but the stat row is free to
   spread so it stays on one line on wide screens */
.hero-copy { max-width: 1120px; }
.hero h1, .hero-deck, .hero .lead, .hero .cta-row { max-width: min(100%, 620px); }

.hero h1 { text-shadow: 0 2px 26px oklch(0 0 0 / 45%); }
/* the plain-language line under the headline: what this company actually
   does, in the words someone would type into Google */
.hero-deck {
  margin-top: 16px;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 600; font-stretch: 106%;
  line-height: 1.22; letter-spacing: -0.014em;
  color: var(--t2);
  text-shadow: 0 2px 18px oklch(0 0 0 / 55%);
}
.hero .lead { margin: 20px 0 30px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px);
  margin-top: clamp(34px, 4.5vw, 50px);
  padding-top: 26px;
  border-top: 1px solid var(--line-s);
}
.hstat b {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(26px, 3vw, 34px); font-weight: 800; font-stretch: 82%;
  line-height: 1; color: var(--t1); letter-spacing: -0.02em;
}
/* :not(.stars) so the gold star inside the number keeps its own colour */
.hstat > span:not(.stars) { display: block; font-size: 13.5px; color: var(--t3); margin-top: 7px; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 16px; height: 16px; }
.hstat .stars svg { width: 20px; height: 20px; }

/* first-load choreography: one orchestrated entrance, not a per-section reflex */
.js .hero-reveal > * { animation: rise .9s var(--ease) both; }
.js .hero-reveal > *:nth-child(1) { animation-delay: .05s; }
.js .hero-reveal > *:nth-child(2) { animation-delay: .13s; }
.js .hero-reveal > *:nth-child(3) { animation-delay: .21s; }
.js .hero-reveal > *:nth-child(4) { animation-delay: .29s; }
.js .hero-reveal > *:nth-child(5) { animation-delay: .37s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero-reveal > * { animation: none; } }

/* ================================================
   TRUST BAND
================================================ */
.band {
  background: var(--ink-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.band-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; }
.band-item { display: flex; align-items: center; gap: 10px; color: var(--t2); font-size: 14.5px; font-weight: 600; }
.band-item svg { width: 19px; height: 19px; color: var(--blue-400); flex-shrink: 0; }
.band-item b { color: var(--t1); }

/* ================================================
   SERVICES
================================================ */
.svc-list { border-top: var(--hair) solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: clamp(150px, 17vw, 210px) 1fr auto;
  align-items: center; gap: clamp(18px, 2.8vw, 34px);
  padding: clamp(20px, 2.4vw, 26px) 6px;
  border-bottom: var(--hair) solid var(--line);
  position: relative;
  scroll-margin-top: 104px;
  transition: background .35s var(--ease);
}
.svc-row::before {
  content: ""; position: absolute; inset: 0 -16px;
  background: linear-gradient(90deg, oklch(0.635 0.145 234 / 10%), transparent 64%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.svc-row:hover::before, .svc-row:focus-within::before { opacity: 1; }

.svc-photo {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
  border: var(--hair) solid var(--line-s); background: var(--ink-2);
  box-shadow: 0 12px 30px -18px oklch(0 0 0 / 90%);
}
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc-row:hover .svc-photo img { transform: scale(1.05); }
.svc-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 46%, oklch(0.160 0.012 240 / 42%));
}

/* a grid item's default min-width is auto (its content's max-content size),
   which stops the .svc-seg grid below from ever collapsing to one
   column on narrow screens and pushes the whole row past the viewport */
.svc-body { min-width: 0; }
.svc-body h3 { margin-bottom: 7px; }
.svc-body p { color: var(--t2); font-size: 15.5px; max-width: 60ch; }
/* residential vs. commercial: two small pill links per service, each its
   own tap target. They sit above .svc-link's full-row overlay, so clicking
   a pill goes to the pill and clicking anywhere else goes to the row. */
.svc-seg {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.svc-seg-btn {
  position: relative; z-index: calc(var(--z-raised) + 1);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--line-s);
  background: oklch(1 0 0 / 3.5%);
  font-size: 12.5px; font-weight: 700; font-stretch: 104%;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-400);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.svc-seg-btn:hover {
  border-color: var(--line-blue);
  background: oklch(0.635 0.145 234 / 12%);
  transform: translateY(-2px);
}
.svc-seg-btn svg {
  width: 13px; height: 13px; color: var(--t3);
  transition: transform .3s var(--ease), color .25s var(--ease);
}
.svc-seg-btn:hover svg { color: var(--blue-300); transform: translateX(3px); }
/* one anchor per row, stretched: the whole row is the tap target */
.svc-link { color: inherit; }
.svc-link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); }
.svc-row:hover .svc-link { color: var(--blue-300); }

.svc-act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; justify-self: end; }
.svc-tag {
  font-size: 12px; font-weight: 700; font-stretch: 104%;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--t3); white-space: nowrap;
}
.svc-go {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 14.5px; font-weight: 700; font-stretch: 104%; color: var(--blue-300);
}
.svc-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.svc-row:hover .svc-go svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .svc-row { grid-template-columns: clamp(112px, 26vw, 150px) 1fr; row-gap: 14px; }
  .svc-act { grid-column: 2; flex-direction: row; align-items: center; justify-self: start; gap: 16px; }
}
@media (max-width: 520px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-photo { aspect-ratio: 16/9; }
  .svc-act { grid-column: 1; }
}

/* ================================================
   CLEANOUTS: the state of the room, then the floor
================================================ */
.mess { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba figure {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: var(--hair) solid var(--line-s); box-shadow: var(--plate);
  aspect-ratio: 4/5; background: var(--ink-2);
}
.ba figure img { width: 100%; height: 100%; object-fit: cover; }
.ba figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 14px 14px;
  background: linear-gradient(0deg, oklch(0.160 0.012 240 / 95%) 16%, transparent);
  font-size: 13.5px; font-weight: 600; color: var(--t1); line-height: 1.35;
}
.ba-stamp {
  position: absolute; top: 12px; left: 12px; z-index: var(--z-raised);
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; font-stretch: 106%;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: oklch(0.160 0.012 240 / 88%);
  border: var(--hair) solid var(--line-s); color: var(--t2);
}
.ba-stamp.on { background: oklch(0.530 0.150 236 / 92%); border-color: transparent; color: #fff; }
.ba-note { grid-column: 1 / -1; font-size: 13px; color: var(--t3); margin-top: 2px; }

.photo-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: oklch(0.160 0.012 240 / 84%);
  border: var(--hair) solid var(--line-s);
  color: var(--t1); font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-sm);
}
.pull {
  font-size: clamp(21px, 2.5vw, 30px); font-weight: 700; font-stretch: 104%;
  line-height: 1.3; letter-spacing: -0.02em; color: var(--t1);
  text-wrap: balance; margin-bottom: 20px;
}
.pull em { color: var(--blue-400); font-style: normal; }
.pull-by { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; font-stretch: 100%; color: var(--t3); letter-spacing: 0; }
/* four job pairs make the photo column roughly twice the height of the
   copy beside it, so the copy stops floating in the middle of the gap and
   rides along instead */
@media (min-width: 901px) {
  .mess { align-items: start; }
  .mess > div:first-child { position: sticky; top: 104px; }
}
@media (max-width: 900px) { .mess { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ba { grid-template-columns: 1fr; } }

/* ================================================
   LOAD SIZE SLIDER
================================================ */
.load {
  border-radius: var(--r-xl);
  border: 1px solid var(--line-s);
  background:
    radial-gradient(ellipse 80% 100% at 12% 0%, oklch(0.280 0.080 240 / 60%), transparent 66%),
    linear-gradient(168deg, var(--ink-2) 0%, var(--ink-1) 100%);
  box-shadow: var(--plate);
  overflow: hidden;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
}
.load-visual {
  padding: clamp(26px, 3.4vw, 42px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.load-body { padding: clamp(28px, 3.6vw, 46px); display: flex; flex-direction: column; }

/* ---------- the load stage ----------
   One trailer, drawn once. Changing the slider does not swap a picture:
   the items already in the bin stay put and the new ones drop in from
   above, so every step is continuous motion. */
.load-stage {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--line-s);
  background:
    radial-gradient(ellipse 70% 90% at 50% 18%, oklch(0.280 0.080 240 / 45%), transparent 70%),
    oklch(0.130 0.010 240);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 6%), 0 18px 40px -24px oklch(0 0 0 / 80%);
}
.load-svg {
  display: block; width: 100%; height: auto;
  transform: translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 7px), 0);
  transition: transform .5s var(--ease);
}

/* the load body rises from the floor, always flat across the top */
.load-mass {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(var(--lvl, 0.25));
  transition: transform .8s var(--ease-q);
}

/* --drop overshoots a little at the end, which reads as the item landing
   and settling rather than gliding to a stop */
.ji {
  transform-box: fill-box; transform-origin: 50% 120%;
  transform: translateY(-420px) rotate(-7deg);
  transition: transform .78s cubic-bezier(.3,.86,.36,1.06);
  will-change: transform;
}
.ji.in { transform: translateY(0) rotate(var(--rot, 0deg)); }

/* vertical fill gauge down the right edge */
.load-gauge {
  position: absolute; top: 16%; right: 3.2%; bottom: 16%; width: 8px;
  border-radius: var(--r-pill);
  background: oklch(0 0 0 / 55%);
  border: 1px solid oklch(1 0 0 / 14%);
  overflow: hidden;
}
.load-gauge-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill, 25%);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--blue-400), var(--blue-600));
  box-shadow: 0 0 14px oklch(0.635 0.145 234 / 65%);
  transition: height .8s var(--ease-q);
}

/* the running percentage */
.load-chip {
  /* top-left: the headroom above the box is empty at every fill level,
     so the chip never sits on top of the trailer */
  position: absolute; left: 3.6%; top: 6%;
  display: flex; align-items: baseline; gap: 3px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: oklch(0.130 0.010 240 / 82%);
  border: 1px solid var(--line-blue);
  backdrop-filter: blur(6px);
}
.load-chip b { font-size: 20px; font-weight: 800; font-stretch: 82%; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }
.load-chip i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-300); }

@media (prefers-reduced-motion: reduce) {
  .ji { transition: opacity .01ms; transform: none; opacity: 0; }
  .ji.in { opacity: 1; }
  .load-mass, .load-gauge-fill, .load-svg { transition: none; }
}

.load-cap { margin-top: 14px; font-size: 12.5px; color: var(--t3); text-align: center; }


/* Height is reserved on both readout and description so the trailer
   graphic beside them never jumps as you drag the slider. */
.load-readout { min-height: 76px; margin-bottom: 4px; }
.load-frac {
  display: block;
  font-size: clamp(38px, 5vw, 58px); font-weight: 800; font-stretch: 76%;
  line-height: 1.02; letter-spacing: -0.028em; text-transform: uppercase; color: var(--t1);
}
.load-yards {
  display: block; margin-top: 4px;
  font-size: 15px; font-weight: 700; font-stretch: 94%;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-400);
}
.load-desc { color: var(--t2); font-size: 16px; min-height: 3.4em; margin-bottom: 20px; }

.slider-shell { margin: 4px 0 26px; }
.slider-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 700; font-stretch: 94%;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3);
  margin-bottom: 16px;
}
.load-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: grab; display: block;
  touch-action: pan-y;
}
.load-slider:active { cursor: grabbing; }
/* --pctfrac is the slider's true 0..1 fraction: (value-min)/(max-min).
   The fill's hard edge is offset by half the thumb width on each end
   (calc mixing % and px) so the color break lands exactly under the
   visible thumb instead of drifting right of it as the value grows. */
.load-slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--blue-500) calc(15px + var(--pctfrac, 0) * (100% - 30px)),
    oklch(1 0 0 / 11%) calc(15px + var(--pctfrac, 0) * (100% - 30px)));
  border: 1px solid var(--line-s);
}
.load-slider::-moz-range-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--blue-500) calc(15px + var(--pctfrac, 0) * (100% - 30px)),
    oklch(1 0 0 / 11%) calc(15px + var(--pctfrac, 0) * (100% - 30px)));
  border: 1px solid var(--line-s);
}
.load-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: linear-gradient(178deg, oklch(0.99 0 0), oklch(0.86 0.008 240));
  border: 2px solid var(--blue-600);
  box-shadow: 0 4px 14px -2px oklch(0 0 0 / 70%);
  transition: box-shadow .3s var(--ease), transform .2s var(--ease);
}
.load-slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(178deg, oklch(0.99 0 0), oklch(0.86 0.008 240));
  border: 2px solid var(--blue-600);
  box-shadow: 0 4px 14px -2px oklch(0 0 0 / 70%);
  transition: box-shadow .3s var(--ease), transform .2s var(--ease);
}
.load-slider:hover::-webkit-slider-thumb { transform: scale(1.06); }
.load-slider:focus-visible::-webkit-slider-thumb,
.load-slider:active::-webkit-slider-thumb { box-shadow: 0 4px 14px -2px oklch(0 0 0 / 70%), 0 0 0 8px oklch(0.635 0.145 234 / 30%); }
.load-slider:hover::-moz-range-thumb { transform: scale(1.06); }

.load-ticks { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 3px; }
.load-ticks span {
  font-size: 11px; font-weight: 700; color: var(--t3);
  transition: color .3s var(--ease);
}
.load-ticks span.on { color: var(--blue-400); }

.load-est {
  margin-top: auto;
  padding: 20px 22px;
  border: 1px solid var(--line-blue);
  border-radius: var(--r);
  background: oklch(0.280 0.080 240 / 46%);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.load-est-label { font-size: 12.5px; font-weight: 700; font-stretch: 94%; letter-spacing: 0.11em; text-transform: uppercase; color: var(--blue-300); }
.load-est-val { font-size: clamp(24px, 2.6vw, 31px); font-weight: 800; font-stretch: 82%; letter-spacing: -0.02em; color: var(--t1); line-height: 1.1; margin-top: 3px; }
.load-est .btn { min-height: 50px; padding: 14px 24px; font-size: 15.5px; }
.load-note { font-size: 13.5px; color: var(--t3); margin-top: 16px; max-width: 52ch; }

@media (max-width: 940px) {
  .load { grid-template-columns: 1fr; }
  .load-visual { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  /* the chip and the label row both need to shrink or they crowd the
     render and wrap onto two lines on a phone */
  .load-chip { padding: 5px 10px; }
  .load-chip b { font-size: 16px; }
  .load-chip i { font-size: 10.5px; }
  .slider-label { font-size: 11px; letter-spacing: 0.07em; gap: 12px; }
}


/* ================================================
   GALLERY CAROUSEL

   A real horizontal scroll container, not a CSS transform: it drifts on
   its own via rAF, but you can swipe it, drag it, arrow through it, or
   tap a photo to open it full size. The drift stops the instant anyone
   touches it and resumes a few seconds after they stop.
================================================ */
.gal { position: relative; }
.marquee-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.marquee {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px clamp(20px, 4vw, 34px);
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.dragging { cursor: grabbing; }
.marquee.dragging .shot { pointer-events: none; }
.shot {
  width: clamp(220px, 26vw, 290px); aspect-ratio: 3/4;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-s); flex-shrink: 0; position: relative; background: var(--ink-2);
  transition: border-color .3s var(--ease);
}
.js .shot { cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); pointer-events: none; }
.shot:hover img { transform: scale(1.06); }
.shot:hover, .shot:focus-visible { border-color: var(--line-blue); }
.shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 15px 14px;
  background: linear-gradient(0deg, oklch(0.160 0.012 240 / 94%) 12%, transparent);
  font-size: 13.5px; font-weight: 600; color: var(--t1);
}
/* the arrows sit over the faded edges of the track, out of the photos' way */
.gal-nav {
  position: absolute; top: 50%; z-index: var(--z-raised);
  transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.160 0.012 240 / 88%);
  border: var(--hair) solid var(--line-s);
  color: var(--t1); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 32px -14px oklch(0 0 0 / 90%);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.gal-nav svg { width: 21px; height: 21px; }
.gal-nav:hover { background: var(--blue-600); border-color: transparent; transform: translateY(-50%) scale(1.06); }
.gal-prev { left: clamp(8px, 1.4vw, 18px); }
.gal-next { right: clamp(8px, 1.4vw, 18px); }
.gal-hint {
  margin: 18px auto 0; text-align: center;
  font-size: 13px; color: var(--t3);
}
.gal-hint .on-touch { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* ================================================
   LIGHTBOX: tap a job photo and actually see it
================================================ */
.lb { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; overflow: hidden; }
.lb::backdrop { background: oklch(0.09 0.008 240 / 94%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(44px, 6vw, 72px) clamp(12px, 8vw, 96px);
}
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lb-fig img {
  max-width: 100%; max-height: calc(100dvh - 190px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px oklch(0 0 0 / 95%);
  background: var(--ink-2);
}
.lb-fig figcaption { text-align: center; }
.lb-cap { display: block; font-size: 15.5px; font-weight: 700; font-stretch: 104%; color: var(--t1); }
.lb-count { display: block; font-size: 13px; color: var(--t3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.lb-nav, .lb-close {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: oklch(1 0 0 / 9%);
  border: var(--hair) solid oklch(1 0 0 / 18%);
  color: #fff; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lb-nav svg, .lb-close svg { width: 23px; height: 23px; }
.lb-nav:hover, .lb-close:hover { background: var(--blue-600); border-color: transparent; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.lb-prev { left: clamp(10px, 2.4vw, 30px); }
.lb-next { right: clamp(10px, 2.4vw, 30px); }
.lb-close { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }

/* ================================================
   REVIEWS
================================================ */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.review {
  background: oklch(1 0 0 / 3.5%);
  border: 1px solid var(--line-s);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.review:hover { transform: translateY(-3px); border-color: var(--line-blue); background: oklch(1 0 0 / 5.5%); }
.review p { color: var(--t2); font-size: 15px; line-height: 1.62; flex-grow: 1; }
.review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-name { font-weight: 700; color: var(--t1); font-size: 14.5px; }
.review-src { font-size: 12.5px; color: var(--t3); }

/* the rest of the reviews: same card, scrolling underneath the three
   picked out above, same seamless-loop technique as the work gallery */
/* Same shape as the job-photo track: the flex row IS the scroller, so
   the JS drift and a thumb swipe are moving the same thing. It used to
   be a CSS transform that had to be turned off below 640px before the
   track could be touched at all — which meant the reviews stood still
   on phones, where most of them get read. */
.review-marquee-wrap {
  margin-top: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.review-marquee {
  display: flex; align-items: stretch; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  padding: 3px 2px;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.review-marquee::-webkit-scrollbar { display: none; }
.review-marquee .review { width: clamp(280px, 34vw, 380px); flex-shrink: 0; }
/* hover lift belongs to the static cards above; a drifting card that
   grows under the cursor just fights the motion */
.review-marquee .review:hover { transform: none; }

/* ================================================
   COMMUNITY
================================================ */
/* Flex rather than grid: fourteen businesses land as 5 / 5 / 4, and a
   short last row centres itself under the two full ones instead of
   hanging off the left edge the way grid auto-placement leaves it. */
.clients {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
}
.client { flex: 0 0 calc((100% - 4 * 14px) / 5); }
/* 4 across, so the bottom row is a centred pair */
@media (max-width: 1080px) {
  .client { flex-basis: calc((100% - 3 * 14px) / 4); }
}
.client {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-s); aspect-ratio: 4/5; background: var(--ink-2);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.client:hover { transform: translateY(-4px); border-color: var(--line-blue); }
.client img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.client:hover img { transform: scale(1.05); }
.client-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 14px 13px;
  background: linear-gradient(0deg, oklch(0.160 0.012 240 / 95%) 14%, transparent);
  font-size: 14px; font-weight: 700; font-stretch: 92%; color: var(--t1); line-height: 1.25;
}
.client-name span { display: block; font-size: 12px; font-weight: 500; color: var(--t3); margin-top: 3px; }
.clients-hint { display: none; font-size: 12.5px; color: var(--t3); margin-bottom: 12px; }

/* golf block: a drenched blue panel, the one place colour takes the whole surface */
.golf {
  margin-top: clamp(48px, 6vw, 80px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-blue);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, oklch(0.355 0.105 239 / 85%), transparent 62%),
    linear-gradient(162deg, var(--blue-900) 0%, oklch(0.215 0.055 241) 100%);
  box-shadow: var(--plate);
  overflow: hidden;
}
/* one grid for the whole block: a wide left column carries the story
   (heading, facts, video) and a narrow right rail stacks the two
   photographs. Everything that needs to line up shares this grid instead
   of being split across two independently-wrapping rows. */
.golf-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  padding: clamp(30px, 4.2vw, 56px);
  align-items: stretch;
}
/* both columns are stretched to the same height by the grid above; the
   video card (a UI element, happy to crop) and the trophy card (a real
   photo, so it letterboxes instead) each absorb whatever's left over,
   so the two columns' tops and bottoms always land in the same place
   instead of one trailing off with empty space beneath it. */
.golf-main { display: flex; flex-direction: column; }
.golf-main .h2 { margin-bottom: 18px; }
.golf-main .lead { color: oklch(0.885 0.02 235); }

/* always three equal columns; never an orphaned third item wrapping
   alone onto its own half-empty row */
.golf-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.fact {
  border: 1px solid oklch(1 0 0 / 20%);
  background: oklch(1 0 0 / 7%);
  border-radius: var(--r);
  padding: 13px 16px;
}
.fact b { display: block; font-size: 21px; font-weight: 800; font-stretch: 84%; letter-spacing: -0.015em; color: #fff; line-height: 1.1; }
.fact span { display: block; font-size: 12.5px; color: oklch(0.83 0.03 235); margin-top: 4px; }

/* a still frame from the actual video, styled as a play card, in place
   of embedding Facebook's own player: the plugin drags in its own
   scrubber, share button and unrelated video recommendations, none of
   which we control the height or styling of */
.golf-video {
  position: relative; display: block; margin-top: 26px;
  flex: 1; min-height: 200px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid oklch(1 0 0 / 22%);
  box-shadow: var(--plate);
}
.golf-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.golf-video:hover img { transform: scale(1.045); }
.golf-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(0.130 0.010 240 / 70%) 0%, oklch(0.130 0.010 240 / 8%) 40%, transparent 62%);
}
.golf-video-play {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 60px; height: 60px; transform: translate(-50%, -50%);
  border-radius: 50%; background: oklch(1 0 0 / 94%); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -10px oklch(0 0 0 / 70%);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.golf-video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.golf-video:hover .golf-video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.golf-video-tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: oklch(0.130 0.010 240 / 78%); border: 1px solid oklch(1 0 0 / 18%);
  font-size: 13px; font-weight: 700; color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.golf-video-tag svg { width: 15px; height: 15px; color: #1877F2; flex-shrink: 0; }

.golf-gallery { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
/* the cheque photo (with Brock's son) keeps its own natural size, full
   bleed, never cropped or padded */
.golf-cheque { flex: 0 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid oklch(1 0 0 / 22%); box-shadow: var(--plate); }
.golf-cheque img { width: 100%; height: auto; display: block; }
/* the trophy card takes whatever height is left; object-fit:contain
   means the photo itself never crops or stretches, it just centres in
   whatever space remains, letterboxed on a matching dark background */
.golf-trophy {
  flex: 1; min-height: 140px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-s); box-shadow: var(--plate);
  background: var(--ink-1);
}
.golf-trophy img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 900px) {
  .golf-grid { grid-template-columns: minmax(0, 1fr); }
  .golf-main { display: block; }
  .golf-video { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .golf-trophy { flex: none; min-height: 0; background: none; }
  .golf-trophy img { height: auto; object-fit: initial; }
}
@media (max-width: 520px) {
  .golf-facts { grid-template-columns: 1fr; }
}

/* ================================================
   CREW / ABOUT
================================================ */
.crew { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.crew .h2 { margin-bottom: 16px; }
.crew-photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-s); box-shadow: var(--plate); aspect-ratio: 4/5; }
.crew-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .crew { grid-template-columns: 1fr; } .crew-photo { aspect-ratio: 4/3; } }

/* ================================================
   FAQ
================================================ */
.faq { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px 4px; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.7vw, 19.5px); font-weight: 700; font-stretch: 92%;
  letter-spacing: -0.008em; color: var(--t1);
  transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--blue-400); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q svg { width: 19px; height: 19px; color: var(--blue-400); flex-shrink: 0; transition: transform .35s var(--ease); }
details[open] .faq-q svg { transform: rotate(135deg); }
.faq-a { padding: 0 4px 24px; color: var(--t2); font-size: 16px; max-width: 68ch; }

/* ================================================
   CONTACT: one card, two halves
   Previously a blue "call us" panel stacked on top of a dark "or fill
   out this form" panel, each with its own phone number and its own
   heading pitching the same idea. Side by side instead, so the phone
   CTA and the form read as two ways into the same action, not two
   competing sections.
================================================ */
.contact-combo {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-blue);
  box-shadow: var(--plate);
  overflow: hidden;
}
.combo-pitch {
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, oklch(0.355 0.105 239 / 82%), transparent 68%),
    linear-gradient(168deg, var(--blue-900), oklch(0.205 0.045 241));
  padding: clamp(36px, 4.8vw, 58px);
  display: flex; flex-direction: column; justify-content: center;
}
.combo-pitch .h2 { margin-bottom: 14px; }
.combo-pitch .lead { color: oklch(0.885 0.02 235); margin-bottom: 26px; }
.combo-pitch .btn { align-self: flex-start; }

/* the payment strip: one plain chip, not brand logos, so nothing here
   claims a card network's endorsement */
.pay-row { display: flex; margin: 0 0 26px; }
.pay-row li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid oklch(1 0 0 / 22%);
  background: oklch(0 0 0 / 22%);
  font-size: 13px; font-weight: 700; font-stretch: 94%;
  letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.925 0.018 235);
  white-space: nowrap;
}
.pay-row li svg { width: 16px; height: 16px; color: var(--blue-300); flex-shrink: 0; }

.combo-form {
  scroll-margin-top: 96px;
  background: linear-gradient(168deg, var(--ink-2) 0%, var(--ink-1) 100%);
  padding: clamp(36px, 4.8vw, 58px);
}
.quote-head { max-width: 640px; margin-bottom: clamp(20px, 3vw, 28px); }
.quote-head .h3 { margin-bottom: 8px; }
.quote-head .sub { max-width: 52ch; }

.quote-form { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 860px) {
  .contact-combo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .pay-row li { font-size: 12px; padding: 8px 15px; letter-spacing: 0.04em; }
}
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qf-field { display: flex; flex-direction: column; gap: 8px; }
.qf-field[hidden] { display: none; }
.qf-field > span {
  font-size: 13px; font-weight: 700; font-stretch: 94%;
  letter-spacing: 0.04em; color: var(--t2);
}
.qf-field > span em { font-style: normal; font-weight: 500; color: var(--t3); }
.qf-field input, .qf-field select, .qf-field textarea {
  width: 100%; min-height: 52px;
  padding: 13px 19px;
  border-radius: 26px;
  border: 1px solid var(--line-s);
  background: oklch(1 0 0 / 4%);
  color: var(--t1);
  font-size: 16px;
  font-family: var(--font);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.qf-field textarea { min-height: 118px; padding-top: 14px; border-radius: 22px; resize: vertical; }
.qf-field input::placeholder, .qf-field textarea::placeholder { color: var(--t3); opacity: 1; }
.qf-field input:hover, .qf-field select:hover, .qf-field textarea:hover { border-color: var(--line-blue); }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
  background: oklch(1 0 0 / 6%); border-color: var(--blue-500);
}
.qf-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b96a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 44px;
}
.qf-field select option { background: var(--ink-1); color: var(--t1); }
.qf-full { grid-column: 1 / -1; }

/* residential / commercial: two big buttons instead of a select, since
   this answer also decides whether the business-type field appears */
.qf-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.qf-toggle-btn {
  flex: 1 1 160px;
  min-height: 52px; padding: 13px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-s);
  background: oklch(1 0 0 / 4%);
  color: var(--t2); font-family: inherit; font-size: 15.5px; font-weight: 700; font-stretch: 100%;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.qf-toggle-btn:hover { border-color: var(--line-blue); color: var(--t1); }
.qf-toggle-btn[aria-pressed="true"] {
  border-color: var(--blue-500);
  background: oklch(0.635 0.145 234 / 16%);
  color: var(--t1);
}
/* the property-type answer lives in a hidden input, so the browser's own
   validation bubble can't reach it — this is the fallback error state,
   shown only after a submit attempt with nothing picked yet */
.qf-toggle-error .qf-toggle-btn { border-color: var(--danger, oklch(0.635 0.20 25)); }
.qf-toggle-err-msg {
  display: none; margin-top: 8px;
  font-size: 13px; font-weight: 600; color: oklch(0.72 0.19 25);
}
.qf-toggle-error ~ .qf-toggle-err-msg { display: block; }

/* photo picker: the native input is invisible and stretched over a
   styled button, so it keeps native file-dialog behaviour and keyboard
   support but looks like the rest of the form */
.qf-file { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qf-file input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.qf-file-btn {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  min-height: 52px; padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-s);
  background: oklch(1 0 0 / 4%);
  color: var(--t1); font-size: 15px; font-weight: 700; font-stretch: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.qf-file:hover .qf-file-btn { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 10%); }
.qf-file input[type="file"]:focus-visible ~ .qf-file-btn { border-color: var(--blue-500); }
.qf-file-name { color: var(--t3); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.qf-file-hint { margin-top: 8px; font-size: 13px; color: var(--t3); }

.qf-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.qf-note { color: var(--t3); font-size: 13.5px; max-width: 46ch; }
.qf-note a { color: var(--blue-400); font-weight: 600; }
.qf-note a:hover { color: var(--blue-300); }
.qf-status {
  font-size: 14.5px; font-weight: 600; color: var(--ok);
  display: none; margin-top: -4px;
}
.qf-status.show { display: block; }
.qf-status.qf-status-err { color: oklch(0.72 0.19 25); }

/* Honeypot + the named file slots Netlify registers at deploy time: pulled
   out of view without display:none or [hidden], because a field the browser
   never renders is a field the browser may skip on submit. */
.qf-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* in-flight submit: dim the button and lock out double-sends */
.quote-form[data-sending] .qf-foot .btn { opacity: .6; pointer-events: none; }

@media (max-width: 700px) {
  .qf-row { grid-template-columns: 1fr; }
}

/* ================================================
   FOOTER
================================================ */
footer { background: var(--ink-1); padding: clamp(52px, 6vw, 76px) 0 30px; border-top: 1px solid var(--line); }
.ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.ftr-brand img { height: 68px; width: 68px; object-fit: contain; }
.ftr-brand p { color: var(--t3); font-size: 14.5px; margin: 16px 0 20px; max-width: 36ch; }
.ftr-social { display: flex; gap: 10px; }
.ftr-social a {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: oklch(1 0 0 / 5%); border: 1px solid var(--line-s);
  display: flex; align-items: center; justify-content: center; color: var(--t2);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.ftr-social a:hover { color: var(--t1); border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 14%); }
.ftr-social svg { width: 18px; height: 18px; }
.ftr-col h4 { font-size: 12.5px; font-weight: 700; font-stretch: 94%; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-400); margin-bottom: 16px; }
.ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ftr-col a, .ftr-col span { display: block; padding: 11px 0; color: var(--t2); font-size: 14.5px; }
.ftr-col a:hover { color: var(--t1); }
.ftr-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; }
.ftr-bottom p { color: var(--t3); font-size: 13px; }
@media (max-width: 900px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-top { grid-template-columns: 1fr; } }

/* ================================================
   RESPONSIVE
================================================ */
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
/* The number is the conversion. On a phone the wordmark goes before
   the digits do, so the tap-to-call stays legible all the way down. */
@media (max-width: 560px) {
  .brand-text { display: none; }
  .nav-call { padding: 12px 15px; font-size: 14.5px; }
  .hdr-inner { gap: 10px; }
}
@media (max-width: 380px) {
  .nav-call-text { display: none; }
  .nav-call { padding: 12px 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero { min-height: auto; padding-top: 112px; padding-bottom: 8px; }
  .hero-photo img { object-position: 68% 26%; }
  .hero-deck { max-width: none; }
  .cta-row .btn { flex: 1 1 100%; }
  /* 2x2 instead of a 4-high stack, so the proof stays near the fold */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .hstat b { font-size: 25px; }
  .load-est { flex-direction: column; align-items: stretch; }
  .load-est .btn { width: 100%; }
  .mobile-menu { inset: 72px 10px auto 10px; }
}



/* ================================================
   MOBILE ACTION BAR
================================================ */
.mbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  grid-template-columns: 1.2fr 1fr;
  gap: 9px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: oklch(0.160 0.012 240 / 94%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line);
}
.mbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 700; font-stretch: 104%;
}
.mbar a svg { width: 17px; height: 17px; flex-shrink: 0; }
.mbar-call { background: linear-gradient(178deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: var(--cta-shadow); }
.mbar-quote { background: oklch(1 0 0 / 7%); border: var(--hair) solid var(--line-s); color: var(--t1); }
/* the menu and any open dialog own the screen while they are up */
body:has(.mobile-menu.open) .mbar, body:has(dialog[open]) .mbar { display: none; }

/* ================================================
   PHONE

   Not the desktop layout scaled down. A phone gets a shorter page, a
   permanent tap-to-call bar, service rows stripped back to the service
   name and the two choices under it, and every gallery on the page
   turned into something you swipe instead of something you scroll past.
================================================ */
@media (max-width: 760px) {

  /* ---- rhythm: the desktop section padding stacks up to a very long
     page once every section is single-column ---- */
  section { padding: clamp(52px, 11vw, 72px) 0; scroll-margin-top: 72px; }
  .sec-head { margin-bottom: 28px; }
  .h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .h2 { font-size: clamp(24px, 7.2vw, 34px); }
  .lead { font-size: 16px; line-height: 1.6; }

  /* the phone number stays under the thumb the whole way down, so the
     page needs room to scroll clear of it */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mbar { display: grid; }

  /* ---- hero: the grid texture stays, everything else gets out of
     the way of the headline and the call button ---- */
  .hero { padding-top: 100px; }
  .hero .lead { margin: 14px 0 24px; font-size: 16px; }
  .hero-deck { margin-top: 12px; font-size: 19px; }
  .hero-stats { margin-top: 28px; padding-top: 20px; gap: 18px 16px; }
  .hstat b { font-size: 23px; }
  .hstat > span:not(.stars) { font-size: 12.5px; margin-top: 5px; }

  /* ---- trust band: a swipeable row rather than a five-line stack ---- */
  .band { padding: 14px 0; }
  .band-row {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; gap: 22px;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
    mask-image: linear-gradient(90deg, black 88%, transparent);
  }
  .band-row::-webkit-scrollbar { display: none; }
  .band-item { flex-shrink: 0; font-size: 13.5px; }

  /* ---- services: the service name and the two choices, nothing else.
     The paragraph and the "get a price" rail are desktop reading; on a
     phone they push the third service two screens down. ---- */
  .svc-body p, .svc-act { display: none; }
  .svc-row {
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 16px; row-gap: 0;
    padding: 16px 2px;
  }
  .svc-photo { aspect-ratio: 1; border-radius: var(--r); }
  .svc-body h3 { margin-bottom: 0; }
  .svc-body h3 a { font-size: 18.5px; }
  .svc-seg { margin-top: 11px; gap: 8px; flex-wrap: nowrap; }
  .svc-seg-btn { flex: 1 1 0; justify-content: center; padding: 11px 8px; font-size: 12px; letter-spacing: 0.05em; }
  .svc-seg-btn svg { display: none; }

  /* ---- before / after: side by side is the whole point of the pair,
     so it never drops to one column ---- */
  .ba { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ba figure { aspect-ratio: 3/4; }
  .ba figcaption { padding: 30px 9px 9px; font-size: 11.5px; }
  .ba-stamp { top: 8px; left: 8px; padding: 4px 9px; font-size: 10px; letter-spacing: 0.1em; }
  .pull { font-size: 20px; }

  /* ---- job photos: bigger cards, snapped, one clearly in view ---- */
  /* no scroll-snap here: mandatory snapping pins each drift nudge back to
     the nearest card, which is why the gallery only ever auto-scrolled on
     a desktop. Momentum swipe is a better phone gesture anyway. */
  .marquee { gap: 12px; padding-inline: 14px; }
  .shot { width: min(74vw, 320px); }
  .marquee-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  }
  /* the arrows are a pointer affordance; a thumb swipes instead */
  .gal-nav { display: none; }
  .gal-hint { margin-top: 14px; }
  .gal-hint .on-pointer { display: none; }
  .gal-hint .on-touch { display: inline; }

  /* in the lightbox the arrows drop to the bottom of the screen, where a
     thumb actually reaches, instead of pinching the photo from the sides */
  .lb-stage { padding: 56px 12px 118px; }
  .lb-fig img { max-height: calc(100dvh - 250px); }
  .lb-nav { top: auto; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); transform: none; width: 50px; height: 50px; }
  .lb-nav:hover { transform: none; }
  .lb-prev { left: 24%; }
  .lb-next { right: 24%; }

  /* ---- neighbours: a scrolling gallery on the phone, the wall of
     logos it is on a desktop ---- */
  .clients {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(-1 * clamp(20px, 4vw, 34px));
    padding: 2px clamp(20px, 4vw, 34px);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  }
  .clients::-webkit-scrollbar { display: none; }
  .client { flex: 0 0 min(62vw, 250px); scroll-snap-align: center; }
  .clients-hint { display: block; }
  .client-name { padding: 34px 12px 11px; font-size: 13.5px; }
  .client-name span { font-size: 11.5px; }

  /* ---- golf, crew, faq, contact ---- */
  .golf-grid { padding: 24px 20px; }
  .golf-facts { gap: 9px; margin-top: 20px; }
  .fact { padding: 11px 13px; }
  .fact b { font-size: 18px; }
  .golf-video-tag { left: 10px; bottom: 10px; font-size: 12px; padding: 6px 11px; }
  .crew-photo { aspect-ratio: 4/3; }
  .faq-q { padding: 19px 2px; font-size: 16.5px; }
  .faq-a { padding: 0 2px 20px; font-size: 15.5px; }
  .combo-pitch, .combo-form { padding: 28px 22px; }
  /* 16px is the smallest size iOS will render a field at without
     zooming the whole page in on focus */
  .qf-field input, .qf-field select, .qf-field textarea { font-size: 16px; }
  .qf-toggle-btn { flex: 1 1 120px; }

  /* ---- footer ---- */
  footer { padding-bottom: 24px; }
  .ftr-bottom { justify-content: flex-start; gap: 6px; }
}

/* smallest phones: the display type is the first thing to give */
@media (max-width: 400px) {
  .h1 { font-size: 27px; }
  .hero-deck { font-size: 17.5px; }
  .svc-row { grid-template-columns: 78px 1fr; gap: 13px; }
  .svc-body h3 a { font-size: 17px; }
  .shot { width: 80vw; }
  .client { flex-basis: 70vw; }
}

/* ================================================
   SUB-PAGE COMPONENTS
   Service pages, residential/commercial splits and
   the town pages all draw from this set. Same
   tokens, same machined-plate language as the
   homepage — nothing here introduces a new colour.
================================================ */

/* ---------- breadcrumbs ---------- */
.crumbs { padding-top: clamp(96px, 11vw, 132px); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; font-weight: 600; font-stretch: 100%;
  color: var(--t3);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before {
  content: "/"; color: var(--ink-3); font-weight: 500;
}
.crumbs a { color: var(--t3); text-decoration: none; }
.crumbs a:hover { color: var(--blue-300); }
.crumbs [aria-current] { color: var(--t2); }

/* ---------- page hero ----------
   Shorter than the homepage hero: these pages are read, not
   landed on cold, so the copy starts near the top of the fold. */
.phero { padding-top: clamp(26px, 3vw, 38px); padding-bottom: clamp(52px, 6vw, 78px); }
.phero-inner { max-width: 860px; }
.phero .h1 { text-wrap: balance; }
.phero .lead { margin-top: 20px; }
.phero .cta-row { margin-top: 30px; }
.phero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px; padding: 7px 15px 7px 12px;
  border: 1px solid var(--line-blue); border-radius: var(--r-pill);
  background: oklch(0.635 0.145 234 / 12%);
  font-size: 12.5px; font-weight: 800; font-stretch: 104%;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-300);
}
.phero-eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }

.phero-facts {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px; padding: 0; list-style: none;
}
.phero-facts li {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--ink-1);
  font-size: 13.5px; font-weight: 600; color: var(--t2);
}
.phero-facts svg { width: 15px; height: 15px; color: var(--blue-400); flex-shrink: 0; }

/* ---------- prose ---------- */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 20px; }
.prose p { color: var(--t2); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.68; }
.prose h2 { margin-top: 46px; }
.prose h3 { margin-top: 34px; }
.prose strong { color: var(--t1); font-weight: 700; }
.prose a { color: var(--blue-300); text-underline-offset: 3px; }

/* ---------- two-column split ---------- */
.split {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(34px, 5vw, 68px); align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- card grid ---------- */
.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--ink-1);
  box-shadow: var(--plate);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sheen); opacity: 0.5;
}
.card > * { position: relative; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--t2); font-size: 15px; line-height: 1.62; }
.card-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border: 1px solid var(--line-blue); border-radius: var(--r);
  background: oklch(0.635 0.145 234 / 14%);
  color: var(--blue-300);
}
.card-ico svg { width: 22px; height: 22px; }
.card-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 20px;
  font-size: 14px; font-weight: 800; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--blue-300); text-decoration: none;
}
.card-go svg { width: 16px; height: 16px; transition: transform .22s ease; }
a.card { text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
a.card:hover { border-color: var(--line-blue); transform: translateY(-2px); }
a.card:hover .card-go svg { transform: translateX(4px); }

/* ---------- tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li {
  position: relative; padding-left: 30px;
  color: var(--t2); font-size: 15.5px; line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: oklch(0.635 0.145 234 / 16%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8D4F5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks li b { color: var(--t1); font-weight: 700; }
.ticks-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }

/* a "we don't take this" variant — same rhythm, no green light */
.ticks-no li::before {
  border-color: var(--line-s);
  background: oklch(0.975 0.004 240 / 6%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6ADB4' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- numbered steps ---------- */
.steps { counter-reset: step; display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.steps li {
  position: relative; padding: 20px 22px 20px 66px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-1);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 20px; top: 19px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: oklch(0.635 0.145 234 / 15%);
  font-size: 14px; font-weight: 800; color: var(--blue-300);
}
.steps b { display: block; margin-bottom: 5px; color: var(--t1); font-size: 16px; font-weight: 700; font-stretch: 104%; }
.steps span { color: var(--t2); font-size: 15px; line-height: 1.6; }

/* ---------- callout ---------- */
.callout {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line-blue); border-radius: var(--r-lg);
  background: oklch(0.635 0.145 234 / 9%);
}
.callout h3 { margin-bottom: 10px; }
.callout p { color: var(--t2); font-size: 15.5px; line-height: 1.62; }
.callout p + p { margin-top: 12px; }
.callout .cta-row { margin-top: 20px; }

/* ---------- town grid ---------- */
.towns { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.town {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-1);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.town:hover { border-color: var(--line-blue); background: var(--ink-2); }
.town b { font-size: 16.5px; font-weight: 700; font-stretch: 104%; color: var(--t1); }
.town span { font-size: 13px; color: var(--t3); line-height: 1.45; }
.town.is-hub { border-color: var(--line-blue); background: oklch(0.635 0.145 234 / 10%); }

/* ---------- inline chips (nearby towns, related services) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.chips a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--ink-1);
  font-size: 14px; font-weight: 600; color: var(--t2);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.chips a:hover { border-color: var(--line-blue); color: var(--t1); }

/* ---------- key/value fact strip ---------- */
.kv { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 20px; background: var(--ink-1);
}
.kv > div + div { border-top: 1px solid var(--line); }
.kv dt, .kv b { font-size: 13.5px; font-weight: 600; color: var(--t3); }
.kv dd, .kv span { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--t1); text-align: right; }

/* ---------- compact contact block ---------- */
.mini-cta { display: grid; gap: 22px; justify-items: start; }
@media (max-width: 700px) { .mini-cta .cta-row { width: 100%; } }

/* residential / commercial rows nested under a service in the mobile menu */
.mm-sub a.mm-deep {
  font-size: 14px; color: var(--t3); padding: 8px 14px 8px 22px;
}
.mm-sub a.mm-deep:hover { color: var(--blue-300); }

/* the service-area dropdown's towns are links now, not plain labels */
.dd-towns a {
  display: block; color: inherit; text-decoration: none;
  margin: -6px -10px; padding: 6px 10px; border-radius: var(--r-sm);
}
.dd-towns a:hover { color: var(--blue-300); background: oklch(0.975 0.004 240 / 6%); }

a.svc-go { text-decoration: none; }

/* the homepage FAQ is long enough now to want dividing up: three groups,
   each with its own subhead, sharing one 800px column */
.faq-groups { max-width: 800px; margin: 0 auto; }
.faq-groups .faq { max-width: none; }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 58px); }
.faq-group > h3 {
  margin-bottom: 16px;
  font-size: 13px; font-weight: 800; font-stretch: 104%;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--blue-300);
}

/* icons in the generated pages' chrome carry no width/height attributes,
   so every place one sits inline gets its size from here instead */
.mbar a svg { width: 19px; height: 19px; flex-shrink: 0; }
.band-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.cd-opt > svg { width: 18px; height: 18px; flex-shrink: 0; }
.cd-opt-ico svg { width: 20px; height: 20px; }
.card-go svg, .chips a svg { width: 16px; height: 16px; flex-shrink: 0; }
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-call svg { width: 16px; height: 16px; flex-shrink: 0; }
.dd-ico svg { width: 21px; height: 21px; }
.dd-foot svg, .mm-group > summary svg, .nav-trigger svg { flex-shrink: 0; }
.ftr-social svg { width: 18px; height: 18px; }

/* legal line in the footer base */
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ftr-legal a { color: var(--t2); text-decoration: none; border-bottom: 1px solid var(--line-s); }
.ftr-legal a:hover { color: var(--blue-300); border-bottom-color: var(--line-blue); }
.ftr-legal span[aria-hidden] { color: var(--ink-3); }

/* ================================================
   SUB-PAGE COMPONENTS ON A PHONE

   The homepage got its own phone treatment further up. Everything the
   service, segment, town and policy pages are built from needs the same
   thing: less padding stacked between single-column sections, tap
   targets a thumb can actually land on, and nothing sitting behind the
   fixed call bar at the bottom.
================================================ */
@media (max-width: 760px) {

  /* ---- breadcrumbs: closer under the header, still clear of it ---- */
  .crumbs { padding-top: 86px; }
  .crumbs ol { gap: 6px; font-size: 12.5px; }
  .crumbs li + li::before { margin: 0; }

  /* ---- page hero ---- */
  .phero { padding-top: 20px; padding-bottom: 40px; }
  .phero-eyebrow {
    margin-bottom: 14px; padding: 6px 12px 6px 10px;
    font-size: 11px; letter-spacing: 0.05em;
  }
  .phero-eyebrow svg { width: 13px; height: 13px; }
  .phero .lead { margin-top: 14px; }
  .phero .cta-row { margin-top: 22px; }
  /* four facts stacked four-high pushed the trust band off the first
     screen; smaller pills fit two to a row instead */
  .phero-facts { gap: 7px; margin-top: 22px; }
  .phero-facts li { padding: 7px 11px; font-size: 12px; gap: 6px; }
  .phero-facts svg { width: 13px; height: 13px; }

  /* ---- prose ---- */
  .prose > * + * { margin-top: 16px; }
  .prose p { font-size: 16px; line-height: 1.62; }
  .prose h2 { margin-top: 34px; }
  .prose h3 { margin-top: 26px; }
  .split { gap: 30px; }

  /* ---- cards ---- */
  .cards { gap: 12px; }
  .card { padding: 22px 20px; border-radius: var(--r); }
  .card-ico { width: 38px; height: 38px; margin-bottom: 14px; }
  .card-ico svg { width: 19px; height: 19px; }
  .card p { font-size: 15px; }
  .card-go { padding-top: 16px; font-size: 13px; }

  /* ---- tick lists ---- */
  .ticks { gap: 10px; }
  .ticks-2 { grid-template-columns: 1fr; }
  .ticks li { padding-left: 27px; font-size: 15.5px; }
  .ticks li::before { width: 18px; height: 18px; background-size: 11px; }

  /* ---- steps ---- */
  .steps { gap: 12px; }
  .steps li { padding: 16px 18px 16px 56px; }
  .steps li::before { left: 16px; top: 16px; width: 28px; height: 28px; font-size: 13px; }
  .steps b { font-size: 15.5px; }
  .steps span { font-size: 15px; }

  /* ---- callout ---- */
  .callout { padding: 22px 20px; }
  .callout p { font-size: 15px; }
  .callout .cta-row { margin-top: 18px; }

  /* ---- towns: two to a row so sixteen is four screens shorter ---- */
  .towns { grid-template-columns: 1fr 1fr; gap: 10px; }
  .town { padding: 14px 14px; gap: 3px; }
  .town b { font-size: 15px; }
  .town span { font-size: 11.5px; }

  /* ---- chips: a thumb needs the whole pill, not just the label ---- */
  .chips { gap: 8px; }
  .chips a { min-height: 42px; padding: 10px 15px; font-size: 14px; }

  /* ---- faq groups ---- */
  .faq-group + .faq-group { margin-top: 34px; }
  .faq-group > h3 { font-size: 12px; margin-bottom: 10px; }

  /* ---- footer: the link columns read better two-up than as one
     very long list of towns ---- */
  .ftr-top { gap: 26px 20px; }
  .ftr-col ul { columns: 2; column-gap: 16px; }
  .ftr-col li { break-inside: avoid; }
  .ftr-brand p { font-size: 14.5px; }
  .ftr-legal { font-size: 13px; }
}

/* below this the two town columns stop holding a name and its region
   on sensible lines, so they drop back to one */
@media (max-width: 359px) {
  .towns { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .phero-facts li { font-size: 11.5px; }
}

/* ---- phone: the last few things a thumb has to be able to hit ---- */
@media (max-width: 760px) {
  /* breadcrumb links were 20px tall — legible, but not tappable */
  .crumbs a, .crumbs [aria-current] {
    display: inline-flex; align-items: center;
    min-height: 40px; padding-block: 6px;
  }
  .crumbs ol { margin: -6px 0; }
  .ftr-legal a { display: inline-flex; align-items: center; min-height: 40px; }
  /* captions people actually read, rather than the badges over them */
  .ba figcaption { font-size: 12px; }
  .client-name span { font-size: 12px; }
}

/* ---- phone: the three picked-out reviews swipe instead of stacking ----
   Three full-width cards one under another cost ~600px of scrolling for
   content a thumb can flick through in one card's worth of height. Same
   move the job photos and the neighbours already make. */
@media (max-width: 760px) {
  .reviews {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(-1 * clamp(20px, 4vw, 34px));
    padding: 2px clamp(20px, 4vw, 34px);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  }
  .reviews::-webkit-scrollbar { display: none; }
  .reviews > .review { flex: 0 0 min(80vw, 330px); scroll-snap-align: center; }
  .review { padding: 22px; }
  .review p { font-size: 14.5px; }
  /* the drifting row underneath is the same width, so the two read as
     one shelf of reviews rather than two different components */
  .review-marquee .review { width: min(80vw, 330px); }
  .review-marquee-wrap { margin-top: 12px; }
}