/* Hand-built client preview. Typography and component proportions follow the approved reference; the palette override is at the end of this file. */
:root{--paper:#f4f4f2;--ink:#16191a;--teal:#3f4749;--maroon:#24292a;--text:#2a2e2f;--muted:#61686a;--olive:#24292a;--accent:#3f4749;--line:#dcdcd8;--pale:#eaeae6;--white:#ffffff;--gold:#a98c5b;--focus:#c0a071;--rule:#8d9294;--footer-text:#dfe1e0;--field-line:#a2a7a8;--backdrop:#0f1213d9;--hero-scrim:15,17,18;--sqs-site-max-width:1280px;--sqs-site-gutter:3vw;--sqs-mobile-site-gutter:6vw}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--text);font:400 calc(14.732px + .1303vw)/1.4 Montserrat,Arial,sans-serif;letter-spacing:.01em;-webkit-font-smoothing:antialiased}img{display:block;width:100%;object-fit:cover}a{color:inherit;text-decoration:none}p,h1,h2,h3,figure,blockquote{margin:0}p+p{margin-top:12px}h1,h2,h3{font-weight:700;letter-spacing:0;line-height:.952;color:var(--ink)}.dark h1,.dark h2,.dark h3{color:white}h1{font-size:calc(37.5px + 1.216vw);line-height:.888}h2{font-size:calc(22.93px + .521vw)}h3{font-size:calc(20.27px + .386vw);line-height:.964}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:2px;background:var(--maroon);color:white;text-transform:uppercase;font-size:12px;font-weight:700;line-height:1.1;padding:16.8px 12px;text-align:center;min-height:49px;transition:filter .2s}.btn:hover{filter:brightness(1.15)}.btn.secondary{background:var(--paper);color:var(--ink);padding-inline:22.8px}.btn.large{height:100%;min-height:66px;width:100%}.btn.small{font-size:10.272px;padding:14.38px 10.27px;min-height:42px}.btn.tiny{font-size:8.544px;padding:12px 9px;min-height:34px}.dark{background:var(--ink);color:white}.dark .btn{background:var(--maroon);color:white}.dark .btn.secondary{background:var(--paper);color:var(--ink)}.pale{background:var(--pale)}.ribbon{background:var(--pale);color:var(--ink);font-size:10px;text-align:center;line-height:1.4;min-height:27px;padding:6px 20px}.site-header{position:absolute;top:27px;left:0;right:0;z-index:30;background:white;color:var(--ink);padding:12px 3vw;box-shadow:0 1px 0 #0001}.header-inner{max-width:var(--sqs-site-max-width);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px;height:60px}.brand{display:block;flex-shrink:0}.brand img{height:60px;width:auto}.header-inner nav{display:flex;align-items:center;gap:32px;margin-left:auto}.header-inner nav>a,.nav-group>button,.phone-link{font-size:11px;text-transform:uppercase;font-weight:600;white-space:nowrap}.nav-phone{display:none}.header-inner nav a:hover{text-decoration:underline;text-underline-offset:5px}.nav-group{position:relative}.nav-group>button{background:transparent;color:inherit;border:0;padding:8px 0}.dropdown{display:none;position:absolute;top:100%;left:-20px;background:var(--ink);padding:20px;min-width:260px;box-shadow:0 8px 15px #0003}.dropdown a{display:block;padding:12px 0;font-size:12px}.nav-group:hover .dropdown,.nav-group.open .dropdown{display:block}.header-actions{display:flex;gap:24px;align-items:center}.header-btn{min-height:42px;font-size:10px;padding:12px 18px;background:var(--maroon);color:white}.menu-toggle{display:none}
.reference-section{position:relative}.section-content{position:relative;padding:6.6vw 0}.hero .section-content{padding-top:calc(6.6vw + 84px)}.section-background{position:absolute;inset:0;overflow:hidden;background:var(--ink)}.section-background:after{content:'';position:absolute;inset:0;background:#0009}.section-background img{height:100%;width:100%}.hero .section-background img{object-position:center 54%}.hero .section-background:after{background:linear-gradient(90deg,#0009,#0005)}.hero .slot-0-0{display:flex;align-items:center}.hero p{font-size:calc(17.464px + .2606vw);line-height:1.4}.fe-block{min-width:0;position:relative}.sqs-block{display:flex;flex-direction:column;height:100%;justify-content:center}.sqs-block-content{width:100%}.media-slot .sqs-block-content,.media-slot img{height:100%}.media-slot img{position:absolute;inset:0}.intro{text-align:center}.rating{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px}.stars{font-size:20px;letter-spacing:3px;color:var(--gold)}.review-carousel{font-size:16px}.review-slide footer{font-size:11px;margin-top:12px;color:var(--muted)}.review-slide[hidden]{display:none}.review-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;font-size:11px}.review-controls button{background:transparent;color:var(--ink);border:1px solid var(--field-line);width:29px;height:29px;padding:0;font-size:16px}.service-cards{padding:48px max(3vw,calc((100vw - var(--sqs-site-max-width))/2));min-height:862px}.service-cards>h2{text-align:center;font-size:calc(33px + 1vw);line-height:1.2;margin-bottom:70px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.service-grid img{aspect-ratio:1.5;margin-bottom:35px}.service-grid h3{font-size:calc(17.464px + .2606vw);font-weight:500;max-width:75%;line-height:.952;min-height:41px}.service-grid p{font-size:12px;line-height:1.4;max-width:75%;min-height:67px;margin-top:30px}.service-grid .btn{margin-top:40px}.split-feature .section-content{padding:0}.section-note{display:block;color:var(--maroon);font-size:17px;font-weight:600}.split-feature h2{color:var(--teal);font-weight:500;text-transform:uppercase}.reasons .section-content{padding:3.3vw 0}.reasons p{font-size:12px;line-height:1.4}.reason-icon{font-size:24px;color:var(--accent);font-weight:500}.projects{min-height:990px;padding:144px 0;background:var(--pale);overflow:hidden}.projects>h2{text-align:center;font-size:calc(33px + 1vw);line-height:1.2;margin-bottom:47px}.project-carousel{position:relative}.project-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 3vw;scrollbar-width:none;scroll-behavior:smooth}.project-track::-webkit-scrollbar{display:none}.project-card{flex:0 0 calc((100vw - 12vw)/3 + 2.7px);min-width:0;scroll-snap-align:start;scroll-margin-left:3vw}.project-card>[data-gallery]{display:block;border:0;padding:0;background:none;width:100%;overflow:hidden}.project-card img{aspect-ratio:1}.project-card h3{font-size:15.072px;line-height:.952;font-weight:500;margin-top:17px}.project-card p{font-size:10.848px;line-height:1.4;margin-top:10px;min-height:76px}.project-card .btn{margin-top:15px}.carousel-arrow{position:absolute;top:calc((100vw - 12vw)/6 - 24px);width:58px;height:58px;background:var(--maroon);color:white;border:0;border-radius:50%;font-size:26px;display:grid;place-items:center}.carousel-arrow.prev{left:5vw}.carousel-arrow.next{right:5vw}.contact .section-content,.area .section-content,.ticker .section-content{padding:0}.area iframe{height:100%;width:100%;border:0;filter:grayscale(1)}.area .sqs-block-content{height:100%}.ticker{background:var(--teal);color:white;overflow:hidden}.marquee{overflow:hidden;width:100%}.marquee>div{display:flex;gap:22px;white-space:nowrap;width:max-content;animation:marquee 36s linear infinite;font-size:18px}.marquee a{white-space:nowrap}.marquee:hover>div,.marquee:focus-within>div{animation-play-state:paused}@keyframes marquee{to{transform:translateX(-50%)}}.site-footer .section-content{padding:3.3vw 0}.site-footer h2{font-size:22px;line-height:1.2;margin-bottom:14px}.site-footer h3{font-size:16px;line-height:1.3;margin-bottom:14px;font-weight:500}.site-footer p{font-size:12px;line-height:1.7;color:var(--footer-text)}.site-footer p+p{margin-top:12px}.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}.footer-logo{display:flex;align-items:center;justify-content:center;background:white;border-radius:4px;padding:8px 14px;height:100%;max-width:170px}.footer-logo img{height:100%;max-height:70px;width:auto;object-fit:contain}.site-footer .social{font-size:13px;font-weight:600;color:white}.site-footer .media-slot img{border-radius:3px;position:absolute;inset:0;height:100%}.google-badge{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;background:white;color:var(--ink);border-radius:4px;padding:14px 16px;font-size:12px}.google-badge .stars{font-size:16px;letter-spacing:2px}.google-badge strong{font-size:14px}.footer-facts{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-left:1px solid var(--rule)}.footer-facts strong{color:white}.site-footer hr{border:0;border-top:1px solid var(--rule);width:100%}.disclaimer{background:var(--paper);padding:25px 6vw;color:var(--muted);font-size:11px}.disclaimer>div{max-width:var(--sqs-site-max-width);margin:auto}.disclaimer p+p{margin-top:6px}.disclaimer a{text-decoration:underline}.comparison{position:relative;height:100%;min-height:100%;overflow:hidden}.comparison img{position:absolute;inset:0;height:100%}.comparison .before{clip-path:inset(0 calc(100% - var(--position)) 0 0)}.compare-label{position:absolute;left:20px;top:20px;background:var(--paper);color:var(--ink);font-size:12px;padding:7px 12px;pointer-events:none}.after-label{left:auto;right:20px}.compare-divider{position:absolute;left:var(--position);height:100%;border-left:2px solid white;pointer-events:none}.compare-divider b{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);font-size:22px}.comparison input{position:absolute;inset:0;height:100%;width:100%;opacity:0;margin:0;cursor:ew-resize}.comparison:focus-within{outline:4px solid var(--focus);outline-offset:-4px}.lightbox,.enquiry-dialog{padding:0;border:0;background:var(--paper);color:var(--ink);max-width:94vw;width:1100px;max-height:94dvh}.lightbox::backdrop,.enquiry-dialog::backdrop{background:var(--backdrop)}.lightbox>img{max-height:78dvh;object-fit:contain;background:var(--ink)}.lightbox-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px}.lightbox-caption p{font-size:12px}.close-dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 16px}.enquiry-dialog{width:540px;padding:40px}.enquiry-dialog>.close-dialog{float:right;margin:-20px -20px 15px 10px}.enquiry-dialog h2{font-size:27px;line-height:1.1}.enquiry-dialog p{font-size:13px;margin-top:16px}.enquiry-dialog label{display:block;font-size:12px;margin-top:20px}.enquiry-dialog input,.enquiry-dialog textarea{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid var(--field-line);border-radius:0;background:var(--white);color:var(--ink)}.enquiry-dialog .btn{margin-top:20px}.enquiry-dialog .form-note{font-size:11px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;z-index:100;top:10px;left:10px;padding:15px;background:var(--paper)}
@media(max-width:1200px){.header-inner{gap:18px}.header-inner nav{gap:18px}.header-actions{gap:15px}.header-inner nav>a,.nav-group>button{font-size:10px}}
@media(max-width:1000px){.header-inner nav{gap:12px}.header-btn{padding-inline:9px}.phone-link{display:none}.brand img{height:50px}}
@media(max-width:767px){.ribbon{min-height:38px;padding:5px 16px;font-size:9px}.site-header{top:38px;padding:18px 6vw}.header-inner{height:54px;gap:15px}.brand img{height:54px}.header-actions{gap:22px}.header-btn{display:none}.phone-link{display:none}.nav-phone{display:block}.contact>img{display:none}.menu-toggle{display:block;border:0;background:none;padding:10px 0;width:28px;position:relative;z-index:45}.menu-toggle span{display:block;height:2px;background:var(--ink);margin:6px 0;width:28px;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.header-inner nav{display:none;position:fixed;inset:139px 0 0;background:var(--ink);margin:0;padding:40px 6vw 60px;overflow:auto;z-index:35}.header-inner nav.open{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:24px}.header-inner nav>a,.nav-group>button{font-size:25px;line-height:1.2;text-transform:none;font-weight:500}.dropdown{position:static;padding:10px 0;background:none;box-shadow:none;min-width:0}.dropdown a{font-size:17px;line-height:1.3}.nav-group:hover:not(.open) .dropdown{display:none}body.menu-open{overflow:hidden}.section-content{padding:59.4px 0}.hero .section-content{padding-top:160.2px}.hero h1{font-size:42.24px;line-height:.888}.hero p{font-size:18.48px}.hero .btn.large,.intro .btn.large{min-height:59px}.intro .rating{font-size:12px}.intro .review-carousel{font-size:15.24px}.intro h2{font-size:24.96px}.review-carousel .review-slide footer{font-size:10px}.review-controls{margin-top:10px}.service-cards{padding:29px 3vw;min-height:1190px}.service-cards>h2{font-size:32px;line-height:1.2;margin-bottom:70px}.service-grid{grid-template-columns:1fr;gap:50px}.service-grid img{aspect-ratio:1.5;margin-bottom:35px}.service-grid h3{font-size:18.48px;max-width:75%;min-height:53px}.service-grid p{max-width:75%;min-height:67px;margin-top:30px}.service-grid .btn{margin-top:40px}.btn.small{font-size:10.92px;min-height:45px}.section-note{font-size:16px}.split-feature h2{font-size:24.96px}.reasons .section-content,.site-footer .section-content{padding:29.7px 0}.reasons h3{font-size:22px}.reasons h2{font-size:24.96px}.reasons p{font-size:12px}.reason-icon{font-size:20px}.show-garden h2{font-size:24.96px}.projects{min-height:999px;padding:144px 0 90px}.projects>h2{font-size:32px;max-width:94%;margin-inline:auto;line-height:1.2;margin-bottom:60px}.project-track{padding-inline:3vw}.project-card{flex-basis:94vw}.project-card h3{font-size:14.16px}.project-card p{font-size:11px;min-height:104px}.project-card .btn.tiny{font-size:9.84px;min-height:40px}.carousel-arrow{top:calc(47vw - 25px);width:50px;height:50px}.carousel-arrow.prev{left:7vw}.carousel-arrow.next{right:7vw}.contact h2{font-size:24.96px}.site-footer h2{font-size:20px}.footer-logo{max-width:150px}.disclaimer{font-size:10px;padding-block:22px}.marquee>div{font-size:16px}.enquiry-dialog{padding:30px 24px}.lightbox-caption{padding:12px}.lightbox-caption p{font-size:11px}.close-dialog{font-size:12px;white-space:nowrap}}
@media(max-width:360px){.hero h1{font-size:36px}.hero p{font-size:17px}.phone-link{display:none}.hero .btn{font-size:10px}.intro h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){html,.project-track{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Match the reference's service-card rhythm at the measured breakpoints. */
@media(min-width:768px){.service-cards>h2{height:63px;display:flex;align-items:center;justify-content:center;line-height:1.2}.service-grid img{margin-bottom:38px}.service-grid h3{min-height:40px}.service-grid p{min-height:50px}.service-grid .btn{margin-top:27px}}
@media(max-width:767px){.service-grid p{min-height:41px}.wide-feature .section-content{padding-block:77.4px}}
/* Keep the two card descriptions and buttons on the exemplar's distinct baselines. */
@media(min-width:768px){.service-grid h3{min-height:0}.service-grid p{margin-top:36.6px;min-height:33.6px}.service-grid article:nth-child(2) p{min-height:50.4px}.service-grid .btn{margin-top:36.6px}}
@media(max-width:767px){.service-grid{gap:48px}.service-grid p{margin-top:22px;min-height:67px}.service-grid article:nth-child(2) h3{min-height:35px}.service-grid article:nth-child(2) p{min-height:84px}.service-grid .btn{margin-top:22px}}

/* September 2026 refinements: readable reviews, complete photographs and a compact footer. */
.intro .section-content{padding:72px 6vw}
.intro .layout-1{display:flex;flex-direction:column;gap:24px;max-width:940px;margin:auto;overflow:visible}
.intro .fe-block{grid-area:auto;width:100%}
.intro .rating{font-size:14px;gap:10px}
.intro .rating .stars{font-size:27px}
.intro h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15}
.intro .review-carousel{font-size:clamp(21px,2.1vw,29px);line-height:1.55}
.intro .review-slides{min-height:235px;display:grid;align-items:center}
.intro .review-slide footer{font-size:14px;margin-top:20px}
.intro .review-controls{font-size:13px;margin-top:24px}
.intro .review-controls button{width:44px;height:44px;font-size:22px;border-color:var(--muted)}
.intro .btn.large{width:auto;height:auto;min-height:50px;padding-inline:28px;margin-top:8px}
.garden-story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:64px max(3vw,calc((100vw - var(--sqs-site-max-width))/2))}
.garden-story h2{font-size:clamp(27px,2.6vw,38px);line-height:1.14}
.garden-story p{margin-top:28px;line-height:1.65}
.garden-story .btn{margin-top:28px}
.garden-story>img{height:auto;object-fit:contain}
.transformations,.process-section{padding:72px max(3vw,calc((100vw - var(--sqs-site-max-width))/2))}
.transformation-heading,.process-heading{max-width:780px;margin:0 auto 36px;text-align:center}
.transformation-heading h2,.process-heading h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin-top:14px}
.transformation-heading p{margin-top:22px;line-height:1.65}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.comparison-grid .comparison{height:auto;min-height:0;aspect-ratio:560/330}
.comparison-grid .comparison img{object-fit:contain}
.comparison-grid figcaption{font-size:13px;margin-top:14px;color:var(--muted);line-height:1.5}
.transformations>.btn,.process-section>.btn{display:flex;width:fit-content;margin:36px auto 0;padding-inline:26px}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.process-grid article{border-top:1px solid var(--line);padding-top:24px}
.process-number{display:block;font-size:15px;font-weight:700;color:var(--maroon);margin-bottom:20px}
.process-grid h3{font-size:21px;line-height:1.2;margin-bottom:18px}
.process-grid p{font-size:15px;line-height:1.7}
.compact-footer{padding:36px max(3vw,calc((100vw - var(--sqs-site-max-width))/2)) 20px}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr auto;gap:32px;align-items:start}
.compact-footer h2{font-size:19px;margin-bottom:12px}
.compact-footer p{font-size:12px;line-height:1.7}
.footer-contact a{font-size:14px;overflow-wrap:anywhere}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;font-size:12px}
.footer-links a{display:flex;align-items:center;min-height:38px}
.footer-connect .socials{display:flex;gap:10px;margin-bottom:14px}
.compact-footer .socials a{width:44px;height:44px;border-radius:50%;background:#ffffff18;display:grid;place-items:center;transition:background-color .18s}
.compact-footer .socials a:hover{background:var(--maroon)}
.footer-bottom{border-top:1px solid #ffffff30;margin-top:24px;padding-top:16px;display:flex;justify-content:space-between;gap:12px 24px;align-items:center}
.footer-bottom p,.footer-bottom a{font-size:11px}
.footer-bottom>div{display:flex;gap:20px;flex-wrap:wrap}
.dropdown{color:white}
@media(max-width:1000px){.footer-main{grid-template-columns:1.3fr 1fr}.footer-connect{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-connect .socials{margin-bottom:0}.process-grid{gap:24px}}
@media(max-width:767px){
 .header-inner nav{color:white}
 .intro .section-content{padding:52px 6vw}
 .intro .layout-1{gap:20px}
 .intro .review-slides{min-height:330px}
 .intro .review-slide footer{font-size:13px}
 .garden-story{grid-template-columns:1fr;gap:32px;padding:48px 6vw}
 .transformations,.process-section{padding:52px 6vw}
 .comparison-grid,.process-grid{grid-template-columns:1fr;gap:32px}
 .comparison-grid .comparison{aspect-ratio:560/330}
 .compare-label{top:12px;left:12px;font-size:10px;padding:5px 8px}
 .after-label{left:auto;right:12px}
 .compare-divider b{width:40px;height:40px}
 .compact-footer{padding:28px 6vw 18px}
 .footer-main{grid-template-columns:1fr;gap:18px}
 .footer-links{grid-template-columns:repeat(3,1fr);gap:0 12px}
 .footer-links a{min-height:44px}
 .footer-connect{grid-column:auto}
 .footer-bottom{flex-direction:column;align-items:flex-start;margin-top:20px;padding-top:14px;gap:6px}
 .footer-bottom a{display:inline-flex;align-items:center;min-height:36px}
}

/* Clear service-led hero and open, image-led sections. */
.hero{position:relative;min-height:680px;display:flex;align-items:center;padding:170px max(3vw,calc((100vw - var(--sqs-site-max-width))/2)) 85px}
.hero-content{position:relative;max-width:920px}
.hero h1{font-size:clamp(38px,4.4vw,64px);line-height:1.04;max-width:900px}
.hero p{font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:740px;margin-top:28px}
.hero-buttons{display:flex;gap:16px;margin-top:34px}
.hero-buttons .btn{min-height:56px;min-width:165px;padding:18px 28px}
.transformation-heading h2,.process-heading h2{margin-top:0}
.why-section{display:grid;grid-template-columns:1fr 1.3fr;gap:8vw;padding:80px max(3vw,calc((100vw - var(--sqs-site-max-width))/2));background:var(--paper)}
.why-intro h2{font-size:clamp(34px,3.6vw,50px);line-height:1.08}
.why-proof{display:flex;gap:36px;margin-top:40px}
.why-proof p+p{margin:0}
.why-proof strong{display:block;font-size:clamp(42px,4vw,58px);font-weight:500;line-height:1;color:var(--teal);letter-spacing:-.05em}
.why-proof span{display:block;max-width:140px;font-size:13px;line-height:1.5;margin-top:12px}
.why-cta{margin-top:38px;gap:28px;padding:18px 24px;min-height:56px;border-radius:3px}
.why-cta span{font-size:22px;font-weight:400}
.why-details{border-top:1px solid var(--line)}
.why-details details{border-bottom:1px solid var(--line);padding:0 22px;transition:background .2s}
.why-details details[open]{background:transparent}
.why-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 0;color:var(--ink);font-size:20px;font-weight:600;line-height:1.35;cursor:pointer}
.why-details summary::-webkit-details-marker{display:none}
.why-details summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.why-details summary span{position:relative;width:20px;height:20px;flex-shrink:0}
.why-details summary span:before,.why-details summary span:after{content:'';position:absolute;top:9px;left:2px;width:16px;height:2px;background:var(--teal)}
.why-details summary span:after{transform:rotate(90deg);transition:transform .2s}
.why-details details[open] summary span:after{transform:rotate(0)}
.why-details p{font-size:16px;line-height:1.7;max-width:55ch;padding-bottom:28px}
.show-garden h2{font-size:clamp(28px,3vw,40px);line-height:1.12}
.show-garden p{line-height:1.65}
.show-garden .btn{padding:18px 26px;min-height:54px}.show-garden p+p{margin-top:16px}.contact p+p{margin-top:16px}.contact>img{aspect-ratio:4/3;object-fit:cover}
.projects{min-height:0;padding:72px 0 44px}
.projects-heading{text-align:center;max-width:850px;margin:0 auto 28px;padding:0 6vw}
.projects-heading h2{font-size:clamp(30px,3.4vw,46px);line-height:1.15}
.projects-heading p{font-size:15px;line-height:1.65;margin-top:20px}
.gallery-filters{max-width:1160px;padding:0 3vw;margin:0 auto 34px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gallery-filters button{background:transparent;border:1px solid var(--field-line);border-radius:24px;color:var(--ink);font-size:12px;padding:10px 15px;min-height:42px}
.gallery-filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.projects .project-track{position:relative;padding:0 8vw;gap:20px;scroll-padding-inline:8vw;scroll-behavior:auto;overflow-anchor:none}
.projects .project-card{flex-basis:calc((84vw - 40px)/3);scroll-margin-left:0}
.projects .project-card img{aspect-ratio:4/3;height:auto;object-fit:cover;transition:transform .35s}
.projects .project-card button:hover img{transform:scale(1.035)}
.projects .project-card h3{font-size:16px;line-height:1.35;font-weight:500;margin-top:16px}
.projects .carousel-arrow{top:calc((84vw - 40px)/3 * .375 - 24px);width:48px;height:48px;border:1px solid #ffffff80;box-shadow:0 2px 12px #0002}
.projects .carousel-arrow.prev{left:calc(8vw - 24px)}
.projects .carousel-arrow.next{right:calc(8vw - 24px)}
.gallery-status{text-align:center;font-size:12px;color:var(--muted);margin-top:24px}
@media(max-width:1000px){.why-section{gap:5vw}.why-proof{gap:22px}.why-details summary{font-size:18px}.projects .project-card{flex-basis:calc((84vw - 20px)/2)}.projects .carousel-arrow{top:calc((84vw - 20px)/2 * .375 - 24px)}}
@media(max-width:767px){
 .hero{min-height:640px;padding:185px 6vw 64px}
 .hero h1{font-size:clamp(32px,8.8vw,46px);line-height:1.09}
 .hero p{font-size:18px;margin-top:24px}
 .hero-buttons{gap:12px;margin-top:28px}
 .hero-buttons .btn{min-width:0;flex:1;padding:16px 12px;min-height:54px}
 .why-section{grid-template-columns:1fr;gap:34px;padding:52px 6vw}
 .why-intro h2 br{display:none}
 .why-proof{gap:38px;margin-top:28px}
 .why-cta{margin-top:28px}
 .why-details details{padding:0 16px}
 .why-details summary{font-size:17px;padding:22px 0}
 .why-details p{font-size:15px;padding-bottom:24px}
 .projects{padding:52px 0 32px}
 .gallery-filters{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;padding:0 6vw;scrollbar-width:thin;margin-bottom:26px}
 .gallery-filters button{flex-shrink:0;min-height:44px}
 .projects .project-card{flex-basis:84vw}
 .projects .project-card h3{font-size:16px}
 .projects .carousel-arrow{top:calc(31.5vw - 22px);width:44px;height:44px}
 .projects .carousel-arrow.prev{left:calc(8vw - 22px)}
 .projects .carousel-arrow.next{right:calc(8vw - 22px)}
}

/* A single quiet gallery selector and a complete, compact enquiry form. */
.gallery-toolbar{max-width:var(--sqs-site-max-width);margin:0 auto 32px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;width:84vw}
.gallery-select{display:flex;align-items:center;gap:20px;min-width:0}
.gallery-select label{font-size:14px;color:var(--muted)}
.gallery-select select{font:500 18px/1.4 Montserrat,Arial,sans-serif;color:var(--ink);background:transparent;border:0;max-width:100%;min-width:240px;min-height:44px;padding:8px 32px 8px 0;cursor:pointer}
.gallery-toolbar .gallery-status{margin:0;font-size:12px;white-space:nowrap}
select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.enquiry-dialog{width:660px;padding:32px;overflow-y:auto;overscroll-behavior:contain}
.enquiry-dialog h2{font-size:32px;line-height:1.15}
.enquiry-dialog .enquiry-intro{font-size:14px;line-height:1.5;margin-top:10px;padding-right:10px}
.enquiry-dialog>.close-dialog{margin:-12px -12px 10px 10px;min-width:42px;min-height:42px;font-size:22px;line-height:1;padding:8px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:24px}
.enquiry-dialog .contact-fields label{margin:0;font-size:13px;font-weight:500;min-width:0}
.full-field{grid-column:1/-1}
.enquiry-dialog .optional{font-size:11px;font-weight:400;color:var(--muted)}
.enquiry-dialog input,.enquiry-dialog textarea,.enquiry-dialog select{font:400 16px/1.4 Montserrat,Arial,sans-serif;display:block;width:100%;border:1px solid var(--line);border-radius:3px;background:white;color:var(--ink);padding:11px 12px;margin-top:7px;min-height:46px}
.enquiry-dialog textarea{resize:vertical;min-height:94px}
.enquiry-dialog textarea::placeholder{font-size:13px;color:var(--muted)}
.enquiry-dialog .field-help{font-size:11px;line-height:1.5;color:var(--muted);margin:-8px 0 0}
.enquiry-dialog .privacy-acceptance{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.5;margin-top:20px}
.enquiry-dialog .privacy-acceptance input{width:18px;height:18px;min-height:0;flex-shrink:0;padding:0;margin:0;accent-color:var(--maroon)}
.privacy-acceptance a{text-decoration:underline;text-underline-offset:3px}
.enquiry-dialog form>.btn{width:100%;min-height:52px;justify-content:space-between;padding-inline:20px;margin-top:20px}
.enquiry-dialog form>.btn span{font-size:22px}
.enquiry-dialog #form-status{padding:12px 14px;background:var(--pale);border-left:3px solid var(--teal);font-size:13px;line-height:1.6}
.enquiry-dialog #form-status[hidden]{display:none}
@media(max-width:767px){.gallery-toolbar{gap:8px;flex-wrap:wrap;margin-bottom:26px;padding:12px 0}.gallery-select{flex:1;gap:12px}.gallery-select select{font-size:16px;min-width:0;width:100%;padding-right:16px}.gallery-toolbar .gallery-status{width:100%;text-align:right;font-size:11px}.enquiry-dialog{padding:24px 20px;max-width:94vw}.enquiry-dialog h2{font-size:28px}.contact-fields{gap:14px 12px}.enquiry-dialog>.close-dialog{margin:-8px -8px 8px 8px}}
@media(max-width:420px){.contact-fields{grid-template-columns:1fr}.enquiry-dialog .field-help{margin:0}.enquiry-dialog .contact-fields label{font-size:12px}}

/* Final responsive pass, 6 September 2026: closed gaps on phones, and a layout that
   grows with very wide desktop windows instead of sitting in the middle of them. */
@media(max-width:767px){
 .service-cards{min-height:0;padding:52px 6vw 40px}
 .service-cards>h2{margin-bottom:36px}
 .service-grid{gap:44px}
 .service-grid img{margin-bottom:22px}
 .service-grid h3,.service-grid article:nth-child(2) h3{min-height:0;max-width:none;font-weight:600;font-size:22px;line-height:1.2}
 .service-grid h3 br{display:none}
 .service-grid p,.service-grid article:nth-child(2) p{min-height:0;max-width:none;margin-top:14px;font-size:15px;line-height:1.6}
 .service-grid .btn{margin-top:20px}
 .split-feature .section-content{padding:52px 0 56px}
 .split-feature .layout-5{display:flex;flex-direction:column;gap:0;padding:0 6vw;overflow:visible}
 .split-feature .fe-block{min-height:0;width:100%}
 .split-feature .slot-5-1{display:none}
 .split-feature .slot-5-2{order:1}
 .split-feature .slot-5-0{order:2;margin-top:18px}
 .split-feature .slot-5-3{order:3;margin-top:26px}
 .split-feature .slot-5-4{order:4;margin-top:36px;aspect-ratio:4/3;position:relative}
 .split-feature h2{font-size:28px;line-height:1.15}
 .split-feature .slot-5-0 p{line-height:1.65}
}
@media(min-width:1800px){
 :root{--sqs-site-max-width:1560px}
 body{font-size:18px}
 .ribbon{font-size:12px;min-height:32px;padding:8px 20px}
 .site-header{top:32px;padding:14px 3vw}
 .header-inner{height:76px;gap:40px}
 .brand img{height:76px}
 .header-inner nav{gap:40px}
 .header-inner nav>a,.nav-group>button,.phone-link{font-size:13px}
 .header-btn{font-size:12px;min-height:48px;padding:14px 22px}
 .dropdown a{font-size:14px}
 .btn{font-size:14px}
 .btn.small{font-size:12px;min-height:48px;padding:16px 14px}
 .hero{min-height:min(78vh,1150px);padding-top:230px;padding-bottom:110px}
 .hero-content{max-width:1120px}
 .hero h1{font-size:clamp(64px,3.5vw,94px);max-width:1050px}
 .hero p{font-size:clamp(22px,1.35vw,28px);max-width:880px;margin-top:32px}
 .hero-buttons{margin-top:40px}
 .hero-buttons .btn{min-height:62px;min-width:190px}
 .intro .layout-1{max-width:1180px;gap:28px}
 .intro .section-content{padding:96px 6vw}
 .intro .rating{font-size:16px}
 .intro .rating .stars{font-size:32px}
 .intro h2{font-size:clamp(44px,2.4vw,58px)}
 .intro .review-carousel{font-size:clamp(29px,1.5vw,36px)}
 .intro .review-slide footer{font-size:16px}
 .service-cards>h2,.projects-heading h2{font-size:clamp(50px,2.6vw,64px)}
 .service-grid{gap:80px}
 .service-grid h3{font-size:28px}
 .service-grid p{font-size:16px;line-height:1.6}
 .garden-story h2{font-size:clamp(38px,2.1vw,52px)}
 .garden-story p,.transformation-heading p,.show-garden p,.projects-heading p,.contact p{font-size:19px}
 .transformation-heading h2,.process-heading h2,.show-garden h2{font-size:clamp(40px,2.2vw,54px)}
 .comparison-grid figcaption{font-size:15px}
 .process-grid h3{font-size:24px}
 .process-grid p,.why-details p{font-size:18px}
 .process-grid{gap:56px}
 .why-intro h2{font-size:clamp(50px,2.9vw,66px)}
 .why-proof strong{font-size:clamp(58px,3.2vw,74px)}
 .why-proof span{font-size:15px;max-width:170px}
 .why-details summary{font-size:23px;padding:30px 0}
 .projects .project-card h3{font-size:18px}
 .gallery-select select{font-size:20px}
 .gallery-toolbar .gallery-status{font-size:14px}
 .contact h2{font-size:clamp(40px,2.2vw,54px)}
 .marquee>div{font-size:22px}
 .compact-footer h2{font-size:22px}
 .compact-footer p,.footer-links,.footer-bottom p,.footer-bottom a{font-size:14px}
 .footer-contact a{font-size:16px}
 .disclaimer{font-size:13px}
}
@media(min-width:2400px){
 :root{--sqs-site-max-width:1900px}
 body{font-size:20px}
 .ribbon{font-size:14px;min-height:36px}
 .site-header{top:36px}
 .header-inner{height:90px;gap:48px}
 .brand img{height:90px}
 .header-inner nav{gap:48px}
 .header-inner nav>a,.nav-group>button,.phone-link{font-size:15px}
 .header-btn{font-size:13px;min-height:54px;padding:16px 26px}
 .btn{font-size:15px}
 .hero{min-height:min(80vh,1300px);padding-top:260px}
 .hero-content{max-width:1300px}
 .hero h1{font-size:clamp(84px,3.4vw,112px);max-width:1250px}
 .hero p{font-size:clamp(26px,1.2vw,32px);max-width:1000px}
 .intro .layout-1{max-width:1400px}
 .intro h2{font-size:clamp(54px,2.3vw,70px)}
 .intro .review-carousel{font-size:clamp(34px,1.4vw,42px)}
 .service-cards>h2,.projects-heading h2{font-size:clamp(60px,2.5vw,76px)}
 .service-grid h3{font-size:32px}
 .service-grid p,.process-grid p,.why-details p{font-size:19px}
 .garden-story h2{font-size:clamp(48px,2vw,62px)}
 .garden-story p,.transformation-heading p,.show-garden p,.projects-heading p,.contact p{font-size:22px}
 .transformation-heading h2,.process-heading h2,.show-garden h2,.contact h2{font-size:clamp(50px,2.1vw,64px)}
 .why-intro h2{font-size:clamp(60px,2.7vw,78px)}
 .why-details summary{font-size:26px}
 .projects .project-card h3{font-size:20px}
 .marquee>div{font-size:26px}
 .compact-footer p,.footer-links,.footer-bottom p,.footer-bottom a{font-size:16px}
 .disclaimer{font-size:14px}
}

/* Refined hero: original-resolution photography and a centred, lower composition. */
.site-header{position:relative;top:auto;box-shadow:none}
.hero.hero-split{display:flex;align-items:flex-end;justify-content:center;position:relative;isolation:isolate;overflow:hidden;min-height:740px;padding:220px 40px 58px;margin:20px 4vw 40px;border-radius:10px;background:var(--ink);color:white}
.hero-split .hero-media{position:absolute;inset:0;z-index:-2}
.hero-split .hero-media picture{display:block;width:100%;height:100%}
.hero-split .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-split::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 15%,rgba(var(--hero-scrim),.05) 28%,rgba(var(--hero-scrim),.48) 49%,rgba(var(--hero-scrim),.82) 76%,rgba(var(--hero-scrim),.93))}
.hero-split .hero-content{position:relative;min-width:0;width:100%;max-width:900px;padding:0;text-align:center}

.hero-split h1{font-size:clamp(54px,5.1vw,100px);font-weight:500;letter-spacing:-.045em;line-height:1.03;color:white;max-width:none;margin:0}
.hero-split p.hero-description{font-size:17px;font-weight:400;line-height:1.65;letter-spacing:0;max-width:none;margin:22px auto 0;color:var(--paper)}
.hero-split .hero-buttons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:28px}
.hero-split .hero-buttons .btn,.hero-split .hero-work-link{display:inline-flex;align-items:center;justify-content:center;min-width:170px;min-height:54px;padding:16px 24px;border-radius:4px;font-size:13px;font-weight:600;line-height:20px;text-decoration:none;text-transform:none}
.hero-split .hero-buttons .btn{background:var(--maroon);color:white}
.hero-split .hero-work-link{gap:16px;border:1px solid color-mix(in srgb, var(--paper) 50%, transparent);color:var(--paper);background:transparent;transition:background .2s,border-color .2s}
.hero-split .hero-work-link svg{display:block;flex:0 0 20px;width:20px;height:20px}
.hero-split .hero-work-link:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);text-decoration:none}
@media(min-width:1800px){.hero.hero-split{min-height:900px;padding-top:280px;padding-bottom:80px}.hero-split p.hero-description{font-size:21px}}
@media(max-width:1000px) and (min-width:768px){.hero.hero-split{min-height:690px;padding:200px 32px 48px}.hero-split h1{font-size:66px}}
@media(max-width:767px){
 .hero.hero-split{min-height:700px;align-items:flex-end;margin:8px 4vw 24px;padding:210px 20px 36px;border-radius:7px}
 .hero-split .hero-media img{object-position:center 38%}
 .hero-split::before{background:linear-gradient(180deg,transparent 12%,rgba(var(--hero-scrim),.12) 28%,rgba(var(--hero-scrim),.66) 48%,rgba(var(--hero-scrim),.92) 78%)}
 .hero-split h1{font-size:clamp(39px,10.5vw,62px);letter-spacing:-.05em;line-height:1.06}
 .hero-split p.hero-description{font-size:14px;line-height:1.65;margin-top:20px}
 .hero-split .hero-buttons{gap:10px;margin-top:24px;flex-wrap:nowrap}
 .hero-split .hero-buttons .btn,.hero-split .hero-work-link{flex:1;min-width:0;min-height:50px;padding:12px 10px;font-size:11px;white-space:nowrap}
 .hero-split .hero-work-link{gap:8px}.hero-split .hero-work-link svg{width:17px;height:17px;flex-basis:17px}
}
@media(max-width:360px){.hero.hero-split{padding-inline:14px}.hero-split h1{font-size:37px}.hero-split .hero-buttons{gap:8px}.hero-split .hero-buttons .btn,.hero-split .hero-work-link{font-size:10px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.hero-split .hero-work-link{transition:none}}

/* Edge-to-edge hero, sized to the first viewport below the existing header. */
:root{--hero-header-height:84px}
.hero.hero-split{align-items:center;height:calc(100svh - var(--hero-header-height));min-height:0;margin:0;padding:28px 5vw;border-radius:0}
.hero-split::before{background:linear-gradient(180deg,rgba(var(--hero-scrim),.12),rgba(var(--hero-scrim),.6) 32%,rgba(var(--hero-scrim),.72) 68%,rgba(var(--hero-scrim),.86))}
@media(min-width:1800px){:root{--hero-header-height:104px}}
@media(min-width:2400px){:root{--hero-header-height:118px}}
@media(max-width:767px){
 :root{--hero-header-height:90px}
 .hero.hero-split{padding:24px 6vw}
 .header-inner nav{inset:90px 0 0}
}
@media(max-height:650px){
 .hero.hero-split{padding-block:16px}
 .hero-split h1{font-size:clamp(32px,7svh,46px)}
 .hero-split p.hero-description{font-size:14px;margin-top:14px}
 .hero-split .hero-buttons{margin-top:18px}
 .hero-split .hero-buttons .btn,.hero-split .hero-work-link{min-height:48px;padding-block:12px}
}
@media(max-height:450px){
 .hero.hero-split{padding-block:12px}
 .hero-split h1{font-size:30px}.hero-split h1 br{display:none}.hero-split h1 br::after{content:" "}
 .hero-split p.hero-description{font-size:12px;margin-top:8px}.hero-split p.hero-description br{display:none}
 .hero-split .hero-buttons{margin-top:12px}
 .hero-split .hero-buttons .btn,.hero-split .hero-work-link{min-height:44px;padding-block:10px}
}

/* Consistent drawn arrows on mobile and desktop. */
.ui-arrow{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}.ui-arrow-left{transform:rotate(180deg)}
[data-review],[data-project]{display:inline-flex;align-items:center;justify-content:center}
#enquiry button[type="submit"]{gap:10px}

/* Let the divider reach the edge while keeping its circular handle inside the frame. */
.comparison-grid .comparison img{object-fit:cover}
.comparison .compare-divider{left:0;width:100%;border-left:0}
.comparison .compare-divider::before{content:"";position:absolute;inset:0 auto 0 var(--position);border-left:2px solid white}
.comparison .compare-divider b{left:clamp(24px,var(--position),calc(100% - 24px))}

/* Kev's Paving and Fencing: the dark green, gold and silver of their own KPF badge. The badge
   keeps its own background, so the header is set to exactly that green and the two meet with
   no seam. */
:root{--ink:#0b1a03;--maroon:#3f7f1f;--olive:#16290c;--teal:#2c4420;--accent:#c0a848;--gold:#c0a848;--focus:#8fcf5a;--paper:#f5f6f1;--pale:#e8ece2;--line:#d6dbcd;--hero-scrim:11,26,3}
.site-header{background:#0b1a03;color:#eef0e6;box-shadow:none}
.menu-toggle span{background:#eef0e6}
.header-btn,.dark .btn,.hero-split .hero-buttons .btn{background:#3f7f1f;color:#fff}
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:#eef0e6}
.brand-lockup img{width:56px;height:56px;flex:0 0 56px;object-fit:contain}
.brand-lockup span{display:block;font-weight:800;font-size:19px;line-height:1.05;letter-spacing:.01em;white-space:nowrap}
.brand-lockup small{display:block;margin-top:6px;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#c0a848}
@media(max-width:1000px){.brand-lockup{gap:10px}.brand-lockup img{width:48px;height:48px;flex-basis:48px}.brand-lockup span{font-size:17px}}
@media(max-width:767px){.brand-lockup span{font-size:16px}.brand-lockup small{font-size:8.5px;letter-spacing:.18em}}
@media(max-width:360px){.brand-lockup span{font-size:14px}.brand-lockup img{width:40px;height:40px;flex-basis:40px}}
@media(min-width:1800px){.brand-lockup img{width:68px;height:68px;flex-basis:68px}.brand-lockup span{font-size:23px}.brand-lockup small{font-size:11px}}
/* The hero is a wide paved area photographed from above, so the crop is held high enough to
   keep the fence and hedge line behind the headline. */
.hero-split .hero-media img{object-position:50% 42%}
@media(max-width:767px){.hero-split .hero-media img{object-position:50% 50%}}
.hero.hero-split::before{background:linear-gradient(180deg,rgba(var(--hero-scrim),.3) 4%,rgba(var(--hero-scrim),.46) 26%,rgba(var(--hero-scrim),.66) 48%,rgba(var(--hero-scrim),.7) 76%,rgba(var(--hero-scrim),.64))}
.service-grid article:nth-child(1) img{object-position:50% 55%}
.service-grid article:nth-child(2) img{object-position:50% 45%}
.service-grid article:nth-child(3) img{object-position:50% 55%}
.service-grid article:nth-child(4) img{object-position:50% 45%}
.compact-footer .disclaimer p{color:#3a4033}
.compact-footer .disclaimer a{color:#2a3024}

/* Four services, so the grid runs two by two and the reference's per-card height reserves,
   which were written for a two-card row, are cleared. Each card is a column with its button
   on the bottom, so the two buttons in a row share a baseline whatever the copy length. */
.service-grid{gap:56px 60px}
.service-grid h3,.service-grid p,.service-grid article:nth-child(2) h3,.service-grid article:nth-child(2) p{min-height:0;max-width:100%}
.service-grid article{display:flex;flex-direction:column}
.service-grid .btn{align-self:flex-start;margin-top:auto}
@media(min-width:768px){.service-grid p,.service-grid article:nth-child(2) p{margin-top:20px;min-height:0;padding-bottom:28px}}
@media(max-width:767px){.service-grid{gap:44px}.service-grid p,.service-grid article:nth-child(2) p{margin-top:14px;min-height:0;padding-bottom:20px}}
.service-grid img{aspect-ratio:1.5;object-fit:cover}
.service-cards{min-height:0}
.service-cards>h2{margin-bottom:56px;height:auto}
@media(max-width:767px){.service-cards>h2{margin-bottom:40px}}
.service-cards>.section-intro{text-align:center;max-width:680px;margin:0 auto 56px;font-size:16px;line-height:1.6;color:var(--muted)}
@media(max-width:767px){.service-cards>.section-intro{margin-bottom:40px}}
/* Step numbers are left aligned to match the left aligned cards. */
.process-number{text-align:left;font-size:19px}
/* A 44px touch area on the mobile menu links, without moving them. */
@media(max-width:767px){#navigation.open a{padding-block:7px;margin-block:-7px}}
/* The telephone number sits inside a sentence, so it is underlined to read as a link. */
.garden-story-copy a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.garden-story-copy h2,.projects-heading h2,.hero-split h1{text-wrap:balance}
/* The disclaimer is a child of the footer, so it is pulled back out to the full width and
   given its own text colour rather than inheriting the dark panel's. */
.compact-footer{--footer-gutter:max(3vw,calc((100vw - var(--sqs-site-max-width))/2));padding-bottom:0}
.compact-footer .disclaimer{margin-inline:calc(-1 * var(--footer-gutter));padding-inline:var(--footer-gutter)}
@media(max-width:767px){.compact-footer{--footer-gutter:6vw}}

/* ---- 23 September rebuild. The reference hero, carousel, About, Get a quote and footer
   are unchanged; what follows is Kev's palette, an eight card service grid, the slider
   clamp, more room in the three text blocks and the two contact shortcuts. ---- */

/* The badge came from Kev's own poster file and keeps its own near black field, so the
   header is set to exactly that colour and the two meet with no seam. */
.site-header{background:#040e04}
.brand-lockup img{border-radius:6px}

/* Hero: the reference layout, with the two actions a visitor actually takes. */
.hero-buttons{flex-wrap:wrap;justify-content:center}
.hero-split .hero-buttons .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-transform:none;font-size:13px;font-weight:700;letter-spacing:.01em;min-height:54px}
.hero-split .hero-buttons .btn svg{flex:0 0 18px}
.hero-split .hero-buttons .btn.secondary{background:#ffffff1a;color:#fff;border:1px solid #ffffff59}
.hero-split .hero-buttons .btn.secondary:hover{background:#ffffff2e;filter:none}
.hero-split .hero-content{display:flex;flex-direction:column;align-items:center}
.hero-split .hero-work-link{margin-top:18px;border:0;min-height:44px;font-size:13px;color:var(--paper);gap:10px}
.hero.hero-split::before{background:linear-gradient(180deg,rgba(var(--hero-scrim),.26) 4%,rgba(var(--hero-scrim),.4) 26%,rgba(var(--hero-scrim),.58) 48%,rgba(var(--hero-scrim),.62) 76%,rgba(var(--hero-scrim),.56))}

/* Eight services, so the cards lose their individual buttons and the section carries one.
   Two across on a phone, four on a desktop. */
.service-grid-8{display:grid;grid-template-columns:1fr;gap:32px}
.service-grid-8 article{display:flex;flex-direction:column}
.service-grid-8 img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:50% 55%;border-radius:4px;margin-bottom:14px}
.service-grid-8 article:nth-child(2) img{object-position:50% 62%}
.service-grid-8 article:nth-child(4) img{object-position:50% 68%}
.service-grid-8 article:nth-child(6) img{object-position:50% 60%}
.service-grid-8 h3,.service-grid-8 article:nth-child(2) h3{font-size:18px;line-height:1.3;font-weight:700;min-height:0;max-width:none}
.service-grid-8 p,.service-grid-8 article:nth-child(2) p{font-size:15px;line-height:1.6;margin-top:10px;min-height:0;max-width:none;padding-bottom:0}
.service-cards>.btn{display:flex;width:fit-content;margin:36px auto 0;padding-inline:26px}
.service-cards>h2{margin-bottom:36px;height:auto}

/* Before and after. The handle used to stop when it met the edge of the frame while the
   image carried on, which looked like a bug. One clamped position now drives the clip, the
   divider and the handle together, so the slider refuses the last few pixels at each end and
   a sliver of both photographs is always visible. */
.comparison{--pos:clamp(26px,var(--position),calc(100% - 26px))}
.comparison .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comparison .compare-divider::before{inset:0 auto 0 var(--pos)}
.comparison .compare-divider b{left:var(--pos)}
.transformations{padding:56px 6vw}
.transformation-heading{margin-bottom:26px}
.transformation-heading h2{font-size:clamp(27px,7vw,40px)}
.transformation-heading p{margin-top:14px;font-size:14.5px;line-height:1.6}
.comparison-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:1000px;margin-inline:auto}
.comparison-grid .comparison{aspect-ratio:4/3;height:auto;min-height:0;border-radius:5px}
.comparison-grid .comparison img{width:100%;object-fit:cover;object-position:50% 50%}
.comparison-grid figcaption{font-size:13px;margin-top:12px;color:var(--muted);line-height:1.5}

/* About and Get a quote carry more than the reference two lines, so both get more room. */
.garden-story{padding-block:64px}
.garden-story-copy p{margin-top:20px}
.garden-story-copy p+p{margin-top:16px}
.garden-story-copy .btn{margin-top:30px}
.garden-story-copy a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.garden-story-copy h2,.projects-heading h2,.hero-split h1{text-wrap:balance}
.contact-actions{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:340px}
.contact-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;text-transform:none;font-size:13px;font-weight:700}
.contact-actions .btn svg{flex:0 0 18px}
.contact-actions .btn.secondary{background:#ffffff1a;color:#fff;border:1px solid #ffffff59}
.contact-actions .btn.secondary:hover{background:#ffffff2e;filter:none}

/* Footer: more room, and the Facebook page given the weight it earns, because it is where
   Kev already posts his work. */
.compact-footer{--footer-gutter:max(3vw,calc((100vw - var(--sqs-site-max-width))/2));padding:48px var(--footer-gutter) 0}
.compact-footer .disclaimer{margin-inline:calc(-1 * var(--footer-gutter));padding-inline:var(--footer-gutter);margin-top:34px}
.compact-footer .disclaimer p{color:#3a4033}
.compact-footer .disclaimer a{color:#2a3024}
.footer-main{gap:34px}
.compact-footer h2{font-size:21px;margin-bottom:14px}
.compact-footer p{font-size:13px;line-height:1.75}
.footer-links a{min-height:42px;font-size:13px}
.footer-facebook{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff26;transition:background .18s}
.footer-facebook:hover{background:#ffffff26;text-decoration:none}
.footer-facebook-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#1877f2;color:#fff}
.footer-facebook-text{display:block;min-width:0}
.footer-facebook-text strong{display:block;font-size:14px;line-height:1.3;color:#fff}
.footer-facebook-text small{display:block;margin-top:4px;font-size:12px;color:var(--footer-text)}
.footer-connect>p{margin-top:16px}

/* WhatsApp bottom right everywhere. */
.wa-float{position:fixed;right:14px;bottom:18px;z-index:61;display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#04310f;border-radius:999px;padding:12px;box-shadow:0 6px 18px #0000003d;transition:transform .18s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{flex:0 0 30px}
.wa-float-text{display:none;font-size:13.5px;font-weight:800;padding-right:6px}

/* The enquiry form really sends here, so it carries a challenge. */
.turnstile-slot{margin-top:18px}
.turnstile-slot:not(:empty){min-height:66px}
.enquiry-dialog form>.btn[disabled]{opacity:.55;cursor:not-allowed}

@media(min-width:560px){
 .contact-actions{flex-direction:row;flex-wrap:wrap;max-width:none}
 .service-grid-8{grid-template-columns:1fr 1fr;gap:28px 20px}
 .service-grid-8 img{aspect-ratio:4/3}
}
@media(min-width:768px){
 .wa-float{right:22px;bottom:22px;padding:12px 16px}
 .wa-float-text{display:inline}
 .transformations{padding:76px max(3vw,calc((100vw - var(--sqs-site-max-width))/2))}
 .comparison-grid{grid-template-columns:1fr 1fr;gap:24px}
 .garden-story{padding-block:80px}
 .compact-footer{padding-top:60px}
}
@media(min-width:1000px){
 .service-grid-8{grid-template-columns:repeat(4,1fr);gap:34px 26px}
}
@media(min-width:1800px){
 .service-grid-8{gap:40px 32px}
 .service-grid-8 h3,.service-grid-8 article:nth-child(2) h3{font-size:22px}
 .service-grid-8 p,.service-grid-8 article:nth-child(2) p{font-size:16px}
 .footer-facebook-text strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.wa-float:hover{transform:none}}

/* Nothing fixed along the foot of a phone now, so WhatsApp sits at the bottom on its own. */
.wa-float{bottom:18px}

/* The Facebook recommendations, added 23 September 2026. They are not starred:
   Facebook records a recommendation rather than a rating, so the block that
   carries five stars on a Google page carries the Facebook mark here. */
.facebook-rating{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* The mark is the link to his page. It keeps the section's own colour rather
   than Facebook blue, which would be the only blue on the site, and it carries
   a 44px target of its own so a thumb has something to hit. */
.facebook-mark{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--teal);border-radius:50%;transition:color .15s,background-color .15s}
.facebook-mark:hover,.facebook-mark:focus-visible{color:var(--ink);background:#0000000d}
.review-source{margin:20px 0 0;font-size:14px}
.review-source a{color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:6px 4px;display:inline-block}
.review-source a:hover,.review-source a:focus-visible{color:var(--ink)}
.intro .review-slide p{margin:0}
.intro .review-slide footer{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:767px){.facebook-rating{font-size:12px;gap:8px}.facebook-mark svg{width:24px;height:24px}}