/* ===========================================================
   Pine Window Cleaning — shared stylesheet
   Used by index.html and all area (SEO) landing pages.
   =========================================================== */

/* ---------- Brand tokens ---------- */
:root{
  --pine:#01736b;
  --pine-dark:#014c47;
  --teal:#01736b;
  --teal-bright:#16b3a6;
  --cream:#f5f2ec;
  --cream-2:#efe9df;
  --ink:#1c2620;
  --muted:#5d6b63;
  --white:#ffffff;
  --radius:24px;
  --radius-sm:14px;
  --shadow:0 18px 50px -20px rgba(18,63,40,.35);
  --shadow-sm:0 8px 24px -12px rgba(18,63,40,.30);
  --maxw:1180px;
  --font:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-y:scroll}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.ico{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-fill{fill:currentColor;stroke:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;font-family:inherit}
.btn-primary{background:var(--pine);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--pine-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--pine);color:var(--pine)}
.btn-ghost:hover{background:var(--pine);color:var(--white);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--pine)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ---------- Nav ---------- */
header.nav{position:fixed;top:14px;left:0;right:0;z-index:50;background:transparent;display:flex;justify-content:center}
.nav-inner{display:inline-flex;align-items:center;gap:2.4rem;width:auto;max-width:calc(100% - 32px);margin:0;height:66px;background:rgba(1,76,71,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:var(--shadow-sm);padding:0 14px 0 28px;transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
header.nav.scrolled .nav-inner{background:rgba(1,76,71,.98);box-shadow:var(--shadow);border-color:rgba(255,255,255,.10)}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem;font-weight:500}
.nav-links a{position:relative;color:#fff;font-size:.97rem}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--teal-bright);transition:width .22s ease}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:1.1rem}
.nav-phone{font-weight:600;color:#fff;font-size:.97rem;display:flex;align-items:center;gap:.4rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2.5px;background:#fff;margin:5px 0;border-radius:2px}
/* Services dropdown */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;font-family:inherit;font-weight:500;font-size:.97rem;color:#fff;padding:0;position:relative}
.nav-drop-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.nav-drop:hover .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-btn::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--teal-bright);transition:width .22s ease}
.nav-drop:hover .nav-drop-btn::after{width:100%}
.nav-drop::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:20px}
.nav-drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;background:rgba(1,76,71,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:var(--shadow);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s ease, transform .2s ease;z-index:60}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;color:#fff;font-size:.92rem;font-weight:500;padding:.62rem .85rem;border-radius:10px;transition:background .15s ease,color .15s ease}
.nav-drop-menu a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-drop-menu a::after{content:none}

/* ---------- Hero (full-bg) ---------- */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;padding:120px 0 100px;overflow:hidden;color:#fff}
/* To use a real photo: set background-image:url('images/hero.jpg') on .hero-bg */
.hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(150deg,var(--pine),var(--teal) 95%);background-size:cover;background-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0 16%,transparent 16% 30%,rgba(255,255,255,.06) 30% 38%,transparent 38%);mix-blend-mode:screen}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,32,21,.74),rgba(10,32,21,.38) 58%,rgba(10,32,21,.12))}
.hero .wrap{max-width:none;margin:0;padding-left:clamp(24px,4vw,72px);padding-right:24px}
/* centered hero variant (service/inner pages) */
.hero.hero-center .wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px}
.hero.hero-center .hero-inner{margin:0 auto;text-align:center;max-width:900px}
.hero.hero-center h1,.hero.hero-center p.lead{margin-left:auto;margin-right:auto}
.hero.hero-center .hero-actions{justify-content:center}
.hero-inner{position:relative;z-index:2;max-width:980px}
.badge{display:inline-flex;align-items:center;gap:.6rem;background:var(--white);color:var(--ink);border:1px solid rgba(0,0,0,.05);padding:.4rem .5rem .4rem .9rem;border-radius:999px;font-size:.86rem;font-weight:500;box-shadow:var(--shadow-sm)}
.badge .stars{display:inline-flex;color:#f5a623}
.badge .stars svg{width:15px;height:15px}
.badge b{font-weight:700}
.badge-g{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.08);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .18s ease}
.badge-g:hover{transform:translateY(-1px) scale(1.05)}
.badge-g svg{width:17px;height:17px}
.hero h1{font-size:clamp(3.2rem,7.5vw,6.2rem);line-height:1.0;font-weight:800;letter-spacing:-2px;margin:1.5rem 0 1.1rem;color:#fff;max-width:15ch}
.hero h1 .accent{color:#bfe8d3}
.hero p.lead{font-size:1.2rem;color:rgba(255,255,255,.88);max-width:52ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost.on-dark:hover{background:#fff;color:var(--pine)}
.hero-trust{display:flex;gap:1.6rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-trust .item{font-size:.92rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:.45rem}
.hero-trust .item b{color:#fff}
.check-ico{color:#bfe8d3;width:18px;height:18px;flex:none}
/* blend hero (dark) down into the white services section */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:3;background:linear-gradient(180deg,transparent,#ffffff);pointer-events:none}

/* ---------- Section heading ---------- */
.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:.78rem;font-weight:700;color:var(--teal);margin-bottom:.6rem}
.section-head{text-align:center;max-width:640px;margin:0 auto 56px}
.section-head h2{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-1px}
.section-head p{color:var(--muted);font-size:1.08rem;margin-top:.8rem}

/* ---------- Services (image cards, blur on hover) ---------- */
.services{padding:96px 0;background:var(--white)}
.services .eyebrow{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:2px;font-weight:800}
.services .section-head{max-width:none}
.services .section-head h2{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;white-space:nowrap}
@media(max-width:640px){.services .section-head h2{white-space:normal}}
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.svc-card:nth-child(1),.svc-card:nth-child(2){grid-column:span 6}
.svc-card:nth-child(n+3){grid-column:span 4}
.svc-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.2;cursor:pointer;box-shadow:var(--shadow-sm);isolation:isolate}
.svc-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .45s ease, transform .6s ease;z-index:1}
/* gradient placeholders — swap with background-image:url('images/...') to drop in real photos */
.svc-card[data-svc="exterior"] .svc-media{background:linear-gradient(160deg,#01736b,#0a8f85)}
.svc-card[data-svc="interior"] .svc-media{background:linear-gradient(160deg,#014c47,#01736b)}
.svc-card[data-svc="screen"]   .svc-media{background:linear-gradient(160deg,#0a8f85,#16b3a6)}
.svc-card[data-svc="track"]    .svc-media{background:linear-gradient(160deg,#01736b,#16b3a6)}
.svc-card[data-svc="solar"]    .svc-media{background:linear-gradient(160deg,#16b3a6,#01736b)}
.svc-card[data-svc="repair"]   .svc-media{background:linear-gradient(160deg,#014c47,#0a8f85)}
.svc-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(10,30,20,.75) 0%,rgba(10,30,20,.10) 55%,transparent 100%);transition:background .4s ease}
.svc-body{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem}
.svc-card h3{color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:-.3px;transition:transform .4s ease}
.svc-desc{color:rgba(255,255,255,.92);font-size:.95rem;margin-top:.5rem;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);transition:max-height .4s ease, opacity .4s ease, transform .4s ease}
.svc-arrow{position:absolute;top:1.4rem;right:1.4rem;z-index:3;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;color:#fff;transition:background .3s ease, color .3s ease, transform .3s ease}
.svc-arrow svg{width:18px;height:18px}
/* hover state: media blurs, description reveals */
.svc-card:hover .svc-media{filter:blur(7px) brightness(.78);transform:scale(1.08)}
.svc-card:hover .svc-scrim{background:linear-gradient(to top,rgba(18,63,40,.82),rgba(18,63,40,.55))}
.svc-card:hover .svc-desc{max-height:120px;opacity:1;transform:translateY(0)}
.svc-card:hover .svc-arrow{background:#fff;color:var(--pine);transform:rotate(45deg)}

/* ---------- Membership ---------- */
.membership{position:relative;overflow:hidden;padding:96px 0;background:linear-gradient(180deg,#ffffff,#eef4f1 55%,#ffffff)}
/* pure-CSS animated glow (GPU-composited transforms — no per-frame repaint) */
/* plasma rendered ONCE at tiny resolution; CSS upscales it for a free "baked" blur.
   Promoted to its own GPU layer (translateZ) so scrolling just slides a cached texture — no re-blur. */
.membership-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:1;filter:blur(5px);pointer-events:none}
/* blend the hard edges into the white section above and light section below */
.home .membership::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;z-index:1;background:linear-gradient(180deg,#ffffff 0%, rgba(255,255,255,0) 100%);pointer-events:none}
/* service/area pages: blend the teal hero above into the dark membership */
.membership::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:1;background:linear-gradient(0deg,#ffffff 0%, rgba(255,255,255,0) 100%);pointer-events:none}
.membership .wrap{position:relative;z-index:2}
.membership .section-head h2{font-size:clamp(2.4rem,5vw,3.6rem)}
.membership .section-head p{color:var(--teal);font-weight:800;font-size:clamp(1.4rem,2.8vw,2rem);margin-top:1rem}
.membership .eyebrow{font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:3px;color:var(--teal)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{background:var(--white);border-radius:var(--radius);padding:2.4rem 2rem;box-shadow:var(--shadow-sm);border:1px solid rgba(26,92,58,.08);display:flex;flex-direction:column;text-align:center;transition:transform .2s ease, box-shadow .2s ease;position:relative}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.popular{border:2px solid var(--teal);transform:scale(1.03)}
.plan.popular:hover{transform:scale(1.03) translateY(-6px)}
.plan-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:.35rem 1rem;border-radius:999px}
.plan-name{text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--teal);font-size:.95rem;margin-bottom:1rem}
.plan-price{font-size:2.8rem;font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1}
.plan-price small{display:block;font-size:.8rem;font-weight:600;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:.5rem}
.plan-feats{list-style:none;text-align:left;margin:1.8rem 0;display:grid;gap:.85rem;flex:1}
.plan-feats li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;font-weight:500}
.plan-feats li.no{color:var(--muted)}
.feat-yes{color:var(--teal);width:20px;height:20px;flex:none}
.feat-no{color:#c45b5b;width:20px;height:20px;flex:none}
.plan .btn{width:100%;justify-content:center}
.membership .foot-note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:2rem}

/* ---------- 4-step process ---------- */
.process{position:relative;padding:96px 0;background:linear-gradient(180deg,#e7efe9,#dde8e2)}
.home .process::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;background:linear-gradient(0deg,#ffffff,transparent);pointer-events:none}
.proc-card{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);min-height:440px}
/* swap with background-image:url('images/step-1.jpg') etc. to use real photos */
.proc-media{background-size:cover;background-position:center;min-height:300px;transition:opacity .4s ease}
.proc-info{background:linear-gradient(150deg,#1f4d3a,#143540);color:#fff;padding:3.2rem;display:flex;flex-direction:column;justify-content:center}
.proc-num{width:66px;height:66px;border-radius:50%;background:var(--teal-bright);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.4rem;margin-bottom:1.4rem;transition:opacity .4s ease, transform .4s ease}
.proc-title{font-size:clamp(2rem,4vw,2.9rem);font-weight:800;color:#62e3ca;letter-spacing:-1px;text-transform:uppercase;margin-bottom:1rem;transition:opacity .4s ease, transform .4s ease;transition-delay:.05s}
.proc-desc{color:rgba(255,255,255,.85);font-size:1.03rem;max-width:48ch;line-height:1.7;transition:opacity .4s ease, transform .4s ease;transition-delay:.1s}
/* crossfade state while a step changes */
.proc-card.proc-fade .proc-media{opacity:0}
.proc-card.proc-fade .proc-num,
.proc-card.proc-fade .proc-title,
.proc-card.proc-fade .proc-desc{opacity:0;transform:translateY(14px)}
.proc-steps{position:relative;display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:44px auto 0;padding:0 4px}
.proc-line{position:absolute;left:20px;right:20px;top:50%;height:3px;background:rgba(26,92,58,.18);transform:translateY(-50%);z-index:0;border-radius:3px}
.proc-line-fill{height:100%;width:0;background:linear-gradient(90deg,var(--pine),var(--teal-bright));border-radius:3px;transition:width .5s ease}
.proc-dot{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;border:2px solid rgba(26,92,58,.22);background:#fff;color:var(--muted);font-weight:700;font-size:1rem;cursor:pointer;transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease}
.proc-dot:hover{border-color:var(--teal-bright)}
.proc-dot.done{background:var(--pine);border-color:var(--pine);color:#fff}
.proc-dot.active{background:var(--teal-bright);border-color:var(--teal-bright);color:#fff;transform:scale(1.14);box-shadow:0 8px 18px rgba(10,156,143,.4)}
.proc-cta{text-align:center;margin-top:2.6rem}

/* ---------- Reviews carousel ---------- */
.reviews{position:relative;padding:96px 0;background:var(--white);overflow:hidden}
.home .reviews::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;background:linear-gradient(0deg,#eaf3ee,transparent);pointer-events:none}
.rev-top{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:48px}
.rev-rating{display:flex;align-items:center;gap:.6rem;font-weight:500;color:var(--ink)}
.rev-rating .stars{display:inline-flex;color:#f5a623}
.rev-rating .stars svg{width:20px;height:20px}
.rev-divider{width:1px;height:34px;background:rgba(26,92,58,.18)}
.rev-google{display:inline-flex;align-items:center;gap:.6rem;background:var(--pine);color:#fff;padding:.7rem 1.3rem;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .18s ease, background .18s ease}
.rev-google:hover{background:var(--pine-dark);transform:translateY(-2px)}
.rev-cta{text-align:center;margin-top:40px}
.rev-cta-text{color:var(--muted);font-size:1.02rem;margin-bottom:1rem}
.rev-google .g{background:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.rev-viewport{overflow:hidden}
.rev-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.rev-slide{flex:0 0 33.333%;padding:0 12px;box-sizing:border-box}
.rev-card{background:var(--cream);border:1px solid rgba(26,92,58,.08);border-radius:var(--radius);padding:1.8rem;height:100%}
.rev-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.rev-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.1rem;flex:none}
.rev-name{font-weight:600;font-size:.98rem}
.rev-when{font-size:.8rem;color:var(--muted)}
.rev-stars{display:inline-flex;color:#f5a623;margin-bottom:.7rem}
.rev-stars svg{width:16px;height:16px}
.rev-text{font-size:.95rem;color:var(--ink)}
.rev-nav{display:flex;justify-content:center;gap:.8rem;margin-top:36px}
.rev-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(26,92,58,.25);background:var(--white);color:var(--pine);display:grid;place-items:center;cursor:pointer;transition:background .2s ease, color .2s ease, transform .2s ease}
.rev-btn:hover{background:var(--pine);color:#fff;transform:translateY(-2px)}
.rev-btn svg{width:20px;height:20px}

/* ---------- Quote / contact (legacy on-page form) ---------- */
.quote{padding:96px 0;background:var(--cream)}
.quote-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.quote-copy h2{font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-1px;margin-bottom:1rem}
.quote-copy p{color:var(--muted);font-size:1.08rem;margin-bottom:1.6rem}
.quote-list{list-style:none;display:grid;gap:.8rem}
.quote-list li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
form.card{background:var(--white);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow);border:1px solid rgba(26,92,58,.08)}
form.card h3{font-size:1.3rem;font-weight:700;margin-bottom:.3rem}
form.card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1.5px solid rgba(26,92,58,.18);font-family:inherit;font-size:.97rem;background:var(--white);color:var(--ink);transition:border .18s ease, box-shadow .18s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,121,111,.15)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.card .btn-primary{width:100%;justify-content:center;margin-top:.4rem}
.form-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.9rem}

/* ---------- CTA band ---------- */
.cta-band{padding:80px 0;background:var(--cream)}
.cta-inner{background:linear-gradient(135deg,var(--teal),var(--pine));border-radius:32px;padding:3.4rem 3rem;color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-inner .watermark{position:absolute;right:-40px;bottom:-60px;width:280px;opacity:.10}
.cta-inner h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.5px;max-width:18ch}
.cta-inner p{opacity:.9;margin-top:.5rem;max-width:42ch}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap;z-index:2}

/* ---------- Footer ---------- */
footer{position:relative;z-index:1;background:transparent;color:rgba(255,255,255,.85);padding:72px 0 32px}
footer .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-brand img{height:34px;margin-bottom:1.1rem}
.foot-brand p{font-size:.92rem;opacity:.8;max-width:30ch}
.foot-brand .socials{display:flex;gap:.8rem;margin-top:1.2rem}
.foot-brand .socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.10);display:grid;place-items:center;transition:background .18s ease}
.foot-brand .socials a:hover{background:var(--teal)}
.foot-brand .socials svg{width:18px;height:18px}
footer h4{color:var(--white);font-size:.95rem;font-weight:600;margin-bottom:1.1rem;letter-spacing:.3px}
footer ul{list-style:none;display:grid;gap:.6rem}
footer ul a{font-size:.9rem;opacity:.8;transition:opacity .15s ease}
footer ul a:hover{opacity:1;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem;opacity:.7}

/* ===========================================================
   Area (SEO) landing page sections
   =========================================================== */

/* contact / map row that overlaps the hero */
.contact-row{max-width:var(--maxw);margin:-64px auto 0;padding:0 24px;position:relative;z-index:6}
.contact-cards{display:grid;grid-template-columns:1fr 1fr 1.2fr;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cc{padding:2.1rem 1.6rem;text-align:center;border-right:1px solid rgba(26,92,58,.10);display:flex;flex-direction:column;align-items:center;justify-content:center}
.cc:last-child{border-right:0}
.cc-ico{width:50px;height:50px;border-radius:14px;background:var(--cream);color:var(--pine);display:grid;place-items:center;margin-bottom:.8rem}
.cc-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc h4{font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.cc a,.cc .cc-link{color:var(--teal);font-weight:600;font-size:.97rem}
.cc-map{padding:0;min-height:180px;background:radial-gradient(circle at 60% 45%, rgba(1,121,111,.22), transparent 60%),linear-gradient(135deg,#e2efe9,#cfe5dd);position:relative;display:grid;place-items:center;color:var(--pine);font-weight:600;font-size:.9rem}
.cc-map .pin{position:absolute;top:42%;left:50%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--teal);transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 6px rgba(1,121,111,.18)}
.cc-map .ring{position:absolute;top:42%;left:50%;width:90px;height:90px;border-radius:50%;border:2px dashed rgba(1,121,111,.45);transform:translate(-50%,-50%)}

/* SEO prose section */
.seo{padding:96px 0;background:var(--white)}
.seo .wrap{max-width:860px}
.seo h2{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.6px;margin-bottom:1rem;color:var(--ink)}
.seo h3{font-size:1.4rem;font-weight:700;margin:2.6rem 0 .8rem;color:var(--ink)}
.seo p{color:var(--muted);font-size:1.05rem;margin-bottom:1rem;line-height:1.8}
.seo ul{list-style:none;margin:1rem 0 1.4rem;display:grid;gap:.7rem}
.seo ul li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-size:1rem}
.seo ul li svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seo ul li b{font-weight:600}
/* two-column text section with sticky service sidebar */
.seo .wrap.seo-grid{max-width:1120px;display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:start}
.seo-side{position:sticky;top:100px}
.svc-nav{list-style:none;border-top:1px solid rgba(1,115,107,.18)}
.svc-nav li{border-bottom:1px solid rgba(1,115,107,.18)}
.svc-nav .row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.78rem .15rem;font-weight:600;font-size:.9rem;color:var(--ink);transition:color .15s ease}
.svc-nav a.row:hover{color:var(--teal)}
.svc-nav li.active .row{color:var(--teal)}
.svc-nav .label{display:flex;align-items:center}
.svc-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;margin-right:.6rem}
.svc-nav .arr{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.svc-nav a.row:hover .arr{color:var(--teal)}
@media(max-width:900px){
  .seo .wrap.seo-grid{grid-template-columns:1fr;gap:36px}
  .seo-side{position:static}
}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:9999;background:linear-gradient(150deg,#014c47 0%,#01736b 45%,#0a8f85 100%);display:flex;align-items:center;justify-content:center;transition:transform .85s cubic-bezier(.76,0,.24,1)}
.preloader.done{transform:translateY(-100%)}
.pl-ring{position:relative;width:172px;height:172px}
.pl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pl-track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:5}
.pl-prog{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset .1s linear}
.pl-logo{position:absolute;inset:0;margin:auto;width:84px;height:auto;transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.preloader.complete .pl-logo{transform:scale(1.1)}
.pl-count{position:absolute;left:28px;bottom:14px;font-family:var(--font);font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:.85;color:#fff;letter-spacing:-2px}

/* "Proudly serving" — county map + accordion */
.serving{padding:96px 0;background:linear-gradient(180deg,#eaf3ee,#e3efe9)}
.serving-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.serving-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#dfeae4}
.serving-map iframe{width:100%;height:500px;border:0;display:block}
.serving-state{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;text-align:center;letter-spacing:-.5px;margin-bottom:1.2rem;color:var(--ink)}
.acc{border-bottom:1px solid rgba(26,92,58,.16)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:1.02rem;letter-spacing:.5px;text-transform:uppercase;color:var(--ink);padding:1.1rem .2rem;transition:color .2s ease}
.acc-head:hover,.acc.open .acc-head{color:var(--teal)}
.acc-chev{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.acc.open .acc-chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .38s ease}
.acc.open .acc-body{max-height:640px}
.acc-cities{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding:.2rem .2rem 1.3rem}
.acc-cities a{color:var(--muted);font-size:.95rem;font-weight:500;padding:.2rem 0;transition:color .15s ease;display:flex;align-items:center;gap:.45rem}
.acc-cities a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-bright);flex:none}
.acc-cities a:hover{color:var(--teal)}

/* dark "Book your sparkling clean" band */
.book-band{background:linear-gradient(160deg,#0e3a4a,#0c2a35);color:#fff;text-align:center;padding:100px 24px}
.book-band h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-1px;line-height:1.05;margin-bottom:1rem}
.book-band p{color:rgba(255,255,255,.82);max-width:46ch;margin:0 auto 2rem;font-size:1.08rem}

/* featured review band (parallax photo bg) */
/* sticky: this section pins behind, and the navy CTA/footer emerges from behind its bottom edge (top first) */
.quote-feature{position:sticky;top:0;z-index:0;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:130px 24px;color:#fff;
  background:linear-gradient(135deg,#01736b,#0c2a35);background-size:cover;background-position:center}
/* swap with a real photo: background-image:url('images/review-bg.jpg') */
.quote-feature::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,28,20,.85),rgba(9,28,20,.55) 70%,rgba(9,28,20,.4))}
.qf-inner{position:relative;z-index:2;max-width:960px;margin:0 auto}
.qf-stars{color:#ffcf5c;display:inline-flex;gap:3px;margin-bottom:1.3rem}
.qf-stars svg{width:22px;height:22px}
.qf-quote{font-size:clamp(1.4rem,2.9vw,2.15rem);font-weight:600;line-height:1.45;letter-spacing:-.3px;max-width:62ch}
.qf-author{margin-top:1.6rem;display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:1.02rem}
.qf-author .qf-stars-sm{color:#ffcf5c;display:inline-flex;gap:1px}
.qf-author .qf-stars-sm svg{width:16px;height:16px}
.qf-mark{position:absolute;right:5%;bottom:2%;font-family:Georgia,serif;font-size:13rem;line-height:1;color:rgba(255,255,255,.12);z-index:1;pointer-events:none}
/* blend the light "serving" section above down into the dark featured-review band */
.quote-feature::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:3;background:linear-gradient(180deg,#e3efe9,transparent);pointer-events:none}

/* bottom CTA — full-bleed parallax photo band */
/* CTA + footer wrapped in one .dark-zone so the navy gradient + diagonal sheen run continuously and line up */
.dark-zone{position:relative;z-index:1;overflow:hidden;background:linear-gradient(150deg,#0e3a4a,#0c2a35 95%)}
.dark-zone::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0 16%,transparent 16% 30%,rgba(255,255,255,.06) 30% 38%,transparent 38%);mix-blend-mode:screen}
.cta-photo{position:relative;z-index:1;text-align:center;color:#fff;padding:140px 24px;background:transparent}
.cta-photo .wrap{position:relative;z-index:2}
.cta-photo h2{font-size:clamp(2rem,4.8vw,3.5rem);font-weight:800;letter-spacing:-1px;line-height:1.05;margin-bottom:1rem}
.cta-photo p{color:rgba(255,255,255,.85);max-width:46ch;margin:0 auto 2rem;font-size:1.1rem}
.cta-photo .cta-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ---------- Scroll reveal (3D tilt flatten + fade-up, à la ContainerScroll) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:perspective(1200px) rotateX(7deg) translateY(52px) scale(.985);transform-origin:50% 0;will-change:opacity,transform;transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1)}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid .svc-card{grid-column:auto}
  .plan-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .plan.popular{transform:none}
  .plan.popular:hover{transform:translateY(-6px)}
  .rev-slide{flex:0 0 50%}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .proc-card{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .cc{border-right:0;border-bottom:1px solid rgba(26,92,58,.10)}
}
@media(max-width:820px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .hero-grid,.quote-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{aspect-ratio:4/3.4;order:-1}
  .cta-inner{flex-direction:column;align-items:flex-start;text-align:left}
  .serving-grid{grid-template-columns:1fr;gap:32px}
  .serving-map{order:-1}
  .quote-feature,.cta-photo{background-attachment:scroll}
  .qf-mark{display:none}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .rev-slide{flex:0 0 100%}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:48px 0 64px}
}

/* ===========================================================
   Membership page — perks grid + FAQ
   =========================================================== */
.mem-why{padding:88px 0;background:#fff}
.mem-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.perk{background:#fff;border:1px solid rgba(26,92,58,.12);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.perk:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.perk-ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,var(--pine),var(--teal-bright));display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.perk-ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.perk h3{font-size:1.18rem;font-weight:700;color:var(--ink);margin-bottom:.5rem}
.perk p{color:var(--muted);font-size:.98rem;line-height:1.65}

.mem-faq{padding:24px 0 96px;background:#fff}
.mem-faq .wrap{max-width:820px}
.faq{margin-top:36px}
.faq .acc-head{text-transform:none;font-size:1.08rem;letter-spacing:0;padding:1.25rem .2rem}
.faq-a{padding:0 .2rem 1.4rem;color:var(--muted);font-size:1rem;line-height:1.7;max-width:64ch}
.faq-cta{text-align:center;margin-top:44px}
@media(max-width:820px){ .mem-perks{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .mem-perks{grid-template-columns:1fr} }

/* Reviews page — Elfsight wall placeholder */
.reviews-wall-placeholder{margin:32px 0 8px;padding:64px 24px;text-align:center;border:2px dashed rgba(1,115,107,.35);border-radius:var(--radius);background:linear-gradient(180deg,#f3f7f5,#e9f1ed)}
.reviews-wall-placeholder p{font-weight:700;color:var(--ink);font-size:1.15rem;margin-bottom:.5rem}
.reviews-wall-placeholder span{color:var(--muted);font-size:.95rem}
.reviews-wall-placeholder code{background:rgba(1,115,107,.1);color:var(--teal);padding:.1rem .4rem;border-radius:6px;font-size:.9em}

/* ===========================================================
   About page — Our Story / Pine Experience / Team
   =========================================================== */
.about-story{padding:92px 0 28px;background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.about-copy p{color:var(--muted);font-size:1.06rem;line-height:1.78;margin:0 0 1.15rem;max-width:48ch}
.about-copy p:last-child{margin-bottom:0}
.about-media{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#e7f1ed,#cfe5dd);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.about-media img{width:100%;height:100%;object-fit:cover;display:block}
.about-media span{color:var(--teal);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.82rem;opacity:.6}

.about-exp{padding:56px 0 80px;background:#fff}
.about-exp .wrap{max-width:880px}
.exp-title{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:800;letter-spacing:-.6px;color:var(--ink);margin-bottom:1.4rem}
.about-exp p{color:var(--muted);font-size:1.06rem;line-height:1.78;margin:0 0 1.3rem}
.about-exp p a{color:var(--teal);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(1,115,107,.3)}
.about-exp p a:hover{border-bottom-color:var(--teal)}
.exp-list{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:1.2rem}
.exp-list li{position:relative;padding-left:2rem;color:var(--muted);font-size:1.04rem;line-height:1.7}
.exp-list li::before{content:"";position:absolute;left:.45rem;top:.62rem;width:9px;height:9px;border-radius:50%;background:var(--teal-bright)}
.exp-list strong{color:var(--ink);font-weight:700}

.about-team{padding:80px 0 100px;background:linear-gradient(180deg,#f1f6f3,#e9f1ed)}
.team-sub{color:var(--muted);margin-top:.7rem;font-size:1.05rem}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.team-card{text-align:center}
.team-photo{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#dcebe6,#bfe0d7);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-photo span{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.78rem;opacity:.6}
.team-card h3{margin:1.1rem 0 .2rem;font-size:1.16rem;font-weight:700;color:var(--ink)}
.team-card p{margin:0;color:var(--muted);font-size:.93rem}
/* co-owner highlight row */
.team-owners{margin-top:50px;margin-bottom:34px}
.team-card.owner .team-photo{position:relative;border:2px solid var(--teal);box-shadow:0 22px 52px -20px rgba(1,115,107,.5)}
.owner-badge{position:absolute;top:14px;left:14px;background:var(--teal);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px;opacity:1}
.team-card.owner h3{color:var(--teal)}
.team-card.owner p{font-weight:600;color:var(--ink)}
@media(max-width:820px){
  .about-grid{grid-template-columns:1fr;gap:34px}
  .team-grid{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:520px){
  .team-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
}

/* ===========================================================
   Contact page
   =========================================================== */
.contact-sec{padding:92px 0 100px;background:#fff}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;margin-top:44px;align-items:start}
.contact-card{background:#f3f7f5;border:1px solid rgba(1,115,107,.12);border-radius:var(--radius);padding:24px 26px;display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.contact-card .c-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,var(--pine),var(--teal-bright));display:flex;align-items:center;justify-content:center;flex:none}
.contact-card .c-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.25rem}
.contact-card p{color:var(--muted);font-size:.97rem;line-height:1.6;margin:0}
.contact-card a{color:var(--teal);font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.contact-card .socials{margin-top:.6rem}
.contact-form{background:#fff;border:1px solid rgba(1,115,107,.14);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px}
.contact-form h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.4rem}
.contact-form>p{color:var(--muted);font-size:.97rem;margin-bottom:1.4rem}
.contact-form label{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin:0 0 .35rem}
.contact-form input,.contact-form textarea{width:100%;border:1.5px solid rgba(28,38,32,.16);border-radius:var(--radius-sm);padding:.8rem 1rem;font:inherit;font-size:.97rem;color:var(--ink);margin-bottom:1.1rem;background:#fbfdfc}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--teal)}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{color:var(--muted);font-size:.85rem;margin-top:.9rem}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}.contact-form .row2{grid-template-columns:1fr}}

/* ===========================================================
   Gallery page
   =========================================================== */
.gallery-sec{padding:92px 0 100px;background:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.g-item{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#dcebe6,#bfe0d7);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;position:relative}
.g-item img{width:100%;height:100%;object-fit:cover;display:block}
.g-item span{color:var(--teal);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.78rem;opacity:.6}
@media(max-width:880px){.gallery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}

/* ===========================================================
   Blog index + article pages
   =========================================================== */
.blog-sec{padding:92px 0 100px;background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(1,115,107,.12);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post-media{aspect-ratio:16/9;background:linear-gradient(160deg,#01736b,#16b3a6);display:flex;align-items:center;justify-content:center}
.post-media.alt1{background:linear-gradient(160deg,#014c47,#01736b)}
.post-media.alt2{background:linear-gradient(160deg,#16b3a6,#01736b)}
.post-media span{color:rgba(255,255,255,.85);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.75rem}
.post-body{padding:24px 24px 28px}
.post-meta{color:var(--teal);font-weight:600;font-size:.82rem;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}
.post-body h3{color:var(--ink);font-size:1.18rem;font-weight:700;line-height:1.35;margin-bottom:.5rem}
.post-body p{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0}
.post-more{margin-top:.9rem;color:var(--teal);font-weight:700;font-size:.92rem}
@media(max-width:880px){.blog-grid{grid-template-columns:1fr}}

/* article body — also used by Terms / Privacy */
.article{padding:92px 0 90px;background:#fff}
.article .wrap{max-width:780px}
.article h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.8px;color:var(--ink);line-height:1.15;margin-bottom:.6rem}
.article .post-meta{margin-bottom:1.8rem}
.article h2{font-size:1.5rem;font-weight:700;color:var(--ink);margin:2.2rem 0 .8rem}
.article h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin:1.6rem 0 .5rem}
.article p{color:var(--muted);font-size:1.04rem;line-height:1.8;margin-bottom:1.15rem}
.article ul,.article ol{margin:0 0 1.2rem 1.4rem;color:var(--muted);font-size:1.02rem;line-height:1.8}
.article li{margin-bottom:.4rem}
.article a{color:var(--teal);font-weight:600}
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--teal);font-weight:700;text-decoration:none;margin-bottom:1.4rem;font-size:.95rem}
.back-link:hover{text-decoration:underline}

/* ===========================================================
   Sitemap page
   =========================================================== */
.sitemap-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.sitemap-cols h2{font-size:1.05rem;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:1px;margin-bottom:.9rem}
.sitemap-cols ul{list-style:none;margin:0;padding:0}
.sitemap-cols li{margin:.55rem 0}
.sitemap-cols a{color:var(--muted);text-decoration:none;font-size:1rem}
.sitemap-cols a:hover{color:var(--teal)}
@media(max-width:720px){.sitemap-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.sitemap-cols{grid-template-columns:1fr}}

/* ===========================================================
   Terms & Conditions — numbered section cards
   =========================================================== */
.tc-intro{background:linear-gradient(160deg,#f1f6f3,#e9f1ed);border:1px solid rgba(1,115,107,.14);border-radius:var(--radius);padding:26px 30px;margin-bottom:28px}
.tc-intro p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.75}
.tc-sec{background:#fff;border:1px solid rgba(1,115,107,.13);border-radius:var(--radius);padding:30px 32px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.tc-sec>h2{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;font-weight:700;color:var(--ink);margin:0 0 1rem;letter-spacing:-.2px}
.tc-num{flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(160deg,var(--pine),var(--teal-bright));color:#fff;font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.tc-sec h3{font-size:.95rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.8px;margin:1.4rem 0 .5rem}
.tc-sec p{font-size:1rem;line-height:1.75;margin-bottom:1rem}
.tc-sec p:last-child,.tc-sec ul:last-child,.tc-sec ol:last-child{margin-bottom:0}
.tc-sec ul,.tc-sec ol{font-size:.99rem;margin-bottom:1rem}
.tc-outro{text-align:center;color:var(--muted);font-style:italic;margin-top:30px}
@media(max-width:560px){.tc-sec{padding:24px 20px}}

/* ===========================================================
   Real photos (Website/images/, processed from de_pine —
   black side bars cropped, web-compressed JPEGs)
   =========================================================== */
/* Homepage hero (scoped to body.home so other pages keep the brand gradient) */
body.home .hero-bg{background:linear-gradient(150deg,rgba(1,76,71,.82),rgba(1,115,107,.55)),url('images/hero-home.jpg') center/cover no-repeat}
/* Service cards (index + area pages share these classes) */
.svc-card[data-svc="exterior"] .svc-media{background:url('images/svc-exterior.jpg') center/cover no-repeat}
.svc-card[data-svc="interior"] .svc-media{background:url('images/svc-interior.jpg') center/cover no-repeat}
.svc-card[data-svc="screen"]   .svc-media{background:url('images/svc-screen.jpg') center/cover no-repeat}
.svc-card[data-svc="track"]    .svc-media{background:url('images/svc-track.jpg') center/cover no-repeat}
/* (solar keeps its gradient — no solar photos yet) */
/* Featured review band — photo behind the existing dark ::before overlay */
.quote-feature{background-image:url('images/review-bg.jpg')}

/* ===========================================================
   Mobile nav menu (hamburger dropdown) — applies <=820px.
   Closed pill = logo + hamburger only; tapping the toggle adds
   .open to header.nav and expands the pill into a stacked panel.
   =========================================================== */
@media(max-width:820px){
  /* expand the floating pill into a rounded panel when open */
  header.nav.open .nav-inner{
    flex-wrap:wrap;height:auto;width:calc(100% - 32px);max-width:430px;
    border-radius:26px;padding:10px 18px 20px;align-items:center;row-gap:.2rem;
  }
  header.nav.open .nav-logo{order:1}
  header.nav.open .nav-toggle{order:2;margin-left:auto}

  /* main links become a full-width vertical list */
  header.nav.open .nav-links{
    order:3;display:flex;flex-direction:column;align-items:stretch;
    flex-basis:100%;width:100%;gap:.1rem;margin-top:12px;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.16);font-weight:500;
  }
  header.nav.open .nav-links>a,
  header.nav.open .nav-drop-btn{
    padding:.7rem .2rem;font-size:1.05rem;width:100%;text-align:left;
  }
  header.nav.open .nav-links>a::after,
  header.nav.open .nav-drop-btn::after{content:none}

  /* services: expand the dropdown inline (no hover needed on touch) */
  header.nav.open .nav-drop{flex-direction:column;align-items:stretch;width:100%}
  header.nav.open .nav-drop-btn svg{transform:rotate(180deg)}
  header.nav.open .nav-drop-menu{
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    padding:.1rem 0 .4rem .9rem;margin:0;
  }
  header.nav.open .nav-drop-menu a{padding:.5rem .6rem;font-size:.98rem;opacity:.92}

  /* CTA block (phone + quote button) stacked at the bottom of the panel */
  header.nav.open .nav-cta{
    order:4;display:flex;flex-direction:column;align-items:stretch;
    flex-basis:100%;width:100%;gap:.8rem;margin-top:14px;
  }
  header.nav.open .nav-phone{
    display:flex;justify-content:center;font-size:1rem;
    padding:.5rem 0;color:#fff;
  }
  header.nav.open .nav-cta .btn{justify-content:center;width:100%}

  /* hamburger -> X animation */
  .nav-toggle span{transition:transform .25s ease,opacity .2s ease}
  header.nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  header.nav.open .nav-toggle span:nth-child(2){opacity:0}
  header.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}