/* The Urban Gardeners — concept design by ArloWebStudio
   Warm & botanical. Shared stylesheet for all pages. */

:root{
  --paper:#FAF5E9; --paper-2:#F3EAD6; --paper-3:#EBE0C7; --white:#FFFCF4;
  --ink:#2B3325; --ink-soft:#5D6B52; --ink-faint:#9AA48C;
  --moss:#4A7A45; --moss-deep:#2F5232; --leaf:#82A855;
  --terra:#C46C46; --terra-2:#A95635; --bloom:#C2718E; --gold:#DFA63C;
  --line:rgba(43,51,37,.15); --line-soft:rgba(43,51,37,.08);
  --disp:'Fraunces',Georgia,serif; --hand:'Caveat',cursive; --body:'Karla',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.9,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.72;color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.1;letter-spacing:-.018em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px;position:relative;z-index:2}

/* anchor jumps must clear the sticky chrome or the target heading lands
   underneath it. 100px covers the 84px header; the About page stacks a second
   sticky jump-nav below the header, so its sections need the sum of both. */
section[id],[id="faq"],[id="contact"]{scroll-margin-top:100px}
.about-nav~section[id]{scroll-margin-top:168px}

/* Layout model, settled after trying edge-anchoring and a boxed canvas:
   content lives in the centred 1200px .wrap; section BACKGROUNDS (colour or
   scrimmed photograph) span the full viewport. Same pattern as
   arlowebstudio.com. Overlay copy therefore centres with the content column
   on wide screens — that is intended, not drift. */
.narrow{max-width:900px}
.block{padding:clamp(60px,7.5vw,110px) 0;position:relative}
.lbl{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--moss)}
.hand{font-family:var(--hand);font-size:1.5rem;line-height:1.35;color:var(--terra)}
.lead{font-size:1.12rem;color:var(--ink-soft)}
em.it{font-style:italic;color:var(--moss)}

/* No hover states on things that cannot be clicked — they read as buttons.
   Removed: .area pills (<span>), .tcard reviews (<figure>), the "Not sure?"
   card (<article> — the five service cards next to it are <a class="card
   svcpic"> and keep theirs), and the accreditation marks. Kept: .gallery
   figure (opens the lightbox via site.js) and .pc-stage revealing the
   carousel arrows, which are real buttons. */

/* ── buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.86rem;font-weight:600;
     letter-spacing:.04em;padding:15px 30px;border:none;border-radius:100px;cursor:pointer;
     transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .4s}
.btn-moss{background:var(--moss);color:var(--white);box-shadow:0 10px 22px -14px rgba(47,82,50,.9)}
.btn-moss:hover{background:var(--moss-deep);transform:translateY(-3px)}
.btn-terra{background:var(--terra);color:var(--white);box-shadow:0 10px 22px -14px rgba(169,86,53,.9)}
.btn-terra:hover{background:var(--terra-2);transform:translateY(-3px)}
.btn-line{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--moss);color:var(--moss);transform:translateY(-3px)}
.btn-sm{padding:11px 22px;font-size:.78rem}

/* ── header ──────────────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:rgba(250,245,233,.86);backdrop-filter:blur(9px);transition:box-shadow .35s,background .35s}
header.stuck{box-shadow:0 1px 0 var(--line-soft),0 12px 30px -26px rgba(43,51,37,.6);background:rgba(250,245,233,.95)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand img{height:52px;width:auto}
.brand em{font-family:var(--hand);font-style:normal;font-size:1.05rem;color:var(--ink-faint);
          border-left:1px solid var(--line);padding-left:13px;line-height:1.2;max-width:110px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links>a,.nav-links>.hasmenu>a{font-size:.88rem;font-weight:500;color:var(--ink-soft);position:relative;transition:color .25s;white-space:nowrap}
.nav-links a.on{color:var(--moss)}
.nav-links>a::after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--leaf);border-radius:2px;transition:right .35s var(--ease)}
.nav-links>a:hover::after{right:0}
.nav-links>a:hover{color:var(--moss)}
.hasmenu{position:relative}
.hasmenu>a{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hasmenu>a svg{width:11px;height:11px;opacity:.6}
.submenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--white);border:1px solid var(--line-soft);border-radius:16px;padding:12px;min-width:260px;
  box-shadow:0 30px 54px -34px rgba(43,51,37,.55);opacity:0;visibility:hidden;transition:all .3s var(--ease);z-index:70}
.hasmenu:hover .submenu,.hasmenu:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:10px 14px;border-radius:10px;font-size:.88rem;color:var(--ink-soft);transition:.22s}
.submenu a:hover{background:var(--paper-2);color:var(--moss)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}

/* ── ink illustrations ───────────────────────────── */
.ink{color:var(--moss);opacity:.42;position:absolute;pointer-events:none;z-index:1}
.ink svg,.ill svg,.hello-ill svg{width:100%;height:100%;display:block}
.ill,.hello-ill{display:block}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── home hero ───────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(46px,6.5vw,84px) 0 clamp(56px,7vw,100px)}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);z-index:0}
.hero::before{width:520px;height:520px;background:rgba(130,168,85,.20);top:-160px;left:-170px}
.hero::after{width:460px;height:460px;background:rgba(223,166,60,.17);bottom:-190px;right:-140px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(36px,5.5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.5rem,5.8vw,4.4rem);max-width:14ch;margin-top:14px}
.hero h1 em{font-style:italic;color:var(--moss)}
.hero .lead{margin-top:24px;max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-trust{display:flex;align-items:center;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.hero-trust img{height:46px;width:auto;opacity:.8;transition:opacity .3s}
.hero-trust p{font-size:.83rem;color:var(--ink-faint);max-width:24ch;line-height:1.5}
.hero-art{position:relative}
.seal{position:absolute;bottom:-24px;left:-24px;width:118px;height:118px;border-radius:50%;background:var(--terra);color:var(--white);
  display:grid;place-items:center;text-align:center;box-shadow:0 18px 34px -18px rgba(169,86,53,.9)}
.seal .inner{font-family:var(--disp);font-size:.98rem;line-height:1.15;font-style:italic}
.seal .inner b{display:block;font-family:var(--body);font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-top:5px}
.ink-sprig-hero{width:150px;height:190px;top:-34px;right:-30px;color:var(--moss);opacity:.5;transform:rotate(12deg)}

/* ── hello ───────────────────────────────────────── */
.hello{background:var(--paper-2)}
.hello-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center}
.hello-ill{width:clamp(120px,15vw,180px);color:var(--moss);opacity:.55}
.hello h2{font-size:clamp(1.7rem,3.4vw,2.7rem);max-width:22ch}
.hello p{margin-top:16px;max-width:56ch;color:var(--ink-soft)}

/* ── full-bleed hero ─────────────────────────────── */
.hero-full{position:relative;min-height:clamp(560px,86vh,900px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Two-axis scrim: a strong left-weighted wash puts the copy on genuinely dark
   ground, while the right of the photograph stays open and readable. */
.hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(14,26,16,.92) 0%,rgba(14,26,16,.82) 26%,rgba(14,26,16,.56) 55%,rgba(14,26,16,.20) 78%,rgba(14,26,16,0) 100%),
    linear-gradient(180deg,rgba(14,26,16,.42) 0%,rgba(14,26,16,.12) 34%,rgba(14,26,16,.40) 68%,rgba(14,26,16,.76) 100%)}
.hero-full-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(46px,7vh,90px)}
.hero-full .hero-copy{color:var(--paper);max-width:760px}
.chip-light{display:inline-flex;align-items:center;gap:9px;background:rgba(250,245,233,.13);border:1px solid rgba(250,245,233,.3);
  backdrop-filter:blur(5px);padding:9px 18px;border-radius:100px;font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.hero-full h1{font-size:clamp(2.7rem,6.6vw,5.2rem);letter-spacing:-.025em;max-width:15ch;color:var(--white)}
.hero-full h1 em{font-style:italic;color:#C9E29E}
.hero-full .lead{color:rgba(250,245,233,.88);font-size:clamp(1.05rem,1.6vw,1.3rem);margin-top:16px}
.hero-full .hero-cta{margin-top:30px}
.btn-glass{background:rgba(250,245,233,.14);border:1.5px solid rgba(250,245,233,.45);color:var(--paper);backdrop-filter:blur(5px)}
.btn-glass:hover{background:rgba(250,245,233,.26);transform:translateY(-3px)}
.lbl-light{color:#C9E29E}
/* same layout as the old split hero, adapted for the dark background */
.hero-full .lead{max-width:52ch}
.hero-full .hero-trust{display:flex;align-items:center;gap:18px;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(250,245,233,.28);flex-wrap:wrap}
/* Official high-res marks: the RHS vector is recoloured cream for the dark hero,
   the Guild mark carries its own green field. No inversion, no chip. Sized per
   mark because their aspect ratios differ (RHS 2.27:1, Guild 1.67:1). */
.hero-full .hero-trust img{width:auto;display:block;opacity:1;filter:none}
.hero-full .hero-trust .mark-rhs{height:58px}
.hero-full .hero-trust .mark-guild{height:52px;border-radius:3px}
.hero-full .hero-trust p{font-size:.83rem;color:rgba(250,245,233,.8);max-width:26ch;line-height:1.5}

/* ── feature splits (Hortisan-style image/text rhythm) ── */
.feature-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5.5vw,84px);align-items:center}
.feature-grid.flip{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.feature-grid h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:6px 0 18px}
.feature-grid p{color:var(--ink-soft);margin-bottom:14px;max-width:54ch}
.feature-img{position:relative}
.ink-fern-feat{width:130px;height:165px;bottom:-30px;right:-24px;transform:rotate(14deg);opacity:.45}

/* ── About: the seasons frame + self-drawing ink flourishes ──
   His seasonal photography cross-fades spring → summer → autumn inside one
   arch frame, each shot on a barely-perceptible slow zoom. The animation IS
   the photography; ink line work adds the hand-drawn charm on arrival. */
/* The arch is gone (client: "I really don't like the arched image thing").
   The frame is landscape now and stays INSIDE the content column with normal
   margin either side. An earlier version bled off the left edge and grew with
   the viewport — it read as far too big, left no space beside it, and kept
   scaling up on wide screens. The track is a clamp with a hard ceiling, so
   past ~1420px the picture simply stops growing. */
/* stretch, not center: the frame is sized by the copy beside it so its top
   lines up with "Hello —" and its foot with the "More about us" button. That
   means no fixed aspect ratio here — the height comes from the text, and
   object-fit:cover on the photographs absorbs whatever ratio that leaves. */
.feature-grid.about-split{grid-template-columns:clamp(280px,38vw,540px) minmax(0,1fr);
  gap:clamp(30px,4.2vw,64px);align-items:stretch}
.about-art{position:relative;width:100%}
.about-split .about-art{display:flex;flex-direction:column}
.seasons-frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-3);
  border-radius:22px;box-shadow:0 40px 70px -48px rgba(43,51,37,.55)}
.about-split .seasons-frame{flex:1 1 auto;aspect-ratio:auto;min-height:0}
/* cover, not stretch — the frame's height comes from the copy beside it, so
   its ratio floats and the photographs must crop to fit rather than distort */
.season-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity,transform;animation:seasonturn 24s ease-in-out infinite}
.season-img:nth-child(2){animation-delay:8s}
.season-img:nth-child(3){animation-delay:16s}
/* each image owns a third of the 24s cycle; fades overlap by ~1s for a true
   cross-fade, and the slow scale is the Ken Burns drift */
@keyframes seasonturn{
  0%{opacity:0;transform:scale(1)}
  4%{opacity:1}
  33.3%{opacity:1;transform:scale(1.06)}
  37.5%{opacity:0;transform:scale(1.065)}
  100%{opacity:0;transform:scale(1)}
}
/* the caption sits ON the photograph, not under it — below the frame it would
   push the picture up and its foot would stop short of the button opposite */
.season-caps{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:auto;padding:64px 24px 20px;margin:0;text-align:left;font-size:1.35rem;
  color:var(--paper);pointer-events:none;border-radius:0 0 22px 22px;
  background:linear-gradient(to top,rgba(18,29,18,.62),rgba(18,29,18,.28) 52%,rgba(18,29,18,0))}
.season-cap{position:absolute;left:24px;right:24px;bottom:18px;opacity:0;
  animation:capturn 24s ease-in-out infinite}
.season-cap:nth-child(2){animation-delay:8s}
.season-cap:nth-child(3){animation-delay:16s}
@keyframes capturn{
  0%{opacity:0}4%{opacity:1}33.3%{opacity:1}37.5%{opacity:0}100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .season-img,.season-cap{animation:none}
  .season-img:first-child,.season-cap:first-child{opacity:1}
}

/* "Our approach" — folded into the About copy under a handwritten subheading */
.approach{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-soft)}
.approach .hand{display:block;margin-bottom:4px}
.approach-line{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;color:var(--ink);
  max-width:none;margin-bottom:0}
/* two-up big project cards (specificity beats the base .cards/.card rules below) */
.cards.cards-2{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.card.bigcard .thumb{aspect-ratio:3/2}
.card.bigcard h3{font-size:1.55rem}

/* ── image-topped service cards ──────────────────── */
.svcpic .thumb{aspect-ratio:16/10}
/* icon sits in the flow beside the heading — nothing overlaps the photo or
   the heading at any viewport width */
.svcpic .body{padding-top:24px}
.svcpic .ill-mini{display:inline-flex;width:48px;height:48px;padding:10px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line-soft);color:var(--moss);
  margin-bottom:14px;transition:transform .5s var(--ease),color .35s}
.svcpic:hover .ill-mini{transform:rotate(-8deg) scale(1.08);color:var(--terra)}

/* ── estates: full-bleed, mirrored hero treatment ──
   image edge-to-edge, scrim weighted to the RIGHT, copy on the right */
.estates-full{position:relative;overflow:hidden;padding:clamp(66px,8vw,110px) 0;color:var(--paper)}
.est-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.est-shade{position:absolute;inset:0;
  background:
    linear-gradient(260deg,rgba(14,26,16,.92) 0%,rgba(14,26,16,.84) 30%,rgba(14,26,16,.60) 55%,rgba(14,26,16,.22) 78%,rgba(14,26,16,0) 100%),
    linear-gradient(180deg,rgba(14,26,16,.38) 0%,rgba(14,26,16,.16) 40%,rgba(14,26,16,.42) 100%)}
.est-inner{position:relative;z-index:2;display:flex;justify-content:flex-end}
.est-copy{max-width:600px}
.estates-full .hand{color:#C9E29E}
.estates-full h2{color:var(--white);font-size:clamp(1.9rem,3.8vw,3rem);margin:6px 0 18px}
.estates-full p{color:rgba(250,245,233,.8);margin-bottom:14px;max-width:56ch}
.est-points{list-style:none;margin:6px 0 20px}
.est-points li{position:relative;padding-left:32px;margin-bottom:10px;color:rgba(250,245,233,.82)}
.est-points li::before{content:'';position:absolute;left:4px;top:.5em;width:9px;height:9px;border-radius:50%;
  background:var(--lime,#8CC63F);background:#A8DC5B;box-shadow:0 0 0 3px rgba(168,220,91,.22)}
.est-points strong{color:var(--white)}
.est-quote{border-left:3px solid #A8DC5B;padding:6px 0 6px 20px;margin:20px 0 26px;
  font-family:var(--disp);font-style:italic;font-size:1.08rem;color:rgba(250,245,233,.9)}
.est-quote .who{display:block;font-family:var(--hand);font-style:normal;font-size:1.3rem;color:#C9E29E;margin-top:8px}
.btn-ghost{background:transparent;border:1.5px solid rgba(250,245,233,.4);color:var(--paper)}
.btn-ghost:hover{border-color:#C9E29E;color:#C9E29E;transform:translateY(-3px)}
@media(max-width:800px){
  /* stacked: even the "light" side sits behind text, so darken uniformly */
  .est-shade{background:linear-gradient(180deg,rgba(14,26,16,.62),rgba(14,26,16,.88))}
  .est-copy{max-width:100%}
}


/* ── reader view (news posts) ────────────────────── */
.reader{max-width:780px;margin:0 auto}
.reader .prose{font-size:1.07rem}
.reader .prose p{line-height:1.85}
.reader .prose h2{margin-top:44px}
.reader .prose figure{margin:34px 0}
.backlink{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--moss);margin:0 0 26px;transition:transform .3s var(--ease)}
.reader .prose+ .backlink,.reader> .backlink:last-child{margin:34px 0 0}
.backlink:hover{transform:translateX(-4px)}

/* (the inline Toby portrait and its arch frame were retired with the arch —
   the About page now uses .story-portrait / .portrait-frame) */

/* ── inert nav links (single-page concept) ───────── */
.nav-links a.inert{cursor:default}
.nav-links a.inert:hover{color:var(--ink-soft)}
.nav-links>a.inert:hover::after{right:100%}
.submenu a.inert:hover{background:var(--paper-2);color:var(--ink-soft)}

/* ── slim footer (mockup) ────────────────────────── */
footer.slim{padding:44px 0 26px}
.f-slim{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line-soft)}
.f-slim .flogo{height:38px;margin:0}
.f-slim .f-mid{display:flex;gap:26px;flex-wrap:wrap}
.f-slim .f-mid a{font-family:var(--disp);font-size:1.12rem}
.f-slim .f-mid a:hover{color:var(--moss)}
.f-slim .f-badges{margin-top:0}

/* (photo band removed — "Our approach" now lives inside the About copy) */

/* ── featured quote card ─────────────────────────── */
.qcard{background:var(--white);border-radius:26px;padding:clamp(38px,5.5vw,68px) clamp(26px,6vw,84px);text-align:center;
  position:relative;box-shadow:0 40px 70px -54px rgba(43,51,37,.6);border:1px solid var(--line-soft)}
.qcard .ink{opacity:.32}
.qcard .ink-a{width:104px;height:134px;top:-24px;left:24px;transform:rotate(-16deg)}
.qcard .ink-b{width:104px;height:134px;bottom:-24px;right:24px;transform:rotate(160deg)}
.qcard .stars{display:flex;gap:6px;justify-content:center;color:var(--gold);margin-bottom:20px}
.qcard .stars svg{width:18px;height:18px}
.qcard blockquote{font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.38;
  max-width:30ch;margin:0 auto;position:relative;z-index:2}
.qcard .who{margin-top:22px;font-family:var(--hand);font-size:1.5rem;color:var(--moss)}

/* ── testimonial carousel ────────────────────────── */
.t-slides{position:relative;transition:min-height .45s var(--ease)}
/* only short reviews reach the homepage carousel, so the display size can stay
   generous without the card ballooning to fit its tallest slide */
.t-carousel .t-slide blockquote{font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.5;max-width:52ch}
.t-slide{position:absolute;top:0;left:0;right:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility 0s .5s}
.t-slide.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.t-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--moss);display:grid;place-items:center;
  cursor:pointer;z-index:3;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.t-nav svg{width:20px;height:20px}
.t-nav:hover{background:var(--moss);border-color:var(--moss);color:var(--white);transform:translateY(-50%) scale(1.06)}
.t-prev{left:16px}
.t-next{right:16px}
@media(max-width:680px){
  /* arrows drop out of the card sides into a row above the button */
  .t-arrows{display:flex;justify-content:center;gap:14px;margin-top:20px}
  .t-nav{position:static;transform:none;width:42px;height:42px}
  .t-nav:hover{transform:scale(1.06)}
}

/* ── photo carousel (estate page) ────────────────── */
.photo-carousel{margin:0 0 28px}
.pc-stage{position:relative;border-radius:16px;overflow:hidden;background:var(--paper-3);
  box-shadow:0 30px 54px -38px rgba(43,51,37,.6)}
.pc-slides{position:relative;aspect-ratio:16/10}
/* Fade-in-on-top cross-fade: the incoming slide (.on, z2) fades in OVER the
   outgoing one (.prev, z1) which stays fully opaque — so the backdrop never
   shows through mid-transition (that was the flicker). */
.pc-slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;
  transition:opacity .7s var(--ease)}
.pc-slide.prev{opacity:1;z-index:1;transition:none}
.pc-slide.on{opacity:1;z-index:2}
.pc-slide img{width:100%;height:100%;object-fit:cover}
.pc-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(250,245,233,.86);color:var(--forest,#12291B);color:var(--moss-deep);
  display:grid;place-items:center;cursor:pointer;z-index:2;opacity:0;transition:opacity .3s,background .25s,transform .3s var(--ease)}
.pc-nav svg{width:20px;height:20px}
.pc-stage:hover .pc-nav{opacity:1}
.pc-nav:hover{background:var(--white);transform:translateY(-50%) scale(1.08)}
.pc-prev{left:14px}
.pc-next{right:14px}
.pc-count{position:absolute;bottom:12px;right:14px;z-index:2;background:rgba(20,32,20,.6);color:var(--paper);
  font-family:var(--mono,var(--body));font-size:.72rem;letter-spacing:.05em;padding:5px 11px;border-radius:100px}
.pc-count b{font-weight:600}
/* thumbnails share the width evenly so the strip always fits on one line —
   a scrolling strip under a large image looked awful */
.pc-thumbs{display:flex;gap:8px;margin-top:10px}
.pc-thumb{flex:1 1 0;min-width:0;height:54px;border:2px solid transparent;border-radius:8px;overflow:hidden;
  cursor:pointer;padding:0;background:none;opacity:.6;transition:opacity .25s,border-color .25s,transform .3s var(--ease)}
.pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pc-thumb:hover{opacity:.95;transform:translateY(-2px)}
.pc-thumb.on{opacity:1;border-color:var(--moss)}
@media(prefers-reduced-motion:reduce){.pc-slide{transition:opacity .001s}}

/* ══ ESTATE PAGE ══════════════════════════════════
   Componentised: his copy is rendered as feature lists, a client roster, area
   pills and a badge rather than one long prose column, so large imagery has
   room to breathe between blocks. */
/* ── audience switcher ────────────────────────────
   644 words of copy previously ran to 7 screens because the same tall layout
   repeated twice. One panel shown at a time keeps the page ~3 screens and lets
   a single confident layout carry the large imagery. */
.aud-sec{position:relative;padding:clamp(46px,5.5vw,74px) 0 clamp(56px,7vw,96px)}
.aud-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:0 auto clamp(34px,4vw,52px)}
.aud-tab{display:block;text-align:left;background:var(--white);border:1.5px solid var(--line-soft);
  border-radius:16px;padding:18px 22px;cursor:pointer;transition:all .3s var(--ease)}
.aud-tab:hover{border-color:var(--leaf);transform:translateY(-2px)}
.aud-tab-t{display:block;font-family:var(--disp);font-size:1.28rem;color:var(--ink);line-height:1.15}
.aud-tab-s{display:block;font-size:.8rem;color:var(--ink-faint);margin-top:4px}
.aud-tab.on{background:var(--moss-deep);border-color:var(--moss-deep)}
.aud-tab.on .aud-tab-t{color:var(--white)}
.aud-tab.on .aud-tab-s{color:rgba(250,245,233,.68)}
.aud-panel[hidden]{display:none}
.aud-panel{animation:audin .45s var(--ease)}
@keyframes audin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the imagery leads at full content width — this is the "large images" moment */
.aud-media{margin-bottom:clamp(32px,4vw,50px)}
.aud-media .photo-carousel{margin:0}
.aud-media .pc-stage{border-radius:22px;box-shadow:0 40px 72px -42px rgba(43,51,37,.62)}
.aud-media .pc-slides{aspect-ratio:16/9}
.aud-media .pc-thumbs{margin-top:12px}
.aud-media .pc-thumb{height:72px}
.aud-media .pc-nav{width:52px;height:52px}
.aud-media .pc-count{bottom:16px;right:18px;font-size:.78rem;padding:7px 14px}

/* Copy reads top-to-bottom: title → intro → the two parallel lists side by
   side. Previously the heading sat inside a column, so the section had no
   clear title and the two columns looked unrelated. */
/* heading + intro on the left, a hand-drawn botanical filling the space the
   short copy leaves on the right */
/* The figure column is a SIZED track, not `auto`. With `auto` the track was
   exactly the figure's own width, so it pinned itself to the right edge and
   justify-self had nothing to justify within — the ink ended up hard against
   the margin rather than sitting in the middle of the space the short copy
   leaves. A wider track plus justify-self:center puts it where the eye
   expects it. */
.aud-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,32vw,470px);
  gap:clamp(30px,4vw,64px);align-items:center;margin-bottom:clamp(30px,3.6vw,44px)}
.aud-head{margin-bottom:16px}
.aud-h2{font-size:clamp(1.85rem,3.3vw,2.7rem);color:var(--moss-deep);margin:6px 0 0;text-wrap:balance;max-width:22ch}
.aud-intro{max-width:70ch}

/* The ink draws itself on when the panel is shown and scrolled to — once, then
   still. stroke-dasharray/offset are inherited SVG props so they cascade into
   the <use>-cloned symbol paths. 170 covers the longest path and the r=24
   circle in the allium, so every stroke completes. */
/* justify-self centres the ink in its TRACK, but the space a reader actually
   sees runs from the edge of the copy column — which includes the column gap
   the track excludes. A margin-right equal to that gap shifts a centred item
   left by half of it, which is exactly the correction needed.
   (.centre is now a no-op: every figure is centred, so the old per-figure
   nudge would only push one of them back off again.) */
.aud-figure{width:clamp(190px,20vw,268px);color:var(--moss);
  justify-self:center;margin-right:clamp(30px,4vw,64px)}
/* opacity lives on the svg, not the container: .reveal.in sets the container to
   opacity:1 and outranks a single-class rule here */
.aud-figure svg{width:100%;height:auto;display:block;fill:none;stroke-width:1.35;opacity:.3;
  stroke-dasharray:170;stroke-dashoffset:170}
.aud-panel.on .aud-figure.in svg{animation:inkdraw 3.2s ease-out .2s forwards}
@keyframes inkdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .aud-figure svg{stroke-dasharray:none;stroke-dashoffset:0}
}
.aud-intro p{color:var(--ink-soft);font-size:1.02rem;line-height:1.75}
.aud-intro p + p{margin-top:14px}
.aud-intro .est-closing{margin-top:14px}
.aud-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,3.6vw,52px)}
.aud-lists .feat-block{margin-top:0}

/* feature lists — inline in the copy column, no card chrome */
.feat-block{margin-top:24px}
.feat-block h3{font-size:1.1rem;color:var(--moss-deep);margin-bottom:8px}
.feat-list{list-style:none;margin:0;padding:0}
/* no rule between items — the ticks already separate them, and the lines made
   a short list look like a table. Spacing does the work instead. */
.feat-list li{display:flex;gap:11px;align-items:flex-start;padding:6px 0;color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.feat-list li + li{margin-top:2px}
.feat-list .tick{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(130,168,85,.18);
  color:var(--moss);display:grid;place-items:center;margin-top:3px}
.feat-list .tick svg{width:11px;height:11px}
/* a single long list splits into two columns so it doesn't run the full
   content width. Multi-column (not grid) so it reads DOWN then across, the way
   a list is scanned; break-inside stops an item splitting across the gap. */
.feat-list.two-col{columns:2;column-gap:clamp(28px,4vw,56px)}
.feat-list.two-col li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media(max-width:820px){.feat-list.two-col{columns:1}}

/* credentials — light and quiet; a dark slab here read as a "horrible banner"
   and terminated the section. Now a subtle ruled strip that sits in the flow. */
/* no bottom rule — .aud-foot below supplies one, and two stacked read as a mistake */
.credentials{border-top:1px solid var(--line);
  padding:clamp(24px,3vw,32px) 0 0;margin-top:clamp(30px,3.6vw,42px);
  display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:clamp(22px,3vw,44px)}
.credentials > h3{display:none}
.cred-row{min-width:0}
.cred-label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--moss);margin-bottom:11px}
.cred-names{display:flex;flex-direction:column;gap:4px}
.cred-name{font-family:var(--disp);font-size:.98rem;color:var(--ink);line-height:1.35}
.credentials .area-list{gap:6px}
.credentials .area{font-size:.78rem;padding:6px 13px}
.cred-row .cred-guild{height:56px;border-radius:3px}

.est-closing{margin-top:20px}
.est-closing p{color:var(--ink-soft);font-size:.97rem}
.est-closing p + p{margin-top:13px}

/* proof row: testimonial beside the closing CTA */
.aud-foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,54px);
  align-items:center;margin-top:clamp(30px,3.6vw,42px);padding-top:clamp(26px,3.2vw,36px);
  border-top:1px solid var(--line)}
.est-quote-card{border-left:3px solid var(--leaf);padding:4px 0 4px 24px;margin:0}
.est-quote-card .stars{display:flex;gap:5px;color:var(--gold);margin-bottom:11px}
.est-quote-card .stars svg{width:14px;height:14px}
.est-quote-card blockquote{font-family:var(--disp);font-style:italic;font-size:clamp(1rem,1.55vw,1.16rem);
  line-height:1.55;color:var(--ink);margin:0}
.est-quote-card .who{margin-top:11px;font-family:var(--hand);font-size:1.3rem;color:var(--moss)}
.est-cta{margin:0;padding:0;border:none}
.est-cta p{color:var(--ink-soft);font-size:.95rem;margin:0 0 16px}

@media(max-width:900px){
  .aud-foot,.credentials,.aud-lists,.aud-top{grid-template-columns:minmax(0,1fr)}
  /* the botanical is breathing space for a wide column — on a phone the copy
     already fills the width, so it would just add scrolling */
  .aud-figure{display:none}
  .aud-switch{grid-template-columns:1fr}
  .aud-media{margin-bottom:26px}
  /* 13 thumbs sharing a phone width gives 26px slivers — drop the strip and
     rely on the arrows, which must be permanently visible with no hover */
  .pc-thumbs{display:none}
  .pc-nav{opacity:1;width:42px;height:42px}
  .pc-prev{left:10px}
  .pc-next{right:10px}
  .cred-row + .cred-row{padding-top:18px;border-top:1px solid var(--line-soft)}
}

/* ══ WHAT WE DO (merged services page) ════════════ */
/* hero photograph swaps with the active tab, cross-fading beneath the scrim */
.svc-banner .svc-hero{opacity:0;transition:opacity .7s var(--ease)}
.svc-banner .svc-hero.on{opacity:1}
/* the maintenance photo's interest (sculpture, hedging, lawn) sits low in the
   frame — the default centre crop was mostly treetops and sky */
.svc-banner .svc-hero[data-key="maintenance"]{object-position:50% 80%}
.svc-switch{grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;gap:10px}
.svc-tab{padding:15px 14px;text-align:center}
.svc-tab .aud-tab-t{font-size:1.02rem;line-height:1.2;text-wrap:balance}
.svc-extra{margin-top:clamp(28px,3.4vw,40px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line-soft)}
.svc-extra h3{font-size:1.18rem;color:var(--moss-deep);margin-bottom:10px}
.svc-extra p{color:var(--ink-soft);max-width:62ch}
.svc-extra p + p{margin-top:12px}
/* Garden Maintenance is where both estate managers and private clients land
   first — send them on to the fuller page for their situation before the
   general enquiry CTA below */
.svc-cross{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,42px);
  padding-top:clamp(26px,3.2vw,36px);border-top:1px solid var(--line)}
/* the CTA sentence above "Get in touch" needs the same lead-in on every tab —
   with or without the cross-links above it (maintenance only) */
.svc-sec .est-cta{margin-top:clamp(30px,3.6vw,42px);padding-top:clamp(26px,3.2vw,36px);
  border-top:1px solid var(--line)}
/* Planting Plans, folded into the Planting tab */
.svc-folded{margin-top:clamp(30px,3.6vw,44px);padding:clamp(26px,3.2vw,36px);
  background:var(--paper-2);border-radius:20px}
.svc-folded-h{font-size:1.35rem;color:var(--moss-deep);margin-bottom:12px}
.svc-folded p{color:var(--ink-soft);max-width:64ch}
.svc-folded p + p{margin-top:12px}
.svc-folded .feat-list{margin-top:16px}
.svc-folded .svc-extra{border-top-color:rgba(43,51,37,.14)}
/* five tabs never divide evenly below three columns — give the last one the
   leftover track so the final row doesn't end with a hole */
@media(max-width:1000px){
  .svc-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-switch .svc-tab:last-child{grid-column:2/-1}
}
@media(max-width:640px){
  .svc-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-switch .svc-tab:last-child{grid-column:1/-1}
}

/* ══ OUR GARDENS (merged portfolio page) ══════════ */
/* Eleven word-labels would be a wall of text, and for a garden portfolio the
   photograph IS the label — so the switcher is a contact sheet. Flex rather
   than grid so the short final row centres itself instead of leaving a hole. */
.gdn-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:none}
.gdn-chip{flex:0 1 calc((100% - 5*12px)/6);min-width:0;padding:0;overflow:hidden;
  border-radius:14px;text-align:center;background:var(--white)}
.gdn-chip-img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.gdn-chip-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease),filter .35s}
.gdn-chip:hover .gdn-chip-img img{transform:scale(1.06)}
/* unselected photographs are held back so the active garden reads first */
.gdn-chip:not(.on) .gdn-chip-img img{filter:saturate(.72) brightness(.97)}
.gdn-chip .aud-tab-t{font-size:.86rem;font-family:var(--body);font-weight:600;
  line-height:1.25;padding:9px 8px 10px;text-wrap:balance}
.gdn-chip.on{box-shadow:0 14px 30px -18px rgba(43,51,37,.6)}
.gdn-chip.on .aud-tab-t{color:var(--white)}

.gdn-lead{font-family:var(--disp);font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;
  color:var(--ink)!important;max-width:46ch}
/* the case-study prose runs in two columns so a five-paragraph story doesn't
   become a single narrow ribbon under a full-width photograph */
.gdn-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,52px)}
.gdn-body p{color:var(--ink-soft);font-size:.98rem;line-height:1.75}
.gdn-body p + p{margin-top:14px}
.gdn-quote{margin:clamp(30px,3.6vw,44px) 0 0;padding:4px 0 4px 24px;border-left:3px solid var(--leaf);
  font-family:var(--disp);font-style:italic;font-size:clamp(1rem,1.55vw,1.16rem);line-height:1.55;color:var(--ink)}
.gdn-quote .who{display:block;margin-top:11px;font-family:var(--hand);font-style:normal;
  font-size:1.3rem;color:var(--moss)}
.gdn-sec .est-cta{margin-top:clamp(30px,3.6vw,42px);padding-top:clamp(26px,3.2vw,34px);
  border-top:1px solid var(--line)}

/* Column counts are chosen so eleven chips never leave a lonely one on its own
   row: 6 gives 6+5, 4 gives 4+4+3, 3 gives 3+3+3+2. Five would give 5+5+1. */
@media(max-width:1100px){.gdn-chip{flex-basis:calc((100% - 3*12px)/4)}}
@media(max-width:640px){
  .gdn-switch{gap:9px}
  .gdn-chip{flex-basis:calc((100% - 2*9px)/3)}
  .gdn-chip .aud-tab-t{font-size:.76rem;padding:7px 5px 8px}
  .gdn-body{grid-template-columns:minmax(0,1fr);gap:0}
  .gdn-body > div + div p:first-child{margin-top:14px}
}

/* ══ ABOUT PAGE ═══════════════════════════════════ */
.about-nav{position:sticky;top:84px;z-index:40;background:rgba(250,245,233,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line-soft)}
.about-nav-in{display:flex;gap:8px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.about-nav a{font-size:.88rem;font-weight:500;color:var(--ink-soft);padding:9px 18px;border-radius:100px;
  transition:background .25s,color .25s}
.about-nav a:hover,.about-nav a.on{background:var(--moss);color:var(--white)}

/* Toby's story */
.story-grid{display:grid;grid-template-columns:clamp(260px,30vw,360px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.story-portrait{position:relative}
/* plain soft-cornered frame — the arch went site-wide with the homepage one */
.portrait-frame{position:relative;overflow:hidden;border-radius:22px;background:var(--paper-3);
  box-shadow:0 38px 64px -42px rgba(43,51,37,.65)}
/* scoped to the frame: unscoped, this cropped the credential logos below to 3/4 */
.story-portrait .portrait-frame img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.story-cap{display:block;text-align:center;margin-top:14px;font-size:1.35rem;color:var(--moss)}
/* (watering can removed — the full-size credential logos now fill this column) */
.story-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--moss-deep);margin:6px 0 18px}
.story-copy p{color:var(--ink-soft);margin-bottom:14px;max-width:62ch}
.story-sign{font-size:1.6rem;color:var(--moss);margin-top:20px}

/* credentials row */
/* credentials stack under the portrait — sized as credential marks, not big
   logos: the Guild block and the RHS line art only sit together as a set when
   they're small and optically matched in height */
.creds{display:flex;flex-direction:column;gap:20px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.cred-item{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.cred-item img{flex-shrink:0;width:auto;max-width:100%}
/* the Guild mark is a solid block so it carries more optical weight — set a
   little shorter than the RHS line art so the two read as the same size */
.cred-item .mark-rhs{height:44px}
.cred-item .mark-guild{height:34px;border-radius:3px}
.cred-ico{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--paper-2);
  color:var(--moss);display:grid;place-items:center}
.cred-ico svg{width:21px;height:21px}
.cred-item b{margin-bottom:1px}
.cred-item span{font-size:.83rem}
.cred-item b{display:block;font-family:var(--disp);font-size:1.05rem;font-weight:500;color:var(--ink)}
.cred-item span{font-size:.85rem;color:var(--ink-soft);line-height:1.45}

.pavord{margin-top:clamp(34px,4.5vw,52px);padding:clamp(26px,3.4vw,40px);background:var(--paper-2);
  border-radius:22px;text-align:center;font-family:var(--disp);font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.5;color:var(--ink)}
.pavord .who{display:block;font-family:var(--hand);font-style:normal;font-size:1.35rem;
  color:var(--moss);margin-top:14px}

/* areas covered + map */
.areas-sec{background:var(--paper-2)}
.areas-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px);align-items:start}
.areas-map{border-radius:22px;overflow:hidden;background:var(--paper-3);
  box-shadow:0 34px 60px -40px rgba(43,51,37,.55)}
#cover-map{width:100%;height:clamp(340px,42vw,480px)}
.map-fallback{padding:26px;color:var(--ink-soft)}
.areas-list .area-col + .area-col{margin-top:26px}
.areas-list h3{font-size:1.15rem;color:var(--moss-deep);margin-bottom:12px}
.areas-note{margin-top:26px;color:var(--ink-soft);font-size:.94rem}
.areas-note a{color:var(--moss);border-bottom:1px solid rgba(74,122,69,.4)}
/* Leaflet chrome, toned to the site */
.leaflet-container{background:var(--paper-3);font-family:var(--body)}
.leaflet-control-attribution{font-size:.62rem;background:rgba(250,245,233,.8)}

/* sections alternate so Reviews and Links read as distinct blocks rather than
   one continuous cream run: story(cream) → areas(tint) → reviews(cream) → links(tint) */
.links-sec{background:var(--paper-2)}
.links-sec .linkcard{background:var(--paper)}

/* reviews grid */
.reviews-sec .tgrid{columns:3;column-gap:22px}
.reviews-sec .tcard{margin:0 0 22px}
.tcard blockquote{font-family:var(--disp);font-style:italic;font-size:1.02rem;line-height:1.55;
  color:var(--ink);margin:0}
.tcard .who{display:block;margin-top:14px;font-family:var(--hand);font-size:1.3rem;color:var(--moss)}

/* FAQ on the homepage */
.faq-sec{background:var(--paper-2)}
.faq-sec .faq-list{max-width:820px;margin:0 auto}

@media(max-width:1000px){
  .reviews-sec .tgrid{columns:2}
}
@media(max-width:860px){
  .story-grid,.areas-grid{grid-template-columns:minmax(0,1fr)}
  .story-portrait{max-width:320px;margin:0 auto}
  .reviews-sec .tgrid{columns:1}
  .about-nav{top:76px}
}

/* ── scattered ink botanicals (site-wide accents) ── */
.ink-scatter{position:absolute;pointer-events:none;color:var(--moss);opacity:.36;z-index:1}
.ink-scatter svg{width:100%;height:100%;display:block}
/* on the dark sections moss green disappears — use cream at lower opacity */
.ink-scatter.ink-light{color:var(--paper);opacity:.26}
footer{position:relative}
@media(max-width:800px){.ink-scatter{display:none}}

@media(max-width:1000px){
  .hero-grid,.hello-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{order:-1}
  .hero-art .outline{display:none}
  .hello-ill{display:none}
  .toby{margin-bottom:20px}
  .toby::before{display:none}
  .feature-grid,.feature-grid.flip{grid-template-columns:minmax(0,1fr)}
  .feature-img{order:-1;max-width:560px}
  .ink-fern-feat{display:none}
  /* about art stacks above the text, still inside the column */
  .feature-grid.about-split{grid-template-columns:minmax(0,1fr)}
  /* stacked: no copy beside it, so the frame gets its ratio back */
  .about-split .seasons-frame{flex:none;aspect-ratio:4/3}
  .about-art{max-width:520px;margin:0 auto 12px}
}
@media(max-width:800px){
  .seal{width:92px;height:92px;left:-14px;bottom:-16px}
}

/* ── page banner (inner pages) ───────────────────── */
.banner{position:relative;overflow:hidden;padding:clamp(46px,6vw,80px) 0 clamp(40px,5vw,64px);background:var(--paper-2)}
.banner::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:rgba(130,168,85,.20);top:-190px;right:-140px;filter:blur(60px)}
.banner .crumb{font-size:.78rem;color:var(--ink-faint);margin-bottom:14px}
.banner .crumb a:hover{color:var(--moss)}
.banner .crumb span{opacity:.5;margin:0 7px}
.banner h1{font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:20ch}
.banner h1 em{font-style:italic;color:var(--moss)}
.banner .lead{margin-top:16px;max-width:52ch}
.banner .ink-b{width:120px;height:155px;top:6px;right:6%;transform:rotate(9deg);opacity:.32}
.banner .date{font-family:var(--hand);font-size:1.4rem;color:var(--terra);margin-bottom:6px}

/* full-bleed dark banner variant (estate page hero) */
.banner-hero{position:relative;overflow:hidden;background:var(--forest,#12291B);color:var(--paper);
  padding:clamp(66px,10vw,140px) 0 clamp(46px,6vw,74px)}
.banner-hero .banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* same left-weighted two-axis dark scrim as the homepage hero */
.banner-hero .banner-shade{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(14,26,16,.92) 0%,rgba(14,26,16,.82) 26%,rgba(14,26,16,.56) 55%,rgba(14,26,16,.20) 78%,rgba(14,26,16,0) 100%),
    linear-gradient(180deg,rgba(14,26,16,.42) 0%,rgba(14,26,16,.12) 34%,rgba(14,26,16,.40) 68%,rgba(14,26,16,.76) 100%)}
.banner-hero .wrap{position:relative;z-index:2}
.banner-hero .crumb{color:rgba(250,245,233,.72)}
.banner-hero .crumb a:hover{color:#C9E29E}
.banner-hero .crumb span{opacity:.5;margin:0 7px}
.banner-hero h1{color:var(--white)}
.banner-hero h1 em{color:#C9E29E}
.banner-hero .lead{color:rgba(250,245,233,.85);max-width:54ch}
.banner-hero .ink-b{display:none}

/* ── article body ────────────────────────────────── */
.article{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(34px,5vw,66px);align-items:start}
.article.solo{grid-template-columns:minmax(0,1fr)}
.prose>*+*{margin-top:20px}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:38px;color:var(--moss-deep)}
.prose h3{font-size:1.28rem;margin-top:30px}
.prose p{color:var(--ink-soft)}
.prose a{color:var(--moss);border-bottom:1px solid rgba(74,122,69,.35);transition:border-color .2s}
.prose a:hover{border-color:var(--moss)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--ink-soft)}
.prose ul>li::before{content:'';position:absolute;left:6px;top:.72em;width:8px;height:8px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 3px rgba(130,168,85,.2)}
.prose ol{counter-reset:n}
.prose ol>li{counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:50%;
  background:var(--paper-3);color:var(--moss-deep);font-size:.72rem;font-weight:600;display:grid;place-items:center;font-family:var(--body)}
.prose figure{margin:30px 0}
.prose figure img{width:100%;border-radius:18px;box-shadow:0 30px 50px -40px rgba(43,51,37,.6)}
.prose blockquote{background:var(--white);border-radius:20px;padding:28px 32px;border-left:4px solid var(--leaf);
  font-family:var(--disp);font-style:italic;font-size:1.18rem;color:var(--ink);margin:30px 0}
.prose blockquote .who{display:block;font-family:var(--hand);font-style:normal;font-size:1.3rem;color:var(--moss);margin-top:12px}

/* ── FAQ accordion ───────────────────────────────── */
.faq{background:var(--white);border:1px solid var(--line-soft);border-radius:18px;margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;font-family:var(--disp);font-size:1.2rem;transition:background .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper-2)}
.faq summary .chev{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--paper-2);color:var(--moss);
  display:grid;place-items:center;transition:transform .35s var(--ease),background .25s}
.faq summary .chev svg{width:13px;height:13px}
.faq[open] summary .chev{transform:rotate(90deg);background:var(--leaf);color:#fff}
.faq .ans{padding:0 26px 24px;color:var(--ink-soft)}

/* ── sidebar ─────────────────────────────────────── */
.side{position:sticky;top:104px}
.side-card{background:var(--white);border:1px solid var(--line-soft);border-radius:20px;padding:26px;margin-bottom:20px}
.side-card h4{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);margin-bottom:16px}
.side-card ul{list-style:none}
.side-card li+li{margin-top:2px}
.side-card li a{display:block;padding:10px 14px;border-radius:11px;font-size:.92rem;color:var(--ink-soft);transition:.25s}
.side-card li a:hover{background:var(--paper-2);color:var(--moss);transform:translateX(3px)}
.side-card li a.on{background:var(--moss);color:var(--white)}
.side-cta{background:var(--moss-deep);color:var(--paper);border-radius:20px;padding:28px;text-align:center}
.side-cta .hand{color:#C9E29E}
.side-cta h4{font-family:var(--disp);font-size:1.4rem;color:var(--white);letter-spacing:-.01em;text-transform:none;
  margin:6px 0 10px;font-weight:400}
.side-cta p{font-size:.88rem;color:rgba(250,245,233,.72);margin-bottom:18px}
.side-cta a.phone{display:block;font-family:var(--disp);font-size:1.3rem;color:#C9E29E;margin-top:14px}

/* ── galleries ───────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--paper-3);cursor:zoom-in;
  box-shadow:0 22px 40px -34px rgba(43,51,37,.7);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gallery figure:hover{transform:translateY(-5px);box-shadow:0 32px 50px -34px rgba(43,51,37,.7)}
.gallery img{width:100%;height:190px;object-fit:cover;transition:transform 1.1s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,30,20,.94);display:none;place-items:center;padding:30px}
.lb.on{display:grid}
.lb img{max-width:min(1200px,94vw);max-height:86vh;width:auto;border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lb .x,.lb .pv,.lb .nx{position:absolute;background:rgba(250,245,233,.12);border:1px solid rgba(250,245,233,.3);
  color:var(--paper);width:50px;height:50px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:.25s}
.lb .x:hover,.lb .pv:hover,.lb .nx:hover{background:var(--leaf);border-color:var(--leaf)}
.lb .x{top:26px;right:26px}
.lb .pv{left:26px;top:50%;transform:translateY(-50%)}
.lb .nx{right:26px;top:50%;transform:translateY(-50%)}
.lb .x svg,.lb .pv svg,.lb .nx svg{width:20px;height:20px}
.lb .cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(250,245,233,.7);font-size:.82rem}

/* ── card grids (portfolio / news / services) ────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{background:var(--white);border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.card:hover{transform:translateY(-7px);box-shadow:0 34px 56px -40px rgba(43,51,37,.6);border-color:rgba(130,168,85,.5)}
.card .thumb{overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .thumb img{transform:scale(1.06)}
.card .body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.card .hand{font-size:1.25rem;margin-bottom:2px}
.card h3{font-size:1.32rem;margin-bottom:9px}
.card p{font-size:.92rem;color:var(--ink-soft);flex:1}
.card .go{margin-top:16px;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);
  display:inline-flex;align-items:center;gap:7px}
.card:hover .go{gap:12px}
.card .go{transition:gap .3s var(--ease)}

/* service card with illustration */
.svc{background:var(--white);border:1px solid var(--line-soft);border-radius:22px;padding:36px 30px 32px;position:relative;
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;display:flex;flex-direction:column}
.svc .ill{width:62px;height:62px;color:var(--moss);margin-bottom:18px;transition:transform .6s var(--ease),color .4s}
.svc h3{font-size:1.42rem;margin-bottom:9px}
.svc p{font-size:.94rem;color:var(--ink-soft);flex:1}
.svc .blob{position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(130,168,85,.10);top:-52px;right:-52px;
  transition:transform .6s var(--ease)}
.svc .go{margin-top:16px;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
.svc.feature{background:var(--moss-deep);border-color:var(--moss-deep);color:var(--paper);justify-content:center}
.svc.feature h3{color:var(--white)}
.svc.feature p{color:rgba(250,245,233,.72);flex:none}
.svc.feature .blob{background:rgba(130,168,85,.22)}
.svc.feature .hand{color:#C9E29E;margin-bottom:6px}
.svc.feature .btn{margin-top:22px;align-self:flex-start}

/* ── section heading ─────────────────────────────── */
.shead{text-align:center;max-width:660px;margin:0 auto clamp(40px,4.6vw,60px)}
.shead .hand{color:var(--terra);margin-bottom:4px}
.shead h2{font-size:clamp(2rem,4.4vw,3.3rem)}
.shead h2 em{font-style:italic;color:var(--moss)}
.shead p{margin-top:14px;color:var(--ink-soft)}
.shead.left{text-align:left;margin-left:0}

/* ── testimonials ────────────────────────────────── */
.tgrid{columns:2;column-gap:24px}
.tcard{background:var(--white);border:1px solid var(--line-soft);border-radius:22px;padding:30px 32px;margin-bottom:24px;
  break-inside:avoid;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tcard .stars{display:flex;gap:4px;color:var(--gold);margin-bottom:14px}
.tcard .stars svg{width:15px;height:15px}
.tcard p{font-family:var(--disp);font-style:italic;font-size:1.06rem;line-height:1.55;color:var(--ink)}
.tcard .who{margin-top:16px;font-family:var(--hand);font-size:1.35rem;color:var(--moss)}

/* ── areas ───────────────────────────────────────── */
.area-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.area-col h3{font-size:1.45rem;color:var(--moss-deep);margin-bottom:16px}
.area-list{display:flex;flex-wrap:wrap;gap:9px}
.area{font-size:.86rem;padding:9px 18px;background:var(--white);border:1px solid var(--line-soft);border-radius:100px}

/* links — 5 per row so 10 sit as two even rows, not 4+4+2 */
.linkgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.linkcard{background:var(--white);border:1px solid var(--line-soft);border-radius:18px;
  padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;transition:transform .4s var(--ease),border-color .3s}
.linkcard:hover{transform:translateY(-5px);border-color:var(--leaf)}
.linkcard img{height:58px;width:100%;margin:0 auto 14px;object-fit:contain}
.linkcard span{font-family:var(--disp);font-size:.96rem;line-height:1.3;text-wrap:balance}
@media(max-width:1080px){.linkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── contact ─────────────────────────────────────── */
.contact{background:var(--moss-deep);color:var(--paper);position:relative;overflow:hidden}
.contact::before{content:'';position:absolute;width:640px;height:640px;border-radius:50%;background:rgba(130,168,85,.13);
  top:-260px;right:-200px;filter:blur(40px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(38px,5.5vw,80px);align-items:center}
.contact .hand{color:#C9E29E}
.contact h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-top:6px}
.contact h2 em{font-style:italic;color:#C9E29E}
.contact p.lead{color:rgba(250,245,233,.74);margin-top:18px;max-width:38ch}
.cdetails{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.cd{display:flex;align-items:center;gap:16px}
.cd .ico{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:rgba(250,245,233,.10);
  border:1px solid rgba(250,245,233,.2);display:grid;place-items:center;color:#C9E29E}
.cd .ico svg{width:20px;height:20px}
.cd .t{min-width:0}
.cd .t small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,245,233,.5)}
.cd .t a,.cd .t span{font-family:var(--disp);font-size:clamp(1.02rem,3.4vw,1.28rem);overflow-wrap:anywhere;display:inline-block}
.cd .t a:hover{color:#C9E29E}
.cform{background:var(--paper);border-radius:26px;padding:clamp(26px,4vw,42px);color:var(--ink);
  box-shadow:0 40px 70px -46px rgba(0,0,0,.6)}
.cform h3{font-size:1.65rem;margin-bottom:5px}
/* the asterisk convention has to be legible BEFORE they hit send, so it is
   stated once here and repeated in each required placeholder */
.req-hint{font-size:.74rem;color:var(--ink-faint);margin:0 0 17px}
.req{color:var(--terra);font-weight:600}
/* honeypot: off-screen rather than display:none — some spam bots skip fields
   they can detect are hidden, but still miss this */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inp{width:100%;background:var(--white);border:1px solid var(--line);padding:14px 17px;border-radius:14px;font-size:.94rem;
  margin-bottom:12px;transition:border-color .25s,box-shadow .25s}
.inp:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(74,122,69,.14)}
/* :user-invalid, not :invalid — it only marks a field once the visitor has
   actually left it wrong, so the form doesn't load covered in red */
.inp:user-invalid{border-color:var(--terra)}
.inp:user-invalid:focus{box-shadow:0 0 0 3px rgba(196,108,70,.16)}
/* server-reported error (e.g. postcode format) — same treatment as
   :user-invalid above, for fields the browser has no native way to flag */
.inp-error{border-color:var(--terra)}
.inp-error:focus{box-shadow:0 0 0 3px rgba(196,108,70,.16)}
textarea.inp{resize:vertical;min-height:100px}
.cform .btn{width:100%;margin-top:6px}
.cform .fine{font-size:.72rem;color:var(--ink-faint);text-align:center;margin-top:14px}
/* the note is empty until the form is submitted — no reserved gap before then */
.cform .formnote:empty{margin-top:0}

/* success replaces the form entirely, in the same card, rather than a small
   note easy to miss at the bottom of a long form */
.cform-done{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(12px,2vw,22px) 0}
/* .cform-done{display:flex} and the browser's own [hidden]{display:none} are
   EQUAL specificity (one class, one attribute selector) — an author
   stylesheet beats the UA stylesheet at a tie, so the flex rule was silently
   winning and the hidden attribute was doing nothing at all. This is why it
   showed on every load, submitted or not: nothing here ever actually
   depended on JS running. One extra class+attribute selector outranks it. */
.cform-done[hidden]{display:none}
.cform-done-ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:56px;height:56px;border-radius:50%;background:rgba(74,122,69,.14);
  color:var(--moss);margin-bottom:20px}
.cform-done-ico svg{width:26px;height:26px}
.cform-done h3{margin-bottom:10px}
.cform-done p{color:var(--ink-soft);font-size:.98rem;max-width:34ch}

/* ── footer ──────────────────────────────────────── */
footer{background:var(--paper-3);padding:60px 0 28px;font-size:.9rem;color:var(--ink-soft);position:relative;z-index:2}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line-soft)}
.f-top img.flogo{height:38px;margin-bottom:14px}
.f-top h4{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);margin-bottom:13px}
.f-top ul{list-style:none}
.f-top li{margin-bottom:7px}
.f-top a:hover{color:var(--moss)}
.f-badges{display:flex;align-items:center;gap:16px;margin-top:18px}
.f-badges img{width:auto;opacity:.9}
.f-badges .mark-rhs{height:50px}
.f-badges .mark-guild{height:44px;border-radius:3px}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;font-size:.72rem;color:var(--ink-faint)}
.f-bot a{color:var(--moss)}

/* ── responsive ──────────────────────────────────── */
@media(max-width:1000px){
  .article{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  .tgrid{columns:1}
}
@media(max-width:800px){
  .nav-links{position:fixed;top:0;left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;background:var(--moss-deep);
    padding:96px 26px 34px;transform:translateY(-102%);transition:transform .55s var(--ease);z-index:-1;
    max-height:100vh;overflow-y:auto}
  .nav-links.open{transform:none}
  .nav-links>a,.nav-links>.hasmenu>a{color:var(--paper);font-size:1rem;padding:11px 0}
  .nav-links .btn{width:100%;margin-top:12px}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:none;box-shadow:none;
    padding:0 0 8px 16px;min-width:0}
  .submenu a{color:rgba(250,245,233,.72);padding:8px 0;font-size:.9rem}
  .submenu a:hover{background:transparent;color:#C9E29E}
  .hasmenu>a svg{display:none}
  .nav-toggle{display:block}
  .brand em{display:none}
  .f-top{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gallery img{height:150px}
}
@media(max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .lb .pv,.lb .nx{width:42px;height:42px}
  .lb .pv{left:8px}.lb .nx{right:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}