/* ================================================
   FONT
   Archivo, self-hosted (latin subset, variable weight),
   so the site makes no third-party font requests.
================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================
   TOKENS
   Derived from the logo: a black roofline mark on
   white. Monochrome throughout: black ink, a grey
   scale, white paper, black CTAs.
================================================ */
:root {
  --paper:    #FAFAFA;
  --paper-2:  #F0F0F0;
  --card:     #FFFFFF;

  --ink:      #111111;
  --ink-2:    #454545;
  --ink-3:    #666666;

  --line:     rgba(17, 17, 17, 0.12);
  --line-s:   rgba(17, 17, 17, 0.22);
  --line-r:   rgba(17, 17, 17, 0.42);

  /* brand ink, taken from the black roofline logo.
     The mark is pure black on white, so the whole site runs
     monochrome: black ink, greys, white paper. */
  --logo-red: #111111;
  --red:      #111111;
  --red-d:    #000000;
  --red-l:    #D2D2D2;   /* light mark, used only on the dark bands */
  --red-tint: rgba(17, 17, 17, 0.06);
  --star:     #111111;
  --ok:       #111111;

  /* CTA: black gradient, the one high-contrast element on the page */
  --cta-top:  #2C2C2C;
  --cta-btm:  #000000;
  --cta-ink:  #fff;

  /* graphite: the dark bands (neutral black, no colour cast) */
  --gr-0:     #0D0D0D;
  --gr-1:     #171717;
  --gr-line:  rgba(255, 255, 255, 0.13);
  --gr-t1:    #FFFFFF;
  --gr-t2:    #B4B4B4;

  /* logo drawing colours, re-pointed per context */
  --logo-ink:   var(--ink);
  --logo-knock: var(--paper);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 #fff inset, 0 20px 46px -24px oklch(19% 0 0 / 0.28);
  --shadow-hover: 0 1px 0 #fff inset, 0 30px 60px -24px oklch(19% 0 0 / 0.34), 0 0 0 1px var(--line-r);
  --shadow-cta: 0 1px 0 oklch(100% 0 0 / 0.35) inset, 0 14px 32px -12px oklch(40% 0 0 / 0.45);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.19,1,.22,1);

  --max: 1200px;
  --gutter: 28px;
  --h1-max: 54px;
  --h2-max: 43px;
  --hdr-h: 78px;           /* JS keeps this equal to the real header height */

  --z-nav: 100;
  --z-sticky: 150;
  --z-menu: 200;
  --z-lightbox: 300;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 14px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
/* <picture> only chooses the file (AVIF, WebP or JPEG); the <img> inside lays out as if it stood alone */
picture { display: contents; }
button { font-family: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: #fff; }

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

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

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.h1 {
  font-family: var(--display);
  font-size: clamp(31px, 4.4vw, var(--h1-max));
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(27px, 3.4vw, var(--h2-max));
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.024em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h1 em, .h2 em { font-style: normal; color: var(--red); }
/* hero headline: the place name fades from ink to grey. The lightest stop is dark enough
   to clear 3:1 (large text) over the hero photo and 6:1 on the plain paper background. */
.h1 .hl {
  color: var(--ink);
  background: linear-gradient(100deg, #111111 0%, #3f3f3f 45%, #5a5a5a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-2);
  line-height: 1.68;
  max-width: 62ch;
  text-wrap: pretty;
}

.sh-center { text-align: center; max-width: 740px; margin: 0 auto 60px; }
.sh-center.tight { margin-bottom: 42px; }
.sh-center .lead { margin: 16px auto 0; }
.sh-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.sh-split .lead { margin-top: 12px; }

/* the brand rule + tagline lockup, lifted from the logo.
   used once in the hero, nowhere else. */
.tagline {
  display: block;
  padding-top: 15px;
  margin-top: 20px;
  border-top: 2px solid var(--red);
  font-family: var(--display);
  font-size: clamp(11.5px, 1.15vw, 14px);
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--red-d);
  width: fit-content;
  max-width: 100%;
}

/* ================================================
   BUTTONS
================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-cta {
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-btm) 100%);
  color: var(--cta-ink);
  box-shadow: var(--shadow-cta);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 oklch(100% 0 0 / .4) inset, 0 20px 42px -12px oklch(40% 0 0 / .55);
}
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-s);
  box-shadow: var(--shadow-card);
}
.btn-ghost:hover {
  background: var(--paper-2);
  transform: translateY(-2px);
  border-color: var(--ink-3);
}
.btn-light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 32px -14px oklch(0% 0 0 / .6);
}
.btn-light:hover { transform: translateY(-2px); background: var(--paper-2); }
.btn svg { flex-shrink: 0; }

/* ================================================
   LOGO
================================================ */
.brand-mark { display: block; flex-shrink: 0; }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; flex: 0 1 auto; }
.brand-lockup .brand-mark { width: 62px; height: auto; }
.brand-text { line-height: 1; min-width: 0; }
.brand-name {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  white-space: nowrap;
}

/* ================================================
   NAV
================================================ */
#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 16px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  transition: padding .35s var(--ease);
}
#hdr .hdr-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(244, 244, 244, 0.86);
  background: oklch(96.5% 0 0 / 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-card);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
#hdr.on { padding-top: 10px; padding-bottom: 10px; }
#hdr.on .hdr-inner { background: oklch(96.5% 0 0 / 0.94); }

.nav { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; flex-shrink: 0; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--line); }
.nav-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-btm) 100%);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-cta);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-call:hover { transform: translateY(-1px); }
.nav-call svg { width: 15px; height: 15px; flex-shrink: 0; }

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--menu-top, 86px);
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: var(--z-menu);
  max-height: calc(100vh - var(--menu-top, 86px) - 12px);
  max-height: calc(100dvh - var(--menu-top, 86px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(250, 250, 250, 0.98);
  background: oklch(98% 0 0 / 0.98);
  border: 1px solid var(--line-s);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: 0 24px 60px -20px oklch(19% 0 0 / .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.mobile-menu.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.mobile-menu a:hover { background: var(--line); }
.mobile-menu .mm-call {
  margin-top: 10px;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg, var(--cta-top), var(--cta-btm));
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.mobile-menu .mm-call:hover { background: linear-gradient(180deg, var(--cta-top), var(--cta-btm)); }

/* ================================================
   HERO
================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 168px 0 104px;
  overflow: hidden;
  background: var(--paper);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* The cottage photo (gabled front, covered porch, chimneys), held to the right of the
   hero. The box keeps the photo's own shape (945 x 696), so nothing is cropped or stretched:
   the gable peak, the porch, the chimneys and the windows all stay in frame. The ::after wash
   is painted in --paper: it fades the left edge into the page so the headline stays readable,
   and fades the bottom before the lawn, so the photo dissolves into the white grid instead of
   ending on an edge. */
.hbg-photo {
  --ph-w: min(64vw, 1180px);
  position: absolute; top: 0; right: 0;
  width: var(--ph-w);
  height: min(100%, calc(var(--ph-w) * .92));   /* tall, but never so tall the photo has to be blown up */
  background: var(--paper) url('../photos/jpg/home-exterior-cottage-945.jpg') 0 0 / cover no-repeat;
  /* pulled most of the way to grey so the photo sits inside the
     monochrome palette instead of fighting the black type */
  filter: grayscale(.55) contrast(1.02);
}
/* AVIF first, then WebP, then the JPEG above for browsers without image-set() types.
   The <link rel="preload"> in index.html names the AVIF file, so keep the two in step. */
@supports (background-image: image-set(url('x.avif') type('image/avif'))) {
  .hbg-photo {
    background-image: image-set(
      url('../photos/avif/home-exterior-cottage-945.avif') type('image/avif'),
      url('../photos/webp/home-exterior-cottage-945.webp') type('image/webp'),
      url('../photos/jpg/home-exterior-cottage-945.jpg') type('image/jpeg'));
  }
}
.hbg-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(92deg,
      var(--paper) 0%,
      rgba(250,250,250,.82) 12%,
      rgba(250,250,250,.62) 24%,
      rgba(250,250,250,.46) 34%,
      rgba(250,250,250,.26) 50%,
      rgba(250,250,250,.08) 68%,
      rgba(250,250,250,0) 84%),
    linear-gradient(0deg, var(--paper) 0%, rgba(250,250,250,.94) 18%, rgba(250,250,250,0) 44%);
}
.hbg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 60px, 60px 100%;
  mask-image: linear-gradient(100deg, black 0%, black 34%, transparent 62%);
  -webkit-mask-image: linear-gradient(100deg, black 0%, black 34%, transparent 62%);
  opacity: .75;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .88fr);
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-body { min-width: 0; }

.hero-sub {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 22px;
  animation: fade-up .9s var(--ease) .1s both;
}
.hero-sub b { color: var(--ink); font-weight: 800; }
.hero-lead {
  margin-top: 22px;
  margin-bottom: 32px;
  max-width: 54ch;
  animation: fade-up .9s var(--ease) .16s both;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 38px;
  animation: fade-up .9s var(--ease) .22s both;
}
.hero-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-btm) 100%);
  color: #fff;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-cta);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-call:hover { transform: translateY(-3px); }
.hero-call:active { transform: translateY(0) scale(.99); }
.hero-call svg { width: 19px; height: 19px; flex-shrink: 0; }
.hero-call .hc-city {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-call .hc-num { display: block; line-height: 1; }

.hero-creds {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
  animation: fade-up .9s var(--ease) .3s both;
}
.cred {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.cred svg { color: var(--red); flex-shrink: 0; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero-qcard {
  background: var(--card);
  border: 1.5px solid var(--line-s);
  border-radius: var(--r-xl);
  padding: 30px 26px 26px;
  box-shadow: 0 1px 0 #fff inset, 0 30px 70px -30px oklch(19% 0 0 / .42);
  animation: fade-up .9s var(--ease) .36s both;
  position: relative;
  overflow: hidden;
  max-width: 440px;
  justify-self: end;
  width: 100%;
}
.hero-qcard::before {
  content: '';
  position: absolute; inset: 0; height: 5px; top: 0;
  background: linear-gradient(90deg, var(--logo-red), var(--gr-0));
  pointer-events: none;
}
.qcard-ttl {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin-bottom: 5px;
}
.qcard-sub { font-size: 14.5px; color: var(--ink-2); margin-bottom: 20px; }
.qfg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
.qfg label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-qcard input, .hero-qcard select {
  background: var(--paper);
  border: 1.5px solid var(--line-s);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 46px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-qcard select option { background: var(--card); color: var(--ink); }
.hero-qcard input:focus, .hero-qcard select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}
.hero-qcard input::placeholder { color: var(--ink-3); }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.qsub {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-btm) 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 15px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.qsub:hover:not(:disabled) { transform: translateY(-2px); }
.qsub:active { transform: translateY(0) scale(.99); }
.form-msg {
  display: none; margin-top: 14px; padding: 13px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600;
}
.form-msg.ok { display: block; background: oklch(58% 0 0 / .1); border: 1px solid oklch(58% 0 0 / .3); color: oklch(38% 0 0); }
.form-msg.err { display: block; background: oklch(40% 0 0 / .08); border: 1px solid oklch(40% 0 0 / .3); color: var(--red-d); }

/* ================================================
   TRUST BAR
   Five equal columns so the dividers land on an
   even rhythm no matter how long the labels run.
================================================ */
.trust-bar { position: relative; padding: 0 18px; margin-top: -34px; z-index: 5; }
.trust-inner {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--gr-0);
  border: 1px solid oklch(100% 0 0 / .12);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -24px oklch(19% 0 0 / .55);
  overflow: hidden;
}
.trust-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 62px;
  padding: 13px 14px;
  border-right: 1px solid var(--gr-line);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.34;
  color: var(--gr-t1);
  text-align: left;
  text-wrap: balance;
}
.trust-item:last-child { border-right: none; }
.trust-item svg { color: var(--red-l); flex-shrink: 0; }

/* ================================================
   SERVICES
   Siding and rot repair lead (most of the work),
   then roofing, decks and renovations.
================================================ */
.services { padding: 128px 0 96px; position: relative; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.svc-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--card);
  overflow: hidden;
  position: relative;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.svc-card.main { grid-column: span 3; }
.svc-card:hover {
  border-color: var(--line-r);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.svc-pic { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3; }
.svc-card.main .svc-pic { aspect-ratio: 16 / 10; }
.svc-pic img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
  transition: transform .7s var(--ease);
}
/* Portrait job photos sit in a landscape frame: pull the crop toward
   the part of each shot that carries the subject. */
.svc-pic img[src*="roofing-steel-ladder"] { object-position: 50% 16%; }
.svc-pic img[src*="interior-drywall-door"] { object-position: 50% 58%; }
.svc-pic img[src*="rot-repair-window-before"] { object-position: 50% 62%; }
.svc-pic img[src*="home-exterior-cottage"] { object-position: 50% 8%; }
.svc-card:hover .svc-pic img { transform: scale(1.045); }
.svc-copy { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.svc-name {
  font-family: var(--display);
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.024em;
  line-height: 1.04;
  margin-bottom: 12px;
}
.svc-desc { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; max-width: 56ch; }
.svc-covers {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}
.svc-covers li {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--red-d);
  background: var(--red-tint);
  border: 1px solid oklch(40% 0 0 / .22);
  border-radius: var(--r-pill);
  padding: 5px 13px;
}

.svc-all {
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
  padding: 26px 28px;
}
.svc-all h3 {
  font-family: var(--display);
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.svc-all ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 26px;
}
.svc-all li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.svc-all li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
}

/* ================================================
   WHO WE BUILD FOR (dark band)
================================================ */
.who {
  padding: 112px 0 116px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--gr-0) 0%, oklch(24% 0 0) 55%, var(--gr-0) 100%);
  color: var(--gr-t1);
}
.who::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 8%, oklch(40% 0 0 / .22) 0%, transparent 52%),
    radial-gradient(ellipse at 86% 92%, oklch(30% 0 0 / .5) 0%, transparent 56%);
}
.who .wrap { position: relative; z-index: 1; }
.who .h2 { color: var(--gr-t1); }
.who .h2 em { color: var(--red-l); }
.who .lead { color: var(--gr-t2); }
.who-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.who-card {
  display: flex; flex-direction: column;
  background: oklch(100% 0 0 / .05);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-lg);
  padding: 30px 28px 30px;
  min-width: 0;
}
.who-card.feature { background: oklch(100% 0 0 / .09); border-color: oklch(100% 0 0 / .26); }
.who-ico {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .2); color: #fff;
}
.who-card h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 25px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1.06; color: #fff;
  margin: 20px 0 12px;
}
.who-card p { font-size: 15.5px; line-height: 1.7; color: var(--gr-t2); }
.who-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 26px; }
.who-tags li {
  font-size: 12.5px; font-weight: 700; color: #fff;
  border: 1px solid oklch(100% 0 0 / .26); border-radius: var(--r-pill);
  padding: 5px 13px;
}
.who-card .btn { margin-top: auto; align-self: flex-start; text-align: center; }
.who-card.feature p + .who-tags + .btn { margin-top: 0; }
.who-card:not(.feature) .who-tags { margin-bottom: 0; }

/* ================================================
   WORK GALLERY
   One row of large photo cards that drifts left on its
   own. Hover, touch or keyboard focus pauses it. It also
   scrolls by hand (swipe, trackpad, mouse drag or the
   arrow buttons) and every card opens the full-size
   viewer. Card size comes from the three --card vars.
================================================ */
.work { padding: 96px 0 104px; position: relative; background: var(--paper-2); overflow: hidden; }
.gallery { position: relative; --card-w: 320px; --card-h: 400px; --card-gap: 14px; }
.gallery-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  /* first card lines up with the page column; the script drops this
     padding once it has added the looping copies */
  padding: 14px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 30px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.gallery-track.looping { padding-left: 0; padding-right: 0; }
.js .gallery-track { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.js .gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.dragging { cursor: grabbing; }
.gallery-track > li {
  flex: 0 0 auto; width: var(--card-w); height: var(--card-h); margin-right: var(--card-gap);
  /* a card never runs wider than the screen, so a landscape photo stays whole on a phone */
  max-width: calc(100vw - 2 * var(--gutter) - 24px);
}
/* landscape photos keep their shape: the same height as the portrait cards, 1.35 times as wide.
   The <picture sizes> values for the strip (SIZES in build-images.py) assume this ratio. */
.gallery-track > li.wide { width: calc(var(--card-h) * 1.35); }

.work-card {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; text-align: left; cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--line); background: var(--gr-0);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.work-card:hover, .work-card:focus-visible {
  transform: translateY(-5px); border-color: var(--line-r);
  box-shadow: 0 22px 34px -20px oklch(19% 0 0 / .5);
}
.work-card img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
  transition: transform .65s var(--ease);
}
.work-card:hover img { transform: scale(1.05); }
.work-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, oklch(15% 0 0 / .84) 100%);
  pointer-events: none;
}
.work-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px 15px; pointer-events: none;
}
.work-cap-name { font-family: var(--display); font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.015em; line-height: 1.12; text-transform: uppercase; display: block; }
/* Before / After tag on the rot repair pairs */
.work-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none;
  padding: 6px 11px 5px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  color: #fff; background: oklch(15% 0 0 / .66); border: 1px solid oklch(100% 0 0 / .26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.work-tag.after { color: var(--ink); background: #fff; border-color: #fff; }
.work-zoom {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(15% 0 0 / .5); border: 1px solid oklch(100% 0 0 / .2); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.work-card:hover .work-zoom, .work-card:focus-visible .work-zoom { opacity: 1; transform: none; }
@media (hover: none) {
  .work-zoom { opacity: 1; transform: none; }
}

/* arrow buttons: mouse users only, and only once the script is running */
.gal-nav {
  display: none; position: absolute; top: calc(50% - 8px); z-index: 3;
  width: 48px; height: 48px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid oklch(100% 0 0 / .22); color: #fff; cursor: pointer;
  background: oklch(15% 0 0 / .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-50%) scale(.92);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
}
.js .gal-nav { display: flex; }
.gallery:hover .gal-nav, .gal-nav:focus-visible { opacity: 1; transform: translateY(-50%); }
.gal-nav:hover { background: var(--gr-0); }
.gal-prev { left: 18px; }
.gal-next { right: 18px; }
@media (hover: none) {
  .js .gal-nav { display: none; }
}

/* ================================================
   ABOUT
================================================ */
.about { padding: 124px 0; position: relative; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.about-lead { margin: 18px 0 0; }
.about-lead + .about-lead { margin-top: 14px; }
.about-points { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; }
.feat {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.feat:hover { border-color: var(--line-s); transform: translateX(4px); }
.feat-icon {
  width: 44px; height: 44px; background: var(--red-tint); border: 1.5px solid oklch(40% 0 0 / .22);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: var(--red); flex-shrink: 0;
}
.feat-copy h3 { font-family: var(--display); text-transform: uppercase; font-size: 15.5px; font-weight: 800; letter-spacing: -.012em; color: var(--ink); margin-bottom: 4px; }
.feat-copy p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

.about-photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1.5px solid var(--line-s); box-shadow: var(--shadow-card);
}
.about-photo img { width: 100%; height: auto; }
.about-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(190deg, oklch(40% 0 0 / .1) 0%, transparent 34%, oklch(17% 0 0 / .58) 100%);
  pointer-events: none;
}
.about-photo-cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-radius: var(--r); background: oklch(15% 0 0 / .7);
  border: 1px solid oklch(100% 0 0 / .16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35;
}
.about-photo-cap svg { color: var(--red-l); flex-shrink: 0; }
.about-aside { min-width: 0; }

/* ================================================
   REVIEWS
================================================ */
.reviews { padding: 108px 0 118px; background: var(--paper-2); }
.g-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 22px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  box-shadow: var(--shadow-card);
}
.g-badge:hover { border-color: var(--line-r); transform: translateY(-2px); }
.g-ico { width: 34px; height: 34px; background: #fff; border-radius: 50%; padding: 6px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); }
.g-stars { font-size: 15px; color: var(--star); letter-spacing: 2px; line-height: 1; display: block; }
.g-cnt { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; display: block; }

.rc-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(40% 0 0 / .28), oklch(40% 0 0 / .1));
  border: 1.5px solid var(--line-r); color: var(--red-d);
  font-family: var(--display); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rc-name { font-size: 15px; font-weight: 700; color: var(--ink); display: block; }
.rc-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; display: block; }
.rc-stars { color: var(--star); font-size: 13px; letter-spacing: 2px; }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rc {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.rc:hover { border-color: var(--line-s); transform: translateY(-4px); }
.rc .rc-stars { margin-bottom: 13px; }
.rc-body { font-size: 15px; color: var(--ink-2); line-height: 1.68; flex: 1; margin-bottom: 20px; }
.rc-body a { color: var(--red-d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rc-author { display: flex; align-items: center; gap: 12px; }
.rc .rc-avatar { width: 40px; height: 40px; font-size: 14px; }

/* ================================================
   FAQ
================================================ */
.faq { padding: 108px 0 124px; }
.faq-grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 60px; align-items: start; }
.faq-intro .lead { margin-top: 14px; margin-bottom: 26px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.faq-item {
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card);
  overflow: hidden; transition: border-color .3s var(--ease);
}
.faq-item[open] { border-color: var(--line-r); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 17px 20px; min-height: 56px; font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line-s);
  display: flex; align-items: center; justify-content: center; color: var(--red);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq-item[open] .faq-x { transform: rotate(45deg); background: var(--red-tint); }
.faq-a { padding: 0 20px 19px; font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: 68ch; }

/* ================================================
   SERVICE AREA
================================================ */
.area { padding: 124px 0; position: relative; background: var(--paper-2); }
.area-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.area-desc { margin-top: 16px; margin-bottom: 8px; max-width: 54ch; }
.regions { display: flex; flex-direction: column; gap: 6px; }
.region h3 {
  font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 10px;
}
.cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.city-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  line-height: 1.25; min-width: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.city-pill:hover { border-color: var(--line-r); color: var(--ink); }
.city-pip { width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px oklch(40% 0 0 / .6); }
.city-pill.home { border-color: var(--line-r); color: var(--red-d); font-weight: 700; background: var(--red-tint); }
.area-note { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; max-width: 60ch; }

.radar-wrap {
  border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--card);
  overflow: hidden; position: sticky; top: calc(var(--hdr-h) + 20px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 20px 24px; box-shadow: var(--shadow-card);
}
.radar-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, var(--red-tint), transparent 70%); pointer-events: none;
}
/* Positions are percentages of the scene, so 100 km = the outer ring.
   dx and dy come from real bearings and distances off Sprucedale. */
.radar-scene { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; }
.ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid oklch(40% 0 0 / .2); }
.ring-25  { width: 25%;  height: 25%;  border-color: oklch(40% 0 0 / .16); }
.ring-50  { width: 50%;  height: 50%;  border-color: oklch(40% 0 0 / .14); }
.ring-75  { width: 75%;  height: 75%;  border-color: oklch(40% 0 0 / .11); }
.ring-100 { width: 100%; height: 100%; border: 1.5px dashed oklch(40% 0 0 / .4); }
.ring-lbl {
  position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 100%);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, oklch(40% 0 0 / .05) 50deg, oklch(40% 0 0 / .16) 90deg, transparent 90deg);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.radar-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 12%; aspect-ratio: 1; background: var(--card); border: 2px solid var(--red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--red-d);
}
.radar-pin svg { width: 55%; height: 55%; }
.city-dot { position: absolute; display: flex; align-items: center; gap: 5px; z-index: 3; transform: translate(-4px, -50%); }
.city-dot.l { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.dot-pip { width: 8px; height: 8px; flex-shrink: 0; background: var(--red); border-radius: 50%; animation: pulse-pip 2.4s ease-in-out infinite; }
.dot-lbl { font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 3px #fff; }
.radar-base {
  position: absolute; left: calc(50% - 8%); top: 50%; transform: translate(-100%, -50%);
  font-size: 11px; font-weight: 800; color: var(--red-d); white-space: nowrap; z-index: 3;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 3px #fff;
}
@keyframes pulse-pip { 0%,100% { box-shadow: 0 0 0 0 oklch(40% 0 0 / .5); } 50% { box-shadow: 0 0 0 6px oklch(40% 0 0 / 0); } }
.radar-cap { position: relative; margin-top: 30px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }

/* ================================================
   CONTACT
================================================ */
.contact { padding: 116px 0 124px; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: stretch; }
.contact-grid > .rev:first-child { min-width: 0; }
.contact-lead { margin-top: 16px; max-width: 46ch; }
.cinfo { display: flex; flex-direction: column; gap: 12px; padding-top: 34px; }
.ci {
  display: flex; align-items: center; gap: 14px; padding: 15px 17px; border-radius: var(--r);
  background: var(--card); border: 1.5px solid var(--line); min-width: 0;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ci:hover { border-color: var(--line-s); transform: translateX(4px); }
.ci-icon {
  width: 44px; height: 44px; background: var(--red-tint); border: 1.5px solid oklch(40% 0 0 / .22);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--red); flex-shrink: 0;
}
.ci-txt { min-width: 0; }
.ci-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-3); margin-bottom: 3px; display: block; }
.ci-val { font-size: 15.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; display: block; overflow-wrap: anywhere; }

.form-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: 36px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; min-width: 0;
}
.form-card::before { content: ''; position: absolute; inset: 0; height: 5px; top: 0; background: linear-gradient(90deg, var(--logo-red), var(--gr-0)); pointer-events: none; }
.form-ttl { font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-bottom: 8px; letter-spacing: -.024em; }
.form-sub { font-size: 14.5px; color: var(--ink-2); margin-bottom: 26px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.fg label .opt { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.fg input, .fg select, .fg textarea {
  background: var(--paper); border: 1.5px solid var(--line-s); border-radius: 11px;
  padding: 13px 15px; min-height: 48px; color: var(--ink); font-family: var(--body); font-size: 15px;
  outline: none; width: 100%; min-width: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fg select option { background: var(--card); color: var(--ink); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--ink-3); }
.fg textarea { resize: vertical; min-height: 120px; }
.fsub {
  width: 100%; min-height: 52px; margin-top: 8px;
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-btm) 100%); color: #fff;
  border: none; border-radius: var(--r-pill); padding: 16px;
  font-family: var(--display); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; box-shadow: var(--shadow-cta); transition: transform .25s var(--ease); position: relative;
}
.fsub:hover:not(:disabled) { transform: translateY(-2px); }
.fsub:active { transform: translateY(0) scale(.99); }
.fsub:disabled, .qsub:disabled { opacity: .65; cursor: wait; }

/* ================================================
   FOOTER
================================================ */
.footer { background: var(--gr-0); padding: 74px 0 30px; position: relative; }
.footer-cols { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 46px; }
.footer-logo { width: min(210px, 100%); height: auto; margin-bottom: 22px; }
.footer-brand p { font-size: 14.5px; color: var(--gr-t2); line-height: 1.7; max-width: 340px; }
.social { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.social a {
  display: flex; align-items: center; gap: 9px; padding: 0 16px 0 12px; height: 44px; border-radius: var(--r-pill);
  background: oklch(100% 0 0 / .05); border: 1px solid var(--gr-line); color: var(--gr-t2);
  font-size: 13.5px; font-weight: 700;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { color: var(--gr-t1); border-color: oklch(40% 0 0 / .45); background: oklch(100% 0 0 / .08); transform: translateY(-2px); }
.fcol { min-width: 0; }
.fcol-title { font-family: var(--display); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--gr-t1); margin-bottom: 16px; }
.flinks { display: flex; flex-direction: column; gap: 2px; }
.flinks a, .flinks li { font-size: 14.5px; color: var(--gr-t2); transition: color .2s; overflow-wrap: anywhere; }
.flinks a { display: inline-block; padding: 5px 0; }
.flinks a:hover { color: var(--gr-t1); }
.footer-btm { border-top: 1px solid var(--gr-line); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal p, .footer-legal a { font-size: 13px; color: var(--gr-t2); }
.footer-legal a { display: inline-block; padding: 7px 0; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.footer-legal a:hover { color: var(--gr-t1); }
.badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge {
  background: oklch(40% 0 0 / .16); border: 1px solid oklch(40% 0 0 / .36); color: var(--red-l);
  padding: 5px 13px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}

/* ================================================
   MOBILE STICKY CTA
   Hidden while the hero (with its own call and quote
   buttons) is on screen. Slides up once the hero has
   scrolled away, and steps aside over the contact form.
================================================ */
.sticky-bar {
  display: none; position: fixed;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  background: rgba(244, 244, 244, 0.94);
  background: oklch(96.5% 0 0 / .92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line-s); border-radius: var(--r-pill); padding: 8px;
  box-shadow: 0 24px 60px -20px oklch(19% 0 0 / .4);
  transition: transform .35s var(--ease), opacity .25s var(--ease), visibility 0s;
}
.js .sticky-bar { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s var(--ease), opacity .25s var(--ease), visibility 0s .35s; }
.js .sticky-bar.show { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .35s var(--ease), opacity .25s var(--ease), visibility 0s; }
.sticky-bar-inner { display: flex; gap: 8px; }
.sticky-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 8px;
  border-radius: var(--r-pill); font-family: var(--display); font-size: 14.5px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
.sb-call { background: linear-gradient(180deg, var(--cta-top), var(--cta-btm)); color: #fff; font-variant-numeric: tabular-nums; }
.sb-quote { background: var(--gr-0); color: var(--gr-t1); }

/* ================================================
   LIGHTBOX
================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 22px;
  background: oklch(10% 0 0 / .93); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.lb-head { width: 100%; max-width: 1060px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lb-title { font-family: var(--display); font-size: clamp(19px,2.4vw,25px); font-weight: 800; text-transform: uppercase; letter-spacing: -.024em; color: #fff; line-height: 1.06; }
.lb-counter { font-size: 13.5px; font-weight: 600; color: var(--gr-t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-counter b { color: var(--red-l); }
.lb-close {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .18); color: #fff; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); z-index: 3;
}
.lb-close:hover { background: oklch(100% 0 0 / .1); border-color: oklch(40% 0 0 / .5); transform: rotate(90deg); }
.lb-stage { position: relative; width: 100%; max-width: 1060px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r); border: 1px solid oklch(100% 0 0 / .16); box-shadow: 0 30px 80px -20px oklch(0% 0 0 / .8); background: var(--gr-0); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: oklch(20% 0 0 / .72); border: 1px solid oklch(100% 0 0 / .18); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s var(--ease), border-color .2s var(--ease); z-index: 2;
}
.lb-nav:hover { background: var(--red-d); border-color: var(--red-d); }
.lb-prev { left: -6px; }
.lb-next { right: -6px; }
.lb-thumbs { display: flex; gap: 9px; margin-top: 16px; max-width: 1060px; width: 100%; overflow-x: auto; padding: 4px 2px 2px; scrollbar-width: thin; justify-content: center; }
.lb-thumb { flex: 0 0 auto; width: 76px; height: 54px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; opacity: .45; cursor: pointer; transition: opacity .2s var(--ease), border-color .2s var(--ease); padding: 0; background: var(--gr-0); }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.active { opacity: 1; border-color: var(--red-l); }
body.lb-lock { overflow: hidden; }

/* ================================================
   SCROLL REVEAL
================================================ */
.js .rev { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rev.in { opacity: 1; transform: none; }
.js .d1 { transition-delay: .07s; }
.js .d2 { transition-delay: .14s; }
.js .d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}

/* ================================================
   LEGAL / UTILITY PAGES (privacy, thanks, 404)
================================================ */
.page-top { padding: calc(var(--hdr-h) + 54px) 0 46px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--ink-3); }
.crumbs ol, .crumbs { list-style: none; }
.page-top .meta { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.legal { padding: 64px 0 112px; }
.legal-body { max-width: 760px; }
.legal-body h2 {
  font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.12; margin: 46px 0 14px; text-wrap: balance;
}
.legal-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 14px; max-width: 70ch; }
.legal-body ul { margin: 4px 0 16px; display: flex; flex-direction: column; gap: 9px; }
.legal-body li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
.legal-body li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.legal-body a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body strong { color: var(--ink); }
.notice { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: calc(var(--hdr-h) + 40px) 0 80px; }
.notice .lead { margin: 16px 0 28px; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ================================================
   RESPONSIVE
   Wide screens first, then stepping down. Widths worth
   testing: 320, 360, 390, 430, 600, 768, 820, 1024, 1180,
   1280, 1440, 1920, 2560.
================================================ */
@media (min-width: 1600px) {
  :root { --max: 1320px; --gutter: 32px; --h1-max: 62px; --h2-max: 48px; }
  body { font-size: 17.5px; }
  .lead { font-size: 18.5px; }
  .gallery { --card-w: 340px; --card-h: 425px; }
}
@media (min-width: 2200px) {
  :root { --max: 1520px; --gutter: 40px; --h1-max: 72px; --h2-max: 54px; }
  body { font-size: 19px; }
  .lead { font-size: 20px; }
  .brand-lockup .brand-mark { width: 72px; }
  .brand-name { font-size: 21px; }
  .nav-links a { font-size: 15.5px; }
  .btn, .hero-call { font-size: 17px; }
  .gallery { --card-w: 380px; --card-h: 475px; }
  /* very wide screens: a wider box, still against the right edge */
  .hbg-photo { --ph-w: min(62vw, 1500px); }
  .hbg-photo::after {
    background:
      linear-gradient(92deg,
        var(--paper) 0%,
        rgba(250,250,250,.82) 12%,
        rgba(250,250,250,.62) 24%,
        rgba(250,250,250,.46) 34%,
        rgba(250,250,250,.26) 50%,
        rgba(250,250,250,.08) 68%,
        rgba(250,250,250,0) 84%),
      linear-gradient(0deg, var(--paper) 0%, rgba(250,250,250,.94) 18%, rgba(250,250,250,0) 44%);
  }
}

/* the full nav needs about 1130px; below that it moves into the menu */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 1199px) {
  /* six tracks so the 3-up row and the 2-up row both divide evenly */
  .trust-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trust-item { grid-column: span 2; }
  .trust-item:nth-child(n+4) { grid-column: span 3; }
  .trust-item:nth-child(3) { border-right: none; }
  .trust-item:nth-child(-n+3) { border-bottom: 1px solid var(--gr-line); }
  .who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero { min-height: 0; }
  .hero-qcard { justify-self: stretch; max-width: 560px; margin: 0 auto; }
  .about-grid, .area-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid, .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .svc-all ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .about-photo { max-width: 560px; margin: 0 auto; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card, .svc-card.main { grid-column: span 1; }
  .svc-card:last-child { grid-column: 1 / -1; }
  .svc-card:last-child .svc-pic { aspect-ratio: 21 / 9; }
  .gallery { --card-w: 290px; --card-h: 362px; }
  .radar-wrap { max-width: 560px; width: 100%; margin: 0 auto; position: relative; top: auto; }
}
/* Tablets (769 to 1024 px): the hero is one column, so the photo goes in the open corner right of the
   paragraph and the call buttons. It slides left, and up a little, as the screen widens: at 899 px the
   porch starts just right of the buttons, at 1024 px the whole house sits in the corner. The top edge
   is faded as well, because the photo starts part-way down the hero here. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hbg-photo {
    --ph-w: clamp(470px, 66vw, 690px);
    height: calc(var(--ph-w) * .7366);
    background-size: 100% 100%;
    right: auto;
    left: clamp(348px, calc(500px - (100vw - 899px) * 1.216), 500px);
    top: clamp(196px, calc(214px - (100vw - 899px) * .144), 214px);
  }
  .hbg-photo::after {
    background:
      linear-gradient(92deg,
        var(--paper) 0%,
        rgba(250,250,250,.84) 9%,
        rgba(250,250,250,.58) 22%,
        rgba(250,250,250,.3) 40%,
        rgba(250,250,250,.08) 60%,
        rgba(250,250,250,0) 78%),
      linear-gradient(180deg, var(--paper) 0%, rgba(250,250,250,.85) 9%, rgba(250,250,250,0) 26%),
      linear-gradient(0deg, var(--paper) 0%, rgba(250,250,250,.94) 21%, rgba(250,250,250,0) 49%);
  }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  /* phones keep the plain hero: the call button and the quote form come first */
  .hbg-photo { display: none; }
  body { font-size: 16px; }
  .sh-center { margin-bottom: 44px; }
  #hdr { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  #hdr .hdr-inner { padding: 7px 7px 7px 12px; gap: 10px; }
  .brand-lockup .brand-mark { width: 50px; }
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 8.5px; letter-spacing: .14em; }
  .hero { padding: 112px 0 76px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-call { justify-content: center; }
  .btn { justify-content: center; }
  .hero-creds { gap: 8px 18px; }
  .cred { font-size: 13px; }
  .qrow { grid-template-columns: 1fr; }
  /* 16px stops iOS Safari zooming the page when a field gets focus */
  .hero-qcard input, .hero-qcard select, .fg input, .fg select, .fg textarea { font-size: 16px; }
  .trust-bar { padding: 0 14px; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item, .trust-item:nth-child(n+4) { grid-column: auto; }
  .trust-item { border-right: 1px solid var(--gr-line); border-bottom: 1px solid var(--gr-line); justify-content: flex-start; min-height: 0; padding: 13px 14px; }
  .trust-item:nth-child(3) { border-right: 1px solid var(--gr-line); }
  .trust-item:nth-child(even) { border-right: none; }
  .trust-item:last-child { grid-column: 1 / -1; border-right: none; border-bottom: none; }
  .trust-item:nth-last-child(2) { border-bottom: 1px solid var(--gr-line); }
  .services, .about, .area { padding: 84px 0; }
  .reviews, .faq, .contact { padding: 84px 0; }
  .who { padding: 84px 0 88px; }
  .work { padding: 78px 0 56px; }
  .svc-copy { padding: 22px 20px 24px; }
  .svc-all { padding: 22px 20px; }
  .who-grid { grid-template-columns: 1fr; }
  .who-card { padding: 26px 22px; }
  .gallery { --card-w: 252px; --card-h: 315px; --card-gap: 12px; }
  .work-cap { padding: 14px 14px 13px; }
  .work-cap-name { font-size: 15px; }
  .work-tag { top: 11px; left: 11px; padding: 5px 9px 4px; font-size: 10.5px; }
  .work-zoom { width: 32px; height: 32px; }
  .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: 1fr; }
  .fg.full { grid-column: 1; }
  .form-card { padding: 28px 20px; }
  .hero-qcard { padding: 26px 20px 22px; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .footer-btm { flex-direction: column; align-items: flex-start; }
  .sticky-bar { display: block; }
  .footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .lightbox { padding: 14px; }
  .lb-head { padding-right: 54px; }
  .lb-nav { width: 42px; height: 42px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-thumbs { justify-content: flex-start; }
  .lb-thumb { width: 62px; height: 44px; }
  .radar-wrap { padding: 28px 14px 20px; }
  .page-top { padding: calc(var(--hdr-h) + 36px) 0 36px; }
  .legal { padding: 44px 0 84px; }
  .legal-body p, .legal-body li { font-size: 16px; }
}
@media (max-width: 599px) {
  .svc-all ul { grid-template-columns: 1fr; }
  /* call button collapses to a 44px icon so the menu button always fits */
  .nav-call { width: 44px; height: 44px; padding: 0; }
  .nav-call span { display: none; }
  .nav-call svg { width: 17px; height: 17px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card:last-child { grid-column: auto; }
  .svc-card:last-child .svc-pic { aspect-ratio: 4 / 3; }
  .svc-card.main .svc-pic { aspect-ratio: 4 / 3; }
  .who-card.feature { grid-column: auto; }
}
@media (max-width: 479px) {
  .city-dot.opt { display: none; }
  .who-card .btn { align-self: stretch; padding-left: 20px; padding-right: 20px; }
  /* stack the name so the logo, call button and menu button all fit */
  .brand-lockup { gap: 8px; }
  .brand-lockup .brand-mark { width: 44px; }
  .brand-name { font-size: 14px; line-height: 1.06; letter-spacing: 0; }
  .brand-name span { display: block; }
  .brand-sub { display: none; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  #hdr { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #hdr .hdr-inner { gap: 6px; padding-left: 10px; }
  .nav { gap: 4px; }
  .hero-call { font-size: 17px; padding: 15px 20px; }
  .sb-call, .sb-quote { font-size: 13.5px; }
  .gallery { --card-w: 228px; --card-h: 285px; }
  .trust-item { font-size: 12px; padding: 12px 10px; gap: 7px; }
  .trust-item svg { width: 16px; height: 16px; }
  .cities { grid-template-columns: 1fr; }
  .form-card { padding: 24px 16px; }
  .hero-qcard { padding: 24px 16px 20px; }
}
/* short landscape phones: keep the hero compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 96px; padding-bottom: 56px; }
  .lb-thumbs { display: none; }
}