/* Care For A Clean — redesigned site styles (v2).
   Standalone system for the new homepage. The older pages still use styles.css
   until they are migrated to this design. Bump the ?v= number in index.html
   whenever you change this file so returning visitors get the update.
   Current version: v=13 (v2 .phero + .pgrid/.copy; v3 contact .cstrip + form kit; v4 header Services trigger works as <a> via .grp>a; v6 sage-as-signature: brand sage #89ac8b on heading underline, icon tiles, .dnum, .dcard top-edge, and the hero overlay retinted to brand sage; v10 added the .ba-slider before/after component; v11 added .pgrid.imgcol for standalone centred photos; v13 slider images keyed to .ba-before/.ba-after so section `img` rules can't collapse them, plus .vcenter/.imgleft; v18 added .uw wrapping page-title underline and the .slides scroll-snap slideshow). */

:root{
  --paper:#faf8f3;--cream:#f2ede3;--card:#fff;--border:#ece7dc;
  --sage:#89ac8b;--sage-deep:#4a6b4d;--sage-tint:#e4ede2;--clay:#cf9a76;
  --ink:#2c2a25;--muted:#6b655c;--footer:#33413a;
  --shadow:0 18px 44px -26px rgba(45,40,30,.35);
  --nav-shadow:0 6px 24px -14px rgba(45,40,30,.4);
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito Sans",sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
.nun{font-family:"Nunito",sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:96px 0}
@media(max-width:700px){section{padding:56px 0}}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep)}
h1,h2,h3,h4{font-family:"Nunito";font-weight:800;letter-spacing:-.02em;line-height:1.05}
/* Title spacing is set here and only here, so every page matches: 18px between an
   .eyebrow and its title, 20px between a title and the subheading under it. */
h2{font-size:40px;margin:18px 0 20px}
@media(max-width:700px){h2{font-size:30px}}
.u{position:relative;white-space:nowrap;z-index:0}
.u:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:10px;background:var(--sage);opacity:.55;border-radius:5px;z-index:-1}
/* .uw — same sage underline as .u, but painted as a background so it wraps across
   lines. Used on page-title h1s, which are too long to nowrap on a phone. */
.uw{background-image:linear-gradient(rgb(137 172 139/.55),rgb(137 172 139/.55));background-repeat:no-repeat;background-size:100% 10px;background-position:0 calc(100% - 3px);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center}
.section-head p{color:var(--muted);font-size:16px;margin-top:8px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 24px;font-family:"Nunito Sans";font-weight:700;font-size:15px;border:none;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.btn.primary{background:var(--sage-deep);color:#fff}
.btn.primary:hover{background:#3d5a40;transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(74,107,77,.7)}
.btn.ghost{background:transparent;border:1.6px solid #cdbfae;color:#5a5346}
.btn.ghost:hover{border-color:var(--sage-deep);color:var(--sage-deep)}
.btn.light{background:#fff;color:var(--sage-deep)}
.btn.light:hover{transform:translateY(-2px)}

/* ===== HEADER ===== */
.top{background:var(--footer);color:#eef1ec}
.top .in{max-width:var(--wrap);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.top .soc{display:flex;gap:13px;align-items:center}
.top .soc svg{width:15px;height:15px}
.top .soc span{opacity:.85;margin-left:2px}
.top a{color:#fff;text-decoration:none}
.top .phone b{color:#cfe0cf}
@media(max-width:640px){.top .soc span{display:none}}
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border);transition:box-shadow .25s,border-color .25s}
header.scrolled{box-shadow:var(--nav-shadow);border-bottom-color:transparent}
.nav{max-width:var(--wrap);margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand img{width:50px;height:50px;transition:transform .25s ease}
.brand .wm{font-family:"Nunito";font-weight:800;font-size:18px;line-height:1;letter-spacing:-.02em;word-spacing:-2px;transition:transform .25s ease;transform-origin:left center}
.brand .wm span{color:var(--sage)}
.brand:hover img{transform:scale(1.08)}
.brand:hover .wm{transform:scale(1.03)}
.links{display:flex;align-items:center;gap:2px;margin-left:10px}
.links>a,.grp>button,.grp>a{font-family:"Nunito Sans";font-weight:700;font-size:14.5px;color:#3f3a33;background:none;border:none;cursor:pointer;padding:9px 13px;border-radius:9px;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.links>a:hover,.grp>button:hover,.grp>a:hover,.grp:hover>button,.grp:hover>a{background:var(--sage-tint);color:var(--sage-deep)}
.grp{position:relative}
.grp>button svg,.grp>a svg{width:14px;height:14px;transition:transform .2s}
.grp:hover>button svg,.grp:hover>a svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:10px;width:600px;display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
/* invisible bridge so hovering the gap between trigger and panel keeps the mega open */
.mega::before{content:"";position:absolute;top:-14px;left:0;width:100%;height:14px}
.grp:hover .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;gap:11px;padding:9px 12px;border-radius:11px;text-decoration:none;align-items:flex-start}
.mega a:hover{background:var(--cream)}
.mega .mc{width:34px;height:34px;border-radius:9px;background:var(--sage-tint);color:var(--sage-deep);display:grid;place-items:center;flex:0 0 auto}
.mega .mc svg{width:18px;height:18px}
.mega b{font-family:"Nunito";font-weight:800;font-size:14px;display:block;line-height:1.2}
.mega small{color:var(--muted);font-size:12px}
.mega .mgl{grid-column:1/-1;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;padding:10px 12px 3px}
.mega .mgl:first-child{padding-top:4px}
.spacer{margin-left:auto}
.nav .cta{display:inline-flex;align-items:center;gap:7px;background:var(--sage-deep);color:#fff;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s,background .2s}
.nav .cta:hover{background:#3d5a40;transform:translateY(-1px)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}
/* Switch to the burger at 1100px, not 960px. With Service Areas added, the seven
   nav items plus the brand and the quote button need roughly 1090px to sit on
   one line, so the old breakpoint left a band where the header crowded. */
@media(max-width:1100px){
  .links,.nav .cta{display:none}
  .burger{display:flex}
}
/* mobile drawer */
.backdrop{position:fixed;inset:0;background:rgba(30,26,20,.45);opacity:0;visibility:hidden;transition:.25s;z-index:45}
.backdrop.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,86vw);background:var(--paper);z-index:50;transform:translateX(100%);transition:transform .3s;overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)}
.drawer.open{transform:none}
.dhead{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start}
.dhead small{color:var(--sage-deep);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.dhead strong{font-family:"Nunito";font-weight:800;font-size:19px;display:block;margin-top:3px}
.dclose{background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted);line-height:1}
.dlinks{padding:10px 12px}
.dlinks a{display:block;padding:12px;font-weight:700;font-size:15.5px;text-decoration:none;border-radius:10px}
.dlinks a:hover{background:var(--sage-tint);color:var(--sage-deep)}
.dgl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;padding:14px 12px 4px;font-weight:700}
.dsub a{padding-left:22px;font-size:14px;color:var(--muted);display:flex;gap:10px}
.dsub a i{font-style:normal;color:var(--sage);font-weight:800;font-size:12px}
.dcta{margin:12px 20px 8px;display:block;text-align:center;background:var(--sage-deep);color:#fff;border-radius:999px;padding:14px;font-weight:700;text-decoration:none}
.dfoot{padding:6px 20px 24px;color:var(--muted);font-size:13px}
.dfoot a{color:var(--sage-deep);font-weight:800;font-size:18px;text-decoration:none;display:block;margin-top:2px}

/* ===== PAGE HERO (inner pages) ===== */
.phero{background:var(--cream);text-align:center;padding:74px 0 66px}
.phero h1{font-family:"Nunito";font-weight:800;font-size:clamp(32px,4.6vw,46px);letter-spacing:-.02em;line-height:1.05;margin:18px auto 20px;max-width:16ch}
.phero p{color:var(--muted);font-size:17px;max-width:58ch;margin:0 auto}
@media(max-width:700px){.phero{padding:52px 0 46px}}

/* ===== INNER-PAGE PROSE ===== */
.pgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start}
@media(max-width:820px){.pgrid{grid-template-columns:1fr;gap:22px}}
.pgrid .section-head{margin:0;text-align:left;max-width:none}
/* .pgrid.imgcol — heading + prose share one column, the photo stands alone in the
   other and sits vertically centred against the text. */
.pgrid.imgcol{grid-template-columns:1.15fr .85fr}
.pgrid.imgcol .section-head{margin-bottom:18px}
.pgrid.imgcol .pgfig{align-self:center}
@media(max-width:820px){.pgrid.imgcol{grid-template-columns:1fr}}
/* .vcenter also centres the text column against the photo, not just the photo. */
.pgrid.imgcol.vcenter{align-items:center}
/* add .imgleft to put the photo on the left. Source order stays heading-first so
   mobile and screen readers still read the title before the picture. */
@media(min-width:821px){
  .pgrid.imgcol.imgleft{grid-template-columns:.85fr 1.15fr}
  .pgrid.imgcol.imgleft>:first-child{grid-column:2;grid-row:1}
  .pgrid.imgcol.imgleft .pgfig{grid-column:1;grid-row:1}
}
.copy p{color:var(--muted);font-size:16px;margin-bottom:14px}
.copy p:last-child{margin-bottom:0}
.copy strong{color:var(--ink);font-weight:800}
.copy ul{list-style:none;margin:16px 0;display:grid;gap:11px}
.copy li{position:relative;padding-left:28px;color:var(--muted);font-size:15.5px}
.copy li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--sage-deep);font-weight:900}

/* ===== HERO ===== */
.hero{position:relative;min-height:600px;display:flex;align-items:center;background:#3b5036;padding:0}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ov{position:absolute;inset:0;background:linear-gradient(105deg,rgba(46,64,42,.93) 0%,rgba(74,107,77,.72) 44%,rgba(137,172,139,.32) 100%)}
.hero .in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:70px 24px;width:100%}
.hero h1{color:#fff;font-size:clamp(38px,5.2vw,56px);line-height:1.02}
.hero .eyebrow{display:block;margin-bottom:18px;color:#cfe0cf}
.hero .lead{color:#e7ede6;font-size:17px;max-width:40ch;margin:16px 0 24px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .ghost{border-color:rgba(255,255,255,.55);color:#fff}
.proof{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:26px;font-size:13.5px;font-weight:700;color:#dfe6dd}
.proof .i{display:inline-flex;align-items:center;gap:7px}
.proof svg{width:18px;height:18px;color:#bcd3bd}
.proof .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.gs{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:22px;width:100%;max-width:360px;margin-left:auto}
.gs .k{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep)}
.gs h3{font-family:"Nunito";font-weight:800;font-size:21px;margin:3px 0 15px}
.gs a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:12px;background:var(--paper);text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px;margin-bottom:9px;transition:background .2s,transform .2s}
.gs a:hover{background:var(--sage-tint);transform:translateX(3px)}
.gs a .c{width:36px;height:36px;border-radius:10px;background:var(--sage);border:none;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.gs a .c svg{width:19px;height:19px}
.gs a .ar{margin-left:auto;color:var(--sage)}
@media(max-width:860px){.hero .in{grid-template-columns:1fr;gap:30px}.gs{margin:0}}

/* ===== TRUST BAND ===== */
.trust{background:var(--cream);padding:34px 0}
.trust .in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;justify-items:center}
@media(max-width:820px){.trust .in{grid-template-columns:repeat(2,1fr);gap:24px 20px;justify-items:start}}
.trust .t{display:flex;gap:13px;align-items:center}
.trust .t .ic{width:44px;height:44px;border-radius:12px;background:var(--sage);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.trust .t .ic svg{width:22px;height:22px}
.trust .t .n{font-family:"Nunito";font-weight:800;font-size:19px}
.trust .t strong{font-family:"Nunito";font-weight:800;font-size:15px;display:block;line-height:1.15}
.trust .t span{font-size:12.5px;color:var(--muted)}

/* ===== DIFFERENTIATORS ===== */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.diff{grid-template-columns:1fr}}
.dcard{background:#fff;border:1px solid var(--border);border-top:3px solid var(--sage);border-radius:18px;box-shadow:var(--shadow);padding:24px;display:flex;gap:16px;transition:transform .22s,box-shadow .22s}
.dcard:hover{transform:translateY(-3px);box-shadow:0 26px 54px -24px rgba(45,40,30,.45)}
.dnum{font-family:"Nunito";font-weight:800;font-size:15px;color:#fff;background:var(--sage);width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.dcard h3{font-size:19px;margin-bottom:6px}
.dcard p{color:var(--muted);font-size:14.5px}

/* ===== BEFORE/AFTER SLIDER ===== */
.ba-slider{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;--ba-pos:50%;box-shadow:var(--shadow)}
/* class-based (not `.ba-slider img`) so section rules like `.story img{height:460px}`
   can't win on specificity and collapse the images inside the slider. */
.ba-slider .ba-before,.ba-slider .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none}
.ba-slider .ba-before{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-slider .ba-line{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-slider .ba-line:after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:var(--sage-deep);font-weight:900;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ba-slider .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-badge{position:absolute;top:12px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#fff;background:rgba(35,45,32,.6);z-index:2;pointer-events:none}
.ba-badge.before{left:12px}
.ba-badge.after{right:12px}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}}
.ba-cap{margin-top:10px;text-align:center;color:var(--muted);font-size:14px}

/* ===== PHOTO SLIDESHOW =====
   Native CSS scroll-snap track; the arrows are the only JS (script-v2.js).
   Swipe works on touch for free. Slide frame ratio is --sr (default 3/4).
   A slide holding two <img> becomes a side-by-side pair split by the white gap. */
.slides{position:relative;border-radius:18px;overflow:hidden}
.strack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.strack::-webkit-scrollbar{display:none}
.strack>figure{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;gap:3px;background:#fff;aspect-ratio:var(--sr,3/4)}
.strack figure>img{flex:1;width:100%;height:100%;min-width:0;object-fit:cover}
.snav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--sage-deep);font:900 24px/1 "Nunito";cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.snav:hover{background:#fff}
.snav.prev{left:10px}
.snav.next{right:10px}

/* ===== STORY ===== */
.story{background:var(--cream)}
.story .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:820px){.story .grid{grid-template-columns:1fr;gap:30px}}
.story .pull{font-family:"Nunito";font-weight:800;font-size:22px;line-height:1.3;color:var(--ink);border-left:4px solid var(--sage);padding-left:18px;margin:28px 0 22px}
.story p{color:var(--muted);font-size:15.5px;margin-bottom:12px}
.story img{border-radius:20px;height:460px;width:100%;object-fit:cover}

/* ===== SERVICES ===== */
.svc{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto}
.srow{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px 22px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.srow:hover{border-color:var(--sage);transform:translateX(4px)}
.srow .tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sage-deep);background:var(--sage-tint);padding:4px 11px;border-radius:999px;flex:0 0 auto;width:96px;text-align:center}
.srow .tag.home{color:#fff;background:var(--sage-deep)}
.srow .tag.vet{color:#a5623c;background:#efe1d4}
.srow .body h3{font-size:18px;margin-bottom:2px}
.srow .body p{color:var(--muted);font-size:13.5px}
.srow .go{margin-left:auto;color:var(--sage);flex:0 0 auto}
@media(max-width:600px){.srow{flex-wrap:wrap}.srow .tag{order:-1}.srow .go{display:none}}

/* ===== CHECKLIST ===== */
.checklist{background:var(--cream)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.tab{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:10px 17px;font-family:"Nunito Sans";font-weight:700;font-size:14px;color:#5a5346;cursor:pointer;transition:all .2s}
.tab svg{width:17px;height:17px;color:var(--sage)}
.tab:hover{border-color:var(--sage)}
.tab.active{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep)}
.tab.active svg{color:#fff}
.board{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:28px;max-width:1000px;margin:0 auto}
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.board-head h3{font-size:22px}
.count{background:var(--sage-tint);color:var(--sage-deep);font-weight:700;font-size:12.5px;padding:5px 13px;border-radius:999px}
.whole-note{background:var(--paper);border:1px dashed #ddd3c2;border-radius:12px;padding:11px 15px;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.whole-note b{color:var(--sage-deep)}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 22px}
@media(max-width:820px){.items{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.items{grid-template-columns:1fr}}
.item{display:flex;gap:11px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid #f4efe6;font-size:14px}
.item svg{width:18px;height:18px;color:var(--sage-deep);flex:0 0 auto;margin-top:1px}
.item .note{color:var(--muted);font-weight:400}

/* ===== STATS ===== */
.stats .in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media(max-width:700px){.stats .in{grid-template-columns:repeat(2,1fr);gap:30px}}
.stat .n{font-family:"Nunito";font-weight:900;font-size:46px;color:var(--sage-deep);line-height:1}
.stat .l{color:var(--muted);font-size:14px;font-weight:600;margin-top:6px}

/* ===== CTA ===== */
.cta-band{background:var(--sage-deep);color:#fff}
.cta-band .in{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center}
@media(max-width:760px){.cta-band .in{grid-template-columns:1fr;gap:20px}}
.cta-band h2{color:#fff}
.cta-band .eyebrow{color:#cfe0cf}
.cta-band p{color:#e7ede6;font-size:16px;margin-top:4px}
.cta-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px}
.cta-card .btn.light{justify-content:center}
.cta-call{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;border:1.6px solid rgba(255,255,255,.55);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s,transform .2s}
.cta-call:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.cta-call svg{width:18px;height:18px}
.cta-note{display:flex;align-items:center;justify-content:center;gap:14px;color:#cfe0cf;font-size:13px;font-weight:700;flex-wrap:wrap}
.cta-note .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ===== FOOTER ===== */
footer{background:var(--footer);color:#d8ded6}
.ftop{max-width:1040px;margin:0 auto;padding:56px 24px 34px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:28px}
@media(max-width:760px){.ftop{grid-template-columns:1fr 1fr}}
.fbrand{display:flex;align-items:center;gap:10px}
.fbrand img{width:52px;height:52px}
.fbrand .wm{font-family:"Nunito";font-weight:800;font-size:19px;color:#fff}
.fbrand .wm span{color:var(--sage)}
footer .blurb{font-size:13.5px;color:#b8c1b6;margin-top:12px;max-width:32ch}
footer h5{font-family:"Nunito";font-weight:800;font-size:13px;color:#fff;margin-bottom:12px}
footer .col a{display:block;color:#c8d0c6;text-decoration:none;font-size:13.5px;padding:4px 0}
footer .col a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.12);max-width:1040px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;font-size:12px;color:#9fa89d;flex-wrap:wrap;gap:8px}

/* ===== CONTACT + FORM KIT ===== */
.cstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:26px}
.cstrip a,.cstrip div{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 20px;text-decoration:none;color:var(--ink);min-width:150px;box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.cstrip a:hover{border-color:var(--sage);transform:translateY(-2px)}
.cstrip span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:2px}
.cstrip strong{font-family:"Nunito";font-weight:800;font-size:15px}
.formcard{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:30px;max-width:720px;margin:0 auto}
@media(max-width:560px){.formcard{padding:22px}}
.formcard .section-head{margin:0 0 6px;text-align:left;max-width:none}
.qform{display:grid;gap:16px;margin-top:20px}
.qform label{display:block;font-family:"Nunito Sans";font-weight:700;font-size:14px;color:#3f3a33}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.qform .row{grid-template-columns:1fr}}
.inp,.sel,.ta{width:100%;margin-top:6px;font-family:"Nunito Sans";font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-tint)}
.ta{resize:vertical}
.fstatus{font-size:14px;color:var(--muted);margin:0;min-height:1px}
.hidden{display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}