/* =====================================================================
   Sd. Ann's House Cleaning — Design System
   Palette:  Deep pine green (trust, care, fresh) + warm paper +
             honey-gold accent.  Type: Fraunces (display) + Figtree (body).
   Signature: draggable before/after reveal slider.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --paper:#FAF6EE;
  --paper-2:#F2EADB;
  --white:#FFFFFF;
  --ink:#1C2A23;
  --ink-soft:#485349;
  --pine:#1E4D3B;
  --pine-700:#163A2C;
  --pine-500:#2E7256;
  --sage:#DEE9E0;
  --sage-2:#EAF1EA;
  --gold:#C9891F;
  --gold-bright:#E0A93C;
  --gold-soft:#F5E7C6;
  --line:#E3DAC8;
  --danger:#9B3B2E;

  --shadow-sm:0 1px 2px rgba(28,42,35,.06);
  --shadow:0 8px 26px -12px rgba(28,42,35,.22);
  --shadow-lg:0 22px 50px -20px rgba(28,42,35,.30);

  --radius:14px;
  --radius-lg:22px;
  --radius-sm:9px;

  --container:1180px;
  --gutter:clamp(1.1rem,4vw,2.4rem);

  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Fraunces","Georgia",serif;

  --step-eyebrow:.78rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:1.02rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--pine-500);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--pine-700)}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.12;color:var(--ink);letter-spacing:-.01em;font-optical-sizing:auto}
strong{font-weight:700}

/* ---------- Accessibility helpers ---------- */
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px;border-radius:4px}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--pine);color:#fff;padding:.7rem 1.1rem;border-radius:8px;
  font-weight:700;transition:top .18s ease;text-decoration:none;
}
.skip-link:focus{top:12px;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.6rem,7.5vw,6.4rem)}
.section--tight{padding-block:clamp(2.4rem,5vw,3.6rem)}
.section--pine{background:var(--pine);color:#EDF3EE}
.section--pine h1,.section--pine h2,.section--pine h3{color:#fff}
.section--sage{background:var(--sage-2)}
.section--paper2{background:var(--paper-2)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.maxw-60{max-width:60ch}
.maxw-70{max-width:72ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--step-eyebrow);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--pine-500);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.section--pine .eyebrow{color:var(--gold-bright)}
.section--pine .eyebrow::before{background:var(--gold-bright)}
.eyebrow--center{justify-content:center}

h2.h-lg{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h2.h-md{font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--pine)}
p.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--ink-soft);line-height:1.6}
.section--pine p.lead,.section--pine p{color:#D6E3D9}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .12s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-primary{background:var(--pine);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--pine-700);color:#fff;box-shadow:0 16px 32px -14px rgba(22,58,44,.6)}
.btn-gold{background:var(--gold-bright);color:#2A1E06;box-shadow:0 10px 24px -12px rgba(201,137,31,.9)}
.btn-gold:hover{background:#EBB24A;color:#2A1E06;box-shadow:0 16px 34px -12px rgba(201,137,31,.75)}
.btn-outline{background:transparent;color:var(--pine);border-color:var(--pine)}
.btn-outline:hover{background:var(--pine);color:#fff}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:#fff;color:var(--pine)}
.btn-lg{padding:1.1rem 1.9rem;font-size:1.06rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-row--center{justify-content:center}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--pine-700);color:#DDE8DF;font-size:.86rem}
.topbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1.2rem;padding-block:.5rem}
.topbar a{color:#fff;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--gold-bright)}
.topbar .tb-badges{display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:center}
.tb-badge{display:inline-flex;align-items:center;gap:.35rem;color:#CFE0D5}
.tb-badge svg{width:15px;height:15px;color:var(--gold-bright)}
.topbar .tb-hours{color:#B9CcC0}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.brand__logo{height:clamp(42px,6vw,54px);width:auto;display:block}
.footer-logo{display:inline-block;background:#fff;border-radius:14px;padding:.65rem .85rem;box-shadow:var(--shadow-sm)}
.footer-logo img{height:60px;width:auto;display:block}
.media-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff;background:#fff;margin:0}
.media-frame img{display:block;width:100%;height:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__mark{width:44px;height:44px;border-radius:12px;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.35rem;box-shadow:var(--shadow-sm);flex:none}
.brand__mark span{margin-top:-2px}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.34rem;color:var(--pine-700);line-height:1;letter-spacing:-.005em}
.brand__sub{font-family:var(--font-body);font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pine-500);margin-top:4px;white-space:nowrap}
.brand__tag{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pine-500)}

.nav__links{display:flex;align-items:center;gap:.15rem;list-style:none;padding:0}
.nav__links a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.96rem;
  padding:.5rem .72rem;border-radius:8px;transition:background .15s ease,color .15s ease;
  display:inline-block;
}
.nav__links a:hover{background:var(--sage);color:var(--pine-700)}
.nav__links a[aria-current="page"]{color:var(--pine-700)}
.nav__links a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--gold);border-radius:2px;margin-top:2px}

.nav__right{display:flex;align-items:center;gap:1.3rem}
.nav__phone{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;color:var(--pine-700);text-decoration:none;font-size:1rem;white-space:nowrap}
.nav__phone svg{width:18px;height:18px;color:var(--gold)}
.nav__phone:hover{color:var(--pine)}

.nav-toggle{display:none;background:var(--pine);color:#fff;border:0;width:46px;height:46px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* ---------- Rating pill ---------- */
.stars{color:var(--gold-bright);letter-spacing:.06em;font-size:1rem;line-height:1}
.rating-pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;box-shadow:var(--shadow-sm);font-size:.9rem;font-weight:600;color:var(--ink)}
.rating-pill .num{font-weight:800}
a.rating-pill{text-decoration:none;color:var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .18s ease}
a.rating-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.section--pine .rating-pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;background:
    radial-gradient(120% 90% at 88% 0%,rgba(46,114,86,.10),transparent 60%),
    var(--paper);
  overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.4rem)}
.hero__title{font-size:clamp(2.2rem,5.4vw,3.9rem);letter-spacing:-.025em;line-height:1.04}
.hero__title em{font-style:normal;color:var(--pine);background:linear-gradient(transparent 62%,rgba(224,169,60,.45) 0);padding-inline:.06em;border-radius:2px}
.hero__sub{margin-top:1.15rem;font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--ink-soft);max-width:44ch}
.hero__meta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center}
.hero__cta{margin-top:1.7rem}
.hero__trust{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font-size:.9rem;color:var(--ink-soft);font-weight:600}
.hero__trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero__trust svg{width:17px;height:17px;color:var(--pine-500)}

/* Hero background variants */
.hero--photo{background:#12201a}
.hero--photo::before{content:"";position:absolute;inset:0;background:var(--hero-img,url('../images/kitchen-hero.jpg')) center/cover no-repeat;z-index:0}
.hero--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,27,21,.93) 0%,rgba(15,27,21,.82) 36%,rgba(15,27,21,.50) 66%,rgba(15,27,21,.26) 100%);z-index:0}
.hero--photo .container{position:relative;z-index:1;grid-template-columns:1fr;min-height:clamp(460px,64vh,620px);align-content:center}
.hero--photo .hero__text{max-width:600px}
.hero--photo .eyebrow,.hero--photo .hero__title{color:#fff}
.hero--photo .hero__title em{color:var(--gold-bright);background:none}
.hero--photo .hero__sub{color:#E8F0EA}
.hero--photo .hero__trust{color:#DCEAE0}
.hero--photo .hero__trust svg{color:var(--gold-bright)}
.hero--photo .eyebrow::before{background:var(--gold-bright)}

.hero--logo{background:#fff;overflow:hidden}
.hero--logo::before{content:"";position:absolute;right:1%;top:50%;transform:translateY(-50%);width:min(560px,47%);aspect-ratio:1284/813;background:var(--hero-img) center/contain no-repeat;z-index:0}
.hero--logo .container{position:relative;z-index:1;grid-template-columns:1fr;min-height:clamp(400px,52vh,520px);align-content:center}
.hero--logo .hero__text{max-width:580px}

/* Placeholder image blocks (swap for real <img> once photos are added) */
.ph{position:relative;display:grid;place-items:center;text-align:center;
  background:
    repeating-linear-gradient(135deg,rgba(46,114,86,.05) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,var(--sage),#cfe0d4);
  color:var(--pine-700);border-radius:var(--radius);overflow:hidden;min-height:180px;padding:1rem}
.ph::after{content:"";position:absolute;inset:0;border:2px dashed rgba(30,77,59,.28);border-radius:var(--radius);pointer-events:none}
.ph__inner{position:relative;z-index:1;max-width:26ch}
.ph__icon{width:34px;height:34px;margin:0 auto .5rem;color:var(--pine)}
.ph__label{font-weight:800;font-size:.82rem;letter-spacing:.02em}
.ph__note{font-size:.72rem;color:var(--ink-soft);margin-top:.25rem;font-weight:600}
.ph--fill{position:absolute;inset:0;min-height:0;border-radius:0}
.ph--fill::after{border-radius:0}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:1.3rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;height:100%}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card__icon{width:52px;height:52px;border-radius:13px;background:var(--sage);color:var(--pine);display:grid;place-items:center;margin-bottom:1rem}
.card__icon svg{width:27px;height:27px}
.card h3{font-size:1.28rem;margin-bottom:.45rem}
.card p{color:var(--ink-soft);font-size:.98rem}
.card__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:700;color:var(--pine);text-decoration:none;font-size:.95rem}
.card__link svg{width:16px;height:16px;transition:transform .15s ease}
.card--link:hover .card__link svg{transform:translateX(4px)}

/* Service card with header strip */
.svc-card{display:flex;flex-direction:column}
.svc-card ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.4rem}
.svc-card li{position:relative;padding-left:1.5rem;font-size:.94rem;color:var(--ink-soft)}
.svc-card li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:3px;background:var(--gold-soft);border:2px solid var(--gold)}
.svc-card .card__link{margin-top:auto;padding-top:1rem}
/* Photo service cards (image-topped) */
.svc-card--photo{padding:0;overflow:hidden}
.svc-card--photo .svc-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--sage)}
.svc-card--photo .svc-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1);transform-origin:center;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.svc-card--photo:hover .svc-card__media img{transform:scale(1.05)}
.svc-card--photo .svc-card__body{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.svc-card--photo .svc-card__body h3{margin-top:0}
@media (prefers-reduced-motion:reduce){.svc-card--photo:hover .svc-card__media img{transform:scale(1)}}

/* ---------- Card link fix + cleaner hierarchy (kill inherited underline) ---------- */
.card,a.card{text-decoration:none;color:inherit}
.card h3{font-size:1.32rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-bottom:.5rem;text-wrap:balance}
.card--link h3{transition:color .16s ease}
.card--link:hover h3{color:var(--pine)}
.card p{line-height:1.55}
.svc-card li{line-height:1.4}
.card__link{text-decoration:none}
.card__link:hover{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.22em}

/* ---------- 3D tilt on cards — half-strength port of the React TiltCard ---------- */
.tilt-active{position:relative;transition:transform .2s ease-out;will-change:transform;transform-style:preserve-3d}
.tilt-glare{display:none} /* spotlight removed — distracting/washed out text on light cards */

/* ---------- Pull quote (service pages) ---------- */
.pullquote{max-width:840px;margin-inline:auto;text-align:center}
.pullquote p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,3.2vw,2.05rem);line-height:1.32;color:#fff;letter-spacing:-.01em;text-wrap:balance;margin:0}
.pullquote p::before{content:"\201C"}
.pullquote p::after{content:"\201D"}
.pullquote cite{display:block;margin-top:1rem;font-style:normal;font-weight:700;color:var(--gold-bright);font-size:.95rem;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.tilt-active{transition:none}.tilt-active:hover .tilt-glare{opacity:0}}

/* ---------- Feature / value rows ---------- */
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature__icon{flex:none;width:46px;height:46px;border-radius:12px;background:var(--pine);color:#fff;display:grid;place-items:center}
.feature__icon svg{width:23px;height:23px}
.feature h3{font-size:1.15rem;margin-bottom:.25rem}
.feature p{color:var(--ink-soft);font-size:.95rem}
.section--pine .feature__icon{background:rgba(255,255,255,.14);color:var(--gold-bright)}
.section--pine .feature p{color:#CDDDD2}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:1.2rem}
.step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 1.4rem 4.3rem;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1.2rem;top:1.25rem;width:40px;height:40px;border-radius:11px;background:var(--pine);color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.25rem;display:grid;place-items:center}
.step h3{font-size:1.16rem;margin-bottom:.2rem}
.step p{color:var(--ink-soft);font-size:.95rem}

/* ---------- Reviews ---------- */
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);break-inside:avoid;height:100%;display:flex;flex-direction:column}
.review__stars{color:var(--gold-bright);font-size:1.05rem;letter-spacing:.05em;margin-bottom:.7rem}
.review__body{color:var(--ink);font-size:.98rem;line-height:1.6}
.review__body::before{content:"\201C";font-family:var(--font-display);color:var(--gold);font-size:2.2rem;line-height:0;vertical-align:-.35em;margin-right:.1em}
.review__meta{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.7rem}
.review__avatar{width:40px;height:40px;border-radius:999px;background:var(--pine);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none;font-family:var(--font-display)}
.review__name{font-weight:700;font-size:.94rem;line-height:1.1}
.review__date{font-size:.8rem;color:var(--ink-soft)}
.reviews-masonry{columns:3;column-gap:1.3rem}
.reviews-masonry .review{margin-bottom:1.3rem}
/* Expandable review bodies */
.review__more{display:none}
.review__body.is-expanded .review__more{display:inline}
.review__toggle{display:inline;margin-left:.15em;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--pine);cursor:pointer;-webkit-appearance:none;appearance:none}
.review__toggle::before{content:"\2026 ";color:var(--ink);font-weight:400}
.review__body.is-expanded .review__toggle::before{content:" "}
.review__toggle .review__toggle-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:transparent;transition:text-decoration-color .15s ease}
.review__toggle:hover .review__toggle-label,.review__toggle:focus-visible .review__toggle-label{text-decoration-color:currentColor}
.review__toggle:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:3px}
/* Floating review tag */
.rq{position:fixed;right:1.25rem;bottom:1.25rem;z-index:115;font-family:var(--font-body);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transform-origin:bottom right;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility .45s}
.rq.is-ready{opacity:1;visibility:visible;transform:none}
.rq__btn{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .95rem .5rem .5rem;background:var(--pine);color:#fff;border:0;border-radius:999px;box-shadow:0 10px 24px -10px rgba(28,42,35,.55);cursor:pointer;font-weight:700;font-size:.9rem;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease}
.rq__btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px -10px rgba(28,42,35,.6)}
.rq__btn:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.rq__bang{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--gold-bright);color:var(--pine-700);font-size:1.2rem;font-weight:900;line-height:1;flex:none}
.rq__label{white-space:nowrap;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.rq__panel{position:absolute;right:0;bottom:calc(100% + .65rem);width:322px;max-width:82vw;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 48px -18px rgba(28,42,35,.5);padding:1.15rem 2.5rem 1rem;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s}
.rq.is-open .rq__panel{opacity:1;visibility:visible;transform:none}
.rq__stage{min-height:100px;display:flex;flex-direction:column;justify-content:center}
.rq__stars{color:var(--gold-bright);font-size:1rem;letter-spacing:.06em;margin-bottom:.4rem}
.rq__quote{font-family:var(--font-display);font-weight:500;font-size:1.1rem;line-height:1.4;color:var(--ink);margin:0 0 .5rem}
.rq__by{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.rq__nav{position:absolute;top:calc(50% + .3rem);transform:translateY(-50%);width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--pine);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s ease}
.rq__nav:hover{background:var(--sage);color:var(--pine-700)}
.rq__nav:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.rq__prev{left:.4rem}
.rq__next{right:.4rem}
.rq__all{display:block;text-align:center;margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--ink-soft);text-decoration:none}
.rq__all:hover{color:var(--pine)}
.rq__close{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:999px;border:0;background:var(--sage);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:1}
.rq__close:hover{background:var(--sage-2)}
@keyframes rqWipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes rqRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rq__stage.is-anim .rq__quote{animation:rqWipe .55s cubic-bezier(.2,.7,.3,1) both}
.rq__stage.is-anim .rq__by{animation:rqRise .5s ease .12s both}
@media (prefers-reduced-motion:no-preference){
  .rq__bang{animation:rqPulse 2s ease-in-out 3}
  @keyframes rqPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,167,74,.6)}50%{box-shadow:0 0 0 9px rgba(214,167,74,0)}}
}
@media (max-width:1180px){.rq{bottom:calc(74px + .9rem)}}
@media (prefers-reduced-motion:reduce){.rq,.rq__btn,.rq__panel{transition:none}.rq{transform:none}.rq__stage.is-anim .rq__quote,.rq__stage.is-anim .rq__by{animation:none}}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-grid .ph{aspect-ratio:4/3;min-height:0}
.gallery-grid .ph--tall{grid-row:span 2;aspect-ratio:auto}

/* ---------- Stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.stat__num{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,2.8vw,2.3rem);color:var(--pine);line-height:1}
.stat__label{margin-top:.4rem;font-size:.88rem;color:var(--ink-soft);font-weight:600}
.section--pine .stat__num{color:#fff}
.section--pine .stat__label{color:#CBDCCF}
.stat .stars{font-size:1.5rem;display:block}

/* ---------- Split / media rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.split--media-first .split__media{order:-1}
.split__media .ph{aspect-ratio:4/3;min-height:0;height:100%}

/* ---------- Checklist ---------- */
.checklist{list-style:none;padding:0;display:grid;gap:.7rem}
.checklist li{position:relative;padding-left:2rem;color:var(--ink);font-size:1rem}
.checklist li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:6px;background:var(--pine);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/68% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/68% no-repeat;}
.checklist--gold li::before{background:var(--gold)}
.section--pine .checklist li{color:#EAF3EC}
.section--pine .checklist li::before{background:var(--gold-bright)}
.checklist--2{grid-template-columns:1fr 1fr;gap:.6rem 1.6rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;max-width:820px;margin-inline:auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.3rem;font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:20px;height:20px;flex:none;background:var(--pine);transition:transform .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z'/%3E%3C/svg%3E") center/contain no-repeat;}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--pine)}
.faq__body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:.98rem}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--pine),var(--pine-700));color:#fff;border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.4rem);text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(224,169,60,.14);top:-140px;right:-90px}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);position:relative}
.cta-band p{color:#D7E4DA;max-width:52ch;margin:.8rem auto 0;position:relative}
.cta-band .btn-row{position:relative;margin-top:1.6rem}

/* ---------- Trust badges strip ---------- */
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.86rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.badge svg{width:18px;height:18px;color:var(--pine-500)}
.badge--gold svg{color:var(--gold)}

/* ---------- Forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem;color:var(--ink)}
.field .req{color:var(--danger)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pine-500);box-shadow:0 0 0 3px rgba(46,114,86,.18)}
.field textarea{min-height:120px;resize:vertical}
.field__hint{font-size:.8rem;color:var(--ink-soft);margin-top:.3rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.consent input{width:auto;margin-top:.2rem;flex:none;width:18px;height:18px;accent-color:var(--pine)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:.9rem;text-align:center}

/* ---------- Contact info list ---------- */
.info-list{list-style:none;padding:0;display:grid;gap:1.15rem}
.info-list li{display:flex;gap:.9rem;align-items:flex-start}
.info-list .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--sage);color:var(--pine);display:grid;place-items:center}
.info-list .ic svg{width:22px;height:22px}
.info-list .k{font-weight:800;font-size:.98rem;color:var(--ink)}
.info-list .v{color:var(--ink-soft);font-size:.95rem}
.info-list a{font-weight:700;text-decoration:none}

/* ---------- Breadcrumb / page hero ---------- */
.page-hero{background:
    radial-gradient(100% 120% at 100% 0,rgba(46,114,86,.10),transparent 55%),
    var(--paper-2);
  border-bottom:1px solid var(--line);padding-block:clamp(2.2rem,5vw,3.4rem)}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:.7rem}
.breadcrumb a{color:var(--pine-500);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:20ch}
/* Accent one word in gold (e.g. the Work hero heading) */
.hl-gold{color:var(--gold-bright)}
.page-hero p{margin-top:.9rem;max-width:60ch;color:var(--ink-soft);font-size:1.08rem}

/* ---------- Pill list / tags ---------- */
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-weight:600;font-size:.86rem;color:var(--ink)}
.section--pine .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#EAF3EC}

/* ---------- Prose ---------- */
.prose{max-width:760px}
.prose h2{margin-top:2.2rem;margin-bottom:.7rem;font-size:1.55rem}
.prose h3{margin-top:1.5rem;margin-bottom:.4rem;font-size:1.2rem}
.prose p{margin-bottom:1rem;color:var(--ink-soft)}
.prose ul{margin:0 0 1rem 1.1rem;color:var(--ink-soft)}
.prose li{margin-bottom:.4rem}
.prose a{font-weight:600}

/* ---------- Verify flag ---------- */
.vflag{display:inline-block;background:var(--gold-soft);color:#6b4a08;border:1px dashed var(--gold);border-radius:6px;padding:0 .35rem;font-size:.78em;font-weight:700;letter-spacing:.02em}

/* ---------- Footer ---------- */
.site-footer{background:var(--pine-700);color:#C7D8CC;padding-top:clamp(2.6rem,5vw,3.6rem)}
.site-footer a{color:#E7EFE8;text-decoration:none}
.site-footer a:hover{color:var(--gold-bright)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2rem}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__mark{background:rgba(255,255,255,.12)}
.footer-brand p{color:#AEC3B4;font-size:.9rem;margin-top:.9rem;max-width:34ch}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:.9rem;font-family:var(--font-body);font-weight:800;letter-spacing:.02em}
.footer-col ul{list-style:none;padding:0;display:grid;gap:.5rem;font-size:.92rem}
.footer-contact li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;margin-bottom:.6rem}
.footer-contact svg{width:17px;height:17px;color:var(--gold-bright);flex:none;margin-top:.15rem}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.footer-badges .fb{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:.35rem .6rem;font-size:.76rem;font-weight:700;color:#DDEAE0}
.footer-badges .fb svg{width:14px;height:14px;color:var(--gold-bright)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-block:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-size:.83rem;color:#9FB6A6}
.footer-bottom a{color:#C7D8CC}
.footer-bottom nav{display:flex;gap:1.1rem;flex-wrap:wrap}

/* ---------- Sticky mobile call bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:1px solid var(--line);padding:.55rem .75rem;box-shadow:0 -6px 20px -10px rgba(28,42,35,.3);gap:.55rem}
.mobile-bar .btn{flex:1;padding:.85rem .5rem;font-size:.95rem}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:1.8rem}
.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:1.8rem}
.hide{display:none}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* Hero entrance fade on load (pure CSS, no JS, degrades safe) */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__text > *,.page-hero .container > *{animation:heroFadeUp .7s cubic-bezier(.2,.7,.3,1) both}
.hero__text > *:nth-child(2),.page-hero .container > *:nth-child(2){animation-delay:.08s}
.hero__text > *:nth-child(3),.page-hero .container > *:nth-child(3){animation-delay:.16s}
.hero__text > *:nth-child(4),.page-hero .container > *:nth-child(4){animation-delay:.24s}
.hero__text > *:nth-child(5),.page-hero .container > *:nth-child(5){animation-delay:.32s}
.hero__text > *:nth-child(6),.page-hero .container > *:nth-child(6){animation-delay:.40s}
@media (prefers-reduced-motion:reduce){.hero__text > *,.page-hero .container > *{animation:none}}
/* Values grid — 4 cards flanking a tall standout card (center) */
.values-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;grid-template-rows:1fr 1fr;gap:1.2rem;align-items:stretch}
.values-grid > :nth-child(1){grid-column:1;grid-row:1}
.values-grid > :nth-child(2){grid-column:1;grid-row:2}
.values-grid > :nth-child(3){grid-column:2;grid-row:1 / 3}
.values-grid > :nth-child(4){grid-column:3;grid-row:1}
.values-grid > :nth-child(5){grid-column:3;grid-row:2}
.value-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.55rem;transition:transform .16s ease,box-shadow .16s ease}
.value-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.value-card__icon{width:46px;height:46px;border-radius:12px;background:var(--sage);color:var(--pine);display:grid;place-items:center;flex:none}
.value-card__icon svg{width:24px;height:24px}
.value-card h3{font-size:1.18rem}
.value-card p{color:var(--ink-soft);font-size:.98rem;line-height:1.55;margin:0}
.value-card--hero{background:linear-gradient(160deg,var(--pine),var(--pine-700));color:#fff;justify-content:flex-start;padding:clamp(1.7rem,2.6vw,2.3rem);box-shadow:0 24px 46px -22px rgba(30,77,59,.55)}
.value-card--hero .value-card__label{align-self:flex-start;background:var(--gold-bright);color:var(--pine-700);font-family:var(--font-body);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .85rem;border-radius:999px;margin-bottom:.5rem}
.value-card--hero .value-card__icon{width:60px;height:60px;background:var(--gold-bright);color:var(--pine-700)}
.value-card--hero .value-card__icon svg{width:32px;height:32px}
.value-card--hero h3{color:var(--gold-bright);font-size:clamp(1.5rem,2.4vw,2rem);text-shadow:0 0 14px rgba(224,169,60,.35)}
.value-card--hero p{color:#D7E4DA;font-size:1.06rem;line-height:1.55}
@media (max-width:820px){
  .values-grid{grid-template-columns:1fr;grid-template-rows:none;gap:1rem}
  .values-grid > *{grid-column:auto !important;grid-row:auto !important}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card--link:hover{transform:none}
}

/* ---------- Typography niceties ---------- */
h1,h2,h3{text-wrap:balance}
p.lead,.prose p,.hero__sub,.faq__body,.card p,.feature p{text-wrap:pretty}

/* ---------- Media frame: team / owner photo ---------- */
.media-frame--team{position:relative;border-color:#fff}
.media-frame--team img{aspect-ratio:1284/1022;object-fit:cover;width:100%}
.media-frame--team::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,42,35,.06);
}
/* a warm accent tucked behind the frame for depth + rhythm — HOMEPAGE TEAM PHOTO ONLY */
#team .split__media{position:relative}
#team .split__media .media-frame--team{z-index:1}
#team .split__media::before{
  content:"";position:absolute;z-index:0;width:46%;aspect-ratio:1;
  right:-14px;bottom:-16px;border-radius:var(--radius-lg);
  background:radial-gradient(circle at 30% 30%,var(--gold-soft),transparent 70%);
  opacity:.7;
}
@media (max-width:900px){.split__media::before{display:none}}

/* ---------- Rhythm: let key sections breathe more than the default ---------- */
.section--spacious{padding-block:clamp(4.4rem,9vw,7.6rem)}
#team.section{padding-block:clamp(4rem,8vw,7rem)}
.faq details+details{margin-top:0}

/* ---------- Custom before/after animation slot (homepage) ---------- */
/* A branded placeholder box the owner drops their own animation into. */
.anim-slot{
  position:relative;max-width:480px;margin-inline:auto;
  aspect-ratio:var(--slot-ratio,4/3);
  border-radius:var(--radius-lg);overflow:hidden;
  border:2px dashed rgba(30,77,59,.32);
  background:
    repeating-linear-gradient(135deg,rgba(46,114,86,.05) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,var(--sage),#cfe0d4);
  display:grid;place-items:center;text-align:center;box-shadow:var(--shadow);
}
.anim-slot__inner{padding:1.5rem;max-width:32ch}
.anim-slot__inner svg{width:46px;height:46px;margin:0 auto .65rem;color:var(--pine);opacity:.9}
.anim-slot__title{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--pine-700);line-height:1.2}
.anim-slot__note{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem;font-weight:600}
.anim-slot__note code{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:.05em .4em;font-size:.9em;color:var(--pine-700)}

/* ---------- Gallery: real photos fill the grid slots ---------- */
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block;background:var(--sage)}
.gallery-grid img.g-tall{grid-row:span 2;aspect-ratio:auto;height:100%}
@media (max-width:900px){.gallery-grid img.g-tall{grid-row:auto;aspect-ratio:4/3;height:auto}}

/* ---------- De-templated section headers (frontend-design + impeccable) ----------
   Replace the reflexive uppercase eyebrow above every section with one quiet
   gold rule — a calmer, more intentional brand signature. */
.eyebrow--center{display:none}
.center.mb-3 > h2{position:relative;padding-top:1.15rem}
.center.mb-3 > h2::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:3px;border-radius:3px;background:var(--gold)}
.section--pine .center.mb-3 > h2::before{background:var(--gold-bright)}

/* ---------- Interaction QA (ui-ux-pro-max) ---------- */
.btn,.nav-toggle,.nav__phone,summary{touch-action:manipulation}
@media (hover:hover){.card--link,.btn{will-change:transform}}

/* ---------- Header: tighter, brand left / nav+phone+CTA hard right, no wrapping ---------- */
.nav__links a{white-space:nowrap;padding:.5rem .6rem}
.nav__links{gap:.05rem}
.nav__right{gap:.9rem}
.brand{margin-right:auto} /* pin brand left, push everything else right */
/* full-width header so the brand sits at the far left edge and the nav/CTA at the far right */
.site-header .container,.topbar .container{max-width:none}

/* Belt-and-suspenders: keep any off-canvas/overflow element from ever leaking a horizontal scrollbar */
html{overflow-x:clip}

/* ---------- Service Areas: clean map + city chips (replaces the pin soup) ---------- */
.areas-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:stretch}
.areas-map{position:relative;z-index:0;isolation:isolate;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff;min-height:360px}
.areas-map iframe{border:0;width:100%;height:100%;min-height:360px;display:block}
.area-chips{list-style:none;padding:0;margin:1.15rem 0 0;display:flex;flex-wrap:wrap;gap:.55rem}
.area-chips li{display:inline-flex;align-items:center;gap:.45rem;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:600;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.area-chips li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.area-chips li.is-core::before{background:var(--pine-500)}
.area-note{margin-top:1.25rem;color:var(--ink-soft);font-size:.98rem}
@media (max-width:820px){.areas-layout{grid-template-columns:1fr}.areas-map{min-height:300px;order:-1}}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .reviews-masonry{columns:2}
}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}
  .hero .container{grid-template-columns:1fr;padding-block:2.4rem}
  .hero__media{max-width:560px}
  .split{grid-template-columns:1fr;gap:1.8rem}
  .split--media-first .split__media{order:0}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid .ph--tall{grid-row:auto;aspect-ratio:4/3}
  .checklist--2{grid-template-columns:1fr}
}
@media (max-width:1180px){
  /* Mobile nav — collapse earlier so nothing gets clipped */
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);
    background:var(--paper);flex-direction:column;align-items:stretch;gap:.2rem;
    padding:5.2rem 1.3rem 2rem;box-shadow:var(--shadow-lg);
    transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s;z-index:105;overflow-y:auto;
  }
  .nav__links.open{transform:translateX(0);visibility:visible}
  .nav__links a{padding:.85rem .9rem;font-size:1.06rem;border-radius:10px}
  .nav__links a:hover{background:var(--sage)}
  .nav__links li{border-bottom:1px solid var(--line)}
  .nav-toggle{display:inline-flex;z-index:106}
  .nav__phone{display:none}
  .nav__right .btn{display:none}
  .hero--photo::after{background:linear-gradient(180deg,rgba(16,28,22,.72),rgba(16,28,22,.9))}
  .hero--logo::before{opacity:.10;right:2%;width:82%}
  .nav-backdrop{position:fixed;inset:0;background:rgba(20,32,26,.5);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:104}
  .nav-backdrop.show{opacity:1;visibility:visible}
  .mobile-bar{display:flex}
  body.has-mobile-bar{padding-bottom:74px}
  .topbar .tb-hours{display:none}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .reviews-masonry{columns:1}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .btn-row .btn{flex:1}
  .topbar .container{justify-content:center}
  .topbar .tb-badges{display:none}
}
@media (max-width:400px){
  .gallery-grid{grid-template-columns:1fr}
  .brand__tag{display:none}
}