/* FanBound Complete website engine: theme v3.0 (2 Nov 2026). One package: Complete.
   v3.0 takes the look of the Derwen Landscapes example (fanbound.co.uk examples v8.2 to v8.5), the quote section of the
   Cribau Roofing Basic example, the Google reviews block (greviews v1.0), and new photo galleries that keep every photo's
   own shape and never show it bigger than its real size. Every colour and font comes from the tokens that build_bc.py writes
   per customer in <style>:root{...}</style>. Do not hard-code customer colours here. FanBound IP: reused across customer sites. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);--t-in:.38s;--t-out:.22s;--t-ui:.26s;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
.dark a:hover,.page-head a:hover,.foot a:hover,.aside a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:var(--dw);line-height:1.12;letter-spacing:-.01em;margin:0 0 .45em;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(38px,5.2vw,66px);line-height:1.03;letter-spacing:-.022em}
h2{font-size:clamp(30px,3.3vw,44px);letter-spacing:-.018em}
h3{font-size:22px;line-height:1.25}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:99;background:var(--paper);color:var(--ink);padding:8px 14px}
section{padding:96px 0}
.tight{padding:72px 0}
.lead{font-size:19px;color:var(--muted);max-width:60ch}
.tint{background:var(--tint)}
.dark{background:var(--brand);color:var(--on-brand)}
.dark .lead,.dark .sec-head p{color:var(--on-brand-muted)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px 64px;align-items:end;margin-bottom:48px}
.sec-head h2{margin:0}
.sec-head p{margin:0;color:var(--muted);max-width:56ch;font-size:18px}

/* demo label */
.demo-bar{background:var(--demo-bg);color:var(--demo-fg);font-size:13.5px;line-height:1.45;padding:9px 0}
.demo-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center}
.demo-bar b{font-weight:700}
.demo-bar .pill{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:12px;padding:2px 8px;border-radius:3px;margin-right:8px;vertical-align:1px}
.demo-links{display:flex;gap:6px 18px;flex-wrap:wrap}
.demo-links a{color:inherit;font-weight:600}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:76px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.brand svg{width:42px;height:42px;flex:none}
.brand b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:22px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.brand small{display:block;font-size:13px;color:var(--muted);line-height:1.35;white-space:nowrap}
#site-nav{display:flex;gap:22px}
#site-nav a{text-decoration:none;font-size:15.5px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
#site-nav a:hover,#site-nav a[aria-current=page]{border-bottom-color:var(--accent);color:var(--ink)}
.top .tel{font-weight:600;text-decoration:none;white-space:nowrap;display:flex;gap:8px;align-items:center;font-size:16px}
.top .tel svg,.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--rb);background:transparent;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.menu-btn i{display:block;width:16px;height:2px;background:currentColor;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menu-btn i::before{top:-5px}.menu-btn i::after{top:5px}
.nav-open .menu-btn i{background:transparent}
.nav-open .menu-btn i::before{top:0;transform:rotate(45deg)}
.nav-open .menu-btn i::after{top:0;transform:rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--rb);background:var(--accent);color:var(--on-accent);font:600 16px/1.2 var(--body);text-decoration:none;border:1.5px solid var(--accent);cursor:pointer;transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out);text-align:center}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;border-color:currentColor}
.btn.small{min-height:44px;padding:8px 18px;font-size:15px}
.btn.wide{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* hero, Basic: split */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--brand);color:var(--on-brand);padding:0;position:relative}
.hero-split .copy{padding:88px 64px 96px max(24px,calc((100vw - 1200px)/2 + 24px));display:flex;flex-direction:column;justify-content:center}
.hero-split .media{position:relative;min-height:560px}
.hero-split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .sub{font-size:19px;color:var(--on-brand-muted);max-width:46ch;margin-bottom:32px}
.hero h1{max-width:15ch}
.hero-facts{list-style:none;padding:0;margin:36px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;color:var(--on-brand-muted)}
.hero-facts li{display:flex;gap:10px;align-items:center}
.hero-facts li::before,.areas li::before{content:"";width:16px;height:9px;flex:none;background:var(--mark) no-repeat center/contain}
.hero .btn.ghost{color:var(--on-brand)}

/* hero, Complete: photo with quick quote */
.hero-photo{position:relative;padding:0;color:var(--on-brand);background:var(--brand);overflow:hidden}
.hero-photo>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--scrim) 0%,var(--scrim) 34%,var(--scrim-weak) 78%,var(--scrim-light) 100%)}
.hero-photo .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.78fr);gap:64px;align-items:center;padding-top:88px;padding-bottom:88px;min-height:640px}
.quick{background:var(--card);color:var(--ink);border-radius:var(--r);padding:30px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.quick h2{font-size:30px;margin-bottom:4px}
.quick>p{color:var(--muted);font-size:15.5px;margin-bottom:20px}
.quick .field{margin-bottom:14px}

/* trust strip */
.trust{background:var(--tint);padding:0;border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px}
.trust li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:15.5px;line-height:1.35}
.trust svg{width:28px;height:28px;flex:none;stroke:var(--accent-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.svc{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.svc .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--tint);margin-bottom:20px}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
a.svc:hover .ph img{transform:scale(1.035)}
a.svc:hover{color:inherit}
.svc h3{margin:0 0 8px}
.svc p{color:var(--muted);margin:0 0 14px;font-size:16px}
.svc .more{margin-top:auto;font-weight:600;font-size:15.5px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px}
a.svc:hover .more{color:var(--accent-ink)}

/* gallery (Basic) */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:12px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--tint)}
.gallery figure.big{grid-column:span 2;grid-row:span 2}
.gallery figure.long{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 12px;font-size:14.5px;font-weight:500;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:center}
.about .ph img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
.about .ph.land img{aspect-ratio:4/3}
.facts-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.facts-list li,.ticks li{padding-left:30px;position:relative}
.facts-list li::before,.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:7px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.dark .facts-list li::before{border-color:var(--accent)}

/* steps: a real sequence */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps li{counter-increment:s;border-top:2px solid var(--accent);padding-top:20px}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:var(--dw);font-size:44px;line-height:1;color:var(--accent-ink);display:block;margin-bottom:14px}
.dark .steps li::before{color:var(--accent)}
.steps h3{font-size:21px;margin-bottom:6px}
.steps p{margin:0;color:var(--muted);font-size:16px}
.dark .steps p{color:var(--on-brand-muted)}

/* reviews placeholder */
.reviews-slot{border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 24px;align-items:start;background:var(--card);max-width:900px}
.reviews-slot svg{width:40px;height:40px;stroke:var(--accent-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.reviews-slot h3{margin:0 0 6px}
.reviews-slot p{margin:0;color:var(--muted)}

/* areas */
.areas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 36px;border-top:1px solid var(--on-brand-line)}
.areas li{white-space:nowrap;font-family:var(--display);font-weight:var(--dw);font-size:23px;line-height:1.2;padding:18px 0;border-bottom:1px solid var(--on-brand-line);display:flex;align-items:center;gap:14px}
.areas li small{font-family:var(--body);font-size:13px;font-weight:600;color:var(--on-accent);background:var(--accent);padding:1px 7px;border-radius:3px;margin-left:2px;letter-spacing:0}
.areas-note{margin-top:28px;color:var(--on-brand-muted);font-size:16px}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 64px;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:600;font-size:18px;position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;background:var(--accent-ink);transition:transform .2s var(--ease-out)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:64ch}

/* contact + forms */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.contact-list{margin:32px 0 0;display:grid;gap:20px}
.contact-list>div{display:grid;grid-template-columns:24px 1fr;gap:2px 14px}
.contact-list .ic{width:22px;height:22px;stroke:var(--accent-ink);margin-top:3px;grid-row:span 2}
.contact-list dt{font-size:14px;color:var(--muted)}
.contact-list dd{margin:0;font-weight:600;font-size:17px}
.contact-list dd a{text-decoration:none}
.contact-list dd a:hover{text-decoration:underline}
.contact-list dd span{display:block;font-weight:400}
.form-card{background:var(--card);border-radius:var(--r);padding:36px;border:1px solid var(--line)}
.form-card h2{font-size:30px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.field{margin-bottom:18px}
label,legend{display:block;font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--ri);padding:11px 14px;min-height:50px}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
form.tried input:invalid,form.tried textarea:invalid,form.tried select:invalid{border-color:#B3261E}
fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;margin:0;font-weight:500}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;min-height:0}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:8px 16px;border:1.5px solid var(--line-strong);border-radius:999px;background:#fff;font-size:15px;line-height:1.2}
.chip input:checked+span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
fieldset.invalid .chip span{border-color:#B3261E}
.form-note{font-size:14px;color:var(--muted);margin:14px 0 0}
.form-status{margin-top:16px;font-weight:600;font-size:15.5px;line-height:1.45}
.form-status:empty{display:none}
.form-status.ok{background:var(--ok-bg);color:var(--ink);border-left:4px solid var(--accent);padding:12px 16px;border-radius:var(--ri)}
.form-status.err{color:#B3261E}
.hp{position:absolute;left:-9999px}

/* inner pages */
.page-head{background:var(--brand);color:var(--on-brand);padding:60px 0 72px;position:relative}
.page-head::after,.foot::before{content:"";position:absolute;left:0;right:0;height:10px;background:var(--motif) repeat-x left center/24px 10px}
.page-head::after{bottom:14px;opacity:.85}
.crumbs{font-size:14px;color:var(--on-brand-muted);margin:0 0 18px}
.crumbs a{color:inherit}
.page-head h1{font-size:clamp(36px,4.6vw,58px);max-width:20ch}
.page-head .lead{color:var(--on-brand-muted);margin:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}
.prose{max-width:740px}
.prose h2{font-size:32px;margin-top:52px}
.prose>img{border-radius:var(--r);margin-bottom:32px;width:100%}
.prose>p:first-of-type{font-size:19px}
.how{padding:0;margin:0;list-style:none;counter-reset:h}
.how li{counter-increment:h;position:relative;padding:4px 0 18px 54px}
.how li::before{content:counter(h);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:700;font-size:15px}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.opts div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.opts b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:20px;line-height:1.2;margin-bottom:6px}
.opts span{font-size:15px;color:var(--muted);display:block}
.ticks{list-style:none;padding:0;margin:0;columns:2;column-gap:32px}
.ticks li{margin-bottom:10px;break-inside:avoid}
.aside{position:sticky;top:100px;background:var(--brand);color:var(--on-brand);border-radius:var(--r);padding:30px}
.aside h3{font-size:24px}
.aside p{color:var(--on-brand-muted);font-size:15.5px}
.aside .call{margin:16px 0 0;font-size:15.5px;color:var(--on-brand-muted)}
.aside .call a{color:var(--on-brand);font-weight:700}
.aside .others{margin-top:26px;padding-top:20px;border-top:1px solid var(--on-brand-line)}
.aside .others h4{margin:0 0 10px;font-size:15px;color:var(--on-brand)}
.aside .others ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15.5px}
.aside .others a{color:var(--on-brand-muted)}
.legal-doc{max-width:760px}
.legal-doc h2{font-size:28px;margin-top:40px}
.legal-doc h2:first-child{margin-top:0}
.example-note{background:var(--tint);border-left:4px solid var(--accent);padding:14px 18px;border-radius:var(--ri);font-size:15.5px;margin-bottom:36px}

/* before and after */
.project{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:center}
.project+.project{margin-top:80px}
.ba{position:relative;overflow:hidden;border-radius:var(--r);--x:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y;background:var(--tint)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--x))}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;border:0;min-height:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;z-index:2;pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.35)}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M7 1 2 6l5 5M19 1l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ba input:focus-visible~.handle::after{outline:3px solid #fff;outline-offset:3px}
.ba .tag{position:absolute;top:14px;z-index:2;background:rgba(0,0,0,.66);color:#fff;font-size:13px;font-weight:600;padding:5px 10px;border-radius:4px;pointer-events:none}
.ba .t-b{left:14px}.ba .t-a{right:14px}
.project h3{font-size:28px}
.project p{color:var(--muted)}
.facts{display:grid;gap:0;margin:22px 0 0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;border-top:1px solid var(--line);padding:12px 0}
.facts dt{color:var(--muted);font-size:14.5px}
.facts dd{margin:0;font-weight:500;font-size:16px}
.stages{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:st}
.stages li{counter-increment:st}
.stages img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:10px}
.stages p{font-size:15px;margin:0;color:var(--muted)}
.stages p::before{content:counter(st) ". ";font-weight:700;color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.work-grid figure{margin:0}
.work-grid img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:10px}
.work-grid figcaption{font-size:15.5px;color:var(--muted)}

/* call to action band */
.cta-band{background:var(--tint);padding:72px 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.cta-band h2{margin:0;max-width:18ch}
.cta-band p{margin:8px 0 0;color:var(--muted)}

/* footer */
.foot{background:var(--brand);color:var(--on-brand-muted);padding:80px 0 36px;font-size:15.5px;position:relative}
.foot::before{top:0;opacity:.7}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot h3{color:var(--on-brand);font-size:21px;margin-bottom:12px}
.foot p{margin:0 0 6px}
.foot a{color:var(--on-brand)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--on-brand-line);padding-top:24px;font-size:14px;margin-top:12px}
.mob-bar{display:none}

/* responsive */
@media (max-width:1180px){.top .tel{display:none}}
@media (max-width:1000px){
  .menu-btn{display:inline-flex}
  #site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);flex-direction:column;gap:0;padding:4px 24px 16px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -12px rgba(0,0,0,.18)}
  .nav-open #site-nav{display:flex}
  #site-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  #site-nav a[aria-current=page]{border-bottom-color:var(--line);color:var(--accent-ink)}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-photo .wrap{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:40px}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  section{padding:72px 0}
  .tight{padding:56px 0}
  .sec-head,.faq-wrap{grid-template-columns:1fr;margin-bottom:32px}
  .faq-wrap{margin-bottom:0}
  .hero-split{grid-template-columns:1fr}
  .hero-split .media{order:-1;min-height:0;aspect-ratio:16/10}
  .hero-split .copy{padding:40px 24px 52px}
  .hero-photo>.bg{position:relative;height:auto;aspect-ratio:16/10}
  .hero-photo::before{display:none}
  .hero-photo .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:48px;min-height:0;gap:36px}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about,.contact,.project,.two{grid-template-columns:1fr;gap:40px}
  .about .ph img{aspect-ratio:16/10}
  .aside{position:static}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .top .btn-cta{display:none}
  .top .wrap{min-height:66px;gap:12px}
  .brand svg{width:38px;height:38px}
  .brand b{font-size:20px}
  .mob-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--brand);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .mob-bar .btn{min-height:48px;padding:8px 10px;font-size:15.5px}
  .mob-bar .btn.ghost{color:var(--on-brand);border-color:var(--on-brand-line-strong)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:8px}
  .gallery figure.big{grid-column:span 2;grid-row:span 2}
  .opts{grid-template-columns:1fr}
  .ticks{columns:1}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project+.project{margin-top:56px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .hero-split .copy{padding:36px 18px 44px}
  #site-nav{padding:4px 18px 16px}
  .svc-grid,.steps{grid-template-columns:1fr}
  .svc-grid{gap:40px}
  .row{grid-template-columns:1fr}
  .form-card,.quick{padding:24px 20px}
  .reviews-slot{grid-template-columns:1fr;padding:24px}
  .work-grid{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .lead,.hero .sub{font-size:17.5px}
  .areas li{font-size:22px}
  .demo-bar{font-size:13px}
  .faq summary{font-size:17px}
}
@media (max-width:380px){.brand small{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v8.4 motion rules: entrances ease out, exits ease in, taps spring with a slight overshoot; scroll-driven parts stay linear */
.btn{transition-property:background-color,border-color,color,box-shadow,transform;transition-duration:var(--t-ui);transition-timing-function:var(--ease-out),var(--ease-out),var(--ease-out),var(--ease-out),var(--ease-spring)}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}}
/* v8.4.1: review where people take action (@mattxwebb, P150). On the fictional examples these are labelled slots; live sites show a real review word for word. */
.rv-pin{display:flex;gap:10px;align-items:flex-start;max-width:460px;margin:18px 0 0;padding:12px 14px;border:1.5px dashed color-mix(in srgb,currentColor 45%,transparent);border-radius:12px;color:inherit;text-decoration:none;font-size:14px;line-height:1.45;transition:border-color var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
a.rv-pin:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 7%,transparent)}
.rv-pin .rv-st{flex:none;letter-spacing:1px;opacity:.5;font-size:13px;line-height:1.6}
.rv-pin .rv-tx small{display:block;margin-top:4px;font-size:12px;opacity:.75}
.aside .rv-pin{margin-top:14px;font-size:13.5px}
.rv-pin.light{color:var(--muted);margin-top:14px}
@media (max-width:760px){.rv-pin{font-size:13.5px;padding:10px 12px}}
/* v8.5: social buttons in the header (assets/social.css) */
.top .fbsoc{--soc-ink:var(--ink);--soc-line:rgba(23,32,27,.22);--soc-hbg:var(--brand);--soc-on:var(--on-brand)}
@media (max-width:420px){.top .fbsoc{gap:3px}.top .fbsoc-i{width:30px;height:30px}}
/* v8.5 phones: room for the social buttons in the header */
@media (max-width:760px){.top .wrap{gap:8px}.top .fbsoc-i{width:32px;height:32px}}
@media (max-width:440px){.brand small{display:none}.brand svg{width:32px;height:32px}.brand{gap:8px}.brand b{font-size:17px}.menu-btn{padding:0 11px;font-size:0;gap:0}.menu-btn i{margin:0}.top .fbsoc{gap:3px}.top .fbsoc-i{width:30px;height:30px}.top .fbsoc-i svg{width:15px;height:15px}}
@media (max-width:1400px){.top .wrap{gap:18px}#site-nav{gap:16px}.top .btn-cta{white-space:nowrap}.top .fbsoc-i{width:34px;height:34px}}


/* ---------- Google reviews block (from greviews v1.0, aligned to the page grid in v3.0) ---------- */

.grv{background:var(--grv-bg,#F6F3EC);color:var(--grv-ink,#17201B);padding:clamp(64px,9vw,120px) 0}
.grv .grv-in{max-width:1240px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.grv .grv-in.solo{grid-template-columns:minmax(0,1fr)}
.grv-k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grv-acc,#2D5B39)}
.grv-k::before{content:"";width:22px;height:2px;background:currentColor}
.grv h2{margin:12px 0 0;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;color:var(--grv-ink,#17201B)}
.grv h2 em{color:var(--grv-acc,#2D5B39)}
.grv-score{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:26px 0 22px;padding:18px 22px;border-radius:14px;background:var(--grv-card,#fff);border:1px solid var(--grv-line,rgba(0,0,0,.1));box-shadow:0 14px 40px rgba(0,0,0,.08)}
.grv-n{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grv-st{color:var(--grv-star,#E2A53A);letter-spacing:3px;font-size:1.5rem;line-height:1}
.grv-c{flex:1 1 220px;color:var(--grv-soft,#56665A);font-size:15px;line-height:1.4}
.grv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grv-cards li{display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:14px;background:var(--grv-card,#fff);border:1px dashed var(--grv-line,rgba(0,0,0,.18));min-height:170px}
.grv-cards li .grv-st{font-size:1.05rem;letter-spacing:2px}
.grv-cards li i{display:block;height:9px;border-radius:5px;background:var(--grv-line,rgba(0,0,0,.1))}
.grv-cards li i.s{width:62%}
.grv-cards li b{margin-top:auto;font-size:13px;font-weight:700;color:var(--grv-soft,#56665A)}
.grv-fine{margin:16px 0 0;font-size:14px;color:var(--grv-soft,#56665A);max-width:70ch}
.grv-note{padding:clamp(22px,3vw,32px);border-radius:16px;background:var(--grv-note,var(--grv-card,#fff));border:1.5px solid var(--grv-acc,#2D5B39);box-shadow:0 18px 48px rgba(0,0,0,.12)}
.grv-note h3{margin:12px 0 14px;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.15;color:var(--grv-ink,#17201B)}
.grv-note ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.grv-note li{position:relative;padding-left:28px;font-size:15px;line-height:1.45}
.grv-note li::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:8px;border-left:2.5px solid var(--grv-acc,#2D5B39);border-bottom:2.5px solid var(--grv-acc,#2D5B39);transform:rotate(-45deg)}
.grv-note .grv-fine{font-size:13px}
@media (max-width:900px){.grv .grv-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.grv-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}.grv-cards li{flex:0 0 78%;scroll-snap-align:start;min-height:150px}}

/* ======================================================================================================
   v3.0 kit additions (2 Nov 2026)
   ====================================================================================================== */
[id]{scroll-margin-top:96px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* brand: logo file, inline mark or a letter */
.brand img{height:44px;width:auto;flex:none}
.brand>span{min-width:0}
.brand .mono{width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-family:var(--display);font-weight:var(--dw);font-size:20px;flex:none}
@media (max-width:440px){.brand img{height:36px}.brand .mono{width:34px;height:34px;font-size:17px}}
/* preview ribbon / real-client bar */
.pv-bar{background:var(--demo-bg);color:var(--demo-fg);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:6px 0;line-height:1.4}
.pv-bar .wrap{display:flex;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.pv-bar b{color:#fff;font-weight:700}
.pv-bar a{color:#fff;text-decoration:none;font-weight:700}
/* Google reviews block: same grid and colours as the rest of the page */
.grv{--grv-bg:var(--tint);--grv-ink:var(--ink);--grv-soft:var(--muted);--grv-card:#fff;--grv-line:color-mix(in srgb,var(--ink) 16%,transparent);--grv-acc:var(--brand);--grv-star:var(--accent)}
.grv .grv-in{max-width:1200px;padding:0 24px}
.grv h2{font-size:clamp(34px,4.4vw,58px)}
.grv-cards.real li{border-style:solid;min-height:0}
.grv-cards blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--grv-ink)}
.grv-cards .who{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--grv-soft)}
.grv-score .grv-c a{font-weight:700;color:var(--grv-ink)}
.grv .actions{margin-top:26px}
.grv-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin:26px 0 0;padding:22px 26px;border-radius:14px;background:var(--grv-card);border:1px solid var(--grv-line);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.grv-link p{margin:0;color:var(--grv-soft);max-width:52ch}
@media (max-width:620px){.grv .grv-in{padding:0 18px}}
/* a real review where people take action (P150): word for word, under the main button, the form button and on service pages */
.rvp{margin:18px 0 0;max-width:470px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--card);color:var(--ink);font-size:14.5px;line-height:1.45}
.rvp .stars{color:var(--accent-ink);letter-spacing:1px;font-size:14px}
.rvp blockquote{margin:4px 0 6px;font-weight:600}
.rvp figcaption{font-size:13px;color:var(--muted)}
.rvp a{color:var(--ink)}
.hero .rvp{background:color-mix(in srgb,var(--card) 95%,transparent)}
.aside .rvp{background:color-mix(in srgb,var(--card) 96%,transparent)}
.page-head .rvp{background:color-mix(in srgb,var(--card) 96%,transparent);margin-top:22px}
@media (max-width:620px){.hero .rvp{font-size:13.5px}}
/* labelled "Photo to come" boxes (previews only; a live build refuses them) */
.ph-box{display:grid;place-items:center;text-align:center;width:100%;aspect-ratio:4/3;padding:16px;border-radius:var(--r);border:2px dashed var(--line-strong);background:repeating-linear-gradient(135deg,var(--tint) 0 14px,var(--card) 14px 28px);color:var(--ink)}
.ph-box span{background:var(--card);border-radius:6px;padding:7px 12px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.svc .ph .ph-box{height:100%;border:0;border-radius:0}
.hero-photo>.ph-hero{position:absolute;inset:0;display:grid;place-items:end start;padding:18px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#000))}
.hero-photo>.ph-hero span{position:relative;z-index:3;color:var(--on-brand);border:1px dashed var(--on-brand-line-strong);border-radius:6px;padding:6px 10px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.hero-photo>.ph-hero{position:relative;aspect-ratio:16/10}}
/* service card with no photo yet: a plain pattern panel in the brand colour, never a fake photo */
.tilepanel{width:100%;height:100%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.25' stroke-width='6'%3E%3Cpath d='M110 150l60-60 60 60-60 60z'/%3E%3Cpath d='M140 150l60-60 60 60-60 60z'/%3E%3Cpath d='M170 150l60-60 60 60-60 60z'/%3E%3C/g%3E%3C/svg%3E") center/62% no-repeat}
.svc-grid .also{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px}
.svc-grid .also h3{font-size:20px;margin-bottom:6px}
.svc-grid .also p{margin:0;color:var(--muted)}
/* "How we work" with the client's own photos (one shape for the row, picked from the photos) */
.steps.photo li{border-top:0;padding-top:0}
.steps.photo li img{width:100%;aspect-ratio:var(--sr,4/3);object-fit:cover;border-radius:var(--r);margin-bottom:16px}
.steps.photo li::before{font-size:34px;margin-bottom:8px}
/* WhatsApp "send photos" on the detailed form (Web3Forms' free plan takes no uploads) */
.wa-photos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--tint);border:1px solid var(--line);border-radius:var(--ri);padding:12px 14px;margin:0 0 18px;font-size:15px}
.wa-photos .btn{min-height:42px;padding:8px 16px;font-size:15px}
.contact-side h3{font-size:20px;margin:28px 0 6px}
.contact-side p{color:var(--muted);margin:0}
.form-card .rvp,.form-card .rv-pin{margin-top:16px}

/* ---------- v3.0 photos: every photo keeps its own shape and is never shown bigger than its real size ----------
   .pic       one photo at its own shape (service pages, about, projects). The builder sets max-width/max-height in px.
   .jg        justified rows (projects "More of our work"): each row is one height, every photo its own width, no cropping.
   .rc-*      "See our recent work": the big photo sits whole on a dark stage, thumbnails and earlier jobs keep their shape. */
.pic{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--r);background:var(--tint)}
.prose>.pic{margin-bottom:32px}
.project>.ba{justify-self:start;width:100%}
.project>.pic{justify-self:start}
.prose>img.pic,.project>img.pic,.about img.pic{width:100%;height:auto}
.about .pic{justify-self:center}
.jg{--row:250px;display:flex;flex-wrap:wrap;gap:12px}
.jg::after{content:"";flex-grow:100000;min-width:0}
.jg figure{margin:0;flex:var(--g) 1 calc(var(--row) * var(--r));min-width:0}
.jg button{display:block;width:100%;padding:0;border:0;background:var(--tint);border-radius:var(--ri);overflow:hidden;cursor:zoom-in}
.jg img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-out)}
.jg button:hover img{transform:scale(1.03)}
.jg figcaption{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.4}
@media (max-width:900px){.jg{--row:190px;gap:10px}}
@media (max-width:620px){.jg{--row:140px;gap:8px}.jg figcaption{font-size:13px;margin-top:6px}}

/* "See our recent work" (Complete). Dark band; newest job as the feature; earlier jobs in a swipe rail; full-screen viewer */
.recent{background:var(--ink);color:#fff;overflow:hidden}
.recent h2,.recent h3{color:#fff}
.recent .lead{color:rgba(255,255,255,.74)}
.rc-head{margin-bottom:40px}
.rc-head .lead{margin:10px 0 0}
.rc-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.rc-dot{width:10px;height:10px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:rcpulse 2s infinite}
@keyframes rcpulse{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.rc-feature{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.rc-media{min-width:0}
.rc-main{position:relative;display:grid;place-items:center;width:100%;height:auto;min-height:220px;max-height:min(560px,72vh);padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:rgba(255,255,255,.05)}
.rc-main img{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain}
.rc-zoom{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.62);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.rc-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rc-thumbs::-webkit-scrollbar{display:none}
.rc-th{flex:none;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#000;opacity:.6;transition:opacity .2s,border-color .2s}
.rc-th img{display:block;height:64px;width:auto}
.rc-th:hover,.rc-th[aria-current=true]{opacity:1;border-color:#fff}
.rc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.rc-pill{background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.rc-tags time,.rc-meta time{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.rc-tags time{border:1px solid rgba(255,255,255,.35);padding:5px 11px;border-radius:999px}
.rc-copy h3{font-size:clamp(26px,2.6vw,36px)}
.rc-place{margin:8px 0 0;color:rgba(255,255,255,.72);font-weight:600}
.rc-text{margin-top:14px;color:rgba(255,255,255,.88)}
.rc-count{margin:0 0 20px;font-size:14px;color:rgba(255,255,255,.62)}
.recent .btn{background:#fff;color:var(--ink);border-color:#fff}
.recent .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rc-railwrap{margin-top:52px}
.rc-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.rc-rail::-webkit-scrollbar{display:none}
.rc-card{flex:none;width:min-content;scroll-snap-align:start}
.rc-cover{position:relative;display:block;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:#000}
.rc-cover img{display:block;height:260px;width:auto;max-width:none;transition:transform .7s var(--ease-out)}
.rc-cover:hover img{transform:scale(1.04)}
.rc-n{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px}
.rc-meta{padding-top:12px;min-width:170px}
.rc-meta h3{font-size:19px;margin:4px 0 0}
.rc-meta .rc-place{font-size:15px;margin-top:4px}
.rc-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.rc-nav[hidden]{display:none}
.rc-nav button,.rc-box button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:20px;cursor:pointer}
.rc-nav button:hover{background:#fff;color:var(--ink)}
.rc-all{margin:30px 0 0}
.rc-all a{color:#fff;font-weight:700}
.rc-box{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;color:#fff}
.rc-box::backdrop{background:rgba(0,0,0,.92)}
.rc-boxin{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 14px 76px}
.rc-boxin img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px}
.rc-cap{position:absolute;left:0;right:0;bottom:22px;margin:0 auto;text-align:center;color:#fff;font-size:15px;padding:0 74px}
.rc-x{position:absolute;top:10px;right:12px;font-size:28px!important}
.rc-bp,.rc-bn{position:absolute;bottom:12px;background:rgba(0,0,0,.5)!important}
.rc-bp{left:12px}.rc-bn{right:12px}
.rc-box[data-one] .rc-bp,.rc-box[data-one] .rc-bn{display:none}
@media (max-width:900px){.rc-feature{grid-template-columns:1fr}.rc-main{max-height:min(64vh,500px)}}
@media (max-width:620px){.rc-cover img{height:200px}.rc-th img{height:56px}.rc-railwrap{margin-top:40px}.rc-rail{gap:14px}}
@media (prefers-reduced-motion:reduce){.rc-dot{animation:none}.rc-cover img,.jg img{transition:none}}

/* phones: card lists become swipe rows, so the home page stays about 10,000 px or less at 390 px (standard rule, 27 Oct) */
@media (max-width:620px){
  .svc-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-18px;padding:2px 18px 12px;scroll-padding-inline:18px;scrollbar-width:none}
  .svc-grid::-webkit-scrollbar{display:none}
  .svc-grid>*{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .svc-grid>.also{border:1px solid var(--line);border-radius:var(--r);padding:18px;align-self:start}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .steps.photo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps h3{font-size:18px}
  .steps p{font-size:15px}
}
/* v3.0: a long brand line never pushes into the links */
.brand>span{overflow:hidden}
.brand small{overflow:hidden;text-overflow:ellipsis}
.brand b{overflow:hidden;text-overflow:ellipsis}
/* v3.0 phones: keep the home page about 10,000 px or less (standard rule) without hiding anything */
@media (max-width:620px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .areas li{font-size:18px;padding:12px 0;white-space:normal}
  .areas li small{font-size:11px}
  .foot{padding:56px 0 28px}
  .foot .wrap{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot .wrap>div:first-child{grid-column:1/-1}
  .contact-list{grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:22px}
  .contact-list>div{grid-template-columns:20px minmax(0,1fr);gap:2px 8px}
  .contact-list .ic{width:18px;height:18px}
  .contact-list dd{font-size:15.5px;overflow-wrap:anywhere}
  #quote textarea,.form-card textarea{min-height:96px}
  .faq summary{padding:16px 40px 16px 0}
}
@media (max-width:440px){.brand b{white-space:normal;font-size:16px;line-height:1.12;overflow:visible;text-overflow:clip}.brand>span{overflow:visible}}

/* v3.1: full quote form in the hero (order.hero_quote = "full"); the bottom section becomes the contact details */
.hero-q .wrap{align-items:center;padding-top:40px;padding-bottom:48px}
.hero-q .form-card{box-shadow:0 30px 60px -24px rgba(0,0,0,.55);color:var(--ink)}
.hero-q .form-card h2{font-size:28px}
.details-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.details-band .btn{margin-top:18px}
@media (max-width:900px){.details-band{grid-template-columns:minmax(0,1fr);gap:22px}}