/* ============================================================
   Rolling Lawns — site.css
   Heritage-editorial landscaping system. Forest green + cream +
   one harvest-gold accent. Spectral display / Inter body.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');

:root{
  --bg:      #fbfaf4;
  --surface: #ffffff;
  --cream:   #f6ecd2;
  --cream-2: #efe2c0;
  --fg:      #14240f;
  --muted:   #4f5f49;
  --border:  #e4e0d2;
  --pine:    #122611;   /* dominant brand */
  --pine-2:  #1b3a18;
  --fern:    #2c5a2a;   /* links / secondary */
  --leaf:    #4f9a3f;
  --bark:    #7a5a2e;
  --accent:  #c79a3e;   /* harvest gold — rationed */
  --accent-ink:#8a6a22;

  --font-display:'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 72px);
  --radius: 8px;
  --shadow: 0 1px 2px rgba(18,38,17,.05), 0 12px 30px -16px rgba(18,38,17,.18);
  --shadow-lg: 0 30px 70px -30px rgba(18,38,17,.45);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html{background-color:var(--bg)}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip; /* clip (not hidden) so position:sticky header keeps working */
}
img{max-width:100%;display:block}
a{color:var(--fern);text-decoration:none}
::selection{background:var(--leaf);color:#fff}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.02em;color:var(--fg)}
h1{font-size:clamp(40px,6vw,76px)}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(21px,2.4vw,29px);letter-spacing:-.015em}
h4{font-size:19px;letter-spacing:-.01em}
p{text-wrap:pretty}
.lead{font-size:clamp(18px,2.1vw,22px);color:var(--muted);line-height:1.55;max-width:60ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:12.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent-ink);
  font-family:var(--font-body);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow.on-dark{color:var(--accent)}
.eyebrow.center{justify-content:center}
/* contrast fix: the coverage panel's tan background (#e4d8bd) fails 4.5:1
   against the default --accent-ink (#8a6a22, ~3.57:1); darkened only in this
   scoped context (~5.05:1). Global .eyebrow on dark/paper backgrounds is
   untouched. */
.cov-panel .eyebrow{color:#6f5218}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,120px)}
.section.tight{padding-block:clamp(48px,6vw,80px)}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:18px}
.section-head h2{margin-top:14px}

.bg-pine{background-color:var(--pine);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><path d='M0 45 L22.5 22.5 L45 45 L67.5 22.5 L90 45' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/></svg>");
  color:#eaf0e6}
.bg-pine h1,.bg-pine h2,.bg-pine h3,.bg-pine h4{color:#fff}
.bg-pine .lead{color:#b9c8b2}
.bg-pine p{color:#c4d2bd}
.bg-cream{background-color:var(--cream);
  background-image:repeating-linear-gradient(15deg,transparent 0 13px,color-mix(in srgb,var(--bark) 8%,transparent) 13px 14px)}
.bg-paper{background-color:var(--bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><g fill='none' stroke='%232c5a2a' stroke-opacity='0.05' stroke-width='1'><path d='M0 35 Q60 12 120 35 T240 35'/><path d='M0 80 Q60 58 120 80 T240 80'/><path d='M0 125 Q60 103 120 125 T240 125'/></g></svg>")}

/* per-section pattern overrides (place a class on a section to vary it) */
.tex-dots{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='1.1' fill='%232c5a2a' fill-opacity='0.07'/></svg>")}
.tex-chevron{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84'><path d='M0 42 L21 21 L42 42 L63 21 L84 42' fill='none' stroke='%232c5a2a' stroke-opacity='0.05' stroke-width='1'/></svg>")}
.tex-topo{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><g fill='none' stroke='%232c5a2a' stroke-opacity='0.05' stroke-width='1'><path d='M0 35 Q60 12 120 35 T240 35'/><path d='M0 80 Q60 58 120 80 T240 80'/><path d='M0 125 Q60 103 120 125 T240 125'/></g></svg>")}
.tex-stitch{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='90'><rect x='23' y='18' width='8' height='12' rx='3' fill='%232c5a2a' fill-opacity='0.055'/><rect x='23' y='60' width='8' height='12' rx='3' fill='%232c5a2a' fill-opacity='0.055'/></svg>")}

/* mowing-stripe motif */
.stripes{
  height:14px;width:100%;
  background:repeating-linear-gradient(90deg,
    var(--leaf) 0 28px, var(--fern) 28px 56px);
  opacity:.9;
}
.stripes.thin{height:14px}

/* ---- buttons ---- */
.btn{
  --bx:#122611;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:15.5px;
  letter-spacing:.01em;line-height:1;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease), background .18s, box-shadow .18s, color .18s, scale .12s var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--pine);color:#fff}
.btn-primary:hover{background:#0c1c0b;transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(18,38,17,.6)}
.btn-gold{background:var(--accent);color:#241a04}
.btn-gold:hover{background:#d4a949;transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(150,110,20,.55)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--pine);background:var(--surface);transform:translateY(-2px)}
.btn-ghost.on-dark{background:var(--pine-2);color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost.on-dark:hover{background:var(--pine);color:#fff;border-color:#fff}
/* solid white button (used for "Client login") */
.btn-white{background:#fff;color:var(--pine);border-color:#fff}
.btn-white:hover{background:var(--cream);border-color:var(--cream);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.45)}
.btn-block{width:100%}
.btn-lg{padding:18px 32px;font-size:16.5px}

/* ============================================================
   HEADER / NAV
   ============================================================ */
/* wrapper must not box the header, or sticky releases after one header-height */
#site-header{display:contents}
/* CLS fix (measured, perf-trace.cjs 07-05-26): site.js injects the real
   <header> on DOMContentLoaded, so the wrapper is empty for the first paint;
   with no reserved space, that injection was the single largest layout
   shift on the page (~0.08 of a first-load CLS of ~0.10-0.13), shoving the
   whole hero down by exactly the header's height once it popped in.
   :empty only matches before the header exists, so this never overlaps with
   a real sticky child -- the "no box on the wrapper" rule above stays true
   the instant the header is injected and :empty stops matching, so the
   documented sticky-release bug can't reoccur. Heights mirror .nav's own
   height + the 1px border-bottom at each breakpoint below. */
#site-header:empty{display:block;min-height:121px}
.site-header{position:sticky;top:0;z-index:80;
  background:color-mix(in srgb, var(--pine) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s, box-shadow .3s}
.site-header.scrolled{background:var(--pine);box-shadow:0 8px 30px -18px rgba(0,0,0,.7)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:120px;width:100%;padding-inline:clamp(20px,2.4vw,40px)}
.brand{display:flex;align-items:center;gap:15px;color:#fff;font-family:var(--font-display);
  font-weight:600;font-size:27px;letter-spacing:-.01em;flex-shrink:0;line-height:1.05}
.brand img{height:108px;width:auto;object-fit:contain;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.45))}
.brand > span{display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:3px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{position:relative;color:#cdd9c6;font-size:17px;font-weight:500;padding:11px 16px;
  border-radius:8px;white-space:nowrap;transition:color .15s, background .15s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;
  height:2px;background:var(--accent);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-cta .btn{padding:16px 30px;font-size:16.5px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;
  font-size:16.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-phone svg{width:18px;height:18px;color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;
  border-radius:8px;color:#fff}
.nav-toggle svg{width:26px;height:26px}
/* collapse the full nav to the menu button before it gets crowded.
   Raised from 1024 to 1350: at MacBook-class widths (1025-1349) the full
   nav (6 links + phone + client login + book service) has no room to sit
   next to the 288px brand lockup even after compaction, so those widths
   fall back to the proven hamburger drawer instead of clipping the
   right-most button off the viewport. */
@media (max-width:1350px){
  .nav-links,.nav-phone,.nav-login{display:none}
  .nav-toggle{display:grid;place-items:center}
}
/* compact desktop band (1351-1919): full nav still shown here, so gaps,
   paddings and font sizes fluidly shrink with clamp() to keep the row
   inside the viewport. At 1920+ this query no longer matches and the
   original fixed desktop sizes above take over unchanged. */
@media (min-width:1351px) and (max-width:1919px){
  .nav{gap:clamp(14px,1.6vw,28px);padding-inline:clamp(20px,2vw,40px)}
  .nav-links{gap:2px}
  .nav-links a{padding:9px clamp(8px,0.9vw,16px);font-size:clamp(15px,1vw,17px)}
  .nav-cta{gap:clamp(10px,1.2vw,18px)}
  .nav-cta .btn{padding:clamp(12px,1.4vw,16px) clamp(18px,2vw,30px);font-size:clamp(14.5px,0.95vw,16.5px)}
  .nav-phone{gap:6px;font-size:clamp(14.5px,0.95vw,16.5px)}
}
/* below 1450 inside the compact band, drop the phone NUMBER text and keep
   just the tappable icon so the row has enough room for both buttons */
@media (min-width:1351px) and (max-width:1449px){
  .nav-phone-text{display:none}
}

/* mobile drawer */
.mobile-nav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(82vw,340px);z-index:80;background:var(--pine);
  transform:translateX(100%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s;
  display:flex;flex-direction:column;padding:12px 26px calc(16px + env(safe-area-inset-bottom));overflow:hidden;overscroll-behavior:none;box-shadow:-26px 0 60px -26px rgba(0,0,0,.7)}
.mobile-nav.open{transform:translateX(0);visibility:visible;transition:transform .32s var(--ease),visibility 0s linear 0s}
.nav-scrim{position:fixed;inset:0;z-index:78;background:rgba(8,16,7,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;overscroll-behavior:none;transition:opacity .32s var(--ease),visibility 0s linear .32s}
body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .32s var(--ease),visibility 0s linear 0s}
.mobile-nav .m-top{display:flex;margin-bottom:4px}
.mobile-nav .m-close{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:#cdd9c6;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:600;padding:6px 2px}
.mobile-nav .m-close:hover{color:#fff}
.mobile-nav .m-close svg{width:22px;height:22px}
.mobile-nav .m-links{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
.mobile-nav .m-links a{color:#eaf0e6;font-family:var(--font-display);font-size:clamp(20px,5.6vw,25px);font-weight:500;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .m-links a.active{color:var(--accent)}
.mobile-nav .m-actions{flex:0 0 auto;padding-top:12px;display:grid;gap:10px}
.mobile-nav .m-actions .btn{padding-top:13px;padding-bottom:13px}
.mobile-nav .m-phone{color:var(--accent);font-weight:600;font-size:20px;text-align:center;
  font-variant-numeric:tabular-nums}
body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(92vh,820px);display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--pine)}
.hero-media > *{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media video{background:transparent} /* empty/missing src stays transparent so poster <img> shows */
.hero-media img{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14) translateY(-1.5%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,20,9,.18) 0%, rgba(10,20,9,.06) 32%, rgba(10,20,9,.62) 74%, rgba(8,16,7,.92) 100%),
    linear-gradient(90deg, rgba(10,20,9,.55) 0%, rgba(10,20,9,0) 55%)}
.hero-inner{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,8vw,96px);width:100%}
.hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .gold-rule{width:70px;height:4px;background:var(--accent);border-radius:3px;margin:24px 0}
.hero p{font-size:clamp(18px,2.2vw,23px);color:#e7eee2;max-width:46ch;line-height:1.5;
  text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hero-badge{display:flex;align-items:center;gap:9px;font-size:14px;color:#dfe8d9;font-weight:500}
.hero-badge svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.hero-badge .stars{color:var(--accent);letter-spacing:1px}
.hero-badge .chip-rating,.hero-badge .chip-count{font-variant-numeric:tabular-nums;display:inline-block}
.hero-badge .chip-count{min-width:2ch;text-align:left}
.founder-meta .chip-rating{font-variant-numeric:tabular-nums;display:inline-block}

/* ============================================================
   GENERIC PAGE HEADER (non-home)
   ============================================================ */
.page-hero{position:relative;color:#fff;padding:clamp(120px,16vw,180px) 0 clamp(54px,7vw,84px);overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pine)}
.page-hero.has-photo::before{background-image:var(--ph,none);background-size:cover;background-position:center}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,20,9,.5),rgba(8,16,7,.86))}
.page-hero h1{color:#fff;max-width:18ch}
.page-hero .lead{color:#cdd9c6;margin-top:18px}
.page-hero .crumb{font-size:13px;letter-spacing:.04em;color:#9fb398;margin-bottom:22px}
.page-hero .crumb a{color:#cdd9c6;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   VALUE / FEATURE GRID
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.flip .split-media{order:-1}
.split-media{position:relative}
.split-media img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow-lg)}
.split-media .tag{position:absolute;left:18px;bottom:18px;background:var(--surface);
  border-radius:10px;padding:13px 17px;box-shadow:var(--shadow);display:flex;gap:11px;align-items:center}
.split-media .tag .n{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--fern);line-height:1}
.split-media .tag .t{font-size:13px;color:var(--muted);line-height:1.25;max-width:15ch}

.values{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:36px}
.value{background:var(--surface);padding:26px 24px}
.value .ic{width:38px;height:38px;color:var(--fern);margin-bottom:14px}
.value h4{margin-bottom:7px}
/* heading-order fix (home "why us" values only, axe-flagged h2->h4 skip):
   those four headings are now <h3> in markup; restated at h4's exact size/
   letter-spacing/margin here so the rendered result is unchanged. About
   page's values grid still uses real h4s and keeps the rule above. */
.value h3{font-size:19px;letter-spacing:-.01em;margin-bottom:7px}
.value p{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.svc-card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-figure{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc-figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc-card:hover .svc-figure img{transform:scale(1.06)}
.svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-body h3{margin-bottom:9px}
.svc-body p{font-size:15px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.svc-tags span{font-size:12.5px;color:var(--fern);background:#eef4ec;border:1px solid #dde9d8;
  padding:4px 11px;border-radius:999px;font-weight:500}
.svc-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-size:15px;color:var(--pine)}
.svc-link svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.svc-card:hover .svc-link svg{transform:translateX(4px)}

/* detailed service section (services.html) */
.svc-detail{scroll-margin-top:100px}
.svc-detail + .svc-detail{border-top:1px solid var(--border)}

/* ============================================================
   STATS / TRUST BAND
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
.stat{background:var(--pine);padding:30px 24px;text-align:center}
.stat .num{font-family:var(--font-display);font-size:clamp(34px,4vw,46px);font-weight:600;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums}
.stat .num .star{color:var(--accent)}
.stat .lab{font-size:13px;letter-spacing:.04em;color:#a9bca2;margin-top:10px;text-transform:uppercase;font-weight:500}
/* eyebrow label sitting ABOVE the number (used on the "Reach us / 7 / Days a week" stat) */
.stat .lab-top{margin-top:0;margin-bottom:8px}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.area-card{position:relative;border-radius:16px;overflow:hidden;min-height:300px;
  display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.area-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.area-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,20,9,.05),rgba(10,20,9,.8))}
.area-card .inner{padding:26px 26px 28px}
.area-card h3{color:#fff}
.area-card p{color:#dbe6d5;font-size:14.5px;margin-top:4px}
.area-card .pill{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-bottom:8px}

/* ============================================================
   GALLERY
   ============================================================ */
.gal-filter{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.gal-filter button{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:.18s var(--ease)}
.gal-filter button:hover{border-color:var(--pine);color:var(--fg)}
.gal-filter button.active{background:var(--pine);color:#fff;border-color:var(--pine)}
.masonry{columns:3;column-gap:16px;margin-top:30px}
.masonry figure{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:12px;overflow:hidden;
  cursor:zoom-in;box-shadow:var(--shadow)}
.masonry img{width:100%;transition:transform .5s var(--ease)}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;color:#fff;font-size:13.5px;
  font-weight:500;background:linear-gradient(transparent,rgba(10,20,9,.82));
  opacity:0;transform:translateY(8px);transition:.25s var(--ease)}
.masonry figure:hover figcaption{opacity:1;transform:none}
/* gallery grid spans the full page width instead of the 1200px content column */
[data-od-id="gal-grid"] .wrap{max-width:none}
@media (min-width:1400px){ [data-od-id="gal-grid"] .masonry{columns:4} }

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(8,14,7,.94);display:none;
  align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox .lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:24px;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:26px;cursor:pointer}
.lightbox .lb-prev{left:20px}.lightbox .lb-next{right:20px}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-head{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.rev-score{display:flex;align-items:center;gap:22px}
.rev-score .big{font-family:var(--font-display);font-size:72px;font-weight:600;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums}
.rev-score .stars{color:var(--accent);font-size:22px;letter-spacing:2px}
.rev-score .sub{font-size:14px;color:var(--muted);margin-top:5px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.rev-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column;gap:14px}
.rev-card .stars{color:var(--accent);letter-spacing:2px;font-size:15px}
.rev-card .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rev-card .av{width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--bark);
  display:grid;place-items:center;font-weight:600;font-family:var(--font-display);font-size:18px}
.rev-card .who .nm{font-weight:600;font-size:15px}
.rev-card .who .mt{font-size:12.5px;color:var(--muted)}
.rev-card .tag{font-size:13.5px;color:var(--fern);font-weight:500}
.gtag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.gtag svg{width:18px;height:18px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin-top:36px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
  list-style:none;padding:22px 4px;font-family:var(--font-display);font-size:clamp(18px,2vw,21px);
  font-weight:500;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex-shrink:0;width:24px;height:24px;position:relative;transition:transform .25s var(--ease)}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--fern);
  border-radius:2px}
.faq summary .pl::before{top:11px;left:2px;right:2px;height:2px}
.faq summary .pl::after{left:11px;top:2px;bottom:2px;width:2px;transition:opacity .25s}
.faq details[open] summary .pl::after{opacity:0}
.faq details[open] summary .pl{transform:rotate(90deg)}
.faq .ans{padding:0 4px 24px;color:var(--muted);font-size:16px;line-height:1.6;max-width:68ch}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative;text-align:center;isolation:isolate;overflow:hidden;padding-block:clamp(36px,4.5vw,52px)}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg,var(--leaf) 0 28px,var(--fern) 28px 56px);
  opacity:.9;z-index:1;
}
.cta-band::before{top:0}
.cta-band::after{bottom:0}
.cta-band .stripes{display:none}
/* ghost button on cream card: solid fern fill for full opacity on textured bg */
.cta-band .btn-ghost{background:var(--fern);color:#fff;border-color:var(--fern)}
.cta-band .btn-ghost:hover{background:var(--pine);border-color:var(--pine);transform:translateY(-2px)}
/* candycane ribbon at top and bottom of stats band */
[data-od-id="home-stats"]{position:relative;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><path d='M0 45 L22.5 22.5 L45 45 L67.5 22.5 L90 45' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/><path d='M0 90 L22.5 67.5 L45 90 L67.5 67.5 L90 90' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/></svg>")}
[data-od-id="home-stats"]::before,
[data-od-id="home-stats"]::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,var(--leaf) 0 28px,var(--fern) 28px 56px);opacity:.9;z-index:1}
[data-od-id="home-stats"]::before{top:0}
[data-od-id="home-stats"]::after{bottom:0}
.cta-band .wrap{
  background:var(--cream);
  padding:clamp(20px,2.5vw,28px) clamp(28px,4vw,44px);
  border-radius:16px;
  position:relative;
  z-index:1;
  max-width:720px;
  margin-inline:auto;
  box-shadow:var(--shadow-lg);
}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band .lead{margin:18px auto 0;color:#c4d2bd}
/* scoped text overrides for cream card */
.cta-band .wrap h2{color:var(--fg)}
.cta-band .wrap .eyebrow{color:var(--accent-ink)}
.cta-band .wrap .lead{color:var(--muted)}
.cta-band .wrap .cta-mini{color:var(--muted)}
.cta-band .wrap .cta-mini a{color:var(--accent-ink)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.cta-mini{margin-top:20px;font-size:14px;color:#9fb398}
/* tightened spacing scoped to the CTA card only */
.cta-band .wrap .eyebrow{margin-bottom:6px}
.cta-band .wrap h2{line-height:1.1;margin-bottom:0}
.cta-band .wrap .cta-actions{margin-top:18px}
.cta-band .wrap .cta-mini{margin-top:12px}
.cta-mini a{color:var(--accent);font-weight:600}

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,4vw,60px);align-items:start}
.info-list{display:grid;gap:8px;margin-top:30px}
.info-item{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:18px 20px}
.info-item .ic{width:42px;height:42px;border-radius:10px;background:var(--cream);color:var(--bark);
  display:grid;place-items:center;flex-shrink:0}
.info-item .ic svg{width:21px;height:21px}
.info-item .k{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.info-item .v{font-size:17px;font-weight:600;color:var(--fg);margin-top:2px}
.info-item .v a{color:var(--fg)}
.info-item .v small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);letter-spacing:0;text-transform:none;margin-top:2px}

.form-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--fg);margin-bottom:7px}
.field label .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--fg);
  background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;
  transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fern);
  box-shadow:0 0 0 3px rgba(44,90,42,.13)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field .err{display:none;color:#c0392b;font-size:12.5px;margin-top:6px;font-weight:500}
.field.invalid .err{display:block}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:block;font-size:14px;font-weight:500;color:var(--muted);background:var(--bg);
  border:1.5px solid var(--border);padding:9px 16px;border-radius:999px;transition:.15s var(--ease)}
.chip input:checked + span{background:var(--pine);color:#fff;border-color:var(--pine)}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(44,90,42,.2)}
.form-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:8px}
.form-success{display:none;text-align:center;padding:18px 0}
.form-success.show{display:block}
.form-success .ic{width:64px;height:64px;border-radius:50%;background:#eef4ec;color:var(--fern);
  display:grid;place-items:center;margin:0 auto 18px}
.form-success .ic svg{width:32px;height:32px}

/* CLS fix: reserve space for the async Jobber work-request embed script
   (contact.astro) so its late-arriving height doesn't shift the page.
   Desktop measured ~941px loaded height. Mobile stacks the form fields
   into a single column, so it renders taller; reserved larger there. */
.jobber-embed{min-height:940px}
@media (max-width:768px){
  .jobber-embed{min-height:1100px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--pine);color:#b9c8b2;padding-top:clamp(56px,7vw,84px)}
.site-footer{padding-bottom:env(safe-area-inset-bottom)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-bottom:28px}
.footer-brand .brand{margin-bottom:18px}
.footer-brand p{font-size:14.5px;color:#9fb398;max-width:34ch;line-height:1.6}
.footer-brand .crest{width:auto;height:160px;margin-bottom:20px;object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.footer-brand .footer-copy{margin-top:12px;font-size:13px;color:#8ba384;line-height:1.5;max-width:34ch}
.footer-brand .soc{display:flex;gap:12px;margin-top:11px}
.footer-brand .soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);color:#cdd9c6}
.footer-brand .soc a:hover{color:#fff;border-color:var(--accent)}
.footer-brand .soc svg{width:17px;height:17px}
/* heading-order fix (axe-flagged skip into the footer): these were <h5>,
   the page's last heading before the footer is always <h2> or <h3>, so they
   are now <h3> in markup (site.js buildFooter()). Selector renamed to match;
   every property value is unchanged, so the rendered label is identical. */
.fcol h3{font-family:var(--font-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;font-weight:600;line-height:1.6}
.fcol a,.fcol p{display:block;color:#c4d2bd;font-size:14.5px;padding:5px 0;transition:color .15s}
.fcol a:hover{color:#fff}
.footer-bottom{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;flex-direction:column;
  font-size:13px;color:#8ba384}
.footer-bottom a{color:#a9bca2}
.footer-credit-row{border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:center;align-items:center;padding-top:17px;padding-bottom:18px}
.footer-bottom .footer-credit{font-family:var(--font-body);color:var(--accent);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;white-space:nowrap;
  transition:color .15s,letter-spacing .3s var(--ease)}
.footer-bottom .footer-credit:hover{color:#fff}
.footer-bottom .footer-credit:focus-visible{outline:2px solid #fdf3d1;outline-offset:3px;border-radius:2px}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-bottom .footer-credit{
    color:transparent;
    -webkit-text-fill-color:transparent;
    background-image:linear-gradient(90deg,#a87d2a,#c79a3e 30%,#f0d488 45%,#fff6dc 50%,#f0d488 55%,#c79a3e 70%,#a87d2a);
    background-size:200% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;background-clip:text;
    animation:footer-credit-shimmer 2.8s linear infinite;
  }
  .footer-bottom .footer-credit:hover{
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation-duration:1.4s;
    letter-spacing:.24em;
  }
}

@keyframes footer-credit-shimmer{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* ============================================================
   LOGO DIVIDER — standalone reusable seam element
   Insert <div class="logo-divider"><img ...></div> between sections.
   Bare variant (.is-bare) omits the logo; stripes run full width.
   ============================================================ */
.logo-divider{
  position:relative;height:0;display:flex;align-items:center;overflow:visible;z-index:3;margin:0;
  width:100%;
}
.logo-divider::before,.logo-divider::after{
  content:"";flex:1;height:9px;
  background:linear-gradient(
    to bottom,
    var(--leaf) 0,var(--leaf) 2px,
    transparent 2px,transparent 4px,
    var(--accent) 4px,var(--accent) 5px,
    transparent 5px,transparent 7px,
    var(--fern) 7px,var(--fern) 9px
  );
}
.logo-divider img{
  height:44px;width:auto;opacity:1;
  display:block;margin-inline:16px;flex-shrink:0;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none}
  [data-od-id="home-why"] .split-media img{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   HOME WHY SECTION OVERRIDES (ops 2/3/4)
   ============================================================ */

/* OP 1: image size bump + Ken Burns + right bleed */
[data-od-id="home-why"] .split-media{overflow:hidden;border-radius:14px;box-shadow:var(--shadow-lg);
  margin-right:min(0px,calc((var(--maxw) - 100vw)/2 + var(--gut)))}
[data-od-id="home-why"] .split-media img{min-height:580px;border-radius:0;box-shadow:none;
  animation:kb-why 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kb-why{
  from{transform:scale(1.0)}
  to{transform:scale(1.08) translate(-1%,-0.5%)}
}

/* OP 3: values box pine fill contrasts bg-paper (#fbfaf4); token: --pine */
[data-od-id="home-why"] .values{background:var(--pine-2);border-color:var(--pine)}
[data-od-id="home-why"] .value{background:var(--pine)}
[data-od-id="home-why"] .value h3,[data-od-id="home-why"] .value h4{color:#eaf0e6}
[data-od-id="home-why"] .value p{color:#9fb398}
[data-od-id="home-why"] .value .ic{color:var(--accent)}

/* OP 3: services section seam divider — flex line/logo/line, no bg pad */
[data-od-id="home-services"]{position:relative}
.seam-logo{position:absolute;top:0;left:0;right:0;
  transform:translateY(-50%);z-index:2;
  display:flex;align-items:center}
.seam-logo::before,.seam-logo::after{
  content:"";flex:1;height:9px;
  background:linear-gradient(
    to bottom,
    var(--leaf) 0,var(--leaf) 2px,
    transparent 2px,transparent 4px,
    var(--accent) 4px,var(--accent) 5px,
    transparent 5px,transparent 7px,
    var(--fern) 7px,var(--fern) 9px
  )
}
.seam-logo img{height:44px;width:auto;opacity:1;display:block;margin-inline:16px;flex-shrink:0}

/* OP 4: bg-paper wave lines opacity bump 0.05 -> 0.08, scoped to why section only */
[data-od-id="home-why"].bg-paper{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><g fill='none' stroke='%232c5a2a' stroke-opacity='0.08' stroke-width='1'><path d='M0 35 Q60 12 120 35 T240 35'/><path d='M0 80 Q60 58 120 80 T240 80'/><path d='M0 125 Q60 103 120 125 T240 125'/></g></svg>")}

/* ============================================================
   HOME STATS — OP 1: cream card cells contrast against pine bg
   token: --cream
   ============================================================ */
[data-od-id="home-stats"] .stats{
  background:rgba(199,154,62,.18);
  border-color:rgba(199,154,62,.4);
}
[data-od-id="home-stats"] .stat{background:var(--cream)}
[data-od-id="home-stats"] .stat .num{color:var(--pine)}
[data-od-id="home-stats"] .stat .num .star{color:var(--accent-ink)}
[data-od-id="home-stats"] .stat .lab{color:var(--muted)}
/* all three tiles carry a top eyebrow row (real "Reach us" on the middle tile, an invisible
   spacer on the sides) so the big numbers line up across the 3-across row at every width */

/* ============================================================
   HOME FAQ — OP 4: surface card lifts faq box above bg pattern
   token: --surface; stacking: position:relative + z-index:1
   ============================================================ */
[data-od-id="home-faq"] .faq{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:4px 28px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
}

/* ============================================================
   SERVICES FAQ — OP 3: surface card lifts faq box above bg-paper pattern
   z-index:1 keeps box above the section's SVG background texture
   ============================================================ */
[data-od-id="svc-faq"] .faq{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:4px 28px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
}

/* ============================================================
   HOME CTA — topo/wave bg-image to distinguish from plain-pine footer
   Both are pine-base; swapping the chevron pattern for wave lines
   (wave pattern is already used in bg-paper and tex-topo) creates
   visible distinction between the section and the footer below it.
   ============================================================ */
[data-od-id="home-cta"].bg-pine{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><g fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'><path d='M0 35 Q60 12 120 35 T240 35'/><path d='M0 80 Q60 58 120 80 T240 80'/><path d='M0 125 Q60 103 120 125 T240 125'/></g></svg>");
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:34px}
  .split.flip .split-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand{grid-column:1/-1}
  .masonry{columns:2}
  .rev-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:grid;place-items:center}
  .nav-cta .btn{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .form-row{grid-template-columns:1fr}
  .masonry{columns:1}
  .rev-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
  .hero{min-height:88vh}
  .stat{padding:24px 16px}
}

/* ============================================================
   MOBILE RESPONSIVE ADDITIONS
   All rules below live inside media queries.
   Desktop layout is untouched — every selector here is
   guarded by a max-width condition.
   ============================================================ */

/* ---- tablet + large phone (max 768px) ---- */
@media (max-width:768px){

  /* NAV: shorter header keeps usable screen real estate on phones.
     mobile-nav top inset must match nav height exactly. */
  .nav{height:76px}
  #site-header:empty{min-height:77px}
  .brand img{height:64px}
  .brand{font-size:22px;gap:10px}
  .brand small{font-size:9.5px}
  .mobile-nav{top:0}
  /* scroll-margin matches new nav height so anchor links land correctly */
  .svc-detail{scroll-margin-top:86px}

  .hero{min-height:min(80vh,600px)}

  /* HERO MOBILE FRAMING: shift the cover-crop left so the crew member stays in
     frame on tall phone viewports (default 50% crops him off the left edge) */
  .hero-media video,.hero-media img{object-position:30% center}

  /* HERO MOBILE LEGIBILITY: stronger top-left darkening so the eyebrow + headline
     stay readable over bright daylight footage */
  .hero::after{
    background:
      radial-gradient(125% 95% at 0% 0%, rgba(8,16,7,.80) 0%, rgba(8,16,7,.34) 40%, rgba(8,16,7,0) 68%),
      linear-gradient(180deg, rgba(10,20,9,.42) 0%, rgba(10,20,9,.12) 30%, rgba(10,20,9,.66) 72%, rgba(8,16,7,.94) 100%);
  }

  /* PAGE HERO: 120px top-padding min is excessive at phone nav heights */
  .page-hero{padding-top:clamp(100px,14vw,130px)}

  /* HOME-WHY SPLIT: zero right-bleed explicitly (formula is already 0
     on viewports narrower than --maxw, but state it clearly) */
  [data-od-id="home-why"] .split-media{margin-right:0}

  /* SECTIONS: bring padding inward for smaller screens */
  .section{padding-block:clamp(48px,7vw,80px)}
  .section.tight{padding-block:clamp(36px,5vw,56px)}

  /* STATS: reduce cell padding and number size at tablet widths */
  .stat{padding:24px 14px}
  .stat .num{font-size:clamp(28px,5vw,40px)}

  /* REVIEWS: 72px score number is very large at tablet width */
  .rev-score{gap:14px}
  .rev-score .big{font-size:54px}

  /* CTA CARD: tighten padding so it breathes on tablet viewports */
  .cta-band .wrap{padding:clamp(18px,3vw,26px) clamp(18px,3.5vw,28px)}

  /* FOOTER crest: scale down from 160px */
  .footer-brand .crest{height:120px}

  /* AREA CARDS: reduce min-height in single-column stack */
  .area-card{min-height:260px}
}

/* ---- phone (max 480px) ---- */
@media (max-width:480px){

  /* NAV: compact header for phone; mobile-nav top inset matches */
  .nav{height:68px;padding-inline:14px}
  #site-header:empty{min-height:69px}
  .brand img{height:52px}
  .brand{font-size:18px;gap:8px}
  .brand small{font-size:9px;letter-spacing:.11em}
  .mobile-nav{top:0}
  .nav-toggle{width:36px;height:36px}

  /* DISPLAY TYPOGRAPHY: tighten Spectral headings so nothing overflows
     at 360-480px. body text floor (16px) was already set at 620px. */
  h1{font-size:clamp(28px,8vw,38px)}
  h2{font-size:clamp(22px,6vw,30px)}
  h3{font-size:clamp(18px,4.5vw,22px)}

  /* HERO: stack action buttons full-width for thumb-friendly tap targets */
  .hero{min-height:80vh}
  .hero .gold-rule{margin:14px 0;width:52px}
  .hero-inner{padding-bottom:clamp(36px,8vw,52px)}
  .hero-actions{flex-direction:column;gap:10px;margin-top:24px}
  .hero-actions .btn{width:100%}
  .hero-badges{gap:8px 14px;margin-top:22px;padding-top:16px}

  /* PAGE HERO: reduce top padding to avoid huge blank space
     on phones where nav is 68px */
  .page-hero{padding-top:96px;padding-bottom:clamp(32px,6vw,48px)}

  /* SPLIT MEDIA: shorter image height in stacked single-column layout */
  .split-media img{min-height:220px}
  [data-od-id="home-why"] .split-media{margin-right:0}
  [data-od-id="home-why"] .split-media img{min-height:220px}

  /* STATS: single column on phones — 2 col is cramped at 360-480px */
  .stats{grid-template-columns:1fr}
  .stat{padding:20px 16px}
  .stat .num{font-size:clamp(30px,7vw,42px)}

  /* SERVICE CARDS: tighten body padding */
  .svc-body{padding:18px 16px 20px}

  /* AREA CARDS */
  .area-card{min-height:220px}

  /* SECTIONS: smaller block padding so phones don't have huge gaps */
  .section{padding-block:clamp(40px,7vw,60px)}
  .section.tight{padding-block:clamp(28px,5vw,40px)}

  /* CTA BAND: full-width stacked buttons on phones */
  .cta-band .wrap{padding:22px 18px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%}

  /* SEAM LOGO + LOGO DIVIDER: scale down inline logo mark */
  .seam-logo img{height:30px}
  .logo-divider img{height:30px}

  /* FOOTER */
  .footer-brand .crest{height:88px}

  /* REVIEWS */
  .rev-head{flex-direction:column;align-items:flex-start;gap:14px}
  .rev-score .big{font-size:46px}

  /* FAQ CARDS: tighten side padding on phones */
  [data-od-id="home-faq"] .faq{padding:4px 16px}
  [data-od-id="svc-faq"] .faq{padding:4px 16px}
}

/* ---- very small phones (max 380px) ---- */
@media (max-width:380px){

  /* NAV: shave another 6px; mobile-nav top tracks it */
  .nav{height:62px}
  #site-header:empty{min-height:63px}
  .brand img{height:44px}
  .brand{font-size:16px;gap:7px}
  .mobile-nav{top:0}

  /* TYPOGRAPHY: push minimums down for 360px viewports */
  h1{font-size:clamp(24px,7.5vw,30px)}
  h2{font-size:clamp(20px,6vw,26px)}
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba{position:relative;margin:0 auto;border-radius:20px;overflow:hidden;aspect-ratio:16/10;max-width:980px;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 60px -30px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;user-select:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(10,20,9,.55)}
.ba-tag-before{left:14px}
.ba-tag-after{right:14px;background:rgba(199,154,62,.9);color:var(--pine)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;z-index:4;transform:translateX(-50%);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--pine);display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:scale .18s var(--ease)}
.ba:active .ba-grip{scale:.96}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;touch-action:pan-y}
.ba:focus-within .ba-grip{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:560px){.ba{aspect-ratio:4/5}.ba-grip{width:42px;height:42px}}

/* ============================================================
   HOW IT WORKS — STEPS
   ============================================================ */
.steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:clamp(40px,5vw,60px) 0 0;padding:0}
.step{position:relative;text-align:center;padding:0 8px}
.step-node{position:relative;display:grid;place-items:center;width:66px;height:66px;margin:0 auto 22px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e6c074,var(--accent));color:var(--pine);z-index:2;box-shadow:0 12px 26px -8px rgba(199,154,62,.7),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step-node>svg{width:28px;height:28px}
.step-node::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:.55;animation:nodePulse 2.6s ease-out infinite}
.step-badge{position:absolute;bottom:-3px;right:-3px;width:24px;height:24px;border-radius:50%;background:var(--pine);color:#fff;font-family:var(--font-display);font-size:13px;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.step:hover .step-node{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 34px -10px rgba(199,154,62,.9),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes nodePulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.step-line{position:absolute;top:33px;left:16.66%;right:16.66%;height:3px;z-index:0;border-radius:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,rgba(199,154,62,.22) 8px 16px);background-size:16px 100%;animation:flowDash 1s linear infinite;transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease) .15s;opacity:1!important;overflow:visible}
.step-line.in{transform:scaleX(1)!important}
@keyframes flowDash{to{background-position:-16px 0}}
.step-spark{position:absolute;top:50%;left:0;width:54px;height:11px;margin-top:-5.5px;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(255,243,210,.95),transparent);filter:blur(1px);animation:sparkRun 3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sparkRun{0%{left:-8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.step-body h3{font-size:clamp(18px,2.2vw,22px);margin-bottom:8px;text-wrap:balance}
.step-body p{color:var(--muted);text-wrap:pretty;max-width:34ch;margin-inline:auto}
.steps .step:nth-child(3){transition-delay:.1s}
.steps .step:nth-child(4){transition-delay:.2s}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:28px;max-width:440px;margin-inline:auto}
  .step{display:grid;grid-template-columns:66px 1fr;gap:18px;align-items:center;text-align:left;padding:0}
  .step-node{margin:0}
  .step-body p{margin-inline:0;max-width:none}
  .step-line{top:33px;bottom:33px;left:33px;right:auto;width:3px;height:auto;background:repeating-linear-gradient(180deg,var(--accent) 0 8px,rgba(199,154,62,.22) 8px 16px);background-size:100% 16px;animation:flowDashV 1s linear infinite;transform:scaleY(0);transform-origin:top center}
  .step-line.in{transform:scaleY(1)!important}
  @keyframes flowDashV{to{background-position:0 -16px}}
  .step-spark{display:none}
}

/* ============================================================
   FLOATING BOOK CTA
   ============================================================ */
.float-cta{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-radius:999px;
  background:var(--accent);color:var(--pine);font-family:var(--font-body);font-weight:700;font-size:15.5px;
  text-decoration:none;box-shadow:0 10px 30px -8px rgba(0,0,0,.5),0 2px 6px -2px rgba(0,0,0,.3);
  transform:translateY(130%);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease),scale .15s var(--ease)}
.float-cta.show{transform:translateY(0);opacity:1;pointer-events:auto}
.float-cta:hover{scale:1.03}
.float-cta:active{scale:.96}
.float-cta svg{width:18px;height:18px;flex-shrink:0}
@media (max-width:560px){.float-cta{right:14px;bottom:14px;padding:13px 20px;padding-bottom:calc(13px + env(safe-area-inset-bottom));font-size:15px}}
@media (prefers-reduced-motion:reduce){.float-cta{transition:opacity .3s}.float-cta:not(.show){transform:none}}

/* floating pill wrapped in the same rotating gold ring as the nav Book service */
.float-cta-ring{position:fixed;right:18px;bottom:18px;z-index:60;
  transform:translateY(130%);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.float-cta-ring.show{transform:translateY(0);opacity:1;pointer-events:auto}
.float-cta-ring .float-cta{position:static;right:auto;bottom:auto;transform:none;opacity:1;pointer-events:inherit;transition:scale .15s var(--ease)}
@media (max-width:560px){.float-cta-ring{right:14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.float-cta-ring{transition:opacity .3s}.float-cta-ring:not(.show){transform:none}}

/* iOS 26 Safari samples a full-width fixed element near the bottom edge to tint
   its toolbar region; without one it falls back to a white extension. This strip
   pins the tint to pine. Desktop and non-WebKit never display it. */
.safari-tint-bottom{display:none;position:fixed;bottom:-8px;left:0;width:100%;min-height:12px;background-color:var(--pine);pointer-events:none;z-index:59}
@supports (-webkit-touch-callout: none){ @media (max-width:860px){ .safari-tint-bottom{display:block} } }

/* ============================================================
   HERO — entrance + scroll cue
   ============================================================ */
/* [data-motion] = entrance is driven by the React Hero island's Stagger/Reveal
   kit instead (motion.ts). Guarded here so the CSS keyframe entrance no-ops
   and we don't get a double fade on the home hero. */
@media (prefers-reduced-motion:no-preference){
  .hero-inner:not([data-motion]) > *{opacity:0;animation:heroUp .7s var(--ease) forwards}
  .hero-inner:not([data-motion]) > .eyebrow{animation-delay:.15s}
  .hero-inner:not([data-motion]) > h1{animation-delay:.28s}
  .hero-inner:not([data-motion]) > .gold-rule{animation-delay:.4s}
  .hero-inner:not([data-motion]) > p{animation-delay:.5s}
  .hero-inner:not([data-motion]) > .hero-actions{animation-delay:.62s}
  .hero-inner:not([data-motion]) > .hero-badges{animation-delay:.74s}
}
@keyframes heroUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;display:grid;place-items:center;color:rgba(255,255,255,.7);pointer-events:none}
.scroll-cue svg{width:26px;height:26px;animation:cueBounce 2s var(--ease) infinite}
@keyframes cueBounce{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}
@media (max-width:560px){.scroll-cue{bottom:12px}.scroll-cue svg{width:22px;height:22px}}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
/* tactile button press */
.btn:active{scale:.96}

/* area cards: hover lift + image zoom */
.area-card{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.area-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(18,38,17,.55)}
.area-card img{transition:transform .6s var(--ease)}
.area-card:hover img{transform:scale(1.07)}
/* tan panel behind the home "Where we work" cards */
[data-od-id="home-area"] .area-grid{background:#e4d8bd;padding:clamp(16px,2.4vw,26px);border-radius:22px;box-shadow:0 24px 50px -34px rgba(0,0,0,.22)}
/* tan panel around the service-area coverage text block; the coverage image column
   stretches to the panel height and splits into two equal cards */
[data-od-id="area-coverage"] .cov-panel{background:#e4d8bd;padding:clamp(26px,3.4vw,44px);border-radius:20px;box-shadow:0 24px 50px -34px rgba(0,0,0,.22)}
[data-od-id="area-coverage"] .split{align-items:stretch}
[data-od-id="area-coverage"] .area-grid{grid-template-rows:1fr 1fr}

/* about "What guides us" value icons: gold accent instead of the default fern green */
[data-od-id="about-values"] .value .ic{color:var(--accent)}

/* standalone "see more" links nudge their arrow on their own hover */
.svc-link svg{transition:transform .2s var(--ease)}
.svc-link:hover svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){.area-card::before{animation:none}}

/* ============================================================
   FAQ SMOOTH EXPAND + HOME GALLERY HOVER
   ============================================================ */
/* Animate native <details> open/close where the browser supports height:auto
   interpolation. Older browsers keep the instant native toggle (graceful). */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:hidden;opacity:0;transition:height .32s var(--ease),opacity .28s var(--ease),content-visibility .32s allow-discrete}
  .faq details[open]::details-content{height:auto;opacity:1}
}
/* home gallery teaser: hover zoom (the figures have inline overflow:hidden) */
[data-od-id="home-gallery"] figure img{transition:transform .6s var(--ease)}
[data-od-id="home-gallery"] figure:hover img{transform:scale(1.06)}

/* floating CTA is redundant on desktop (nav already has Book service); show it only where the nav button is hidden */
@media (min-width:861px){ .float-cta{display:none} .float-cta-ring{display:none!important} }

/* === 21st.dev animated gradient border === */
/* Rotating gold ring, transform-based. The old approach animated the
   registered custom property --gradient-angle inside background-image;
   WebKit/iOS Safari never repaints the gradient when that property
   animates, so rings were static on iPhone. A .ring-layer child clips an
   oversized spinning conic square instead; rotate is composited and works
   in every engine. The wrapper's inline conic background remains as the
   static first-paint fallback underneath. */
.gradient-border-component:not(.float-cta-ring){position:relative}
.gradient-border-component .ring-layer{position:absolute;inset:calc(var(--border-width, 2px) * -1);border-radius:var(--border-radius, 999px);overflow:hidden;pointer-events:none;z-index:0}
.gradient-border-component .ring-layer::before{content:"";position:absolute;left:50%;top:50%;width:calc(150% + 48px);aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg, var(--gradient-primary, #584827) 0%, var(--gradient-secondary, #c7a03c) 37%, var(--gradient-accent, #f9de90) 30%, var(--gradient-secondary, #c7a03c) 33%, var(--gradient-primary, #584827) 40%, var(--gradient-primary, #584827) 50%, var(--gradient-secondary, #c7a03c) 77%, var(--gradient-accent, #f9de90) 80%, var(--gradient-secondary, #c7a03c) 83%, var(--gradient-primary, #584827) 90%)}
.gradient-border-component > :not(.ring-layer){position:relative;z-index:1}
.gradient-border-auto .ring-layer::before{animation:ring-spin var(--animation-duration, 5s) linear infinite}
.gradient-border-hover .ring-layer::before{animation:ring-spin var(--animation-duration, 5s) linear infinite;animation-play-state:paused}
.gradient-border-hover:hover .ring-layer::before{animation-play-state:running}
.gradient-border-stop-hover .ring-layer::before{animation:ring-spin var(--animation-duration, 5s) linear infinite}
.gradient-border-stop-hover:hover .ring-layer::before{animation-play-state:paused}
@keyframes ring-spin{to{rotate:360deg}}

/* The nav "Book service" ring is a wrapper <span> around the anchor (see
   site.js gradientRing()), so the existing ".nav-cta .btn{display:none}"
   phone/tablet rule (max-width:860px, above) hides the inner anchor but
   leaves the wrapper span itself visible as an empty ring. Hide the wrapper
   too at the same breakpoint so nothing is left over once the hamburger
   menu takes its place. */
@media (max-width:860px){ .nav-cta .gradient-border-component{display:none!important} }

/* Note: the nav/mobile-nav "Book service" ring (injected by site.js, since
   those buttons are raw HTML strings, not React) reuses the
   .gradient-border-component/.gradient-border-auto classes above via a
   wrapping <span> with inline styles matching <BorderRotate> exactly (see
   gradientRing() in site.js), rather than a dedicated CSS class here, so no
   extra rule is needed in this file for that case. */