/* Beacon Basingstoke Roofing — built to mockup C. Tokens from .factory/config/design-dna.json. */

:root {
	--brand: #25378b;
	--brand-deep: #1a2766;
	--ink: #1b2240;
	--muted: #4a5375;
	--accent: #f5e925;
	--accent-deep: #e3d40c;
	--ground: #e6eaf5;
	--ground-alt: #eef1f9;
	--panel: #fff;
	--line: #c5cde6;
	--on-dark-soft: #c9d2f0;
	--wa: #1f7a4d;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
	--pad: clamp(48px, 7vw, 96px);
	--w-prose: 68ch; --w-mid: 900px; --w: 1140px; --w-wide: 1320px;
	--r-card: 14px; --r-btn: 10px; --r-field: 8px;
	--shadow: 0 1px 2px rgba(27, 34, 64, .06), 0 8px 24px rgba(27, 34, 64, .08);
	--head-h: 76px;
	--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tile: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.7 var(--font); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--brand); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.2vw, 40px); }
h3 { font-size: clamp(21px, 2vw, 26px); }
h4 { font-size: 19px; letter-spacing: -.01em; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 200; background: var(--accent); color: var(--brand); padding: var(--s2) var(--s4); border-radius: var(--r-btn); font-weight: 700; }
.skip:focus { top: var(--s3); }
.center { text-align: center; }
.muted { color: var(--muted); }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s3); }

.wrap { width: min(100% - 32px, var(--w)); margin-inline: auto; }
.wrap--wide { width: min(100% - 32px, var(--w-wide)); }
.wrap--mid { width: min(100% - 32px, var(--w-mid)); }
.wrap--prose { width: min(100% - 32px, var(--w-prose)); }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 50px; padding: 12px 24px; border-radius: var(--r-btn); font: 700 16px/1.2 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn .ico { width: 20px; height: 20px; }
.btn--accent { background: var(--accent); color: var(--brand); box-shadow: 0 2px 0 var(--accent-deep); }
.btn--accent:hover { background: #fff04a; color: var(--brand-deep); transform: translateY(-1px); }
.btn--ghost { background: var(--panel); color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover { background: var(--ground-alt); color: var(--brand-deep); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.ico { width: 22px; height: 22px; flex: none; }
.ico--lg { width: 46px; height: 46px; }
.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand); text-decoration: underline; }
.more .ico { width: 18px; height: 18px; color: var(--accent-deep); }

/* Tile course: a row of scalloped roof tiles, the brand device (STYLE-GUIDE §2). */
.tiles { height: calc(var(--tile) / 2 + 4px); background:
	radial-gradient(calc(var(--tile) / 2) calc(var(--tile) / 2) at 50% 0, var(--accent) 96%, transparent 100%) 0 4px / var(--tile) calc(var(--tile) / 2) repeat-x,
	linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 5px no-repeat; }
.tiles--hero { position: absolute; left: 0; right: 0; bottom: calc(var(--tile) / -2 - 4px); z-index: 2; filter: drop-shadow(0 2px 0 rgba(37, 55, 139, .18)); }
.tiles--rule { --tile: 30px; margin-top: var(--s8); opacity: .95; }
.tiles--foot { --tile: 46px; background:
	radial-gradient(calc(var(--tile) / 2) calc(var(--tile) / 2) at 50% 0, var(--ground) 96%, transparent 100%) 0 0 / var(--tile) calc(var(--tile) / 2) repeat-x; height: calc(var(--tile) / 2); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--line); }
.site-head__in { display: flex; align-items: center; gap: var(--s5); min-height: var(--head-h); }
.brand { flex: none; display: block; }
.brand img { width: 128px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--s5); flex: 1; justify-content: space-between; }
.nav__list { display: flex; list-style: none; gap: 2px; margin-inline: auto; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { display: block; padding: 10px 12px; color: var(--brand); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.nav__link:hover { background: var(--ground-alt); }
.sub-toggle { display: inline-grid; place-items: center; width: 28px; height: 36px; margin-left: -8px; border: 0; background: none; color: var(--brand); cursor: pointer; border-radius: 6px; }
.sub-toggle .ico { width: 16px; height: 16px; transition: transform .2s; }
.sub { position: absolute; top: 100%; left: -8px; min-width: 300px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s2); display: none; z-index: 120; }
.sub a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.sub a:hover, .sub a:focus-visible { background: var(--ground); color: var(--brand); }
.sub__all a { font-weight: 700; color: var(--brand); border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 8px 8px; }
.has-sub:hover .sub, .has-sub.is-open .sub, .has-sub:focus-within .sub { display: block; }
.has-sub.is-open .sub-toggle .ico { transform: rotate(180deg); }
.nav__cta { display: flex; align-items: center; gap: var(--s4); }
.nav__tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--brand); text-decoration: none; white-space: nowrap; font-size: 17px; }
.nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-btn); color: var(--brand); cursor: pointer; place-items: center; }
.nav-toggle .i-close { display: none; }

@media (max-width: 1079px) {
	.nav-toggle { display: inline-grid; }
	.nav { position: fixed; left: 0; right: 0; top: var(--head-h); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: var(--s4); padding: var(--s4) var(--s4) var(--s6); background: var(--brand-deep); display: none; }
	html.nav-open { overflow: hidden; }
	html.nav-open .nav { display: flex; }
	html.nav-open .nav-toggle .i-open { display: none; }
	html.nav-open .nav-toggle .i-close { display: block; }
	.nav__list { flex-direction: column; margin: 0; gap: 0; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.nav__link { color: #fff; font-size: 18px; padding: 14px 4px; flex: 1; }
	.nav__link:hover { background: none; color: var(--accent); }
	.sub-toggle { width: 48px; height: 48px; color: #fff; margin: 0; }
	.has-sub:hover .sub, .has-sub:focus-within .sub { display: none; }
	.sub, .has-sub.is-open .sub { position: static; min-width: 0; width: 100%; background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--s3) var(--s3); }
	.has-sub.is-open .sub { display: block; }
	.sub a { color: var(--on-dark-soft); padding: 9px 8px; font-size: 16px; }
	.sub a:hover, .sub a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
	.sub__all a { color: var(--accent); border-top-color: rgba(255, 255, 255, .15); }
	.nav__cta { flex-direction: column; align-items: stretch; }
	.nav__tel { color: #fff; justify-content: center; padding: 12px; font-size: 20px; }
	.nav__cta .btn { min-height: 52px; }
}

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); margin-bottom: var(--s4); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* Hero */
.hero { position: relative; background: var(--ground); margin-bottom: calc(var(--tile) / 2 + 4px); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--s6); min-height: 460px; }
.hero__copy { padding: var(--s7) 0 calc(var(--s7) + 8px); position: relative; z-index: 1; }
.hero__lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink); max-width: 46ch; }
.hero__meta { font-size: 14px; font-weight: 600; color: var(--muted); }
.hero__media { align-self: stretch; margin-right: calc((100vw - min(100vw - 32px, var(--w))) / -2); min-height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; border-radius: 0; }
.hero--home .hero__in { min-height: clamp(460px, 44vw, 560px); }
.hero--home h1 { font-size: clamp(40px, 5.2vw, 64px); }
.hero--article .hero__in { min-height: 380px; }
.hero--article h1, .hero--compact h1 { font-size: clamp(32px, 4vw, 50px); }
.hero--compact .hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.hero--compact .hero__copy { padding: var(--s7) 0 var(--s7); max-width: 820px; }
@media (max-width: 899px) {
	.hero__in { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
	.hero__copy { padding: var(--s6) 0 var(--s5); }
	.hero__media { margin: 0 -16px; height: 260px; }
	.hero--home .hero__in { min-height: 0; }
}

/* Trust row */
.trust { background: var(--ground); padding: var(--s7) 0 var(--s6); }
.trust__row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.trust__row li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--brand); font-weight: 600; font-size: 16px; line-height: 1.35; }
.trust__row li + li { border-left: 1px solid var(--line); }
@media (max-width: 899px) { .trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); } .trust__row li:nth-child(3) { border-left: 0; } }

/* Bands */
.band { padding: var(--pad) 0; }
.band--tight { padding: var(--s7) 0; }
.band--alt { background: var(--ground-alt); }
.band--center > .wrap > h2 { text-align: center; margin-bottom: var(--s6); }
.band__note { text-align: center; color: var(--ink); font-weight: 500; margin: var(--s5) 0 0; }
.band__more { text-align: center; margin: var(--s5) 0 0; }

/* Photo cards with a royal-blue label bar */
.pcards { list-style: none; display: grid; gap: var(--s5); }
.pcards--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pcards--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pcard__in { display: block; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--brand); background: var(--panel); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.pcard__in:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pcard__bar { background: var(--brand); padding: 10px 14px; text-align: center; }
.pcard__t { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; margin: 0; line-height: 1.3; }
.pcard__d { text-align: center; font-size: 15px; color: var(--muted); margin: var(--s3) var(--s2) 0; line-height: 1.55; }

/* Twin gable panels */
.gables { padding: var(--pad) 0; }
.gables__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--s5); }
.gable { position: relative; padding: calc(var(--s8) + 24px) clamp(20px, 3.4vw, 44px) var(--s7); border-radius: 0 0 var(--r-card) var(--r-card); clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 100%, 0 100%); }
.gable h2 { text-align: center; font-size: clamp(24px, 2.4vw, 30px); }
.gable--blue { background: var(--brand); }
.gable--pale { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.gable--pale::before { content: ""; position: absolute; inset: 0 0 auto; height: 108px; background: var(--brand); clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 108px, 0 108px); }
.gable--pale h2 { position: relative; color: #fff; margin-top: -10px; margin-bottom: var(--s6); }
.gable__list { list-style: none; }
.gable__list li { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px dashed rgba(201, 210, 240, .5); color: #fff; font-weight: 500; }
.gable__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--brand); }
.steps { list-style: none; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 150px); align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px dashed var(--line); }
.steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; font-size: 18px; }
.steps__t { color: var(--brand); line-height: 1.4; }
.steps__t strong { display: block; font-weight: 700; }
.steps__d { display: block; font-size: 15px; color: var(--muted); }
.steps__art img { width: 100%; height: 70px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 520px) { .steps li { grid-template-columns: 44px minmax(0, 1fr); } .steps__art { display: none; } }

/* Areas band + maps */
.areas-band { padding: var(--pad) 0; background: var(--ground-alt); }
.areas-band__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s6); align-items: center; }
.areas-band__sub { font-weight: 600; color: var(--brand); }
@media (max-width: 899px) { .areas-band__in { grid-template-columns: minmax(0, 1fr); } }
.map { width: 100%; height: 440px; border-radius: var(--r-card); border: 1px solid var(--line); background: #dfe5f3; z-index: 0; }
.map--town { height: 320px; }
.map--index, .map--contact { height: 480px; }
.map .leaflet-tooltip { font: 600 13px/1.2 var(--font); color: var(--brand); border: 0; box-shadow: none; background: rgba(255, 255, 255, .85); padding: 2px 6px; }
.map-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brand); }
.map-home { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; border: 3px solid var(--accent); }
.map-home svg { width: 18px; height: 18px; }
.map-pin--focus { width: 18px; height: 18px; background: var(--accent); box-shadow: 0 0 0 2px var(--brand); }
.map-fallback { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s4); }

/* Long read: A10 before/after pairs */
.lr { padding: var(--pad) 0; background: var(--ground); counter-reset: ch; }
.lr__head { max-width: 860px; margin: 0 auto var(--s7); text-align: center; }
.lr__title { font-size: clamp(30px, 3.6vw, 44px); }
.lr__intro { font-size: 18px; color: var(--ink); }
.lr__chips ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s5); }
.lr__chips a { display: inline-flex; gap: 6px; align-items: baseline; padding: 9px 16px 13px; background: var(--accent); color: var(--brand); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 8px 8px 50% 50% / 8px 8px 14px 14px; }
.lr__chips a b { font-weight: 800; font-size: 16px; }
.lr__chips a:hover { background: #fff04a; }
.ch { max-width: 1100px; margin: 0 auto var(--s8); }
.ch__head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }
.ch__tab { flex: none; display: grid; place-items: center; width: 74px; height: 80px; padding-bottom: 8px; background: var(--accent); color: var(--brand); font-weight: 800; font-size: 28px; border-radius: 10px 10px 50% 50% / 10px 10px 26px 26px; box-shadow: inset 0 -4px 0 var(--accent-deep); }
.ch__q { margin: 0; font-size: clamp(24px, 2.8vw, 35px); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s5); }
.pair > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6) clamp(20px, 3vw, 36px); min-width: 0; }
.pair h4 { font-size: 22px; margin-bottom: var(--s3); }
.pair__find h4 { font-style: italic; font-weight: 700; }
.pair__find { background: #f6f8fd !important; }
.pair__fix { border-left: 6px solid var(--brand) !important; }
.pair p:last-child, .pair ul:last-child { margin-bottom: 0; }
.pair ul { padding-left: 1.2em; margin-bottom: var(--s4); }
.lr__close { max-width: 860px; margin: 0 auto; font-size: 18px; text-align: center; }
.lr--light { background: var(--ground-alt); }
.lr--light .ch { margin-bottom: var(--s7); }

/* Before / after slider (signature moment) */
.ba { margin: var(--s5) 0 0; }
.ba__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); border-radius: var(--r-card); overflow: hidden; }
.ba__img { position: relative; }
.ba__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ba__tag { position: absolute; left: 12px; bottom: 12px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 6px; }
.ba__tag--r { left: auto; right: 12px; }
.ba__ctl { display: none; }
.ba figcaption, .ba + figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: var(--s3); }
.js .ba.is-live .ba__frame { display: block; aspect-ratio: 16 / 7; }
.js .ba.is-live .ba__img { position: absolute; inset: 0; }
.js .ba.is-live .ba__img img { height: 100%; aspect-ratio: auto; }
.js .ba.is-live .ba__img--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.js .ba.is-live .ba__ctl { display: block; position: absolute; inset: 0; }
.js .ba.is-live .ba__ctl::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1px; background: #fff; pointer-events: none; }
.js .ba.is-live .ba__ctl::after { content: "\2039\00a0\203A"; position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--brand); font: 800 22px/48px var(--font); text-align: center; box-shadow: 0 0 0 3px var(--brand); pointer-events: none; }
.js .ba.is-live input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.js .ba.is-live input[type=range]:focus-visible + * , .js .ba.is-live .ba__ctl:focus-within::after { box-shadow: 0 0 0 3px var(--brand), 0 0 0 6px #fff; }

/* Long-read modules */
.mod { margin-top: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) clamp(20px, 3vw, 32px); }
.mod h4 { margin-bottom: var(--s3); }
.mod--signs { background: #dfe5f6; border-color: #cbd3ec; display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); align-items: center; gap: var(--s5); }
.mod--signs h4 { font-style: italic; margin: 0; }
.mod--signs ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--s3) var(--s4); }
.mod--signs li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--brand); font-weight: 500; }
.mod--signs li .ico { width: 22px; height: 22px; color: #fff; background: var(--brand); border-radius: 50%; padding: 2px; }
@media (max-width: 699px) { .mod--signs { grid-template-columns: minmax(0, 1fr); } }
.mod--meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s5); align-items: center; }
.mod--meter h4 { font-style: italic; }
.mod--meter p { font-size: 15px; color: var(--muted); margin: 0; }
.meter { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-style: italic; color: var(--brand); font-size: 15px; }
.meter__track { position: relative; flex: 1; height: 4px; background: var(--brand); border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--brand) 0 2px, transparent 2px 10%); }
.meter__track::after { content: ""; position: absolute; right: -6px; top: -5px; border: 7px solid transparent; border-left-color: var(--brand); }
.meter__track i { position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; transform: translateY(-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--brand); }
.meter__label { grid-column: 2; font-size: 14px !important; text-align: center; }
@media (max-width: 699px) { .mod--meter { grid-template-columns: minmax(0, 1fr); } .meter__label { grid-column: 1; } }
.mod--steps ol { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s4); }
.mod--steps li { counter-increment: st; position: relative; padding: var(--s4) var(--s4) var(--s4) 56px; background: var(--ground-alt); border-radius: 10px; line-height: 1.45; }
.mod--steps li::before { content: counter(st); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; }
.mod--steps li strong { display: block; color: var(--brand); }
.mod--steps li span { font-size: 15px; color: var(--muted); }
.tbl { overflow-x: auto; max-width: 100%; }
.mod table, .prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.mod th, .mod td, .prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: center; vertical-align: top; }
.mod thead th, .prose thead th { color: var(--brand); font-weight: 800; background: var(--ground-alt); }
.mod tbody th, .prose tbody th { text-align: left; color: var(--brand); font-weight: 700; }
.mod--spec td { font-style: italic; }
.mod__note { font-size: 14px; color: var(--muted); margin: var(--s3) 0 0; }
.mod--spec h4, .mod--table h4 { text-align: center; }

/* FAQ */
.faq { padding: var(--pad) 0; }
.faq h2 { text-align: center; margin-bottom: var(--s5); }
.faq__i { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: var(--s2); }
.faq__i summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 14px 18px; cursor: pointer; list-style: none; color: var(--brand); font-weight: 700; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary .ico { transition: transform .2s; color: var(--brand); }
.faq__i[open] summary .ico { transform: rotate(180deg); }
.faq__a { padding: 0 18px 6px; }

/* Spoke link cards */
.spokes { padding: var(--pad) 0; background: var(--ground-alt); }
.spokes h2 { text-align: center; margin-bottom: var(--s6); }
.spokes__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--s6); }
.spokes__h { font-size: 20px; }
.links { list-style: none; display: grid; gap: var(--s3); }
.links a { display: grid; grid-template-columns: 120px minmax(0, 1fr) 20px; align-items: center; gap: var(--s4); background: var(--panel); border: 1px solid var(--brand); border-radius: 10px; overflow: hidden; text-decoration: none; padding-right: var(--s4); transition: transform .18s, box-shadow .18s; }
.links a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.links__img img { width: 120px; height: 76px; object-fit: cover; }
.links__t { font-weight: 700; color: var(--brand); line-height: 1.3; }
.qlinks { list-style: none; display: grid; gap: 6px; }
.qlinks a { display: block; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 500; line-height: 1.4; font-size: 15px; }
.qlinks a:hover { border-color: var(--brand); color: var(--brand); }
.qlinks--grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.qlinks__k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spokes__more { margin-top: var(--s5); }
.spokes__more summary { cursor: pointer; font-weight: 700; color: var(--brand); text-align: center; }
.qlinks--all { margin-top: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Quote band */
.quote { position: relative; background: var(--ground); padding: var(--pad) 0 0; overflow: hidden; border-top: 1px solid var(--line); }
.quote__in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); align-items: end; }
.quote__art img { width: 100%; max-width: 300px; mix-blend-mode: multiply; }
.quote__copy { padding-bottom: var(--s7); align-self: center; }
.quote__copy h2 { font-size: clamp(30px, 3.4vw, 42px); }
.quote__pts { list-style: none; display: grid; gap: 6px; margin-bottom: var(--s4); }
.quote__pts li { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--brand); }
.quote__pts .ico { width: 20px; height: 20px; }
.quote__call { font-weight: 600; }
.quote__call a { font-weight: 800; }
.quote__form { padding-bottom: var(--s7); align-self: center; }
.crm { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); min-height: 640px; box-shadow: var(--shadow); }
.crm__wait { position: absolute; inset: var(--s3); display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.crm iframe { position: relative; z-index: 1; min-height: 620px; }
@media (max-width: 1023px) { .quote__in { grid-template-columns: minmax(0, 1fr); } .quote__art { display: none; } .quote__copy { padding-bottom: 0; } }

/* Footer */
.site-foot { background: var(--brand-deep); color: var(--on-dark-soft); padding-bottom: 90px; }
.site-foot__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s7); padding: var(--s7) 0 var(--s6); }
.foot-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 10px 14px; }
.foot-logo img { width: 190px; }
.site-foot__brand p { margin: var(--s4) 0; font-size: 15px; }
.site-foot__contact { list-style: none; display: grid; gap: 8px; }
.site-foot__contact a { display: inline-flex; gap: 8px; align-items: center; color: #fff; text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.site-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--s5); }
.foot-h { color: var(--accent); font-size: 17px; letter-spacing: 0; margin-bottom: var(--s3); }
.site-foot__grid ul { list-style: none; display: grid; gap: 4px; }
.site-foot__grid a { color: var(--on-dark-soft); text-decoration: none; font-size: 15px; }
.site-foot__grid a:hover { color: #fff; text-decoration: underline; }
.site-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); border-top: 1px solid rgba(201, 210, 240, .2); padding-top: var(--s5); font-size: 14px; }
.site-foot__base p { margin: 0; }
.site-foot__base a { color: #fff; }
@media (max-width: 899px) { .site-foot__in { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .site-foot { padding-bottom: var(--s5); } }

/* One dark-ground correction mechanism (§7c.3). Outranks band-level colour rules. */
.on-dark, .on-dark p, .on-dark li { color: var(--on-dark-soft); }
.on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark a:not(.btn) { color: #fff; }
.on-dark :focus-visible { outline-color: var(--accent); }
.gable--blue.on-dark li { color: #fff; }

/* Mobile CTA bar: visible from the first pixel, no scroll threshold (§7d.4). */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--brand-deep); box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); }
.mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; border-radius: var(--r-btn); font-weight: 800; text-decoration: none; }
.mbar__call { background: #fff; color: var(--brand); }
.mbar__quote { background: var(--accent); color: var(--brand); }
@media (min-width: 900px) { .mbar { display: none; } }

/* WhatsApp pill + form */
.wa { position: fixed; right: 16px; bottom: 84px; z-index: 95; }
@media (min-width: 900px) { .wa { bottom: 20px; } }
.wa__fab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--wa); color: #fff; font: 700 16px var(--font); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.wa__fab .ico { width: 26px; height: 26px; }
@media (max-width: 599px) { .wa__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wa__fab { padding: 0; width: 56px; justify-content: center; } }
.wa__panel { position: absolute; right: 0; bottom: 64px; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 180px)); overflow-y: auto; background: var(--panel); border-radius: var(--r-card); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); padding: var(--s4) var(--s5) var(--s5); }
.wa__panel[hidden] { display: none; }
.wa__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.wa__head h2 { font-size: 19px; margin: 0; }
.wa__x { width: 44px; height: 44px; border: 0; background: none; color: var(--brand); cursor: pointer; display: grid; place-items: center; }
.wa__form p { margin: 0 0 var(--s3); }
.wa__form label { display: block; font-size: 14px; font-weight: 600; color: var(--brand); margin-bottom: 4px; }
.wa__form input, .wa__form textarea, .wa__form select { width: 100%; font: 400 16px var(--font); color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; }
.wa__form input:focus, .wa__form textarea:focus, .wa__form select:focus { outline: 3px solid var(--brand); outline-offset: 0; }
.wa__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.btn--wa { width: 100%; background: var(--wa); color: #fff; }
.btn--wa:hover { background: #17633d; color: #fff; }
.is-hidden-wa .wa { opacity: 0; pointer-events: none; transform: translateY(12px); }
.wa { transition: opacity .2s, transform .2s; }

/* Prose: guides (feature flow), answers (direct), articles */
.prose { font-size: 18px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); font-size: 22px; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: var(--s4); }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--brand); font-weight: 700; }
.prose blockquote, .prose .pull { margin: var(--s6) 0; padding: var(--s5) var(--s6); background: var(--panel); border-left: 6px solid var(--accent); border-radius: 0 var(--r-card) var(--r-card) 0; font-size: 21px; font-weight: 600; color: var(--brand); line-height: 1.45; }
.prose .callout { margin: var(--s5) 0; padding: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.prose .callout > :last-child { margin-bottom: 0; }
.prose table { margin: var(--s5) 0; background: var(--panel); }
.prose .tbl { margin: var(--s5) 0; }
.prose a { font-weight: 600; }
.flow { padding: var(--s7) 0 var(--pad); counter-reset: fch; }
.prose--flow > p:first-of-type::first-letter { float: left; font-size: 4.2em; line-height: .85; font-weight: 800; color: var(--brand); margin: 6px 12px 0 0; }
.prose--flow h2 { counter-increment: fch; text-align: center; padding-top: 52px; position: relative; }
.prose--flow h2::before { content: counter(fch, decimal-leading-zero); position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 52px; height: 40px; padding-bottom: 4px; background: var(--accent); color: var(--brand); font-size: 18px; border-radius: 6px 6px 50% 50% / 6px 6px 14px 14px; }
.flow__cta { margin-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); background: var(--brand); color: #fff; border-radius: var(--r-card); padding: var(--s5) var(--s6); }
.flow__cta p { margin: 0; flex: 1 1 320px; }
.direct { padding: var(--s6) 0 var(--pad); }
.direct__answer { background: var(--brand); color: #fff; border-radius: var(--r-card); padding: var(--s5) var(--s6); font-size: 19px; font-weight: 600; line-height: 1.55; margin-bottom: var(--s6); border-bottom: 8px solid var(--accent); }
.direct__answer p { margin-bottom: var(--s3); color: #fff; }
.direct__answer p:last-child { margin-bottom: 0; }
.direct__label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; font-weight: 800; }
.prose--direct h2 { font-size: 26px; padding-left: 14px; border-left: 5px solid var(--accent); }
.direct__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s6); padding: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.direct__cta p { margin: 0; font-weight: 600; color: var(--brand); flex: 1 1 280px; }
.art { padding: var(--s7) 0 var(--pad); }
.prose--art h2 { text-align: center; }
.prose--art h2::before { content: ""; display: block; width: 60px; height: 14px; margin: 0 auto var(--s3); background: radial-gradient(7px 7px at 50% 0, var(--accent) 96%, transparent 100%) 0 0 / 14px 7px repeat-x, linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 3px no-repeat; }
.prose--center { text-align: center; }

/* Related / up-link */
.related { padding: var(--s7) 0; background: var(--ground-alt); }
.related__hub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s4); padding: var(--s5); background: var(--brand); border-radius: var(--r-card); text-decoration: none; margin-bottom: var(--s6); }
.related__k { flex-basis: 100%; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.related__t { color: #fff; font-size: 22px; font-weight: 800; flex: 1; }
.related__hub .ico { color: var(--accent); }
.related__h { font-size: 24px; }

/* Chips, index features, town groups */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--brand); border-radius: 8px; text-decoration: none; color: var(--brand); font-weight: 600; font-size: 15px; }
.chips a:hover { background: var(--brand); color: #fff; }
.chips .ico { width: 18px; height: 18px; }
.chips--center { justify-content: center; }
.chips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.chips--grid a { justify-content: flex-start; }
.chips small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
.chips a:hover small { color: var(--on-dark-soft); }
.nearby { padding: 0 0 var(--s7); }
.nearby__h { font-size: 22px; }
.tgroup { margin-bottom: var(--s6); }
.tgroup__h, .cluster__h { font-size: 24px; display: flex; align-items: center; gap: var(--s3); }
.count { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: var(--brand); font-size: 15px; letter-spacing: 0; }
.feat { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s5); margin-bottom: var(--s6); }
.feat a { display: flex; flex-direction: column; height: 100%; background: var(--panel); border: 1px solid var(--brand); border-radius: var(--r-card); overflow: hidden; text-decoration: none; }
.feat__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feat__k { padding: var(--s3) var(--s4) 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.feat__t { padding: 4px var(--s4) var(--s4); font-weight: 800; color: var(--brand); font-size: 18px; line-height: 1.3; }
.jump { margin-bottom: var(--s6); }
.cluster { margin-bottom: var(--s6); scroll-margin-top: calc(var(--head-h) + 16px); }

/* Town page local panel */
.local { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s5); }
.local__dist { display: inline-block; margin: var(--s3) 0 0; background: var(--accent); color: var(--brand); font-weight: 700; padding: 4px 12px; border-radius: 6px; font-size: 15px; }
.local__panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); }
.local__panel h2 { font-size: 28px; }

/* Contact */
.contact { padding: var(--s7) 0 var(--pad); }
.contact__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.contact__form h2, .contact__card h2 { font-size: 26px; }
.contact__card { background: var(--brand); border-radius: var(--r-card); padding: var(--s6); }
.contact__card ul { list-style: none; display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.contact__card li { display: flex; gap: 10px; align-items: flex-start; }
.contact__card a { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
@media (max-width: 899px) { .contact__in { grid-template-columns: minmax(0, 1fr); } }

/* Motion: reveal on scroll, only under .js-motion (§7c.6), CSS only (§7c.7). */
@media (prefers-reduced-motion: no-preference) {
	.js-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .45s ease-out, transform .45s ease-out; }
	.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
	.js-motion .tiles--hero { transform-origin: left; animation: tiles-in .7s ease-out both; }
	@keyframes tiles-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.leaflet-container * { transition: none !important; }
}

/* Fidelity loop 1 (fresh-judge findings, 2026-10-09) */
.site-head { background: rgba(238, 241, 249, .97); }
.hero { margin-bottom: 0; }
.tiles--hero { bottom: 0; }
.hero__copy { padding-bottom: calc(var(--s7) + 26px); }
.trust { padding: var(--s8) 0 var(--s7); }
.trust__row li { font-size: 18px; gap: var(--s4); padding: var(--s4); }
.trust .ico--lg { width: 66px; height: 66px; stroke-width: 1.5; }
.gable__ico { width: 54px; height: 54px; }
.gable__ico .ico { width: 28px; height: 28px; }
.steps li { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 210px); }
.steps__art img { height: 96px; }
.areas-band { position: relative; overflow: hidden; }
.areas-band__copy { position: relative; z-index: 1; padding-bottom: 210px; }
.areas-band__art { position: absolute; left: 0; bottom: -10px; width: 300px; mix-blend-mode: multiply; pointer-events: none; }
.map .leaflet-tile-pane { filter: grayscale(1) sepia(.25) hue-rotate(190deg) saturate(1.8) brightness(1.06) contrast(.92); }
.map { border-color: var(--brand); }
.quote { padding-top: 0; }
.quote__in { align-items: stretch; }
.quote__art { display: flex; align-items: flex-end; margin-left: calc((100vw - min(100vw - 32px, var(--w))) / -2); }
.quote__art img { max-width: 420px; width: 100%; }
.quote__copy, .quote__form { padding-top: var(--pad); }
.site-foot { position: relative; }
.site-foot__art { position: absolute; right: 0; bottom: 64px; width: min(420px, 40vw); opacity: .9; pointer-events: none; }
.site-foot__in { position: relative; z-index: 1; }
.site-foot__base { position: relative; z-index: 1; width: 100%; max-width: none; padding: var(--s4) max(16px, calc((100vw - var(--w-wide)) / 2)); background: var(--ground); color: var(--brand); border-top: 0; }
.site-foot .site-foot__base p { color: var(--brand); }
.site-foot .site-foot__base a:not(.btn) { color: var(--brand); font-weight: 700; }
@media (max-width: 899px) { .areas-band__art { display: none; } .areas-band__copy { padding-bottom: 0; } .site-foot__art { display: none; } .quote__art { display: none; } }
.areas-band__art { position: static; width: 260px; margin: var(--s4) 0 calc(var(--pad) * -1) -16px; mix-blend-mode: normal; }
.areas-band__copy { padding-bottom: 0; }
.quote__art img, .steps__art img { mix-blend-mode: normal; }
.bbr-pin { background: none; border: 0; }
@media (min-width: 900px) { .site-foot__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.site-foot__contact a { font-size: 15px; overflow-wrap: normal; word-break: normal; }
@media (max-width: 400px) { .site-foot__contact a { font-size: 14px; } }
.map-pin { display: block; }
.areas-band__art { width: 340px; margin: var(--s6) 0 0; }

/* Fidelity loop 3 (fresh-judge findings, 2026-10-09) */
.hero--home .hero__in, .hero--page .hero__in { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); }
@media (min-width: 900px) {
	.hero--home, .hero--page { overflow: hidden; }
	.hero--home .hero__media, .hero--page .hero__media { position: absolute; inset: 0 0 0 30%; margin: 0; }
	.hero--home .hero__media::after, .hero--page .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, rgba(230, 234, 245, .82) 18%, rgba(230, 234, 245, 0) 42%); }
	.hero--home .hero__copy, .hero--page .hero__copy { grid-column: 1; }
}
.trust .ico--lg { width: 76px; height: 76px; }
.trust__row li { font-size: 19px; }
.pcard__d { font-size: 16px; color: var(--ink); }
.band--center > .wrap > h2 { font-size: clamp(30px, 3.4vw, 42px); }
.gable--blue { display: flex; flex-direction: column; }
.gable--blue .gable__list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.gable--pale { background: var(--ground-alt); }
.gable--pale::before { height: 124px; clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 124px, 0 124px); }
.gable--pale h2 { margin-top: 2px; margin-bottom: var(--s7); }
.areas-band { padding: 0; }
.areas-band__in { position: relative; display: block; width: 100%; max-width: none; min-height: 600px; }
.areas-band .map--band { position: absolute; inset: 0; height: 100%; border: 0; border-radius: 0; }
.areas-band__copy { position: relative; z-index: 500; width: min(460px, calc(100% - 32px)); margin-left: max(16px, calc((100vw - var(--w)) / 2)); padding: var(--s6); margin-top: var(--s8); margin-bottom: var(--s8); background: rgba(238, 241, 249, .94); border-radius: var(--r-card); box-shadow: var(--shadow); }
.areas-band__art { width: 280px; margin: var(--s4) 0 0; }
@media (max-width: 899px) { .areas-band__in { min-height: 0; } .areas-band .map--band { position: relative; height: 380px; } .areas-band__copy { margin: 0 auto; width: 100%; border-radius: 0; box-shadow: none; } }
.crm { min-height: 560px; }
.crm iframe { min-height: 540px; height: 540px; }
.foot-phone { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; font-size: 28px; font-weight: 800; text-decoration: none; margin-top: var(--s3); }
.foot-phone .ico { width: 28px; height: 28px; color: var(--accent); }
.gable--pale::before { height: 150px; clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 150px, 0 150px); } .gable--pale h2 { margin-top: 0; padding-top: 4px; margin-bottom: calc(var(--s7) + 12px); }

/* Template Fidelity (service + town), 2026-10-09 */
.gable--pale::before { height: 70px; clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 70px, 0 70px); }
.gable--pale h2 { color: var(--brand); margin-top: 0; margin-bottom: var(--s6); }
.bigcards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.bigcards a { display: grid; grid-template-columns: 180px minmax(0, 1fr) 24px; align-items: center; gap: var(--s4); background: var(--panel); border: 1px solid var(--brand); border-radius: var(--r-card); overflow: hidden; text-decoration: none; padding-right: var(--s4); min-height: 110px; transition: transform .18s, box-shadow .18s; }
.bigcards a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bigcards__img img { width: 180px; height: 110px; object-fit: cover; }
.bigcards__t { font-weight: 800; color: var(--brand); font-size: 18px; line-height: 1.3; }
@media (max-width: 520px) { .bigcards a { grid-template-columns: 110px minmax(0, 1fr) 20px; } .bigcards__img img { width: 110px; height: 100px; } }
.hero--town .hero__media { margin-right: calc((100vw - min(100vw - 32px, var(--w))) / -2); }
.hero--town h1 { font-size: clamp(40px, 5vw, 64px); }
.local__map { position: relative; }
.local__dist { position: absolute; left: 12px; bottom: 12px; z-index: 500; margin: 0; box-shadow: var(--shadow); }
.quote { padding-top: 0; }
.quote__copy, .quote__form { padding-top: var(--s7); padding-bottom: var(--s7); }
.quote__art img { max-width: 320px; }
.feat { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }