/* ==========================================================================
   Elite Gutters
   Single stylesheet for index.html and page.html. No inline CSS anywhere.

   Palette note: the logo is navy / blue / chrome, so the brand colours are
   cool. The page ground is deliberately WARM (a sand-tinted off-white) so the
   navy reads richer and the whole thing feels less like a default template.
   Every pair below was contrast measured, not eyeballed. The numbers in the
   comments are real ratios.
   ========================================================================== */

:root {
  /* ---- brand, read from the logo vector ---- */
  --navy-900: #012242;
  --navy-800: #0a2c4e;
  --navy-700: #143a5f;

  --accent:     #0776be;   /* FILL only. White on it is 4.83:1 */
  --accent-dk:  #0f5f97;   /* TEXT links. 6.38:1 on page, 6.77:1 on white */
  --accent-lt:  #3bb4e2;   /* decorative on light, text-capable on navy (6.73:1) */

  /* ---- text ---- */
  --ink:        #0b1f33;   /* 15.75:1 on page */
  --muted:      #4a6076;   /* 6.14:1 on page, 5.59:1 on sunk */
  --on-dark:    #ffffff;
  --on-dark-mut:#bccde0;   /* 9.89:1 on navy-900 */

  /* ---- warm neutral surfaces. page recedes, cards come forward ---- */
  --page:    #faf8f5;
  --surface: #ffffff;
  --sunk:    #f2ede6;
  --line:    #e6ded2;
  --line-sc: #d6cabb;
  --line-dk: #1c4066;

  /* ---- semantic. never colour alone, always paired with a word or mark ---- */
  --ok:   #1b6b4a;
  --bad:  #9c2b21;

  /* status panels, defined once here rather than inline further down */
  --ok-bg:    #e8f4ee;
  --ok-line:  #b9dcca;
  --ok-text:  #14543a;   /* 8.35:1 on --ok-bg */
  --bad-bg:   #fdeceb;
  --bad-line: #f2c4c0;
  --bad-text: #7d231b;   /* 8.29:1 on --bad-bg */

  /* the warm highlight the hero and page head fade out of */
  --page-lift: #fffdfa;

  /* ---- 8px spacing scale. nothing off scale ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s6: 24px;  --s8: 32px;  --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px; --s32: 128px;

  /* ---- radii ---- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- elevation, two levels ---- */
  --sh-1: 0 1px 2px rgba(1,34,66,.05), 0 4px 16px rgba(1,34,66,.05);
  --sh-2: 0 2px 4px rgba(1,34,66,.06), 0 18px 44px rgba(1,34,66,.11);

  /* ---- type ----
     System stack on purpose. The wordmark is custom lettering so no typeface
     is inherited, and a webfont would cost render-blocking time on a page whose
     whole job is local search. On Apple hardware this resolves to SF, which is
     exactly the target feel. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --fs-display: clamp(2.375rem, 1.5rem + 3.9vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 1.32rem + 1.9vw, 2.75rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.375rem);
  --fs-body:    1.0625rem;    /* 17px floor, the audience skews older */
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  --measure: 66ch;
  --lh-tight: 1.06;
  --lh-body: 1.65;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --head-h: 68px;
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* guards against any single wide child forcing a sideways scroll */
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); letter-spacing: -.033em; }
h2 { font-size: var(--fs-h2);      letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-900); }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; }
li { margin-bottom: var(--s2); }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: var(--s4); top: -100px;
  z-index: 200; background: var(--navy-900); color: #fff;
  padding: var(--s3) var(--s6); border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s3); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   layout primitives
   ========================================================================== */

.wrap {
  width: min(100% - var(--s8), 1180px);
  margin-inline: auto;
}
@media (min-width: 700px) { .wrap { width: min(100% - var(--s12), 1180px); } }

.section { padding: var(--s20) 0; position: relative; }
@media (min-width: 900px) { .section { padding: var(--s32) 0; } }

.section--sunk  { background: var(--sunk); }
.section--navy  { background: var(--navy-900); color: var(--on-dark); }
.section--navy h2, .section--navy h3 { color: var(--on-dark); }
.section--navy p { color: var(--on-dark-mut); }

/* Pattern texture. A very low contrast dot field, pure CSS so it costs no
   request and scales to any viewport. Sits behind content, never over it. */
.section--sunk::before,
.section--navy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .035;
  pointer-events: none;
}
.section--navy::before { opacity: .07; }

.section__head { margin-bottom: var(--s12); max-width: 40rem; }
.section__head h2 { margin-bottom: var(--s4); }
.section__head p  { font-size: var(--fs-lead); color: var(--muted); margin-bottom: 0; }
.section--navy .section__head p { color: var(--on-dark-mut); }

.kicker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: var(--s3);
}
.section--navy .kicker { color: var(--accent-lt); }

/* ==========================================================================
   header
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 245, .8);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header {
    background: rgba(250, 248, 245, .72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(1, 34, 66, .06);
}

.header__inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--head-h);
}

.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
/* The lockup is 1.19:1 so it is sized by HEIGHT to sit in the bar. Setting a
   width here would squash it. */
.brand img { height: 42px; width: auto; }
@media (min-width: 900px) { .brand img { height: 50px; } }

.nav { display: none; }
@media (min-width: 980px) {
  .nav { display: flex; align-items: center; gap: var(--s1); }
}
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: rgba(7, 118, 190, .09); color: var(--accent-dk); }


.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-sc);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--sunk); border-color: var(--muted); }
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-x { display: none; }
.nav-toggle[aria-expanded="true"] .icon-x { display: block; }
.nav-toggle[aria-expanded="true"] .icon-bars { display: none; }

/* mobile drawer */
.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--page);
  padding: var(--s4) 0 var(--s8);
}
@media (min-width: 980px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: flex; align-items: center; min-height: 52px;
  padding: 0 var(--s2);
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav .btn { margin-top: var(--s4); width: 100%; }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 52px; padding: 0 var(--s8);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: inherit; font-size: var(--fs-body); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease-out), background .2s var(--ease),
              box-shadow .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(1,34,66,.12), 0 8px 22px rgba(7,118,190,.26);
}
.btn--primary:hover {
  background: var(--accent-dk); color: #fff;
  box-shadow: 0 2px 6px rgba(1,34,66,.16), 0 14px 30px rgba(7,118,190,.3);
}

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-sc);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }

.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--sunk); color: var(--navy-900); }

.btn--onnavy { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--onnavy:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--sm { min-height: 44px; padding: 0 var(--s6); font-size: var(--fs-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ==========================================================================
   hero
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--s16) 0 var(--s20);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(59,180,226,.16) 0%, rgba(59,180,226,0) 55%),
    radial-gradient(90% 70% at 6% 100%, rgba(7,118,190,.10) 0%, rgba(7,118,190,0) 60%),
    linear-gradient(180deg, var(--page-lift) 0%, var(--page) 58%, var(--sunk) 100%);
}
@media (min-width: 900px) { .hero { padding: var(--s24) 0 var(--s32); } }

/* Side ornament: a soft arc that echoes the gutter run in the logo. Hidden on
   small screens where it would only crowd the text. */
.hero__ornament {
  position: absolute; top: -18%; right: -12%;
  width: 46rem; height: 46rem;
  border-radius: 50%;
  border: 1px solid rgba(7,118,190,.14);
  box-shadow: inset 0 0 0 1px rgba(7,118,190,.05);
  pointer-events: none;
  display: none;
}
@media (min-width: 1100px) { .hero__ornament { display: block; } }

.hero__grid { display: grid; gap: var(--s12); align-items: center; position: relative; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s16); }
}

.hero h1 { margin-bottom: var(--s6); }
.hero__lead {
  font-size: var(--fs-lead); color: var(--muted);
  max-width: 34rem; margin-bottom: var(--s8);
}
.hero .btn-row { margin-bottom: var(--s6); }

.hero__note {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--fs-sm); color: var(--muted); max-width: 30rem;
}
.hero__note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--accent-dk); }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(1,34,66,.22), 0 4px 12px rgba(1,34,66,.08);
}

/* ==========================================================================
   trust strip
   ========================================================================== */

.trust {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(2, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--sh-1);
  position: relative; z-index: 2;
  margin-top: calc(var(--s16) * -1);
}
@media (min-width: 860px) {
  .trust { grid-template-columns: repeat(4, 1fr); padding: var(--s8); gap: var(--s6); }
}
.trust__item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2); }
.trust__item svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); margin-top: 2px; }
.trust__item b { display: block; font-weight: 600; font-size: var(--fs-sm); }
.trust__item span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   service cards
   ========================================================================== */

.cards { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-1);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-sc); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunk); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body { padding: var(--s6); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: var(--s3); }
.card__body p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.card__list { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.card__list li {
  position: relative; padding-left: var(--s6); margin-bottom: var(--s2);
  font-size: var(--fs-sm); color: var(--muted);
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lt);
}
.card__foot { margin-top: auto; }

.card__link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  min-height: 44px;
}
.card__link svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.card__link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   feature split
   ========================================================================== */

.split { display: grid; gap: var(--s12); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s20); }
  .split--flip .split__media { order: -1; }
}
.split__text h2 { margin-bottom: var(--s6); }
.split__text p { font-size: var(--fs-lead); color: var(--muted); }
.section--navy .split__text p { color: var(--on-dark-mut); }

.split__media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-2); }

.speclist { list-style: none; padding: 0; margin: var(--s8) 0 0; }
.speclist li {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4) 0; border-top: 1px solid var(--line);
  font-size: var(--fs-body); color: var(--muted);
}
.section--navy .speclist li { border-top-color: var(--line-dk); color: var(--on-dark-mut); }
.speclist li:last-child { border-bottom: 1px solid var(--line); }
.section--navy .speclist li:last-child { border-bottom-color: var(--line-dk); }
.speclist svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.section--navy .speclist svg { color: var(--accent-lt); }
.speclist b { color: var(--ink); font-weight: 600; }
.section--navy .speclist b { color: var(--on-dark); }

/* ==========================================================================
   steps
   ========================================================================== */

.steps { display: grid; gap: var(--s8); counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s12); } }
.step { counter-increment: step; position: relative; }
.step__n {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r);
  background: var(--accent-lt); color: var(--navy-900);
  font-weight: 700; font-size: 1.125rem;
  margin-bottom: var(--s6);
}
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: var(--s3); }

/* ==========================================================================
   service area
   ========================================================================== */

.areas { display: flex; flex-wrap: wrap; gap: var(--s2); }
.area-tag {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s6);
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease-out);
}
.area-tag:hover { background: var(--sunk); border-color: var(--line-sc); transform: translateY(-2px); }

.area-note { margin-top: var(--s8); font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { max-width: 56rem; }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 64px; padding: var(--s4) 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); text-align: left;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--accent-dk); }
.faq__q svg {
  width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-dk);
  transition: transform .3s var(--ease-out);
}
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }

.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { color: var(--muted); padding-bottom: var(--s6); }

/* ==========================================================================
   quote form
   ========================================================================== */

.quote { display: grid; gap: var(--s12); align-items: start; }
@media (min-width: 960px) { .quote { grid-template-columns: .85fr 1.15fr; gap: var(--s16); } }

.quote__aside p { color: var(--on-dark-mut); font-size: var(--fs-lead); }
.contact-list { list-style: none; padding: 0; margin: var(--s8) 0 0; }
.contact-list li { display: flex; gap: var(--s4); align-items: flex-start; margin-bottom: var(--s6); }
.contact-list svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-lt); margin-top: 3px; }
.contact-list b { display: block; color: var(--on-dark); font-weight: 600; }
.contact-list a { color: var(--on-dark-mut); text-decoration: none; }
.contact-list a:hover { color: #fff; text-decoration: underline; }
.contact-list span { color: var(--on-dark-mut); font-size: var(--fs-sm); }

.form {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s8);
  box-shadow: var(--sh-2);
}
@media (min-width: 700px) { .form { padding: var(--s12); } }

.form__grid { display: grid; gap: var(--s6); }
@media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

.field label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); margin-bottom: var(--s2);
}
.field .req { color: var(--bad); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px;
  padding: var(--s3) var(--s4);
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line-sc);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; padding-top: var(--s3); }
.field select { appearance: none; background-image: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(7,118,190,.16);
}
.field .hint { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); }

/* Error state pairs colour with a word and a mark, never colour alone. */
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--bad); box-shadow: 0 0 0 4px rgba(156,43,33,.12);
}
.field__error {
  display: none; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--bad); margin-top: var(--s2);
}
.field.has-error .field__error { display: flex; }
.field__error svg { width: 14px; height: 14px; flex: 0 0 auto; }

.form__foot { margin-top: var(--s8); display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 620px) { .form__foot { flex-direction: row; align-items: center; } }
.form__foot .btn { width: 100%; }
@media (min-width: 620px) { .form__foot .btn { width: auto; } }
.form__legal { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

.form__status {
  display: none; align-items: flex-start; gap: var(--s3);
  margin-top: var(--s6); padding: var(--s4) var(--s6);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.form__status.is-shown { display: flex; }
.form__status svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.form__status--ok  { background: var(--ok-bg);  color: var(--ok-text);  border: 1px solid var(--ok-line); }
.form__status--bad { background: var(--bad-bg); color: var(--bad-text); border: 1px solid var(--bad-line); }

/* honeypot, kept out of the tab order and off screen */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   page.html, the sub page template
   ========================================================================== */

.page-head {
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(59,180,226,.14) 0%, rgba(59,180,226,0) 60%),
    linear-gradient(180deg, var(--page-lift) 0%, var(--page) 100%);
  padding: var(--s16) 0 var(--s12);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .page-head { padding: var(--s20) 0 var(--s16); } }
.page-head h1 { max-width: 22ch; margin-bottom: var(--s4); }
.page-head p { font-size: var(--fs-lead); color: var(--muted); }

.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s6); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dk); text-decoration: underline; }
.crumbs span { padding: 0 var(--s2); }

/* Long form content. Sits in one <section> and stays readable at any width. */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); margin: var(--s12) 0 var(--s4); }
.prose h3 { font-size: 1.125rem; margin: var(--s8) 0 var(--s3); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ul, .prose ol { margin-bottom: var(--s6); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s12) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); }
/* wide content scrolls inside its own box, the page body never does */
.table-scroll { overflow-x: auto; margin-bottom: var(--s6); }

/* ==========================================================================
   footer
   ========================================================================== */

.footer { background: var(--navy-900); color: var(--on-dark-mut); padding: var(--s20) 0 var(--s8); }
.footer a { color: var(--on-dark-mut); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__top { display: grid; gap: var(--s12); }
@media (min-width: 760px)  { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__brand img { height: 64px; width: auto; margin-bottom: var(--s6); }
.footer__brand p { font-size: var(--fs-sm); max-width: 30ch; }

.footer h2 {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--s4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s1); }
.footer li a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm);
}

.social { display: flex; gap: var(--s3); margin-top: var(--s6); }
.social a {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dk); color: var(--on-dark-mut);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease-out);
}
.social a:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: var(--s16); padding-top: var(--s6);
  border-top: 1px solid var(--line-dk);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }

/* ==========================================================================
   scroll reveal
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
/* If JS never runs, nothing may stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

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

/* ==========================================================================
   additions
   ========================================================================== */

/* The guard photo is stock and only 459px wide. Capping the column here stops
   the browser scaling it past its own resolution, which is what makes a photo
   look soft. Remove the cap once a full resolution guard photo arrives. */
.split__media--tight { max-width: 460px; margin-inline: auto; }

/* their own work, full container width */
.workband { padding-top: 0; }
.workband__fig { margin: 0; }
.workband__fig img {
  width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.workband__fig figcaption {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   fixes found in QA
   -------------------------------------------------------------------------- */

/* .btn sets display:inline-flex and is declared after the header block, so a
   plain .header__cta rule loses the cascade on equal specificity. Scoping it to
   .header wins on specificity instead of relying on source order.
   The quote button is the primary action, so it stays visible on phones and is
   only dropped on the very narrowest screens where the bar would crowd. */
.header .header__cta { display: none; }
@media (min-width: 380px) { .header .header__cta { display: inline-flex; } }
@media (max-width: 460px) { .header .header__cta { padding: 0 var(--s4); } }

/* At 375px a two column trust strip leaves each item about 143px wide, which is
   too narrow for the sentence underneath. One column until there is room. */
@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; gap: var(--s4); }
}

/* The submit button shares a flex row with the legal note, and without this it
   shrinks until the label wraps onto two lines. */
.form__foot .btn { flex: 0 0 auto; white-space: nowrap; }

/* 44px minimum on the standalone links QA found short: the phone and email in
   the contact list, and the legal row in the footer. The one link left inline
   is "privacy policy" inside a sentence, which WCAG 2.5.5 exempts and which
   would look wrong padded out mid paragraph. */
.contact-list div a,
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__bottom { padding-bottom: var(--s2); }

/* reCAPTCHA container. The widget is injected by the host at build time, so
   this is empty and collapsed on a local preview and only takes space once a
   widget actually lands in it. */
.captcha:not(:empty) { margin-top: var(--s8); }
.captcha > * { max-width: 100%; }

/* The select placeholder should read as a prompt rather than as an answer. */
.field select:invalid,
.field select option[value=""] { color: var(--muted); }
.field select:valid { color: var(--ink); }

/* ==========================================================================
   revisions: header actions, hero button row, step layout
   ========================================================================== */

/* Calling is the highest intent action for a home services business, and on a
   phone it is one tap. So the phone number is the filled primary in the bar and
   the quote form is the secondary beside it. On narrow screens only the phone
   survives, because that is the one worth the space. */
.header__actions { display: flex; align-items: center; gap: var(--s2); }
.header .header__call { display: inline-flex; }
.header .header__cta  { display: none; }
@media (min-width: 760px) { .header .header__cta { display: inline-flex; } }

.header__call svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 420px) {
  .header__call { padding: 0 var(--s4); font-size: var(--fs-sm); }
  .header__call svg { width: 16px; height: 16px; }
}

/* Hero buttons share one row instead of stacking. Both shrink to fit rather
   than wrapping, which on a 375px screen is the difference between one clean
   row and two. */
@media (max-width: 560px) {
  .hero .btn-row { flex-wrap: nowrap; gap: var(--s2); }
  .hero .btn-row .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--s3);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .hero .btn-row .btn svg { width: 16px; height: 16px; }
}

/* Steps read as number then heading on one line, with the paragraph under the
   heading rather than under the number. */
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s4);
  align-items: center;
}
.step__n { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.step h3 { grid-column: 2; grid-row: 1; margin: 0; }
.step p  { grid-column: 2; grid-row: 2; margin: var(--s3) 0 0; }

/* ==========================================================================
   overflow fix found by the Playwright pass
   ==========================================================================
   Grid and flex items default to min-width:auto, which refuses to shrink below
   their content's min-content width. A <select> draws its min-content from its
   WIDEST <option>, so "New seamless gutter installation" was forcing the quote
   column 40px wider than its container at 375px.

   It did not show as a sideways scroll because body{overflow-x:hidden} was
   clipping it, which is the worse failure: the right edge of that section was
   simply cut off. Setting min-width:0 lets every track shrink properly, and the
   select truncates with an ellipsis instead of dictating the layout. */

.quote > *,
.split > *,
.cards > *,
.steps > *,
.trust > *,
.form__grid > .field,
.footer__top > * {
  min-width: 0;
}

.field select {
  max-width: 100%;
  text-overflow: ellipsis;
}

/* Google's reCAPTCHA checkbox is a fixed 304px iframe and will not shrink. On a
   320px screen the form's own padding leaves less room than that, so the widget
   pushed the page sideways. Scaling from the top left is the standard fix, with
   the container height reduced to match so it does not leave a gap underneath.
   Also trims the form padding on the narrowest screens to buy back room. */
@media (max-width: 420px) {
  .form { padding: var(--s6); }
}
@media (max-width: 400px) {
  .captcha:not(:empty) {
    transform: scale(.8);
    transform-origin: 0 0;
    height: 64px;
    margin-top: var(--s6);
  }
}

/* ==========================================================================
   tagline
   ==========================================================================
   Taken from the company's own email signature so the site, the signature and
   the cards all say the same three things. Uppercase and letterspaced to match
   how it is already set, with the middle phrase in brand blue. It wraps to
   three centred lines on a phone rather than shrinking the type. */

.tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s3) var(--s6);
  max-width: none;
  margin: var(--s16) 0 calc(var(--s16) * -1 + var(--s8));
  padding: 0 var(--s2);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 760px) { .tagline { gap: var(--s4) var(--s12); } }

/* The separator is drawn, not typed, so screen readers do not read out a pipe
   between every phrase. */
.tagline span + span::before {
  content: "";
  position: absolute;
  left: calc(var(--s6) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: var(--line-sc);
}
.tagline span { position: relative; }
@media (min-width: 760px) { .tagline span + span::before { left: calc(var(--s12) / -2); } }
@media (max-width: 759px) { .tagline span + span::before { display: none; } }

.tagline__mid { color: var(--accent-dk); }

.footer__tagline {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: var(--s3);
}

/* ==========================================================================
   at a glance
   ==========================================================================
   A definition list of plain, self contained statements. Answer engines quote
   this kind of writing far more readily than marketing prose, because each row
   stands on its own without the paragraph around it. */

.facts { margin: 0; }
.facts__row {
  display: grid;
  gap: var(--s1);
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}
.facts__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .facts__row { grid-template-columns: 15rem 1fr; gap: var(--s8); align-items: baseline; }
}
.facts dt { font-weight: 600; color: var(--ink); font-size: var(--fs-body); }
.facts dd { margin: 0; color: var(--muted); max-width: var(--measure); }

/* ==========================================================================
   spacing pass
   ==========================================================================
   Desktop vertical rhythm was running 128px between sections, which reads as
   generous on a long marketing page and as sparse on this one. Everything below
   steps down one notch on the 8px scale. Mobile is left alone, where the same
   values felt right. */

@media (min-width: 900px) {
  .section { padding: var(--s24) 0; }          /* was --s32, 128 -> 96 */
  .section__head { margin-bottom: var(--s8); } /* was --s12, 48 -> 32 */
  .split { gap: var(--s16); }                  /* was --s20, 80 -> 64 */
  .hero { padding: var(--s20) 0 var(--s24); }  /* was --s24 / --s32 */
  .steps { gap: var(--s8); }                   /* was --s12 */
  .quote { gap: var(--s12); }                  /* was --s16 */
}

.footer { padding: var(--s16) 0 var(--s8); }
.footer__top { gap: var(--s8); }
@media (min-width: 760px) { .footer__top { gap: var(--s12); } }
.footer__bottom { margin-top: var(--s12); }

/* The work band sat under a full height section above it and read as a gap. */
.workband { padding-top: 0; padding-bottom: var(--s16); }
@media (min-width: 900px) { .workband { padding-bottom: var(--s20); } }

/* The trust card lifts over the hero boundary, so the section after it does not
   need its own full top padding as well. */
#services { padding-top: var(--s16); }
@media (min-width: 900px) { #services { padding-top: var(--s20); } }

/* Now that the tagline carries the footer's top line, give it room to read as
   the company's line rather than as a stray caption. */
.footer__tagline {
  font-size: var(--fs-sm);
  letter-spacing: .09em;
  line-height: 1.5;
  margin-bottom: var(--s4);
}