/* ============================================================
   SAGE DESIGNS — Shared Stylesheet
   Shares the Sage Cleanings palette: coastal sage + clay, light airy
   sections with a deep forest hero. The type is its own: Instrument
   Serif headings over Instrument Sans, self-hosted from /fonts and
   preloaded in each page head.
   ============================================================ */

/* ---------- FONTS ----------
   Self-hosted so a phone never waits on two extra connections to Google
   before any text can paint. Latin subset only: the site uses no glyph
   outside it. Both families are SIL Open Font License 1.1, and the
   licenses ship alongside the files in /fonts. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-normal-var.woff2') format('woff2-variations'),
      url('../fonts/instrument-sans-normal-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-italic-var.woff2') format('woff2-variations'),
      url('../fonts/instrument-sans-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Greens sampled from starbucks.com: house green, band green, dark green */
  --sage:#00754a; --sage-deep:#006241; --sage-darker:#1e3932;
  --forest:#1e3932; --forest-deep:#14302a;
  --sage-100:#d4e9e2; --sage-50:#f9f9f9; --sage-tint:#d4e9e2;
  /* Primary action: a black pill, as on their header and cards */
  --clay:#000000; --clay-deep:#2b2b2b; --clay-soft:#f2f2f2;
  /* Neutrals: white page, near-white alternate band */
  --ivory:#ffffff; --cream:#f9f9f9; --paper:#ffffff;
  --ink:#000000; --ink-mid:#3d3d3d; --ink-soft:#6b6b6b;
  --line:#e6e6e6; --line-soft:#f0f0f0;
  --gold:#d4e9e2;

  /* Aliases so existing rules keep working against the sage palette */
  --brand:var(--sage); --brand-lt:#4a8168; --brand-dk:var(--sage-deep);
  --accent:var(--clay); --accent-dk:var(--clay-deep); --accent-sf:var(--clay-soft);
  --deep:var(--sage-deep); --bone:var(--ivory); --mist:var(--sage-50);
  --tint:var(--sage-tint); --line-sf:var(--line-soft);
  --tx:var(--ink); --tx-mid:var(--ink-mid); --tx-soft:var(--ink-soft); --tx-inv:#ffffff;

  /* Shadows */
  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 2px 8px rgba(0,0,0,.06);
  --sh-md:0 4px 14px rgba(0,0,0,.07);
  --sh-lg:0 10px 30px rgba(0,0,0,.10);
  --sh-ac:0 6px 16px rgba(0,0,0,.14);
  /* Radii */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-pill:999px;
  /* Layout */
  --wrap:1180px; --hdr-h:76px;
  /* Type */
  --f-head:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mob-btn,.mob-btn::before,.mob-btn::after{transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{font-family:var(--f-body);background:var(--ivory);color:var(--ink);line-height:1.65;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.12;letter-spacing:-.01em;font-weight:400}
/* Serif headings have a single weight; bold inside them would be synthetic. */
.logo-tx b,.ftr-brand span,.hero-price b,.plan-amt b,.vs b,.stat b,.srow-t,.srow-n,
h1 b,h2 b,h3 b,h4 b,h1 em,h2 em,h3 em,h4 em,h1 strong,h2 strong,h3 strong,h4 strong{font-weight:400}
h1 em,h2 em,h3 em,h4 em{font-style:normal}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.015em}
h3{font-size:clamp(1.18rem,2vw,1.42rem)}
img{max-width:100%;display:block}
/* Inline SVGs with no explicit size stretch to fill their container: that
   is how the blog arrows ended up 309px wide. Any rule with a class in it
   outranks this, so it only ever catches icons nothing else has sized. */
svg{width:1em;height:1em;flex-shrink:0}
picture{display:contents}
a{color:inherit}
strong,b{font-weight:700}
em{font-style:italic}
::selection{background:var(--sage);color:#fff}

/* ---- a11y ---- */
.skip{position:fixed;left:1rem;top:-5rem;z-index:3000;background:var(--brand);color:#fff;padding:.75rem 1.2rem;border-radius:var(--r-md);font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:var(--sh-md);transition:top .2s}
.skip:focus{top:1rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-body);font-weight:600;font-size:.94rem;text-decoration:none;border:1px solid transparent;cursor:pointer;border-radius:var(--r-pill);padding:.72rem 1.4rem;transition:background .18s ease,color .18s ease,border-color .18s ease;line-height:1.2;white-space:nowrap}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-acc{background:#000;color:#fff;border-color:#000}
.btn-acc:hover{background:#2b2b2b;border-color:#2b2b2b}
.btn-brand{background:var(--sage);color:#fff;border-color:var(--sage)}
.btn-brand:hover{background:var(--sage-deep);border-color:var(--sage-deep)}
.btn-ghost{background:transparent;color:#000;border-color:#000}
.btn-ghost:hover{background:#f2f2f2}
/* Outlined white pill for green bands and over the hero photo, where a
   faint dark fill keeps the label readable against bright foliage. */
.btn-line{background:rgba(20,48,42,.35);color:#fff;border-color:rgba(255,255,255,.85);
          -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.btn-line:hover{background:rgba(20,48,42,.55);border-color:#fff}
.btn-white{background:#fff;color:#000;border-color:#fff}
.btn-white:hover{background:#f2f2f2;border-color:#f2f2f2}
.btn-lg{padding:.9rem 1.8rem;font-size:1rem}
.btn-blk{width:100%}

/* ---------- HEADER ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.scr{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0;flex:0 1 auto}
.logo img{width:40px;height:40px;flex-shrink:0;object-fit:contain}
.logo-tx{display:flex;flex-direction:column;line-height:1;min-width:0}
.logo-tx b{font-family:var(--f-head);font-weight:400;font-size:1.28rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.logo-tx i{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.18em;color:var(--tx-soft);text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:.2rem}
.nav-lnk{position:relative;color:#000;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .7rem;border-radius:var(--r-sm);transition:color .18s}
.nav-lnk:hover{color:var(--brand)}
.nav-lnk.on{color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:.55rem;margin-left:.5rem}
.nav-ph{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:#000;border:1px solid #000;font-weight:600;font-size:.88rem;text-decoration:none;padding:.55rem 1.05rem;border-radius:var(--r-pill);white-space:nowrap;transition:background .18s}
.nav-ph:hover{background:#f2f2f2}
.nav-ph svg{width:15px;height:15px}

/* dropdowns */
.hasdrop{position:relative}
.drop-tog{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;font-family:var(--f-body);color:#000;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .7rem;border-radius:var(--r-sm);cursor:pointer;transition:color .18s}
.drop-tog:hover{color:var(--brand)}
.drop-tog svg{width:14px;height:14px;transition:transform .2s}
.hasdrop:hover .drop-tog svg,.hasdrop.open .drop-tog svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.5rem;min-width:280px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.hasdrop:hover .drop,.hasdrop.open .drop,.drop:hover,.drop:focus-within{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);text-decoration:none;transition:background .15s}
.drop a:hover{background:var(--mist)}
.drop a span{display:block;font-weight:700;font-size:.9rem;color:var(--tx)}
.drop a small{display:block;font-size:.76rem;color:var(--tx-soft);margin-top:1px}
.drop-wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:.1rem}
.drop-areas{min-width:620px}
.drop-srch{grid-column:1/-1;position:relative;padding:.4rem .5rem .6rem}
.drop-srch svg{position:absolute;left:1.15rem;top:50%;transform:translateY(-30%);width:16px;height:16px;color:var(--tx-soft);pointer-events:none}
.drop-srch input{width:100%;padding:.6rem .8rem .6rem 2.4rem;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-body);font-size:.88rem;background:var(--bone)}
.drop-cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.1rem;max-height:340px;overflow-y:auto}
.drop-cols .dh{grid-column:1/-1;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft);padding:.7rem .8rem .3rem}
.drop-cols a{font-size:.85rem;font-weight:600;color:var(--tx-mid);padding:.42rem .8rem}
.drop-cols a[hidden]{display:none}
.drop-foot{grid-column:1/-1;border-top:1px solid var(--line-sf);margin-top:.35rem;padding-top:.35rem}
.drop-foot a{font-weight:700;color:var(--brand);font-size:.86rem}

.mob-btn{display:none;position:relative;background:none;border:none;cursor:pointer;
         color:var(--ink);padding:.4rem;flex-shrink:0;margin-right:-.4rem;
         width:42px;height:42px;align-items:center;justify-content:center;
         border-radius:50%;transition:background .2s ease,transform .2s ease}
.mob-btn svg{width:26px;height:26px;opacity:0}   /* kept for semantics only */
.mob-btn::before,.mob-btn::after{content:'';position:absolute;left:50%;top:50%;
  width:23px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .2s ease}
.mob-btn::before{transform:translate(-50%,-7px);box-shadow:0 7px 0 currentColor}
.mob-btn::after{transform:translate(-50%,7px)}
.mob-btn:hover{background:var(--sage-50)}
.mob-btn:active{transform:scale(.92)}
.mob-btn[aria-expanded="true"]::before{box-shadow:0 0 0 transparent;
  transform:translate(-50%,-50%) rotate(45deg)}
.mob-btn[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mob-btn svg{width:26px;height:26px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(620px,80svh,800px);display:flex;align-items:center;padding:calc(var(--hdr-h) + 3rem) 0 3.5rem;background:var(--sage-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(20,48,42,.92) 0%,rgba(20,48,42,.80) 38%,rgba(20,48,42,.40) 66%,rgba(20,48,42,.10) 100%),linear-gradient(180deg,rgba(20,48,42,.10) 40%,rgba(20,48,42,.52) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.kick{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--sage-tint);font-size:.85rem;font-weight:700;letter-spacing:.04em;padding:.45rem 1.05rem;border-radius:var(--r-pill);margin-bottom:1.2rem}
.kick svg{width:15px;height:15px;color:var(--gold)}
.hero-left{text-shadow:0 2px 18px rgba(0,0,0,.3)}
.hero h1{color:#fff;margin-bottom:1.25rem;max-width:16ch}
.hero h1 em{font-style:normal;font-weight:400;color:var(--sage-tint)}
.hero-sub{font-size:clamp(1.02rem,1.4vw,1.18rem);color:rgba(255,255,255,.9);line-height:1.62;margin-bottom:1.9rem;max-width:34rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem}
.hero-note{display:flex;align-items:center;gap:.5rem;font-size:.87rem;color:rgba(255,255,255,.72);font-weight:600}
.hero-note svg{width:17px;height:17px;color:var(--sage-tint);flex-shrink:0}
.hero-price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.4rem}
.hero-price b{font-family:var(--f-head);font-size:2.6rem;color:#fff;line-height:1}
.hero-price span{color:rgba(255,255,255,.75);font-size:.95rem;font-weight:600}
.hero-price s{color:rgba(255,255,255,.5);font-size:.9rem}

/* quote card */
.qq{background:var(--paper);border-radius:var(--r-xl);padding:1.7rem;box-shadow:var(--sh-lg);color:var(--tx)}
.qq h2{font-size:1.35rem;margin-bottom:.3rem}
.qq-sub{font-size:.86rem;color:var(--tx-soft);margin-bottom:1.1rem}
.qq-row{margin-bottom:.8rem}
.qq-row label{display:block;font-size:.78rem;font-weight:700;color:var(--tx-mid);margin-bottom:.32rem;letter-spacing:.02em}
.qq-row input,.qq-row select,.qq-row textarea{width:100%;padding:.78rem .9rem;border:1.4px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-body);font-size:.93rem;background:var(--bone);color:var(--tx);transition:border-color .18s,background .18s}
.qq-row input:focus,.qq-row select:focus,.qq-row textarea:focus{border-color:var(--brand);background:#fff;outline:none}
.qq-row textarea{resize:vertical;min-height:92px}
.qq .btn{width:100%;margin-top:.35rem}
.qq-note{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--tx-soft);margin-top:.8rem;justify-content:center;text-align:center}
.qq-note svg{width:14px;height:14px;flex-shrink:0;color:var(--brand)}
.qq-err{display:none;background:#fdecea;color:#a3271b;font-size:.82rem;padding:.6rem .8rem;border-radius:var(--r-sm);margin-top:.7rem}
.qq-done{text-align:center;padding:1.5rem .5rem}
.qq-done svg{width:52px;height:52px;color:var(--brand);margin:0 auto 1rem}
.qq-done h3{margin-bottom:.5rem}
.qq-done p{font-size:.92rem;color:var(--tx-mid)}


/* ---------- TRUST BAR ---------- */
.tbar{background:var(--sage-darker);padding:1.15rem 0}
.tbar-in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem}
.titem{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.9rem;font-weight:600}
.titem svg{width:17px;height:17px;color:var(--sage-tint);flex-shrink:0}

/* ---------- SECTIONS ---------- */
.sec{padding:4.5rem 0}
.sec-sm{padding:3rem 0}
.sec-in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.bg-mist{background:var(--sage-50)}
.bg-paper{background:var(--paper)}
.bg-deep{background:var(--sage-50);color:var(--ink)}
.bg-deep h2,.bg-deep h3{color:var(--ink)}
.bg-deep p{color:var(--ink-mid)}
.shead{text-align:center;max-width:42rem;margin:0 auto 2.6rem}
.shead.lft{text-align:left;margin-left:0}
.eyebrow{display:inline-flex;align-items:center;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--sage);margin-bottom:.9rem}
.bg-deep .eyebrow{color:var(--sage)}
.shead h2{margin-bottom:.8rem}
.shead p{color:var(--tx-mid);font-size:1.03rem;line-height:1.7}

/* ---------- CARDS ---------- */
.grid{display:grid;gap:1.3rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:1.8rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sage);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--sage-tint)}
.card:hover::after{transform:scaleY(1)}
.card-ico{width:46px;height:46px;border-radius:var(--r-md);background:var(--sage-100);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.card-ico svg{width:23px;height:23px;color:var(--sage)}
.card h3{margin-bottom:.5rem;font-size:1.32rem;color:var(--ink);letter-spacing:-.01em}
.card p{color:var(--tx-mid);font-size:.93rem;line-height:1.66}
.card-lnk{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.87rem;font-weight:700;color:var(--brand);text-decoration:none}
.card-lnk svg{width:15px;height:15px;transition:transform .18s}
.card:hover .card-lnk svg{transform:translateX(3px)}
a.card{text-decoration:none;display:block}

/* ---------- SERVICE ROWS (editorial list) ----------
   Hairline-ruled rows instead of cards. No boxes, no icons: the index
   numeral and the serif name carry the hierarchy, and the eye runs straight
   down the left edge, which is much faster than scanning eight tiles. */
.srows{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.25fr) auto;
      align-items:center;gap:0 2rem;padding:1.6rem .6rem;
      border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
      transition:background-color .22s ease,padding-left .22s ease}
.srow:hover{background:var(--sage-50);padding-left:1.1rem}
.srow-n{font-family:var(--f-head);font-size:.86rem;font-weight:400;color:var(--sage);
        opacity:.55;letter-spacing:.04em;width:2.4rem;flex-shrink:0}
.srow-t{font-family:var(--f-head);font-size:clamp(1.24rem,2.1vw,1.62rem);font-weight:400;
        color:var(--ink);letter-spacing:-.018em;line-height:1.2;
        transition:color .22s ease}
.srow:hover .srow-t{color:var(--sage-deep)}
.srow-d{font-size:.96rem;color:var(--ink-mid);line-height:1.62}
.srow-a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
        border-radius:50%;border:1px solid var(--line);color:var(--sage);flex-shrink:0;
        transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
.srow-a svg{width:16px;height:16px}
.srow:hover .srow-a{background:var(--sage);border-color:var(--sage);color:#fff;
                    transform:translateX(4px)}

/* ---------- PRICING ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.plan{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:2.1rem 1.8rem;position:relative;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.plan.pop{border-color:var(--sage);border-width:2px;box-shadow:var(--sh-md)}
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sage);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4rem 1rem;border-radius:var(--r-pill);white-space:nowrap}
.plan h3{font-size:1.3rem;margin-bottom:.9rem}
.plan-amt{display:flex;align-items:baseline;gap:.25rem;margin-bottom:.35rem}
.plan-amt b{font-family:var(--f-head);font-size:3.1rem;line-height:1;color:var(--ink);letter-spacing:-.03em}
.plan-amt span{font-size:.95rem;color:var(--tx-soft);font-weight:600}
.plan-down{font-size:.83rem;font-weight:700;color:var(--brand);margin-bottom:1.4rem}
.plan ul{list-style:none;margin-bottom:1.6rem;flex:1}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.89rem;color:var(--tx-mid);padding:.42rem 0;line-height:1.55}
.plan li svg{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:.2rem}
.plan li.hd{font-weight:700;color:var(--tx);padding-top:.1rem}
.plan li.hd svg{display:none}

/* compare strip */
.vs{background:var(--sage-100);border:1px solid #bcdcd1;border-radius:var(--r-lg);padding:1.4rem 1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.4rem;text-align:center;font-size:.95rem;color:#1e3932;margin-top:2.2rem}
.vs b{font-family:var(--f-head);font-size:1.25rem;color:var(--sage-deep)}

/* ---------- CHECKLIST / FEATURES ---------- */
.checks{list-style:none;display:grid;gap:.7rem;margin:1.3rem 0}
/* Not flex: a bold lead-in and the sentence after it are separate flex
   items, which split into columns and wrap badly on a phone. Normal flow
   with the tick positioned out of it keeps the sentence whole. */
.checks li{position:relative;display:block;padding-left:1.75rem;font-size:.96rem;color:var(--tx-mid);line-height:1.6}
.checks li svg{position:absolute;left:0;top:.28rem;width:19px;height:19px;color:var(--brand)}
.bg-deep .checks li{color:var(--ink-mid)}
.bg-deep .checks li svg{color:var(--sage)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split-wide{grid-template-columns:1.2fr .8fr}

/* steps */
.steps{counter-reset:s;display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr)}
.step{position:relative;padding-top:3.2rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;font-family:var(--f-head);font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.9rem;color:var(--tx-mid);line-height:1.62}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.stat b{display:block;font-family:var(--f-head);font-size:clamp(2rem,4vw,2.8rem);color:var(--sage);line-height:1;letter-spacing:-.02em}
.bg-deep .stat b{color:var(--sage)}
.stat span{display:block;font-size:.85rem;color:var(--tx-soft);margin-top:.5rem;line-height:1.45}
.bg-deep .stat span{color:var(--ink-soft)}

/* ---------- LINK CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem 1.1rem;font-size:.88rem;font-weight:600;color:var(--tx-mid);text-decoration:none;transition:border-color .18s,color .18s,transform .18s,background .18s}
.chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);background:var(--mist)}
.chip svg{width:14px;height:14px;opacity:.55}

/* region groups */
.rgroup{margin-bottom:2.2rem}
.rgroup h3{font-size:1.05rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem;color:var(--tx)}
.rgroup h3::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- WHY SECTION (ported from the Sage Cleanings layout) ----------
   A two-column intro, heading left and paragraph right, over a six-cell bento
   grid. The cells are one continuous bordered surface rather than separate
   cards: dividers between them, rounded only on the outside. */
.why{display:block}
.why-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
          column-gap:clamp(2.8rem,6vw,5.6rem);align-items:end;text-align:left}
.why-head .eyebrow{grid-column:1;grid-row:1;justify-content:flex-start}
.why-head h2{grid-column:1;grid-row:2;font-size:clamp(2.25rem,4vw,3.45rem);color:var(--ink);
             margin:.5rem 0 0;max-width:14ch;letter-spacing:-.03em;line-height:1.03}
.why-head p{grid-column:2;grid-row:2;font-size:1.04rem;color:var(--ink-mid);
            line-height:1.72;max-width:560px;margin:0}

.why-list{list-style:none;margin:3.2rem 0 0;padding:0;display:grid;
          grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);
          gap:0;overflow:hidden;border:1px solid rgba(0,117,74,.18);
          border-radius:26px;background:rgba(255,255,255,.5)}
.why-item{position:relative;display:block;grid-column:span 4;padding:1.75rem 4rem 1.65rem 1.65rem;
          border-right:1px solid rgba(0,117,74,.16);border-bottom:1px solid rgba(0,117,74,.16);
          background:transparent;transition:opacity .6s ease,transform .6s ease,background-color .22s ease}
.why-item:nth-child(1){grid-column:span 5;background:rgba(232,242,236,.55)}
.why-item:nth-child(2){grid-column:span 4}
.why-item:nth-child(3){grid-column:span 3;border-right:0}
.why-item:nth-child(4){grid-column:span 3;border-bottom:0}
.why-item:nth-child(5){grid-column:span 4;border-bottom:0}
.why-item:nth-child(6){grid-column:span 5;border-right:0;border-bottom:0;background:rgba(232,242,236,.38)}
.why-item:hover{background-color:rgba(232,242,236,.72)}
.why-item h3{font-size:1.2rem;color:var(--ink);margin:0 0 .65rem;letter-spacing:-.01em}
.why-item p{font-size:.94rem;color:var(--ink-mid);line-height:1.65;margin:0;max-width:42rem}
/* A different quiet glyph per cell, so the grid reads as six things rather
   than one repeated. Drawn in CSS, so they cost nothing to load. */
.why-item::before{content:'';position:absolute;top:1.4rem;right:1.45rem;width:28px;height:28px;
                  border:1px solid rgba(0,117,74,.3);background:rgba(168,217,196,.14)}
.why-item:nth-child(1)::before{border-radius:50%;box-shadow:inset 0 0 0 7px rgba(255,255,255,.75)}
.why-item:nth-child(2)::before{border-radius:5px;transform:rotate(45deg)}
.why-item:nth-child(3)::before{width:36px;height:16px;border-radius:var(--r-pill)}
.why-item:nth-child(4)::before{border-radius:50% 50% 0 50%}
.why-item:nth-child(5)::before{border-radius:50%;background:transparent;box-shadow:inset 0 0 0 5px rgba(168,217,196,.18)}
.why-item:nth-child(6)::before{border-radius:4px 50% 50% 50%;transform:rotate(45deg)}
.why-list .fade:nth-child(2){transition-delay:.04s}
.why-list .fade:nth-child(3){transition-delay:.08s}
.why-list .fade:nth-child(4){transition-delay:.12s}
.why-list .fade:nth-child(5){transition-delay:.16s}
.why-list .fade:nth-child(6){transition-delay:.2s}


/* ---------- PLATFORM STRIP ----------
   Logos only, under a descriptive label ("Search-ready foundations for").
   Keep that label: rewording it to "Trusted by" or "Partners" would imply
   an endorsement these platforms never gave. */
.plats{text-align:center}
.plats-lbl{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
           color:var(--ink-soft);margin-bottom:1.1rem}
.plats-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
           gap:1rem 3rem}
.plat{display:inline-flex;align-items:center;opacity:.8;
      transition:opacity .2s ease}
.plat:hover{opacity:1}
.plat img{width:40px;height:40px;object-fit:contain;flex-shrink:0}

/* ---------- RADIO OPTION CARDS ---------- */
.qq-fs{border:0;padding:0;margin:0 0 .8rem}
.qq-fs legend{padding:0;font-size:.78rem;font-weight:700;color:var(--ink-mid);
              margin-bottom:.32rem;letter-spacing:.02em}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opt label{display:flex;align-items:center;padding:.72rem .9rem;border:1.5px solid var(--line);
           border-radius:var(--r-sm);cursor:pointer;background:var(--bone);height:100%;
           font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25;
           transition:border-color .18s,background .18s,box-shadow .18s}
.opt input:checked+label{border-color:var(--sage);background:var(--sage-50);color:var(--sage-deep);
                         box-shadow:0 0 0 3px rgba(0,117,74,.12)}
.opt input:focus-visible+label{box-shadow:0 0 0 3px rgba(0,117,74,.32)}
.opt label:hover{border-color:var(--sage-tint)}

/* ---------- EXAMPLE DESIGNS ----------
   Cards show a captured screenshot of each demo rather than the live page
   in an iframe: three iframes cost five Lighthouse points on the homepage,
   where a 35KB image costs nothing. Recapture after changing a demo. */
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ex{display:block;margin:0;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-xl);overflow:hidden}
.ex-frame{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist);
          border-bottom:1px solid var(--line)}
.ex-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.ex-meta{display:block;padding:1.15rem 1.25rem 1.3rem}
.ex-meta b{display:block;font-family:var(--f-head);font-weight:400;font-size:1.22rem;color:var(--ink);letter-spacing:-.02em}
.ex-meta small{display:block;font-size:.84rem;color:var(--tx-soft);margin-top:.15rem}
.ex-note{max-width:58ch;margin:1.8rem auto 0;text-align:center;font-size:.95rem;color:var(--tx-mid)}
@media (max-width:900px){.exs{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.exs{grid-template-columns:1fr}}

.verify{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
        max-width:880px;margin:2.6rem auto 0;padding:1.6rem 1.8rem;background:var(--paper);
        border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm)}
.verify h3{font-size:1.25rem;margin-bottom:.35rem}
.verify p{font-size:.93rem;color:var(--tx-mid);max-width:52ch;line-height:1.65}
@media (max-width:620px){.verify{padding:1.3rem 1.2rem}.verify .btn{width:100%}}

/* ---------- FAQ ---------- */
.faqs{max-width:46rem;margin:0 auto}
.faq{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;font-weight:700;font-size:1rem;color:var(--tx);list-style:none;position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.5rem;width:9px;height:9px;border-right:2px solid var(--tx-soft);border-bottom:2px solid var(--tx-soft);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg)}
.faq[open] summary{color:var(--brand)}
.faq-a{padding:0 1.5rem 1.3rem 0;color:var(--tx-mid);font-size:.95rem;line-height:1.72}

/* ---------- REVIEWS ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column}
.stars{display:flex;gap:2px;margin-bottom:.9rem}
.stars svg{width:16px;height:16px;color:var(--gold)}
.rev p{font-size:.94rem;color:var(--tx-mid);line-height:1.68;flex:1}
.rev-by{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-sf)}
.rev-av{width:38px;height:38px;border-radius:50%;background:var(--sage-100);color:var(--sage);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.rev-by b{display:block;font-size:.88rem;color:var(--tx)}
.rev-by span{display:block;font-size:.78rem;color:var(--tx-soft)}

/* ---------- CTA BAND ---------- */
.cta{background:linear-gradient(140deg,var(--sage-deep),var(--forest));color:#fff;text-align:center;padding:4.2rem 0}
.cta h2{color:#fff;margin-bottom:.9rem}
.cta p{color:rgba(255,255,255,.85);font-size:1.04rem;max-width:36rem;margin:0 auto 1.9rem;line-height:1.7}
.cta-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---------- PAGE HEAD (inner pages) ---------- */
.phead{background:linear-gradient(165deg,var(--sage-deep),var(--forest));color:#fff;padding:calc(var(--hdr-h) + 3.2rem) 0 3.2rem;position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 62% at 80% 18%,rgba(93,150,124,.3),transparent 72%);pointer-events:none}
.phead-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.phead h1{color:#fff;margin-bottom:.9rem;max-width:22ch}
.phead p{color:rgba(255,255,255,.86);font-size:1.05rem;line-height:1.7;max-width:44rem}
.phead .hero-btns{margin-top:1.7rem;margin-bottom:0}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:1.1rem}
.crumb a{color:rgba(255,255,255,.8);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span{color:rgba(255,255,255,.45)}

/* ---------- PROSE ---------- */
.prose{max-width:44rem;margin:0 auto}
.prose.wide{max-width:52rem}
.prose h2{margin:2.6rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.9rem 0 .6rem}
.prose p{color:var(--tx-mid);margin-bottom:1.1rem;font-size:1.02rem;line-height:1.78}
.prose ul,.prose ol{margin:0 0 1.3rem 1.3rem;color:var(--tx-mid)}
.prose li{margin-bottom:.55rem;line-height:1.72}
.prose a{color:var(--brand);font-weight:600}
.prose blockquote{border-left:3px solid var(--brand);padding:.3rem 0 .3rem 1.3rem;margin:1.6rem 0;font-style:italic;color:var(--tx-mid)}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.93rem}
.prose th,.prose td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.prose th{font-weight:700;color:var(--tx);background:var(--mist);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase}
.prose td{color:var(--tx-mid)}

/* callout */
.note{background:var(--sage-100);border-left:3px solid var(--sage);border-radius:0 var(--r-md) var(--r-md) 0;padding:1.2rem 1.4rem;margin:1.6rem 0}
.note p{margin:0;font-size:.95rem;color:var(--sage-darker)}
.note b{color:var(--ink)}

/* ---------- LOCAL PAGE BITS ---------- */
.hoods{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0}
.hood{background:var(--sage-50);border-radius:var(--r-sm);padding:.35rem .75rem;font-size:.82rem;color:var(--tx-mid);font-weight:600}

/* ---------- BLOG ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.post-meta{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin-bottom:.6rem}
.post h3{font-size:1.14rem;margin-bottom:.55rem;line-height:1.28}
.post p{font-size:.9rem;color:var(--tx-mid);line-height:1.62;flex:1}
.post-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.85rem;font-weight:700;color:var(--sage)}
.post-more svg{width:15px;height:15px;flex-shrink:0;transition:transform .18s}
.post:hover .post-more svg{transform:translateX(3px)}

/* ---------- FOOTER ---------- */
.ftr{background:#fff;color:var(--ink-mid);border-top:1px solid var(--line);padding:3.5rem 0 0;font-size:.9rem}
.ftr-in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}
.ftr-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-bottom:1rem}
.ftr-brand img{width:42px;height:42px;object-fit:contain}
.ftr-brand span{font-family:var(--f-head);font-weight:400;font-size:1.22rem;color:#000}
.ftr-desc{line-height:1.7;margin-bottom:1.3rem;max-width:30rem}
.ftr-nap{display:grid;gap:.6rem}
.ftr-nap div{display:flex;align-items:flex-start;gap:.6rem;line-height:1.5}
.ftr-nap svg{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:.15rem}
.ftr-nap a{color:#000;text-decoration:none}
.ftr-nap a:hover{text-decoration:underline}
.ftr-h{font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:#000;margin-bottom:1rem}
.ftr-ul{list-style:none}
.ftr-ul li{margin-bottom:.55rem}
.ftr-ul a{color:var(--ink-mid);text-decoration:none;transition:color .16s}
.ftr-ul a:hover{color:#000;text-decoration:underline}
.ftr-bot{max-width:var(--wrap);margin:2.8rem auto 0;padding:1.5rem;border-top:1px solid var(--line);text-align:center}
.ftr-copy{font-size:.84rem;color:var(--ink-soft)}
.ftr-areas{font-size:.76rem;color:var(--ink-soft);line-height:1.85;margin-top:.8rem}
.ftr-areas a{color:var(--ink-soft);text-decoration:none}
.ftr-areas a:hover{color:#000;text-decoration:underline}

/* ---------- MOBILE CALL BAR ---------- */
/* Floating call bar. Hidden until the hero has scrolled away, so the CTAs in
   the hero do their job first and the bar does not sit over content that is
   already asking for the same tap. pointer-events lets it float without
   blocking what is underneath. */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1200;
         padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
         gap:.6rem;pointer-events:none}
.callbar.show{display:flex;animation:cbUp .3s ease}
@keyframes cbUp{from{transform:translateY(120%)}to{transform:translateY(0)}}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
           padding:.9rem;border-radius:var(--r-pill);font-weight:700;font-size:.92rem;
           text-decoration:none;pointer-events:auto;box-shadow:0 8px 22px rgba(20,40,32,.28)}
.callbar svg{width:17px;height:17px}
.cb-call{background:var(--sage);color:#fff}
.cb-quote{background:var(--clay);color:#fff}

/* ---------- FADE-IN ---------- */
.fade{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ----------
   The header keeps its full navigation down to 860px by tightening up
   first: smaller links, then the phone number reduced to its icon. Only
   when even that will not fit does it become the mobile sheet. */
@media (max-width:1180px){
  .nav-lnk,.drop-tog{font-size:.86rem;padding:.45rem .5rem}
  .nav-cta{gap:.45rem;margin-left:.35rem}
  .nav-ph{font-size:.85rem;padding:.52rem .9rem}
  .nav-cta .btn{padding:.75rem 1.2rem;font-size:.89rem}
  .hdr-in{gap:.6rem}
}
@media (max-width:1010px){
  .nav-ph-n{display:none}
  .nav-ph{padding:.55rem .7rem}
  .nav-ph svg{width:17px;height:17px}
}

@media (max-width:1040px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ftr-in{grid-template-columns:1fr 1fr;gap:2rem}
  .drop-wide,.drop-areas{min-width:440px}
  .drop-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  /* Full-width sheet under the header. Aligned to the same 1.1rem gutter
     the page body uses, so menu items line up with the logo above them. */
  .nav{position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;align-items:stretch;
       background:var(--paper);border-bottom:1px solid var(--line);
       padding:.6rem 1.1rem 1.1rem;gap:0;box-shadow:var(--sh-lg);
       max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
       -webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:none}
  .nav.open{display:flex}
  /* Logo left, button right, as on their phone header. The nav is
     position:fixed on mobile, so it is out of this flow. */
  .hdr-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0}
  .logo{grid-column:1;justify-self:start}
  .mob-btn{display:flex;grid-column:2;justify-self:end;margin-right:0}

  /* The icon-only phone pill is for a tight desktop header. In the menu
     sheet the button is full width, so the number comes back. */
  .nav-ph-n{display:inline}
  .nav-ph{padding:.9rem 1.1rem;font-size:.95rem}
  .nav-ph svg{width:16px;height:16px}

  .logo img{width:38px;height:38px}

  /* Their menu sheet sets links in sentence case, larger than the
     uppercase desktop bar. */
  .nav-lnk,.drop-tog{width:100%;text-align:left;justify-content:space-between;
                     padding:.95rem .2rem;font-size:1.08rem;font-weight:600;
                     letter-spacing:0;text-transform:none;border-radius:0;
                     border-bottom:1px solid var(--line-soft)}
  .nav-lnk:hover,.drop-tog:hover{background:transparent;color:var(--sage)}
  .hasdrop{width:100%}

  /* Submenus expand inline. display:none cannot be transitioned, so the
     panel stays in flow and animates its height instead - that is what
     makes the chevron flip and the reveal read as one motion.
     max-height rather than grid 0fr because .drop has several children,
     and only the first grid row would collapse. The cap is a safe upper
     bound: .drop-cols carries its own 46vh scroll. */
  .drop{position:static;transform:none;box-shadow:none;
        border:none;border-radius:0;background:var(--sage-50);
        margin:0;padding:0 .2rem;min-width:0;display:block;
        max-height:0;opacity:0;visibility:hidden;overflow:hidden;
        /* Padding is deliberately not transitioned: main.js measures
           scrollHeight the moment the panel opens, and an animating padding
           would still read as 0 then, leaving the last ~14px clipped. */
        transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
  /* The desktop open/hover rule re-applies translateX(-50%), which drags the
     submenu half its width off the left edge once it is position:static.
     These need matching specificity to cancel it. */
  .hasdrop.open>.drop,.hasdrop:hover .drop,.drop:hover,.drop:focus-within{
    transform:none;left:auto;top:auto}
  .hasdrop:not(.open)>.drop{max-height:0;opacity:0;visibility:hidden;padding-top:0;padding-bottom:0}
  /* No max-height here: a fixed cap either clips long menus (Services needs
     ~1100px) or makes the timing wrong for short ones. main.js sets the
     exact pixel height from scrollHeight on open, so the animation is
     correctly timed and nothing is ever cut off. */
  .hasdrop.open>.drop{opacity:1;visibility:visible;padding:.35rem .2rem .55rem}
  .drop-wide,.drop-areas{min-width:0;display:block}
  .drop a{padding:.7rem .8rem;border-radius:var(--r-sm)}
  .drop a span{font-size:.94rem}
  .drop a small{font-size:.8rem}
  .drop-srch{padding:.3rem .3rem .5rem}
  .drop-srch svg{left:.95rem}
  .drop-cols{display:block;max-height:46vh;overflow-y:auto}
  .drop-cols .dh{padding:.7rem .8rem .25rem}
  .drop-cols a{padding:.6rem .8rem;font-size:.92rem}
  .drop-foot{margin-top:.2rem;padding-top:.4rem}
  .drop-foot a{padding:.7rem .8rem}

  /* Stack the two calls to action so neither is cramped or clipped. */
  .nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;margin:.9rem 0 0;width:100%}
  .nav-ph{width:100%;justify-content:center;padding:.9rem}
  .nav-cta .btn{width:100%;padding:.9rem}
  .hero-in{grid-template-columns:1fr;gap:2.2rem}
  /* The horizontal scrim only darkens the left, which is fine beside a
     desktop two-column hero. Stacked on a phone the copy sits over the
     bright sky, so darken the whole frame instead. */
  .hero::after{background:linear-gradient(180deg,rgba(20,48,42,.82) 0%,rgba(20,48,42,.68) 55%,rgba(20,48,42,.80) 100%)}
  .split,.split-wide{grid-template-columns:1fr;gap:2rem}
  .g3,.revs,.posts,.prices{grid-template-columns:1fr}
  /* Name and arrow on one line, description beneath, numeral holding the
     left margin so the column edge survives. */
  .srow{grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem 1.1rem;padding:1.4rem .4rem}
  .srow-t{grid-column:2}
  .srow-d{grid-column:2;font-size:.92rem}
  .srow-a{grid-column:3;grid-row:1;width:34px;height:34px}
  .srow-n{grid-row:1}
  .srow:hover{padding-left:.9rem}
  .plats-row{gap:.9rem 2rem}
  .plat img{width:34px;height:34px}
      .why-head{grid-template-columns:1fr;grid-template-rows:auto;max-width:720px}
  .why-head .eyebrow,.why-head h2,.why-head p{grid-column:1;grid-row:auto}
  .why-head h2{max-width:15ch}
  .why-head p{margin-top:1.15rem}
  .why-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;margin-top:2.5rem}
  .why-item,.why-item:nth-child(1),.why-item:nth-child(2),.why-item:nth-child(3),
  .why-item:nth-child(4),.why-item:nth-child(5),.why-item:nth-child(6){
    grid-column:auto;min-height:190px;border-right:0;border-bottom:0}
  .why-item:nth-child(odd){border-right:1px solid rgba(0,117,74,.16)}
  .why-item:nth-child(-n+4){border-bottom:1px solid rgba(0,117,74,.16)}
  .stats{grid-template-columns:repeat(2,1fr)}
    .plan.pop{order:-1}
}
@media (max-width:560px){
  .sec{padding:3.2rem 0}
  .hero{padding:calc(var(--hdr-h) + 2.5rem) 0 2.8rem}
  .g2,.g4{grid-template-columns:1fr}
  .srow{gap:.3rem .8rem;padding:1.25rem .2rem}
  .srow-n{width:1.9rem;font-size:.78rem}
  .why-list{grid-template-columns:1fr;margin-top:2rem;border-radius:20px}
  .why-item,.why-item:nth-child(1),.why-item:nth-child(2),.why-item:nth-child(3),
  .why-item:nth-child(4),.why-item:nth-child(5),.why-item:nth-child(6){
    grid-column:auto;min-height:0;padding:1.4rem 3.4rem 1.3rem 1.3rem;
    border-right:0;border-bottom:1px solid rgba(0,117,74,.16)}
  .why-item:last-child{border-bottom:0}
  .why-item::before{top:1.25rem;right:1.2rem;transform:scale(.86)}
  .why-item:nth-child(2)::before,.why-item:nth-child(6)::before{transform:rotate(45deg) scale(.86)}
  .ftr-in{grid-template-columns:1fr;gap:1.8rem}
  .steps{grid-template-columns:1fr}
  .hero-btns .btn,.cta-btns .btn{width:100%}
    .wrap,.sec-in,.hero-in,.phead-in,.ftr-in{padding-left:1.1rem;padding-right:1.1rem}
}

/* ---------- PRINT ---------- */
@media print{
  .hdr,.callbar,.cta,.ftr,.qq{display:none!important}
  body{background:#fff;color:#000}
  .hero,.phead{background:#fff!important;color:#000!important;padding:1rem 0}
  .hero h1,.phead h1{color:#000!important}
}

/* Source links for genuine, permissioned testimonials when supplied. */
.rev .review-source{font-family:var(--f-body);font-size:.78rem;font-style:normal;font-weight:700;color:var(--brand);margin-bottom:1rem}
.rev h3{font-size:1.3rem;margin-bottom:.8rem}
.rev p{font-style:normal}
.qq-note a{text-decoration:underline}