@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-300.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-300.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
:root{
--ink:#111110;--ink2:#171615;--card:#1e1d1a;--deep:#0d0d0c;
--bronze:#CA8858;--bronze-hi:#DDA377;--bronze-lo:#9A6540;--bronze-deep:#7E5030;
--cream:#F4EFE7;--cream2:#EAE3D7;--dk:#15130f;--dk2:#4b453d;--dk3:#615a4f;
--muted:#9a938a;--dim:#6f6a63;
--line:rgba(255,255,255,.09);--lineb:rgba(202,136,88,.34);--dkline:rgba(21,19,15,.13);
--font:'Montserrat',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
--pad:5rem;--maxw:1240px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--bronze);color:#111}
h1,h2,h3,h4,h5{font-family:var(--font);font-weight:600;text-transform:uppercase;line-height:1.1;letter-spacing:.01em}
p{color:#c3bcb2}
p+p{margin-top:1rem}
h1,h2,h3,.sec-sub,.hero-sub{overflow-wrap:normal;hyphens:none;text-wrap:balance}
li,p{text-wrap:pretty}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section-pad{padding:var(--pad) 0}
@media(max-width:720px){:root{--pad:3.4rem}}
.cream-bg{background:var(--cream);color:var(--dk)}
.cream-bg h2,.cream-bg h3,.cream-bg h5{color:var(--dk)}
.cream-bg p{color:var(--dk2)}
.dark-bg{background:var(--ink2)}
.eyebrow{display:block;font-family:var(--font);font-weight:300;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--bronze)}
.cream-bg .eyebrow{color:var(--bronze-deep)}
.sec-title{font-size:clamp(1.9rem,4.2vw,3.2rem);letter-spacing:-.005em;margin:.9rem 0 1.1rem}
.sec-head{max-width:760px;margin-bottom:3.4rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-sub{font-size:1.02rem;line-height:1.65;max-width:62ch}
.sec-head.center .sec-sub{margin-left:auto;margin-right:auto}

/* buttons */
.btn-primary,.btn-secondary,.svc-cta,.cta-square{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:1.05rem 1.85rem;min-height:50px;border:1.4px solid transparent;cursor:pointer;transition:background .24s,color .24s,border-color .24s}
.btn-primary{background:var(--bronze);color:#111;border-color:var(--bronze)}
.btn-primary:hover{background:var(--bronze-hi);border-color:var(--bronze-hi)}
.btn-secondary{border-color:rgba(244,239,231,.5);color:var(--cream)}
.btn-secondary:hover{background:rgba(244,239,231,.1);border-color:var(--cream)}
.btn-secondary svg{width:16px;height:16px;flex:0 0 16px}
.svc-cta{border-color:var(--bronze);color:var(--bronze);margin-top:1.9rem}
.svc-cta:hover{background:rgba(202,136,88,.14)}
.cream-bg .svc-cta{border-color:var(--bronze-deep);color:var(--bronze-deep)}
.cream-bg .svc-cta:hover{background:rgba(126,80,48,.09)}
.cta-square{background:var(--bronze);color:#111;border-color:var(--bronze);padding:.85rem 1.35rem;min-height:44px;font-size:.66rem}
.cta-square:hover{background:var(--bronze-hi);border-color:var(--bronze-hi)}

/* header */
.header{position:fixed;top:0;left:0;right:0;z-index:200;padding:1rem 0;transition:padding .3s,background .3s,border-color .3s;border-bottom:1px solid transparent}
.header.scrolled{background:rgba(17,17,16,.96);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:.5rem 0}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
/* the anchor is the flex item, so it is the one that must not shrink,
   otherwise the square logo gets squashed at narrow widths */
.logo-link{flex:0 0 auto;display:block}
.logo{height:70px;width:auto;display:block;transition:height .3s}
.header.scrolled .logo{height:52px}
.header-nav{display:flex;gap:1.6rem}
.header-nav a{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;color:#d8d2c8;position:relative;padding:.7rem 0;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.header-nav a::after{content:"";position:absolute;left:0;bottom:.25rem;width:0;height:1px;background:var(--bronze);transition:width .3s}
.header-nav a:hover{color:var(--bronze)}
.header-nav a:hover::after{width:100%}
.header-right{display:flex;align-items:center;gap:.9rem}
.header-phone{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font);font-weight:500;font-size:.9rem;letter-spacing:.05em;color:var(--cream);white-space:nowrap;min-height:44px}
.header-phone svg{width:16px;height:16px;flex:0 0 16px;color:var(--bronze)}
.header-phone:hover{color:var(--bronze)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:19px;height:1px;background:var(--cream)}
.mobile-nav{position:fixed;inset:0;z-index:210;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:5.5rem 2rem 2rem;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto}
body.nav-open .mobile-nav{transform:none}
.mobile-nav a{font-family:var(--font);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:1.18rem;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--cream);min-height:52px;display:flex;align-items:center}
.mobile-nav .mn-phone{color:var(--bronze);border-bottom:0;margin-top:1rem}
.mobile-nav .mn-cta{justify-content:center;background:var(--bronze);color:#111;border-bottom:0;margin-top:.4rem;font-size:.78rem;letter-spacing:.16em}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:9rem 0 5rem}
.hero-bg{position:absolute;inset:0;background:#0d0d0c center/cover no-repeat;background-image:url('images/hero-builders-kent.jpg')}
@media(max-width:720px){.hero-bg{background-image:url('images/hero-mobile-kent.jpg');background-position:center 40%}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,12,.82) 0,rgba(13,13,12,0) 200px),linear-gradient(100deg,rgba(13,13,12,.9) 0%,rgba(13,13,12,.68) 46%,rgba(13,13,12,.26) 100%)}
.hero-content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
.hero-eyebrow{display:block;font-family:var(--font);font-weight:300;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.6rem;white-space:nowrap}
.hero-title{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.015em;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-title span{display:block}
.hero-title .accent{color:var(--bronze)}
.hero-sub{margin:1.6rem 0 2.2rem;max-width:52ch;color:#e0dad0;font-size:clamp(1rem,1.25vw,1.1rem);text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero-cta-row{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-trust{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.trust-item{display:inline-flex;align-items:center;gap:.6rem;font-size:.87rem;color:rgba(244,239,231,.9);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.trust-item svg{width:16px;height:16px;flex:0 0 16px;color:var(--bronze)}

/* stats */
.stats{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:1.6rem 1rem;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{font-family:var(--font);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1;color:var(--bronze);font-variant-numeric:tabular-nums}
.stat-num sup{font-size:.42em;font-weight:400;top:-.7em;position:relative;margin-left:2px}
.stat-label{font-size:.8rem;color:#c9c2b8;margin-top:.55rem}

/* process */
.process{background:var(--ink);padding:var(--pad) 0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.process-step{background:var(--ink2);padding:2.2rem 1.8rem;position:relative}
.process-step svg{width:30px;height:30px;color:var(--bronze);margin-bottom:1.4rem}
.process-num{position:absolute;top:1.6rem;right:1.8rem;font-family:var(--font);font-weight:300;font-size:2.2rem;color:rgba(202,136,88,.22);line-height:1}
.process-step h3{font-size:1rem;letter-spacing:.06em;margin-bottom:.6rem}
.process-step p{font-size:.9rem}

/* service split */
.svc-split{display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.svc-split.flip .svc-copy{order:2}
.svc-split>*{min-width:0}
.svc-copy p{font-size:1rem;max-width:56ch}
.svc-points{list-style:none;margin-top:1.9rem;display:grid;gap:.85rem}
.svc-points li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:var(--dk2)}
.dark-bg .svc-points li{color:#c3bcb2}
.svc-points svg{width:16px;height:16px;flex:0 0 16px;margin-top:5px;color:var(--bronze-deep)}
.dark-bg .svc-points svg{color:var(--bronze)}

/* the lead photo keeps its own shape, portrait or landscape, never cropped */
.svc-lead figure{margin:0;overflow:hidden;background:var(--ink2)}
.svc-lead img{width:100%;height:auto;display:block;transition:transform .7s ease}
.svc-lead figure:hover img{transform:scale(1.03)}

/* justified photo rows. flex-grow is set inline to each photo aspect ratio, so
   a row of mixed portrait and landscape lands flush with matched heights and
   leaves no gap at the end. Nothing is cropped. */
.jwrap{margin-top:1.7rem;display:grid;gap:14px}
.jrow{display:flex;gap:14px}
.jrow figure{margin:0;min-width:0;overflow:hidden;background:var(--ink2)}
.jrow img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.jrow figure:hover img{transform:scale(1.03)}
/* Heading beside the body copy, then the bullet points across the full width
   below, then the button. The two top columns are now close in height, and the
   bullets fill the row that used to be empty. */
.svc-wide{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start}
.sw-head .sec-title{margin:.9rem 0 0}
.sw-body p:first-child{margin-top:0}
.sw-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;
         margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--dkline)}
.dark-bg .sw-foot{border-top-color:var(--line)}
.sw-foot .svc-cta{margin-top:0;flex:0 0 auto}
.svc-points.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 2.4rem;margin-top:0;flex:1}
.svc-points.cols li{max-width:34ch}
@media(max-width:1000px){
.svc-points.cols{grid-template-columns:1fr 1fr}
.sw-foot{flex-direction:column;align-items:stretch;gap:1.8rem}
.sw-foot .svc-cta{align-self:flex-start}
}
@media(max-width:620px){.svc-points.cols{grid-template-columns:1fr}}
.svc-wide>*{min-width:0}
.svc-wide .sec-title{margin-top:.9rem}
.svc-wide p{max-width:58ch}
.svc-wide .svc-cta{margin-top:1.9rem}
@media(max-width:1120px){.svc-wide{grid-template-columns:1fr;gap:1.4rem}
.sw-head{gap:1.1rem}
.sw-head .svc-cta{order:2}
.svc-wide>div:last-child{order:1}}
@media(max-width:760px){
/* a row of four is far too small on a phone. display:contents lifts the photos
   out of their rows so they flow down two columns at their natural aspect, no
   forced widths and nothing cropped. */
.jwrap{display:block;columns:2;column-gap:10px;margin-top:1.8rem}
.jrow{display:contents}
.jrow figure{margin:0 0 10px;break-inside:avoid}
.jrow img{height:auto}
}
@media(max-width:380px){
.jwrap{columns:1}
}

/* technical drawings */
.dwg{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
.dwg>*{min-width:0}
.dwg-tabs{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin-bottom:1.4rem}
.cream-bg .dwg-tabs{border-color:var(--dkline)}
.dwg-tab{flex:1 1 auto;border:0;border-right:1px solid var(--line);padding:15px 12px;cursor:pointer;font-family:var(--font);font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#c3bcb2;min-height:50px;transition:background .2s,color .2s}
.cream-bg .dwg-tab{border-right-color:var(--dkline);color:var(--dk2)}
.dwg-tab:last-child{border-right:0}
.dwg-tab[aria-selected="true"]{background:var(--bronze);color:#111}
.dwg-tab:hover:not([aria-selected="true"]){background:rgba(202,136,88,.1)}
.dwg-tab:focus-visible{outline:2px solid var(--bronze);outline-offset:-3px}
.dwg-stage{border:1px solid var(--line);background:#0c0c0b;position:relative;padding:1.1rem}
.cream-bg .dwg-stage{background:#faf7f1;border-color:var(--dkline)}
.dwg-stage::before{content:"";position:absolute;inset:8px;border:1px solid rgba(244,239,231,.12);pointer-events:none}
.cream-bg .dwg-stage::before{border-color:rgba(21,19,15,.12)}
.dwg-stage svg{display:block;width:100%;height:auto}
.dwg-body{fill:none;stroke:#efe9df;stroke-width:1.6;stroke-linecap:square}
.cream-bg .dwg-body{stroke:#15130f}
.dwg-body.thin,.dwg-ground{stroke:var(--bronze);stroke-width:.9;fill:none}
.cream-bg .dwg-ground,.cream-bg .dwg-body.thin{stroke:#8a6b44}
.dwg-shape{opacity:0;transition:opacity .34s ease;pointer-events:none}
.dwg-shape.on{opacity:1}
.dwg-shape .rf{fill:none;stroke:#efe9df;stroke-width:1.6;stroke-linejoin:round}
.cream-bg .dwg-shape .rf{stroke:#15130f}
.dwg-shape .rf.thin{stroke:var(--bronze);stroke-width:1.1}
.cream-bg .dwg-shape .rf.thin{stroke:#8a6b44}
.dwg-shape .rf.ghost{stroke:var(--bronze);stroke-width:1;opacity:.55}
.dwg-cap{font-family:var(--font);font-weight:300;font-size:11px;fill:var(--bronze);letter-spacing:.18em;text-transform:uppercase}
.dwg-panel{display:none}
.dwg-panel.on{display:block;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dwg-panel h3{font-size:1.3rem;margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.03em}
.dwg-panel>p{font-size:.95rem;margin-bottom:1.6rem}
.dwg-facts{border-top:1px solid var(--line)}
.cream-bg .dwg-facts,.cream-bg .dwg-fact{border-color:var(--dkline)}
.dwg-fact{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.cream-bg .dwg-fact{border-bottom-color:var(--dkline)}
.dwg-fact dt{font-family:var(--font);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);padding-top:3px}
.cream-bg .dwg-fact dt{color:var(--bronze-deep)}
.dwg-fact dd{margin:0;font-size:.88rem;color:#c3bcb2;line-height:1.55}
.cream-bg .dwg-fact dd{color:var(--dk2)}
@media(max-width:1080px){.dwg{grid-template-columns:1fr;gap:2rem}}
@media(max-width:560px){
.dwg-tab{flex:1 1 50%;border-bottom:1px solid var(--line)}
.cream-bg .dwg-tab{border-bottom-color:var(--dkline)}
.dwg-tab:nth-child(2n){border-right:0}
.dwg-tab:nth-last-child(-n+2){border-bottom:0}
.dwg-fact{grid-template-columns:1fr;gap:4px}
.dwg-stage{padding:.7rem}
}

/* CTA bands */
.cta-band{position:relative;overflow:hidden;padding:6.5rem 0;text-align:center;isolation:isolate}
.cta-band .eyebrow{color:var(--bronze-hi);text-shadow:0 1px 10px rgba(0,0,0,.7)}
/* an img rather than a background so it can be lazy loaded and get a srcset */
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* the scrim was burying the photo, lighter now with the copy carrying its own
   legibility through the text shadows below */
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,9,.58),rgba(10,10,9,.72))}
.cta-content{position:relative;max-width:720px;margin:0 auto;padding:0 28px}
.cta-content h2{font-size:clamp(1.8rem,3.8vw,2.9rem);margin:1rem 0 1.1rem;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.cta-content p{margin-bottom:2rem;color:#f0ebe3;text-shadow:0 1px 14px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.55)}
@media(max-width:720px){.cta-band{padding:4.25rem 0}}

/* more services */
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.more-card{background:var(--ink2);padding:2rem 1.8rem}
.more-card svg{width:26px;height:26px;color:var(--bronze);margin-bottom:1.1rem}
.more-card h3{font-size:.98rem;letter-spacing:.06em;margin-bottom:.55rem}
.more-card p{font-size:.89rem}

/* reviews */
.reviews-section{background:var(--deep);padding:var(--pad) 0;overflow:hidden}
.reviews-head{text-align:center;max-width:720px;margin:0 auto 3rem;padding:0 28px}
.reviews-head h2{font-size:clamp(1.8rem,3.8vw,2.9rem);margin:.9rem 0 1.2rem}
.reviews-rating{display:inline-flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--muted)}
.reviews-stars{display:inline-flex;gap:2px;color:var(--bronze)}
.reviews-stars svg{width:15px;height:15px}
.reviews-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews-marquee+.reviews-marquee{margin-top:14px}
.reviews-track{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
/* white cards so the reviews read as quoted testimonials rather than more of
   the dark page, and the Google mark where the review came from Google */
.review-card{flex:0 0 340px;width:340px;margin-right:14px;background:#fff;border:1px solid rgba(21,19,15,.1);padding:1.7rem 1.6rem;display:flex;flex-direction:column;box-shadow:0 10px 26px -18px rgba(0,0,0,.5)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:1.05rem}
.review-stars{display:inline-flex;gap:2px;color:#e8a33d}
.review-stars svg{width:14px;height:14px}
.review-source{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#6f6a63;font-weight:500}
.review-source .g-mark{width:15px;height:15px;flex:0 0 15px}
.review-body{font-size:.92rem;color:#3d3831;flex:1;line-height:1.62}
.review-author{margin-top:1.2rem;padding-top:.85rem;border-top:1px solid rgba(21,19,15,.1);font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-deep)}
.review-author span{color:#7d766c;font-weight:400}

/* about */
.about{background:var(--cream);color:var(--dk);padding:var(--pad) 0}
.about-grid{display:grid;grid-template-columns:5fr 6fr;gap:3.5rem;align-items:center}
.about-grid>*{min-width:0}
.about h2{font-size:clamp(1.8rem,3.8vw,2.9rem);margin:.9rem 0 1.2rem;color:var(--dk)}
.about h2 .accent{color:var(--bronze-deep)}
.about p{color:var(--dk2)}
.about-carousel{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;background:var(--ink2);box-shadow:0 24px 60px rgba(21,19,15,.26)}
.ac-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease-in-out}
.ac-slide.active{opacity:1}
.ac-dots{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem;z-index:3}
.ac-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s,width .3s}
.ac-dots span.on{background:#fff;width:20px;border-radius:4px}
.about-points{list-style:none;margin-top:1.8rem;display:grid;gap:.85rem}
.about-points li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:var(--dk2)}
.about-points svg{width:16px;height:16px;flex:0 0 16px;margin-top:5px;color:var(--bronze-deep)}

/* areas */
.area-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.area-shots figure{margin:0;min-width:0}
.area-shots img{width:100%;height:auto;display:block;transition:transform .7s ease}
.area-shots figure{overflow:hidden}
.area-shots figure:hover img{transform:scale(1.03)}
.area-shots figcaption{font-family:var(--font);font-weight:300;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-top:.7rem}
@media(max-width:480px){.area-shots{gap:10px}.area-shots figcaption{font-size:.6rem;letter-spacing:.12em}}
.areas{background:var(--ink2);padding:var(--pad) 0}
.areas-inner{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.areas-inner>*{min-width:0}
.areas-title{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.9rem 0 1.1rem}
.areas-title span{color:var(--bronze)}
.areas-list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem}
.area-tag{border:1px solid var(--line);padding:.55rem 1rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#c3bcb2;min-height:36px;display:inline-flex;align-items:center}
.area-tag.highlight{border-color:var(--lineb);color:var(--bronze)}
.areas-note{font-size:.85rem;color:var(--muted);margin-top:1.6rem;max-width:52ch}

/* coverage map. A white card so it reads as a map rather than more dark page. */
.mapwrap{margin:0;background:#fff;border:1px solid rgba(21,19,15,.1);padding:18px 16px 14px;
         box-shadow:0 14px 34px -20px rgba(0,0,0,.65)}
.mapwrap svg{display:block;width:100%;height:auto}
.mp-kent{fill:#ece5da;stroke:#15130f;stroke-width:1.7;stroke-linejoin:round}
.mp-lon{fill:#dda377;stroke:#15130f;stroke-width:1.7;stroke-linejoin:round}
.mp-border{fill:none;stroke:#15130f;stroke-width:1;stroke-dasharray:5 4;opacity:.6}
.mp-dot{fill:#8a5a2f;stroke:#fff;stroke-width:1.5}
.mp-town{font-family:var(--body);font-size:13px;fill:#2c2822}
.mp-region{font-family:var(--font);font-weight:600;font-size:12.5px;fill:#6b4526;
           letter-spacing:.16em;text-transform:uppercase}
.mp-key{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:.9rem}
.mp-key span{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:500;
             font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#57514a}
.mp-key i{width:13px;height:13px;border:1px solid #15130f;display:block}
.mp-key .k-lon{background:#dda377}
.mp-key .k-kent{background:#ece5da}
@media(max-width:1080px){.mapwrap{max-width:600px;margin:0 auto}}
@media(max-width:560px){.mp-town{font-size:15px}.mp-region{font-size:13.5px}.mp-key span{font-size:.58rem}}

/* faq */
.faq{background:var(--ink);padding:var(--pad) 0}
.faq-list{max-width:880px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;cursor:pointer;padding:1.4rem 2.8rem 1.4rem 0;position:relative;font-family:var(--body);font-size:1.02rem;font-weight:400;color:var(--cream);min-height:48px;line-height:1.45}
.faq-q::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:1px;background:var(--bronze)}
.faq-q::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:12px;margin-top:-5.5px;background:var(--bronze);transition:.3s}
.faq-item.open .faq-q::before{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .36s ease}
.faq-a p{padding:0 2.4rem 1.5rem 0;font-size:.95rem}

/* form */
.form-section{background:var(--deep);padding:var(--pad) 0}
.form-wrap{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--lineb);padding:3rem 3rem 3.25rem;position:relative}
.form-wrap::before,.form-wrap::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--bronze)}
.form-wrap::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.form-wrap::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.form-head{text-align:center;margin-bottom:2.3rem}
.form-head h2{font-size:clamp(1.8rem,3.8vw,2.7rem);margin:.9rem 0 1rem}
.form-head p{max-width:480px;margin:0 auto;font-size:.95rem}
.field-group{margin-bottom:1.3rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.field-label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:.6rem;font-weight:500}
.text-input,.select-input,.textarea-input{width:100%;padding:1rem 1.1rem;background:rgba(255,255,255,.025);border:1px solid var(--line);color:#fff;font-family:inherit;font-size:16px;font-weight:300;border-radius:0;-webkit-appearance:none;min-height:52px;transition:border-color .25s,background .25s}
.textarea-input{min-height:120px;resize:vertical}
.text-input:focus,.select-input:focus,.textarea-input:focus{outline:none;border-color:var(--bronze);background:rgba(202,136,88,.05)}
.text-input:focus-visible,.select-input:focus-visible,.textarea-input:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.text-input::placeholder,.textarea-input::placeholder{color:var(--dim)}
.form-foot{font-size:.82rem;color:var(--muted);text-align:center;margin-top:1.4rem;margin-bottom:.8rem}
/* these were inline links inside a sentence, too small to tap on a phone */
.form-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border:1px solid var(--line);color:#c3bcb2;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:.2s}
.alt-btn svg{width:16px;height:16px;flex:0 0 16px}
.alt-btn:hover{border-color:var(--bronze);color:var(--bronze);background:rgba(202,136,88,.08)}
.alt-btn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.alt-btn.wa:hover{border-color:#25D366;color:#25D366;background:rgba(37,211,102,.09)}
@media(max-width:420px){.form-alt{grid-template-columns:1fr}}
.form-foot a{color:var(--bronze)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-done{display:none;text-align:center;padding:1rem 0}
.form-done svg{width:44px;height:44px;color:var(--bronze);margin:0 auto 1.2rem}
.form-done h2{font-size:1.8rem;margin-bottom:.8rem}
form.sent{display:none}
form.sent+.form-done{display:block}

/* footer */
.footer{background:var(--ink);border-top:1px solid var(--line);padding:4.5rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem}
.footer-grid>*{min-width:0}
.footer-logo img{height:86px;width:auto;margin-bottom:1.2rem}
.footer p{font-size:.9rem;color:var(--muted);max-width:40ch}
.footer .foot-h{font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.2rem;font-weight:500}
.footer-contact-line{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--muted);min-height:44px}
.footer-contact-line svg{width:15px;height:15px;flex:0 0 15px;color:var(--bronze)}
.footer-contact-line a{display:flex;align-items:center;min-height:44px;flex:1}
.footer-contact-line a:hover{color:var(--bronze)}
.footer-legal{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.footer-legal p{font-size:.78rem;color:#8d867c;max-width:74ch;line-height:1.65}
/* these are navigation links in a row, so they need a real tap area */
.footer-links{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.footer-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.footer-links a:hover{color:var(--bronze)}
.form-privacy{font-size:.8rem;color:var(--muted);text-align:center;margin-top:1.2rem;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.6}
.form-privacy a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}
.footer-bottom{margin-top:1.6rem;padding-top:.6rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#8d867c}  /* was --dim at 3.52:1, below the 4.5 minimum */

/* whatsapp widget */
.wa-widget{position:fixed;right:20px;bottom:20px;z-index:190;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s;pointer-events:none}
.wa-widget.visible{opacity:1;transform:none;pointer-events:auto}
.wa-widget svg{width:34px;height:34px;color:#fff}
.wa-widget:hover{filter:brightness(1.06)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* keyboard users need to see where they are. :focus-visible so a mouse click
   does not leave a ring behind, but tabbing always shows one. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:1px}
.cream-bg a:focus-visible,.cream-bg button:focus-visible{outline-color:var(--bronze-deep)}
.btn-primary:focus-visible,.cta-square:focus-visible{outline-color:#111;outline-offset:2px}
.dwg-tab[aria-selected="true"]:focus-visible{outline-color:#111;outline-offset:-4px}
.review-card a:focus-visible{outline-color:var(--bronze-deep)}

.skip{position:absolute;left:-9999px;top:0;z-index:300}
.skip:focus{left:12px;top:12px}

/* responsive */
@media(max-width:1080px){
.header-nav{display:none}.burger{display:flex}
.process-grid{grid-template-columns:repeat(2,1fr)}
.more-grid{grid-template-columns:repeat(2,1fr)}
.svc-split{grid-template-columns:1fr;gap:2.4rem}
.svc-split.flip .svc-copy{order:0}
.areas-inner,.about-grid{grid-template-columns:1fr;gap:2.4rem}
.svc-trio{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
.stats-inner{grid-template-columns:1fr 1fr}
.stat:nth-child(2){border-right:0}
.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.container,.header-inner,.hero-content,.stats-inner,.reviews-head{padding-left:20px;padding-right:20px}
.hero{min-height:0;padding:7.5rem 0 3.5rem}
.hero-cta-row{flex-direction:column;width:100%}
.hero-cta-row a{width:100%}
.process-grid{grid-template-columns:1fr}
.more-grid{grid-template-columns:1fr}
.svc-trio,.svc-trio.two{grid-template-columns:1fr 1fr;gap:10px}
.svc-media{gap:10px}
.field-row{grid-template-columns:1fr;gap:0}
.form-wrap{padding:2rem 1.4rem 2.25rem}
.footer-grid{grid-template-columns:1fr}
.review-card{flex:0 0 276px;width:276px}
.wa-widget{width:56px;height:56px;right:14px;bottom:14px}
.header-phone span{display:none}
.header-phone{width:44px;justify-content:center;border:1px solid var(--lineb)}
}
@media(max-width:480px){
/* the wide tracking on labels eats the line at narrow widths */
.eyebrow{letter-spacing:.26em}
.hero-eyebrow{letter-spacing:.2em;font-size:.64rem}
.trio-cap{letter-spacing:.14em}
.sitefoot p,.reviews-rating{letter-spacing:.16em}
}
@media(max-width:420px){
.hero-title{font-size:2.05rem}
.sec-title{font-size:1.62rem}
.cta-content h2,.about h2,.areas-title,.reviews-head h2,.form-head h2{font-size:1.62rem}
.trust-item:nth-child(4){display:none}
.area-tag{padding:.5rem .8rem;font-size:.64rem}
}
@media(max-width:370px){
/* "Full House Refurbishments." was running off the edge at 320 */
.hero-title{font-size:1.88rem}
.sec-title{font-size:1.42rem}
.cta-content h2,.about h2,.areas-title,.reviews-head h2,.form-head h2{font-size:1.42rem}
.container,.header-inner,.hero-content,.stats-inner,.reviews-head{padding-left:16px;padding-right:16px}
.eyebrow{letter-spacing:.2em;font-size:.62rem}
.hero-eyebrow{letter-spacing:.14em;font-size:.58rem}
.review-card{flex:0 0 250px;width:250px}
.process-step,.more-card{padding:1.6rem 1.3rem}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001s!important;transition-duration:.001s!important}
.reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}