/* Quayside Skylights: "the Tyneside street, read door by door". Tokens from STYLE-GUIDE.md. */

/* ---------- Fonts (self-hosted; metric fallbacks stop the swap from moving the page) ---------- */
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic-latin.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Gloock Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
	--ground: #F0ECE4;
	--ground-2: #E6E0D4;
	--cream: #FBF8F1;
	--ink: #161513;
	--ink-2: #4D4842;
	--brick: #7A1F12;
	--brick-deep: #5A160C;
	--green: #1F2C23;
	--brass: #C9AB78;
	--brass-deep: #7A5C2E;
	--rule: #CFC7B8;
	--wa: #187A43;

	--f-display: "Gloock", "Gloock Fallback", Georgia, serif;
	--f-body: "Figtree", "Figtree Fallback", Arial, sans-serif;

	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
	--pad-sec: clamp(var(--s-7), 7vw, var(--s-9));
	--gutter: var(--s-4);

	--w-prose: 68ch;
	--w-std: 1140px;
	--w-wide: 1320px;

	--t-body: 1.125rem;
	--t-h4: 1.25rem;
	--t-h3: 1.5rem;
	--t-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.2rem);
	--t-h1: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);
	--t-hero: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem);
	--t-small: 0.9rem;
	--t-label: 0.78rem;

	--head-h: 64px;
	--shadow: 0 1px 0 rgba(22, 21, 19, .06), 0 8px 24px -12px rgba(22, 21, 19, .28);
	--radius: 2px;
}
@media (min-width: 768px) { :root { --gutter: var(--s-5); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--s-4)); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.7; overflow-x: clip; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s-4); color: var(--ink); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s-4); }
a { color: var(--brick); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--brass-deep); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--brass); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 200; background: var(--ink); color: var(--cream); padding: var(--s-3) var(--s-4); }
.skip:focus { top: var(--s-4); }
.site-main:focus { outline: none; }
.kicker { font-family: var(--f-body); font-weight: 600; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-3); }
.sec-title { font-size: var(--t-h2); }
.sec-lead { color: var(--ink-2); max-width: 60ch; }
.dot { color: var(--ink-2); }

/* The one dark-ground mechanism (STYLE-GUIDE §3). Specificity (0,2,0)+ outranks band rules. */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p, .on-dark li, .on-dark dt, .on-dark dd { color: var(--cream); }
.on-dark a:not(.btn):not(.plate) { color: var(--brass); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-5); border: 0; border-radius: var(--radius); font-family: var(--f-body); font-weight: 700; font-size: 0.95rem; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
/* The brass letterbox: a polished plate with a slot. */
.btn--letterbox { background: linear-gradient(180deg, #E2C995 0%, #C9AB78 48%, #A88A55 100%); color: var(--ink); box-shadow: inset 0 0 0 1px #8C6E3F, inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 #6E552D; text-transform: uppercase; font-size: 0.8rem; letter-spacing: .1em; padding-inline: var(--s-5); }
.btn--letterbox .slot { width: 18px; height: 4px; border-radius: 2px; background: #3B2C14; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.btn--wa { background: var(--wa); color: #fff; width: 100%; }
.wa-link { background: none; border: 0; padding: var(--s-1) 0; color: var(--brick); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; min-height: 44px; }
.on-dark .wa-link { color: var(--brass); }
.link-arrow { font-weight: 600; }
.link-arrow::after { content: " →"; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--rule); }
.head-in { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); height: var(--head-h); display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand-word { font-family: var(--f-display); font-size: 1.45rem; line-height: 1; white-space: nowrap; }
.mark { width: 36px; height: 45px; flex: 0 0 auto; }
.mark--plate { filter: drop-shadow(0 3px 3px rgba(22,21,19,.3)); }
.site-nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: var(--s-2) var(--s-3); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.nav-link:hover, .nav-item.is-current > .nav-link { color: var(--brick); }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin-left: calc(-1 * var(--s-2)); background: none; border: 0; cursor: pointer; color: var(--ink); }
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.sub-toggle[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-2px); }
.sub { list-style: none; margin: 0; padding: var(--s-3) 0; position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--cream); border: 1px solid var(--rule); border-top: 3px solid var(--brick); box-shadow: var(--shadow); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; }
.sub a { display: block; padding: var(--s-2) var(--s-5); color: var(--ink); text-decoration: none; font-size: 0.98rem; }
.sub a:hover, .sub a:focus-visible { background: var(--ground); color: var(--brick); }
.sub-all a { font-weight: 700; color: var(--brick); border-top: 1px solid var(--rule); margin-top: var(--s-2); }
.has-sub.is-open .sub { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease, transform .15s ease; }
@media (hover: hover) and (min-width: 1024px) { .has-sub:hover .sub { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease, transform .15s ease; } }
.head-cta { display: flex; align-items: center; gap: var(--s-4); flex: 0 0 auto; }
.head-phone { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-toggle, .nav-cta-mobile { display: none; }

@media (min-width: 1024px) {
	/* The enamel plate hangs below the bar, as in the mockup. */
	.site-head .brand .mark.mark--plate { width: 70px; height: 88px; margin: 4px 0 -34px; align-self: flex-start; position: relative; z-index: 2; }
	.site-head .brand { align-self: stretch; align-items: flex-start; }
	.site-head .brand-word { margin-top: 15px; font-size: 1.95rem; }
}
/* Laptop widths keep the full nav (burger only below 1024) and must fit inside the viewport: the header WhatsApp
   link gives way to the floating WhatsApp pill, and the wordmark, gaps and nav tracking tighten. Measured by
   qa-browser at 1024 and 1280 (header CTA right edge inside clientWidth). */
@media (max-width: 1365px) and (min-width: 1024px) {
	.head-cta .wa-link { display: none; }
	.nav-link { padding-inline: var(--s-2); }
}
@media (max-width: 1279px) and (min-width: 1024px) {
	.head-in { gap: var(--s-3); }
	.site-head .brand-word { font-size: 1.5rem; }
	.site-head .brand .mark.mark--plate { width: 60px; height: 76px; }
	.nav-link { letter-spacing: .05em; padding-inline: 6px; }
	.head-cta .btn { padding-inline: var(--s-3); }
}
/* Once a phone number is set (config 'tel'), the header carries it too. Measured with a test number at 360 to 1600
   (memory: a late phone number pushed the Exeter menu off-screen): the WhatsApp link gives way to the floating pill
   up to 1599, the number becomes a 44px call icon on narrow laptops (its text stays as the accessible name), and
   below 1024 the mobile action bar's Call button carries it instead. */
@media (max-width: 1599px) and (min-width: 1024px) {
	.head-cta:has(.head-phone) .wa-link { display: none; }
}
@media (max-width: 1279px) and (min-width: 1024px) {
	.head-cta .head-phone { font-size: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; }
	.head-cta .head-phone::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (max-width: 1023px) {
	.head-in { gap: var(--s-3); }
	.head-cta .btn, .head-cta .wa-link, .head-cta .head-phone { display: none; }
	.nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; min-height: 44px; padding: 0 var(--s-3); background: none; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; color: var(--ink); font-weight: 700; font-size: 0.85rem; letter-spacing: .06em; text-transform: uppercase; }
	.nav-toggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; }
	.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
	.nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
	.site-nav { position: fixed; left: 0; right: 0; top: var(--head-h); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--green); padding: var(--s-4) var(--gutter) var(--s-7); display: none; margin: 0; }
	.site-nav.is-open { display: block; }
	html.nav-open { overflow: hidden; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-item { flex-wrap: wrap; border-bottom: 1px solid rgba(251,248,241,.14); }
	.nav-link { color: var(--cream); font-size: 1rem; padding: var(--s-4) 0; flex: 1; }
	.nav-item.is-current > .nav-link, .nav-link:hover { color: var(--brass); }
	.sub-toggle { color: var(--cream); width: 44px; height: 52px; margin: 0; }
	.sub { position: static; display: none; min-width: 0; width: 100%; visibility: visible; opacity: 1; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--s-3) var(--s-4); transition: none; }
	.has-sub.is-open .sub { display: block; }
	.sub a { color: var(--cream); padding: var(--s-2) 0; }
	.sub a:hover, .sub a:focus-visible { background: transparent; color: var(--brass); }
	.sub-all a { color: var(--brass); border-top: 0; }
	.nav-cta-mobile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-5); }
	.nav-cta-mobile .wa-link { color: var(--brass); }
}
@media (max-width: 379px) { .brand-word { font-size: 1.2rem; } .nav-toggle-label { display: none; } }

/* ---------- Containers ---------- */
.problem-in, .process-in, .areas-in, .quote-in, .foot-in, .services, .faq-in, .spokes, .town-svc, .nearby, .idx, .contact-in, .contact-map { max-width: var(--w-std); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 02 Hero: two front doors ---------- */
.hero-doors { background: var(--ground); padding-top: clamp(var(--s-6), 4vw, var(--s-7)); }
.hero-head { text-align: center; padding: 0 var(--gutter) var(--s-5); max-width: var(--w-wide); margin: 0 auto; }
.hero-head h1 { font-size: var(--t-hero); margin: 0 0 var(--s-2); }
.hero-tag { font-family: var(--f-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.1; margin: 0; }
.hero-photo { position: relative; }
.hero-img { width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; object-position: 50% 60%; }
.door-sign { position: absolute; top: 57%; transform: translate(-50%, -50%); width: clamp(150px, 13vw, 240px); padding: var(--s-3) var(--s-3); text-align: center; text-decoration: none; background: rgba(31, 44, 35, .92); color: #F4E3BD; border: 2px solid var(--brass); outline: 1px solid rgba(201,171,120,.5); outline-offset: -6px; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease; }
.door-no { position: absolute; top: 31%; transform: translateX(-50%); font-family: var(--f-display); font-size: clamp(1.2rem, .6rem + 1.4vw, 2.2rem); color: #D9BA7C; text-shadow: 0 1px 0 #3B2C14, 0 2px 4px rgba(0,0,0,.5); }
.door-no--up { left: 38.9%; } .door-no--down { left: 61.4%; }
@media (max-width: 767px) { .door-no { display: none; } }
.door-sign--up { left: 38.9%; }
.door-sign--down { left: 61.4%; background: rgba(18, 35, 47, .92); }
.door-sign:hover { transform: translate(-50%, calc(-50% - 2px)); }
.door-sign-q { display: block; font-family: var(--f-display); font-size: clamp(1rem, .6rem + .9vw, 1.5rem); line-height: 1.15; }
.door-sign-go { display: block; font-family: var(--f-display); font-size: clamp(.95rem, .55rem + .8vw, 1.35rem); margin-top: var(--s-1); }
.risk-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; padding: var(--s-3) var(--gutter); font-family: var(--f-display); font-size: 1.05rem; text-align: center; border-bottom: 1px solid var(--rule); }
.risk-strip > span + span::before { content: "·"; color: var(--brick); margin-right: var(--s-4); }
.risk-strip .wa-link { font-family: var(--f-display); font-weight: 400; color: var(--ink); text-decoration-color: var(--brick); padding: 0; min-height: 0; font-size: inherit; }
.hero-lede { max-width: 62ch; margin: 0 auto; padding: var(--s-5) var(--gutter) 0; text-align: center; color: var(--ink-2); }
@media (max-width: 767px) {
	.hero-img { aspect-ratio: 4 / 3; object-position: 44% 60%; }
	.hero-photo { display: flex; flex-direction: column; }
	.door-sign { position: static; transform: none; width: auto; }
	.door-sign:hover { transform: none; }
	.hero-photo { display: grid; grid-template-columns: 1fr 1fr; }
	.hero-photo .hero-img { grid-column: 1 / -1; }
	.door-sign--up { grid-column: 1; } .door-sign--down { grid-column: 2; }
	.risk-strip { font-size: .95rem; }
	.risk-strip > span + span::before { margin-right: var(--s-3); }
}

/* ---------- 03 Doormat ---------- */
.doormat { background: #6E6A63 url("../images/step-640.webp") center / cover; padding: var(--s-6) var(--gutter); }
.mat { list-style: none; margin: 0 auto; padding: var(--s-7) var(--s-5); max-width: var(--w-std); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-4); background: #B88A4E url("../images/doormat-1024.webp") center / cover; border: 10px solid #2B2A27; border-radius: 4px; box-shadow: inset 0 0 0 999px rgba(236, 200, 140, .32), 0 10px 22px -10px rgba(0,0,0,.6); }
.mat li { font-family: var(--f-display); font-size: clamp(1.7rem, 1rem + 2.1vw, 3rem); padding-inline: var(--s-3); line-height: 1.02; color: #1E1107; -webkit-text-stroke: .6px #1E1107; text-align: center; text-shadow: 0 1px 0 rgba(255,230,180,.35); }
.mat li + li { border-left: 3px solid rgba(42,26,12,.55); }
@media (max-width: 700px) { .mat li + li { border-left: 0; border-top: 3px solid rgba(42,26,12,.5); padding-top: var(--s-3); } }

/* ---------- 04 Problem: photos run to the left edge ---------- */
.problem { padding-block: 0; }
.problem-in { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: center; }
.problem-photos { grid-column: 1; display: grid; gap: var(--s-1); }
.problem-text { grid-column: 2; padding: var(--s-7) clamp(var(--s-5), 6vw, var(--s-9)); max-width: 700px; }
.problem-text h2 { font-size: clamp(2.4rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.02; }
.problem-text p { color: var(--ink-2); font-size: 1.25rem; }
.tagged { position: relative; margin: 0; }
.tagged img { width: 100%; object-fit: cover; }
.tag { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--cream); font-family: var(--f-display); font-size: clamp(1rem, .7rem + .8vw, 1.4rem); padding: var(--s-3) var(--s-4); max-width: 60%; line-height: 1.15; text-transform: uppercase; }
.problem--town .problem-in { max-width: var(--w-std); padding: var(--pad-sec) var(--gutter); gap: var(--s-7); }
.problem--town .problem-text { padding: 0; }
@media (max-width: 860px) { .problem-in { grid-template-columns: minmax(0, 1fr); } .problem-photos, .problem-text { grid-column: 1; } .problem-text { padding: var(--s-6) var(--gutter); } }

/* ---------- 05 Services ---------- */
.services { padding-block: var(--pad-sec); max-width: var(--w-wide); text-align: center; }
.services .sec-title { margin-bottom: var(--s-5); }
.svc-board { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.25fr); gap: var(--s-3); text-align: left; }
.svc-card--feature { grid-column: 1; }
.svc-grid { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.svc-card { position: relative; display: block; text-decoration: none; color: var(--ink); min-width: 0; }
.svc-frame { display: block; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); background: var(--cream); padding: 5px; }
.svc-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .4s ease; }
.svc-card--feature .svc-frame img { aspect-ratio: auto; height: 100%; min-height: 100%; }
.svc-card--feature, .svc-card--feature .svc-frame { height: 100%; }
.svc-card:hover img { transform: scale(1.03); }
.svc-name { position: absolute; left: 13px; bottom: 13px; background: var(--cream); padding: var(--s-1) var(--s-3); font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; box-shadow: 0 0 0 1px var(--rule); }
.svc-links { margin: var(--s-5) 0 0; font-family: var(--f-display); font-size: 1.15rem; }
.svc-links a { color: var(--brick); }
@media (max-width: 860px) { .svc-board { grid-template-columns: minmax(0, 1fr); } .svc-card--feature, .svc-grid { grid-column: 1; } .svc-card--feature .svc-frame img { aspect-ratio: 4 / 3; } }

/* ---------- 06 Process: the doorbell plate flush left, the landing photo filling the right ---------- */
.process { background: var(--ground-2); padding: 0; }
.process-in { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0; align-items: stretch; }
.bells { grid-column: 1; position: relative; background: #8E4A33 url("../images/doorbell-640.webp") center / cover; }
.bells-img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
/* The three blank cream cards of the bell panel carry real text. Positions match the asset. */
.bell-cards { list-style: none; margin: 0; padding: 0; position: absolute; left: 47%; right: 2.5%; top: 18%; bottom: 14.5%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2.6%; }
.bell-cards li { display: flex; align-items: center; gap: var(--s-3); padding: 0 5% 0 4%; color: var(--ink); font-family: var(--f-display); font-size: clamp(.85rem, .35rem + .82vw, 1.18rem); line-height: 1.1; }
.bell-cards strong { font-weight: 400; }
.bell-n { font-family: var(--f-display); font-size: 2.1em; line-height: 1; }
.process-photo { grid-column: 2; position: relative; margin: 0; }
.process-photo .captioned, .process-photo .captioned img { height: 100%; }
.process-photo .captioned img { aspect-ratio: auto; min-height: 100%; }
.process-photo .sec-title { position: absolute; z-index: 2; background: rgba(251, 248, 241, .94); padding: var(--s-2) var(--s-5); box-shadow: 0 4px 12px rgba(0,0,0,.15); left: clamp(var(--s-5), 4vw, var(--s-8)); top: clamp(var(--s-5), 4vw, var(--s-7)); margin: 0; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.75rem); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.captioned { position: relative; margin: 0; }
.captioned img { width: 100%; object-fit: cover; }
.plate-cap { position: absolute; right: var(--s-4); bottom: var(--s-4); background: var(--cream); padding: var(--s-2) var(--s-4); font-family: var(--f-display); font-size: 1.15rem; box-shadow: 0 0 0 1px var(--rule), 0 4px 10px rgba(0,0,0,.2); }
.process-note { margin-top: var(--s-4); color: var(--ink-2); }
@media (max-width: 860px) { .process-in { grid-template-columns: minmax(0, 1fr); } .bells, .process-photo { grid-column: 1; } .process-photo .captioned img { aspect-ratio: 4 / 3; } }
@media (max-width: 480px) {
	.bells { background: var(--ground-2); padding: var(--s-5) var(--gutter); }
	.bells-img { display: none; }
	.bell-cards { position: static; gap: var(--s-2); }
	.bell-cards li { background: var(--cream); padding: var(--s-3) var(--s-4); box-shadow: inset 0 0 0 2px var(--brass); }
	.process-photo .sec-title { font-size: 2rem; }
}

/* ---------- 07 Areas: street-name plates on the gable ---------- */
.areas { padding-block: 0; }
.areas-in { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: var(--s-6); align-items: center; max-width: none; padding: 0 0 0 max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); }
.areas-text .sec-title { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; }
.areas-text { grid-column: 1; }
.gable { grid-column: 2; position: relative; }
.gable-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3% 3%; }
.gable .plates { position: absolute; left: 12%; right: 8%; top: 32%; bottom: 12%; align-content: center; }
.plate { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--s-1) var(--s-2); background: #FDFDFB; color: #111; text-decoration: none; font-weight: 700; font-size: clamp(.62rem, .3rem + .7vw, .9rem); letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.15; border-radius: 3px; box-shadow: inset 0 0 0 2px #FDFDFB, inset 0 0 0 4px #111, 0 2px 4px rgba(0,0,0,.35); position: relative; transition: transform .2s ease; }
.plate::before, .plate::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #9C9A92; }
.plate::before { left: 7px; } .plate::after { right: 7px; }
.plate:hover { transform: rotate(-1deg); color: var(--brick); }
.plates--inline { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: var(--s-3); }
@media (max-width: 960px) {
	.areas-in { grid-template-columns: minmax(0, 1fr); }
	.areas-text, .gable { grid-column: 1; }
	.gable { background: #6B3A2A url("../images/gable-640.webp") bottom / cover; padding: var(--s-5); }
	.gable-img { display: none; }
	.gable .plates { position: static; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s-3); }
	.plate { font-size: .85rem; min-height: 44px; }
}

/* ---------- Long read: "Questions at the door" ---------- */
.read--door { max-width: var(--w-std); margin: 0 auto; padding: var(--pad-sec) var(--gutter); border-top: 1px solid var(--rule); }
.read-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; margin-bottom: var(--s-8); }
.read-intro-text { grid-column: 1; }
.read-title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); }
.read-stand { font-size: 1.2rem; color: var(--ink-2); }
/* The doorbell index: an inline bell-push panel, never sticky. */
.doorbell { grid-column: 2; background: linear-gradient(160deg, #D9BE8A, #B8975F 60%, #9E7E48); padding: var(--s-4); border-radius: 3px; box-shadow: inset 0 0 0 1px #7E6136, inset 0 2px 0 rgba(255,255,255,.4), var(--shadow); }
.doorbell-label { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: #2E220F; margin: 0 0 var(--s-2); }
.doorbell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: none; }
.doorbell-list a { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr); align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--cream); color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.3; box-shadow: inset 0 0 0 1px #A88A55; }
.doorbell-list a:hover { color: var(--brick); }
.bell { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3D0, #C9AB78 45%, #7E6136); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.doorbell-n { font-family: var(--f-display); font-size: 1.15rem; color: var(--brick); }
@media (max-width: 900px) { .read-intro { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .read-intro-text, .doorbell { grid-column: 1; } }

/* The question plate: a cream door sign with an enamel number disc. */
.qch { margin-bottom: var(--s-9); }
.qplate { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5); border-radius: 3px; background:
	radial-gradient(circle at 12px 12px, #F6E3B4 0 1.5px, #A88A55 2.5px, #6E552D 4px, transparent 4.5px),
	radial-gradient(circle at calc(100% - 12px) 12px, #F6E3B4 0 1.5px, #A88A55 2.5px, #6E552D 4px, transparent 4.5px),
	radial-gradient(circle at 12px calc(100% - 12px), #F6E3B4 0 1.5px, #A88A55 2.5px, #6E552D 4px, transparent 4.5px),
	radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #F6E3B4 0 1.5px, #A88A55 2.5px, #6E552D 4px, transparent 4.5px),
	linear-gradient(180deg, #FDFBF6, #F1EBDF);
	box-shadow: inset 0 0 0 1px #BFB29C, inset 0 0 0 7px transparent, inset 0 0 0 8px #CDBFA6, inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 #D2C6B2, 0 8px 18px -12px rgba(22,21,19,.45); }
.qplate-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--brick); color: var(--cream); font-family: var(--f-display); font-size: 1.75rem; line-height: 1; box-shadow: inset 0 0 0 3px var(--brick), inset 0 0 0 5px var(--cream); }
.qplate-q { margin: 0; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.3rem); line-height: 1.15; }
.short { background: var(--cream); border-top: 4px solid var(--brick); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); box-shadow: 0 0 0 1px var(--rule); }
.short-label { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-2); }
.short-text { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; line-height: 1.45; margin: 0; }
.prose { max-width: var(--w-prose); }
.prose h3 { margin-top: var(--s-6); font-size: 1.5rem; }
.prose h4 { margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--brick); }
/* Layout A: plate across, short answer beside the column. */
.qch-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.qch-side { grid-column: 1; }
.qch-grid > .qch-body { grid-column: 2; }
/* Layout B: a photograph beside the plate and answer; flips side every other time. */
.qch-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: start; }
.qch-split > .qch-media { grid-column: 1; grid-row: 1; }
.qch-media .qch-fig { margin-bottom: var(--s-4); }
.qch-media .short { margin-bottom: 0; }
.qch-split > .qch-main { grid-column: 2; grid-row: 1; }
.qch--split.is-flip .qch-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.qch--split.is-flip .qch-split > .qch-media { grid-column: 2; }
.qch--split.is-flip .qch-split > .qch-main { grid-column: 1; }
/* Layout C: centred. */
.qch-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; margin-bottom: var(--s-5); }
.qch-row .qplate, .qch-row .short { margin: 0; }
.qch-row .short { display: flex; flex-direction: column; justify-content: center; }
.qch--row > .qch-fig { max-width: 900px; margin: 0 auto var(--s-5); }
.qch-centre { max-width: 760px; margin: 0 auto; }
.qch-centre .qplate { justify-content: center; text-align: left; }
.qch-centre .qch-body { margin-inline: auto; }
.qch-fig { margin: 0 0 var(--s-5); }
.qch-fig img { width: 100%; object-fit: cover; }
.qch-fig figcaption, .fch-fig figcaption { font-size: var(--t-small); color: var(--ink-2); padding-top: var(--s-2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-2); }
.qch-mod { margin-top: var(--s-6); }
@media (max-width: 900px) {
	.qch-grid, .qch-split, .qch--split.is-flip .qch-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
	.qch-side, .qch-grid > .qch-body, .qch-split > .qch-media, .qch-split > .qch-main, .qch--split.is-flip .qch-split > .qch-media, .qch--split.is-flip .qch-split > .qch-main { grid-column: 1; grid-row: auto; }
	.qch-row { grid-template-columns: minmax(0, 1fr); }
	.qplate { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
	.qplate-no { width: 42px; height: 42px; font-size: 1.4rem; }
}

/* ---------- Modules ---------- */
.mod { margin: var(--s-6) 0; }
.mod-label { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-3); }
/* The house-type switcher (signature). Tabs are three small front doors. */
.mod-house { background: linear-gradient(180deg, #FDFBF6, #F1EBDF); padding: var(--s-6); box-shadow: inset 0 0 0 1px #BFB29C, 0 10px 24px -14px rgba(22,21,19,.45); }
.house-panel { animation: qsk-fade .18s ease; }
@keyframes qsk-fade { from { opacity: .3; } to { opacity: 1; } }
.house-tabs { display: none; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.js .house-tabs { display: flex; }
.house-tab { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-height: 112px; padding: var(--s-5) var(--s-3) var(--s-4); border: 0; border-radius: 3px; cursor: pointer; color: #F4E3BD; font-family: var(--f-display); font-size: 1.35rem; position: relative; box-shadow: inset 0 0 0 4px rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.08); filter: saturate(.45) brightness(.8); transition: filter .18s ease, transform .18s ease; }
.house-tab::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0C8, #C9AB78 45%, #6E552D); }
.house-tab-door { order: 2; width: 64px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #E2C995, #A88A55); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.house-tab-door::after { display: none; }
.door--green { background: #24402F; } .door--blue { background: #1B3247; } .door--black { background: #1E1E1E; }
.house-tab[aria-selected="true"] { filter: none; transform: translateY(-4px); box-shadow: inset 0 0 0 4px rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.08), 0 0 0 3px var(--brass); }
.house-panel { padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.js .house-panel { border-top: 0; padding: 0; }
.js .house-panel[hidden] { display: none; }
.house-panel-name { font-family: var(--f-display); font-size: 1.35rem; margin: 0 0 var(--s-3); }
.js .house-panel-name { display: none; }
.house-panel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-5); margin: 0; }
.house-panel dt { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: var(--s-2); }
.house-panel dd { margin: 0; font-size: 1.08rem; }
.mod-cost { background: var(--ground-2); padding: var(--s-5); }
.cost-track { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; font-size: var(--t-small); margin-bottom: var(--s-4); }
.cost-line { flex: 1; height: 6px; background: linear-gradient(90deg, var(--brass), var(--brick)); border-radius: 3px; }
.cost-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-5); }
.cost-head { font-family: var(--f-display); font-size: 1.25rem; margin-bottom: var(--s-2); }
.cost-cols ul { margin: 0; padding-left: 1.1em; }
.cost-note { margin: var(--s-4) 0 0; font-size: var(--t-small); color: var(--ink-2); }
.mod-verdict { background: var(--brick); color: var(--cream); font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.3; padding: var(--s-4) var(--s-5); text-align: center; }
.mod-checks { padding: var(--s-5) var(--s-6); background: linear-gradient(180deg, #FDFBF6, #F1EBDF); border-top: 4px solid var(--brick); box-shadow: inset 0 0 0 1px #BFB29C, 0 8px 18px -12px rgba(22,21,19,.4); }
.mod-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.mod-checks li { position: relative; padding-left: 34px; }
.mod-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brick); box-shadow: inset 0 0 0 2px var(--brick), inset 0 0 0 3px var(--cream); }
.mod-checks li::after { content: ""; position: absolute; left: 8px; top: 8px; width: 5px; height: 9px; border-right: 2.5px solid var(--cream); border-bottom: 2.5px solid var(--cream); transform: rotate(40deg); }
.mod-table { margin-inline: 0; }
.mod-table table { width: 100%; border-collapse: collapse; background: var(--cream); font-size: 1rem; table-layout: fixed; }
.mod-table caption { text-align: left; font-family: var(--f-display); font-size: 1.25rem; padding-bottom: var(--s-3); caption-side: top; }
.mod-table th, .mod-table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.mod-table thead th { background: var(--green); color: #E9CF97; font-size: var(--t-small); letter-spacing: .06em; text-transform: uppercase; border-bottom: 3px solid var(--brass); }
.mod-table tbody th { font-weight: 700; }
/* Tables fit, never scroll: below 640px rows become labelled cards. */
@media (max-width: 640px) {
	.mod-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mod-table table, .mod-table tbody, .mod-table tr, .mod-table th, .mod-table td { display: block; width: 100%; }
	.mod-table tr { border-top: 3px solid var(--brick); margin-bottom: var(--s-3); }
	.mod-table tbody th { background: var(--ground-2); }
	.mod-table td::before { content: attr(data-label); display: block; font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--brick); }
}

/* ---------- FAQ ---------- */
.faq { background: var(--ground-2); padding-block: var(--pad-sec); }
.faq-title { text-align: center; margin-bottom: var(--s-6); }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s-5) var(--s-7); }
.faq-list { background: var(--cream); padding: var(--s-6); box-shadow: inset 0 0 0 1px #BFB29C; }
.faq-item { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-4); }
.faq-item h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.faq-item p { color: var(--ink-2); margin: 0; }

/* ---------- Quote band: the fascia beside the door ---------- */
.quote { background: #4A1A10 url("../images/gable-1024.webp") center / 140% auto; box-shadow: inset 0 0 0 999px rgba(52, 16, 8, .55); padding-block: var(--pad-sec); position: relative; }
.quote-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .45fr); gap: var(--s-6); align-items: center; max-width: var(--w-wide); }
.fascia { grid-column: 1; background: transparent url("../images/fascia-board-800.webp") center / 100% 100% no-repeat; padding: clamp(var(--s-6), 4vw, var(--s-8)) clamp(var(--s-5), 3vw, var(--s-7)); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); text-align: center; background-size: 100% 100%; }
.on-dark .fascia-big { font-family: var(--f-display); font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.75rem); line-height: 1.12; color: #E9CF97; text-shadow: 0 1px 0 #3A1208, 0 2px 6px rgba(0,0,0,.45); margin: 0 0 var(--s-4); }
.on-dark .fascia-small { font-family: var(--f-body); font-style: italic; font-size: 1.1rem; color: #E9CF97; margin: 0; }
.door { grid-column: 2; position: relative; background: #1C271F url("../images/door-640.webp") center / cover; padding: 0 var(--s-5) var(--s-6); border-radius: 160px 160px 0 0; box-shadow: inset 0 0 0 10px #18221B, inset 0 0 0 12px #2D3D31, 0 16px 34px -14px rgba(0,0,0,.65); }
.door-fan { height: 120px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--s-3); margin: 0 calc(-1 * var(--s-5)) var(--s-4); border-radius: 160px 160px 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.07), rgba(0,0,0,0) 70%); border-bottom: 10px solid #18221B; }
.on-dark .door-fan h2, .door-fan h2 { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); color: #E9CF97; margin: 0; text-align: center; }
.door-panel { background: var(--cream); padding: var(--s-3); box-shadow: inset 0 0 0 2px #A8874F; }
.door-knob { position: absolute; right: 18px; top: 55%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0C8, #C9AB78 45%, #6E552D); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.quote-aside { grid-column: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: var(--s-6) var(--s-5); font-family: var(--f-display); font-size: 1.5rem; line-height: 1.25; text-align: center; background: #5E2A1C url("../images/gable-640.webp") 62% 70% / 360% auto; margin-left: calc(-1 * var(--s-6)); box-shadow: inset 12px 0 18px -10px rgba(0,0,0,.6), inset 0 0 0 999px rgba(40, 14, 8, .35); }
.on-dark .quote-aside p { color: #F1DDB0; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.quote-aside .wa-link { font-family: var(--f-body); font-size: 1rem; }
.crm iframe { display: block; }
@media (max-width: 1100px) {
	.quote-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
	.quote-aside { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 820px) {
	.quote-in { grid-template-columns: minmax(0, 1fr); }
	.fascia, .door, .quote-aside { grid-column: 1; }
	.door { padding-inline: var(--s-3); border-radius: 110px 110px 0 0; }
	.door-fan { height: 96px; margin-inline: calc(-1 * var(--s-3)); border-radius: 110px 110px 0 0; }
	.door-panel { padding: var(--s-2); }
	.door-knob { display: none; }
}

/* ---------- Footer: the doorstep (a sandstone strip with brass number plaques) ---------- */
.site-foot { background: var(--ground); }
.doorstep { background: #B9A88C url("../images/step-1024.webp") center / cover; position: relative; box-shadow: inset 0 6px 0 rgba(255,255,255,.18), inset 0 -10px 0 rgba(60,45,30,.35); }
.doorstep::before { content: ""; position: absolute; inset: 0; background: rgba(240, 232, 216, .78); }
.foot-in { position: relative; max-width: var(--w-wide); margin: 0 auto; padding: var(--s-6) var(--gutter); display: grid; grid-template-columns: minmax(230px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); align-items: start; padding-block: var(--s-5); }
.brand--foot { color: var(--ink); align-items: flex-start; }
.brand--foot .mark { width: 40px; height: 50px; }
.brand--foot .brand-word { display: flex; flex-direction: column; gap: var(--s-1); font-size: 1.35rem; white-space: normal; max-width: 220px; }
.brand-place { font-family: var(--f-body); font-size: .82rem; color: var(--ink-2); }
.foot-no { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.plate-no { display: inline-block; background: linear-gradient(180deg, #2C2A26, #121110); color: #E9CF97; font-family: var(--f-display); font-size: .95rem; letter-spacing: 0; text-transform: none; padding: 2px var(--s-2); border-radius: 999px; box-shadow: inset 0 0 0 1px #A8874F; white-space: nowrap; }
.foot-group ul { list-style: none; margin: 0; padding: 0; }
.foot-group:first-of-type { grid-column: span 2; }
.foot-group:first-of-type ul { columns: 2; column-gap: var(--s-5); }
.foot-group li { margin: 0; }
.foot-group a, .foot-contact a { color: var(--ink); text-decoration: none; font-size: .95rem; display: inline-block; padding: 3px 0; }
.foot-group a:hover, .foot-contact a:hover { color: var(--brick); text-decoration: underline; }
.foot-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2) var(--s-6); font-family: var(--f-display); border-top: 1px solid rgba(22,21,19,.18); padding-top: var(--s-3); }
.foot-contact p { margin: 0; }
.foot-contact a { font-family: var(--f-display); font-size: 1.05rem; }
.foot-base { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-4) var(--gutter) var(--s-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); }
.foot-base p { margin: 0; color: var(--ink-2); }
.footer-builtby { font-family: var(--f-display); }
@media (max-width: 1100px) { .foot-in { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } .foot-contact { justify-content: flex-start; } .foot-contact a { overflow-wrap: anywhere; } }
/* Phones: two explicit columns, so the spanning services group and the full-width contact row use the whole width
   (auto-fit gave one 200px track plus an implicit auto track, squeezing the contact row to 200px). */
@media (max-width: 599px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-contact a { overflow-wrap: break-word; } }

/* ---------- WhatsApp widget + mobile bar ---------- */
.wa { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 120; }
.wa-pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-4); border: 0; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); }
.wa-pill svg { width: 22px; height: 22px; }
.wa-panel { position: absolute; right: 0; bottom: calc(100% + var(--s-3)); width: min(360px, calc(100vw - 2 * var(--s-4))); max-height: min(560px, calc(100dvh - 140px)); overflow-y: auto; background: var(--cream); border-top: 4px solid var(--wa); box-shadow: var(--shadow), 0 20px 40px -20px rgba(0,0,0,.5); padding: var(--s-4); }
.wa-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.wa-title { font-family: var(--f-display); font-size: 1.3rem; margin: 0; }
.wa-close { width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: var(--ink); }
.wa-note { font-size: var(--t-small); color: var(--ink-2); }
.wa-form label { display: block; font-weight: 600; font-size: .9rem; margin: var(--s-3) 0 var(--s-1); }
.wa-form input, .wa-form textarea, .wa-form select { width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid #A39A8B; border-radius: var(--radius); background: #fff; font: inherit; font-size: 1rem; color: var(--ink); }
.wa-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--s-3); }
.wa-form .btn { margin-top: var(--s-4); }
.mbar { display: none; }
@media (max-width: 767px) {
	.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); background: var(--cream); box-shadow: 0 -2px 12px rgba(0,0,0,.18); }
	.mbar--call { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); }
	.mbar a, .mbar button { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 0; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; }
	.mbar-quote { background: var(--brick); color: var(--cream); }
	.mbar-call { background: var(--ink); color: var(--cream); }
	.mbar-wa { background: var(--wa); color: #fff; }
	.wa { bottom: calc(56px + var(--s-3)); }
	.wa-pill { padding: var(--s-2); width: 48px; justify-content: center; }
	.wa-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.site-foot .foot-base { padding-bottom: calc(56px + var(--s-5)); }
}

/* ---------- Inner pages ---------- */
.crumbs ol { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-small); }
.crumbs li + li::before { content: "/"; color: var(--ink-2); margin-right: var(--s-2); }
.crumbs a { color: var(--ink-2); }
.ihero { max-width: var(--w-wide); margin: 0 auto; padding: clamp(var(--s-6), 5vw, var(--s-8)) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; border-bottom: 1px solid var(--rule); }
.ihero--photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ihero-text { grid-column: 1; }
.ihero-fig { grid-column: 2; margin: 0; padding: 6px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 1px var(--rule); }
.ihero-fig img { width: 100%; object-fit: cover; }
.ihero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem); line-height: 1.08; }
.ihero-lede { font-size: 1.2rem; color: var(--ink-2); max-width: 58ch; }
.ihero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin: var(--s-5) 0 0; }
@media (max-width: 860px) { .ihero--photo { grid-template-columns: minmax(0, 1fr); } .ihero-fig { grid-column: 1; } }
.hub-intro { max-width: 760px; margin: var(--s-7) auto 0; padding: 0 var(--gutter); text-align: center; font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.35; }
.spokes { padding-block: var(--pad-sec); }
.spoke-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-3); }
.spoke { display: block; height: 100%; padding: var(--s-5); background: var(--cream); text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--rule); border-left: 5px solid var(--brick); }
.spoke:hover { box-shadow: 0 0 0 1px var(--brick); }
.spoke-type { display: block; font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); }
.spoke-title { display: block; font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; margin: var(--s-2) 0; }
.spoke-sum { display: block; color: var(--ink-2); font-size: 1rem; }
.town-svc { padding-block: var(--s-7); text-align: center; }
.town-svc-line { font-size: 1.15rem; max-width: 70ch; margin: 0 auto; }
.nearby { padding-block: var(--s-8); }
.more-from { max-width: var(--w-prose); margin: 0 auto; padding: 0 var(--gutter) var(--s-8); text-align: center; }
.more-from-link { font-family: var(--f-display); font-size: 1.5rem; }

/* Guides: feature flow. */
.read--feature { max-width: 760px; margin: 0 auto; padding: var(--pad-sec) var(--gutter); }
.fch { margin-bottom: var(--s-8); }
.fch-n { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-4); }
.fch-n::before, .fch-n::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.fch-n span { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--brick); }
.fch-title { text-align: center; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
.fch-dek { text-align: center; font-style: italic; color: var(--ink-2); font-size: 1.15rem; max-width: 56ch; margin: 0 auto var(--s-5); }
.fch-fig { margin: 0 0 var(--s-5); }
.fch-fig img { width: 100%; object-fit: cover; }
.has-drop > p:first-child::first-letter { font-family: var(--f-display); float: left; font-size: 4.3em; line-height: .8; padding: .06em .08em 0 0; color: var(--brick); }

/* Answers: direct answer. */
.read--answer { max-width: 760px; margin: 0 auto; padding: var(--s-7) var(--gutter) var(--pad-sec); }
.answer-callout { background: var(--ink); color: var(--cream); padding: var(--s-6); margin-bottom: var(--s-7); border-left: 8px solid var(--brick); }
.answer-label { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--s-2); }
.answer-text { font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + .9vw, 1.65rem); line-height: 1.35; margin: 0; color: var(--cream); }
.ach { margin-bottom: var(--s-7); }
.ach-title { font-size: 1.8rem; border-bottom: 2px solid var(--brick); padding-bottom: var(--s-2); }
.ach-dek { font-weight: 600; }

/* Core and legal: designed article. */
.read--article { max-width: 780px; margin: 0 auto; padding: var(--pad-sec) var(--gutter); }
.art { margin-bottom: var(--s-7); text-align: left; }
.art .kicker { text-align: center; }
.art-title { text-align: center; }
.art-dek { text-align: center; color: var(--ink-2); font-style: italic; max-width: 60ch; margin: 0 auto var(--s-5); }
.art .prose { margin: 0 auto; }

/* Indexes. */
.idx { padding-block: var(--s-7) var(--pad-sec); max-width: var(--w-wide); }
.idx-cards, .idx-feature { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); }
.idx-card { display: block; height: 100%; background: var(--cream); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--rule); }
.idx-card .svc-frame { padding: 0; box-shadow: none; }
.idx-card-title { display: block; font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; padding: var(--s-4) var(--s-4) var(--s-1); }
.idx-card-sum { display: block; padding: 0 var(--s-4) var(--s-4); color: var(--ink-2); font-size: 1rem; }
.idx-card:hover .idx-card-title { color: var(--brick); }
.idx-jump ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.idx-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-1) var(--s-4); background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; font-weight: 600; font-size: .95rem; }
.idx-group { margin-bottom: var(--s-7); }
.idx-group-title { font-size: 1.7rem; border-bottom: 2px solid var(--ink); padding-bottom: var(--s-2); }
.idx-count { font-family: var(--f-body); font-size: .9rem; font-weight: 700; color: var(--brick); vertical-align: middle; }
.idx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--s-2) var(--s-6); }
.idx-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.idx-list a { font-family: var(--f-display); font-size: 1.2rem; text-decoration: none; }
.idx-list span { display: block; color: var(--ink-2); font-size: .95rem; }

/* Contact: form first. */
.contact { padding-block: clamp(var(--s-6), 4vw, var(--s-8)); }
.contact-head { max-width: 760px; margin-bottom: var(--s-6); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.door--contact { grid-column: 1; background-color: #1C271F; }
.door--contact .door-fan h2 { color: #E9CF97; }
.contact-card { grid-column: 2; background: var(--cream); padding: var(--s-6); box-shadow: 0 0 0 1px var(--rule); border-top: 4px solid var(--brick); }
.contact-card h2 { font-size: 1.6rem; }
.contact-card dl { margin: 0; display: grid; gap: var(--s-4); }
.contact-card dt { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); }
.contact-card dd { margin: 0; overflow-wrap: anywhere; }
.contact-card .wa-link { padding: 0; min-height: 0; font-size: 1.1rem; }
.contact-map { padding-bottom: var(--s-8); }
.map { height: 420px; background: var(--ground-2); box-shadow: 0 0 0 1px var(--rule); }
.map-note { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s-3); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .door--contact, .contact-card { grid-column: 1; } }

/* ---------- Motion (CSS only; hidden states only while JS runs; off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js-motion [data-reveal] > * { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
	.js-motion [data-reveal].is-in > * { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Stage 4 template elements (service and town mockups) ---------- */
.ihero-fig { position: relative; }
.ihero-fig .plate-cap { right: var(--s-4); bottom: var(--s-4); }
.street-plate { position: absolute; right: 8%; top: 12%; padding: var(--s-2) var(--s-6); background: radial-gradient(circle at 10px 50%, #9C9A92 0 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) 50%, #9C9A92 0 2.5px, transparent 3px), linear-gradient(180deg, #FFFFFF, #ECEBE6); color: #111; font-family: var(--f-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(.9rem, .6rem + .8vw, 1.35rem); border-radius: 4px; box-shadow: inset 0 0 0 3px #FDFDFB, inset 0 0 0 6px #111, 0 4px 10px rgba(0,0,0,.4); transform: rotate(-1deg); }
.house-band { max-width: var(--w-std); margin: var(--s-7) auto 0; padding: 0 var(--gutter); }
.house-band .sec-title { text-align: center; }
.house-band .mod-house { margin: 0; }
.spokes .sec-title { text-align: center; }
.spoke { position: relative; border-left: 0; background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 6px var(--cream), inset 0 0 0 7px #D9CFBE, 0 2px 0 rgba(22,21,19,.06); padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 6px); }
.spoke::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brick); }
.spoke::after { content: ""; position: absolute; right: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0C8, #C9AB78 45%, #6E552D); box-shadow: 0 calc(100% + 0px) 0 transparent; }
.nearby { background: #6B3A2A url("../images/gable-640.webp") center / 260% auto; box-shadow: inset 0 0 0 999px rgba(40, 14, 8, .65); padding-block: var(--s-7); max-width: none; }
.nearby-in { max-width: var(--w-std); margin: 0 auto; padding: 0 var(--gutter); }
.nearby .plate { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; min-height: 56px; box-shadow: inset 0 0 0 3px #FDFDFB, inset 0 0 0 5px #111, inset 0 -3px 0 5px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.45); }
.nearby .sec-title { color: var(--cream); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.town-svc .sec-title { font-family: var(--f-body); font-weight: 700; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.town-svc-line { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.4; }
.town-svc-line a { color: var(--brick); }
.ihero-brick { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #6B3A2A url("../images/gable-1024.webp") 50% 70% / 220% auto; box-shadow: inset 0 0 0 999px rgba(40, 14, 8, .18); }
.street-plate--big { position: static; font-size: clamp(1.2rem, .8rem + 1.6vw, 2.2rem); padding: var(--s-4) var(--s-6); }

/* Town hero: the street photograph runs to the right edge and fades into the page on its left. */
@media (min-width: 861px) {
	.ihero--town.ihero--photo { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); padding-right: 0; padding-left: max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); padding-block: 0; gap: 0; }
	.ihero--town .ihero-text { padding-block: var(--s-8); padding-right: var(--s-6); }
	.ihero--town .ihero-fig { padding: 0; box-shadow: none; background: none; height: 100%; }
	/* The brick fallback fills the row like the photo does; a 4:3 ratio here would derive its width from a tall row
	   (a long town H1) and push it past the viewport. */
	.ihero--town .ihero-fig.ihero-brick { aspect-ratio: auto; min-height: 520px; background: #6B3A2A url("../images/gable-1024.webp") 50% 70% / cover; box-shadow: inset 0 0 0 999px rgba(40, 14, 8, .18); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
	.ihero--town .ihero-fig img { height: 100%; min-height: 520px; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
	.ihero--town h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4rem); }
	.problem--town .problem-photos img { aspect-ratio: 4 / 5; }
}

.spoke-sum { display: none; }
.spoke-title { font-size: 1.25rem; }
.spoke { background:
	radial-gradient(circle at 10px 10px, #C9AB78 0 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) 10px, #C9AB78 0 2.5px, transparent 3px),
	radial-gradient(circle at 10px calc(100% - 10px), #C9AB78 0 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #C9AB78 0 2.5px, transparent 3px),
	var(--cream); }
.spoke::after { display: none; }
.nearby .plate { min-height: 72px; font-size: 1.4rem; border-radius: 6px; }
.nearby .sec-title { font-family: var(--f-body); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 1rem; }
@media (min-width: 861px) {
	.problem--town .problem-in { max-width: none; padding: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
	.problem--town .problem-photos img { aspect-ratio: 4 / 3; height: 100%; }
	.problem--town .problem-text { padding: var(--s-7) clamp(var(--s-5), 6vw, var(--s-9)); }
}