/* ==========================================================================
   Cedar Creek, Sunshine Coast Property Services
   Brand tokens carried over from cedarcreekps.ca:
   forest #015332 / #3F7652, sage #C0D4CC, grey #878787, Lato body, serif wordmark.
   Radius scale: one value, 4px, used everywhere.
   Accent: one family only, the Cedar Creek greens.
   ========================================================================== */

/* ---------- 0. Fonts, self hosted ----------------------------------------
   Was two cross origin requests, fonts.googleapis.com for the CSS and then
   fonts.gstatic.com for the woff2. Both are render blocking and both need
   their own DNS, TCP and TLS, which is where First Contentful Paint was going.
   These are Google's own unmodified latin and latin-ext woff2 files, so the
   glyphs are byte for byte what the site was already rendering. unicode-range
   means English copy only ever downloads the latin half.
   ------------------------------------------------------------------------ */
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ebgaramond-400i-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ebgaramond-400i-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ebgaramond-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ebgaramond-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/ebgaramond-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/ebgaramond-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/ebgaramond-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/ebgaramond-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lato-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --forest-900:#062A1A;
  --forest-800:#0B3D26;
  --forest-700:#015332;   /* brand primary, taken from current site */
  --forest-500:#3F7652;   /* brand secondary, taken from current site */
  --sage-500:#7FA48C;
  --sage-300:#A8C4B4;
  --sage-200:#C0D4CC;     /* brand pale, taken from current site */
  --sage-50:#EAF1EC;
  --bone:#F4F7F4;
  --paper:#FCFDFB;
  --ink:#132019;
  --muted:#5B6B62;
  --alert:#8C2B18;   /* the one error state, the form's send failure line */
  --grey:#878787;         /* brand grey, taken from current site */
  --line:rgba(19,32,25,.12);
  --line-dark:rgba(255,255,255,.16);
  --r:4px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1280px, 92vw);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(1,83,50,.14);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,.serif{font-family:"EB Garamond",Georgia,serif;font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6.2vw,5.1rem);line-height:1.03;margin:0}
h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.08;margin:0}
h3{font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.2;margin:0}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:var(--muted);line-height:1.7;max-width:62ch}
.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--forest-500);
}
.shell{width:var(--shell);margin-inline:auto}
section{position:relative}

/* ---------- 1. Preloader ------------------------------------------------ */
#loader{
  position:fixed;inset:0;z-index:1100;background:var(--forest-900);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
.load-inner{display:grid;justify-items:center;gap:26px;padding:24px;text-align:center}
.load-mark{width:74px;height:auto;opacity:0;transform:translateY(14px) scale(.94);animation:markIn 1s var(--ease) .12s forwards}
@keyframes markIn{to{opacity:1;transform:none}}
.load-word{opacity:0;animation:fadeUp .9s var(--ease) .42s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.load-word .l1{
  font-family:"EB Garamond",Georgia,serif;font-weight:600;color:#fff;text-transform:uppercase;
  font-size:clamp(1.55rem,3.6vw,2.3rem);letter-spacing:.13em;line-height:1;
}
.load-word .l2{
  font-family:"EB Garamond",Georgia,serif;font-weight:600;color:#fff;text-transform:uppercase;
  margin-top:8px;font-size:clamp(.94rem,2.2vw,1.4rem);letter-spacing:.175em;line-height:1;
}
.load-word .l3{
  margin-top:12px;color:var(--sage-300);font-size:clamp(.58rem,1.4vw,.72rem);
  letter-spacing:.34em;text-transform:uppercase;font-weight:700;
}
.load-bar{
  width:min(300px,62vw);height:2px;background:rgba(255,255,255,.16);
  overflow:hidden;opacity:0;animation:fadeUp .6s var(--ease) .7s forwards;
}
/* the fill is a CSS transition now, the JS only sets a target every 125ms */
.load-bar i{display:block;height:100%;width:0%;background:var(--sage-300);transition:width .2s linear}
.load-pct{
  font-size:.66rem;letter-spacing:.3em;color:rgba(255,255,255,.5);
  opacity:0;animation:fadeUp .6s var(--ease) .8s forwards;
}

/* ---------- 2. Target cursor -------------------------------------------- */
.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;z-index:1200;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity .3s;
}
/* Both states carry a soft dark halo. A thin ring over a photo has no reliable
   contrast on its own, and it vanished into the mid grey concrete on the
   pressure washing hero. The halo gives it an edge against any background. */
.cur-dot{width:5px;height:5px;background:var(--forest-700);margin:-2.5px 0 0 -2.5px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.6), 0 0 6px rgba(3,18,11,.4)}
.cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(1,83,50,.7);
  box-shadow:0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:opacity .3s,width .28s var(--ease),height .28s var(--ease),
             margin .28s var(--ease),border-color .28s,background-color .28s,box-shadow .28s;
}
body.cursor-on .cur-dot,body.cursor-on .cur-ring{opacity:1}
body.cursor-on.on-dark .cur-dot{background:#fff;
  box-shadow:0 0 0 1.5px rgba(3,18,11,.45), 0 0 7px rgba(3,18,11,.75)}
body.cursor-on.on-dark .cur-ring{border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(3,18,11,.35), inset 0 0 0 1px rgba(3,18,11,.25)}
body.cursor-on.hot .cur-ring{
  width:58px;height:58px;margin:-29px 0 0 -29px;
  background:rgba(1,83,50,.08);border-color:var(--forest-500);
}
body.cursor-on.on-dark.hot .cur-ring{background:rgba(255,255,255,.12);border-color:#fff}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.cursor-on,body.cursor-on a,body.cursor-on button,
  body.cursor-on input,body.cursor-on select,body.cursor-on textarea{cursor:none}
}

/* ---------- 3. Reveal system -------------------------------------------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="img"]{
  opacity:0;transform:translateY(30px) scale(.986);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="img"].in{opacity:1;transform:none}
[data-reveal="img"] img{transform:scale(1.16);transition:transform 2s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal="img"].in img{transform:scale(1)}
[data-reveal="line"]{opacity:1;transform:none;transform-origin:left;scale:0 1;transition:scale 1s var(--ease)}
[data-reveal="line"].in{scale:1 1}

/* ---------- 4. Header ---------------------------------------------------- */
header{position:sticky;top:0;z-index:900;background:rgba(252,253,251,.97);
  border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s}
header.stuck{border-bottom-color:var(--line);box-shadow:0 10px 34px -28px rgba(6,42,26,.7)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;transition:height .4s var(--ease)}
header.stuck .nav{height:64px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
/* the client's leaf mark, shipped as the original PNG. width is set here, so
   height:auto is required or the width/height attributes stretch it (Logos rule) */
.brand .mark{width:30px;height:auto;flex-shrink:0;transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-4deg) scale(1.05)}
/* three stacked lines, the same hierarchy as the printed logo:
   CEDAR CREEK / PROPERTY SERVICES set in the logo serif, then the region line */
.brand .bt1{display:block;font-family:"EB Garamond",Georgia,serif;font-weight:600;
  font-size:1.14rem;letter-spacing:.1em;line-height:1;color:var(--forest-700);
  text-transform:uppercase;white-space:nowrap}
.brand .bt2{display:block;font-family:"EB Garamond",Georgia,serif;font-weight:600;
  font-size:.71rem;letter-spacing:.132em;line-height:1;color:var(--forest-700);
  margin-top:5px;text-transform:uppercase;white-space:nowrap}
.brand .bt3{display:block;font-size:.5rem;letter-spacing:.285em;line-height:1;
  text-transform:uppercase;color:var(--grey);margin-top:6px;font-weight:700;white-space:nowrap}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-size:.86rem;letter-spacing:.03em;color:var(--muted);position:relative;padding:4px 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--forest-700);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.menu a:hover{color:var(--forest-700)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
  font-size:.83rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:transform .3s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .3s;
  cursor:pointer;
}
.btn-solid{background:var(--forest-700);color:#fff;box-shadow:0 12px 30px -18px rgba(1,83,50,.9)}
.btn-solid:hover{background:var(--forest-800);transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(1,83,50,.95)}
.btn-solid:active{transform:translateY(0) scale(.985)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.1)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn-line{border-color:var(--forest-700);color:var(--forest-700)}
.btn-line:hover{background:var(--forest-700);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:.75rem}
.nav .btn{flex-shrink:0}
/* phone is the primary action everywhere, so it gets an icon and never hides */
.call-cta svg{width:15px;height:15px;flex:0 0 auto}
.btn-xl{padding:20px 40px;font-size:.95rem}
@media (max-width:400px){.btn-xl{padding:17px 22px;font-size:.8rem;width:100%}}
/* ---------- 4b. Mobile drawer — Mobile-Optimization.md Part D ------------
   A right side fixed panel with left aligned rows and block layout, built to
   the standard's class contract: .menu-btn, .nav-backdrop, .navlinks, .has-dd,
   .dd-trigger, .dd, body.nav-open.
   Tokens are computed with the Section 0b luminance formula, not chosen:
   --nav-bg #062A1A -> L 0.018 -> WHITE text at 15.5:1
   --nav-accent #C0D4CC -> L 0.627 -> BLACK CTA text at 13.5:1               */
:root{
  --nav-bg:var(--forest-900);
  --nav-accent:var(--sage-200);
  --nav-fg:#ffffff;
  --nav-fg-2:rgba(255,255,255,.85);
  --nav-rule:rgba(255,255,255,.12);
  --nav-cta-fg:#111111;
  --nav-scrim:rgba(6,42,26,.55);
}

.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);
  background:none;align-items:center;justify-content:center;cursor:pointer;
  position:relative;z-index:2;transition:border-color .3s}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;
  transition:background-color .2s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;
  background:var(--ink);transition:transform .34s var(--ease),background-color .3s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
/* Rule 11. The same button closes the drawer, so it never moves and never hides. */
body.nav-open .menu-btn{border-color:rgba(255,255,255,.45)}
body.nav-open .menu-btn span{background:transparent}
body.nav-open .menu-btn span::before{background:#fff;transform:translateY(6px) rotate(45deg)}
body.nav-open .menu-btn span::after{background:#fff;transform:translateY(-6px) rotate(-45deg)}
/* Rule 11 ladder: header 900, backdrop 1000, drawer 1001, header while open 1002.
   Rule 9: never a backdrop-filter, filter or transform on the header, because any
   of them would make it the containing block for the fixed drawer. */
body.nav-open header{z-index:1002;background:transparent;border-bottom-color:transparent;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* the logo and the header phone sit behind the panel, so they go while it is open */
body.nav-open header .brand,body.nav-open .nav>.btn{opacity:0;pointer-events:none}
body.nav-open{overflow:hidden}

.nav-backdrop{position:fixed;inset:0;z-index:1000;background:var(--nav-scrim);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s}
body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}

/* top:0;bottom:0 rather than height:100vh, which on iOS is the expanded viewport */
.navlinks{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(86vw,360px);
  background:var(--nav-bg);color:var(--nav-fg);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  display:block;
  padding:107px 24px 40px;         /* measured header height 77 at 390px, plus 30 */
  margin:0;gap:0;
  transform:translateX(110%);
  visibility:hidden;
  transition:transform .35s ease,visibility .35s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
  z-index:1001;
}
.navlinks.open{transform:none;visibility:visible}

/* L1, top level rows. 16 + 27.7 + 16 = ~60px, gap 33px across the divider. */
.navlinks>a,.navlinks>.has-dd{display:block;width:100%;margin:0;
  border-bottom:1px solid var(--nav-rule)}
.navlinks>a,.has-dd .dd-trigger{color:var(--nav-fg);font-size:1.05rem;font-weight:600;
  padding:16px 2px;text-align:left}
.navlinks>a::after{display:none}
.has-dd .dd-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;font-family:inherit;line-height:inherit;cursor:pointer}
.has-dd .dd-trigger svg{width:15px;height:15px;flex:0 0 auto;color:var(--nav-accent);
  transition:transform .3s ease}
.has-dd.dd-open .dd-trigger svg{transform:rotate(180deg)}

/* L2, the services list. 10 + 25.3 + 10 = ~45px, indent 12px, no dividers.
   The 600px ceiling is the measured scrollHeight of the six rows plus 20%. */
.has-dd .dd{display:block;margin:0;padding:0 0 6px 12px;
  max-height:0;overflow:hidden;transition:max-height .35s ease}
.has-dd.dd-open .dd{max-height:600px}
.has-dd .dd>a{display:block;color:var(--nav-fg-2);font-size:.96rem;font-weight:500;
  padding:10px 0;white-space:normal}

/* Rule 15. Last, full width, no divider, margin-top is the only sanctioned margin.
   The label is the site's own phone CTA string, copied rather than invented. */
.navlinks>a.btn{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:28px;padding:16px 20px;text-align:center;
  font-size:1rem;font-weight:700;letter-spacing:.02em;
  border:none;border-radius:var(--r);
  background:var(--nav-accent);color:var(--nav-cta-fg)}
.navlinks>a.btn svg{width:16px;height:16px}
/* Rule 14b. Hover is a desktop affordance; on touch it eats the first tap. */
@media (hover:hover){
  .navlinks>a:hover,.has-dd .dd>a:hover{color:var(--nav-accent)}
  .navlinks>a.btn:hover{color:var(--nav-cta-fg);opacity:.9}
}

/* ---------- 5. Hero ------------------------------------------------------ */
/* the hero is one composited layer: the big photo, the shade and the wide
   text shadows all rasterise once instead of repainting on every scroll frame */
.hero{min-height:min(92dvh,860px);display:flex;align-items:center;overflow:hidden;
  background:var(--forest-900);will-change:transform}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);opacity:0;
  animation:heroIn 2.6s var(--ease) .25s forwards}
@keyframes heroIn{to{opacity:1;transform:scale(1)}}
/* one even shade over the whole photo so nothing in it competes with the type */
.hero-scrim{position:absolute;inset:0;background:rgba(5,17,11,.44)}
.hero-scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,17,11,.22) 0%,rgba(5,17,11,0) 38%,rgba(5,17,11,.34) 100%)}
.hero .shell{position:relative;z-index:2;padding:96px 0 96px;color:#fff}
.hero h1{color:#fff;max-width:none;font-size:clamp(1.85rem,4.9vw,4.3rem);text-wrap:balance;
  text-shadow:0 0 16px rgba(3,18,11,.55), 0 0 48px rgba(3,18,11,.45),
              0 0 110px rgba(3,18,11,.4), 0 3px 24px rgba(3,18,11,.4)}
/* the two lines are deliberate, so the second half is its own block */
/* Near white with only a trace of the sage cast. The full --sage-200 sat too close to the
   green foliage behind it and read as low contrast. */
.hero h1 em{font-style:italic;color:#EAF2EE;line-height:1.12;padding-bottom:.06em;display:block}
.hero .eyebrow{color:#fff;display:flex;align-items:center;gap:12px;margin-bottom:22px;
  text-shadow:0 0 7px rgba(3,18,11,.85), 0 0 7px rgba(3,18,11,.7),
              0 0 20px rgba(3,18,11,.7), 0 0 52px rgba(3,18,11,.55), 0 0 110px rgba(3,18,11,.4)}
.hero .eyebrow s{display:block;width:54px;height:1px;background:var(--sage-200);text-decoration:none;
  box-shadow:0 0 10px rgba(3,18,11,.85), 0 0 30px rgba(3,18,11,.6)}
.hero .sub{color:#fff;font-size:clamp(1.02rem,1.3vw,1.2rem);max-width:52ch;margin-top:22px;
  text-shadow:0 0 10px rgba(3,18,11,.75), 0 0 34px rgba(3,18,11,.55)}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-cta .btn{box-shadow:0 6px 30px rgba(3,18,11,.45)}
.hero-cta .btn-ghost{background:rgba(6,42,26,.42)}

/* ---------- 5b. Interior page hero, shared by every non-home page --------- */
.phero{min-height:min(66dvh,620px);display:flex;align-items:center;overflow:hidden;
  position:relative;background:var(--forest-900)}
.phero-media{position:absolute;inset:0;overflow:hidden}
.phero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);opacity:0;
  animation:heroIn 1.6s var(--ease) .25s forwards}
.phero-scrim{position:absolute;inset:0;background:rgba(5,17,11,.5)}
.phero-scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,42,26,.5),rgba(6,42,26,.18) 42%,rgba(6,42,26,.72))}
.phero .shell{position:relative;z-index:2;padding:132px 0 84px;color:#fff}
.phero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.9rem);text-wrap:balance;max-width:17ch}
.phero .eyebrow{color:#fff;display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.phero .eyebrow s{display:block;width:54px;height:1px;background:var(--sage-200);
  text-decoration:none;flex:0 0 auto}
.phero .sub{color:#fff;font-size:clamp(1.02rem,1.3vw,1.2rem);max-width:56ch;margin-top:22px;
  line-height:1.68}

/* ---------- 6. Credential strip ------------------------------------------ */
.strip{background:var(--forest-800);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.strip .cell{background:var(--forest-800);padding:34px 28px}
.strip .k{font-family:"EB Garamond",Georgia,serif;font-size:1.5rem;color:#fff;line-height:1.1}
.strip .v{font-size:.8rem;color:var(--sage-300);margin-top:8px;letter-spacing:.05em}

/* ---------- 7. Generic section ------------------------------------------- */
.pad{padding:clamp(80px,10vw,140px) 0}
.pad-sm{padding:clamp(60px,7vw,96px) 0}
.head-stack{max-width:64ch}
.head-stack h2{margin-bottom:20px}

/* ---------- 8. Local story ----------------------------------------------- */
.local{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.local-media{position:relative}
.local-media .frame{overflow:hidden;border-radius:var(--r);aspect-ratio:4/5}
.local-media .frame img{width:100%;height:100%;object-fit:cover}
.local-media .badge{
  position:absolute;right:-18px;bottom:-18px;background:var(--forest-700);color:#fff;
  padding:22px 26px;border-radius:var(--r);max-width:230px;
  box-shadow:0 30px 60px -34px rgba(6,42,26,.9);
}
.local-media .badge .n{font-family:"EB Garamond",Georgia,serif;font-size:1.9rem;line-height:1}
.local-media .badge .t{font-size:.74rem;letter-spacing:.06em;color:var(--sage-200);margin-top:6px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pill{border:1px solid var(--line);border-radius:var(--r);padding:7px 14px;font-size:.79rem;color:var(--muted);
  transition:border-color .3s,color .3s,background-color .3s,transform .3s var(--ease)}
.pill:hover{border-color:var(--forest-500);color:var(--forest-700);background:var(--sage-50);transform:translateY(-2px)}

/* ---------- 9. Marquee of coast communities ------------------------------ */
.marq{background:var(--sage-50);border-block:1px solid var(--line);overflow:hidden;padding:20px 0}
.marq-track{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq span{
  font-family:"EB Garamond",Georgia,serif;font-size:clamp(1.15rem,2vw,1.7rem);
  color:var(--forest-500);padding:0 30px;display:flex;align-items:center;gap:30px;white-space:nowrap;
}
.marq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--sage-300)}

/* ---------- 10. Services ------------------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.svc.c7{grid-column:span 7}.svc.c5{grid-column:span 5}
.svc.c4{grid-column:span 4}.svc.c12{grid-column:span 12}
.svc{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--forest-900);color:#fff;min-height:330px;display:flex;align-items:flex-end;
  transition:transform .5s var(--ease);
}
.svc:hover{transform:translateY(-4px)}
/* the photo fills the card; inset:0 gives height:100% something to resolve against */
.svc .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.svc:hover .ph{transform:scale(1.05)}
/* scrim sits over the photo and under the copy, so white text always holds */
.svc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,42,26,.16) 0%,rgba(6,42,26,.52) 46%,rgba(6,42,26,.9) 100%)}
.svc .body{position:relative;z-index:2;padding:30px 32px}
/* the service name is what people scan, so it is set a step above the base h3.
   The shadow is a fanned ramp, tight to wide with the alpha dropping as the blur
   grows, so the falloff reads smooth instead of as one hard halo. */
.svc h3{color:#fff;font-size:clamp(1.42rem,2.1vw,1.85rem);
  text-shadow:0 1px 2px rgba(6,42,26,.62), 0 2px 12px rgba(6,42,26,.55),
              0 6px 30px rgba(6,42,26,.48), 0 12px 62px rgba(6,42,26,.42)}
.svc p{color:rgba(255,255,255,.86);font-size:.93rem;margin-top:10px;max-width:42ch}
.svc .season{margin-top:20px;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-200)}
/* the wide card sits on its own row, so the copy gets a column instead of the full width */
.svc.c12{min-height:300px}
.svc.c12 .body{max-width:62ch}


/* ---------- 11. Promise ("what managers get") ---------------------------- */
.promise{background:var(--bone);text-align:center}
.promise .head-stack{margin-inline:auto}
.promise .lead{margin-inline:auto}
.call-row{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:38px}
.call-note{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.call-or{font-size:.95rem;color:var(--muted)}
.call-or a{color:var(--forest-700);border-bottom:1px solid rgba(1,83,50,.35)}
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.promise-grid .it{padding:34px 30px 34px 0;border-top:2px solid var(--forest-700);margin-right:30px}
.promise-grid .it:last-child{margin-right:0}
.promise-grid h3{font-size:1.28rem;margin-bottom:12px}
.promise-grid p{font-size:.93rem;color:var(--muted)}

/* ---------- 12. Quote ---------------------------------------------------- */
.quote{background:var(--forest-700);color:#fff;text-align:center;overflow:hidden}
.quote .q{font-family:"EB Garamond",Georgia,serif;font-size:clamp(1.6rem,3.9vw,3.1rem);
  line-height:1.22;margin-inline:auto}
/* three separate tag lines, so each gets its own line at every width */
.quote .q span{display:block}
.quote .a{margin-top:26px;font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sage-200);line-height:1.65}
/* two separate lines, same as the tag lines above it */
.quote .a span{display:block}
.quote .mk{width:40px;height:auto;margin:0 auto 28px;opacity:.92}

/* ---------- 13. Work gallery --------------------------------------------- */
.rail{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;scroll-snap-type:x proximity;padding-bottom:20px;
  margin-inline:calc((100vw - var(--shell)) / -2);
  padding-inline:calc((100vw - var(--shell)) / 2);
  scroll-padding-left:calc((100vw - var(--shell)) / 2);
  scrollbar-width:thin;scrollbar-color:var(--sage-300) transparent}
.rail-hint{margin-top:16px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--sage-300)}
.rail figure{margin:0;flex:0 0 min(440px,78vw);scroll-snap-align:start}

.rail .fr{overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--sage-50)}
.rail img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rail figure:hover img{transform:scale(1.06)}
.rail figcaption{margin-top:14px;font-size:.83rem;color:var(--muted);display:flex;justify-content:space-between;gap:14px}
.rail figcaption b{color:var(--ink);font-weight:700}

/* ---------- 14. Team ----------------------------------------------------- */
.team{background:var(--bone)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:860px}
.team-grid .p .ph{overflow:hidden;border-radius:var(--r);aspect-ratio:1/1;background:var(--sage-50)}
.team-grid .p img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28);
  transition:transform .9s var(--ease),filter .6s}
.team-grid .p:hover img{transform:scale(1.06);filter:grayscale(0)}
.team-grid .nm{margin-top:14px;font-family:"EB Garamond",Georgia,serif;font-size:1.06rem}
.team-grid .rl{font-size:.75rem;color:var(--grey);letter-spacing:.04em;margin-top:2px}

/* ---------- 15. Parks and trails division -------------------------------- */
.parks{position:relative;overflow:hidden;background:var(--forest-900);color:#fff}
.parks img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.parks::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,42,26,.93) 0%,rgba(6,42,26,.62) 60%,rgba(6,42,26,.35) 100%)}
.parks .shell{position:relative;z-index:2}
.parks .inner{max-width:56ch}
.parks p{color:rgba(255,255,255,.82);margin-top:20px}

/* ---------- 16. Contact -------------------------------------------------- */
.contact{background:var(--forest-800);color:#fff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,84px)}
.contact h2{color:#fff}
.contact .eyebrow{color:var(--sage-200)}
.contact .lead{color:rgba(255,255,255,.8)}
/* The heading says to call, so the number to call sits directly under it and is
   set at heading scale. The Phone row in .cinfo below stays as a contact detail. */
.contact-phone{display:inline-flex;align-items:center;gap:.4em;margin-top:22px;
  font-family:"EB Garamond",Georgia,serif;font-weight:600;line-height:1.05;color:#fff;
  font-size:clamp(2.05rem,3.7vw,3rem);letter-spacing:.005em;transition:color .3s}
.contact-phone svg{width:.66em;height:.66em;flex:0 0 auto;stroke-width:2;color:var(--sage-200)}
.contact-phone:hover{color:var(--sage-200)}
.contact-phone:hover svg{color:#fff}
.cinfo{margin-top:34px;display:grid;gap:26px}
.cinfo a,.cinfo div{display:block}
.cinfo .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-300);margin-bottom:5px}
.cinfo .val{font-family:"EB Garamond",Georgia,serif;font-size:1.22rem;color:#fff}
.cinfo a:hover .val{color:var(--sage-200)}

form{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(26px,3.4vw,44px)}
/* Honeypot. Bots fill it, people never see it and never tab into it. Clipped
   rather than display:none, and it takes no space in any direction, so it
   cannot widen the page. Build-Standards "Forms", blank submissions. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:8px;margin-bottom:18px}
.fld label{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--ink);font-size:.95rem;transition:border-color .3s,box-shadow .3s;
}
.fld textarea{min-height:110px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#8B968F}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--forest-700);box-shadow:0 0 0 3px rgba(1,83,50,.14)}
.fld .help{font-size:.76rem;color:var(--muted)}
form .btn{width:100%;margin-top:6px}
.ok{display:none;text-align:center;padding:22px 0}
.ok.show{display:block;animation:fadeUp .6s var(--ease) forwards}
.ok .check{display:block;width:58px;height:58px;margin:0 auto 18px;color:var(--forest-700)}
.ok .check circle{stroke-dasharray:152;stroke-dashoffset:152;animation:ckDraw .62s var(--ease) .05s forwards}
.ok .check path{stroke-dasharray:42;stroke-dashoffset:42;animation:ckDraw .34s var(--ease) .5s forwards}
@keyframes ckDraw{to{stroke-dashoffset:0}}
.ok .t{font-family:"EB Garamond",Georgia,serif;font-size:1.6rem;color:var(--forest-700)}
.ok .s{font-size:.9rem;color:var(--muted);margin-top:8px}
.form-err{margin-top:14px;font-size:.86rem;font-weight:700;color:var(--alert)}
@media (prefers-reduced-motion:reduce){
  .ok .check circle,.ok .check path{animation:none;stroke-dashoffset:0}
}

/* ---------- 17. Footer --------------------------------------------------- */
footer{background:var(--forest-900);color:rgba(255,255,255,.66);font-size:.88rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;padding:clamp(56px,7vw,88px) 0 44px}
.f-grid h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-300);
  margin:0 0 18px;font-weight:700}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* the email address is one long unbreakable token and pushed the footer,
   and so the whole document, 16px wider than the viewport on a small phone */
.f-grid li,.f-grid a{overflow-wrap:anywhere;min-width:0}
.f-grid a:hover{color:#fff}
.f-brand .mark{width:40px;height:auto;margin-bottom:18px}
.f-brand .n1{font-family:"EB Garamond",Georgia,serif;font-weight:600;color:#fff;
  font-size:1.28rem;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.f-brand .n2{font-family:"EB Garamond",Georgia,serif;font-weight:600;color:#fff;
  font-size:.8rem;letter-spacing:.135em;line-height:1;text-transform:uppercase;margin-top:6px}
.f-brand .n3{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage-300);margin-top:9px;font-weight:700}
.f-brand p{margin-top:18px;max-width:38ch;line-height:1.7}
.f-bot{border-top:1px solid var(--line-dark);padding:24px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.79rem;color:rgba(255,255,255,.44)}

/* ---------- 18. Responsive ----------------------------------------------- */
@media (max-width:1080px){
  .menu{display:none}
  .menu-btn{display:flex}
  .promise-grid{grid-template-columns:1fr 1fr}
  .strip .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  /* The hero photo owns the whole first screen on a phone, so the stat divider
     under it starts below the fold. 100svh is the viewport with the browser
     chrome showing, which is what a visitor sees before scrolling; the header is
     in flow above the hero, so its 76px comes off. The vh line is the fallback
     for anything without svh, and it errs taller, which is the safe direction. */
  .hero{min-height:calc(100vh - 46px)}
  .hero{min-height:calc(100svh - 46px)}
  .hero .shell{padding:104px 0 96px}
  /* The locked em line runs about 9.6em wide, so the size has to stay under
     9.58vw or it wraps onto two lines. 8.9vw holds it down to 320px. */
  .hero h1{font-size:clamp(1.85rem,8.9vw,2.6rem)}
  .hero .sub{margin-top:26px}
  /* the client asked for air between the paragraph and the buttons, and between
     the buttons and the section under them */
  .hero-cta{margin-top:52px;gap:16px}
  /* On a phone the header phone number is the whole call to action, so it comes
     out of the button: icon plus number, set large, no box. */
  .nav .call-cta{background:none;border:0;box-shadow:none;border-radius:0;
    padding:4px 2px;color:var(--forest-700);text-transform:none;
    font-size:1.32rem;font-weight:700;letter-spacing:0;gap:9px;white-space:nowrap}
  .nav .call-cta:hover{background:none;box-shadow:none;transform:none;color:var(--forest-800)}
  .nav .call-cta:active{transform:scale(.97)}
  .call-cta svg{width:21px;height:21px;stroke-width:2.1}
  .call-cta .call-label{display:none}
  .local{grid-template-columns:1fr}
  .local-media .badge{right:16px;bottom:-14px}
  .svc-grid{grid-template-columns:1fr}
  .svc.c7,.svc.c5,.svc.c4,.svc.c12{grid-column:span 1}
  .contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px}
  .f2{grid-template-columns:1fr}
  /* tighter vertical rhythm, the page is long on a phone */
  .pad{padding:clamp(66px,9vw,110px) 0}
  .pad-sm{padding:clamp(50px,7vw,80px) 0}
  .head-stack h2{margin-bottom:14px}
  /* 16px minimum stops iOS Safari zooming the page on field focus */
  .fld input,.fld select,.fld textarea{font-size:16px;padding:14px}
  .fld textarea{min-height:96px}
  /* captions collide side by side at phone card width */
  .rail figcaption{display:block;margin-top:11px}
  .rail figcaption span{display:block;margin-top:2px}
  /* let the rail run to the screen edge so the swipe reads as a swipe */
  .rail{margin-inline:calc((100vw - var(--shell)) / -2);
    padding-inline:calc((100vw - var(--shell)) / 2);
    scroll-padding-left:calc((100vw - var(--shell)) / 2)}
  .rail figure{flex:0 0 min(400px,80vw)}
}
@media (max-width:560px){
  .strip .grid{grid-template-columns:1fr 1fr}
  .strip .cell{padding:24px 18px}
  .strip .k{font-size:1.28rem}
  .strip .v{margin-top:6px}
  .promise-grid{grid-template-columns:1fr}
  .promise-grid .it{margin-right:0}
  .team-grid{gap:12px}
  .team-grid .nm{font-size:.92rem;margin-top:10px}
  /* two columns keeps the footer from becoming a scroll of its own */
  .f-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .f-brand{grid-column:1 / -1}
  .hero-cta .btn{width:100%}
  .nav .call-cta{font-size:1.2rem;gap:8px}
  .call-cta svg{width:19px;height:19px}
  .nav{gap:10px}
  .brand{gap:9px}
  .brand .mark{width:27px}
  .brand .bt1{font-size:.9rem;letter-spacing:.07em}
  .brand .bt2{font-size:.55rem;letter-spacing:.1em;margin-top:4px}
  .brand .bt3{font-size:.44rem;letter-spacing:.2em;margin-top:5px}
}
/* Below ~430px the header row is the logo lockup, the phone and the burger,
   nothing else. The lockup keeps all three lines, they just step down. */
@media (max-width:430px){
  .nav{gap:8px}
  .brand{gap:7px}
  .brand .mark{width:24px}
  .brand>span{min-width:0}
  .brand .bt1{font-size:.8rem;letter-spacing:.055em}
  .brand .bt2{font-size:.5rem;letter-spacing:.075em;margin-top:4px}
  .brand .bt3{font-size:.41rem;letter-spacing:.16em;margin-top:4px}
  .nav .call-cta{font-size:1.06rem;gap:7px}
  .call-cta svg{width:17px;height:17px}
}
@media (max-width:340px){
  .nav .call-cta{font-size:.92rem;gap:6px}
  .call-cta svg{width:15px;height:15px}
  .brand .mark{width:21px}
  .brand .bt1{font-size:.7rem;letter-spacing:.03em}
  .brand .bt2{font-size:.44rem;letter-spacing:.05em}
  .brand .bt3{font-size:.37rem;letter-spacing:.12em}
}


/* ---------- 19b. Mobile legibility floor — Mobile-Optimization.md C.4 -----
   No rendered text under 12px on a phone. The header and footer wordmark lines
   (.bt2, .bt3, .n3) are the one exemption: they are logotype, not content, and
   the client-approved three line lockup only survives 320px at those sizes.  */
@media (max-width:900px){
  .eyebrow,.rail-hint,.f-grid h4{font-size:12px}
  .team-grid .rl,.cinfo .lbl,.strip .v,.local-media .badge .t{font-size:12px}
}

/* ---------- 20. Services dropdown in the header --------------------------- */
/* the hover target is the wrapper, and the spacing under the label is padding,
   never margin, so the cursor never crosses a dead gap on the way down */
.menu .has-sub{position:relative;display:flex;align-items:center}
.menu .has-sub>a{display:inline-flex;align-items:center;gap:7px}
.menu .caret{width:9px;height:9px;flex:0 0 auto;transition:transform .35s var(--ease)}
/* Rule 14b. A synthesised hover on a touchscreen laptop would open the panel and
   spend the tap, so :hover is gated on a real pointer and .open is the tap path. */
@media (hover:hover){
  .menu .has-sub:hover .caret{transform:rotate(180deg)}
}
.menu .has-sub:focus-within .caret,.menu .has-sub.open .caret{transform:rotate(180deg)}
.menu .sub{
  position:absolute;top:100%;left:-18px;min-width:290px;padding-top:16px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  transition-delay:150ms;                     /* a diagonal cursor path keeps it open */
}
@media (hover:hover){
  .menu .has-sub:hover .sub{opacity:1;visibility:visible;transform:none;transition-delay:0ms}
}
.menu .has-sub:focus-within .sub,.menu .has-sub.open .sub{
  opacity:1;visibility:visible;transform:none;transition-delay:0ms}
.menu .sub-inner{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;box-shadow:0 34px 60px -34px rgba(6,42,26,.55);display:grid;gap:2px}
.menu .sub a{display:block;padding:10px 14px;font-size:.84rem;color:var(--muted);
  border-radius:var(--r);white-space:nowrap;transition:background-color .25s,color .25s}
.menu .sub a::after{display:none}
.menu .sub a:hover{background:var(--sage-50);color:var(--forest-700)}

/* ---------- 21. Service pages -------------------------------------------- */
/* B.2.7. The header is sticky, so EVERY anchor target needs clearance, not just
   the form. #rfp is the form itself, because #contact lands on the text column
   once the two columns stack on a phone. */
#top,#coverage,#services,#work,#team,#contact,#rfp,.areas{scroll-margin-top:96px}
/* one column of prose at a readable measure, the same rhythm as the home page */
.prose h2{margin-top:0}
.prose h3{color:var(--forest-700);margin-bottom:10px}
.prose p{color:var(--muted);font-size:1.02rem;line-height:1.75;max-width:68ch}
.prose p+p{margin-top:18px}
.prose>*+h2{margin-top:clamp(46px,5vw,66px)}
.prose>h2+p{margin-top:18px}

/* one prose column, the same left aligned measure the home page sections use.
   The sidebar cards were removed at the client's request on 2026-09-03. */
.svc-body{display:block}
.svc-body .prose{max-width:74ch}

/* what is included, a plain checked list */
.tick{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.tick li{position:relative;padding-left:28px;font-size:.97rem;color:var(--muted);line-height:1.55}
.tick li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--forest-500);border-bottom:2px solid var(--forest-500);
  transform:rotate(-45deg)}

/* numbered process steps */
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;counter-reset:st}
.steps li{position:relative;padding-left:56px;counter-increment:st}
.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;background:var(--sage-50);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:"EB Garamond",Georgia,serif;font-size:1.05rem;color:var(--forest-700)}
.steps h3{font-size:1.08rem;margin-bottom:5px}
.steps p{font-size:.96rem}

/* the service area block, one card per town */
.areas{background:var(--bone)}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:40px}
.area-grid .ar{background:var(--bone);padding:32px 30px 34px}
.area-grid h3{font-size:1.2rem;color:var(--forest-700);margin-bottom:12px}
.area-grid p{font-size:.94rem;color:var(--muted);line-height:1.65}
.area-rest{margin-top:34px;font-size:.95rem;color:var(--muted);line-height:1.8}
.area-rest b{color:var(--ink)}

/* FAQ, one open at a time is not needed, so these are plain details blocks */
.faq{display:grid;gap:0;margin-top:38px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:"EB Garamond",Georgia,serif;font-size:clamp(1.08rem,1.6vw,1.32rem);
  color:var(--ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:calc(50% - 5px);
  width:11px;height:11px;border-right:2px solid var(--forest-500);
  border-bottom:2px solid var(--forest-500);transform:rotate(45deg);
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq .ans{padding:0 0 24px}
.faq .ans p{font-size:.98rem;color:var(--muted);line-height:1.72;max-width:74ch}
.faq .ans p+p{margin-top:14px}

/* sibling services, the internal link mesh at the foot of every service page */
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.more-card{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 28px;
  transition:border-color .35s,background-color .35s,transform .35s var(--ease)}
.more-card:hover{border-color:var(--forest-500);background:var(--sage-50);transform:translateY(-3px)}
.more-card h3{font-size:1.08rem;color:var(--forest-700);margin-bottom:8px}
.more-card p{font-size:.9rem;color:var(--muted);line-height:1.55}

/* breadcrumb. scoped tightly, a bare nav{} rule would also catch the header nav */
.crumb{font-size:.78rem;color:var(--grey);letter-spacing:.05em;padding:22px 0 0}
.crumb a{color:var(--forest-500)}
.crumb a:hover{color:var(--forest-700)}
.crumb span{padding:0 8px;color:var(--line)}

/* headings the client asked to break onto set lines */
.split span{display:block}

@media (max-width:1080px){
  .area-grid{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .phero{min-height:auto}
  .phero .shell{padding:112px 0 56px}
}
@media (max-width:560px){
  .tick{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .phero-media img{animation:none;opacity:1;transform:none}
}

/* ---------- 19. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;scale:1 1!important}
  [data-reveal="img"] img{transform:none!important}
  .cur-dot,.cur-ring{display:none}
  .marq-track{animation:none}
}