/* ==========================================================================
   HomeTouch Exterior — Global stylesheet
   Design system: Forest / Deep Forest / Cream / Lime / Gold / Ink
   Type: Fraunces (display) + Inter (body & UI)
   Character: premium, editorial, architectural, calm, spacious
   ========================================================================== */

:root{
  /* Colour tokens */
  --forest:#2C5F45;
  --forest-deep:#142E24;
  --cream:#F8F4EA;
  --lime:#96C93F;
  --gold:#A9863E;
  --ink:#221F1B;
  --muted:#6B6459;
  --stone:#E2DDD2;
  --stone-tint:#F1EDE3;
  --white:#FFFFFF;
  --error:#B3261E;

  /* Layout */
  --container:1240px;
  --pad-x:24px;

  /* Radii */
  --r-sm:4px;
  --r-md:10px;
  --r-lg:22px;

  /* Shadows — tinted forest, never black. Used sparingly: forms, dropdowns,
     and a soft hover lift — never as a default resting state on cards. */
  --shadow-soft:0 2px 10px rgba(20,46,36,.06);
  --shadow-card:0 1px 3px rgba(20,46,36,.08);
  --shadow-hover:0 10px 28px rgba(20,46,36,.10);
  --shadow-form:0 16px 40px rgba(20,46,36,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  overflow-wrap:break-word;word-wrap:break-word;
}
html{overflow-x:hidden}
body.lb-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--forest);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--forest);outline-offset:2px;border-radius:var(--r-sm)}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typography ----------
   Manrope carries every heading level (H1/H2/H3 and major editorial
   headings); Inter covers everything else — body, nav, buttons, forms,
   labels, UI. Fraunces remains only on small decorative numerals/badges
   that were never headings (.row-num, .step-num, .process-num,
   .why-badge-num, .logo, .call-number etc.) — untouched by this change. */
h1,h2,h3,h4.display{font-family:'Manrope',Arial,sans-serif;font-weight:500;margin:0;color:var(--ink)}
h1{font-size:40px;line-height:1.08;letter-spacing:-.015em;font-weight:500}
h2{font-size:30px;line-height:1.16;letter-spacing:-.01em;margin-bottom:16px;font-weight:500}
h3{font-size:21px;line-height:1.32;font-weight:600}

/* Long service-page H1s (e.g. "Soffit, Fascia & Gutter Installation and
   Replacement in Toronto & the GTA") wrap into too many lines at the
   standard display size. This trims size and tracking without touching
   wording — apply on the specific hero h1 that needs it. */
.hero h1.h1-tight{font-size:32px;line-height:1.16;letter-spacing:-.005em}
@media (min-width:768px){.hero h1.h1-tight{font-size:44px;line-height:1.14}}
@media (min-width:1024px){.hero h1.h1-tight{font-size:52px;line-height:1.14}}
p{margin:0 0 16px}
.lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:58ch;font-weight:400}
.prose{max-width:62ch}
.prose p:last-child{margin-bottom:0}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;font-family:'Inter',sans-serif;
}
.eyebrow::before{content:"";display:block;width:26px;height:1px;background:var(--gold);flex:none}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--cream)}
.on-dark .lead,.on-dark p,.on-dark li{color:rgba(248,244,234,.82)}
.on-dark .call-link{color:var(--cream)}
.on-dark .call-link svg{stroke:var(--cream)}

/* ---------- Motion ----------
   Restrained, functional keyframes only. Every animation here plays once
   (entrance) or replays only on a genuine, user-triggered open/close (nav
   dropdown, mobile drawer) — never on a passive state change like the sticky
   bar's focus-hide toggle. All are neutralized by the reduced-motion rule
   at the end of this file. */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawerIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* Section-entry reveal. Gated behind .js-ready (added by site.js only after
   it actually runs and only when reduced-motion is not requested) so that
   with JavaScript disabled — or IntersectionObserver unsupported — sections
   simply keep their default opacity:1 and are fully visible and usable. */
.js-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.js-ready .reveal.is-visible{opacity:1;transform:none}

/* ---------- Sections ---------- */
section{padding:64px 0}
.sec-cream{background:var(--cream)}
.sec-white{background:var(--white)}
.sec-stone{background:var(--stone-tint)}
.sec-dark{background:var(--forest-deep)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--stone)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo:hover{text-decoration:none}
.logo img{height:44px;width:auto;display:block}
/* Single-row header on a cream ground: logo, the nine-item service nav, then
   the quote button with the phone stacked directly beneath it. The nav is set
   tight (12px / 15px gaps) because nine items plus the logo and action stack
   need every pixel to hold one row (see the desktop header breakpoints at the
   end of this file); below them the drawer takes over rather than letting the
   row wrap. */
.nav{display:none;align-items:center;gap:10px;flex:1;flex-wrap:nowrap;justify-content:flex-start}
.nav > a,.nav-item{flex:none}
.nav > a,.nav-trigger{
  color:var(--ink);font-size:12px;font-weight:600;padding:6px 0;position:relative;white-space:nowrap;
  line-height:1.65;
  background:none;border:0;font-family:'Inter',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:color .15s ease;
}
.nav > a:hover,.nav > a[aria-current],.nav-trigger:hover{color:var(--forest);text-decoration:none}
.nav > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--forest);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.nav > a:hover::after,.nav > a[aria-current]::after{transform:scaleX(1)}
.nav-item{position:relative}
.nav-menu{
  position:absolute;top:calc(100% + 14px);left:-16px;min-width:300px;background:var(--white);
  border:1px solid var(--stone);border-radius:var(--r-md);box-shadow:var(--shadow-hover);
  padding:10px;list-style:none;margin:0;display:none;z-index:60;
}
.nav-item.open .nav-menu{display:block;animation:dropdownIn .16s ease both}
/* The last group sits at the right edge of the row — anchor its panel to the
   right so it opens inward instead of running off the viewport. */
.nav-item:last-child .nav-menu{left:auto;right:-16px}

/* Subtle scrim behind the open Services dropdown, so it doesn't visually
   compete with hero/page content underneath. Sits below the header (z-index
   50) so the header itself stays crisp, and below the dropdown (z-index 60).
   Progressive enhancement via :has() — if unsupported, the dropdown still
   opens and closes exactly as before, simply without the scrim. */
body::before{
  content:"";position:fixed;inset:0;z-index:45;background:rgba(20,46,36,0);
  pointer-events:none;transition:background-color .15s ease;
}
body:has(.nav-item.open)::before{background:rgba(20,46,36,.18);pointer-events:auto}
.nav-menu a{display:block;padding:12px 14px;font-size:15px;color:var(--ink);border-radius:var(--r-sm);font-weight:500}
.nav-menu a:hover{background:var(--stone-tint);text-decoration:none}
.nav-menu .divide{border-top:1px solid var(--stone);margin:6px 0}
.nav-item.is-current > .nav-trigger{color:var(--forest)}
.nav-trigger .caret{transition:transform .18s ease}
.nav-item.open > .nav-trigger{color:var(--forest)}
.nav-item.open > .nav-trigger .caret{transform:rotate(180deg)}
/* Deep-linked sections must clear the sticky header when jumped to. */
section[id]{scroll-margin-top:84px}
.header-actions{display:flex;align-items:center;gap:12px;flex:none}
/* Phone + hours sit beside the quote button, separated by a hairline rule. */
.header-contact{display:none;align-items:center;gap:10px;padding-left:18px;border-left:1px solid var(--stone)}
.header-contact:hover{text-decoration:none}
.header-contact svg{stroke:var(--forest);flex:none}
.header-contact-text{display:flex;flex-direction:column;line-height:1.15}
.header-phone{color:var(--ink);font-weight:700;font-size:17px;letter-spacing:-.01em}
.header-contact:hover .header-phone{color:var(--forest)}
.header-hours{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em;margin-top:2px}
/* Social icons: just before the quote button on the desktop row (shown with
   the desktop nav, below); in the drawer on smaller screens. */
.header-social{display:none;align-items:center;gap:2px;flex:none}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  color:var(--forest);transition:background-color .15s ease,color .15s ease;
}
.social-link:hover{background:var(--stone-tint);color:var(--forest-deep);text-decoration:none}
.social-link:focus-visible{outline:2px solid var(--forest);outline-offset:1px;border-radius:50%}
.drawer-social{display:flex;gap:10px;margin-top:18px}
.drawer .drawer-social-link{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(248,244,234,.3);
  border-radius:50%;color:var(--cream);
}
.drawer .drawer-social-link:hover{color:var(--lime);border-color:var(--lime)}
.drawer .drawer-social-link svg{width:20px;height:20px}
.phone-icon-only{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
.phone-icon-only svg{stroke:var(--forest)}
.phone-icon-only:hover svg{stroke:var(--forest-deep)}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;cursor:pointer}
.menu-toggle svg{stroke:var(--forest-deep)}
/* The drawer keeps its dark ground, so it keeps the white lockup. */
.drawer .menu-toggle svg{stroke:var(--cream)}
/* The lockup's wordmark is white, so on the cream header it sits on a
   forest-green plate — the treatment in the approved header reference. The
   drawer is already forest green and takes the artwork with no plate. */
.site-header .logo{background:var(--forest-deep);border-radius:var(--r-md);padding:10px 16px}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:var(--forest-deep);display:none;flex-direction:column;padding:20px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
.drawer.is-open{display:flex;animation:drawerIn .2s ease both}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.drawer a{color:var(--cream);font-size:19px;font-weight:500;padding:13px 0;display:block;border-bottom:1px solid rgba(248,244,234,.14)}
.drawer a:hover{color:var(--lime);text-decoration:none}
.drawer .sub{font-size:16px;padding-left:16px;color:rgba(248,244,234,.85)}
/* Expandable service groups in the drawer — same row treatment as a plain
   drawer link, with the panel collapsed until its row is tapped. */
.drawer-group{border-bottom:1px solid rgba(248,244,234,.14)}
.drawer-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;cursor:pointer;font-family:'Inter',sans-serif;
  color:var(--cream);font-size:19px;font-weight:500;padding:13px 0;text-align:left;
}
.drawer-trigger .caret{transition:transform .18s ease;flex:none}
.drawer-group.open .drawer-trigger{color:var(--lime)}
.drawer-group.open .drawer-trigger .caret{transform:rotate(180deg)}
.drawer-panel{display:none;padding-bottom:6px}
.drawer-group.open .drawer-panel{display:block}
.drawer-panel a{border-bottom:0;padding:10px 0 10px 16px}
.drawer-phone{margin-top:28px;font-family:'Fraunces',serif;font-size:24px;color:var(--cream);border:0;display:inline-block}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;line-height:1;letter-spacing:.005em;
  padding:16px 28px;border-radius:var(--r-md);border:1.5px solid transparent;
  cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
  text-decoration:none;min-height:50px;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn-primary:hover{background:var(--forest-deep);border-color:var(--forest-deep)}
.btn-primary svg{stroke:var(--cream)}
.btn-on-dark{background:var(--cream);color:var(--forest-deep);border-color:var(--cream)}
.btn-on-dark:hover{background:#fff;border-color:#fff}
.btn-secondary{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-secondary:hover{background:var(--forest);color:var(--cream)}
.btn-block{width:100%}
.header-cta{display:none}
.call-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--forest)}
.call-link svg{stroke:var(--forest)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 6px;opacity:.6}

/* ---------- Hero ----------
   Two shapes share this block: a text-only centered hero (Services hub —
   plain .hero > .wrap, unchanged) and a photo-bleed hero (.hero-grid with
   a .hero-media child) where the image runs to the true edge of the
   viewport instead of sitting inset inside a bordered placeholder frame —
   the single biggest lever for reading as an environmental photo panel
   rather than a component slot, even while it's still a neutral
   placeholder. .hero-grid intentionally lives OUTSIDE any .wrap so the
   media column can bleed; .hero-copy carries its own left/right padding
   to line up with the rest of the page's content edge. */
.hero{padding-top:0;padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1fr}
.hero-copy{padding:48px var(--pad-x) 44px}
.hero h1{margin-bottom:18px;animation:fadeUp .5s ease both}
.hero h1 .u{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 96%;
  padding-bottom:6px;
}
.hero .eyebrow{animation:fadeUp .45s ease both}
.hero .lead{font-size:18px;margin-bottom:30px;animation:fadeUp .5s ease .06s both}
.hero-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start;animation:fadeUp .5s ease .12s both}
.hero-media{width:100%;animation:fadeIn .6s ease .1s both}
.hero-media .frame{border:0;border-radius:0;aspect-ratio:5/4}
.hero-media .ph{background:var(--stone-tint);background-image:none}

/* Text-only hero (Services hub): centred, no media column, ordinary
   .wrap padding — this is the "editorial intro" hero shape. */
.hero-center{text-align:center}
.hero-center .eyebrow{justify-content:center}
.hero-center .lead{margin-left:auto;margin-right:auto}
.hero-center .hero-actions{align-items:center;justify-content:center}

/* Full-bleed overlay hero (homepage only): the photo fills the entire
   section edge-to-edge and top-to-bottom, a dark scrim sits over it for
   text contrast, and the headline is set directly on top — a cinematic
   treatment reserved for the homepage. Every other page keeps the
   split hero-copy/hero-media layout above untouched. Reuses the same
   .hero base (padding, keyframes) and the sitewide .on-dark utility for
   text colour, so no separate animation or colour system is introduced. */
.hero-overlay{position:relative;min-height:520px;display:flex;overflow:hidden}
.hero-overlay .hero-media{position:absolute;inset:0}
.hero-overlay .hero-media .frame{width:100%;height:100%;aspect-ratio:auto}
/* The hero photo is a wide 2.16:1 frame with the branded van on its right.
   object-fit:cover never distorts it, but on narrow viewports a centred
   crop would push the van out of frame — so the focal point shifts right
   as the viewport narrows, and only returns to centre on desktop where
   the container is nearly as wide as the photo itself. */
.hero-overlay .hero-media img{object-position:95% center}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,46,36,.34) 0%,rgba(20,46,36,.60) 42%,rgba(20,46,36,.72) 72%,rgba(20,46,36,.86) 100%);
}
.hero-overlay .wrap{position:relative;z-index:1;display:flex;align-items:center;width:100%}
.hero-overlay .hero-copy{max-width:640px;padding:72px 0}
.hero-overlay .eyebrow{color:var(--gold)}

/* ---------- Trust & Values (rendered by HT.renderTrust) ----------
   One continuous dark-forest band directly beneath every hero: the three
   trust facts on top, a hairline, then the four HomeTouch values. Same
   markup and styles on every page. */
.trust-values{background:var(--forest-deep);color:var(--cream);padding:32px 0 36px}
.tv-facts{list-style:none;margin:0;padding:0;display:grid;justify-content:center;gap:14px}
.tv-facts li{display:flex;align-items:center;gap:11px;font-weight:500;font-size:14.5px;line-height:1.3;letter-spacing:.01em;color:var(--cream)}
.tv-facts svg{flex:none;stroke:var(--lime)}
.tv-values{
  list-style:none;margin:28px 0 0;padding:28px 0 0;border-top:1px solid rgba(248,244,234,.14);
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;text-align:center;
}
.tv-values li{min-width:0}
.tv-title{
  margin:0 0 7px;font-family:'Manrope',Arial,sans-serif;font-size:12.5px;font-weight:700;line-height:1.35;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime);
}
.tv-text{margin:0 auto;max-width:34ch;font-size:14.5px;line-height:1.55;color:rgba(248,244,234,.84)}

/* ---------- Image frames & placeholders ---------- */
.frame{
  position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;
  border:1px solid var(--stone);border-radius:var(--r-md);background:var(--stone-tint);
}
.frame-lg{border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.frame img{width:100%;height:100%;object-fit:cover}
.ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:14px;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(226,221,210,.30) 0 8px,transparent 8px 16px),var(--stone-tint);
}
.ph svg{stroke:var(--muted);opacity:.55}
.ph-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cap{font-size:13px;color:var(--muted);line-height:1.45;margin:10px 2px 0}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.photo-grid .tile{display:flex;flex-direction:column}

/* ---------- Service tiles (homepage / services hub) ----------
   Quiet editorial grid, not a card wall: a flat icon mark and generous
   whitespace carry the hierarchy — no borders, boxes or shadows at rest,
   and only a restrained colour/gap shift on hover. */
.card-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:36px}
.card{display:flex;flex-direction:column;gap:18px;text-decoration:none}
.card:hover{text-decoration:none}
.card-icon{
  width:34px;height:34px;flex:none;color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  transition:color .18s ease;
}
.card:hover .card-icon{color:var(--forest-deep)}
.card-icon svg{stroke:currentColor;width:100%;height:100%}
.card-body{display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:19px}
.card-body p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;flex:1}
.card-more{font-size:14px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:5px;transition:gap .15s ease}
.card:hover .card-more{gap:9px}
.services-cta{margin-top:44px;text-align:center}

/* ---------- Photo-led service tile (homepage) ----------
   Layered on top of the base .card above: name, then a prominent 4:3
   photo (plain .frame — same border/radius/no-shadow treatment used
   everywhere else), description, then the link. No icon — the
   photograph is the only visual mark carrying the tile. Scoped to
   .card-photo so the icon-based .card used on the Services hub is
   untouched for now. */
.card-photo{gap:16px}
.card-photo h3{font-size:20px}
.card-photo p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
.card-photo .card-more{font-size:15px}

/* ---------- Numbered list rows (services hub / areas) ---------- */
.row-list{display:flex;flex-direction:column;gap:0;margin-top:26px;border-top:1px solid var(--stone)}
.row{
  display:flex;align-items:center;gap:16px;background:transparent;
  border-bottom:1px solid var(--stone);padding:18px 2px;
  transition:padding-left .18s ease,color .15s ease;
}
.row:hover{text-decoration:none;padding-left:8px}
.row-num{
  font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--gold);
  border:1px solid var(--gold);border-radius:50%;width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.row-name{font-weight:600;font-size:15.5px;color:var(--ink);flex:1}
.row-arrow{color:var(--forest);font-weight:600;flex:none}

/* ---------- Signs / bullet list ---------- */
.signs{list-style:none;margin:24px 0 0;padding:0;max-width:62ch}
.signs li{position:relative;padding-left:30px;margin-bottom:14px;font-size:16px}
.signs li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border:1.5px solid var(--forest);border-radius:50%;
}

/* ---------- Checklist ---------- */
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:13px}
.checks li{position:relative;padding-left:30px;font-size:16px}
.checks li::before{
  content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;
  border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);
  transform:rotate(-45deg);
}
.checks.on-dark li::before{border-color:var(--lime)}
.checks-group{margin-top:28px}
.checks-group h3{font-size:17px;margin-bottom:4px}
.scope-note{font-size:14px;color:var(--muted);font-style:italic;margin-top:24px;max-width:62ch}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:32px}
.step-num{
  font-family:'Fraunces',serif;font-size:17px;font-weight:500;color:var(--gold);
  border:1px solid var(--gold);border-radius:50%;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:15px;color:var(--muted);margin:0}

/* ---------- FAQ ---------- */
.faq{margin-top:28px;max-width:80ch;border-top:1px solid var(--stone)}
.faq details{border-bottom:1px solid var(--stone)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:600;font-size:16px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .answer{padding:0 8px 22px 0;color:var(--muted);font-size:16px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- Boundary rows (Exterior Maintenance) ---------- */
.boundary{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px;max-width:820px}
.bound{
  background:var(--white);border:1px solid var(--stone);border-radius:var(--r-md);
  padding:18px 20px;
}
.bound.here{border-color:var(--forest);border-width:1.5px}
.bound strong{display:block;font-size:15px;margin-bottom:3px}
.bound span,.bound a{font-size:15px;color:var(--muted)}
.bound a{color:var(--forest);font-weight:600}

/* ---------- Callout card ---------- */
.callout{
  background:var(--white);border:1px solid var(--stone);border-top:2px solid var(--gold);
  border-radius:var(--r-md);padding:26px 24px;max-width:820px;
}
.callout h2{font-size:22px}
.callout p:last-child{margin-bottom:0}

/* ---------- Split blocks (Our Methods, guard options) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:1px;margin-top:28px;background:var(--stone)}
.split-item{background:var(--cream);padding:26px 24px 30px}
.sec-white .split-item{background:var(--white)}
.sec-stone .split-item{background:var(--stone-tint)}
.split-item h3{font-size:18px;margin-bottom:10px}
.split-item p:last-child{margin-bottom:0}
.split-item p{font-size:15px;color:var(--muted)}
.tier{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}

/* ---------- Related services ---------- */
.related{display:flex;flex-direction:column;gap:0;margin-top:28px;border-top:1px solid var(--stone)}
.rel{
  background:transparent;border-bottom:1px solid var(--stone);
  padding:20px 2px;display:block;transition:padding-left .18s ease;
}
.rel:hover{padding-left:8px;text-decoration:none}
.rel h3{font-size:17px;margin-bottom:6px}
.rel p{font-size:14px;color:var(--muted);margin:0 0 8px}
.rel .more{font-size:14px;font-weight:600;color:var(--forest)}

/* ---------- Feature cards (Our Methods, per-service feature panels) ----------
   Boxed and icon-led — deliberately a heavier, more "card" treatment than
   the flat service tiles above, so the two grids read as different kinds
   of content rather than the same component repeated. */
.feature-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
.feature-card{
  background:var(--white);border:1px solid var(--stone);border-radius:var(--r-md);
  padding:28px 24px;display:flex;flex-direction:column;gap:14px;
}
.feature-icon{
  width:46px;height:46px;border-radius:50%;flex:none;background:var(--stone-tint);
  display:flex;align-items:center;justify-content:center;color:var(--forest);
}
.feature-icon svg{stroke:currentColor}
.feature-card h3{font-size:17px}
.feature-card p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- Process list + companion image ----------
   A numbered, editorial list paired with one large image rather than a
   grid of identical numbered tiles. */
.process-split{display:grid;grid-template-columns:1fr;gap:28px;margin-top:32px;align-items:start}
.process-media{width:100%}
.process-list{display:flex;flex-direction:column}
.process-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--stone)}
.process-item:first-child{padding-top:0}
.process-item:last-child{border-bottom:0}
.process-num{
  font-family:'Fraunces',serif;font-size:14px;font-weight:500;color:var(--gold);
  border:1px solid var(--gold);border-radius:50%;width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.process-body h3{font-size:17px;margin-bottom:5px}
.process-body p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- Featured comparison panels (Services hub) ----------
   Photo-led pair used to give a visually important distinction (e.g.
   Gutter Cleaning & Repair vs. Soffit, Fascia & Gutters) real weight,
   instead of burying it as a plain text aside. */
.feature-panels{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.feature-panel{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stone);text-decoration:none;background:var(--white);transition:border-color .18s ease}
.feature-panel:hover{text-decoration:none;border-color:var(--forest)}
.feature-panel .frame{border:0;border-radius:0;aspect-ratio:16/10}
.feature-panel-body{padding:24px 22px}
.feature-panel-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.feature-panel h3{font-size:19px;margin-bottom:8px}
.feature-panel p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.feature-panel .more{font-size:14px;font-weight:600;color:var(--forest)}

/* ---------- Why HomeTouch: image + copy, with a distinct badge callout
   closing the copy column so the section reads as three moments (photo,
   story + checklist, proof point) rather than a flat two-column split. ---------- */
.why-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.why-media{width:100%}
.why-badge{
  display:flex;align-items:center;gap:18px;margin-top:32px;padding-top:28px;
  border-top:1px solid rgba(248,244,234,.16);
}
.why-badge-icon{
  flex:none;width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
}
.why-badge-num{font-family:'Fraunces',serif;font-size:32px;font-weight:500;color:var(--cream);line-height:1}
.why-badge-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(248,244,234,.7);margin-top:5px}

/* ---------- Before & after ----------
   Two large square plates rather than a grid of thumbnails: the source
   photographs are single-frame comparisons shot at one joint, so they are
   shown whole (1:1, no crop) with the reading of the frame carried by the
   caption underneath. Only used where a genuine same-location pair exists. */
.ba-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:34px}
.ba-item{display:flex;flex-direction:column;gap:16px}
.ba-media{
  position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;
  border:1px solid var(--stone);border-radius:var(--r-lg);
  background:var(--stone-tint);box-shadow:var(--shadow-soft);
}
.ba-media img{width:100%;height:100%;object-fit:cover;display:block}
.ba-tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--forest);background:var(--stone-tint);
  border:1px solid var(--stone);border-radius:999px;padding:5px 12px;
}
.ba-item h3{font-size:19px}
.ba-item p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- Service-area regions ----------
   The full approved coverage list, set as compact region blocks with the
   municipalities running inline as text — dense enough to show real reach
   without turning the homepage into the bulleted grid used on /service-areas. */
.area-regions{
  display:grid;grid-template-columns:1fr;gap:24px 34px;margin-top:32px;
  padding-top:32px;border-top:1px solid rgba(248,244,234,.16);
}
.area-region h3{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lime);margin-bottom:7px;
}
.on-dark .area-region p{font-size:14px;line-height:1.6;color:rgba(248,244,234,.72);margin:0}
.area-note{margin-top:32px;padding-top:28px;border-top:1px solid rgba(248,244,234,.16)}

/* ---------- Quote form ----------
   A single unified card split into a dark info panel (contact + coverage)
   and a white form panel, instead of a heading floating above a separate
   form card — keeps the section contained rather than another full-bleed
   dark band stacked under "Why HomeTouch". */
.quote-block{display:grid;grid-template-columns:1fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-form);margin-top:8px}
.quote-info{background:var(--forest-deep);padding:40px 28px}
.quote-info .eyebrow{margin-bottom:14px}
.quote-info h2{margin-bottom:14px}
.quote-info .lead{margin-bottom:0;max-width:none}
.quote-contact{display:flex;flex-direction:column;gap:14px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(248,244,234,.16)}
.quote-contact-item{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:500;font-size:15px}
.quote-contact-item svg{stroke:var(--lime);flex:none}
.quote-form-panel{background:var(--white);padding:32px 24px}

.form-card{
  background:var(--white);border-radius:var(--r-lg);border-top:2px solid var(--gold);
  padding:28px 22px;box-shadow:var(--shadow-form);max-width:640px;margin:30px auto 0;
}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--stone);border-radius:var(--r-sm);padding:13px 14px;min-height:48px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(44,95,69,.14);
}
.upload{
  border:1.5px dashed var(--stone);border-radius:var(--r-sm);background:var(--stone-tint);
  padding:22px 16px;text-align:center;cursor:pointer;display:block;
  transition:border-color .15s ease,background-color .15s ease;
}
.upload:hover{border-color:var(--forest);background:#EFEADE}
.upload svg{stroke:var(--forest);margin:0 auto 8px}
.upload-title{font-weight:600;font-size:15px;display:block}
.upload-note{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.form-foot{font-size:13px;color:var(--muted);text-align:center;margin:14px 0 0}
.form-foot a{font-weight:600}
/* Quote form validation and status (handled in site.js) */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.field.has-error .upload{border-color:#B3261E}
.field-error{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:#B3261E;font-weight:500}
.form-status{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-md);background:#FBEDEB;border:1px solid #F0C9C4;color:#7A1F17;font-size:14.5px;line-height:1.5}
.form-status a{color:#7A1F17;font-weight:600;text-decoration:underline}
.quote-form-panel button[aria-busy="true"]{opacity:.75;cursor:progress}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest-deep);color:rgba(248,244,234,.82);padding:56px 0 26px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px}
.site-footer h4{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lime);margin:0 0 14px;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:rgba(248,244,234,.82)}
.site-footer a:hover{color:var(--lime);text-decoration:none}
.footer-legal{
  border-top:1px solid rgba(248,244,234,.16);margin-top:36px;padding-top:20px;font-size:13px;
  color:rgba(248,244,234,.6);display:flex;flex-wrap:wrap;gap:8px 18px;
}

/* ---------- Mobile sticky bar ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;background:var(--white);
  border-top:1px solid var(--stone);box-shadow:0 -4px 16px rgba(20,46,36,.10);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(100%);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
/* .in is added once by JS shortly after mount — a single entrance, not replayed
   by the existing focus/blur display:none toggle (that logic is untouched). */
.sticky-bar.in{opacity:1;transform:translateY(0);pointer-events:auto}
.sticky-bar .btn{flex:1;padding:14px 10px;font-size:14px;min-height:46px}

/* ---------- Responsive ---------- */
@media (min-width:768px){
  h1{font-size:60px;line-height:1.05}
  h2{font-size:42px;margin-bottom:18px}
  h3{font-size:23px}
  body{font-size:18px;padding-bottom:0}
  section{padding:104px 0}
  .hero-actions{flex-direction:row;align-items:center;gap:28px}
  .hero-center .hero-actions{justify-content:center}
  .hero-overlay{min-height:620px}
  .hero-overlay .hero-media img{object-position:95% center}
  .trust-values{padding:34px 0 38px}
  .tv-facts{display:flex;justify-content:center;gap:0}
  .tv-facts li{padding:0 24px;border-right:1px solid rgba(248,244,234,.16)}
  .tv-facts li:last-child{border-right:0}
  .tv-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0;margin-top:30px;padding-top:30px}
  .tv-values li{padding:0 28px}
  .tv-values li:nth-child(even){border-left:1px solid rgba(248,244,234,.14)}
  .card-grid{grid-template-columns:repeat(2,1fr);column-gap:32px}
  .row-list{flex-direction:row;flex-wrap:wrap;border-top:0}
  .row{width:calc(50% - 8px);border-top:1px solid var(--stone)}
  .checks{grid-template-columns:repeat(2,1fr) ;column-gap:36px}
  .steps{grid-template-columns:repeat(3,1fr);gap:36px}
  .steps.steps-4{grid-template-columns:repeat(4,1fr)}
  .steps.steps-5{grid-template-columns:repeat(5,1fr);gap:24px}
  .steps.steps-6{grid-template-columns:repeat(3,1fr)}
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .split{grid-template-columns:repeat(2,1fr)}
  .split-3{grid-template-columns:repeat(3,1fr)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .feature-grid-4{grid-template-columns:repeat(2,1fr)}
  .feature-panels{grid-template-columns:repeat(2,1fr);gap:24px}
  .process-split{grid-template-columns:1fr 1fr;gap:48px}
  .why-grid{grid-template-columns:1fr 1fr;gap:56px}
  .ba-grid{grid-template-columns:repeat(2,1fr);gap:44px}
  .area-regions{grid-template-columns:repeat(2,1fr)}
  .quote-block{grid-template-columns:.85fr 1.15fr}
  .quote-info{padding:52px 44px}
  .quote-form-panel{padding:44px 40px}
  .related{flex-direction:row;border-top:0}
  .rel{width:calc(33.333% - 11px);border-top:1px solid var(--stone)}
  .boundary{grid-template-columns:repeat(2,1fr)}
  .callout{padding:34px 34px}
  .form-card{padding:36px 34px}
  .footer-grid{grid-template-columns:1.2fr 1fr 1.2fr}
  .sticky-bar{display:none}
}
@media (min-width:1024px){
  .header-inner{height:76px}
  .logo img{height:54px}
  .wrap{padding-left:64px;padding-right:64px}
  .trust-values{padding:36px 0 40px}
  .tv-facts li{padding:0 34px}
  .tv-values{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .tv-values li{padding:2px 26px;border-left:1px solid rgba(248,244,234,.14)}
  .tv-values li:first-child{border-left:0}
  h1{font-size:72px}
  h2{font-size:46px}
  section{padding:132px 0}
  .hero-grid:has(.hero-media){grid-template-columns:minmax(0,46%) 1fr;align-items:stretch;min-height:620px}
  .hero-grid.wide:has(.hero-media){grid-template-columns:minmax(0,56%) 1fr}
  .hero-overlay{min-height:720px}
  .hero-overlay .hero-media img{object-position:92% center}
  /* Desktop: the text column sits on the left, so the scrim is weighted
     left-to-right — dark enough to carry the headline, clearing away to
     let the van and the low sun stay vivid on the right. */
  .hero-scrim{background:linear-gradient(90deg,rgba(20,46,36,.86) 0%,rgba(20,46,36,.68) 34%,rgba(20,46,36,.34) 62%,rgba(20,46,36,.14) 100%)}
  .hero-copy{padding:0 56px 0 64px;display:flex;flex-direction:column;justify-content:center}
  .hero-media{position:relative}
  .hero-media .frame{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .card-grid{grid-template-columns:repeat(4,1fr)}
  /* Home services tiles carry the photography, so this section alone runs a
     wider container and a slightly tighter column gap — the only levers that
     enlarge a fixed four-column grid without altering the spacing system. */
  .home-services .wrap{max-width:1400px}
  .home-services .card-grid{column-gap:28px}
  .area-regions{grid-template-columns:repeat(4,1fr);gap:28px 34px}
  .feature-grid-4{grid-template-columns:repeat(4,1fr)}
  .row-list{flex-wrap:nowrap}
  .row{width:auto;flex:1;border-top:1px solid var(--stone)}
  .photo-grid{grid-template-columns:repeat(4,1fr)}
  /* Homepage projects strip runs six photos — three-up keeps both rows full
     instead of leaving two orphans in a four-column grid. */
  .featured-projects .photo-grid{grid-template-columns:repeat(3,1fr)}
  .boundary{grid-template-columns:1fr}
  .related{flex-wrap:nowrap}
  .rel{width:auto;flex:1}
}

/* Desktop header: logo, nine nav items, Instagram/Facebook, quote button and
   the phone block on one row. Each breakpoint below was set from measured
   widths (natural row width + at least 16px to spare): the full row needs
   1516px at its tightest (12px nav), so the desktop nav starts at 1536 and
   the drawer is the navigation below that, rather than letting the row
   collide or wrap. The header runs wider than the content container. */
@media (min-width:1536px){
  .site-header .wrap{max-width:none;padding-left:12px;padding-right:12px}
  .header-inner{height:auto;min-height:74px;gap:12px;padding-top:10px;padding-bottom:10px}
  .logo img{height:54px}
  .site-header .logo{padding:8px 12px}
  .nav{display:flex;gap:9px;margin-left:10px}
  .header-contact{display:inline-flex;padding-left:14px;gap:8px}
  .header-phone{font-size:15px}
  .header-hours{font-size:11px}
  .header-cta{display:inline-flex;font-size:13px;padding:11px 17px;min-height:0;line-height:1.2}
  .header-social{display:flex}
  .phone-icon-only,.menu-toggle{display:none}
  section[id]{scroll-margin-top:120px}
}

/* The row steps up toward the approved reference as width allows. Measured
   row widths with the social icons: 13px nav needs 1592, the 1680 step 1659,
   14px 1766, 15px 1888 — each breakpoint sits at least 16px above its need. */
@media (min-width:1610px){
  .nav{gap:10px;margin-left:14px}
  .nav > a,.nav-trigger{font-size:13px}
}
@media (min-width:1680px){
  .site-header .wrap{padding-left:18px;padding-right:18px}
  .header-inner{gap:18px}
  .logo img{height:58px}
  .nav{gap:13px;margin-left:16px}
  .nav > a,.nav-trigger{font-size:13px}
  .header-cta{font-size:13.5px;padding:12px 19px}
  .header-phone{font-size:16px}
}
@media (min-width:1790px){
  .header-inner{gap:20px}
  .logo img{height:60px}
  .nav{gap:16px}
  .nav > a,.nav-trigger{font-size:14px}
  .header-cta{font-size:14px;padding:13px 21px}
  .header-contact{padding-left:16px;gap:10px}
}
@media (min-width:1904px){
  .site-header .wrap{padding-left:18px;padding-right:18px}
  .header-inner{gap:22px}
  .logo img{height:62px}
  .site-header .logo{padding:10px 16px}
  .nav{gap:20px}
  .nav > a,.nav-trigger{font-size:15px}
  .header-cta{padding:13px 22px}
  .header-phone{font-size:17px}
  .header-hours{font-size:12px}
  .header-contact{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}