/* ==========================================================================
   CAPITAL SHINE LIGHTING — design system
   One stylesheet for the whole site. The structure is the one that works on
   the Vanguard Filtration site: white page, generous air, one tinted band
   for rhythm, icon cards, numbered steps, an FAQ accordion, a dark footer.
   The palette is Capital Shine's own — the deep green of the Capitol in the
   logo, with the warm gold of the bulbs as the accent.

   Two vocabularies live here on purpose:
     * the system classes the homepage uses (.band, .card, .steps-grid …)
     * the older class names the interior pages were built with
       (.page-head, .section-label, .alt, .cta-band …), restyled onto the
       same tokens so every page converts without its markup being rewritten.
   The legacy CSS variables (--black, --gray-700, --maroon …) are kept and
   remapped, because interior pages reference them in inline styles.
   ========================================================================== */

:root{
  --paper:#ffffff;
  --mist:#f4f8f5;
  --ink:#10231a;
  --ink-soft:#566e61;

  /* brand — from the logo: Capitol green, bulb gold */
  --forest:#0a3020;        /* darkest: footer, CTA bands */
  --green:#14532d;         /* primary: buttons, eyebrows, links */
  --green-mid:#1d6b3c;
  --gold:#b8860f;          /* accent text that still has to be readable */
  --gold-bright:#e9b23a;   /* decorative accent: rules, dots, glows */


  --on-dark:#e7f0ea;
  --on-dark-soft:#9cb3a5;
  --line:rgba(16,35,26,.12);
  --line-strong:rgba(16,35,26,.22);
  --card-bg:#ffffff;
  --field:#ffffff;
  --shadow:0 1px 2px rgba(16,35,26,.04), 0 10px 30px rgba(16,35,26,.06);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1120px;
  --nav-h:64px;

  /* Legacy names, remapped. Interior pages use these inside inline styles,
     so they have to keep resolving — they just point at the new palette now. */
  --black:var(--ink);
  --white:#ffffff;
  --gray-50:var(--mist);
  --gray-100:#e3ebe6;
  --gray-500:var(--ink-soft);
  --gray-700:var(--ink-soft);
  --line-light:var(--line);
  --line-dark:rgba(255,255,255,.15);
  --maroon:var(--green);

  /* The site commits to the white look on every device and deliberately does
     not follow the visitor's dark mode — the same reason the yard signs and
     the A-frame are printed one way. */
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--green-mid);outline-offset:2px;border-radius:3px}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.band{padding-block:88px}
@media(max-width:780px){.band{padding-block:58px}}
.band-mist,.alt{background:var(--mist)}
.band-dark{background:var(--forest);color:var(--on-dark-soft)}
.band-dark h2,.band-dark h3{color:#fff}

/* interior pages wrap their content in bare <section> elements */
section{padding:84px 0}
@media(max-width:780px){section{padding:56px 0}}
section.tight{padding:56px 0}
section.band{padding:88px 0}
@media(max-width:780px){section.band{padding:58px 0}}

.skip,.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--paper);color:var(--ink);padding:12px 20px;font-weight:600}
.skip:focus,.skip-link:focus{left:8px;top:8px}

/* ---------- TYPE ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.1;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem);margin-bottom:16px}
h3{font-size:1.13rem;line-height:1.28;margin-bottom:8px;letter-spacing:-.012em}
p{max-width:66ch}
.lede{font-size:clamp(1.02rem,1.45vw,1.18rem);color:var(--ink-soft);max-width:60ch}
.eyebrow,.section-label{
  font-family:var(--display);
  font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--green);margin-bottom:14px;
}
/* long-form interior copy */
.prose p{margin-bottom:17px;color:var(--ink-soft)}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:9px;max-width:66ch;color:var(--ink-soft)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.prose h2,.prose h3{color:var(--ink)}
.prose h3{margin-top:26px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:7px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:50px;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-solid-light,.btn-solid-dark{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover,.btn-solid-light:hover,.btn-solid-dark:hover{background:var(--forest);border-color:var(--forest)}
.btn-ghost,.btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-row,.head-cta,.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-row{justify-content:center}
/* ghost buttons sitting on a dark band */
.band-dark .btn-ghost,.cta-band .btn-ghost,.cta-band .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.band-dark .btn-ghost:hover,.cta-band .btn-ghost:hover,.cta-band .btn-outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.cta-band .btn-primary,.cta-band .btn-solid-light{background:#fff;color:var(--forest);border-color:#fff}
.cta-band .btn-primary:hover,.cta-band .btn-solid-light:hover{background:var(--on-dark);border-color:var(--on-dark)}

/* ---------- NAV ---------- */
/* The phone bar is the topmost thing on the page, so the notch strip takes
   its colour rather than the header's. */
body::before{
  content:"";position:fixed;inset:0 0 auto;
  height:env(safe-area-inset-top, 0px);
  background:var(--green);z-index:60;
}

/* ---------- PHONE BAR ----------
   Above the header on every page. Most people arrive on a phone, so the
   number is a tap target before they have scrolled anything. */
.topbar{background:var(--green);color:rgba(255,255,255,.85);font-size:.84rem}
.topbar .wrap{
  display:flex;align-items:center;justify-content:center;gap:4px 14px;
  padding:1px 0;flex-wrap:wrap;text-align:center;
}
.topbar a{
  color:#fff;font-family:var(--display);font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  /* 25px of text is not a thumb target. Padding takes the hit area past 44px
     without the bar itself getting taller, since the wrap padding comes down
     to match. */
  padding:7px 10px;border-radius:6px;
}
.topbar a:hover{text-decoration:underline}
.topbar svg{width:15px;height:15px;stroke:var(--gold-bright);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .topbar .wrap{gap:0 12px;padding:0}
  .topbar a{padding:11px 10px}
  .topbar .meta{font-size:.76rem;width:100%;order:2}
  .topbar a{order:1;font-size:.95rem}
}
header{
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
header nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.brand,.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  flex-shrink:0;font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;white-space:nowrap;
}
.brand img,.logo-mark{width:34px;height:auto;border-radius:0}
.brand b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.015em;line-height:1.05;white-space:nowrap}
.brand span{display:block;font-family:var(--body);font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.navlinks,.nav-links{display:flex;align-items:center;gap:22px;list-style:none}
.navlinks a,.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:.88rem;font-weight:500;white-space:nowrap}
.navlinks a:hover,.nav-links a:hover{color:var(--green)}
.navlinks .btn,.nav-links .btn{padding:9px 18px;min-height:0;font-size:.86rem;color:#fff}
.burger,.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;flex-direction:column;justify-content:space-between;padding:14px 6px;cursor:pointer}
.burger span,.menu-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:1040px){
  .burger,.menu-toggle{display:flex}
  .navlinks,.nav-links{
    position:fixed;inset:calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    background:var(--paper);flex-direction:column;align-items:stretch;gap:0;
    padding:4px max(16px, env(safe-area-inset-left, 0px)) 22px;display:none;
    border-bottom:1px solid var(--line);max-height:80vh;overflow-y:auto;
  }
  .navlinks.open,.nav-links.open{display:flex}
  .navlinks li,.nav-links li{border-bottom:1px solid var(--line);width:100%}
  .navlinks li:last-child,.nav-links li:last-child{border:0;padding-top:16px}
  .navlinks a,.nav-links a{display:block;padding:15px 0;font-size:1rem}
  .navlinks .btn,.nav-links .btn{display:flex;padding:14px;font-size:.95rem;min-height:50px}
}

/* ---------- BREADCRUMBS ---------- */
.crumbs{font-size:.78rem;color:var(--ink-soft);padding:16px 0;border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--green);text-decoration:underline}
.crumbs li[aria-current]{color:var(--ink)}

/* ---------- HERO (homepage) & PAGE HEAD (interior) ---------- */
.hero,.page-head{
  background:var(--paper);
  position:relative;overflow:hidden;
}
.hero{padding-block:72px 76px;text-align:center}
.page-head{padding-block:76px 64px}
@media(max-width:780px){.hero{padding-block:44px 52px}.page-head{padding-block:52px 44px}}
.hero::after,.page-head::after{
  content:"";position:absolute;pointer-events:none;
  background:radial-gradient(circle, rgba(233,178,58,.16) 0%, rgba(233,178,58,0) 64%);
}
.hero::after{left:50%;top:-46%;translate:-50% 0;width:min(900px,120vw);aspect-ratio:1;border-radius:50%}
.page-head::after{right:-12%;top:-62%;width:min(760px,100vw);aspect-ratio:1;border-radius:50%}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.page-head .wrap{position:relative;z-index:1}
.hero-mark{width:clamp(104px,17vw,160px);margin-bottom:22px}
.hero h1{margin-bottom:20px;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--green)}
.page-head h1{max-width:20ch;margin-bottom:18px}
.page-head .lede{max-width:62ch}
.hero .lede{margin-inline:auto}
.hero .btn-row{justify-content:center}
.hero-note{
  margin-top:26px;font-size:.88rem;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
}
.pulse{width:8px;height:8px;border-radius:50%;background:#1aa35c;flex-shrink:0;box-shadow:0 0 0 0 rgba(26,163,92,.5);animation:p 2.4s infinite}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(26,163,92,.45)}70%{box-shadow:0 0 0 9px rgba(26,163,92,0)}100%{box-shadow:0 0 0 0 rgba(26,163,92,0)}}

/* ---------- HERO PHOTO ----------
   Real work, above the fold. The logo alone told a visitor nothing about
   whether the installs are any good. */
.hero-shot{
  position:relative;margin-top:44px;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 40px rgba(16,35,26,.16);line-height:0;
}
@media(max-width:780px){.hero-shot{margin-top:30px;border-radius:12px}}
.hero-shot img{width:100%;height:auto;display:block}
.hero-shot .cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  font-family:var(--display);font-size:.88rem;font-weight:600;color:#fff;
  background:linear-gradient(to top, rgba(10,48,32,.85), rgba(10,48,32,0));
  text-align:left;
}
@media(max-width:560px){.hero-shot .cap{font-size:.8rem;padding:26px 14px 12px}}

/* ---------- TRUST STRIP ---------- */
.strip{background:var(--green);color:#fff}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
@media(max-width:860px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}
.strip div{padding:22px 14px;text-align:center}
.strip b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.strip small{display:block;font-size:.78rem;color:rgba(255,255,255,.82);margin-top:2px}

/* ---------- GRIDS & CARDS ---------- */
.grid{display:grid;gap:22px;margin-top:40px}
.g2,.grid-2{grid-template-columns:repeat(2,1fr)}
.g3,.grid-3{grid-template-columns:repeat(3,1fr)}
.g4,.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.grid > *{min-width:0}

.card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:12px;padding:28px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.card .ico{
  width:42px;height:42px;border-radius:9px;
  background:color-mix(in srgb, var(--gold-bright) 20%, transparent);
  display:grid;place-items:center;margin-bottom:16px;flex-shrink:0;
}
.card .ico svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{font-size:.945rem;color:var(--ink-soft);margin-bottom:0}
.card ul{list-style:none;margin-top:16px}
.card ul li{position:relative;padding-left:20px;font-size:.9rem;color:var(--ink-soft);margin-bottom:7px}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold-bright)}
.card a.more,a.more{margin-top:auto;padding-top:16px;font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--green);text-decoration:none;display:inline-block}
.card a.more:hover,a.more:hover{text-decoration:underline}

/* plain tiles — no card chrome, just a gold rule */
.tile{border-left:3px solid var(--gold-bright);padding:4px 0 4px 20px}
.tile h3{font-size:1.04rem;margin-bottom:7px}
.tile p{font-size:.93rem;color:var(--ink-soft);margin-bottom:0}

/* bulleted feature lists on interior pages */
.checks{list-style:none;margin:16px 0 0}
.checks li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.92rem;color:var(--ink-soft)}
.checks li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--gold-bright)}

/* ---------- STEPS ----------
   .steps-grid is the four-across row on the homepage.
   .steps is the vertical numbered list the interior pages already use. */
.steps-grid{counter-reset:s;list-style:none;margin-top:42px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:1040px){.steps-grid{grid-template-columns:repeat(3,1fr);gap:26px}}
@media(max-width:800px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps-grid{grid-template-columns:1fr}}
.steps-grid li{counter-increment:s;min-width:0;border-top:2px solid var(--gold-bright);padding-top:18px}
.steps-grid li::before{
  content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--display);font-size:.8rem;font-weight:700;
  letter-spacing:.09em;color:var(--gold);margin-bottom:9px;
}
.steps-grid strong{display:block;font-family:var(--display);font-size:1.08rem;font-weight:700;margin-bottom:6px;letter-spacing:-.012em}
.steps-grid p{font-size:.92rem;color:var(--ink-soft);margin:0}

.steps{counter-reset:s;list-style:none;margin-top:26px}
.steps li{counter-increment:s;position:relative;padding-left:48px;margin-bottom:24px;max-width:64ch}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--display);font-size:.82rem;font-weight:700;
  color:var(--gold);letter-spacing:.08em;
}
.steps strong{display:block;font-family:var(--display);font-size:1.06rem;margin-bottom:5px;letter-spacing:-.012em}
.steps li{color:var(--ink-soft)}

/* ---------- GALLERY ---------- */
/* Masonry columns rather than a grid: the job photos are a mix of landscape
   and portrait, and a fixed 16:9 would crop the top off a 30 ft tree. */
.shots{columns:3;column-gap:18px;margin-top:40px}
@media(max-width:900px){.shots{columns:2}}
@media(max-width:600px){.shots{columns:1}}
.shot{
  position:relative;border-radius:12px;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--mist);
  break-inside:avoid;margin-bottom:18px;display:block;width:100%;
}
.shot img{width:100%;height:auto;display:block;transition:transform .5s ease}
.shot:hover img{transform:scale(1.03)}
.shot .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-family:var(--display);font-size:.86rem;font-weight:600;color:#fff;
  background:linear-gradient(to top, rgba(10,48,32,.82), rgba(10,48,32,0));
}
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(10,48,32,.94);padding:24px;
}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px}
.lightbox-close{
  position:absolute;top:16px;right:18px;background:none;border:0;color:#fff;
  font-size:1.9rem;line-height:1;cursor:pointer;padding:8px;
}

/* ---------- TESTIMONIALS ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:900px){.testis{grid-template-columns:1fr}}
.testi{
  background:var(--card-bg);border:1px solid var(--line);border-top:3px solid var(--gold-bright);
  border-radius:12px;padding:26px;box-shadow:var(--shadow);
}
.testi p{font-size:.97rem;color:var(--ink);margin-bottom:16px}
.testi .who{font-family:var(--display);font-weight:700;font-size:.92rem}
.testi .where{font-size:.84rem;color:var(--ink-soft)}

/* ---------- SERVICE AREA ---------- */
.area-line{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--green);
  margin-top:6px;
}
.area-list,.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;list-style:none}
.related{margin-top:8px}
.area-list a,.related a{
  display:inline-block;font-family:var(--display);font-size:.84rem;font-weight:600;
  padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;
  text-decoration:none;color:var(--green);white-space:nowrap;
}
.area-list a:hover,.related a:hover{border-color:var(--green);background:color-mix(in srgb, var(--gold-bright) 12%, transparent)}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.012em;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:20px;align-items:flex-start;padding:20px 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.45rem;line-height:1;color:var(--gold);flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:20px;font-size:.955rem;color:var(--ink-soft);margin-top:-4px}
.faq details p a{color:var(--green);text-decoration:underline;text-underline-offset:2px}

/* ---------- CTA BAND ---------- */
/* One shade lighter than the footer it usually sits above, so the two dark
   blocks read as two bands instead of one. */
.cta-band{background:var(--green);color:var(--on-dark);text-align:center}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:var(--on-dark-soft);margin:0 auto 26px}

/* ---------- CONTACT ---------- */
.contact-grid,.form-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start;margin-top:42px}
@media(max-width:900px){.contact-grid,.form-wrap{grid-template-columns:1fr;gap:34px}}
.contact-grid > *,.form-wrap > *{min-width:0}
.facts,.contact-facts{list-style:none}
.facts li,.contact-facts li{margin-bottom:24px}
.facts .k,.contact-facts .k{font-family:var(--display);font-size:.71rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin-bottom:5px}
.facts .v,.contact-facts .v{font-size:1.1rem;font-weight:600;line-height:1.35;word-break:break-word;color:var(--ink)}
.facts .v a,.contact-facts .v a{text-decoration:none;color:inherit;border-bottom:1px solid var(--line-strong);display:inline-block;padding:5px 0}
.facts .v a:hover,.contact-facts .v a:hover{color:var(--green);border-color:var(--green)}
.facts .v small,.contact-facts .v small{display:block;font-size:.84rem;font-weight:400;color:var(--ink-soft);margin-top:4px}

form{display:flex;flex-direction:column;gap:17px;background:var(--card-bg);border:1px solid var(--line);border-radius:13px;padding:28px;box-shadow:var(--shadow)}
@media(max-width:560px){form{padding:20px}}
.frow,.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media(max-width:560px){.frow,.form-row{grid-template-columns:1fr}}
.frow > *,.form-row > *{min-width:0}
label{display:block;font-family:var(--display);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:7px}
input,select,textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:8px;
  font-family:var(--body);font-size:1rem;min-height:50px;
  background:var(--field);color:var(--ink);
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--ink-soft) 62%, transparent)}
textarea{min-height:108px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-mid);outline-offset:1px;border-color:transparent}
.formnote{font-size:.82rem;color:var(--ink-soft);margin:0;max-width:none}
.formstatus,.form-status{font-size:.9rem;font-weight:600;color:var(--green);min-height:1.2em}
.form-status.ok{color:#1a7f37}
.form-status.err{color:#b3261e}

/* ---------- STEPPED FORMS & OPTION BUTTONS ----------
   Shared by the instant-quote wizard and the contact form. A long form asks
   everything at once; these ask one thing per screen, which is easier to
   start and easier to finish. */
.pdots,.fsteps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;list-style:none}
.fsteps{margin-bottom:26px}
.pdots li,.fsteps li{
  display:flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);
}
.pdots i,.fsteps i{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--mist);border:1px solid var(--line-strong);
  font-style:normal;font-size:.75rem;color:var(--ink-soft);
}
.pdots li[data-on="1"],.fsteps li[data-on="1"]{color:var(--green)}
.pdots li[data-on="1"] i,.fsteps li[data-on="1"] i{background:var(--green);border-color:var(--green);color:#fff}

.opts{display:grid;gap:14px;margin-top:20px}
@media(min-width:720px){ .opts.two{grid-template-columns:repeat(2,1fr)} .opts.three{grid-template-columns:repeat(3,1fr)} }
.opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:var(--card-bg);border:1.5px solid var(--line-strong);border-radius:12px;
  padding:20px 22px;cursor:pointer;font-family:var(--body);width:100%;
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.opt:hover{border-color:var(--green);box-shadow:var(--shadow)}
.opt:active{transform:translateY(1px)}
.opt.picked{border-color:var(--green);background:color-mix(in srgb, var(--gold-bright) 10%, transparent)}
.opt b{font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.opt span{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.opt .tag{
  display:inline-block;margin-top:4px;font-family:var(--display);font-weight:700;
  font-size:1rem;color:var(--green);letter-spacing:-.01em;
}

.backrow{margin-top:24px}
.backbtn{
  background:none;border:0;cursor:pointer;font-family:var(--display);
  font-weight:600;font-size:.88rem;color:var(--ink-soft);padding:6px 0;
}
.backbtn:hover{color:var(--green);text-decoration:underline}

.fq{font-family:var(--display);font-weight:700;font-size:1.13rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:2px}
.fstep[hidden]{display:none !important}
.fnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}

/* ---------- MAP ---------- */
.mapwrap{
  margin-top:30px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow);background:var(--mist);
  line-height:0;
}
.mapwrap iframe{width:100%;height:380px;border:0;display:block}
@media(max-width:640px){.mapwrap iframe{height:300px}}
.mapnote{font-size:.86rem;color:var(--ink-soft);margin-top:12px}

/* ---------- ESTIMATE BREAKDOWN ----------
   When a result adds two things together, show both parts under the total so
   the number is checkable rather than asserted. */
.rsplit{list-style:none;margin:0 0 14px;padding:0}
.rsplit li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.rsplit li:last-child{border-bottom:0}
.rsplit span{color:var(--on-dark-soft);font-size:.92rem}
.rsplit b{font-family:var(--display);font-weight:700;color:#fff;white-space:nowrap}

/* ---------- FOOTER ---------- */
footer{background:var(--forest);color:var(--on-dark-soft);font-size:.9rem}
footer .wrap{padding-block:56px 32px}
.fgrid,.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
@media(max-width:980px){.fgrid,.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:30px}}
@media(max-width:700px){.fgrid,.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid,.footer-grid{grid-template-columns:1fr}}
.fgrid > *,.footer-grid > *{min-width:0}
footer h4{font-family:var(--display);color:var(--on-dark);font-size:.73rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:15px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
@media(max-width:780px){footer li{margin-bottom:4px}footer li a{display:inline-block;padding:6px 0}}
footer a{color:var(--on-dark-soft);text-decoration:none}
footer a:hover{color:var(--gold-bright)}
.fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
/* The logo is a dark green circle, so on the dark footer it needs a light
   disc behind it or it simply disappears. */
.fbrand picture{
  display:grid;place-items:center;flex-shrink:0;
  width:52px;height:52px;border-radius:50%;background:var(--on-dark);
}
.fbrand img{width:46px}
.fbrand b{font-family:var(--display);color:var(--on-dark);font-size:1.1rem;letter-spacing:-.015em;line-height:1.1}
.footer-brand{font-family:var(--display);color:var(--on-dark);font-weight:700;font-size:1.05rem;margin-bottom:10px}
.fbot,.footer-bottom{
  border-top:1px solid var(--line-dark);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;
}

/* ---------- MOBILE CTA BAR ---------- */
.mbar,.mobile-cta-bar{display:none}
@media(max-width:780px){
  .mbar,.mobile-cta-bar{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    border-top:1px solid var(--line);
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mbar a,.mobile-cta-bar a{
    padding:16px 10px;text-align:center;font-family:var(--display);
    font-weight:700;font-size:.95rem;text-decoration:none;min-height:52px;
  }
  .mbar .c,.mobile-cta-bar .call{background:var(--green);color:#fff}
  .mbar .q,.mobile-cta-bar .quote{background:var(--paper);color:var(--green)}
  body{padding-bottom:58px}
}

/* ---------- RESPONSIVE TABLES ----------
   The season calendar and service-area tables sit in an overflow-x wrapper.
   On a phone that means sideways scrolling, so let them compress instead:
   drop the nowrap on the first column and tighten the padding. */
table{font-size:.95rem}
table th{font-family:var(--display)}
@media (max-width: 620px){
  table td, table th{ padding: 10px 11px !important; white-space: normal !important; font-size: 0.9rem; }
  table caption{ padding: 12px 11px 6px !important; }
}

/* ---------- Photo beside a note, alternating down a page ----------
   Used to break long prose pages up with real work instead of parking
   every photo in one gallery at the bottom. The figure keeps its own
   aspect ratio; width/height are set per image in the markup so the
   page does not shift as each one loads. */
.photo-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,40px);align-items:center;
}
.photo-split figure{margin:0}
.photo-split img{
  width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.photo-split .ps-text p{margin-bottom:0}
.photo-split .ps-text .section-label{margin-bottom:8px}
.photo-split.flip .ps-media{order:2}
@media(max-width:780px){
  .photo-split{grid-template-columns:1fr;gap:18px}
  .photo-split.flip .ps-media{order:0}
}