/* Every colour, corner and shadow the page uses is named here once. DESIGN.md
   explains what each name is for; change a value here, never at the point of use. */
:root {
  /* Surfaces */
  --ground: #e9e7e1;
  --cream: #f1eee7;
  --surface: #fff;
  --tint-blue: #e8eef9;
  --navy: #1d2942;
  --footer: #171a20;
  --photo-fallback: #2b2620;
  /* Text on light */
  --ink: #171a20;
  --muted: #5b5f68;
  --text-body: #3f444d;
  --blue: #3c5fbe;
  --blue-dark: #2f4da3;
  --blue-press: #253f86;
  --danger: #a8322a;
  /* Text on dark */
  --on-dark: #fff;
  --on-dark-soft: #e8e6df;
  --on-dark-muted: #b9bcc4;
  --on-dark-faint: #8b8f98;
  --accent-on-dark: #c8d5f5;
  /* Lines and rings */
  --line: #d8d4c9;
  --line-dark: #2e333c;
  --focus: #9cb5f2;          /* keyboard ring on dark areas */
  --focus-light: #3c5fbe;    /* keyboard ring on light areas */
  --focus-soft: rgba(60,95,190,.18);
  /* Corners */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* Shadows */
  --shadow-pop: 0 18px 44px rgba(10,12,16,.3);
  --shadow-hairline: 0 1px 2px rgba(23,26,32,.06);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:"Archivo",sans-serif;font-size:1rem;line-height:1.6}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
@keyframes glide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hIn{animation:heroIn .62s cubic-bezier(.22,.7,.28,1) both}
.revIn{animation:revealBlur .85s cubic-bezier(.19,1,.22,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}.heroVid{display:none !important}}
@media (max-width:600px){.rw-step{gap:16px !important}#about{margin-top:-44px !important}}
@media (max-width:760px){.rw-1col{grid-template-columns:1fr !important}.rw-logo-s{height:20px !important}.rw-logo-m{height:28px !important}.rw-logo-l{height:36px !important}}
.rw-logo{width:auto;object-fit:contain;filter:brightness(0) saturate(100%);opacity:.5;display:block}
.rw-logo-s{height:26px}
.rw-logo-m{height:36px}
.rw-logo-l{height:46px}
@media (max-width:430px){.rw-mark .rw-full{display:block !important}}
@media (hover:hover) and (pointer:fine){.anim-glide:hover{animation-play-state:paused}}

html { overflow-x: clip; scroll-behavior: auto; }
body { overflow-x: clip; }
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
}
.hero-section :focus-visible, .service-item--featured :focus-visible, .site-footer :focus-visible { outline-color: var(--focus); }
/* In-page destinations take focus so the next Tab continues from there (#3); the
   section itself needs no ring, the reader is already looking at it. */
#top:focus, .anchor:focus, #main-content:focus { outline: none; }
/* #41 A picture that fails to load leaves its space empty, not a broken-image icon. */
img.is-broken { visibility: hidden; }
/* #39 #40 Without JavaScript: no black video frame, and no buttons that would do nothing. */
.heroVid:not([src]) { visibility: hidden; }
html:not(.js) .menu-trigger, html:not(.js) .menu-close, html:not(.js) [data-quote-next],
html:not(.js) [data-quote-back], html:not(.js) .service-toggle__label, html:not(.js) .quote-review { display: none; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-140%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Content remains visible without JavaScript. Motion is installed only after enhancement. */
.hIn, .lineUp, .revIn { animation: none !important; }
.motion-ready .hIn { animation: heroIn .62s cubic-bezier(.22,.7,.28,1) both !important; }
.motion-ready .lineUp { animation: lineUp .95s var(--ease) both !important; }
.motion-ready .revIn { animation: revealBlur .85s var(--ease) both !important; }
@keyframes revealBlur {
  from { opacity: 0; transform: translateY(36px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes lineUp {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

/* Approved hero with aspect-ratio art direction. */
.hero-section {
  position: relative;
  display: flex;
  min-height: 88vh;
  flex-direction: column;
  overflow: hidden;
  background: var(--photo-fallback);
}
.hero-picture, .hero-picture img, .heroVid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-picture img, .heroVid { object-fit: cover; object-position: center; }
.heroVid { z-index: 1; pointer-events: none; border: 0; }
.hero-overlay { position: absolute; z-index: 2; inset: 0; background: rgba(12,14,20,.32); }
.site-header { position: relative; z-index: 4; }
.site-header__row {
  display: flex;
  width: min(100%, 1400px);
  margin-inline: auto;
  align-items: center;
  gap: clamp(14px,2.4vw,30px);
  padding: 20px clamp(18px,5vw,64px);
  color: var(--on-dark);
}
.brand-lockup {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  color: var(--on-dark);
  text-decoration: none;
}
.brand-lockup:hover { color: var(--on-dark); }
.brand-lockup svg { display: block; width: 29px; height: 35px; flex: none; }
.brand-lockup__copy { min-width: 0; }
.brand-lockup__name {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand-lockup__sub {
  display: block;
  margin-top: 4px;
  margin-right: -.56em;
  font-size: 0.69375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .56em;
  opacity: .85;
  white-space: nowrap;
}
.site-header__actions { display: flex; margin-left: auto; align-items: center; gap: 10px; }
.header-phone {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--on-dark); }

/* The header used to print the phone number and nothing else, so email had no
   place in the open. One Contact control opens onto both, which makes neither
   channel the privileged one. Without JavaScript the panel is simply part of the
   header and the trigger never appears — script only ever adds the folded state. */
.header-contact { position: relative; margin-left: 16px; }
.header-contact:not([data-enhanced]) .header-contact__trigger { display: none; }
.header-contact:not([data-enhanced]) .header-contact__panel { display: flex; align-items: center; gap: 18px; }
.header-contact:not([data-enhanced]) .header-contact__label { display: none; }
.header-contact:not([data-enhanced]) .header-contact__item { color: var(--on-dark); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-contact__trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark-soft);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.header-contact__trigger::after {
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.header-contact__trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.header-contact[data-enhanced] .header-contact__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  min-width: 304px;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  visibility: hidden;
}
.header-contact[data-enhanced].is-open .header-contact__panel { opacity: 1; transform: none; visibility: visible; }
.header-contact[data-enhanced] .header-contact__item {
  display: grid;
  gap: 4px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.header-contact[data-enhanced] .header-contact__item:hover { background: var(--cream); color: var(--ink); }
.header-contact[data-enhanced] .header-contact__item strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -.01em; }
.header-contact__label { color: var(--blue-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* Desktop carries its destinations in the open. On a 1440px screen there is room
   for all of them, and hiding navigation behind a button costs a click while
   losing discoverability. The sheet menu is the phone's answer, not the site's. */
.header-nav { display: flex; align-items: center; gap: clamp(16px,2vw,26px); }
.header-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--on-dark-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--on-dark); }
.header-nav a:focus-visible, .header-quote:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.header-quote {
  display: inline-flex;
  min-height: 44px;
  padding-inline: 22px;
  align-items: center;
  border: 1.5px solid rgba(255,255,255,.72);
  border-radius: var(--r-pill);
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-quote:hover { border-color: var(--on-dark); background: rgba(255,255,255,.1); color: var(--on-dark); }
/* The trigger only exists where the links cannot fit. */
.menu-trigger { display: none; }
.menu-trigger, .menu-close {
  min-height: 48px;
  padding-inline: 19px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
}
.hero-copy { position: relative; z-index: 3; margin-top: auto; padding-bottom: clamp(34px,6vw,64px); }
.hero-copy__inner { width: min(100%,1060px); margin-inline: auto; padding-inline: clamp(18px,4vw,44px); }
.hero-copy h1 {
  max-width: 15ch;
  color: var(--on-dark);
  font-size: clamp(2.875rem,7.5vw,5.75rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
}
.hero-line-mask { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-line-mask > span { display: block; }
.hero-subtitle { max-width: 30ch; margin-top: 14px; color: var(--on-dark); font-size: clamp(1.0625rem,1.6vw,1.3125rem); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding-inline: 26px;
  border: 1.5px solid var(--on-dark);
  border-radius: var(--r-pill);
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.hero-action:hover { color: var(--on-dark); }
.hero-action--primary { padding-inline: 28px; border-color: var(--blue); background: var(--blue); }
.hero-license { margin-top: 18px; color: var(--on-dark-soft); font-size: 0.84375rem; }
/* The accreditation is only worth showing if a visitor can check it, so it is a
   link to the live BBB record rather than a claim the site makes about itself. */
.hero-license__bbb { display: flex; width: max-content; min-height: 44px; align-items: center; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-license__bbb:hover { color: var(--on-dark); }

/* The menu stays visible in source order without JavaScript. Enhancement turns
   it into the off-canvas sheet and never makes access depend on script. */
.menu-scrim { position: relative; background: transparent; }
.menu-sheet {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 clamp(24px,4vw,42px) 24px;
  background: var(--surface);
  color: var(--ink);
}
.menu-shell[data-enhanced] .menu-scrim {
  position: fixed;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  background: rgba(10,12,16,.48);
  /* Fade the paint behind the sheet, not the element that owns the sheet.
     Opacity here composites the entire subtree, so a phone can paint the white
     surface before its lower-contrast text is legible. Background color leaves
     the moving sheet and everything on it fully opaque from the first frame. */
  transition: background-color .85s var(--ease);
}
.menu-shell[data-enhanced] .menu-sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%,560px);
  /* height, not min-height. With min-height the sheet grew to fit its content, so
     its own overflow-y:auto never engaged; the fixed scrim then clipped whatever
     did not fit and the body was locked, leaving the tail of the menu unreachable
     on short screens. Bounding the sheet to the viewport hands scrolling back to it. */
  height: 100%;
  overscroll-behavior: contain;
  /* A full-screen phone menu must not live in a transformed off-canvas
     coordinate space. iOS can pan its visual viewport toward a focused control
     during that transform, leaving half the drawer and half the page visible.
     Enhanced menus switch atomically between hidden and visible instead. */
  transform: none;
  transition: none;
}
/* The sheet is a flex column; without this its children compress to fit instead of
   overflowing, which hides the problem rather than scrolling it. */
.menu-shell[data-enhanced] .menu-sheet > * { flex-shrink: 0; }
.menu-shell[data-enhanced]:not(.is-open) .menu-scrim { background-color: rgba(10,12,16,0); pointer-events: none; }
.menu-shell[data-enhanced]:not(.is-open) .menu-sheet { visibility: hidden; }
/* The slide is motion, so it is scoped to visitors who accept motion. Under
   reduced motion the sheet keeps the visibility swap, which lands in the same
   frame; a transform needs a compositor commit and would delay the panel by a
   few frames for exactly the people who asked for no animation. */
@media (prefers-reduced-motion: no-preference) {
  .menu-shell[data-enhanced] .menu-sheet { transform: translateX(0); transition: transform .85s var(--ease); }
  .menu-shell[data-enhanced]:not(.is-open) .menu-sheet { visibility: visible; transform: translateX(100%); }
  /* Parked. No transform means no graphics layer, which gives the text its
     normal rendering back and hands scrolling to the platform. */
  .menu-shell[data-enhanced].is-settled .menu-sheet { transform: none; transition: none; }
}
.menu-head {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.menu-action-label {
  color: var(--blue-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.menu-close {
  min-height: 48px;
  padding-inline: 24px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
}
.menu-brand { display: grid; gap: 5px; margin-top: 26px; }
.menu-brand strong { font-size: clamp(1.375rem,5.6vw,1.8125rem); letter-spacing: -.035em; }
.menu-brand span { font-size: 0.625rem; font-weight: 700; letter-spacing: .42em; }
.menu-primary { display: grid; justify-items: start; gap: 16px; margin-top: 64px; }
.menu-quote {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding-inline: 28px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--on-dark);
  text-decoration: none;
}
.menu-quote:hover { color: var(--on-dark); }
.menu-quote strong { font-size: 0.9375rem; font-weight: 600; line-height: 1; }
.menu-links { margin-top: 68px; list-style: none; }
.menu-link {
  display: grid;
  min-height: 112px;
  align-items: center;
  padding-block: 19px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.menu-links li:first-child .menu-link { border-top: 1px solid var(--line); }
.menu-link:hover { color: inherit; }
.menu-link__title { display: block; font-size: clamp(2rem,7vw,2.625rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.menu-link__desc { display: block; margin-top: 7px; font-size: 0.8125rem; line-height: 1.35; opacity: .68; }
.menu-phone {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 58px;
  color: inherit;
  text-decoration: none;
}
.menu-phone strong {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  padding-inline: 24px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  color: var(--blue-dark);
  font-size: clamp(1.25rem,5vw,1.625rem);
  line-height: 1;
  letter-spacing: -.03em;
}
/* The email sits beside the phone as a peer, not beneath it. Its address is far
   longer than a phone number, so it takes a smaller size to clear a 320px screen
   — the pill and the label are otherwise identical to the phone above it. */
.menu-email {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 26px;
  color: inherit;
  text-decoration: none;
}
.menu-email strong {
  display: inline-flex;
  max-width: 100%;
  min-height: 50px;
  align-items: center;
  padding-inline: 20px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  color: var(--blue-dark);
  /* One line at normal settings. The address is 34 characters, so it takes a
     smaller size than the phone number to clear a 320px screen. It has no
     spaces, so it only ever breaks when a reader's own wider letter spacing
     would otherwise push it off the screen. */
  padding-block: 10px;
  font-size: clamp(0.78125rem,3.9vw,1.0625rem);
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.menu-foot {
  display: flex;
  min-height: 52px;
  margin-top: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* The two halves need 343px on one line. Below a 391px viewport the row is a
     pixel short, so both broke to two lines at once and sat 16px apart, reading
     as collided; the licence number split as "ELC.0209495-" / "C5". Wrapping
     moves the second half onto its own line instead, and nowrap keeps each
     phrase whole wherever it lands. */
  flex-wrap: wrap;
  row-gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-foot span { white-space: nowrap; }

/* The menu rows are ON the panel, not arriving into it. The sheet and its
   contents become visible in the same frame; neither has an entrance animation. */

/* Static, accessible service rows. */
.service-item { border-top: 1px solid var(--line); }
.service-item--featured {
  margin-top: clamp(40px,5.4vw,68px);
  padding: clamp(28px,4vw,46px) clamp(24px,3.4vw,42px);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--on-dark-soft);
}
.service-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) auto;
  gap: 8px clamp(20px,4vw,48px);
  align-items: baseline;
  padding-block: clamp(22px,2.8vw,30px);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.service-item--featured .service-toggle { padding-block: 0; }
.service-title { font-size: clamp(1.125rem,2vw,1.3125rem); font-weight: 600; line-height: 1.28; letter-spacing: -.015em; }
.service-item--featured .service-title { font-size: clamp(1.375rem,2.6vw,1.875rem); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; }
.service-summary { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.service-item--featured .service-summary { color: var(--on-dark-soft); font-size: 0.9375rem; line-height: 1.7; }
.service-toggle__label { color: var(--blue); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.service-item--featured .service-toggle__label { color: var(--on-dark-soft); }
.service-drawer { grid-column: 2/-1; }
.service-drawer__inner { max-width: 60ch; padding: 0 0 22px; color: var(--muted); font-size: 0.875rem; line-height: 1.78; }
.service-item--featured .service-drawer__inner { padding-top: 14px; color: var(--on-dark-soft); }
.service-quote-link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 12px;
  align-items: center;
  color: var(--blue-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.service-item--featured .service-quote-link { color: var(--accent-on-dark); }
.service-item[data-enhanced] .service-drawer {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows .25s cubic-bezier(0,0,.2,1);
}
.service-item[data-enhanced] .service-drawer__inner {
  min-height: 0;
  opacity: 1;
  transition: opacity .2s ease .12s;
}
@media (prefers-reduced-motion: reduce) {
  .service-item[data-enhanced] .service-drawer__inner { transition-delay: 0s; }
}
.service-item[data-enhanced] .service-toggle[aria-expanded="false"] + .service-drawer { grid-template-rows: 0fr; }
.service-item[data-enhanced] .service-toggle[aria-expanded="false"] + .service-drawer .service-drawer__inner { padding-top: 0; padding-bottom: 0; opacity: 0; transition-delay: 0s; }

/* Selected quote direction: three calm chapters. All chapters are visible by
   default; JavaScript adds the enhanced hidden state only after initialization. */
.quote-ledger {
  width: min(calc(100vw - 36px),1280px);
  margin-top: clamp(46px,7vw,94px);
  margin-left: 50%;
  padding: clamp(28px,5vw,64px) clamp(18px,5vw,64px);
  background: var(--surface);
  color: var(--ink);
  transform: translateX(-50%);
  scroll-margin-top: 0;
}
.quote-form { position: relative; overflow-anchor: none; }
.quote-form[data-enhanced] .quote-step[hidden] { display: none; }
.quote-step + .quote-step { margin-top: 88px; padding-top: 72px; border-top: 1px solid var(--line); }
.quote-form[data-enhanced] .quote-step + .quote-step { margin-top: 0; padding-top: 0; border-top: 0; }
.quote-step__head { max-width: 820px; }
/* Only step one carries the kicker. Steps two and three reserve its 11px line so
   the headline lands at the same height on every step; the progress line keeps its
   own 28px gap on top of that. Padding, not margin: a top margin on the first child
   collapses out of the header and pushes the whole step down instead. */
[data-quote-step="1"] .quote-step__head,
[data-quote-step="2"] .quote-step__head { padding-top: 18px; }
.quote-kicker { display: flex; min-block-size: 18px; align-items: center; gap: 10px; color: var(--blue-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; line-height: 1; }
.quote-kicker::before { width: 26px; height: 1px; flex: none; background: var(--blue); content: ""; }
.quote-progress { margin-top: 28px; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.quote-ledger h2 { margin-top: clamp(54px,7vw,82px); }
.quote-ledger h2:focus { outline: none; }
.quote-intro { margin-top: 16px; max-width: 60ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.service-fieldset { border: 0; }
.service-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 18px; margin-top: 38px; }
.service-pill { position: relative; cursor: pointer; }
.service-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.service-pill span {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.service-pill input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--on-dark); }
.service-pill input:focus-visible + span { outline: 3px solid var(--focus-light); outline-offset: 3px; }
.quote-fields { display: grid; margin-top: 38px; }
.quote-fields--job { grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap: 28px; }
/* The job box is the field people actually write in, so it gets the full width.
   Street and Town then fall into the two columns beneath it as a pair, instead of
   Street taking the right cell and Town wrapping back to the left on the next row. */
.field-row--message { grid-column: 1 / -1; }
/* The chosen service is a state the visitor can see and undo, not text sitting
   in the box they are about to write in. It mirrors the checkboxes on step one,
   so without JavaScript there is nothing here worth showing and it stays out. */
/* A failed field says so where the visitor is already looking. The message used
   to sit at the foot of the form, below the fold on a phone, so pressing Continue
   simply appeared to do nothing. Red on the field, red under the field. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: -2px;
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}
.field-error::before {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--on-dark);
  content: "!";
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.field-row.is-invalid label { color: var(--danger); }
.field-row.is-invalid input,
.field-row.is-invalid textarea { border-color: var(--danger); }
.field-row.is-invalid input:focus,
.field-row.is-invalid textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(168,50,42,.18); }
.service-fieldset.is-invalid .service-pill span { border-color: var(--danger); }

/* The chips belong above the whole two-column row, not inside one column of it.
   Left as a grid cell they sat beside the job box on a wide screen and stretched
   to its height, which is what turned the pills into tall ovals. */
.quote-pick { display: none; grid-column: 1 / -1; gap: 10px; margin-bottom: 2px; }
.quote-form[data-enhanced] .quote-pick.is-shown { display: grid; }
.quote-pick__head span { color: var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* Change sits at the end of the chips, beside the choice it changes. It matches
   the chips at 38px; the invisible band above and below makes the tap area 44px. */
.quote-pick__change {
  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
}
.quote-pick__change::after { position: absolute; inset: -3px 0; content: ""; }
.quote-pick__list { display: contents; }
.quote-pick__chips { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.quote-pick__chip {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding-inline: 16px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 600;
}

.field-row {
  display: grid;
  align-content: start;
  gap: 10px;
}
.field-row label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.field-row input, .field-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  outline: 0;
  background: var(--cream);
  color: inherit;
  font-size: 1rem;
}
.field-row input { min-height: 54px; padding-inline: 18px; }
.field-row textarea { min-height: 190px; padding: 16px 18px; resize: vertical; }
.field-row input::placeholder, .field-row textarea::placeholder { color: var(--muted); opacity: 1; }
/* #10 Shown once the job box reaches its 4,000-character limit. */
.field-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.field-row input:focus, .field-row textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-soft); }
/* A reason, not an asterisk. People supply a town when told why it is wanted. */

/* Browser autofill paints its own background (yellow in Chrome, blue in some
   builds). These fields are transparent by design, so the fill shows through and
   breaks the ledger. Repaint it with an inset shadow, the only reliable override,
   and hold the caret and text colours through the autofill state. */
.field-row input:-webkit-autofill,
.field-row input:-webkit-autofill:hover,
.field-row input:-webkit-autofill:focus,
.field-row textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--cream) inset;
          box-shadow: 0 0 0 100px var(--cream) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}
/* The 38px drop below the headline moves off the two columns and onto the row, so
   the row is exactly as tall as the field stack. Centring the box then measures
   against the fields themselves rather than against the fields plus their margin. */
.quote-contact-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.65fr); gap:42px; margin-top:38px; }
.quote-contact-layout .quote-fields { margin-top:0; gap:18px; }
.quote-contact-layout .quote-review { align-self:center; margin-top:0; }
.quote-review { padding:24px; border-radius: var(--r-lg); background:var(--cream); color:var(--muted); font-size:0.8125rem; line-height:1.55; }
.quote-review__label { color:var(--blue-dark); font-size:0.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.quote-review dl { margin-block:18px; }
.quote-review dl div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding-block:11px; border-bottom:1px solid var(--line); }
.quote-review dt { font-weight:700; color:var(--ink); }
.quote-review dd { overflow-wrap:anywhere; }
.quote-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:38px; }
.quote-actions--end { justify-content:flex-end; }
.quote-button {
  display:inline-flex;
  min-height:48px;
  align-items: center;
  justify-content:center;
  padding-inline:28px;
  border:1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color:var(--ink);
  cursor: pointer;
  font-size:0.9375rem;
  font-weight:600;
  text-decoration:none;
}
.quote-button--primary { min-width:142px; border-color:var(--blue); background:var(--blue); color:var(--on-dark); }
.quote-submit { min-width:230px; }
.quote-button:focus-visible { outline:3px solid var(--focus-light); outline-offset:3px; }
.quote-submit[disabled] { cursor: wait; }
.form-status { margin-top: 18px; font-size: 0.9375rem; font-weight: 600; }
.form-status:empty { display: none; }
.quote-form[data-submit-state="sending"] .quote-submit { border-color:var(--blue-dark); background:var(--blue-dark); }
.quote-form[data-submit-state="failure"] .quote-submit { border-color:var(--ink); background:var(--ink); }
.form-status[data-state="success"] { color: var(--blue-dark); }
.form-status[data-state="error"] { color: var(--danger); }
.form-status a { color: inherit; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion:no-preference) {
  .quote-form[data-enhanced] .quote-step { animation:quoteStepIn .28s ease-out both; }
  .service-pill span { transition:border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
  .service-pill:hover span { transform:translateY(-1px); }
  @keyframes quoteStepIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}

/* Between the desktop layout and the phone there is a band where all five header
   items technically render but crowd each other. Tighten first, then drop the
   phone number — it is a full-width button in the hero immediately below and it
   is the first item inside the menu, so it is never more than one tap away. */
@media (max-width:900px) {
  .header-nav { gap: 14px; }
  .header-nav a { font-size: 0.8125rem; }
  .header-quote { padding-inline: 16px; font-size: 0.8125rem; }
}
@media (max-width:830px) {
  .header-phone, .header-contact { display: none; }
}

@media (max-width:760px) {
  /* Below this width the destinations no longer fit in the open, so they collapse
     into the sheet and the trigger appears. */
  .header-nav, .header-quote { display: none; }
  .menu-trigger { display: inline-flex; align-items: center; justify-content: center; }

  /* The interior photograph is a 3:2 landscape shot. At 64vh on a phone that is a
     390x540 hole, so cover crops hard into the room and the space stops reading.
     Bring the band closer to the photograph's own shape. */
  #parallaxWrap { min-height: 38vh !important; }

  .hero-section { min-height: 100svh; }
  .site-header__row { padding-block: 16px; }
  /* 19px matches the desktop brand name. The Menu label is 13px at every
     width, so this restores the same 1.46x lead the desktop header has;
     at 13.2px the business name was the same size as a utility button. */
  .brand-lockup svg { width: 33px; height: 41px; }
  .brand-lockup__name { font-size: 1.1875rem; }
  .brand-lockup__sub { font-size: 0.65rem; letter-spacing: .5em; }
  .site-header .rw-mark .rw-full { display: block !important; }
  .header-phone, .header-contact { display: none; }
  .menu-trigger { min-width: 70px; }
  .hero-copy h1 { max-width: 9ch; font-size: clamp(2.625rem,13vw,3.625rem); }
  .hero-actions { gap: 10px; }
  .hero-action { min-height: 48px; padding-inline: 20px; font-size: 0.875rem; }
  .hero-action--primary { padding-inline: 28px; font-size: 0.9375rem; }
  .menu-shell[data-enhanced] .menu-sheet { width: 100%; }
  .menu-sheet { padding-inline: 24px; }
  .menu-head { min-height: 80px; }
  .menu-brand { margin-top: 18px; }
  .menu-primary { margin-top: 52px; }
  .menu-links { margin-top: 54px; }
  .menu-link { min-height: 104px; }
  .menu-link__title { font-size: clamp(1.9375rem,8.5vw,2.375rem); }
  .menu-link__desc { font-size: 0.75rem; }
  .menu-phone { margin-top: 48px; }
  .menu-foot { min-height: 50px; }
  .service-toggle { grid-template-columns: 1fr; gap: 4px; }
  .service-title, .service-summary, .service-toggle__label { grid-column: 1/-1; }
  .service-toggle__label { min-height: 44px; display: inline-flex; align-items: center; }
  .service-drawer { grid-column: 1/-1; }
  .service-item--featured .service-drawer__inner { padding-top: 6px; }
  .service-item--featured .service-summary { font-size: 0.875rem; }
  .quote-ledger { width: 100vw; padding-inline: 18px; }
  .quote-step { padding-bottom: 24px; }
  .quote-ledger h2 { margin-top: 48px; }
  .service-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; margin-top:30px; }
  .service-pill span { min-height:54px; padding-inline:12px; font-size:0.8125rem; }
  .quote-fields--job, .quote-contact-layout { grid-template-columns:1fr; gap:20px; }
  /* Stacked, the box follows the fields, so the row gap is the only spacing it
     needs and there is no second column left to centre against. */
  .quote-contact-layout .quote-review { align-self:start; }
  .quote-actions { position:sticky; z-index:4; bottom:0; margin-inline:-18px; padding:14px 18px max(14px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); }
  .quote-button--primary { min-width:138px; }
  .quote-submit { min-width:0; flex:1; }
}

@media (max-width:430px) {
  .site-header__row { gap: 8px; padding-inline: 14px; }
  .menu-trigger { min-width: 66px; padding-inline: 14px; }
  .hero-copy__inner { padding-inline: 18px; }
}

/* Below this the Menu button starts to crowd the wordmark, so the lockup steps
   down. Measured clearance at 320px: 53px, wider than it was before. */
@media (max-width:350px) {
  .brand-lockup { gap: 9px; }
  .brand-lockup svg { width: 26px; height: 33px; }
  .brand-lockup__name { font-size: 0.95rem; }
  .brand-lockup__sub { font-size: 0.51875rem; }
}

@media (max-aspect-ratio:4/5) {
  .heroVid { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* The global reset below forces every animation to .01s, which left the brand
     strip frozen mid-scroll: a lone logo edge stranded in a field of gap, which
     reads as broken rather than still. Standing still is the right answer here,
     but it has to look deliberate, so the row wraps and centres instead. */
  .anim-glide {
    width: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    animation: none !important;
    transform: none !important;
  }
  .anim-glide img[alt=""] { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .heroVid { display: none !important; }
}


/* ---- Customer reviews ---------------------------------------------------
   All 13 reviews live in one compact, CSS-only scroll-snap rail. A clipped
   next card is the only affordance: there are deliberately no buttons, dots,
   progress bars or counters competing with the recommendations themselves.
   ------------------------------------------------------------------------- */
.reviews { padding: clamp(38px, 4.6vw, 62px) 0 clamp(44px, 5.4vw, 70px); border-block: 1px solid var(--line); background: var(--cream); }
  /* The band runs to both screen edges. It used to stop exactly where the text
     started, so a 100px numeral sat flush against a colour change and read as
     clipped. Full bleed removes the edge instead of pushing the words off it,
     which keeps this section in the same column as every other one. */
  .reviews { width: 100vw; margin-inline: calc(50% - 50vw); }
  .reviews__inner { width: auto; max-width: 1060px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
.reviews__inner { width: min(100%, 1280px); margin-inline: auto; }
.section-kicker { display: flex; min-block-size: 18px; align-items: center; gap: 10px; color: var(--blue-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; }
.section-kicker::before { width: 26px; height: 1px; background: var(--blue); content: ""; }
.reviews__head { margin-top: 20px; }
.reviews h2 { width: min(100%, 720px); margin-top: 16px; text-wrap: balance; }
.carousel-layout { margin-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.score-panel { padding: clamp(24px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.score-panel__aggregate { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 0.875rem; font-weight: 600; line-height: 1.45; }
.score-panel__aggregate strong { display: block; color: var(--ink); font-size: clamp(4.5rem, 7vw, 6.625rem); font-weight: 400; letter-spacing: -.065em; line-height: .9; }
.score-panel__meta { display: block; }
.carousel { width: calc(100% + clamp(18px, 4vw, 44px)); min-width: 0; margin-right: calc(clamp(18px, 4vw, 44px) * -1); overflow: hidden; }
.carousel-track { display: flex; min-width: 0; gap: 14px; padding: 22px clamp(18px, 4vw, 44px) 8px 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--focus-light); outline-offset: -3px; }
.review-card { display: flex; min-width: 0; min-height: 244px; flex: 0 0 clamp(260px, 30vw, 310px); flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); scroll-snap-align: start; }
.review-card:nth-child(even) { background: var(--tint-blue); }
.review-card blockquote { display: -webkit-box; max-width: 56ch; overflow: hidden; color: var(--muted); font-size: 1rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.review-card blockquote strong { color: var(--ink); font-weight: 700; }
.review-card__foot { margin-top: auto; }
.stars { --rating: 1; position: relative; width: 116px; height: 20px; overflow: hidden; background: url("stars-line.svg") 0 0 / 116px 20px no-repeat; }
.stars::after { position: absolute; inset: 0; width: calc(var(--rating) * 100%); background: url("stars-blue.svg") 0 0 / 116px 20px no-repeat; content: ""; }
.review-name { min-block-size: 22px; margin-top: 12px; font-size: 0.875rem; font-weight: 600; line-height: 1.55; }
.review-card--mini { min-height: 178px; flex-basis: 220px; }
.review-card--mini .review-card__foot { margin-top: 0; }

@media (max-width: 639px) {
  .reviews { padding-block: 40px 52px; }
  .carousel-layout { margin-top: 26px; }
  .score-panel__aggregate strong { font-size: 4.75rem; }
  .carousel { width: calc(100% + 18px); }
  .carousel-track { gap: 12px; padding-block: 18px 6px; padding-right: 18px; }
  .review-card { min-height: 252px; flex-basis: calc(100% - 54px); padding: 24px 22px; }
  .review-card blockquote { font-size: 0.9375rem; line-height: 1.55; letter-spacing: -.01em; -webkit-line-clamp: 6; }
  .review-card--mini { min-height: 170px; flex-basis: calc(72% - 18px); }
}

@media (max-width: 340px) {
  .review-card { flex-basis: calc(100% - 44px); padding-inline: 20px; }
  .review-card blockquote { font-size: 0.875rem; }
  .review-card--mini { flex-basis: calc(78% - 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto !important; scroll-snap-type: inline proximity; }
}

/* ---- Page sections -------------------------------------------------------
   These used to be typed into index.html as style attributes. They live here
   now so every value can use the names in :root. ------------------------- */
.section { padding-block: clamp(26px,4vw,44px); }
.container { max-width: 1060px; margin-inline: auto; padding-inline: clamp(18px,4vw,44px); }
.anchor { scroll-margin-top: 32px; }
.mask-inner { display: block; }
.kicker { display: flex; min-block-size: 18px; align-items: center; gap: 10px; color: var(--blue-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; }
.kicker__rule { display: inline-block; width: 26px; height: 1px; background: var(--blue); }
.kicker__text { display: inline-block; }
.section-title { margin-top: 18px; overflow: hidden; }
/* #43 One size for every section heading, #44 statements and card titles one step below. */
.section-title, .reviews h2, .quote-ledger h2 { font-size: clamp(2rem,4vw,2.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }

.cta-block { margin-top: 22px; }
.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cta-row__button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding-inline: 28px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--on-dark);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.cta-row__button:hover { color: var(--on-dark); }
.cta-row__note { color: var(--muted); font-size: 0.9375rem; }
.cta-row__phone { color: var(--ink); font-weight: 600; }

.service-rows { margin-top: clamp(30px,4vw,50px); }
.brands { margin-top: 6px; padding-top: clamp(30px,4vw,44px); border-top: 1px solid var(--line); }
.brands__viewport { margin-top: clamp(22px,3vw,30px); overflow: hidden; }
.anim-glide { display: flex; width: max-content; align-items: center; gap: clamp(40px,6vw,64px); animation: glide 40s linear infinite; }

.notsure {
  display: grid;
  border-radius: var(--r-lg);
  margin-top: clamp(38px,5.4vw,60px);
  grid-template-columns: minmax(0,1.05fr) minmax(0,1.4fr);
  gap: clamp(14px,4vw,48px);
  align-items: start;
  padding: clamp(26px,3.6vw,44px) clamp(22px,3vw,38px);
  background: var(--tint-blue);
}
.notsure__title { font-size: clamp(1.375rem,2.6vw,1.875rem); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; }
.notsure__body { max-width: 52ch; color: var(--text-body); font-size: 0.9375rem; line-height: 1.7; text-wrap: pretty; }
.notsure__link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 4px;
  align-items: center;
  color: var(--blue-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.notsure__link:hover { color: var(--blue-dark); }

.steps { position: relative; margin-top: clamp(30px,4vw,48px); }
.steps__track, .steps__fill { position: absolute; top: 8px; left: 6px; width: 1px; }
.steps__track { bottom: 0; background: var(--line); }
.steps__fill { height: 0; background: var(--blue); }
.steps__list { display: flex; flex-direction: column; gap: clamp(44px,5.6vw,68px); }
.step { position: relative; display: flex; align-items: flex-start; gap: 26px; }
.step__dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
}
.step__body { max-width: 50ch; }
.step__title { font-size: clamp(1.1875rem,2.2vw,1.4375rem); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
.step__text { margin-top: 9px; color: var(--muted); font-size: 0.875rem; line-height: 1.75; }
.final-row { display: flex; margin-top: clamp(52px,6.4vw,76px); align-items: flex-start; gap: 26px; }
.final-row__rail { position: relative; width: 13px; flex: none; }
.final-row__line, .final-row__fill { position: absolute; top: -76px; left: 6px; width: 1px; }
.final-row__line { height: 86px; background: var(--line); }
.final-row__fill { height: 0; background: var(--blue); }
.final-row__dot { position: relative; width: 11px; height: 11px; margin-top: 10px; margin-left: 1px; border-radius: 50%; background: var(--blue); }
.statement { max-width: 32ch; color: var(--ink); font-size: clamp(1.375rem,2.6vw,1.875rem); font-weight: 600; line-height: 1.28; letter-spacing: -.015em; }
.statement__accent { color: var(--blue); }
.statement--about { max-width: none; line-height: 1.3; }

.photo-band { position: relative; min-height: 64vh; overflow: hidden; background: var(--photo-fallback); }
.photo-band__img { position: absolute; top: -30px; right: 0; bottom: -30px; left: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; transform: translateY(0); }
.about-card {
  position: relative;
  margin-top: clamp(-90px,-8vw,-140px);
  padding: clamp(22px,4vw,44px);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--shadow-hairline);
}
.about-card__inner { max-width: 720px; margin-inline: auto; padding-block: clamp(10px,2vw,20px); text-align: center; }
.about-card__body { margin-top: 20px; color: var(--text-body); font-size: clamp(0.9375rem,1.7vw,1.0625rem); line-height: 1.65; }
.about-card__body--tight { margin-top: 12px; }
.about-card__byline { margin-top: 22px; color: var(--muted); font-size: 0.875rem; }
.about-card__byline b { color: var(--ink); }

.site-footer { margin-top: clamp(24px,4vw,40px); padding-block: clamp(30px,5vw,48px) 22px; background: var(--footer); color: var(--on-dark-muted); font-size: 0.8125rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: clamp(22px,4vw,44px); }
.footer-brand { display: flex; align-items: center; gap: 11px; color: var(--on-dark-soft); }
.footer-brand svg { display: block; width: 27px; height: 33px; flex: none; }
.footer-brand__name { font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -.015em; }
.footer-brand__sub { margin-top: 4px; margin-right: -.56em; color: var(--on-dark-faint); font-size: 0.5875rem; font-weight: 500; letter-spacing: .56em; }
.footer-legal { margin-top: 12px; color: var(--on-dark-faint); font-size: 0.8125rem; }
.footer-text { margin-top: 6px; font-size: 0.875rem; }
.footer-text--place { display: block; margin-top: 14px; color: var(--on-dark-muted); }
.footer-head { color: var(--on-dark); font-size: 0.9375rem; font-weight: 700; }
.footer-link { display: flex; min-height: 44px; align-items: center; color: var(--on-dark-muted); font-size: 0.875rem; text-decoration: none; }
.footer-head + .footer-link { margin-top: 4px; }
.footer-link--underlined { text-decoration: underline; }
.footer-link:hover { color: var(--on-dark-muted); }
.site-footer__base { display: flex; margin-top: 26px; padding-top: 16px; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line-dark); color: var(--on-dark-faint); font-size: 0.75rem; }

/* ---- Hover and press (#46) ---------------------------------------------
   Filled blue: darker on hover, darker still and pressed in on press.
   Outline on dark: a white tint. Outline on light: a cream fill.
   Text links: underline on hover, the pressed blue on press. The press-in
   scale is motion, so it is left out for visitors who asked for less. */
.hero-action--primary, .cta-row__button, .quote-button--primary, .menu-quote,
.hero-action, .header-quote, .quote-button, .quote-pick__change, .menu-trigger, .menu-close, .menu-phone strong, .menu-email strong {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.hero-action--primary:hover, .cta-row__button:hover, .quote-button--primary:hover, .menu-quote:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.hero-action--primary:active, .cta-row__button:active, .quote-button--primary:active, .menu-quote:active { border-color: var(--blue-press); background: var(--blue-press); }
.hero-action:not(.hero-action--primary):hover, .header-quote:hover, .menu-trigger:hover { background: rgba(255,255,255,.14); }
.hero-action:not(.hero-action--primary):active, .header-quote:active, .menu-trigger:active { background: rgba(255,255,255,.24); }
.quote-button--back:hover, .quote-pick__change:hover, .menu-close:hover, .menu-phone:hover strong, .menu-email:hover strong { background: var(--cream); }
.quote-button--back:active, .quote-pick__change:active, .menu-close:active, .menu-phone:active strong, .menu-email:active strong { background: var(--line); }
.service-quote-link:hover, .notsure__link:hover, .footer-link:hover, .review-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.service-quote-link:active, .notsure__link:active, .review-toggle:active { color: var(--blue-press); }
.service-item--featured .service-quote-link:active { color: var(--on-dark); }
@media (prefers-reduced-motion: no-preference) {
  .hero-action:active, .cta-row__button:active, .quote-button:active, .menu-quote:active, .header-quote:active,
  .menu-trigger:active, .menu-close:active, .quote-pick__change:active, .menu-phone:active strong, .menu-email:active strong { transform: scale(.97); }
}
/* #15 Under reduced motion the menu has no transition at all, so the Close button
   is visible, and focusable, in the same frame the menu opens. */
@media (prefers-reduced-motion: reduce) {
  .menu-shell, .menu-shell * { transition: none !important; }
}

/* ---- Longest reviews (#55) ----------------------------------------------
   Only a review that is actually cut off gets the link; it opens in place. */
.review-toggle {
  min-height: 44px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.review-card.is-expanded blockquote { display: block; overflow: visible; -webkit-line-clamp: unset; }

/* ---- Thank-you screen (#52) -------------------------------------------- */
.quote-thanks h2 { margin-top: 14px; }
.quote-thanks .quote-intro { margin-top: 12px; }
.quote-thanks .quote-intro b { color: var(--ink); font-weight: 600; }
.quote-thanks__sent { max-width: 520px; margin-top: 26px; }
.quote-thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .quote-thanks:not([hidden]) { animation: quoteStepIn .28s ease-out both; }
}
/* The Call button is a link, so it holds its ink colour against the page-wide link hover. */
.quote-thanks__actions .quote-button, .quote-thanks__actions .quote-button:hover { color: var(--ink); }