/* Lovebuilt Property, design v6 (v5 base plus a refinement layer at the end): charcoal, soft white, bronze and stone greige (from Nikoleta's chosen brand board).
   Normal-case text; capitals only in the logo. Earlier designs: design-v1-soft, v2-crisp, v3-warm, v4-olive. */
/* Montserrat (SIL Open Font Licence 1.1, see fonts/OFL.txt): variable font, Latin only, used for headings. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/montserrat-latin-variable.woff2) format("woff2")}
:root{
  --ink:#121212; --muted:#5C554E; --paper:#F4F0ED; --card:#FFFFFF; --beige:#E8E2DB; --beige-d:#D6CDC2; --line:#DAD2C9;
  --accent:#966A45; --accent-d:#6B4829; --accent-soft:#F0E6DC; --accent-lit:#C8A07C; --dark:#151413;
  --bronze:linear-gradient(135deg,#D6AB82 0%,#A97A52 52%,#76512F 100%);
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* was Georgia serif until 17 Oct 2026 */
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:6px; --r-sm:4px; --r-lg:8px;
  --shadow:0 1px 2px rgba(22,19,17,.08),0 4px 14px rgba(22,19,17,.08);
  --shadow-lg:0 2px 4px rgba(22,19,17,.1),0 12px 28px rgba(22,19,17,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.06rem;line-height:1.65;color:var(--ink);background:var(--paper);padding-bottom:76px}
img,svg{max-width:100%;height:auto}
a{color:var(--accent-d);font-weight:600;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-lit);outline-offset:3px;border-radius:3px}
.section[id]{scroll-margin-top:84px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}

/* type */
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.12;margin:0 0 .7rem;color:var(--ink)}
h1{font-size:clamp(2.2rem,6.4vw,3.9rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-family:var(--body);font-weight:700;font-size:1.12rem;line-height:1.3;margin:0 0 .35rem}
p{margin:0 0 1rem}
.lead{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:54ch}
.sub{color:var(--muted);max-width:60ch;margin-bottom:1.4rem;font-size:1.1rem}
.center{text-align:center}
.small{font-size:.92rem;color:var(--muted)}
.mt{margin-top:1.5rem}
.hide{display:none}
.textlink{font-weight:700}
.eyebrow{font-size:.95rem;color:var(--accent-d);font-weight:700;margin:0 0 .8rem}

/* draft helpers */
.ph{background:#FFE9A8;color:#4a3a00;padding:0 .3em;font-weight:600;font-size:.9em;border-radius:4px}
.draft-banner{background:#FFE9A8;color:#4a3a00;text-align:center;font-size:.88rem;font-weight:600;padding:.45rem 1rem}
.photo-ph{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--beige);border:2px dashed var(--beige-d);border-radius:var(--r);min-height:200px;color:var(--muted);padding:1rem;font-size:.95rem}
.photo-ph.wide{min-height:150px}

/* emergency strip above the header (as in version 1) */
.topbar{background:#0E0C0B;color:#fff;font-size:.92rem}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;min-height:38px;padding-top:.3rem;padding-bottom:.3rem}
.topbar a{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
.topbar .ic{width:1.15em;height:1.15em;flex:none}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.96);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 4px 18px rgba(22,19,17,.12)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:80px}
.logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.logo-art{display:block;height:68px;width:auto;flex:none}
.site-footer .logo-art{height:96px}
@media (max-width:719px){.logo-art{height:56px}}
.logo-text{display:flex;flex-direction:column;line-height:1;font-family:Optima,Candara,"Gill Sans","Segoe UI",system-ui,sans-serif;text-transform:uppercase}
.logo-text strong{font-size:1.18rem;font-weight:500;letter-spacing:.13em;white-space:nowrap}
.logo-text strong b{font-weight:800;background:var(--bronze);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#A9744A}
.logo-text em{font-style:normal;font-weight:500;font-size:.66rem;letter-spacing:.5em;color:var(--muted);margin-top:.42rem}
.nav-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.5rem;color:var(--ink);cursor:pointer}
.nav-toggle .ic{width:24px;height:24px}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:.4rem 22px 1.3rem;flex-direction:column;box-shadow:var(--shadow)}
.nav.open{display:flex}
.nav>a{padding:.9rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:1.05rem}
.nav>a[aria-current=page]{color:var(--accent)}
.nav-cta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.7rem 1.4rem;border:1.5px solid transparent;border-radius:var(--r);font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s,color .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(22,19,17,.22)}
.btn:active{transform:translateY(0)}
.btn .ic{width:1.25em;height:1.25em;flex:none;stroke-width:2}
.btn-primary{background:var(--bronze);color:#fff;border-color:#A06E45;text-shadow:0 1px 1px rgba(60,35,15,.35)}
.btn-primary:hover{color:#fff;background:var(--accent-d);border-color:var(--accent-d)}
.btn-wa{background:#25D366;color:#0B1F12;border-color:#25D366}
.btn-wa:hover{color:#0B1F12;background:#1FBF5B;border-color:#1FBF5B}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{color:#fff;background:var(--accent-d);border-color:var(--accent-d)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.14)}
/* on photos: lighter olive for the main button, white for the dark one */
.hero .btn-primary,.has-bg .btn-primary,.photo-dark .btn-primary,.cta-band .btn-primary{background:var(--bronze);border-color:#C8956B;color:#fff}
.hero .btn-primary:hover,.has-bg .btn-primary:hover,.photo-dark .btn-primary:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-dark,.has-bg .btn-dark{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-dark:hover,.has-bg .btn-dark:hover{background:var(--accent-lit);color:#fff;border-color:var(--accent-lit)}
.hero .btn-outline,.has-bg .btn-outline,.photo-dark .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.hero .btn-outline:hover,.has-bg .btn-outline:hover,.photo-dark .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{min-height:42px;padding:.4rem 1.05rem;font-size:.92rem}
.btn-lg{min-height:58px;font-size:1.05rem;padding:.8rem 1.8rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0}

/* home hero: photo behind, soft cream veil so the words stay easy to read */
.hero{position:relative;isolation:isolate;padding:3.2rem 0 3.6rem;background:var(--dark);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-6% 0;z-index:-2;background:var(--bg) center/cover no-repeat;transform:translate3d(0,var(--py,0),0);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,17,14,.92) 0%,rgba(20,17,14,.8) 48%,rgba(20,17,14,.5) 100%)}
.hero h1{color:#fff}
.hero .lead{color:#EAE5DD}
.hero .eyebrow{color:#DDB48C}
.hero .quiet a{color:#fff}
.hero-in{display:grid;gap:2.2rem}
.quiet{font-size:.98rem;margin:-.3rem 0 0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;padding:0;margin:1.6rem 0 0}
.chips li{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--r-sm);padding:.3rem .85rem}
.chips .ic{width:1.1em;height:1.1em;stroke-width:2.4;color:#DDB48C}
.quote-card{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--accent-lit);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:1.7rem}
.quote-card h2{font-size:1.55rem;margin-bottom:1rem}
.quote-card ol{list-style:none;padding:0;margin:0 0 .6rem}
.quote-card li{display:flex;gap:.9rem;align-items:center;margin-bottom:.8rem;font-size:1.04rem}
.quote-card .num{width:2.1rem;height:2.1rem;background:var(--accent-soft);color:var(--accent-d);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.mini{list-style:none;padding:.9rem 0 0;margin:0;border-top:1px solid var(--line);font-size:.95rem}
.mini li{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem}
.mini .ic{width:1.1em;height:1.1em;color:var(--accent)}
.quote-photo{margin-top:1rem;border-radius:var(--r-sm)}

/* sections */
.section{padding:3.6rem 0}
.section.beige{background:var(--beige)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease}
.grid{display:grid;gap:1.2rem;margin-top:1.4rem}
.card h3{margin-bottom:.3rem}
.card h2{font-family:var(--body);font-weight:700;font-size:1.12rem;line-height:1.3;letter-spacing:0;margin:0 0 .3rem}
.card p{color:var(--muted);margin-bottom:.4rem}
.card-ic{width:46px;height:46px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent-d);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.card-ic .ic{width:24px;height:24px;stroke-width:2}
.card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-link:hover h2,.card-link:hover h3{color:var(--accent-d)}

/* job explorer: tabs that show a photo and examples for each kind of job */
.explorer{margin-top:1.4rem}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem .8rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tab{flex:none;background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:.6rem 1.2rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:background .18s,color .18s,transform .18s,border-color .18s;min-height:46px}
.tab:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.tab[aria-selected=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.panel.active{display:grid;animation:rise .45s ease both}
.panel-photo{position:relative;min-height:240px;background:var(--dark);overflow:hidden}
.panel-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.panel:hover .panel-photo img{transform:scale(1.05)}
.panel-photo .photo-ph{position:absolute;inset:0;border:0;border-radius:0}
.panel-body{padding:1.7rem}
.panel-body h3{font-family:var(--display);font-size:1.6rem;font-weight:700;margin-bottom:.5rem}
.panel-body .ticks{margin:1rem 0 .4rem}
.panel-body .cta-row{margin:1.1rem 0 0}
.panel-more{font-weight:700}
.svc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;align-items:center}
.svc-chips span{color:var(--muted);margin-right:.3rem}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* services list: each one is a dropdown, examples roll out in place */
.svc-label{margin:2.2rem 0 0;font-weight:700;color:var(--ink)}
.svc-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.8rem;align-items:start}
.svc{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);transition:box-shadow .2s,border-color .2s}
.svc:hover{box-shadow:var(--shadow)}
.svc[open]{box-shadow:var(--shadow);border-color:var(--accent)}
.svc summary{display:grid;grid-template-columns:2.6rem 1fr auto;gap:0 .8rem;align-items:center;padding:1.1rem 1.2rem;cursor:pointer;list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc .n{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--accent)}
.svc .st{display:block}
.svc .t{display:block;font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.2}
.svc .d{display:block;color:var(--muted);font-weight:400;margin-top:.2rem;font-size:.98rem}
.svc .chev{width:.7rem;height:.7rem;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg);margin:0 .4rem .25rem 0;transition:transform .25s}
.svc[open] .chev{transform:rotate(-135deg);margin-bottom:-.2rem}
.svc-body{padding:0 1.2rem 1.3rem;animation:rise .35s ease both}
.svc-body .ticks{margin:.2rem 0 .6rem}
.svc-body .and-more{margin:.4rem 0 .8rem}
.svc-body .cta-row{margin:.8rem 0 0}

/* not on the list */
.notlisted{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;background:var(--accent-soft);border:1px solid #DCC8B3;border-left:5px solid var(--accent);border-radius:var(--r-lg);padding:1.7rem;margin-top:2.2rem}
.notlisted-ic{width:50px;height:50px;border-radius:var(--r);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.notlisted-ic .ic{width:26px;height:26px;stroke-width:2.4}
.area-group h2{font-family:var(--body);font-weight:700;font-size:1.12rem;line-height:1.3;letter-spacing:0;margin:0 0 .35rem}
.notlisted h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.15;margin:0 0 .6rem}
.notlisted p{color:#2A241E;margin-bottom:.6rem;max-width:62ch}
.notlisted .cta-row{margin:1rem 0 0}
.linkrow{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:1.6rem 0 0;font-weight:700}
.and-more{font-size:1.1rem;font-weight:700;margin:.6rem 0 1.2rem;color:var(--accent-d)}
.price-strip{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem 1rem;margin:1rem 0 0;font-size:.98rem}

/* photo band: a full-width photo with one line on it */
.band{position:relative;isolation:isolate;overflow:hidden;min-height:280px;display:flex;align-items:center;color:#fff;background:var(--dark)}
.band::before{content:"";position:absolute;inset:-8% 0;z-index:-2;background:var(--bg) center/cover no-repeat;transform:translate3d(0,var(--py,0),0);will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,17,14,.86),rgba(20,17,14,.5))}
.band h2{color:#fff;font-size:clamp(1.8rem,4.6vw,3rem);max-width:22ch;margin:0 0 .6rem}
.band p{max-width:50ch;margin:0;color:#EAE5DD;font-size:1.1rem}

/* dark photo section (for example "How it works") */
.photo-dark{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:#fff}
.photo-dark::before{content:"";position:absolute;inset:-8% 0;z-index:-2;background:var(--bg) center/cover no-repeat;transform:translate3d(0,var(--py,0),0);will-change:transform}
.photo-dark::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,17,14,.84),rgba(20,17,14,.7))}
.photo-dark h2,.photo-dark .sub{color:#fff}
.photo-dark .steps li,.photo-dark .card{color:var(--ink)}

/* steps */
.steps{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1.2rem}
.steps li{display:block;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.steps .num{display:flex;align-items:center;justify-content:center;width:2.7rem;height:2.7rem;border-radius:var(--r);background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.8rem}
.steps h3{font-size:1.2rem}
.steps p{margin:0;color:var(--muted)}

/* rates */
.rate-grid{display:grid;gap:1rem;margin-top:1.4rem}
.rate{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);padding:1.4rem 1.3rem;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.rate:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rate strong{display:block;font-family:var(--display);font-weight:700;font-size:2.7rem;line-height:1.1;margin:.2rem 0;color:var(--ink)}
.rate-l{font-weight:600;color:var(--accent-d);font-size:.98rem}
.rate-n{display:block;color:var(--muted);font-size:.95rem}
.rate-grid + p{margin-top:1.6rem}
.rate-alert{background:var(--dark);border-color:var(--dark);border-top-color:var(--accent-lit)}
.rate-alert strong{color:#fff}
.rate-alert .rate-l{color:#DDB48C}
.rate-alert .rate-n{color:#D8D1C7}

/* tables, lists */
.table-wrap{overflow-x:auto;margin-top:1rem;border-radius:var(--r);border:1px solid var(--line);background:#fff}
table.prices{width:100%;border-collapse:collapse;min-width:520px}
.prices th,.prices td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prices tr:last-child td{border-bottom:0}
.prices thead th{background:var(--beige);color:var(--ink);font-size:.92rem;font-weight:700}
.two-col{display:grid;gap:2rem}
.side-note{background:var(--beige);border-radius:var(--r);padding:1.5rem;align-self:start}
.ticks{list-style:none;padding:0;margin:0 0 1rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.55rem}
.ticks .ic{flex:none;width:1.3em;height:1.3em;color:var(--accent);margin-top:.22em;stroke-width:2.6}
.ticks.cols2{columns:1}
.crosses{list-style:none;padding:0;margin:0 0 1rem}
.crosses li{display:flex;gap:.7rem;margin-bottom:.55rem}
.crosses .x{flex:none;width:1.4em;height:1.4em;background:var(--ink);color:#fff;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-top:.15em;font-size:.85rem}
.facts{list-style:none;padding:0;margin:0}
.facts li{margin-bottom:.4rem}
.chip-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip-link{display:inline-block;padding:.45rem 1rem;border:1px solid var(--ink);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;background:#fff;transition:background .18s,color .18s,border-color .18s}
.chip-link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.callout{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:var(--r);padding:1.1rem 1.3rem;margin-top:1.4rem}
.area-group{margin-bottom:1.8rem}
.area-list{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.6rem}
.area-list a{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s}
.area-list a:hover{border-color:var(--accent);transform:translateX(3px)}
.area-list span{color:var(--muted);font-weight:500;font-size:.92rem}
.center-link{margin-top:1rem}
details.fold{margin-top:1.4rem}
details.fold summary{cursor:pointer;font-weight:700;color:var(--accent-d);padding:.4rem 0}
details.fold[open] summary{margin-bottom:.4rem}

/* inner pages */
.crumbs{background:transparent;font-size:.9rem;padding:.8rem 0;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs span{opacity:.5;margin:0 .2rem}
.crumbs span[aria-current]{opacity:1;margin:0;color:var(--ink)}
.page-hero{position:relative;isolation:isolate;background:var(--beige);padding:2.6rem 0 2.4rem;border-bottom:4px solid var(--accent)}
.page-hero.has-bg{background:var(--dark);color:#fff}
.page-hero.has-bg::before{content:"";position:absolute;inset:-6% 0;z-index:-2;background:var(--bg) center/cover no-repeat;transform:translate3d(0,var(--py,0),0);will-change:transform}
.page-hero.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,17,14,.92),rgba(20,17,14,.62))}
.page-hero.has-bg h1{color:#fff}
.page-hero.has-bg .lead{color:#EAE5DD}
.page-hero.has-bg .emergency-hours,.page-hero.has-bg .emergency-hours .ic{color:#fff}
.page-hero h1{max-width:22ch;font-size:clamp(2rem,5.4vw,3.3rem)}
.emergency-hours{display:flex;gap:.5rem;align-items:center;font-weight:700}
.emergency-hours .ic{width:1.3em;height:1.3em;color:var(--accent)}

/* faq */
.faq{margin-top:1rem;max-width:860px;display:grid;gap:.7rem}
.faq details{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:1.05rem 1.2rem;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 1.2rem 1.1rem;color:var(--muted);max-width:68ch}
.faq-a p{margin:0}

/* reviews, gallery */
.quote-grid{display:grid;gap:1.2rem;margin:1.4rem 0}
.quote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.quote blockquote{margin:.6rem 0 .8rem;font-size:1.08rem}
.quote figcaption{font-weight:600;font-size:.95rem;color:var(--muted)}
.stars{display:flex;gap:2px;color:var(--accent-lit)}
.stars .ic{width:1.1em;height:1.1em;fill:currentColor}
.gallery{display:grid;gap:1rem;margin-top:1.2rem}
.gallery figure{margin:0}
.gallery img{width:100%;object-fit:cover;border-radius:var(--r)}
.gallery figcaption{font-size:.92rem;color:var(--muted);margin-top:.4rem}

/* cta band: photo behind a warm dark veil */
.cta-band{position:relative;isolation:isolate;background:var(--dark);color:#fff;padding:4rem 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:-8% 0;z-index:-2;background:var(--bg) center/cover no-repeat;transform:translate3d(0,var(--py,0),0);will-change:transform}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,17,14,.92),rgba(20,17,14,.62))}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,4.6vw,3rem);max-width:20ch}
.cta-band p{color:#EAE5DD;max-width:56ch;margin:0 0 .4rem}

/* forms */
.contact-grid{display:grid;gap:2rem}
.form{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.6rem}
.form h2{font-size:1.7rem}
.field{margin-bottom:1rem}
.row2{display:grid;gap:0 1rem}
label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.98rem}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;padding:.75rem .95rem;border:1.5px solid #A79C90;border-radius:var(--r);background:#fff;color:var(--ink);min-height:50px;transition:border-color .18s,box-shadow .18s}
textarea{min-height:130px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(154,106,67,.24)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;margin:1rem 0;font-size:.95rem}
.check input{width:22px;min-height:22px;margin-top:.25rem}
.form-status{margin-top:1rem;font-weight:600}
.form-status.err{color:#9A1B0C}
.form-status.ok{color:var(--accent-d)}
.contact-side{display:grid;gap:1.2rem;align-content:start}

/* prose */
.prose{max-width:760px}
.prose h2{margin-top:2rem;font-size:1.7rem}

/* footer */
.site-footer{border-top:3px solid var(--accent);background:var(--dark);color:#DCD5CB;padding:3.4rem 0 1rem}
.site-footer a{color:#fff;text-decoration:none;font-weight:500}
.site-footer a:hover{text-decoration:underline}
.site-footer h2{color:#fff;font-family:var(--display);font-size:1.2rem;font-weight:700;margin-bottom:.8rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.4rem}
.site-footer .ic{width:1.1em;height:1.1em;vertical-align:-.15em;margin-right:.3rem}
.site-footer .btn{text-decoration:none}
.site-footer .btn-light,.site-footer .btn-light:hover{color:var(--ink)}
.foot-grid{display:grid;gap:2rem}
.foot-tag{max-width:38ch;margin-top:1rem}
.logo-light{color:#fff}
.logo-light{color:#fff}
.logo-light .logo-text em{color:#CBBFB1}
.foot-bottom{border-top:1px solid #3A332C;margin-top:2rem;padding-top:1rem;font-size:.88rem;color:#B3A89B}

/* sticky mobile bar */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.5rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky-bar .btn{flex:1;min-height:48px;padding:.4rem}
.sticky-bar .btn:hover{transform:none;box-shadow:none}

/* gentle reveal on scroll (only when JS is running) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}

@media (max-width:719px){
  .notlisted{grid-template-columns:1fr}
  .notlisted .cta-row .btn{width:100%}
  .hero .cta-row .btn{width:100%}
  .hero::after{background:linear-gradient(180deg,rgba(20,17,14,.88),rgba(20,17,14,.78))}
}
@media (min-width:720px){
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}
  .rate-grid{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr 1fr}
  .quote-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .area-list{grid-template-columns:repeat(2,1fr);column-gap:1rem}
  .ticks.cols2{columns:2;column-gap:2.5rem}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .panel.active{grid-template-columns:1fr 1fr}
  .panel-photo{min-height:340px}
}
@media (min-width:980px){
  body{padding-bottom:0}
  .sticky-bar{display:none}
  .nav-toggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;gap:1.7rem;padding:0;border:0;background:none;box-shadow:none}
  .nav>a{padding:.4rem 0;border:0;font-size:1rem;white-space:nowrap;border-bottom:2px solid transparent}
  .nav>a[aria-current=page],.nav>a:hover{border-bottom-color:var(--accent)}
  .nav-cta{margin:0 0 0 .4rem}
  .hero{padding:5rem 0 5.4rem}
  .hero-in{grid-template-columns:1.35fr .8fr;align-items:center}
  .two-col{grid-template-columns:1.4fr 1fr}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .grid.g4{grid-template-columns:repeat(4,1fr)}
  .rate-grid{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:1.3fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .section{padding:4.6rem 0}
  .panel-body{padding:2.2rem}
}
/* ============================================================================
   Design v6: premium refinement layer (on top of v5). Same colours and logo.
   Sharper hierarchy, more space, a matte grain on dark photo areas, bronze hairlines, calmer motion.
   Remove this whole block to go back to v5 (design-v5-bronze.css is the saved copy).
   ============================================================================ */
:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --bronze-line:linear-gradient(90deg,#D6AB82 0%,#A97A52 55%,rgba(169,122,82,0) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  --r:6px; --r-lg:10px;
  --shadow:0 1px 2px rgba(22,19,17,.06),0 6px 20px rgba(22,19,17,.07);
  --shadow-lg:0 2px 6px rgba(22,19,17,.08),0 22px 48px rgba(22,19,17,.18);
}
body{font-size:1.08rem;letter-spacing:.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* type */
h1,h2{font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.4vw,4.3rem);line-height:1.04}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);line-height:1.1}
.sub{font-size:1.14rem;line-height:1.6}
.section>.container>h2:first-child::before{content:"";display:block;width:54px;height:3px;margin-bottom:1.1rem;background:var(--bronze)}
.photo-dark>.container>h2:first-child::before{background:linear-gradient(90deg,#E6BF9B,#C8956B)}

/* header: calmer, shrinks a little once you scroll, bronze hairline */
.site-header{border-bottom:0;background:rgba(244,240,237,.92)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(169,122,82,.55) 20%,rgba(169,122,82,.55) 80%,transparent)}
.header-in{min-height:88px;transition:min-height .3s var(--ease)}
.logo-art{transition:height .3s var(--ease)}
.site-header.scrolled .header-in{min-height:70px}
.site-header.scrolled .logo-art{height:54px}
@media (min-width:980px){
  .nav>a{font-size:.98rem;letter-spacing:.015em;border-bottom-width:2px;padding:.5rem 0}
  .nav>a:hover{border-bottom-color:var(--accent-lit)}
}

/* buttons */
.btn{min-height:54px;padding:.75rem 1.5rem;letter-spacing:.01em;border-radius:var(--r)}
.btn:hover{box-shadow:0 10px 24px rgba(22,19,17,.24)}
.btn-wa{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 8px rgba(18,140,70,.28)}
.btn-sm{min-height:44px;padding:.4rem 1.1rem}
.btn-lg{min-height:60px}

/* hero */
.hero{min-height:min(86vh,760px);display:flex;align-items:center;padding:4.2rem 0 5rem;border-bottom:1px solid rgba(214,171,130,.5)}
.hero>.container{width:100%}
.hero::before{transform:translate3d(0,var(--py,0),0) scale(1.04)}
.hero::after{background:var(--grain),radial-gradient(90% 80% at 88% 8%,rgba(201,155,110,.2),transparent 62%),linear-gradient(180deg,rgba(14,12,10,0) 55%,rgba(14,12,10,.72) 100%),linear-gradient(90deg,rgba(14,12,10,.95) 0%,rgba(14,12,10,.8) 46%,rgba(14,12,10,.4) 100%)}
.hero h1{max-width:15ch;margin-bottom:1.1rem;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lead{font-size:1.22rem;max-width:50ch}
.hero .eyebrow{font-size:.96rem;font-weight:600;letter-spacing:.05em;margin-bottom:1.1rem}
.hero .eyebrow::before{content:"";display:inline-block;width:38px;height:2px;margin-right:.85rem;vertical-align:middle;background:var(--bronze)}
.hero .cta-row{margin:1.8rem 0 1.1rem}
.chips{margin-top:1.9rem;gap:.55rem .65rem}
.chips li{background:rgba(255,255,255,.07);border:1px solid rgba(214,171,130,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.4rem .95rem;font-weight:500;letter-spacing:.01em}
.quote-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.65);border-top:0;border-radius:var(--r-lg);padding:2rem 1.9rem 1.8rem;box-shadow:0 30px 60px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.2)}
.quote-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--bronze)}
.quote-card h2{font-size:1.65rem}
.quote-card .num{background:var(--dark);color:var(--accent-lit);font-family:var(--display)}

/* sections */
.section{padding:4.4rem 0}
@media (min-width:980px){.section{padding:6rem 0}}
.section.beige{background:linear-gradient(180deg,#EBE5DE,#E6DFD7);border-top:1px solid rgba(169,122,82,.18);border-bottom:1px solid rgba(169,122,82,.18)}
.card{border-radius:var(--r-lg);border-color:rgba(169,122,82,.22);box-shadow:var(--shadow)}
.card-link:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.card-ic{width:50px;height:50px;background:var(--dark);color:var(--accent-lit);border-radius:var(--r)}
.card-ic .ic{width:25px;height:25px;stroke-width:1.8}

/* job tabs and panels */
.tab{font-weight:600;letter-spacing:.01em;border-color:rgba(18,18,18,.55)}
.tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--accent-lit)}
.panel{border-radius:var(--r-lg);border-color:rgba(169,122,82,.25);box-shadow:var(--shadow-lg)}
.panel-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.35),transparent 45%);pointer-events:none}
.panel-body h3{font-weight:600;letter-spacing:-.01em}

/* service dropdowns */
.svc-label{font-family:var(--display);font-size:1.25rem;font-weight:600;margin-top:3rem}
.svc{border-radius:var(--r-lg);border-color:rgba(169,122,82,.25);border-left:4px solid var(--accent);transition:box-shadow .25s var(--ease),transform .25s var(--ease),background .25s}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.svc[open]{background:linear-gradient(180deg,#fff,#FBF8F5)}
.svc summary{padding:1.3rem 1.4rem}
.svc .n{background:var(--bronze);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.5rem}
.svc .t{font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
.svc .chev{box-sizing:content-box;width:.55rem;height:.55rem;padding:.55rem;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(169,122,82,.4);position:relative;transform:none;margin:0}
.svc[open] .chev{transform:none;margin:0}
.svc .chev::before{content:"";position:absolute;left:50%;top:50%;width:.5rem;height:.5rem;margin:-.36rem 0 0 -.25rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease)}
.svc[open] .chev::before{transform:rotate(-135deg);margin-top:-.12rem}

/* "not on the list" box: charcoal with bronze edge, so it stands out and feels finished */
.notlisted{background:linear-gradient(135deg,#1C1A18 0%,#121110 100%);color:#fff;border:1px solid rgba(214,171,130,.4);border-left:5px solid var(--accent-lit);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:2rem}
.notlisted h2{color:#fff;font-weight:600}
.notlisted p{color:#E7E0D7}
.notlisted .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.notlisted .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.notlisted-ic{background:var(--bronze);color:#fff}

/* how it works: big quiet numerals, white cards on the photo */
.steps li{position:relative;border-radius:var(--r-lg);border-top:0;padding:1.7rem 1.5rem 1.5rem;overflow:hidden}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--bronze)}
.steps .num{position:absolute;top:.6rem;right:1.2rem;width:auto;height:auto;margin:0;background:none;color:rgba(169,122,82,.3);font-family:var(--display);font-weight:600;font-size:3.4rem;line-height:1}
.steps h3{font-size:1.25rem;font-weight:700;padding-right:3.4rem}

/* prices */
.rate{border-radius:var(--r-lg);border-top:0;padding:1.6rem 1.4rem;position:relative;overflow:hidden}
.rate::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--bronze)}
.rate strong{font-weight:600;font-size:clamp(2.1rem,2.7vw,2.7rem);white-space:nowrap}

/* photo band and call-to-action band */
.band{min-height:380px}
.band::after{background:var(--grain),linear-gradient(90deg,rgba(14,12,10,.9),rgba(14,12,10,.5))}
.band h2{font-size:clamp(2rem,5vw,3.4rem)}
.band h2::before{content:"";display:block;width:54px;height:3px;margin-bottom:1.1rem;background:linear-gradient(90deg,#E6BF9B,#C8956B)}
.photo-dark::after{background:var(--grain),linear-gradient(180deg,rgba(14,12,10,.88),rgba(14,12,10,.74))}
.cta-band{padding:5.5rem 0}
.cta-band::after{background:var(--grain),radial-gradient(70% 90% at 90% 100%,rgba(201,155,110,.22),transparent 60%),linear-gradient(90deg,rgba(14,12,10,.94),rgba(14,12,10,.62))}
.cta-band h2{font-size:clamp(2rem,4.8vw,3.3rem)}
.cta-band h2::before{content:"";display:block;width:54px;height:3px;margin-bottom:1.1rem;background:linear-gradient(90deg,#E6BF9B,#C8956B)}

/* inner page headers */
.page-hero{padding:3.4rem 0 3rem;overflow:hidden}
.page-hero.has-bg::after{background:var(--grain),linear-gradient(90deg,rgba(14,12,10,.94),rgba(14,12,10,.6))}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.5rem)}

/* faq */
.faq details{border-radius:var(--r-lg);border-color:rgba(169,122,82,.25);transition:box-shadow .25s var(--ease)}
.faq summary{padding:1.15rem 1.3rem;font-weight:600}
.faq summary::after{content:"+";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid rgba(169,122,82,.45);display:grid;place-items:center;font-size:1.3rem;line-height:1;color:var(--accent)}

/* forms */
.form{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

/* footer */
.site-footer{padding:4.2rem 0 1.2rem}
.site-footer h2{font-size:1.05rem;letter-spacing:.02em;margin-bottom:1.1rem}
.site-footer h2::after{content:"";display:block;width:34px;height:2px;margin-top:.55rem;background:var(--bronze)}
.site-footer a:hover{color:var(--accent-lit)}

/* calm motion: children rise in one after another once their section appears */
.js .reveal.in .steps>li,.js .reveal.in .rate-grid>.rate,.js .reveal.in .svc-list>li,.js .reveal.in .grid>.card,.js .reveal.in .quote-grid>.quote{animation:rise .7s var(--ease) both}
.js .reveal.in :is(.steps,.rate-grid,.svc-list,.grid,.quote-grid)>:nth-child(2){animation-delay:.08s}
.js .reveal.in :is(.steps,.rate-grid,.svc-list,.grid,.quote-grid)>:nth-child(3){animation-delay:.16s}
.js .reveal.in :is(.steps,.rate-grid,.svc-list,.grid,.quote-grid)>:nth-child(4){animation-delay:.24s}
.js .reveal.in :is(.svc-list)>:nth-child(5){animation-delay:.32s}
.js .reveal.in :is(.svc-list)>:nth-child(6){animation-delay:.4s}
@media (max-width:719px){
  .hero{min-height:0;padding:3rem 0 3.4rem}
  .hero::after{background:var(--grain),linear-gradient(180deg,rgba(14,12,10,.9),rgba(14,12,10,.8))}
  .hero h1{max-width:none}
  .steps .num{font-size:2.8rem}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .hero::before,.band::before,.cta-band::before{transform:none!important}
}

/* Montserrat tuning: it is wider than Georgia, so headings run at about 0.8 of the old size with slightly tighter tracking. */
h1,h2{letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08}
h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.15}
.panel-body h3{font-size:1.35rem;letter-spacing:-.01em}
.svc .t{font-size:1.1rem}
.svc-label{font-size:1.05rem}
.notlisted h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.rate strong{font-size:2.2rem}
.steps .num{font-size:2.9rem}
.site-footer h2{font-size:.95rem}

/* Circular badge logo (supplied 18 Oct 2026) with a small wordmark; the wordmark hides on narrow screens. */
.logo-badge{border-radius:50%;box-shadow:0 1px 2px rgba(22,19,17,.25)}
.site-header .logo-text strong{font-size:1.05rem}
.site-header .logo-text em{font-size:.6rem}
@media (max-width:1099px){.site-header .logo-text{display:none}}

/* When a service dropdown opens, keep it clear of the sticky header and the bottom call bar. */
details[name]{scroll-margin-top:96px;scroll-margin-bottom:96px}

/* Nick's photos (19 Oct 2026): About portrait and the single Recent work photo. */
.about-photo{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);margin:0 0 1.4rem}
.gallery-1{max-width:760px}
.gallery-1 img{aspect-ratio:4/3;object-position:50% 38%;box-shadow:var(--shadow)}
.gallery.gallery-1{grid-template-columns:1fr}

/* About page: 18 years, insured and DBS as one compact row of badges. */
.cred-row{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.cred-row li{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-weight:600;font-size:.95rem;line-height:1.2}
.cred-row .ic{width:1.1rem;height:1.1rem;color:var(--accent);flex:none}

/* Recent work with two photos: side by side from tablet width up, stacked on phones. */
.gallery-2 img{aspect-ratio:4/3;object-position:50% 40%;box-shadow:var(--shadow)}
@media (min-width:720px){.gallery.gallery-2{grid-template-columns:repeat(2,1fr);max-width:1000px}}

/* Emergency strip: one flat copper, the average colour of the house in the logo (#B07F61), with dark text. */
.topbar{background:#B07F61;color:#1C100A}
.topbar a{color:#1C100A}

/* Testimonials slide in from opposite sides when they scroll into view, and lift a little on hover. */
@keyframes slide-l{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}
@keyframes slide-r{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
.js .reveal.in .quote-grid>.quote:nth-child(odd){animation:slide-l .9s var(--ease) backwards}
.js .reveal.in .quote-grid>.quote:nth-child(even){animation:slide-r .9s var(--ease) .15s backwards}
.quote{transition:transform .25s ease,box-shadow .25s ease}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
@media (max-width:719px){
  @keyframes slide-l{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  @keyframes slide-r{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.js .reveal.in .quote-grid>.quote{animation:none}.quote:hover{transform:none}}

/* Phones: the job panels form one swipeable row (next card peeks in), tabs follow the swipe. */
.swipe-hint{display:none}
@media (max-width:719px){
  .swipe-hint{display:block;margin:-.2rem 0 .6rem;font-size:.9rem;font-weight:600;color:var(--accent-d)}
  .panels{position:relative;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.2rem .1rem 1.1rem}
  .panels::-webkit-scrollbar{display:none}
  .panels .panel,.panels .panel.active{display:grid;flex:0 0 88%;scroll-snap-align:center;animation:none}
}

/* Testimonials: the words in italic with quotation marks, the customer's name in bold. */
.quote blockquote{font-style:italic}
.quote blockquote::before{content:"“"}
.quote blockquote::after{content:"”"}
.quote figcaption{font-weight:500}
.quote figcaption strong{font-weight:700;color:var(--ink)}

/* Phones: the tab names are as wide as the cards below and move together with them. */
@media (max-width:719px){
  .tabs{overflow-x:hidden;gap:.9rem;padding:.2rem .1rem .6rem;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 88%;text-align:center;padding:.8rem 1rem;font-size:1.02rem}
  .swipe-hint{margin-top:-.1rem}
}