/* Fairview Folkestone Roofing: "the fair verdict" (mockup A). Built fresh at Stage 3 from mockup/sections/hd/ and
   STYLE-GUIDE.md. Light, photo-led: white and cool-grey grounds, ink type, brand orange for marks and stamps only;
   orange TEXT is #BA4C1D and button grounds #C6511F (contrast, design-dna.json). No dark section grounds. */

:root {
	--orange: #E06A37;
	--orange-btn: #C6511F;
	--orange-text: #BA4C1D;
	--orange-deep: #A6441A;
	--orange-tint: #FCEFE8;
	--ink: #221F20;
	--muted: #5C585A;
	--white: #FFFFFF;
	--grey: #F4F5F7;
	--rule: #DDDCDC;
	--field: #8E8A8C;
	--display: 'Figtree', 'Figtree Fallback', Arial, sans-serif;
	--sans: 'Noto Sans', 'Noto Sans Fallback', Arial, sans-serif;
	--stamp: 'Rokkitt', Georgia, serif;
	--wrap: 1240px;
	--gut: 32px;
	--pad: 88px;
	--r: 6px;
	--hdr: 80px;
	--shadow: 0 8px 24px rgba(34, 31, 32, .10);
}
@media (max-width: 759px) { :root { --gut: 16px; --pad: 56px; --hdr: 64px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 18px/1.65 var(--sans); overflow-x: clip; }
@media (max-width: 759px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--flip { transform: scaleX(-1); }
.num { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap--read { max-width: calc(760px + 2 * var(--gut)); }
.band { padding-block: var(--pad); }
.band--grey { background: var(--grey); }
.h2 { font: 700 clamp(26px, 2.25vw, 32px)/1.15 var(--display); letter-spacing: -.01em; }
.h2--sm { font-size: clamp(22px, 1.75vw, 25px); font-weight: 700; }
.kicker { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.kicker--c { text-align: center; }

/* links: orange text, underline that thickens on hover */
.lnk { color: var(--orange-text); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness .15s; }
.lnk:hover { text-decoration-thickness: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 4px; border: 1.5px solid transparent; font: 500 17px/1.2 var(--display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn--primary { background: var(--orange-btn); color: #fff; }
.btn--primary:hover { background: var(--orange-deep); }
.btn--line { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--grey); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.btn--block { width: 100%; }
.btn .num { font-weight: 500; }

/* ------------------------------------------------------------------ header (HD header.png) */
.hdr { position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 1px solid var(--rule); }
.hdr__bar { display: flex; align-items: center; gap: 24px; height: var(--hdr); }
.hdr__logo { flex: none; display: block; }
.hdr__logo img { width: 150px; height: auto; }
.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__a { display: block; padding: 10px 12px; font: 500 16px/1.2 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: 4px; }
.nav__a:hover, .nav__a[aria-current] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav__caret { display: grid; place-items: center; width: 28px; height: 44px; margin-left: -10px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.nav__caret .ico { width: 16px; height: 16px; transition: transform .15s; }
.nav__caret[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__item--m { display: none; }
.dd { position: absolute; top: calc(100% + 14px); left: -12px; z-index: 95; display: none; min-width: 520px; padding: 20px 24px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--orange); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow); }
.dd.is-open, .nav__item--dd:hover .dd, .nav__item--dd:focus-within .dd { display: block; }
.nav__item--dd::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.dd__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.dd__list a { display: block; padding: 8px 0; font: 500 15px/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.dd__list a:hover { color: var(--orange-text); text-decoration: underline; }
.dd__all { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.dd__all a { color: var(--orange-text); font-weight: 600; font-size: 15px; }
.hdr__phone { margin-left: 8px; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hdr__wa, .hdr__cta { flex: none; }
.hdr__icon, .hdr__burger { display: none; }

@media (max-width: 1259px) { .hdr__phone { display: none; } }
@media (max-width: 1159px) { .hdr__wa { display: none; } .hdr__bar { gap: 16px; } .nav__a { padding-inline: 9px; } }
@media (max-width: 1023px) {
	.hdr__bar { gap: 8px; }
	.hdr__logo img { width: 120px; }
	.hdr__cta { margin-left: auto; padding-inline: 14px; font-size: 15px; }
	.hdr__icon, .hdr__burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0; }
	.hdr__icon .ico, .hdr__burger .ico { width: 24px; height: 24px; }
	.hdr__burger .ico-close { display: none; }
	.hdr__burger[aria-expanded="true"] .ico-open { display: none; }
	.hdr__burger[aria-expanded="true"] .ico-close { display: block; }
	/* §7b.5: bounded, scrollable panel; page locked; submenu restyled for mobile; 44px caret target */
	.nav { position: fixed; left: 0; right: 0; top: var(--hdr); margin: 0; display: none; max-height: calc(100dvh - var(--hdr)); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 16px 24px rgba(34, 31, 32, .12); }
	.nav.is-open { display: block; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 24px; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
	.nav__a { flex: 1; padding: 14px 0; font-size: 18px; }
	.nav__caret { width: 44px; height: 48px; margin: 0; }
	.nav__item--m { display: flex; }
	.nav__item--m .nav__a { color: var(--orange-text); font-weight: 600; }
	.nav__item--dd::after { display: none; }
	.dd, .nav__item--dd:hover .dd, .nav__item--dd:focus-within .dd { position: static; display: none; min-width: 0; width: 100%; padding: 0 0 12px 12px; border: 0; border-radius: 0; box-shadow: none; background: none; }
	.dd.is-open { display: block !important; }
	.dd__list { grid-template-columns: 1fr; }
	.dd__list a { padding: 10px 0; font-size: 16px; }
	.dd__all { border: 0; margin: 0; padding: 4px 0 0; }
	html.nav-open { overflow: hidden; }
}
/* 2026-11-09c: below 600px the sticky quick bar (footer.php .mbar, printed on every page, shown below 1024px) carries
   "Get a quote", so the header drops its quote button and the phone icon takes the free space. */
@media (max-width: 599px) {
	.hdr .hdr__cta { display: none; }
	.hdr .hdr__icon { margin-left: auto; }
}
@media (max-width: 380px) { .hdr__logo img { width: 104px; } .hdr__cta { padding-inline: 10px; font-size: 14px; } }

/* ------------------------------------------------------------------ hero (redesign 2026-11-09c: the fair verdict, at a glance) */
/* Text left; right, one verdict unit: two equal-width close defect strips, each stamped on the photo (REPAIR, REPLACE), the
   watermark lower-right, the verdict caption as text under each. From 900px the text column stretches to the unit's height
   (kicker level with the first photo's top, tick line level with the last caption), so neither column has a dead band.
   Boxes 640 x 232 at 1366 (files 1427 and 1306 wide: >= 2x); phones 358 x 150 at DPR 2. */
.hero { padding-block: 26px 8px; }
.hero__k { margin-bottom: 14px; }
.hero__h { font: 800 clamp(54px, 7.2vw, 100px)/.98 var(--display); letter-spacing: -.035em; max-width: 5.6em; }
.hero__h::after { content: ""; display: block; width: 1.15em; height: 8px; margin-top: .26em; background: var(--orange); }
.hero__sub { margin-top: 22px; max-width: 25.5em; font: 500 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); color: var(--ink); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
/* fixed stamp and button boxes: the Rokkitt / Figtree swap cannot move anything (CLS 0) */
.hero__btn { width: 232px; min-height: 58px; padding: 14px 0; font-size: 19px; font-weight: 600; }
.hero__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font: 500 17px/1.2 var(--sans); }
.hero__call-k { color: var(--muted); }
.hero__call .num { font-size: 23px; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.hero__call:hover .num { text-decoration-thickness: 3px; }
.hero .hero__tick { display: flex; margin: 22px 0 0; }
.hero__v { display: grid; gap: 16px; margin-top: 30px; }
.hero__f { position: relative; margin: 0; }
.hero__img { width: 100%; height: auto; aspect-ratio: 640 / 232; object-fit: cover; border-radius: var(--r); }
.hero__stw { position: absolute; top: 14px; right: 14px; display: block; line-height: 0; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(34, 31, 32, .18); transform: rotate(var(--rot, -5deg)); }
.hero .hero__st { transform: none; }
/* REPAIR sits top-left over the dark roofs behind the ridge; REPLACE top-right on the sky */
.hero__f--repair .hero__stw { right: auto; left: 14px; }
.hero__st .stamp__w { box-sizing: border-box; width: 4.6em; height: 1.15em; padding: 2px 0 0; text-align: center; white-space: nowrap; font-size: clamp(22px, 2vw, 28px); }
.hero__f--replace .hero__st .stamp__w { width: 5.55em; }
.hero__cap { margin-top: 7px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.hero__cap strong { font-weight: 600; color: var(--ink); }
.tickline { display: inline-flex; align-items: center; gap: 10px; margin-left: 12px; font: 400 16px/1.3 var(--sans); color: var(--ink); }
.tickline .ico { width: 26px; height: 26px; color: var(--orange); stroke-width: 3; }
.tab { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 120px); padding: 6px 12px; background: #fff; border-radius: 4px; font: 400 15px/1.35 var(--sans); color: var(--ink); box-shadow: 0 1px 2px rgba(34, 31, 32, .12); }
.tab strong { font-weight: 600; }
@media (min-width: 900px) {
	.hero { padding-block: 40px 16px; }
	.hero__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: stretch; }
	.hero__m { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
	.hero__m > * { margin-top: 0 !important; }
	.hero__k { margin-bottom: 0; line-height: 1; }
	.hero .hero__tick { margin-bottom: 0; }
	.hero__v { margin-top: 0; align-content: start; }
}
@media (min-width: 900px) and (max-width: 1199px) { .hero__img { aspect-ratio: 478 / 190; } }
@media (min-width: 1200px) {
	.hero__g { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 64px; }
}
@media (max-width: 759px) {
	.hero { padding-top: 20px; }
	.hero__k { margin-bottom: 10px; font-size: 12px; }
	.hero__sub { margin-top: 18px; font-size: 18px; }
	.hero__ctas { gap: 6px 20px; margin-top: 24px; }
	.hero__btn { width: 100%; }
	.hero .hero__tick { justify-content: flex-start; margin-top: 12px; font-size: 15px; }
	.hero__v { gap: 14px; margin-top: 26px; }
	.hero__img { aspect-ratio: 358 / 200; }
	.hero__stw { top: 8px; right: 8px; }
	.hero__f--repair .hero__stw { right: auto; left: 8px; }
	.hero__st .stamp__w { font-size: 19px; }
	.hero__cap { margin-top: 5px; font-size: 13px; }
	.tickline { grid-column: 1 / -1; justify-content: center; margin: 4px 0 0; font-size: 15px; }
	.tab { font-size: 14px; }
}

/* ------------------------------------------------------------------ trust (HD trust.png) */
.trust { padding-block: 30px 40px; }
.trust__line { max-width: 880px; margin-inline: auto; text-align: center; font: 600 clamp(21px, 2vw, 27px)/1.5 var(--display); letter-spacing: -.005em; }
.u-mark { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 7px; }

/* ------------------------------------------------------------------ verdict stamp (STYLE-GUIDE §6.1) */
.stamp { position: relative; display: inline-grid; place-items: center; padding: 5px; color: var(--orange); border: 3px solid currentColor; border-radius: 3px; transform: rotate(var(--rot, -5deg)); background: rgba(255, 255, 255, .0);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%; will-change: transform; } /* 2026-11-09: own layer so WebKit repaints the masked word when Rokkitt arrives (empty stamps on the tunnel) */
.stamp::before { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 2px; }
.stamp__w { display: block; padding: 2px 14px 0; font: 800 30px/1.08 var(--stamp); letter-spacing: .04em; }
.stamp--replace { color: var(--ink); }
.js-motion .vrow .stamp { opacity: 0; transform: rotate(var(--rot)) scale(1.15); transition: opacity .26s ease-out, transform .26s ease-out; }
.js-motion .vrow.is-in .stamp { opacity: 1; transform: rotate(var(--rot)) scale(1); }

/* ------------------------------------------------------------------ verdict rows (HD verdict.png, the signature) */
.verdict { padding-block: 40px 44px; }
.vrows { list-style: none; display: grid; gap: 7px; margin-top: 14px; }
.vrows, .vhead { --stw: 212px; --vcols: minmax(0, 34fr) var(--stw) minmax(0, 24fr) minmax(0, 24fr); }
.vhead { display: grid; grid-template-columns: var(--vcols); margin-top: 14px; padding-inline: 1px; }
.vhead .vrow__k { padding: 0 20px 0 4px; margin: 0; }
.vhead__a { grid-column: 3; }
.vhead + .vrows { margin-top: 7px; }
.vrow { display: grid; grid-template-columns: var(--vcols); align-items: center; min-height: 92px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.vrow__ph { align-self: stretch; position: relative; }
.vrow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vrow__st { display: grid; place-items: center; padding: 10px 6px; min-width: 0; }
.vrow__col { padding: 14px 20px 14px 4px; }
.vrow__k { font: 600 16px/1.3 var(--display); color: var(--ink); margin-bottom: 2px; }
.vrow .vrow__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.vrow__v { font: 400 16px/1.45 var(--sans); max-width: 14.87em; }
.verdict__more { margin-top: 18px; text-align: center; font-size: 17px; }
@media (min-width: 1100px) { .vrow { min-height: 104px; } }
@media (max-width: 1099px) { .vrows, .vhead { --stw: 176px; } .vrow__st .stamp__w { font-size: 25px; padding-inline: 10px; } }
@media (max-width: 759px) {
	.vhead { display: none; }
	.vrows { gap: 12px; }
	.vrow { grid-template-columns: 1fr 1fr; align-items: start; }
	.vrow__ph { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 2.2 / 1; }
	.vrow__st { grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: end; position: relative; z-index: 1; padding: 0 10px 10px; pointer-events: none; }
	.vrow__st .stamp { background: rgba(255, 255, 255, .92); }
	.vrow__st .stamp__w { font-size: 24px; padding-inline: 10px; }
	.vrow__col { padding: 12px 14px 14px; }
	.vrow .vrow__k { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
	.vrow__k { font-size: 14px; }
	.vrow__v { font-size: 15px; }
}

/* ------------------------------------------------------------------ services rail (HD services.png) */
.services { padding-block: 36px 40px; overflow: hidden; }
.services__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rail__nav { display: flex; gap: 10px; }
.rail__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; }
.rail__btn:hover { background: var(--grey); }
.rail__btn .ico { width: 20px; height: 20px; }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail { --lead: max(var(--gut), calc((100vw - var(--wrap)) / 2)); margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lead); padding-inline: var(--lead) 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail__list { list-style: none; display: flex; gap: 10px; width: max-content; padding-right: var(--lead); }
.rail__item { flex: none; width: clamp(200px, 16.4vw, 224px); scroll-snap-align: start; }
.scard { position: relative; display: block; aspect-ratio: 1.07 / 1; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--grey); }
.scard__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100% !important; transition: transform .3s; }
.scard::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(34, 31, 32, 0), rgba(34, 31, 32, .82)); }
.scard__t { position: absolute; left: 14px; right: 60px; bottom: 14px; z-index: 1; font: 600 18px/1.25 var(--display); }
.scard:hover .scard__img { transform: scale(1.03); }
.scard:focus-visible { outline-offset: -3px; }
.linkline { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; margin-top: 18px; font-size: 16px; }
.linkline li + li::before { content: '\2022'; margin-inline: 16px; color: var(--muted); }
.linkline--l { justify-content: flex-start; }
@media (max-width: 759px) {
	.rail__item { width: 64vw; }
	.scard { aspect-ratio: 4 / 5; }
	.linkline { flex-direction: column; gap: 10px; }
	.linkline li + li::before { display: none; }
}

/* ------------------------------------------------------------------ price + quote sheet (HD price.png) */
.price { padding-block: 40px 56px; }
.price__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.price__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
.price__side { padding-inline: 4% 0; }
.sheet { position: relative; max-width: 500px; margin-top: 14px; padding: 22px 28px 20px; background: #fff; border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sheet__logo { width: 150px; height: auto; }
.sheet__title { margin-top: 8px; font: 600 19px/1.2 var(--display); }
.sheet__k { margin-top: 18px; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.sheet__job { margin-top: 6px; font: 400 17px/1.6 var(--sans); }
.sheet__total { margin-top: 14px; padding-block: 9px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font: 600 19px/1.3 var(--display); }
.sheet__g { margin-top: 12px; text-align: center; font: 500 15px/1.4 var(--display); color: var(--orange-text); }
@media (max-width: 899px) {
	.price__grid { grid-template-columns: 1fr; gap: 28px; }
	.price__side { padding: 0; }
	.sheet { margin-inline: 4px; }
}

/* ------------------------------------------------------------------ process staircase (HD process.png) */
/* HD process: four cards side by side, each 48px lower than the last (a staircase), joined by an orange line that
   leaves each card's right edge at mid-height, runs right past the gap and drops onto the next card with an arrowhead. */
.process { padding-block: 26px 30px; }
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 504px); gap: 0; align-items: stretch; }
.process__main { padding-block: 10px 6px; }
.stairs { --dy: 50px; list-style: none; display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding-bottom: 4px; }
.stairs__step { position: relative; flex: none; min-width: 0; margin-top: calc(var(--i) * var(--dy)); padding: 10px 14px 11px; background: #fff; border: 1px solid #B9B6B7; border-radius: 4px; box-shadow: 0 1px 2px rgba(34, 31, 32, .06); }
.stairs__step:last-child { position: relative; z-index: 1; margin-right: -24px; }
.stairs__t { display: block; font: 600 16px/1.3 var(--display); white-space: nowrap; }
.stairs__d { display: block; margin-top: 3px; font: 400 14px/1.4 var(--sans); color: var(--ink); white-space: nowrap; }
.stairs__ln { position: absolute; left: 100%; top: 50%; width: 52px; height: calc(var(--dy) - 50% + 1px); border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); pointer-events: none; }
.stairs__ln::after { content: ''; position: absolute; right: -6px; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--orange); border-bottom: 0; }
.process__ph { position: relative; min-height: 280px; }
.process__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
@media (max-width: 1199px) and (min-width: 900px) { .stairs__t, .stairs__d { white-space: normal; } .stairs__step:last-child { margin-right: 0; } .process__grid { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); } }
@media (max-width: 899px) {
	.process__grid { grid-template-columns: 1fr; gap: 28px; }
	.stairs { position: relative; flex-direction: column; align-items: stretch; gap: 12px; padding-left: 24px; }
	.stairs::before { content: ''; position: absolute; left: 6px; top: 22px; bottom: 30px; border-left: 2px solid var(--orange); }
	.stairs__step { margin: 0 !important; }
	.stairs__t, .stairs__d { white-space: normal; }
	.stairs__step::before { content: ''; position: absolute; left: -19px; top: 20px; width: 18px; border-top: 2px solid var(--orange); }
	.stairs__ln { display: none; }
	.process__ph { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ areas map band (HD areas.png) */
.areas { position: relative; background: #E8EAEC; }
.areas .map { margin: 0; position: relative; z-index: 0; } /* own stacking context: Leaflet panes (z 400) stay under the card */
.map__canvas { height: 400px; width: 100%; background: #E8EAEC; }
.map__note { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); } /* the Leaflet attribution shows the credits */
.map .leaflet-container a { color: var(--ink); }
.map .leaflet-control-attribution a { color: var(--ink); text-decoration: underline; }
.leaflet-marker-icon.mpin { display: none !important; }
.map__chips { display: none; }
.areas__wrap { position: absolute; inset: 0 0 auto; z-index: 6; pointer-events: none; }
.areas__card { pointer-events: auto; width: 370px; margin-top: 28px; padding: 20px 24px 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }
.areas__h { font: 600 22px/1.25 var(--display); }
.areas__p { margin-top: 6px; font-size: 17px; }
.areas__all { margin-top: 10px; font-size: 17px; }
.leaflet-container { font: 13px/1.3 var(--sans); background: #E8EAEC; }
.mlab { width: auto !important; height: auto !important; white-space: nowrap; }
.leaflet-container .mlab a, .mlab { color: var(--ink); text-decoration: none; }
.mlab a, .mlab--base { display: inline-block; padding: 4px 9px; background: #fff; border: 1px solid #CFCDCE; border-radius: 4px; font: 600 13px/1.2 var(--display); box-shadow: 0 1px 2px rgba(34, 31, 32, .15); }
.mlab--base { font-size: 16px; padding: 5px 11px; border-color: var(--ink); }
.mpin { display: none; }
@media (max-width: 759px) {
	.areas { display: flex; flex-direction: column; background: var(--grey); }
	.areas__wrap { position: static; order: -1; pointer-events: auto; padding-top: 32px; }
	.areas__card { width: auto; margin: 0 0 16px; }
	.map__canvas { height: 300px; }
	.map__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 14px var(--gut) 40px; background: var(--grey); }
	.map__chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; background: #fff; border: 1px solid var(--rule); border-radius: 4px; font: 500 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
}

/* ------------------------------------------------------------------ quote band + CRM (HD quote.png) */
.quote { padding-block: 40px 44px; text-align: center; }
.quote__h { font: 600 clamp(22px, 1.9vw, 26px)/1.25 var(--display); }
.quote__p { margin-top: 4px; font-size: 16px; color: var(--ink); }
.quote__panel { max-width: 1140px; margin: 18px auto 0; padding: 6px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); text-align: left; }
.crm iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.quote__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 72px; margin-top: 16px; font-size: 16px; }
.ffr-guarantee { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-text); font-weight: 500; }
.ffr-guarantee .ico { width: 20px; height: 20px; color: var(--orange-text); stroke-width: 2.5; }
.lnk--g { text-decoration: none; }
.lnk--g span span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 759px) { .quote__links { flex-direction: column; gap: 12px; } .ffr-guarantee { display: inline; } .ffr-guarantee .ico { display: inline-block; vertical-align: -4px; margin-right: 6px; } }

/* ------------------------------------------------------------------ footer, §0e.1 (HD footer.png) */
.ftr { background: #fff; border-top: 3px solid var(--orange); padding-top: 44px; }
.ftr__grid { display: grid; grid-template-columns: repeat(4, minmax(min(200px, 100%), 1fr)); gap: 40px; align-items: start; }
.ftr__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ftr__logo img { width: 180px; height: auto; }
.ftr__social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.ftr__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color .15s; }
.ftr__social a:hover { background: var(--orange-btn); }
.ftr__social .ico { width: 18px; height: 18px; }
.ftr__note { margin-top: 14px; max-width: 12.58em; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ftr__h { margin-bottom: 12px; font: 600 19px/1.2 var(--display); }
.ftr__list { list-style: none; }
.ftr__list li + li { margin-top: 4px; }
.ftr__list a { display: inline-block; padding-block: 3px; font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.ftr__list a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.ftr__all a { color: var(--orange-text); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.ftr__phone { font-size: 20px !important; }
.ftr__mail { overflow-wrap: anywhere; }
.ftr__cta { margin-top: 16px; }
.ftr__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin-top: 36px; padding-block: 14px 18px; border-top: 2px solid var(--orange); }
.ftr__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ftr__legal a, .ftr__copy { font-size: 13px; color: var(--muted); }
.ftr__legal a { text-decoration: none; display: inline-block; padding-block: 4px; }
.ftr__legal a:hover { color: var(--ink); text-decoration: underline; }
.ftr__copy { display: flex; flex-wrap: wrap; gap: 4px 40px; }
.footer-builtby { white-space: nowrap; }
.footer-builtby a { color: var(--muted); }
.footer-builtby a:hover { color: var(--ink); }
@media (max-width: 899px) {
	.ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
	.ftr__brand, .ftr__contact { grid-column: 1 / -1; }
	.ftr__contact { order: 4; }
}
@media (max-width: 1023px) {
	.ftr__base { flex-direction: column; align-items: flex-start; padding-bottom: 88px; }
	.ftr__copy { flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------------------------ mobile quick bar (visible from the first pixel, §7d.4) */
.mbar { display: none; }
@media (max-width: 1023px) {
	.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr 1.3fr; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -4px 12px rgba(34, 31, 32, .08); }
	.mbar__a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; text-decoration: none; font: 600 15px var(--display); color: var(--ink); border-right: 1px solid var(--rule); }
	.mbar__a .ico { width: 22px; height: 22px; }
	.mbar__a--q { background: var(--orange-btn); color: #fff; border: 0; }
}

/* ------------------------------------------------------------------ WhatsApp short form dialog */
.waf { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(34, 31, 32, .55); }
.waf[hidden] { display: none; }
.waf__box { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-top: 4px solid var(--orange); border-radius: var(--r); padding: 36px 28px 24px; }
.waf__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.waf__h { font: 700 26px/1.2 var(--display); }
.waf__p { margin: 8px 0 16px; font-size: 15px; color: var(--muted); }
.waf__f { display: grid; gap: 4px; margin-bottom: 12px; }
.waf__f label { font: 600 14px/1.3 var(--sans); }
.waf__f input, .waf__f textarea, .waf__f select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field); border-radius: 4px; font: 16px var(--sans); background: #fff; color: var(--ink); }
.waf__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.wa-open { overflow: hidden; }

/* ------------------------------------------------------------------ Stage 3 page shell (inner templates designed at Stage 4) */
.phero { padding-block: 40px 32px; border-bottom: 1px solid var(--rule); }
/* display-heading measures are in em (Figtree ch = .652em, its Arial fallback .55em): ch widths re-wrapped on the font swap (CLS 0.078 on /costs/, 2026-11-07) */
.phero__h { margin-top: 8px; font: 800 clamp(34px, 4vw, 56px)/1.08 var(--display); letter-spacing: -.02em; max-width: 14.34em; }
.phero__p { margin-top: 12px; max-width: 35.46em; font-size: 19px; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-inline: 8px; }
.crumbs a { color: var(--muted); }
.hold__ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.hold__p { margin-top: 24px; max-width: 35.46em; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.contact__form { border: 1px solid var(--rule); border-radius: var(--r); padding: 6px; }
.contact__card { padding: 24px; background: var(--grey); border-radius: var(--r); display: grid; gap: 14px; }
.contact__list { list-style: none; display: grid; gap: 6px; }
.gbp iframe { width: 100%; height: 300px; border: 0; }
@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ motion (subtle, CSS only; hidden states only under .js-motion, §7c.6) */
.js-motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out; }
.js-motion .reveal.is-in { opacity: 1; transform: none; }
.js-motion .stairs__step.reveal { transition-delay: calc(var(--i, 0) * 60ms); }
.js-motion .vrow.reveal { opacity: 1; transform: none; }
.js-motion .sheet.reveal { transform: rotate(-1.5deg) translateY(12px); }
.js-motion .sheet.reveal.is-in { transform: rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js-motion .reveal, .js-motion .vrow .stamp { opacity: 1 !important; }
}
.ffr-shot .reveal, .ffr-fid .reveal, .ffr-shot .stamp, .ffr-fid .stamp { opacity: 1 !important; }

@media print { .hdr, .mbar, .ftr__social, .waf, .crm, .rail__nav { display: none !important; } }

/* ================================================================== Stage 4: service hub (mockup/page-service/master.png) */
.shero { padding-block: 28px 40px; }
.shero__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 612px); gap: 48px; align-items: center; }
.shero__m .crumbs { margin-bottom: 26px; }
.shero__h { margin-top: 10px; font: 800 clamp(40px, 4.6vw, 64px)/1.04 var(--display); letter-spacing: -.02em; max-width: 7.82em; }
.shero__p { margin-top: 18px; max-width: 26.31em; font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.shero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.shero__tick { margin: 18px 0 0; }
.shero__ph { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.shero__img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
@media (max-width: 899px) {
	.shero__g { grid-template-columns: 1fr; gap: 24px; }
	.shero__h { max-width: none; }
	.shero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.shero__ctas .btn--primary { grid-column: 1 / -1; }
	.shero__ctas .btn { padding-inline: 10px; font-size: 16px; }
	.shero__tick { margin-left: 0; }
}

.spokes { padding-block: 8px 48px; }
.spokes__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.spokes__head .lnk { flex: none; white-space: nowrap; }
.spokes__l { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.spk__a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.spk__a:hover { border-color: var(--ink); }
.spk__a:hover .spk__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.spk__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.spk__b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.spk__k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.spk__t { font: 600 18px/1.3 var(--display); }
.spk__m { margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 1099px) { .spokes__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .spokes__l { grid-template-columns: 1fr; gap: 10px; } .spk__a { flex-direction: row; } .spk__img { width: 38%; aspect-ratio: auto; min-height: 100%; } .spk__b { padding: 12px 14px; } .spk__t { font-size: 16px; } }

.faq { padding-block: 56px; border-top: 1px solid var(--rule); }
.faq__g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.faq__p { margin-top: 8px; font-size: 16px; color: var(--muted); max-width: 18.3em; }
.faq__l { border-top: 1px solid var(--rule); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__s { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 4px; cursor: pointer; list-style: none; }
.faq__s::-webkit-details-marker { display: none; }
.faq__q { font: 600 18px/1.35 var(--display); }
.faq__ic { width: 22px; height: 22px; color: var(--orange-text); transition: transform .2s; }
.faq__i[open] .faq__ic { transform: rotate(45deg); }
.faq__a { padding: 0 4px 18px; max-width: 38.9em; font-size: 17px; }
.faq__a p + p { margin-top: 10px; }
@media (max-width: 899px) { .faq__g { grid-template-columns: 1fr; gap: 20px; } }

/* ================================================================== the fair ledger: A6 bento long read (STYLE-GUIDE §9) */
.lr { --lgap: 16px; }
.lr-k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }

/* intro + mosaic index (inline, never sticky) */
.lr-intro { padding-block: 64px 32px; border-top: 1px solid var(--rule); }
.lr-intro__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.lr-intro__h { margin-top: 12px; font: 700 clamp(30px, 3.2vw, 46px)/1.1 var(--display); letter-spacing: -.015em; max-width: 13.04em; }
.lr-intro__d { margin-top: 16px; max-width: 29.74em; font-size: 18px; }
.lr-intro__m .crumbs { margin-bottom: 18px; }
.lr-index__l { list-style: none; display: grid; gap: 8px; }
.lr-index--six .lr-index__l { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lr-index--six .lr-ix--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.lr-index--six .lr-ix--2, .lr-index--six .lr-ix--3 { grid-column: 4 / 7; }
.lr-index--six .lr-ix--4, .lr-index--six .lr-ix--5, .lr-index--six .lr-ix--6 { grid-column: span 2; }
.lr-index--n .lr-index__l { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lr-ix a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; min-height: 96px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.lr-ix a:hover { border-color: var(--ink); }
.lr-ix a:hover .lr-ix__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lr-ix--1 a { padding: 18px 20px; }
.lr-ix__n { font: 500 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.lr-ix--1 .lr-ix__n { font-size: 40px; }
.lr-ix__t { font: 600 16px/1.25 var(--display); }
.lr-ix--1 .lr-ix__t { font-size: 22px; max-width: 7.82em; }
.lr-ix__v { align-self: flex-end; padding: 2px 6px; border: 1.5px solid currentColor; border-radius: 2px; font: 800 12px/1.2 var(--stamp); letter-spacing: .06em; color: var(--orange-text); transform: rotate(-5deg); }
.lr-ix__v--replace, .lr-ix__v--check { color: var(--ink); }
.lr-ix--1 .lr-ix__v { font-size: 15px; padding: 3px 8px; }

/* entries: one 12-column grid per row, alternating grounds */
.lr-entry { padding-block: 20px; }
.lr-entry--alt { margin-block: 20px; padding-block: 40px; background: var(--grey); }
.lr-intro + .lr-entry { padding-top: 8px; }
.lr-grid { display: flex; flex-direction: column; gap: var(--lgap); }
.lr-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lgap); }
.lr-row > * { grid-column: span var(--sp, 12); min-width: 0; }
.lr-stack { display: flex; flex-direction: column; gap: var(--lgap); }
.lr-stack > :last-child { flex: 1 1 auto; }
.lr-t { position: relative; margin: 0; padding: 28px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); container-type: inline-size; }
.lr-t--c { display: flex; flex-direction: column; justify-content: center; }
.lr-h3 { margin-bottom: 12px; font: 600 clamp(20px, 1.7vw, 23px)/1.25 var(--display); }
.lr-tx__b { font-size: 17px; line-height: 1.6; }
.lr-tx__b > * { max-width: 36.61em; }
.lr-tx__b p + p, .lr-tx__b p + ul, .lr-tx__b ul + p { margin-top: 12px; }
.lr-tx__b ul { padding-left: 20px; }
.lr-tx__b li + li { margin-top: 4px; }
.lr-tx__b li::marker { color: var(--orange); }
.lr-tx__b a { color: var(--orange-text); text-underline-offset: 3px; }
.lr-tx--cols .lr-tx__b { columns: 2; column-gap: 40px; }
.lr-tx--cols .lr-tx__b > * { break-inside: avoid-column; }

/* opener: ruled ledger line, title, the stamp in the corner */
.lr-op { display: flex; flex-direction: column; min-height: 250px; padding: 26px 30px 24px; }
.lr-op__k { display: flex; flex-wrap: wrap; gap: 0 .7em; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); font: 600 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.lr-op__t { margin-top: 22px; max-width: 11.74em; font: 700 clamp(28px, 2.6vw, 38px)/1.12 var(--display); letter-spacing: -.012em; }
.lr-op__lead { margin-top: 14px; max-width: 26.31em; font-size: 17px; line-height: 1.55; }
.lr-op__st { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 16px; }
.lr-row > .lr-op[style*="--sp:12;"] { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t s" "l s"; column-gap: 40px; }
.lr-row > .lr-op[style*="--sp:12;"] .lr-op__k { grid-area: k; }
.lr-row > .lr-op[style*="--sp:12;"] .lr-op__t { grid-area: t; max-width: 19.56em; }
.lr-row > .lr-op[style*="--sp:12;"] .lr-op__lead { grid-area: l; max-width: 38.9em; }
.lr-row > .lr-op[style*="--sp:12;"] .lr-op__st { grid-area: s; align-self: center; margin: 0; padding: 12px 8px 0; }
.stamp--lg { padding: 6px; border-width: 3.5px; }
.stamp--lg .stamp__w { font-size: clamp(30px, 3vw, 46px); padding: 3px 18px 0; }
.stamp--sm { padding: 4px; border-width: 2.5px; }
.stamp--sm .stamp__w { font-size: 24px; padding: 1px 10px 0; }
.stamp--check { color: var(--ink); }
.stamp--check::before { border-style: dashed; }

/* photo tile: fills its row height, caption tab lower-left, watermark (lower-right) kept in frame by focal 100% 100% */
.lr-ph { padding: 0; min-height: 260px; overflow: hidden; border: 0; background: var(--grey); }
.lr-ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-ph .tab { z-index: 1; }
.lr-stack > .lr-ph { flex: 0 0 auto; min-height: 0; aspect-ratio: 4 / 3; }

/* drawn line diagram + numbered key */
.lr-dg { display: flex; flex-direction: column; }
.lr-dg__in { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.lr-dg__art svg { display: block; width: 100%; height: auto; }
@container (min-width: 600px) { .lr-dg__in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 24px; } }
.lrd .ln, .lrd .lnb, .lrd .thin { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
.lrd .ln { stroke-width: 1.4; }
.lrd .lnb { stroke-width: 1.9; }
.lrd .thin { stroke-width: .8; }
.lrd .w { fill: #fff; }
.lrd [fill^="url"] { stroke: var(--ink); }
.lrd .dash { stroke-dasharray: 4 4; }
.lrd .dash2 { stroke-dasharray: 9 4; }
.lrd .dot { fill: var(--ink); stroke: none; }
.lrd .co-l { stroke: var(--orange-btn); stroke-width: 1.4; fill: none; }
.lrd .co-d, .lrd .co-c { fill: var(--orange-btn); stroke: none; }
.lrd .co-n { fill: #fff; font: 700 13px var(--display); text-anchor: middle; }
.lr-key { list-style: none; counter-reset: k; display: grid; gap: 8px; font-size: 16px; line-height: 1.35; }
.lr-key li { counter-increment: k; display: flex; gap: 10px; align-items: baseline; }
.lr-key li::before { content: counter(k); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-btn); color: #fff; font: 700 12px/1 var(--display); transform: translateY(-1px); }
.lr-dg__note { margin-top: 10px; font: italic 400 15px/1.45 var(--sans); color: var(--muted); }

/* verdict pairs */
.lr-pairs { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.lr-pairs .lr-k { margin-bottom: 6px; }
.lr-pairs__l { list-style: none; }
.lr-pair { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.lr-pair + .lr-pair { border-top: 1px solid var(--rule); }
.lr-pair__f { font: 500 17px/1.4 var(--sans); }
.lr-pair__n { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.lr-pair .stamp { flex: none; }

/* myth / fact: a red cross, never a strike-through */
.lr-myth { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.lr-myth__m { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--muted); }
.lr-x { flex: none; width: 20px; height: 20px; margin-top: 2px; stroke: var(--orange-btn); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.lr-myth__f { font-size: 17px; line-height: 1.55; }
.lr-myth__lab { font-weight: 700; color: var(--ink); }

/* figure */
.lr-fig { background: var(--grey); border-color: var(--grey); text-align: center; align-items: center; }
.lr-entry--alt .lr-fig { background: #fff; border-color: var(--rule); }
.lr-fig__n { font: 500 clamp(36px, 4vw, 56px)/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lr-fig__l { margin-top: 10px; max-width: 14.87em; font-size: 16px; line-height: 1.45; }
.lr-fig__s { margin-top: 8px; max-width: 17.16em; font: italic 400 14px/1.4 var(--sans); color: var(--muted); }

/* what sets the price (never a figure; always ends in one written total price) */
.lr-price { display: flex; flex-direction: column; justify-content: center; }
.lr-price__l { list-style: none; margin-top: 10px; font-size: 17px; line-height: 1.5; }
.lr-price__l li + li { margin-top: 4px; }
.lr-price__t { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--ink); font: 600 18px/1.3 var(--display); }
.lr-price--strip { padding-block: 22px; }
@container (min-width: 900px) {
	.lr-price--strip .lr-price__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; }
	.lr-price--strip .lr-price__l { display: flex; flex-wrap: wrap; margin: 0; }
	.lr-price--strip .lr-price__l li { margin: 0; padding: 4px 18px; border-left: 1px solid var(--rule); }
	.lr-price--strip .lr-price__t { margin: 0; padding: 8px 0 8px 22px; border-top: 0; border-left: 2px solid var(--ink); }
}

/* Q&A: orange top rule */
.lr-qa { border-top: 3px solid var(--orange); display: flex; flex-direction: column; justify-content: center; }
.lr-qa__q { font: 600 20px/1.3 var(--display); }
.lr-qa__a { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.lr-qa__a p + p { margin-top: 8px; }

/* pull line (max one per page) */
.lr-pull { border: 0; border-left: 3px solid var(--orange); border-radius: 0 var(--r) var(--r) 0; }
.lr-pull__p { font: italic 600 clamp(22px, 2vw, 30px)/1.3 var(--display); }
.lr-pull p.lr-src { margin-top: 10px; font: italic 400 15px/1.4 var(--sans); color: var(--muted); }

/* CTA tile (to #quote) */
.lr-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; background: var(--orange-tint); border-color: #F6D9CB; }
.lr-cta__l { font: 600 20px/1.3 var(--display); max-width: 14.34em; }

/* close band */
.lr-close { padding-block: 36px 56px; }
.lr-close__in { padding-top: 32px; border-top: 1px solid var(--rule); text-align: center; }
.lr-close__h { font: 600 clamp(22px, 2vw, 28px)/1.3 var(--display); }
.lr-close__p { margin: 8px auto 0; max-width: 32.03em; font-size: 17px; }
.lr-close__b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* stamps land once as their tile enters (§10) */
.js-motion .lr-t .stamp { opacity: 0; transform: rotate(var(--rot)) scale(1.15); transition: opacity .26s ease-out .12s, transform .26s ease-out .12s; }
.js-motion .lr-t.is-in .stamp { opacity: 1; transform: rotate(var(--rot)) scale(1); }
@media (prefers-reduced-motion: reduce) { .js-motion .lr-t .stamp { opacity: 1 !important; transform: rotate(var(--rot)) !important; } }
.ffr-shot .lr-t .stamp, .ffr-fid .lr-t .stamp { opacity: 1 !important; transform: rotate(var(--rot)) !important; }

/* tablet: 6 columns */
@media (max-width: 1099px) and (min-width: 760px) {
	.lr-intro__g { grid-template-columns: 1fr; gap: 28px; }
	.lr-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.lr-row > * { grid-column: span var(--tsp, 6); }
	.lr-tx--cols .lr-tx__b { columns: 1; }
}
/* phones: one column in reading order (opener, text, diagram, modules, photo, CTA) */
@media (max-width: 759px) {
	.lr-intro { padding-block: 44px 20px; }
	.lr-intro__g { grid-template-columns: 1fr; gap: 24px; }
	.lr-index--six .lr-index__l, .lr-index--n .lr-index__l { grid-template-columns: 1fr 1fr; }
	.lr-index--six .lr-ix { grid-column: auto !important; grid-row: auto !important; }
	.lr-ix a { min-height: 84px; padding: 10px 12px; }
	.lr-ix--1 .lr-ix__n { font-size: 22px; }
	.lr-ix--1 .lr-ix__t { font-size: 16px; }
	.lr-ix--1 .lr-ix__v { font-size: 12px; padding: 2px 6px; }
	.lr-grid { gap: 12px; }
	.lr-row, .lr-stack { display: contents; }
	.lr-op { order: 1; min-height: 0; padding: 20px; }
	.lr-row > .lr-op[style*="--sp:12;"] { display: flex; }
	.lr-tx { order: 2; }
	.lr-dg { order: 3; }
	.lr-pairs, .lr-myth, .lr-fig, .lr-price, .lr-qa, .lr-pull { order: 4; }
	.lr-ph { order: 5; min-height: 0; aspect-ratio: 4 / 3; }
	.lr-cta { order: 6; }
	.lr-t { padding: 20px; }
	.lr-tx--cols .lr-tx__b { columns: 1; }
	.lr-op__t { font-size: 27px; }
	.lr-entry--alt { margin-block: 12px; padding-block: 28px; }
	.lr-pair { align-items: flex-start; }
}

/* ================================================================== Stage 4 templates (inc/pages.php) */
/* shared reading styles: styled markers, orange links, tables that fit (stack under 600px, never scroll) */
.prose { font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 14px; }
.prose a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: none; padding: 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 10px; height: 2px; background: var(--orange); }
.prose ol { padding-left: 24px; }
.prose ol li::marker { color: var(--orange-text); font-weight: 600; }
.prose strong { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; margin-top: 18px; }
.prose th { padding: 0 14px 10px 0; text-align: left; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); border-bottom: 2px solid var(--ink); }
.prose td { padding: 14px 14px 14px 0; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.prose td:first-child { font-weight: 600; }
@media (max-width: 599px) {
	.prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.prose tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
	.prose td { display: block; padding: 2px 0; border: 0; }
}
.toc { margin: 36px 0 8px; padding: 18px 0 20px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.toc__k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.toc__l { list-style: none; counter-reset: t; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin-top: 10px; }
.toc__l li { counter-increment: t; display: flex; gap: 10px; font-size: 16px; line-height: 1.4; }
.toc__l li::before { content: counter(t, decimal-leading-zero); flex: none; font: 500 15px/1.45 var(--display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.toc__l a { color: var(--ink); text-decoration: none; }
.toc__l a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
@media (max-width: 599px) { .toc__l { grid-template-columns: 1fr; } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: 500 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.chips a:hover { border-color: var(--ink); }
.chips__n { font: 500 13px var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.rel { padding-block: 56px; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ town (mockup/page-area) */
.thero { padding-block: 28px 32px; }
.thero__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 48px; align-items: center; }
.thero__m .crumbs { margin-bottom: 26px; }
.thero__h { margin-top: 10px; font: 800 clamp(40px, 4.6vw, 64px)/1.04 var(--display); letter-spacing: -.02em; }
.thero__p { margin-top: 18px; max-width: 26.31em; font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.thero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.twall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; aspect-ratio: 600 / 372; }
.twall__t { position: relative; margin: 0; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.twall__t--big { grid-row: 1 / 3; }
.twall__img { width: 100%; height: 100%; object-fit: cover; }
.twall .tab { max-width: calc(100% - 76px); }
.tnotes { padding-block: 0 48px; }
.tnotes__l { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.tnotes__l--3 { --n: 3; }
.tnotes__l--2 { --n: 2; }
.tnotes__i { padding: 20px 24px 22px; background: #fff; text-align: center; }
.tnotes__k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.tnotes__v { margin: 6px 0 0; font-size: 17px; line-height: 1.45; }
.leaflet-marker-icon.mpin.mpin--on { display: block !important; }
.mlab--hl a { padding: 5px 11px; border: 2px solid var(--orange); font-size: 15px; }
@media (max-width: 899px) {
	.thero__g { grid-template-columns: 1fr; gap: 24px; }
	.thero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.thero__ctas .btn--primary { grid-column: 1 / -1; }
	.thero__ctas .btn { padding-inline: 10px; font-size: 16px; }
	.tnotes__l { --n: 2; }
	.tnotes__l--3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
	.twall { grid-template-rows: auto; aspect-ratio: auto; }
	.twall__t--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
	.twall__t--sm { display: flex; flex-direction: column; background: none; border-radius: 0; overflow: visible; }
	.twall__t--sm .twall__img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--r); object-position: 100% 60% !important; }
	.twall__t--sm .tab { position: static; max-width: none; margin-top: 6px; padding: 0; box-shadow: none; background: none; font-size: 14px; }
	.tnotes { padding-bottom: 32px; }
	.tnotes__i { padding: 14px 12px 16px; }
	.tnotes__v { font-size: 15px; }
}

/* ------------------------------------------------------------------ feature head (guide, post) + feature flow (guide) */
.fhead { padding-block: 28px 48px; border-bottom: 1px solid var(--rule); }
.fhead__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.fhead__m .crumbs { margin-bottom: 24px; }
.fhead__h { margin-top: 10px; max-width: 13.04em; font: 800 clamp(36px, 3.9vw, 54px)/1.06 var(--display); letter-spacing: -.02em; }
.fhead__p { margin-top: 16px; max-width: 29.74em; font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.fhead__meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); max-width: 29.74em; font-size: 15px; color: var(--muted); }
.fhead__meta a { color: var(--orange-text); text-underline-offset: 3px; }
.fhead__ph { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.fhead__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) { .fhead__g { grid-template-columns: 1fr; gap: 24px; } .fhead { padding-bottom: 32px; } }

.flow { padding-block: 48px 72px; }
.flow__w { max-width: calc(720px + 2 * var(--gut)); }
.flow__intro { font-size: 19px; }
.flow__intro > p:first-child::first-letter { float: left; margin: 8px 12px 0 0; font: 800 78px/.78 var(--display); color: var(--orange); }
.flow__ch { margin-top: 64px; }
.flow__num { display: flex; align-items: center; gap: 18px; color: var(--orange-text); }
.flow__num::before, .flow__num::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.flow__num span { font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.flow__h { margin: 18px auto 22px; max-width: 15.65em; text-align: center; font: 700 clamp(26px, 2.5vw, 34px)/1.18 var(--display); letter-spacing: -.012em; }
.flow__pull { position: relative; margin: 40px 0 8px; padding: 34px 40px 32px; background: var(--grey); border-radius: var(--r); }
.flow__pull::before { content: ""; position: absolute; left: 40px; top: 0; width: 56px; height: 4px; background: var(--orange); }
.flow__pull p { font: italic 600 clamp(22px, 2vw, 28px)/1.35 var(--display); letter-spacing: -.005em; }
.flow__note { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--rule); border-left: 4px solid var(--orange); border-radius: 0 var(--r) var(--r) 0; }
.flow__note-k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.flow__note-t { margin-top: 6px; font-size: 17px; line-height: 1.6; }
.flow__fig { max-width: 480px; margin: 40px auto 0; }
.flow__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.flow__cap { margin-top: 10px; text-align: center; font: italic 400 15px/1.45 var(--sans); color: var(--muted); }
.flow__end { margin-top: 56px; text-align: center; }
@media (min-width: 1000px) { .flow__pull { margin-inline: -64px; padding-inline: 64px; } .flow__pull::before { left: 64px; } }
@media (max-width: 759px) { .flow__ch { margin-top: 48px; } .flow__pull { padding: 28px 22px 24px; } .flow__pull::before { left: 22px; } .flow__intro > p:first-child::first-letter { font-size: 64px; } }

/* ------------------------------------------------------------------ answer: the short answer first */
.ahero { padding-block: 28px 24px; }
.ahero .crumbs { margin-bottom: 24px; }
.ahero__h { margin-top: 10px; max-width: 15.65em; font: 800 clamp(34px, 3.7vw, 52px)/1.08 var(--display); letter-spacing: -.02em; }
.ahero__p { margin-top: 14px; max-width: 34em; color: var(--muted, #5C585A); font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.aans { padding-block: 4px 56px; }
.aans__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; align-items: stretch; }
.aans__box { display: flex; flex-direction: column; padding: 32px 36px 26px; background: #fff; border: 1px solid var(--rule); border-left: 6px solid var(--orange); border-radius: 0 var(--r) var(--r) 0; box-shadow: var(--shadow); }
.aans__k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.aans__t { margin-top: 12px; font: 500 clamp(19px, 1.65vw, 23px)/1.5 var(--display); color: var(--ink); }
.aans__t p + p { margin-top: 10px; }
.aans__m { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.aans__t + .aans__m { margin-top: 24px; }
.aans__m a { color: var(--orange-text); text-underline-offset: 3px; }
.aans__ph { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--grey); min-height: 280px; }
.aans__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asecs { padding-block: 0 64px; }
.asec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding-block: 30px; border-top: 1px solid var(--rule); }
.asec:last-child { border-bottom: 1px solid var(--rule); }
.asec__h { font: 600 clamp(21px, 1.8vw, 25px)/1.3 var(--display); }
.asec__b { font-size: 17px; max-width: 36.61em; }
@media (max-width: 899px) { .aans__g { grid-template-columns: 1fr; } .aans__ph { min-height: 0; aspect-ratio: 4 / 3; } .asec { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 759px) { .aans__box { padding: 24px 22px 20px; } }

/* ------------------------------------------------------------------ post */
.pbody { padding-block: 48px 64px; }
.pbody__intro { font-size: 19px; }
.pbody__s { margin-top: 40px; }
.pbody__h { margin-bottom: 14px; font: 700 clamp(24px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -.01em; }
.pfile { margin-top: 48px; padding: 24px 28px; background: var(--grey); border-left: 4px solid var(--orange); border-radius: 0 var(--r) var(--r) 0; }
.pfile__k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.pfile__t { margin-top: 4px; font: 600 21px/1.3 var(--display); }
.pfile__t a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 4px; }
.pfile__d { margin-top: 6px; font-size: 16px; color: var(--muted); }

/* ------------------------------------------------------------------ blog index */
.bhero { padding-block: 28px 32px; }
.bhero .crumbs { margin-bottom: 24px; }
.bhero__h, .ihero__h, .chero__h { margin-top: 10px; font: 800 clamp(36px, 3.9vw, 54px)/1.06 var(--display); letter-spacing: -.02em; }
.bhero__p, .ihero__p, .chero__p { margin-top: 14px; max-width: 33.18em; font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.bfeat { padding-block: 8px 56px; }
.bfeat__l { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bcard__a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.bcard__a:hover { border-color: var(--ink); }
.bcard__a:hover .bcard__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.bcard__ph { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--grey); }
.bcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bcard__b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.bcard__k { font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.bcard__t { font: 600 18px/1.3 var(--display); }
.bcard__x { font-size: 17px; line-height: 1.6; }
.bcard__m { margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--muted); }
.bcard--lead { grid-column: 1 / -1; }
.bcard--lead .bcard__a { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); background: var(--grey); border-color: var(--grey); }
.bcard--lead .bcard__b { justify-content: center; gap: 12px; padding: 36px 48px; }
.bcard--lead .bcard__t { font: 700 clamp(26px, 2.4vw, 34px)/1.15 var(--display); letter-spacing: -.012em; max-width: 15.65em; }
.bcard--lead .bcard__x { max-width: 32.03em; }
.bcard--lead .bcard__m { margin-top: 6px; }
.bgroups { padding-block: 56px 64px; border-top: 1px solid var(--rule); }
.bgroups__h { margin-bottom: 26px; }
.bgroups__g { columns: 3; column-gap: 40px; }
.bgrp { break-inside: avoid; margin-bottom: 36px; }
.bgrp__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 600 19px/1.3 var(--display); }
.bgrp__n { font: 500 15px var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.bgrp__l { list-style: none; }
.bgrp__l a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.bgrp__l a:hover .bgrp__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.bgrp__t { display: block; font: 500 16px/1.4 var(--sans); }
.bgrp__m { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.bgrp__all { margin-top: 10px; font-size: 15px; }
@media (max-width: 1099px) { .bfeat__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bgroups__g { columns: 2; } }
@media (max-width: 759px) {
	.bfeat__l { grid-template-columns: 1fr; gap: 12px; }
	.bcard--lead .bcard__a { grid-template-columns: 1fr; }
	.bcard--lead .bcard__b { padding: 20px 20px 22px; }
	.bcard:not(.bcard--lead) .bcard__a { flex-direction: row; }
	.bcard:not(.bcard--lead) .bcard__ph { flex: none; width: 38%; aspect-ratio: auto; }
	.bgroups { padding-top: 40px; }
	.bgroups__g { columns: 1; }
}

/* ------------------------------------------------------------------ wayfinding: services ledger, areas by council */
.ihero { padding-block: 28px 36px; }
.ihero .crumbs { margin-bottom: 24px; }
.ihero--map .ihero__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.ihero__map .map { margin: 0; position: relative; z-index: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.ihero__map .map__canvas { height: 420px; }
.istats { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 26px; font-size: 15px; color: var(--muted); }
.istats__n { display: block; font-size: 40px; line-height: 1.1; color: var(--ink); }
.sidx { padding-block: 0 56px; }
.sidx__l { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sidx__a { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-height: 196px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.sidx__a:hover { border-color: var(--ink); }
.sidx__a:hover .sidx__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.sidx__ph { position: relative; background: var(--grey); }
.sidx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sidx__b { display: flex; flex-direction: column; padding: 20px 24px 18px; }
.sidx__n { font: 500 15px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.sidx__t { margin-top: 8px; font: 600 23px/1.2 var(--display); }
.sidx__d { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sidx__m { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font: 500 15px var(--sans); color: var(--orange-text); }
.sidx__m .ico { width: 18px; height: 18px; }
.sidx__after { margin-top: 32px; text-align: center; font-size: 17px; }
.aidx { padding-block: 0 64px; }
.aidx .chips { margin: 0 0 28px; }
.agrps { display: flex; flex-wrap: wrap; gap: 16px; }
.agrp { flex: 1 1 100%; min-width: 0; padding: 22px 26px 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); }
.agrp--m { flex-basis: calc(50% - 8px); }
.agrp--s { flex-basis: calc(33.333% - 11px); }
.agrp__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.agrp__h { font: 600 22px/1.25 var(--display); }
.agrp__n { font-size: 15px; color: var(--muted); white-space: nowrap; }
.agrp__l { list-style: none; columns: 4; column-gap: 32px; }
.agrp--m .agrp__l { columns: 2; }
.agrp--s .agrp__l { columns: 1; }
.agrp__l li { break-inside: avoid; }
.agrp__l a { min-width: 0; overflow-wrap: anywhere; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.35; }
.agrp__l a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.agrp__mi { flex: none; font: 500 13px var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 1099px) {
	.ihero--map .ihero__g { grid-template-columns: 1fr; gap: 28px; }
	.agrp__l { columns: 3; }
	.agrp--s { flex-basis: calc(50% - 8px); }
}
@media (max-width: 899px) { .sidx__l { grid-template-columns: 1fr; } }
@media (max-width: 759px) {
	.ihero__map .map__canvas { height: 300px; }
	.ihero__map .map__chips { padding: 12px 12px 14px; }
	.sidx__a { grid-template-columns: 34% minmax(0, 1fr); min-height: 150px; }
	.sidx__b { padding: 14px 16px; }
	.sidx__t { font-size: 19px; }
	.sidx__d { -webkit-line-clamp: 2; font-size: 15px; }
	.agrp, .agrp--m, .agrp--s { flex-basis: 100%; padding: 18px 16px 14px; }
	.agrp__l, .agrp--m .agrp__l { columns: 2; column-gap: 20px; }
	.agrp__l a { font-size: 15px; }
}

/* ------------------------------------------------------------------ contact: form first */
.chero { padding-block: 28px 24px; }
.chero .crumbs { margin-bottom: 22px; }
.contact { padding-block: 0 56px; }
.contact__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; }
.ccard { padding: 28px; background: var(--grey); border-radius: var(--r); }
.ccard__h { font: 600 24px/1.25 var(--display); }
.ccard__phone { margin-top: 12px; }
.ccard__phone a { font-size: 32px; color: var(--ink); text-decoration: none; }
.ccard__phone a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.ccard__l { list-style: none; margin-top: 14px; }
.ccard__l li { display: grid; gap: 2px; padding-block: 12px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ccard__l a { color: var(--ink); }
.ccard__l .lnk { color: var(--orange-text); }
.ccard__k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.ccard .ffr-guarantee { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; font-size: 16px; }
.ccard__g { margin-top: 12px; font-size: 16px; }
.cmap { padding-block: 0 64px; }
.cmap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cmap .map { margin: 0; position: relative; z-index: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.cmap .map__canvas { height: 440px; }
@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 759px) { .cmap .map__canvas { height: 300px; } .cmap .map__chips { padding: 12px 12px 14px; } }

/* ------------------------------------------------------------------ designed article (costs, about, legal) + 404 */
.ahd { padding-block: 36px 40px; border-bottom: 1px solid var(--rule); text-align: center; }
.ahd .crumbs { margin-bottom: 26px; }
.ahd .crumbs ol { justify-content: center; }
.ahd__h { margin: 10px auto 0; max-width: 13.04em; font: 800 clamp(36px, 3.9vw, 54px)/1.06 var(--display); letter-spacing: -.02em; }
.ahd__p { margin: 14px auto 0; max-width: 33.18em; font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); }
.ahd__m { margin-top: 12px; font-size: 14px; color: var(--muted); }
.art { padding-block: 48px 72px; }
.art__w { max-width: calc(720px + 2 * var(--gut)); }
.art__fig { position: relative; margin: 0 0 40px; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.art__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.art .toc { margin-top: 0; margin-bottom: 8px; }
.art__s { margin-top: 52px; }
.art__s:first-child { margin-top: 0; }
.art__k { text-align: center; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.art__h { margin: 8px auto 0; max-width: 16.95em; text-align: center; font: 700 clamp(25px, 2.3vw, 32px)/1.2 var(--display); letter-spacing: -.01em; }
.art__h::after { content: ""; display: block; width: 44px; height: 3px; margin: 16px auto 22px; background: var(--orange); }
.art__s--hold .art__b { text-align: center; }
.art__ask { margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--ink); text-align: center; font-size: 17px; }
.art__ask-k { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 6px; }
.art__ask a { color: var(--ink); }
.nf__b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.nfl { padding-block: 48px 64px; }
.nfl__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.nfl__h { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); font: 600 20px/1.3 var(--display); }
.nfl__c ul { list-style: none; }
.nfl__c a { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16px; }
.nfl__c a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 759px) { .nfl__g { grid-template-columns: 1fr; gap: 28px; } .art__s { margin-top: 40px; } }
/* archives */
.arch__n { margin-top: 14px; font-size: 15px; color: var(--muted); }
.arch { padding-block: 8px 64px; }
.arch__l { list-style: none; border-top: 2px solid var(--ink); }
.arch__l a { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 240px); gap: 24px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.arch__l a:hover .arch__t { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.arch__d { font: 500 15px var(--display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.arch__t { font: 600 19px/1.35 var(--display); }
.arch__m { font-size: 15px; color: var(--muted); text-align: right; }
.arch__none { padding: 20px 4px; }
@media (max-width: 759px) { .arch__l a { grid-template-columns: 1fr; gap: 2px; } .arch__m { text-align: left; } }
.bcard--lead .bcard__ph { aspect-ratio: 16 / 9; align-self: center; }
@media (max-width: 759px) { .bcard--lead .bcard__ph { align-self: stretch; } }
.ihero--map .ihero__g { align-items: start; }
.ihero--map .ihero__m { padding-top: 4px; }
.bgrp:last-child { margin-bottom: 0; }
@media (max-width: 759px) { .bgroups { padding-bottom: 40px; } }

/* ================================================================== design stage 2026-11-07 (fidelity loop 1), desktop only */
@media (min-width: 1100px) {
	/* verdict rows: taller, tighter stamp lettering like the mockup's rubber stamps */
	.vrows, .vhead { --stw: 240px; }
	.vrow__st .stamp__w { font-size: 35px; letter-spacing: 0; padding: 3px 11px 0; }
	.vrow__st .stamp { border-width: 3.5px; }
	/* ledger intro: the mosaic index takes ~45% of the row, its marks read as stamps */
	.lr-intro__g { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 40px; }
	.lr-ix a { min-height: 112px; padding: 14px 16px; }
	.lr-ix__t { font-size: 18px; }
	.lr-ix__v { padding: 3px 9px 2px; border-width: 2.5px; outline: 1px solid currentColor; outline-offset: -5px; font-size: 18px; letter-spacing: .02em; }
	.lr-ix--1 .lr-ix__v { font-size: 24px; padding: 4px 12px 3px; }
	.lr-ix--1 .lr-ix__t { font-size: 24px; }
	/* entry openers: the title scales with its tile, as the mockup's large ledger titles do */
	.lr-op__t { font-size: clamp(30px, 6.6cqi, 42px); }
	/* spoke cards and the trust line read at the mockup's size */
	.spk__t { font-size: 21px; }
	.trust__line { max-width: 1000px; font-size: clamp(24px, 2.2vw, 31px); }
}
@media (min-width: 1100px) {
	/* three-entry (town) index: one wide entry over two, number + title + stamp on one line, as the area mockup */
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) .lr-ix--1 { grid-column: 1 / -1; }
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) .lr-ix a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 92px; padding: 16px 20px; }
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) .lr-ix__n { font-size: 24px; }
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) .lr-ix__t { font-size: 20px; max-width: none; }
	.lr-index--n .lr-index__l:has(> .lr-ix:nth-child(3):last-child) .lr-ix__v { margin-left: auto; align-self: center; font-size: 20px; }
}
.prose p, .prose li, .prose dd { overflow-wrap: break-word; }
@media (min-width: 760px) {
	/* a stack holding a photo: the photo takes the spare height, so a short module never floats in an empty tile */
	.lr-stack:has(> .lr-ph) > .lr-ph { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; max-height: 340px; } /* 340: library files are ~700px tall, kept at 2x */
}
/* contact card: the Google facade's button and link sit side by side and never split mid-link; map head link one line */
.gbp { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.gbp__t { font-size: 16px; line-height: 1.5; }
.gbp p + p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.gbp .lnk { white-space: nowrap; }
.cmap__head .lnk { flex: none; white-space: nowrap; }
/* row headers in content tables read as the first cell, not as the uppercase column-header style */
.prose tbody th { padding: 14px 14px 14px 0; font: 600 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose caption { caption-side: top; text-align: left; padding-bottom: 8px; font: 600 15px/1.4 var(--display); color: var(--muted); }
@media (max-width: 599px) { .prose tbody th { display: block; padding: 2px 0; border: 0; } }
@media (min-width: 900px) {
	/* photo boxes kept at the library files' 4:3 / 3:2 so each file still covers its box at 2x (retina) */
	.aans__ph { align-self: start; min-height: 0; aspect-ratio: 4 / 3; }
	.bcard:not(.bcard--lead) .bcard__ph { aspect-ratio: 3 / 2; }
}
/* 404 link lists: two columns of links so a short list never leaves a bare block beside a long one (gap gate) */
.nfl__c ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: start; }
@media (min-width: 760px) {
	.nfl__g { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
	.nfl__c:not(:first-child) ul { grid-template-columns: 1fr; }
}
/* footer link lists sit tight on desktop, as the mockup footer does, so the brand and contact columns fill their row */
@media (min-width: 1100px) {
	.ftr__list li + li { margin-top: 0; }
	.ftr__list a { padding-block: 2px; }
}
/* phone tables: the row label spans the card, the values sit side by side under it */
@media (max-width: 599px) {
	.prose tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
	.prose tr > :first-child { grid-column: 1 / -1; }
}
/* two-column tables (label | figure): the figure sits on the right edge of the measure, a ledger, not a half-empty card */
@media (min-width: 600px) { .prose tr:has(> :nth-child(2):last-child) > :last-child { text-align: right; padding-right: 0; } }
/* header phone: fixed box in Figtree tabular digits (Arial digits are 9% narrower, which slid the nav on the font swap) */
@media (min-width: 1260px) { .hdr__phone { display: inline-block; width: 7.3em; } }

/* ================================================================== design loop 1 (2026-11-07) */
/* guide + post head: the photo at its own ratio, sized to its file (>= 2x), beside a compact text column */
.fhead--ledger { padding-block: 24px 40px; }
.fhead--ledger .fhead__ph { aspect-ratio: 4 / 3; }
.fhead--ledger .fhead__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 900px) {
	.fhead--ledger .fhead__g { grid-template-columns: minmax(0, 1fr) var(--pw, 480px); gap: 48px; align-items: center; }
	.fhead--ledger .fhead__h { font-size: clamp(34px, 3.3vw, 46px); max-width: 15em; }
	.fhead--ledger .fhead__p { font-size: 18px; max-width: 34em; }
	.fhead--ledger .fhead__m .crumbs { margin-bottom: 18px; }
}
/* the ledger read (guides, posts): intro prose beside the mosaic index, entries as bento tiles */
.lr--read .lr-intro--read { padding-block: 48px 28px; border-top: 0; }
.lr--read .lr-intro__g { align-items: start; }
.lr-intro__x { margin-top: 14px; font-size: 18px; }
.lr-intro__x > p { max-width: 38em; }
.lr--read .lr-ix__t { font-size: 15px; line-height: 1.3; }
.lr--read .lr-ix--1 .lr-ix__t { font-size: 20px; max-width: none; }
.lr--read .lr-ix a { min-height: 104px; }
.lr--read .lr-op { min-height: 220px; }
.lr--read .lr-op__t { max-width: 15em; font-size: clamp(26px, 2.3vw, 34px); }
.lr--read .lr-row > .lr-op[style*="--sp:12;"] .lr-op__t { max-width: 24em; }
.lr--read .lr-row > .lr-ph { min-height: 240px; }
.lr--read .lr-tx__b h3, .lr--read .lr-tx__b h4 { margin-top: 18px; font: 600 19px/1.3 var(--display); }
.lr--read .lr-tx__b > :first-child { margin-top: 0; }
.lr--read .lr-tx__b ol { padding-left: 22px; }
.lr--read .lr-tx__b ol li::marker { color: var(--orange-text); font-weight: 600; }
.lr--read .lr-tx__b * + ol, .lr--read .lr-tx__b ol + p, .lr--read .lr-tx__b * + table, .lr--read .lr-tx__b table + p, .lr--read .lr-tx__b h3 + p, .lr--read .lr-tx__b h3 + ul { margin-top: 12px; }
.lr--read .lr-tx__b > table { max-width: none; }
.lr--read .lr-tx__b table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.lr--read .lr-tx__b caption { caption-side: top; text-align: left; padding-bottom: 8px; font: 600 15px/1.4 var(--display); color: var(--muted); }
.lr--read .lr-tx__b thead th { padding: 0 14px 10px 0; text-align: left; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); border-bottom: 2px solid var(--ink); }
.lr--read .lr-tx__b td, .lr--read .lr-tx__b tbody th { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; font-weight: 400; }
.lr--read .lr-tx__b td:first-child, .lr--read .lr-tx__b tbody th { font-weight: 600; }
@media (max-width: 599px) {
	.lr--read .lr-tx__b thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.lr--read .lr-tx__b tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
	.lr--read .lr-tx__b tr > :first-child { grid-column: 1 / -1; }
	.lr--read .lr-tx__b td, .lr--read .lr-tx__b tbody th { display: block; padding: 2px 0; border: 0; }
}
.lr-note { display: flex; flex-direction: column; justify-content: center; border-left: 4px solid var(--orange); }
.lr-note__t { margin-top: 8px; font-size: 17px; line-height: 1.6; }
.lr--read .lr-pull { background: var(--grey); }
.lr--read .lr-entry--alt .lr-pull { background: #fff; }
@media (max-width: 759px) { .lr-note { order: 4; } .lr--read .lr-row > .lr-ph { min-height: 0; } }
.read__foot { padding-block: 32px 64px; }
.read__foot-g { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--rule); }
.read__foot .pfile { margin: 0; flex: 1 1 420px; max-width: 760px; }
.read__end { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.read__foot-g > .read__end:only-child { margin-inline: auto; }
/* long single paragraphs flow across the two text columns (avoid-column kept for lists and tables) */
.lr--read .lr-tx--cols .lr-tx__b > p { break-inside: auto; }
.lr--read .lr-tx--cols .lr-tx__b > p, .lr--read .lr-tx--cols .lr-tx__b > ul { max-width: none; }
.lr--read .lr-tx--cols .lr-tx__b { column-gap: 48px; }
.lr--read .lr-tx--cols .lr-tx__b > ul, .lr--read .lr-tx--cols .lr-tx__b > ol { break-inside: auto; }
.lr--read .lr-tx--cols .lr-tx__b li { break-inside: avoid; }
/* costs, about, guarantee, legal: left head; label rail (NOT sticky) + body; tables across the 1240 container */
.ahd--rail { text-align: left; padding-block: 28px 44px; }
.ahd--rail .crumbs ol { justify-content: flex-start; }
.ahd--rail .ahd__h { margin-left: 0; max-width: 18em; }
.ahd--rail .ahd__p { margin-left: 0; max-width: 40em; }
.art--rail { padding-block: 16px 72px; }
.art__row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 64px; row-gap: 20px; padding-block: 44px; border-top: 1px solid var(--rule); }
.art__row:first-child { border-top: 0; }
.art__rail { grid-column: 1; grid-row: 1 / span 1; align-self: start; }
.art__main { grid-column: 2; min-width: 0; }
.art__main > * { max-width: 46em; }
.art__wide { grid-column: 1 / -1; min-width: 0; }
.art__wide.prose table { margin-top: 4px; }
.art--rail .art__n { font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.art--rail .art__k { margin-top: 12px; text-align: left; }
.art--rail .art__n + .art__k { margin-top: 14px; }
.art--rail .art__h { margin: 8px 0 0; max-width: none; text-align: left; font-size: clamp(23px, 2vw, 28px); }
.art--rail .art__h::after { margin: 16px 0 0; }
.art__toc { padding-block: 28px; }
.art__toc-l { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
.art__toc-l a { display: flex; gap: 10px; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.4; }
.art__toc-l a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.art__toc-n { flex: none; font: 500 15px/1.45 var(--display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.art--rail .art__ask { margin: 0; padding-top: 32px; text-align: left; border-top: 2px solid var(--ink); }
.art--rail .art__ask .art__k { margin-top: 0; }
.art__band { margin-block: 4px; }
.art__band--ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.art__band--2 { grid-template-columns: repeat(2, minmax(0, 400px)); }
.art__bph { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.art__bimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.art__band--v { padding: 36px 40px; background: var(--grey); border-radius: var(--r); }
.art__vt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 44px; }
.art__vt-t { padding-left: 28px; border-left: 2px solid var(--ink); font: 600 22px/1.3 var(--display); }
@media (max-width: 899px) {
	.art__row { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
	.art__rail, .art__main, .art__wide { grid-column: 1; }
	.art__rail { grid-row: auto; }
	.art__toc-l { grid-template-columns: 1fr; }
	.art__band--ph { grid-template-columns: 1fr 1fr; gap: 10px; }
	.art__band--ph .art__bph:first-child { grid-column: 1 / -1; }
	.art__band--2 .art__bph:nth-child(2) { grid-column: 1 / -1; }
	.art__vt { gap: 18px 24px; }
	.art__vt-t { padding-left: 0; border-left: 0; width: 100%; text-align: center; }
}
/* home: the two house-front service cards crop to the roof, not the garden wall (portrait 4:5 files in a 1.07 box) */
.scard__img[src*="pitched-roofing-card"], .scard__img[src*="roof-replacement-new-roof-card"] { object-position: 50% 18% !important; }
/* home: the ledger intro sits at the top of its row beside the taller mosaic index (no dead band above the heading) */
@media (min-width: 1100px) { .lr-intro__m { align-self: start; } }
/* home: process staircase stays clear of the photo (the last card no longer overlaps it) */
@media (min-width: 1200px) {
	.process__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 36px; }
	.stairs__step { flex: 0 1 auto; }
	.stairs__step:last-child { margin-right: 0; }
	.stairs__d { white-space: normal; }
}
/* town hero: small-tile caption tabs stay compact (<= 60% wide) so the photo and its lower-right watermark show */
@media (min-width: 900px) {
	.twall__t--sm .tab { left: 8px; bottom: 8px; max-width: 60%; padding: 4px 8px; font-size: 13px; line-height: 1.3; }
	.twall__t--big .tab { max-width: 62%; }
}
/* verdict rows (home + towns): a taller strip so the roofline fills the photo and the watermark stays in frame */
@media (min-width: 1100px) {
	.vrow { min-height: 124px; }
	.vrow__img { object-position: 50% 78% !important; }
}
/* answer: each section a full-width band, every second one grey (section rhythm) */
.asecs--bands { padding-block: 0 48px; }
.asecs--bands .asec { display: block; padding-block: 0; border: 0; }
.asecs--bands .asec:last-child { border-bottom: 0; }
.asecs--bands .asec__g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding-block: 44px; }
.asecs--bands .asec + .asec:not(.asec--alt) .asec__g { border-top: 0; }
.asecs--bands .asec--alt { background: var(--grey); }
.asecs--bands + .faq { border-top: 0; }
@media (max-width: 899px) { .asecs--bands .asec__g { grid-template-columns: 1fr; gap: 10px; padding-block: 32px; } }
/* services index: the odd last card is paired with the "not sure" tile; blog index: three balanced topic columns */
.sidx__cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-height: 196px; padding: 28px 32px; background: var(--orange-tint); border: 1px solid #F6D9CB; border-radius: var(--r); }
.sidx__x { font: 600 22px/1.3 var(--display); max-width: 18em; }
.sidx__after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
@media (min-width: 1100px) {
	.bgroups__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; columns: auto; align-items: start; }
}
@media (max-width: 1099px) { .bgroups__c { display: contents; } }
@media (max-width: 759px) { .sidx__cta { min-height: 0; padding: 22px 20px; } .sidx__x { font-size: 19px; } }
/* quote form: a quiet form skeleton behind the CRM iframe (iframe tag untouched), so the band never reads as a blank box
   while the cross-origin form loads (or where a capture cannot paint it); the loaded form paints over it */
.crm { position: relative; }
.crm::before { content: ''; position: absolute; inset: 24px 24px 24px; z-index: 0; pointer-events: none; border-radius: var(--r);
	background:
		linear-gradient(var(--orange-btn), var(--orange-btn)) 0 calc(100% - 4px) / 180px 44px no-repeat,
		repeating-linear-gradient(to bottom, #E6E7EA 0 12px, transparent 12px 20px, #F1F2F4 20px 62px, #fff 62px 84px) 0 0 / 100% calc(100% - 64px) no-repeat; }
@media (min-width: 760px) { .crm::before { background-size: 200px 44px, calc(50% - 10px) calc(100% - 64px); background-repeat: no-repeat, repeat-x; } }
.crm iframe { position: relative; z-index: 1; }

/* ================================================================== design loop 2 (2026-11-07) */
/* guides + posts: feature flow, no mosaic index, the intro full width (two columns on desktop); each entry opens on its
   title beside one 4:3 photo tile */
.lr-intro__g--solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
	.lr-intro__g--solo .lr-intro__x { columns: 2; column-gap: 56px; }
	.lr-intro__g--solo .lr-intro__x > * { max-width: none; break-inside: avoid-column; }
	.lr-intro__g--solo .lr-intro__x > :first-child { margin-top: 0; }
}
@media (min-width: 760px) {
	.lr--read .lr-row > .lr-ph { min-height: 0; aspect-ratio: 4 / 3; }
}
/* service hub: short data tiles (myth/fact, what sets the price, pull line) size to their content at the top of the row
   instead of stretching round a block of empty space (desktop only; phones already stack) */
@media (min-width: 1100px) {
	.lr--hub .lr-row > .lr-myth, .lr--hub .lr-row > .lr-price, .lr--hub .lr-row > .lr-pull { align-self: start; justify-content: flex-start; }
	.lr--hub .lr-stack > .lr-price { flex: 0 0 auto; justify-content: flex-start; }
}
/* our-guarantee: one calm library photo in the body column in place of the retired stamp strip */
.art__band--one { border-top: 0; padding-block: 8px; }
.art__band--one .art__bph { max-width: 640px; }
/* read openers beside their photo: a title card, the ruled entry line on top and the title set low and large, so the
   height the 4:3 photo gives the row reads as the card's own space, not a gap under the title */
@media (min-width: 760px) {
	.lr--read .lr-op { justify-content: space-between; min-height: 0; }
	.lr--read .lr-op__t { margin-top: 28px; max-width: 14em; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.1; }
}
@media (max-width: 759px) { .lr--read .lr-op { min-height: 0; } }

/* ================================================================== design loop 3 (2026-11-07): guides + posts feature flow (STYLE-GUIDE §9) */
/* scoped to .rf (inc/readflow.php): nothing here reaches home, hubs, towns or answers */
.rf .rf-lab { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.rf-intro { padding-block: 44px 36px; }
.rf-intro__x { font-size: 18px; line-height: 1.7; }
.rf-intro__x > * { max-width: 38em; }
.rf-toc { margin-top: 28px; padding-top: 14px; border-top: 2px solid var(--ink); }
.rf-toc__l { list-style: none; margin-top: 10px; }
.rf-toc__l li + li { border-top: 1px solid var(--rule); }
.rf-toc__l a { display: flex; gap: 14px; padding: 9px 0; font: 500 16px/1.4 var(--display); color: var(--ink); text-decoration: none; }
.rf-toc__l a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.rf-toc__n { flex: none; width: 2ch; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--orange-text); }
.rf-e { padding-block: 52px; border-top: 1px solid var(--rule); }
.rf-e--grey { background: var(--grey); border-top-color: transparent; }
.rf-e--grey + .rf-e { border-top-color: transparent; }
.rf-op__k { display: flex; align-items: center; gap: 12px; font: 600 13px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.rf-op__n { display: inline-flex; align-items: center; gap: 12px; color: var(--orange-text); font-variant-numeric: tabular-nums; }
.rf-op__n::before { content: ""; width: 28px; height: 3px; background: var(--orange); }
.rf-op__t { margin-top: 12px; max-width: 21em; font: 700 clamp(26px, 2.4vw, 34px)/1.15 var(--display); letter-spacing: -.012em; }
.rf-op + .rf-tx { margin-top: 18px; }
.rf-tx { font-size: 17px; line-height: 1.65; }
.rf-tx > * { max-width: 40em; }
.rf-row + .rf-row, .rf-pull + .rf-row, .rf-row + .rf-pull { margin-top: 32px; }
.rf-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rf-main { min-width: 0; }
/* side modules */
.rf-panel { padding: 24px 28px; border-radius: var(--r); background: var(--grey); border-top: 3px solid var(--orange); font-size: 16px; }
.rf-e--grey .rf-panel, .rf-e--grey .rf-qa, .rf-e--grey .rf-note { background: #fff; }
.rf-panel.prose > :first-child, .rf-panel table:first-child { margin-top: 0; }
.rf-panel--table { border-top: 0; padding: 24px 28px 12px; }
.rf-qa { padding: 22px 24px; border-radius: var(--r); background: var(--grey); border-top: 3px solid var(--orange); }
.rf-qa__q { margin-top: 4px; font: 600 19px/1.3 var(--display); }
.rf-qa__a { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.rf-qa__a p + p { margin-top: 8px; }
.rf-note { padding: 22px 24px; border-radius: 0 var(--r) var(--r) 0; background: var(--grey); border-left: 4px solid var(--orange); }
.rf-note__t { margin-top: 8px; font-size: 16px; line-height: 1.6; }
.rf-ph { position: relative; margin: 0; width: 100%; max-width: var(--pw, 480px); border-radius: var(--r); overflow: hidden; background: var(--grey); }
.rf-ph__img { width: 100%; height: 100%; object-fit: cover; }
.rf-ph .tab { max-width: calc(100% - 96px); }
/* pull band */
.rf-pull { margin: 32px 0 0; padding: 6px 0 6px 28px; border-left: 4px solid var(--orange); }
.rf-pull p { max-width: 30em; font: italic 600 clamp(22px, 2vw, 29px)/1.3 var(--display); }
/* card row: a short list set as numbered cards */
.rf-cards__lead { margin-bottom: 16px; font-size: 17px; }
.rf-cards__lead > * { max-width: 40em; }
.rf-cards__l { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.rf-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--rule); font-size: 16px; line-height: 1.55; }
.rf-e:not(.rf-e--grey) .rf-card { background: var(--grey); border-color: transparent; }
.rf-card__n { font: 700 26px/1 var(--display); color: var(--orange-text); font-variant-numeric: tabular-nums; }
.rf-card__t a { color: var(--orange-text); text-underline-offset: 3px; }
.rf-faqline { padding-block: 24px 0; font-size: 17px; }
@media (min-width: 1000px) {
	.rf-intro__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
	.rf-intro__m { grid-column: 1 / span 7; }
	.rf-toc { grid-column: 8 / span 5; margin-top: 4px; }
	.rf-row--split, .rf-row--close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
	.rf-row--split > .rf-main, .rf-row--close > .rf-main { grid-column: 1 / span 7; grid-row: 1; }
	.rf-row--split > .rf-side, .rf-row--close > .rf-side { grid-column: 8 / span 5; grid-row: 1; }
	.rf-e--flip .rf-row--split > .rf-main, .rf-e--flip .rf-row--close > .rf-main { grid-column: 6 / span 7; }
	.rf-e--flip .rf-row--split > .rf-side, .rf-e--flip .rf-row--close > .rf-side { grid-column: 1 / span 5; }
	.rf-row--photo > .rf-side { align-items: flex-end; }
	.rf-e--flip .rf-row--photo > .rf-side { align-items: flex-start; }
	.rf-row--close > .rf-side--wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.rf-row--solo > .rf-tx--7 { max-width: calc(7 / 12 * 100%); }
	.rf-tx--cols { columns: 2; column-gap: 48px; }
	.rf-tx--cols > * { max-width: none; break-inside: avoid-column; }
	.rf-panel--table.rf-panel { padding: 28px 32px 16px; }
	.rf-row--feat > .rf-panel--list { max-width: calc(7 / 12 * 100%); }
}
@media (max-width: 999px) {
	.rf-side { margin-top: 24px; }
	.rf-row--close > .rf-side:first-child { margin-top: 0; }
	.rf-e { padding-block: 40px; }
}
@media (max-width: 599px) {
	.rf-e { padding-block: 32px; }
	.rf-panel, .rf-panel--table { padding: 18px 18px 8px; }
	.rf-cards__l { grid-template-columns: 1fr; gap: 10px; }
	.rf-card { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px 18px; }
	.rf-card__n { font-size: 20px; }
	.rf-pull { padding-left: 18px; }
	.rf-toc__l a { font-size: 15px; }
}
.rf-e--grey + .rf-e--grey { border-top-color: var(--rule); }
.rf-panel td, .rf-panel tbody th { overflow-wrap: break-word; }
@media (min-width: 1000px) {
	/* a long list with no side module: two columns across the full measure, never a 7-col block beside empty space */
	.rf-row--feat > .rf-panel--list { max-width: none; }
	.rf-row--feat > .rf-panel--list > ul, .rf-row--feat > .rf-panel--list > ol { columns: 2; column-gap: 48px; }
	.rf-row--feat > .rf-panel--list li { break-inside: avoid; }
	.rf-row--feat > .rf-panel--list > ol { padding-left: 24px; }
}
/* town ledger (tier light only, .lr--light): a lone full-width text tile is sized to its text, never a 12-col box with
   the words in its left half; a lone list tile sets its list in two columns across the tile */
@media (min-width: 1100px) {
	.lr--light .lr-row > .lr-tx:only-child:not(:has(ul, ol, table)) .lr-tx__b { columns: 2; column-gap: 40px; }
	.lr--light .lr-row > .lr-tx:only-child:not(:has(ul, ol, table)) .lr-tx__b > p { max-width: none; break-inside: auto; }
	.lr--light .lr-row > .lr-tx:only-child:has(> .lr-tx__b > ul) .lr-tx__b > ul { columns: 2; column-gap: 40px; max-width: none; }
	.lr--light .lr-row > .lr-tx:only-child:has(> .lr-tx__b > ul) .lr-tx__b li { break-inside: avoid; }
	.lr--light .lr-row > .lr-tx:only-child:has(> .lr-tx__b > ul) .lr-tx__b > p { max-width: none; }
	/* a stack of photo over a data tile: the data tile sized to its figure */
	.lr--light .lr-stack > .lr-fig, .lr--light .lr-stack > .lr-myth, .lr--light .lr-stack > .lr-qa { flex: 0 0 auto; }
}
@media (min-width: 1100px) {
	/* town: text beside a photo-over-figure stack; the photo gives way so the stack ends level with the text */
	.lr--light .lr-stack:has(> .lr-ph) > .lr-ph { min-height: 150px; }
	.lr--light .lr-stack > .lr-fig { padding-block: 22px; }
}
.rf-intro__more { margin-top: 20px; }
@media (min-width: 1000px) {
	.rf-intro__more.rf-tx--cols { columns: 2; column-gap: 48px; }
	.rf-intro__more.rf-tx--cols > * { max-width: none; break-inside: avoid-column; }
	/* a short lead sits beside its opener (no 7-col text with an empty right half) */
	.rf-row--beside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
	.rf-row--beside > .rf-op { grid-column: 1 / span 5; }
	.rf-row--beside > .rf-tx { grid-column: 6 / span 7; max-width: none; margin-top: 30px; }
	/* asides with no closing text beside them run as a full-width band (beats the flip placement) */
	.rf-e .rf-row--close > .rf-side--wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	/* a lone Q&A or note in that band: question left, answer right */
	.rf-e .rf-side--wide > .rf-qa:only-child, .rf-e .rf-side--wide > .rf-note:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; align-items: start; }
	.rf-e .rf-side--wide > .rf-qa:only-child > .rf-lab, .rf-e .rf-side--wide > .rf-note:only-child > .rf-lab { grid-column: 1; }
	.rf-e .rf-side--wide > .rf-qa:only-child > .rf-qa__q { grid-column: 1; }
	.rf-e .rf-side--wide > .rf-qa:only-child > .rf-qa__a, .rf-e .rf-side--wide > .rf-note:only-child > .rf-note__t { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* the entry opener's ruled line: number and subject over a hairline that runs the opener's full measure (a ledger rule,
   STYLE-GUIDE §9 "ruled line"), so a short title never reads as a stray heading in open space */
.rf-op__k { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.rf-e--grey .rf-op__k { border-bottom-color: #D3D4D8; }
@media (min-width: 1000px) { .rf-e { padding-block: 44px; } .rf-intro { padding-bottom: 28px; } }
@media (min-width: 1000px) {
	/* two-column text: paragraphs flow across the column break (a single long paragraph never sits in column one alone) */
	.rf .rf-tx--cols > p { break-inside: auto; }
}
@media (min-width: 1000px) {
	/* card rows: columns by item count (6 -> 3 x 2), so a last card never sits alone with open space beside it */
	.rf-cards__l[style*="--n"] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
}
/* loop 4: costs / about band captions. Below 1100px the three tiles are too narrow for an overlaid tab (it wrapped to one word per line and
   covered the photo), so the tab sits under the photo; the full-width first tile under 900px keeps its overlay. */
@media (max-width: 1099px) {
	.art__band--ph .art__bph { display: flex; flex-direction: column; }
	.art__band--ph .art__bph .tab { position: static; max-width: none; margin: 0; padding: 7px 10px 8px; border-radius: 0; box-shadow: none; background: transparent; font-size: 13px; line-height: 1.35; }
}
@media (max-width: 899px) {
	.art__band--ph .art__bph:first-child .tab { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 96px); padding: 6px 12px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(34, 31, 32, .12); font-size: 14px; }
}
/* loop 4: About rows sized to their content. The 46em text measure left a wide empty band beside each short row, so on desktop the
   body flows across two columns (the last row, a short call to action, stays one column), and the gap before the quote form closes. */
@media (min-width: 900px) {
	.art--about .art__row { padding-block: 36px; }
	.art--about .art__s:not(:last-child) .art__main > * { max-width: none; }
	.art--about .art__s:not(:last-child) .art__main.prose { columns: 2; column-gap: 48px; }
	.art--about .art__s:not(:last-child) .art__main.prose > * { break-inside: avoid-column; }
	.art--about .art__s:not(:last-child) .art__main.prose > p:only-child { break-inside: auto; }
	.art--about .art__s:last-child { padding-bottom: 8px; }
	.art--rail.art--about { padding-bottom: 24px; }
}

/* 2026-11-09 (kept from hero pass d): phones get a shorter header bar; the logo stays whole and legible at 110px */
@media (max-width: 599px) { :root { --hdr: 58px; } .hdr__logo img { width: 110px; } }