/* South London Bamboo Removal. One stylesheet for every page.
   Colours follow the client's September 2026 mockup and new logo: brand red for the page-top
   bands, buttons and accents, dark olive green for panels and the footer, warm cream paper.
   Red never carries small text on dark green (it fails contrast); text on the dark panels is
   white or --on-ink. .btn-lime is still the primary button class; it is now red.
   No em dashes anywhere in copy. */

:root{
  --ink:#303b22; --ink-2:#3b491d; --ink-deep:#14210f; --red:#b0120f; --red-deep:#8e0e0e;
  --cream:#f7f4ee; --cream-2:#eee9df; --paper:#ffffff;
  --text:#17251b; --muted:#586b5b; --line:rgba(48,59,34,.16); --line-soft:rgba(48,59,34,.09);
  --on-ink:#cdd6c8; --on-ink-muted:#c2c8b8;
  --fs-display:clamp(2.25rem,1.3rem + 2.9vw,3.65rem);
  --fs-h2:clamp(1.85rem,1.2rem + 2.4vw,3rem);
  --fs-h3:clamp(1.12rem,1rem + .5vw,1.4rem);
  --fs-lead:clamp(1.06rem,1rem + .5vw,1.3rem);
  --fs-body:1.0625rem; --fs-body-2:.95rem; --fs-small:.875rem; --fs-micro:.76rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --wrap:1240px; --radius:14px; --radius-sm:9px;
  --shadow:0 24px 60px -28px rgba(24,30,14,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
body{font-family:Jost,system-ui,sans-serif;color:var(--text);background:var(--cream);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.05;letter-spacing:-.02em;font-weight:800}
.wrap{width:min(var(--wrap),92%);margin-inline:auto}
.eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.label{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-family:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em;padding:var(--s4) var(--s5);border-radius:11px;border:2px solid transparent;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),color .16s var(--ease);white-space:nowrap;line-height:1.2}
.btn:active{transform:scale(.98)}
.btn-lime{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(176,18,15,.55)}
.btn-lime:hover{transform:translateY(-2px);background:var(--red-deep);box-shadow:0 16px 30px -14px rgba(176,18,15,.65)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

/* top bar */
.topbar{background:var(--ink);color:var(--on-ink);font-size:var(--fs-small)}
.topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:var(--s4);padding:var(--s2) 0;flex-wrap:wrap}
.topbar b{color:#fff}
.topbar a{color:#fff;font-weight:700}
.topbar a:hover{color:var(--on-ink)}
.topbar .dot{color:var(--on-ink-muted);margin:0 var(--s2)}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(249,248,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:var(--s3) 0}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:56px;width:auto;display:block}
nav.main{display:flex;align-items:center;gap:var(--s5)}
nav.main a.link{font-weight:600;font-size:var(--fs-body-2);color:var(--text);position:relative;padding:var(--s1) 0;white-space:nowrap}
nav.main a.link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
nav.main a.link:hover::after,nav.main a.link.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:var(--s4)}
.nav-phone{font-weight:800;font-size:var(--fs-body);color:var(--ink);white-space:nowrap}
.nav-phone:hover{color:var(--red)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:var(--s2)}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
.burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--cream);padding:var(--s4) 6% var(--s5);gap:var(--s2);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
nav.main.open a.link{padding:var(--s2) 0;font-size:var(--fs-body)}
.why.after-head{padding-top:var(--s6)}
/* two white image sections in a row (Services: Fencing then Chemical Treatment) share one gap, not two */
section.why.paper+section.why.paper{padding-top:0}

/* hero (home): full-bleed photo behind the copy, per Lilly's 17 Aug feedback */
.hero{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100svh - 126px);align-items:center}
.hero-copy{position:relative;z-index:2;width:min(var(--wrap),92%);margin-inline:auto;padding:clamp(28px,4vw,60px) 0}
.hero-copy .in{max-width:34rem}
.hero h1{font-size:var(--fs-display);font-weight:900;margin:0;text-wrap:balance;text-transform:uppercase}
.hero-h2{font-size:var(--fs-display);font-weight:900;color:#fff;line-height:1.02;margin-top:2px;letter-spacing:-.02em}
.hero .lead{font-size:var(--fs-lead);color:var(--on-ink);max-width:40ch;margin-top:var(--s4);font-weight:400}
.hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-deep) 0%,var(--ink-deep) 17%,rgba(20,33,15,.96) 25%,rgba(20,33,15,.88) 32%,rgba(20,33,15,.76) 39%,rgba(20,33,15,.6) 47%,rgba(20,33,15,.42) 56%,rgba(20,33,15,.22) 68%,rgba(20,33,15,.08) 82%,rgba(20,33,15,0) 100%)}

/* full-bleed statement band (home): photo-led, text hard-left, the blog article behind it */
.band{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden;isolation:isolate}
.band>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(20,33,15,.95) 0%,rgba(20,33,15,.86) 44%,rgba(20,33,15,.42) 100%)}
.band h2{font-size:var(--fs-h2);max-width:24ch}
.band p{color:var(--on-ink);font-size:var(--fs-lead);max-width:52ch;margin-top:var(--s4)}
.band .actions{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap}

/* recent work strip (home) */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap}
.work-head .actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.work-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s6)}
.work-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.work-strip a:hover img{transform:scale(1.02)}

/* page head (inner pages) */
/* every section is already padded; the page-top band keeps only its own padding below, otherwise the
   two add up to 186px of empty red above the heading and 168px below */
.pagehead{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:0}
.pagehead::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(110,8,8,.18),transparent 70%);pointer-events:none}
.pagehead .wrap{position:relative;z-index:1;padding:clamp(46px,7vw,82px) 0 clamp(40px,6vw,64px)}
.pagehead h1{font-size:var(--fs-display);font-weight:900;margin:0;max-width:20ch;text-wrap:balance;text-transform:uppercase}
.ph-sub{font-weight:500;font-size:var(--fs-lead);color:rgba(255,255,255,.9);max-width:56ch;margin-top:var(--s4);letter-spacing:normal;line-height:1.5}

/* sections */
section{padding:clamp(56px,8vw,104px) 0}
section.paper{background:var(--paper)}
section.tint{background:var(--cream-2)}
section.tight{padding-top:0}
.sec-head{max-width:56ch}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{color:var(--muted);font-size:var(--fs-lead);margin-top:var(--s3);font-weight:400}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.top{align-items:start}
.split.wide{grid-template-columns:1fr 2fr}

/* service cards (home, ranking copy) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s6)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 70px -30px rgba(24,30,14,.55)}
.card img{width:100%;aspect-ratio:16/11;object-fit:cover}
.card .cbody{padding:var(--s5)}
.card .ctitle{font-size:var(--fs-h3);margin-bottom:var(--s2);letter-spacing:-.01em}
.card p{color:var(--muted);font-weight:400;font-size:var(--fs-body-2)}

/* split image + copy */
.why{background:var(--cream)}
.why.paper{background:var(--paper)}
.why .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.why.rev .why-media{order:2}
.why-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3.4}
.why-media img{width:100%;height:100%;object-fit:cover}
.why h2{font-size:var(--fs-h2);margin:0 0 var(--s4)}
.why .svc-title{font-size:var(--fs-h2);margin:0 0 var(--s4)}
.why .lead2{color:var(--muted);font-weight:400;font-size:var(--fs-lead)}
.why .actions{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap}
.why .split h2{margin-bottom:0}
.pts{display:grid;gap:0;margin-top:var(--s5)}
.pt{border-top:1px solid var(--line);padding:var(--s4) 0}
.pt:last-child{border-bottom:1px solid var(--line)}
.pt h3{font-size:var(--fs-h3);margin-bottom:var(--s1)}
.pt p{color:var(--muted);font-weight:400;font-size:var(--fs-body-2)}
.ulist{padding-left:1.25em;margin-bottom:var(--s4);color:var(--muted);font-size:var(--fs-body-2)}
.ulist li + li{margin-top:var(--s2)}

/* the services ledger: a typographic list, no cards, no icons */
.ledger{display:grid;gap:0}
.ledger .row{border-top:1px solid var(--line);padding:var(--s4) 0;display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:var(--s2) var(--s6);align-items:baseline}
.ledger .row:last-child{border-bottom:1px solid var(--line)}
.ledger h3{font-size:var(--fs-h3);letter-spacing:-.01em}
.ledger p{color:var(--muted);font-size:var(--fs-body-2)}
.ledger .sub{color:var(--muted);font-size:var(--fs-body-2)}
.ledger .rowtext p + p{margin-top:var(--s3)}
.ledger .sub b{color:var(--text);font-weight:700}
.first-step{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}
.first-step h3{font-size:var(--fs-h3);color:#fff;margin-bottom:var(--s2)}
.first-step p{color:var(--on-ink);font-size:var(--fs-body-2)}
.first-step .btn{margin-top:var(--s4)}
.sticky-side{position:sticky;top:96px}

/* placeholder tiles: honest slots for assets the client has not sent yet */
.ph-tile{position:relative;background:var(--ink);color:var(--on-ink);border-radius:var(--radius);display:grid;place-items:center;text-align:center;padding:var(--s5);box-shadow:var(--shadow);overflow:hidden}
.ph-tile::before{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(247,244,238,.35);border-radius:calc(var(--radius) - 6px);pointer-events:none}
.ph-tile .in{position:relative}
.ph-tile b{display:block;color:#fff;font-size:var(--fs-h3);letter-spacing:-.01em}
.ph-tile .big{font-size:var(--fs-display);font-weight:900;line-height:1}
.ph-tile span{display:block;font-size:var(--fs-small);margin-top:var(--s2);color:var(--on-ink-muted)}

/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6)}
.member .ph-tile{aspect-ratio:3/4;padding:var(--s4)}
.member h3{margin-top:var(--s3);font-size:var(--fs-h3)}
.member p{color:var(--muted);font-size:var(--fs-body-2)}
.member .role{color:var(--red);font-weight:700;font-size:var(--fs-small);margin-top:var(--s2)}
.member p + p{margin-top:var(--s3)}

/* statement panel */
.quote{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(28px,4vw,56px);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.quote::before{content:"\201C";position:absolute;left:var(--s4);top:-14px;font-size:9rem;line-height:1;color:#fff;opacity:.14;font-weight:900;font-family:Georgia,serif}
.quote p{font-size:var(--fs-lead);color:var(--on-ink);max-width:60ch;position:relative}
.quote .who{margin-top:var(--s5);font-weight:800;color:#fff;position:relative}
.quote .who span{display:block;font-weight:600;font-size:var(--fs-small);color:var(--on-ink-muted)}

/* about prose */
.prose{max-width:78ch}
.prose>p{margin-bottom:var(--s4);color:var(--text)}
.prose .lead2{color:var(--muted);font-weight:400;font-size:var(--fs-lead)}
.lead2+.lead2{margin-top:var(--s4)}
.lead2 strong{color:var(--ink);font-weight:800}
.storyhead{font-weight:800;font-size:var(--fs-h3);letter-spacing:-.01em;color:var(--ink);margin:var(--s6) 0 var(--s3)}
.prose .pt{margin-bottom:var(--s3)}

/* education: the three ways to remove bamboo */
.solutions{background:var(--ink);color:#fff}
.solutions .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s6)}
.solutions .sec-head h2{color:#fff}
.solutions .sec-head p{color:var(--on-ink)}
.sol{padding-top:var(--s4);border-top:2px solid var(--red)}
.sol h3{color:#fff;font-size:var(--fs-h3);margin-bottom:var(--s3)}
.sol p{color:var(--on-ink);font-size:var(--fs-body-2)}
.sol .when{margin-top:var(--s3);color:#fff;font-weight:700;font-size:var(--fs-body-2)}

/* faq */
.faq{max-width:78ch;margin-top:var(--s6)}
.split .faq{margin-top:0}
.faq h3{margin:var(--s6) 0 var(--s3)}
.faq h3:first-child{margin-top:0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) 0;font-weight:700;font-size:var(--fs-h3);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--ink);stroke-width:2.5;fill:none;transition:transform .2s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq .a{padding:0 0 var(--s5);color:var(--muted);max-width:70ch}
.faq .a p+p{margin-top:var(--s3)}

/* projects */
.proj-group+.proj-group{margin-top:var(--s8)}
.proj-group h2{font-size:var(--fs-h2)}
.proj-group>p{color:var(--muted);font-size:var(--fs-lead);max-width:56ch;margin-top:var(--s3)}
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s5)}
/* column counts match the photo counts (8 in fours, 6 in threes, 2 in twos) so no row is left with holes */
.gal-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal-grid.few{grid-template-columns:repeat(2,minmax(0,1fr))}
.proj{padding-top:0}
/* height:auto lets aspect-ratio beat the width and height attributes, which were drawing 640px-tall strips */
.gal-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .25s var(--ease)}
.gal-grid img:hover{transform:scale(1.02)}
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);margin-top:var(--s5)}
.strip img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm)}
/* before and after pairs (Lilly's three real jobs) */
.sec-head+.proj-pair{margin-top:var(--s7)}
.proj-pair+.proj-pair{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
.proj-pair h3{font-size:var(--fs-h3)}
.proj-pair>p{color:var(--muted);max-width:64ch;margin-top:var(--s2)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.ba figure{margin:0}
.ba img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
/* projects page photo viewer (js/lightbox.js) */
.gal-grid img[role=button],.strip img[role=button],.ba img[role=button]{cursor:zoom-in}
.gal-grid img[role=button]:focus-visible,.strip img[role=button]:focus-visible,.ba img[role=button]:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.lb-open{overflow:hidden}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(20,33,15,.94);color:#fff}
.lightbox::backdrop{background:rgba(20,33,15,.94)}
.lightbox figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s7) var(--s8)}
.lightbox img{max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.lightbox figcaption{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-small)}
.lightbox button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:400 2rem/1 Jost,sans-serif;cursor:pointer;transition:background .2s var(--ease)}
.lightbox button:hover,.lightbox button:focus-visible{background:var(--red);border-color:var(--red)}
.lb-close{top:var(--s4);right:var(--s4)}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:var(--s4)}
.lb-next{right:var(--s4)}
.lb-count{position:absolute;top:var(--s5);left:var(--s5);font-size:var(--fs-small);color:var(--on-ink)}
@media(max-width:640px){
  .lightbox figure{padding:var(--s8) var(--s3)}
  .lb-prev,.lb-next{top:auto;bottom:var(--s4);transform:none}
}
.ba figcaption{margin-top:var(--s3);padding-top:var(--s2);border-top:2px solid var(--line);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.ba figcaption.after{color:var(--red);border-top-color:var(--red)}
/* reviews (verbatim Google reviews) */
.rev-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s5);margin-top:var(--s6);align-items:stretch}
.rev-grid.two{grid-template-columns:1fr 1fr}
/* scoped to blockquote: the bare .rev class also marks the reversed image sections on Services, which
   were being drawn as boxed cards with 32px padding */
blockquote.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow);margin:0;display:flex;flex-direction:column}
blockquote.rev .stars{display:flex;gap:2px;margin-bottom:var(--s3)}
blockquote.rev .stars svg{width:18px;height:18px;fill:var(--ink)}
blockquote.rev p{color:var(--text);font-size:var(--fs-body-2)}
blockquote.rev p+p{margin-top:var(--s3)}
blockquote.rev>p:last-of-type{margin-bottom:var(--s4)}
blockquote.rev footer{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
blockquote.rev cite{font-style:normal;font-weight:700;color:var(--ink)}
blockquote.rev footer span{color:var(--muted);font-size:var(--fs-small)}
.review-panel{background:var(--paper);border-radius:var(--radius);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.review-panel h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.review-panel p{color:var(--muted);font-size:var(--fs-body-2)}
.review-panel .btn{margin-top:var(--s4)}

/* blog list + article */
.bloglist{display:grid;gap:var(--s6)}
.blogcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,3vw,38px)}
.blogcard h2{font-size:var(--fs-h3);letter-spacing:-.01em;margin-bottom:var(--s3)}
.blogcard h2 a:hover{color:var(--red)}
/* a single post fills the row: title on the left, summary and link on the right */
@media(min-width:981px){
  .blogcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:var(--s7);align-items:center}
  .blogcard-img{margin-bottom:0}
  .blogcard h2{font-size:clamp(1.4rem,1rem + 1vw,1.9rem);margin-bottom:var(--s3)}
  .blogcard .readmore{justify-self:start}
}
.blogcard p{color:var(--muted);font-weight:400;margin-bottom:var(--s4)}
.readmore{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--red)}
.readmore:hover{color:var(--ink)}
.blog-head h1{max-width:26ch}
.article{background:var(--cream)}
.article .col{width:min(72ch,92%);margin-inline:auto;padding:clamp(40px,6vw,72px) 0 clamp(16px,3vw,32px)}
.article .intro{font-size:var(--fs-lead);line-height:1.8;color:var(--text);font-weight:400;margin-bottom:var(--s3)}
.article p{font-size:var(--fs-body);line-height:1.85;color:var(--text);font-weight:400;margin-bottom:var(--s5)}
.article h2{font-size:var(--fs-h2);color:var(--ink);margin:var(--s7) 0 var(--s2)}
.article h3{font-size:var(--fs-h3);color:var(--red);margin:var(--s6) 0 var(--s3)}
.article h2+h3{margin-top:var(--s4)}
.article ul{list-style:none;margin:var(--s1) 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.article li{position:relative;padding:2px 0 2px 22px;font-size:var(--fs-body);line-height:1.8;color:var(--text)}
.article li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border-radius:2px;background:var(--red)}
.article li strong{color:var(--ink);font-weight:700}
.article-cta{width:min(72ch,92%);margin:0 auto;padding-bottom:clamp(52px,8vw,88px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.article-cta .back-link{flex-basis:100%;margin-top:var(--s4);font-weight:700;color:var(--red)}
.article-cta .back-link:hover{color:var(--ink)}
.post-img{margin:var(--s5) 0 var(--s6)}
.post-img img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.post-img:has(img[height="1100"]) img{max-width:420px;margin-inline:auto}
.post-cta{margin:var(--s7) 0;padding:clamp(24px,4vw,40px);background:var(--ink);color:#fff;border-radius:var(--radius)}
.article .post-cta h2{margin:0 0 var(--s2);color:#fff;font-size:var(--fs-h3)}
.article .post-cta p{color:rgba(255,255,255,.85);margin-bottom:var(--s4)}
.post-cta-btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.post-cta .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.post-cta .btn-outline:hover{background:#fff;color:var(--ink)}
.blogcard-img{display:block;overflow:hidden;border-radius:calc(var(--radius) - 4px);margin-bottom:var(--s4)}
.blogcard-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.blog-cta{margin-top:var(--s7);padding:clamp(24px,4vw,40px);background:var(--ink);color:#fff;border-radius:var(--radius)}
.blog-cta h2{margin:0 0 var(--s2);color:#fff;font-size:var(--fs-h3)}
.blog-cta p{color:rgba(255,255,255,.85);margin-bottom:var(--s4)}
.blog-cta .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.blog-cta .btn-outline:hover{background:#fff;color:var(--ink)}

/* contact band + contact page */
.contact{background:var(--ink-2);color:#fff}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.contact h2{font-size:var(--fs-h2)}
.contact p.lead{color:var(--on-ink);font-size:var(--fs-lead);margin-top:var(--s3);font-weight:400;max-width:46ch}
.callrow{display:flex;gap:var(--s4);flex-wrap:wrap}
.callcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:var(--s4) var(--s5);flex:1 1 200px;transition:.18s var(--ease)}
.callcard.wide{flex-basis:100%}
.callcard:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.callcard .l{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;color:var(--on-ink-muted);font-weight:700}
.callcard .n{font-weight:800;font-size:var(--fs-h3);color:#fff;margin-top:var(--s1);white-space:nowrap}
.callcard.wide .n{font-size:var(--fs-lead);white-space:normal;overflow-wrap:anywhere}
.info{display:grid;gap:var(--s5);margin-top:var(--s2)}
.info h6{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;color:var(--on-ink-muted);font-weight:700;margin-bottom:var(--s1)}
.info .v{font-weight:700;font-size:var(--fs-lead);color:#fff;display:block;line-height:1.4;overflow-wrap:anywhere}
.info a.v:hover{color:var(--on-ink)}
.info .note{color:var(--on-ink-muted);font-size:var(--fs-small);font-weight:500;display:block;margin-top:2px}
.follow{margin-top:var(--s6);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;color:#fff;font-weight:800}
.social{display:flex;gap:var(--s3);margin-top:var(--s3)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);color:#fff;transition:.18s var(--ease)}
.social a:hover{border-color:var(--red);background:var(--red);color:#fff;transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}
form{background:var(--paper);border-radius:var(--radius);padding:clamp(24px,3vw,32px);color:var(--text);box-shadow:var(--shadow)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:var(--s1)}
.field input,.field textarea{width:100%;padding:var(--s3) var(--s4);border:1.5px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-body-2);background:var(--cream);transition:border .16s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(176,18,15,.2)}
form .btn{width:100%;justify-content:center;margin-top:var(--s2)}
form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* footer */
body>footer{background:var(--ink);color:#aeb8a8;font-size:var(--fs-small);padding:var(--s9) 0 var(--s7)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);align-items:start}
body>footer a{display:block;padding:var(--s1) 0;color:#aeb8a8}
body>footer a:hover{color:#fff}
.brand-foot{display:flex;flex-direction:column;line-height:1.05;gap:3px}
.brand-foot .l1{font-weight:800;font-size:var(--fs-h3);letter-spacing:.02em;text-transform:uppercase;color:var(--on-ink)}
.brand-foot .l2{font-weight:800;font-size:var(--fs-h3);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.foot-note{margin-top:var(--s4);max-width:34ch;color:#aeb8a8}
.foot-contact a{font-weight:700}
.foot-contact a.big{color:#fff;font-size:var(--fs-lead)}
.foot-contact .em{overflow-wrap:anywhere}
body>footer .social{margin-top:var(--s3)}
body>footer .social a{display:inline-flex;padding:0}
body>footer .low{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s7);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:#a3a996}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:1px;background:rgba(20,33,15,.15)}
.callbar a{padding:var(--s4);text-align:center;font-weight:700;font-size:var(--fs-body-2);display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.callbar .c1{background:var(--red);color:#fff}
.callbar .c2{background:var(--ink);color:#fff}

/* reveal on scroll: one entrance, staggered inside grids.
   Content is visible by default. The inline head script adds html.js only when the observer and
   full motion are available, and takes it away after 2.5s if the observer never answers, so a
   failed script can never leave a blank page. */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .cards.reveal.in .card,html.js .team.reveal.in .member,html.js .solutions .grid.reveal.in .sol{animation:rise .6s var(--ease) both}
html.js .cards.reveal.in .card:nth-child(2),html.js .team.reveal.in .member:nth-child(2),html.js .solutions .grid.reveal.in .sol:nth-child(2){animation-delay:.08s}
html.js .cards.reveal.in .card:nth-child(3),html.js .team.reveal.in .member:nth-child(3),html.js .solutions .grid.reveal.in .sol:nth-child(3){animation-delay:.16s}
html.js .team.reveal.in .member:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}html.js .cards.reveal.in .card,html.js .team.reveal.in .member,html.js .solutions .grid.reveal.in .sol{animation:none}}

/* education: the underground cross-section, ported from the July 2026 Cobra Group concept.
   With no script it shows the finished drawing. The script adds .armed (bare ground), then
   .live (transitions), then .on once the drawing is half on screen. */
.cut{position:relative;margin-top:var(--s6)}
.cut-art{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1000/460;background:#3c2c1f}
.cut-art svg{display:block;width:100%;height:100%}
.cut .xray{opacity:.09}
/* the patio cracks where the young shoot comes up: each slab lifts at the joint */
.cut .slab{transform-box:fill-box}
.cut .slab.l{transform-origin:left bottom;transform:rotate(-7deg)}
.cut .slab.r{transform-origin:right bottom;transform:rotate(4.8deg)}
.cut .grow{transform-box:fill-box;transform-origin:center bottom}
/* each rhizome path carries pathLength="1", so the draw runs for the whole transition instead of
   finishing in the first tenth of a second as it did with the concept's fixed 1700 dash */
.cut.armed .rhz path{stroke-dasharray:1 2}
.cut.armed:not(.on) .rhz path{stroke-dashoffset:1.05}
.cut.armed:not(.on) .xray,.cut.armed:not(.on) .shoot,.cut.armed:not(.on) .lbl{opacity:0}
.cut.armed:not(.on) .slab{transform:none}
.cut.armed:not(.on) .grow{transform:scale(.15)}
.cut.live .rhz path{transition:stroke-dashoffset 1.7s cubic-bezier(.16,1,.3,1)}
.cut.live .xray{transition:opacity .9s ease}
.cut.live .shoot,.cut.live .lbl{transition:opacity .7s ease}
.cut.live .slab,.cut.live .grow{transition:transform 1s cubic-bezier(.16,1,.3,1)}
.cut.live.on .rhz path:nth-child(2){transition-delay:.12s}
.cut.live.on .rhz path:nth-child(3){transition-delay:.24s}
.cut.live.on .rhz path:nth-child(4){transition-delay:.36s}
.cut.live.on .rhz path:nth-child(5){transition-delay:.48s}
.cut.live.on .rhz path:nth-child(6){transition-delay:.6s}
.cut.live.on .shoot,.cut.live.on .lbl{transition-delay:1s}
.cut.live.on .slab{transition-delay:.9s}
.cut.live.on .grow{transition-delay:.8s}
.cut-btn[hidden]{display:none}
.cut-btn{position:absolute;left:50%;bottom:var(--s5);transform:translateX(-50%)}
.cut-btn:hover{transform:translateX(-50%) translateY(-2px)}
.cut-btn:active{transform:translateX(-50%) scale(.98)}
.cut.on .cut-btn{background:rgba(20,33,15,.4);color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cut.on .cut-btn:hover{border-color:#fff;background:rgba(20,33,15,.6)}
.cut-key{display:none}
@media(max-width:980px){
  .cut .lbl{display:none}
  .cut-btn,.cut-btn:hover,.cut-btn:active{position:static;transform:none}
  .cut-btn{width:100%;justify-content:center;margin-top:var(--s3)}
  .cut.on .cut-btn{background:transparent;color:var(--ink);border-color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .cut.on .cut-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .cut-key{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s4);color:var(--muted);font-size:var(--fs-body-2)}
  .cut-key b{color:var(--text)}
  .cut-swatch{flex:0 0 auto;width:28px;height:6px;border-radius:3px;background:#d3a96a;margin-top:var(--s2)}
}
@media(prefers-reduced-motion:reduce){.cut.live .rhz path,.cut.live .xray,.cut.live .shoot,.cut.live .lbl,.cut.live .slab,.cut.live .grow{transition:none}}

/* responsive */
@media(max-width:1120px){
  .nav-phone{display:none}
}
@media(max-width:980px){
  .hero .grid{min-height:min(78svh,640px)}
  .hero-copy{padding:44px 0 48px}
  .hero-media .bg{object-position:70% 50%}
  .hero-media::after{background:linear-gradient(180deg,rgba(20,33,15,.82) 0%,rgba(20,33,15,.7) 55%,rgba(20,33,15,.9) 100%)}
  .work-strip{grid-template-columns:repeat(2,1fr)}
  .rev-grid,.rev-grid.two{grid-template-columns:1fr}
  .why .grid,.contact .grid,.split,.split.wide{grid-template-columns:1fr}
  .why.rev .why-media{order:0}
  .sticky-side{position:static}
  .team{grid-template-columns:repeat(2,1fr)}
  .solutions .grid{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ledger .row{grid-template-columns:1fr}
  .gal-grid,.gal-grid.three,.gal-grid.few{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split .faq{margin-top:var(--s5)}
  .why .split{gap:var(--s4)}
}
/* 7 nav items plus a CTA stop fitting well before the old 840px switch: the row
   overflowed the viewport at 860 to 900px. Same fault Lilly fixed on her branch. */
@media(max-width:1024px){
  nav.main{display:none}
  .burger{display:flex}
  .nav-cta{margin-left:auto}
}
@media(max-width:720px){
  .topbar{display:none}
  .callbar{display:grid}
  .nav-cta .btn{display:none}
  .brand img{height:46px}
  .callrow{flex-direction:column}
  .callcard{flex-basis:auto}
  body{padding-bottom:54px}
  .hero-h2{font-size:clamp(2.1rem,7vw,3rem)}
  .foot-grid{grid-template-columns:1fr}
  footer .low{flex-direction:column;gap:var(--s2)}
  .gal-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .gal-grid.few{grid-template-columns:1fr 1fr}
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s3);padding-bottom:var(--s2);-webkit-overflow-scrolling:touch}
  .strip img{flex:0 0 62vw;scroll-snap-align:start}
  .team{gap:var(--s4)}
  .ba{gap:var(--s3)}
}
/* the new logo is taller than the old one; on 320px-class phones keep the old header height so
   nothing on the first screen moves further under the call bar */
@media(max-width:340px){.brand img{height:40px}}
@media(max-height:720px) and (min-width:981px){
  .hero h1,.hero-h2{font-size:clamp(2.3rem,4vw,3.4rem)}
  .hero-copy{padding-top:var(--s5);padding-bottom:var(--s5)}
  .hero .lead{margin-top:var(--s3)}.hero-actions{margin-top:var(--s4)}
}
/* blog article: spread across the page, with a sticky survey card */
.article-grid{width:min(var(--wrap),92%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(40px,5vw,88px);align-items:start}
.article-grid .col{width:auto;max-width:none;margin:0}
.article-side{position:sticky;top:110px;padding-top:clamp(40px,6vw,72px)}
.article .side-form h2{margin:0 0 var(--s2);color:var(--ink);font-size:var(--fs-h3)}
.article .side-form>p:not(.hp){margin:0 0 var(--s4);font-size:1rem;line-height:1.6;color:var(--muted)}
.side-form .field{margin-bottom:var(--s3)}
.side-form .side-call{display:block;margin-top:var(--s4);text-align:center;color:var(--text)}
.side-form .side-call strong{color:var(--red)}
.side-form .side-call:hover strong{color:var(--ink)}
.sec-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 var(--s7)}
.article-cta{width:min(var(--wrap),92%)}
@media(max-width:980px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-side{display:none}
  .article-grid .col{width:min(72ch,100%);margin-inline:auto}
}
/* contact page: the details column sits level with the middle of the form */
@media(min-width:981px){.contact-page .grid>div:last-child{align-self:center}}
/* photo behind the "Talk to us" sections and the blog call to action */
.contact.has-photo,.blog-cta.has-photo{position:relative;overflow:hidden;isolation:isolate}
.contact.has-photo>img.bg,.blog-cta.has-photo>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.contact.has-photo::after,.blog-cta.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(14,17,12,.84) 0%,rgba(14,17,12,.72) 55%,rgba(14,17,12,.58) 100%)}
.cta-band{padding:clamp(72px,10vw,128px) 0}
/* mobile: finger-sized tap areas, readable text, labels that stay visible */
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.foot-contact a,.info a.v{padding-block:12px}
.readmore{padding-block:12px}
.blog-head .eyebrow{color:rgba(255,255,255,.88)}
@media(max-width:480px){
  :root{--fs-body-2:1rem}
}
@media(max-width:360px){
  .callbar a{padding:var(--s3) var(--s2);font-size:.875rem;white-space:nowrap}
}
@media(max-width:980px){.split .sec-head+.pts{margin-top:0}}
/* phones: everything centred, except long reading text, lists, FAQs, reviews and form labels */
@media(max-width:720px){
  section,.article-grid,.article-cta,footer,.contact,.band{text-align:center}
  section h1,section h2,section h3,section p,.hero-copy>*,.pagehead h1,.blog-head h1{margin-inline:auto}
  .actions,.post-cta-btns,.sec-cta,.article-cta,.callrow,.social,.work-head,.foot-grid>div,.info>div{justify-content:center}
  .actions,.work-head .actions,.hero-actions{display:flex;flex-wrap:wrap;justify-content:center}
  .review-panel{text-align:center;align-items:center}
  .review-panel .btn{justify-content:center}
  .work-head{flex-direction:column;align-items:center}
  .member .ph-tile,.member img,.why-media{margin-inline:auto}
  .info{justify-items:center}
  .foot-grid>div{display:flex;flex-direction:column;align-items:center}
  .foot-contact{align-items:center}
  .blogcard{text-align:center}
  .blogcard .readmore{justify-content:center}
  .article .col,.article .col p,.article .col li,.faq,.faq *,blockquote.rev,blockquote.rev *,.prose,.prose>p,.prose .lead2,.ulist,form,form .field label{text-align:center}
  .field input,.field textarea{text-align:left}
  .article li{padding:0}
  .article li::before{position:static;display:block;margin:0 auto 6px}
  .ulist{list-style-position:inside;padding-left:0}
  .faq summary{justify-content:center;gap:var(--s3)}
  blockquote.rev footer{justify-content:center}
  .rev .stars{justify-content:center}
}
/* phones: room to breathe between a panel edge, its heading, its paragraphs and what follows */
@media(max-width:720px){
  section.tight{padding-top:56px}
  .sec-head h2{margin-bottom:var(--s4)}
  .sec-head p,.sec-head p+p{margin-top:var(--s4)}
  .team{margin-top:var(--s7);gap:var(--s5)}
  .member h3{margin-top:var(--s4)}
  .member .role{margin-top:var(--s3)}
  .member p+p{margin-top:var(--s4)}
}
/* phones: customer reviews swipe sideways, one card at a time with the next one peeking in */
@media(max-width:720px){
  .rev-grid,.rev-grid.two{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s4);padding:var(--s2) var(--s2) var(--s5);margin-inline:-4%;scroll-padding-inline:var(--s2);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .rev-grid>blockquote.rev{flex:0 0 86%;scroll-snap-align:center;min-width:0}
}
/* customer reviews: a sideways scrolling row on every screen size, with previous and next arrows */
.rev-grid,.rev-grid.two{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s5);padding:var(--s2) var(--s2) var(--s5);scroll-padding-inline:var(--s2);-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:stretch}
.rev-grid>blockquote.rev{flex:0 0 min(440px,86%);scroll-snap-align:start;min-width:0}
.rev-nav{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s2)}
.rev-nav button{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-sm);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.rev-nav button:hover:not(:disabled){background:var(--ink);color:#fff;transform:translateY(-2px)}
.rev-nav button:active:not(:disabled){transform:scale(.96)}
.rev-nav button:disabled{opacity:.35;cursor:default}
.rev-nav svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none}
/* a title that heads a whole section is centred at the top, with a readable intro */
.wrap>.sec-head,.proj-group{text-align:center}
.wrap>.sec-head{max-width:68ch;margin-inline:auto}
.wrap>.sec-head h2,.wrap>.sec-head p,.proj-group>p{margin-inline:auto}
.wrap>.sec-head p{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.proj-pair>h3,.proj-pair>p{text-align:center;margin-inline:auto}
/* room above a section that follows a photo band */
.band+section.proj,.cta-band+section.proj{padding-top:clamp(56px,8vw,104px)}
/* services: survey box under the text, photo beside it */
.survey-split{align-items:stretch}
.survey-copy{display:grid;gap:var(--s6);align-content:start}
.survey-photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:360px}
.survey-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:980px){.survey-photo{aspect-ratio:4/3;min-height:0}}

/* 14 Oct 2026: white team section after a cream one gets its top space back; call-to-action bands centred on every screen */
section.paper.tight{padding-top:clamp(56px,8vw,104px)}
.band .wrap,.blog-cta,.post-cta{text-align:center}
.band h2,.band p,.blog-cta h2,.blog-cta p,.post-cta h2,.post-cta p{margin-inline:auto}
.band .actions,.post-cta-btns{justify-content:center}
.band::after{background:linear-gradient(180deg,rgba(20,33,15,.78) 0%,rgba(20,33,15,.86) 50%,rgba(20,33,15,.78) 100%)}

/* 14 Oct 2026: team cards centred on every screen size, not only phones */
.member{text-align:center}
.member .ph-tile{margin-inline:auto}

/* 14 Oct 2026: services survey photo fills the full height of the text column beside it */
.split.top.survey-split{align-items:stretch}
.survey-photo{position:relative}
.survey-photo img{position:absolute;inset:0}

/* 14 Oct 2026: FAQ heading stays in view beside the long list */
@media(min-width:981px){.split.top.wide>.sec-head{position:sticky;top:112px;align-self:start}}

/* 14 Oct 2026: the final review card is a photo card, in line with the other call-to-action panels */
.review-panel{position:relative;overflow:hidden;isolation:isolate;flex:0 0 min(440px,86%);scroll-snap-align:start;text-align:center;align-items:center;justify-content:center;color:#fff;border:0;min-height:320px}
.review-panel>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.review-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,17,12,.7) 0%,rgba(14,17,12,.82) 100%)}
.review-panel .stars{display:flex;gap:4px;margin-bottom:var(--s4)}
.review-panel .stars svg{width:28px;height:28px;fill:#fff}
.review-panel h3{color:#fff}
.review-panel p{color:rgba(255,255,255,.88);font-size:var(--fs-body)}

/* 14 Oct 2026: "under the ground" intro spans the full width; "three ways" cards and button centred */
.wrap>.sec-head.wide{max-width:none}
.wrap>.sec-head.wide h2{max-width:none}
.wrap>.sec-head.wide p{max-width:none;font-size:clamp(1.1875rem,1.05rem + .6vw,1.5rem);line-height:1.6}
.sol{text-align:center}
.sol p,.sol .when{font-size:var(--fs-body)}
.solutions .actions{display:flex;justify-content:center}

/* 19 Oct 2026: team section and social icons hidden until the client sends the photos and links */
[hidden]{display:none!important}

/* 19 Oct 2026: enquiry form error note and the thank-you page */
.form-note{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);background:rgba(176,18,15,.12);color:#fff;font-size:var(--fs-body-2);line-height:1.5}
.form-note[hidden]{display:none}
.thanks{text-align:center;max-width:46rem;margin-inline:auto}
.thanks p{margin-inline:auto}
.thanks .lead2{color:var(--ink);font-weight:600}
.thanks .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* 19 Oct 2026: thank-you page heading centred to match the rest of the page */
.thanks-head .wrap{text-align:center}
.thanks-head h1,.thanks-head .ph-sub{margin-inline:auto}

/* 19 Oct 2026: footer redesigned now the email and social icons are gone: brand, page links, phone */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr}
.foot-label{margin-bottom:var(--s3);color:#fff;font-weight:700;font-size:var(--fs-body)}
.foot-nav nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:var(--s7);row-gap:0}
.foot-nav nav a{display:block;padding-block:8px;color:#aeb8a8;transition:color .2s var(--ease)}
.foot-nav nav a:hover,.foot-nav nav a:focus-visible{color:#fff}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .foot-grid{grid-template-columns:1fr;gap:var(--s6)}
  .foot-nav nav{justify-content:center;column-gap:var(--s6)}
  .foot-nav nav a{padding-block:12px}
  .foot-label{margin-bottom:var(--s2)}
}

/* 19 Oct 2026: footer Pages menu is for laptops; hidden on phones (the bottom call bar stays) */
@media(max-width:720px){.foot-grid>.foot-nav{display:none}}