/*
 * Castle Roofing Margate: mockup B "Dark · type-led · bold and direct" (STYLE-GUIDE.md, design-dna.json,
 * MOTION-PROFILE.md). One stylesheet: tokens, base, every band, the A8 long read, reading treatments, motion.
 * Rules carried from the skill: grid tracks are minmax(0,1fr) (§7c.1); dark grounds add ONE class .on-dark (§7c.3);
 * no vertical margin on a full-bleed band (§7c.4); hidden states only under html.js-motion (§7c.6); nothing sticky
 * except the header and the mobile CTA bar; tables fit and never scroll; square corners everywhere; no gradients
 * except the photo scrims and seams the style guide asks for.
 */

/* ------------------------------------------------------------------ tokens */
:root {
	--navy: #093969;
	--ink-g: #01152A;      /* near-black ground */
	--red: #C2272D;
	--red-hover: #A81F25;
	--red-dk: #FF7A7A;     /* red WORDS under 24px on dark grounds (4.62 on navy, 7.28 on ink) */
	--white: #FFFFFF;
	--pale: #EDF1F7;
	--muted: #B9C6D8;      /* secondary text on dark */
	--text: #0B1B2E;       /* body on light */
	--text-2: #42536A;     /* secondary on light (7.6 on white) */
	--rule: #D5DCE6;
	--rule-dk: #1E3D63;
	--f-d: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', Arial, sans-serif;
	--f-b: 'Barlow', 'Barlow Fallback', Arial, sans-serif;
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
	--pad: clamp(56px, 7vw, 96px);
	--wrap: 1240px;
	--gut: 32px;
	--head-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 767px) { :root { --gut: 16px; } }
@media (max-width: 1023px) { :root { --head-h: 60px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
html.nav-open { overflow: hidden; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 18px/1.7 var(--f-b); overflow-x: clip; }
@media (max-width: 767px) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--white); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-d); line-height: 1.05; color: var(--navy); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.wrap--read { max-width: calc(760px + 2 * var(--gut)); }
.wrap--mid { max-width: calc(980px + 2 * var(--gut)); }
.band { padding: var(--pad) 0; margin: 0; position: relative; }

/* Dark grounds: the ONE correction class (§7c.3). Specificity (0,2,1) outranks the light defaults. */
.on-dark { color: var(--white); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .sec-h { color: var(--white); }
.on-dark a:not(.btn) { color: var(--white); }
.on-dark .kicker { color: var(--red-dk); }
.on-dark .src, .on-dark .muted { color: var(--muted); }
.on-dark .stop { --stop: var(--red); }

/* ------------------------------------------------------------------ type voices */
.kicker { font: 600 14px/1.3 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 var(--s3); }
.sec-h { font: 800 clamp(40px, 5.2vw, 72px)/.92 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; color: var(--navy); margin: 0 0 var(--s6); }
.sec-h--light { font: 600 clamp(30px, 3.4vw, 48px)/1.02 var(--f-d); text-transform: none; letter-spacing: 0; }
/* The decorative contrast full stop (aria-hidden): drawn as the mockup's SQUARE, the glyph kept for spacing only. */
.stop { position: relative; display: inline-block; color: transparent; --stop: var(--red); }
.stop::after { content: ''; position: absolute; left: .02em; bottom: .03em; width: .17em; height: .17em; background: var(--stop); }
.src { font: 500 13px/1.4 var(--f-d); letter-spacing: .06em; color: var(--text-2); margin: var(--s3) 0 0; }
.sec-intro { max-width: 68ch; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px; border: 1px solid transparent; border-radius: 0; font: 600 20px/1.1 var(--f-d); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-hover); color: var(--white); }
.btn--outline { border-color: var(--white); color: var(--white); background: transparent; }
.btn--outline:hover { background: rgba(255, 255, 255, .08); }
.btn--line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--line:hover { background: rgba(9, 57, 105, .06); }
.on-dark .btn--line { border-color: var(--white); color: var(--white); }

/* ------------------------------------------------------------------ header (hanging plate) */
.head { position: sticky; top: 0; z-index: 60; background: var(--navy); height: var(--head-h); }
.head__in { position: relative; display: flex; align-items: center; gap: var(--s5); height: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.plate { display: block; background: var(--white); line-height: 0; flex: none; }
.head .plate { position: absolute; left: var(--gut); top: 0; width: 196px; padding: 12px 14px 10px; z-index: 2; }
.head .plate img { width: 100%; height: auto; }
.nav { margin-left: calc(196px + var(--s5)); flex: 1 1 auto; min-width: 0; }
.nav__list { list-style: none; display: flex; align-items: center; gap: var(--s5); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__a { color: var(--white); text-decoration: none; font: 700 18px/1 var(--f-d); letter-spacing: .05em; text-transform: uppercase; padding: 10px 0; white-space: nowrap; }
.nav__a:hover, .nav__a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red-dk); }
.nav__caret { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; margin-left: -2px; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; }
.nav__caret .ico { width: 18px; height: 18px; transition: transform .15s; }
.nav__caret[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__sub { list-style: none; position: absolute; top: calc(100% + 8px); left: -16px; min-width: 300px; background: var(--white); border-top: 3px solid var(--red); padding: var(--s2) 0; display: none; box-shadow: 0 16px 40px rgba(1, 21, 42, .3); }
.nav__sub.is-open { display: block; }
/* Pointer hover opens it with no JS at all (site.js mirrors aria-expanded); keyboard and touch use the caret button. */
@media (min-width: 1024px) { .nav__item--sub:hover > .nav__sub { display: block; } }
.nav__sub a { display: block; padding: 9px 20px; color: var(--navy) !important; text-decoration: none; font: 600 17px/1.25 var(--f-d); letter-spacing: .02em; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--pale); }
.nav__sub-all a { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--red) !important; border-top: 1px solid var(--rule); margin-top: 4px; }
.nav__m { display: none; }
.head__phone { margin-left: auto; color: var(--white) !important; text-decoration: none; font: 800 28px/1 var(--f-d); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.head__cta { flex: none; min-height: 40px; padding: 8px 16px; font: 700 18px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; }
.burger { display: none; }

@media (min-width: 1024px) and (max-width: 1239px) {
	.head .plate { width: 156px; padding: 10px 11px 8px; }
	.nav { margin-left: calc(156px + var(--s4)); }
	.nav__list { gap: var(--s4); }
	.nav__a { font-size: 17px; letter-spacing: .03em; }
	.head__in { gap: var(--s4); }
	.head__phone { font-size: 23px; }
}
@media (max-width: 1023px) {
	.head .plate { position: static; width: 112px; padding: 6px 8px; }
	.nav { margin: 0; position: fixed; left: 0; right: 0; top: var(--head-h); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-g); padding: var(--s4) var(--gut) var(--s6); display: none; border-top: 3px solid var(--red); }
	.nav.is-open { display: block; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--rule-dk); }
	.nav__a { flex: 1; padding: 14px 0; font-size: 22px; }
	.nav__caret { width: 44px; height: 48px; }
	/* the submenu restyled for the dark panel (§7b.5): no light card, no min-width, no shadow */
	.nav__sub { position: static; min-width: 0; width: 100%; background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--s3) var(--s4); }
	.nav__sub a { color: var(--white) !important; padding: 10px 0; font-size: 19px; }
	.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: transparent; text-decoration: underline; } /* a11y fix 2026-11-01: pale bg under white text on the dark panel */
	.nav__sub-all a { color: var(--red-dk) !important; border-top: 0; }
	.nav__m { display: grid; gap: var(--s3); margin-top: var(--s5); }
	.head__phone { font-size: 22px; }
	.head__cta { padding: 8px 12px; font-size: 16px; }
	.burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: var(--white); cursor: pointer; }
	.burger .ico { width: 24px; height: 24px; }
	.burger__close { display: none; }
	.burger[aria-expanded="true"] .burger__open { display: none; }
	.burger[aria-expanded="true"] .burger__close { display: inline; }
}
@media (max-width: 479px) {
	.head__in { gap: var(--s2); }
	.head .plate { width: 96px; padding: 5px 6px; }
	.head__phone { font-size: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .5); }
	.head__phone::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5.2 3.5h3.6l1.8 4.6-2.4 1.6a11.5 11.5 0 0 0 6.1 6.1l1.6-2.4 4.6 1.8v3.6a1.7 1.7 0 0 1-1.8 1.7A16.4 16.4 0 0 1 3.5 5.3a1.7 1.7 0 0 1 1.7-1.8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5.2 3.5h3.6l1.8 4.6-2.4 1.6a11.5 11.5 0 0 0 6.1 6.1l1.6-2.4 4.6 1.8v3.6a1.7 1.7 0 0 1-1.8 1.7A16.4 16.4 0 0 1 3.5 5.3a1.7 1.7 0 0 1 1.7-1.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
	.head__cta { font-size: 15px; padding: 8px 10px; }
}

/* ------------------------------------------------------------------ crumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 500 16px/1.4 var(--f-b); margin: 0 0 var(--s4); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .7; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: var(--navy); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg .hero__img, .hero__bg .ph { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: rgba(1, 27, 55, .72); }
.hero__in { position: relative; z-index: 1; }
.hero__h { font: 800 clamp(56px, 8.4vw, 128px)/.92 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; color: var(--white); margin: 0 0 var(--s4); }
.hero__lede { font: 500 clamp(18px, 1.6vw, 22px)/1.45 var(--f-b); color: var(--white); margin: 0 auto var(--s5); max-width: 62ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.hero__note { margin: 0; font: 500 18px/1.25 var(--f-d); max-width: 13em; }
.hero__note a { color: var(--white); }
.hero__k { margin-bottom: var(--s4); }

.hero--home, .hero--area { text-align: center; }
.hero--home .hero__in { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(40px, 4vw, 56px); }
.hero--area .hero__in { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(40px, 4vw, 56px); }
.hero--home .hero__ctas, .hero--area .hero__ctas { justify-content: center; }
.hero--home .hero__note, .hero--area .hero__note { text-align: left; }
.hero--area .crumbs ol { justify-content: center; }
.hero--area .hero__h { font-size: clamp(48px, 7vw, 108px); }

.hero--service .hero__in { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero--service .hero__h { max-width: 7.4em; }
.hero--service .hero__lede { margin-left: 0; }
.hero--service .hero__bg::after { background: rgba(1, 27, 55, .66); }

.hero--plain { background: var(--navy); }
.hero--plain .hero__in { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero--plain .hero__h { font-size: clamp(44px, 6vw, 92px); max-width: 14em; }
.hero--plain .hero__lede { margin-left: 0; color: var(--muted); }

.hero--page { background: var(--ink-g); }
.hero--page .hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero--page .hero__h { font-size: clamp(40px, 5.2vw, 80px); }
.hero--page .hero__lede { margin-left: 0; color: var(--muted); }
.hero__side { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
.hero__side .hero__img, .hero__side .ph { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%); mask-image: linear-gradient(to right, transparent 0, #000 28%); }

/* hanging plate clearance: the plate hangs ~38px below the bar at desktop */
@media (min-width: 1024px) {
	.hero--home .hero__in, .hero--service .hero__in, .hero--area .hero__in, .hero--plain .hero__in, .hero--page .hero__in { padding-top: max(var(--hero-top, 0px), 104px); }
}
@media (max-width: 1023px) {
	.hero--page .hero__in { grid-template-columns: minmax(0, 1fr); }
	.hero__side { position: relative; width: auto; height: 240px; margin: calc(-1 * var(--s5)) 0 0; }
	.hero--page { display: flex; flex-direction: column-reverse; }
	.hero__side .hero__img, .hero__side .ph { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
	.hero--home .hero__h { font-size: clamp(52px, 15vw, 96px); }
}

/* "What needs doing?" options: a real fieldset of square choices */
.opts { margin: var(--s5) auto var(--s5); max-width: 1100px; }
.opts__q { font: 700 20px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; margin: 0 auto var(--s4); padding: 0; color: var(--white); }
.opts__list { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.opt { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 10px 12px; border: 1px solid var(--white); background: rgba(1, 21, 42, .45); color: var(--white) !important; text-decoration: none; font: 500 22px/1.15 var(--f-d); text-align: center; transition: background-color .15s; }
.opt:hover, .opt.is-picked { background: var(--red); border-color: var(--red); }
@media (max-width: 1023px) { .opts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
@media (max-width: 599px) { .opts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } .opt { min-height: 60px; font-size: 19px; } .hero__ctas .btn { flex: 1 1 100%; } .hero__note { max-width: none; } }

/* ------------------------------------------------------------------ trust: the one red band */
.trust { background: var(--red); padding: var(--s5) 0; color: var(--white); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); text-align: center; align-items: center; }
.trust__i { font: 800 clamp(24px, 3vw, 48px)/.95 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
@media (min-width: 768px) and (max-width: 1100px) { .trust__i { font-size: 3vw; } }
.trust .stop { --stop: var(--ink-g); }
@media (max-width: 767px) { .trust__list { grid-template-columns: minmax(0, 1fr); gap: var(--s2); text-align: left; } .trust__i { font-size: 30px; } }

/* ------------------------------------------------------------------ ruled rows (problem / signs / town rows) */
.rows { background: var(--navy); overflow: hidden; padding: clamp(48px, 5vw, 72px) 0; }
.rows__ph { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.rows__ph .rows__img, .rows__ph .ph { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%); mask-image: linear-gradient(to right, transparent 0, #000 32%); }
.rows__in { position: relative; z-index: 1; }
/* one shared word column (subgrid-free: the list is the grid), so every short line starts at the same x */
.rows__list { list-style: none; max-width: 56%; display: grid; grid-template-columns: fit-content(62%) minmax(0, 1fr); column-gap: var(--s6); }
.rows__i { display: contents; }
.rows__w, .rows__t { padding: var(--s3) 0; }
.rows__i + .rows__i .rows__w, .rows__i + .rows__i .rows__t { border-top: 2px solid var(--red); }
.rows__w { margin: 0; font: 800 clamp(40px, 4.7vw, 76px)/.92 var(--f-d); text-transform: uppercase; color: var(--white); letter-spacing: -.005em; align-self: stretch; display: flex; align-items: center; }
.rows__t { align-self: stretch; display: flex; align-items: center; }
.rows .stop { --stop: var(--white); }
/* One-line rows (hub signs, town rows; judge loop 2): the word never wraps at >=1024; its size follows the longest word. */
@media (min-width: 1024px) {
	.rows--line .rows__list { max-width: 74%; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s5); }
	.rows--line .rows__w { white-space: nowrap; font-size: clamp(34px, calc(min(100vw, 1440px) * .4 / (var(--wl, 16) * .5)), 68px); }
	.rows--line .rows__t { font-size: 19px; }
	.rows--line .rows__ph { width: 30%; }
}
.rows__t { margin: 0; font: 500 20px/1.4 var(--f-b); color: var(--white); }
@media (max-width: 1023px) {
	.rows { padding-top: 0; }
	.rows__ph { position: relative; width: auto; height: 260px; margin-bottom: var(--s5); }
	.rows__ph .rows__img, .rows__ph .ph { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
	.rows__list { max-width: none; }
}
@media (max-width: 599px) { .rows__list { grid-template-columns: minmax(0, 1fr); } .rows__w { font-size: 44px; white-space: normal; padding-bottom: 0; } .rows__t { font-size: 18px; padding-top: var(--s2); } .rows__i + .rows__i .rows__t { border-top: 0; } }

/* ------------------------------------------------------------------ the pinned roof */
.pinned { background: var(--ink-g); padding-bottom: 0; overflow: hidden; }
.pinned__head .kicker { color: var(--white); font-size: 16px; }
.pinned__head .sec-h { margin-bottom: var(--s5); }
.pinned__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s6); padding-right: max(var(--gut), (100vw - var(--wrap)) / 2); align-items: start; }
.pinned__ph { position: relative; }
.pinned__ph .pinned__img, .pinned__ph .ph { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.pinned__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pinned__lines line { stroke: var(--white); stroke-width: 1.75; vector-effect: non-scaling-stroke; transform-origin: center; }
.pinned__lines circle { fill: var(--white); }
.pin { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--red); color: var(--white); font: 700 21px/1 var(--f-d); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; cursor: default; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: box-shadow .15s; }
.pin.is-hot, .pin:focus-visible { box-shadow: 0 0 0 2px var(--white), 0 2px 10px rgba(0, 0, 0, .35); outline: 0; }
.pinned__key { padding: var(--s2) 0 var(--pad); }
.key { list-style: none; }
.key__i a, .key__a { display: flex; gap: var(--s4); align-items: baseline; padding: 5px 0; color: var(--white) !important; text-decoration: none; font: 700 clamp(22px, 2vw, 28px)/1.15 var(--f-d); text-transform: uppercase; }
.key__n { color: var(--red-dk); font-variant-numeric: tabular-nums; min-width: 1.4em; transition: color .15s; }
.key__i.is-hot .key__n, .key__i a:hover .key__n { color: var(--white); }
.key__i a:hover .key__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.also__k { margin: var(--s5) 0 var(--s2); padding-top: var(--s4); border-top: 2px solid var(--red); font: 700 22px/1 var(--f-d); text-transform: uppercase; color: var(--red-dk); }
.also { list-style: none; }
.also a, .also span { display: inline-block; padding: 3px 0; color: var(--white) !important; text-decoration: none; font: 700 20px/1.2 var(--f-d); text-transform: uppercase; letter-spacing: .02em; }
.also a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
	.pinned__grid { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.pinned__key { padding: var(--s5) var(--gut) var(--pad); }
	.pin { width: 28px; height: 28px; font-size: 14px; }
}

/* service "What we fix" */
.fix { background: var(--ink-g); padding: 0; overflow: hidden; }
.fix__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; padding-left: max(var(--gut), (100vw - var(--wrap)) / 2); }
.fix__text { padding: var(--pad) var(--s6) var(--pad) 0; }
.fix .pinned__ph .pinned__img, .fix .pinned__ph .ph { height: 100%; min-height: 420px; aspect-ratio: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.fix__p { margin-top: var(--s5); color: var(--muted); }
@media (max-width: 1023px) { .fix__grid { grid-template-columns: minmax(0, 1fr); padding: 0; } .fix__text { padding: var(--pad) var(--gut) var(--s5); } .fix .pinned__ph .pinned__img, .fix .pinned__ph .ph { min-height: 0; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; } }

/* ------------------------------------------------------------------ the bleeding 10 */
.ten { background: var(--white); overflow: hidden; padding: clamp(40px, 4vw, 56px) 0; }
/* The numeral is set tall (scaleY) like the mockup's condensed 10, from the section's top edge, cropped left and bottom. */
.ten { --tn: clamp(240px, 33vw, 470px); }
.ten__n { position: absolute; left: -.07em; top: -.02em; margin: 0; font: 800 var(--tn)/.74 var(--f-d); color: var(--red); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transform: scaleY(1.56); transform-origin: top left; pointer-events: none; user-select: none; }
.ten__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; padding-left: calc(var(--tn) * .9); min-height: calc(var(--tn) * .74); }
.ten__cert { border-top: 4px double var(--navy); border-bottom: 4px double var(--navy); padding: var(--s5) 0; }
.ten__h { font: 800 clamp(30px, 3.3vw, 52px)/.98 var(--f-d); text-transform: uppercase; color: var(--navy); margin: 0 0 var(--s4); }
.ticks { list-style: none; margin: 0 0 var(--s5); }
.ticks li { display: flex; gap: var(--s3); align-items: center; font: 500 20px/1.5 var(--f-b); color: var(--navy); }
.ticks .ico { width: 26px; height: 26px; color: var(--red); stroke-width: 2.6; flex: none; }
.ten__ctas { margin: 0 0 var(--s3); }
.ten__g { margin: 0; font: 500 19px/1.4 var(--f-b); }
.ten__seal .seal { width: clamp(150px, 15vw, 220px); height: auto; }
.ten--compact { --tn: clamp(200px, 22vw, 320px); }
@media (max-width: 1023px) { .ten, .ten--compact { --tn: clamp(180px, 50vw, 300px); } .ten__in { grid-template-columns: minmax(0, 1fr); padding-left: var(--gut); padding-top: calc(var(--tn) * .74 * 1.56 - 24px); min-height: 0; } .ten__n { top: -.04em; } .ten__seal { position: absolute; right: var(--gut); top: 0; } .ten__seal .seal { width: 112px; } }

/* ------------------------------------------------------------------ process (lighter register) */
.process { background: var(--ink-g); padding: clamp(48px, 5vw, 72px) 0; }
.process__panel { background: var(--navy); border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; padding: var(--s6) var(--s6) var(--s7); }
.process__k { text-align: center; color: var(--muted) !important; letter-spacing: .3em; font-size: 16px; margin-bottom: var(--s5); }
/* Steps sit at their natural widths with a fixed gap; each arrow is centred in the gap after its step. */
.steps { --sg: clamp(48px, 6vw, 96px); list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; gap: var(--sg); }
.steps__i { position: relative; text-align: center; flex: 0 1 auto; min-width: 0; }
.steps__t { margin: 0; font: 600 clamp(30px, 3.3vw, 48px)/1 var(--f-d); color: var(--white); white-space: nowrap; }
.steps__d { margin: var(--s2) 0 0; font: 500 20px/1.3 var(--f-d); color: var(--muted); }
.steps__arr { position: absolute; left: calc(100% + var(--sg) / 2 - 18px); top: .3em; width: 36px; height: 22px; fill: none; stroke: var(--red-dk); stroke-width: 3; }
/* Overlap fix (visual review 2026-11-01): real step titles ("Call or WhatsApp", "Roof inspection") are longer than the
   mockup's one-word steps and ran into each other under nowrap. Desktop: equal-width steps, titles wrap. */
@media (min-width: 1024px) { .steps__i { flex: 1 1 0; } .steps__t { white-space: normal; text-wrap: balance; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.05; } }
.steps--light { display: grid; }
.steps--light .steps__t { color: var(--red); font-weight: 800; }
.steps--light .steps__d { color: var(--text); font-family: var(--f-b); font-size: 18px; }
.steps--light { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.steps--light .steps__i { text-align: left; border-top: 2px solid var(--navy); padding-top: var(--s4); }
@media (max-width: 1023px) {
	.process__panel { padding: var(--s5) var(--s4); }
	.steps { flex-direction: column; align-items: center; gap: var(--s5); }
	.steps__arr { position: static; margin: var(--s3) auto 0; transform: rotate(90deg); }
	.steps--light { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ areas: the type wall */
.areas { background: var(--white); }
.areas .sec-h--light { font-size: clamp(36px, 4.6vw, 64px); }
.areas__p { max-width: 68ch; }
.wall { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
.wall__i { display: inline-flex; align-items: baseline; font: 600 clamp(30px, 3.5vw, 54px)/1.15 var(--f-d); color: var(--navy); }
.wall__i a, .wall__i > span:first-child { color: var(--navy); text-decoration: none; }
.wall__i a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.wall__m { font: 600 .44em/1 var(--f-d); text-transform: uppercase; color: var(--red); margin-left: .3em; letter-spacing: .02em; }
.wall__s { margin: 0 .5em; color: var(--navy); font-weight: 400; }
.areas__all { margin: var(--s6) 0 0; font: 500 20px/1.4 var(--f-b); }
.areas__all a { color: var(--text); text-decoration-color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.wall--small .wall__i { font-size: clamp(24px, 2.2vw, 32px); }
.wall--idx .wall__i { font-size: clamp(24px, 2.4vw, 34px); }
.on-dark .wall__i, .on-dark .wall__i a, .on-dark .wall__s { color: var(--white); }
.agroup { padding-top: var(--s6); }
.agroup + .agroup { margin-top: var(--s6); border-top: 2px solid var(--navy); }
.agroup__h { font: 800 clamp(28px, 3vw, 40px)/1 var(--f-d); text-transform: uppercase; color: var(--navy); margin: 0 0 var(--s4); }
.agroup__h span, .idx__gh span { color: var(--red); }
@media (max-width: 599px) { .wall__i { font-size: 30px; } .wall__s { margin: 0 .35em; } }

/* jump row (indexes): square chips */
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.jump a { display: inline-block; padding: 8px 14px; border: 1px solid var(--navy); color: var(--navy); text-decoration: none; font: 600 17px/1.2 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
.jump a:hover { background: var(--navy); color: var(--white); }
.jump span { color: var(--red); }
.jump a:hover span { color: var(--red-dk); }

/* ------------------------------------------------------------------ quote band */
.quote { background: var(--navy); }
.quote__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s4); }
.quote__head { text-align: center; }
.quote__h { margin-bottom: var(--s3); font-size: clamp(40px, 5vw, 72px); }
.quote__p { max-width: 60ch; margin: 0 auto; color: var(--muted); }
.quote__need { margin: var(--s3) 0 0; font: 600 18px/1.3 var(--f-d); color: var(--white); }
.quote__form { width: 100%; max-width: 760px; }
.quote__card, .contact .quote__card { background: var(--white); padding: var(--s4); box-shadow: 0 12px 40px rgba(1, 21, 42, .35); }
.crm iframe { display: block; width: 100%; border: 0; min-height: 510px; }
.quote__direct { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin: var(--s5) 0 var(--s3); }
.quote__direct .btn { min-width: 210px; }
p.crm-guarantee { font: 500 19px/1.4 var(--f-b); margin: 0; }
.quote__g { text-align: center; }
.quote--split .quote__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; justify-items: stretch; gap: var(--s7); }
.quote--split .quote__head { text-align: left; }
.quote--split .quote__p { margin: 0; }
.quote--split .quote__direct { justify-content: flex-start; }
@media (max-width: 1023px) { .quote--split .quote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
@media (max-width: 599px) { .quote__direct .btn { flex: 1 1 100%; min-width: 0; } .quote__card { padding: var(--s2); } }

/* ------------------------------------------------------------------ FAQ (pale) */
.faq { background: var(--pale); }
.faq__h { font-size: clamp(34px, 3.8vw, 52px); margin-bottom: var(--s5); }
.faq__list { display: grid; gap: var(--s2); }
.faq__i { background: var(--white); border: 1px solid var(--rule); }
.faq__i summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 14px 18px; cursor: pointer; font: 500 18px/1.4 var(--f-b); color: var(--navy); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__x { position: relative; width: 18px; height: 18px; flex: none; transition: transform .15s; }
.faq__x::before, .faq__x::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--red); }
.faq__x::after { transform: rotate(90deg); }
.faq__i[open] .faq__x { transform: rotate(45deg); }
.faq__a { padding: 0 18px 6px; }
.faq__a p { max-width: 68ch; }

/* ------------------------------------------------------------------ area: at a glance */
.glance { background: var(--white); }
.glance__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }
.facts { border-top: 1px solid var(--navy); margin: 0 0 var(--s4); table-layout: fixed; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--navy); font: 500 20px/1.3 var(--f-d); overflow-wrap: anywhere; }
.facts th { width: 38%; color: var(--red); font-weight: 600; border-right: 1px solid var(--navy); }
.facts td { color: var(--navy); padding-left: 18px; }
.glance__p { max-width: 60ch; }
.glance__ph .glance__img, .glance__ph .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 1023px) { .glance__grid { grid-template-columns: minmax(0, 1fr); } .glance__ph { max-width: 520px; } }
@media (max-width: 479px) { .facts th, .facts td { display: block; width: auto; border-right: 0; padding: 8px 0; } .facts th { border-bottom: 0; padding-bottom: 0; } .facts td { padding-left: 0; } }

/* nearby + maps */
.near { background: var(--white); }
.near--ink { background: var(--ink-g); color: var(--white); }
.near--pale { background: var(--pale); }
.near__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
@media (max-width: 1023px) { .near__grid { grid-template-columns: minmax(0, 1fr); } }
.map { margin: 0; }
.map__canvas { position: relative; height: clamp(300px, 40vw, 440px); background: var(--pale); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; }
.near--ink .map__canvas { background: #0b2340; border-color: var(--rule-dk); }
.map.is-live .map__canvas { display: block; }
.map__note { font: 400 14px/1.45 var(--f-b); color: var(--text-2); margin-top: var(--s2); }
.on-dark .map__note { color: var(--muted); }
.map-lbl { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 700 13px/1 var(--f-d); text-transform: uppercase; letter-spacing: .05em; color: var(--navy); background: rgba(255, 255, 255, .88); padding: 3px 5px; }
.map-lbl--home { background: var(--navy); color: var(--white); font-size: 15px; }
.gbp { border: 1px solid var(--rule); padding: var(--s5); background: var(--white); }
.gbp iframe { width: 100%; height: 420px; border: 0; display: block; }
.gbp__a { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin: 0; }

/* ------------------------------------------------------------------ cards, compact lists, service rows */
.cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s5); }
.card a { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: border-color .15s; }
.card a:hover { border-color: var(--navy); }
.card__ph .card__img, .card__ph .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__b { display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s4) var(--s5); }
.card__k { font: 600 13px/1.2 var(--f-d); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.card__t { font: 700 24px/1.08 var(--f-d); color: var(--navy); }
.card__s { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.compact { list-style: none; border-top: 2px solid var(--navy); }
.compact li { border-bottom: 1px solid var(--rule); }
.compact a { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 22px; gap: var(--s4); align-items: center; padding: 12px 0; text-decoration: none; color: var(--navy); }
.compact a:hover .compact__t { text-decoration: underline; }
.compact__k { font: 600 13px/1.2 var(--f-d); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.compact__t { font: 500 18px/1.35 var(--f-b); }
.compact .ico { width: 20px; height: 20px; color: var(--red); }
@media (max-width: 599px) { .compact a { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px var(--s3); } .compact__k { grid-column: 1 / -1; } }
.idx { background: var(--white); }
.idx__feat, .cards--feat { margin-bottom: var(--s7); }
.idx__grp { margin-top: var(--s6); }
.idx__gh { font: 800 26px/1 var(--f-d); text-transform: uppercase; color: var(--navy); margin: 0 0 var(--s3); }
.spokes { background: var(--ink-g); color: var(--white); }
.spokes .compact { border-top-color: var(--white); }
.spokes .compact li { border-bottom-color: var(--rule-dk); }
.spokes .compact a { color: var(--white); }
.spokes .compact__k { color: var(--red-dk); }
.spokes .compact .ico { color: var(--red-dk); }
.siblings { background: var(--white); }
.srows { background: var(--white); }
.srows__list { list-style: none; border-top: 2px solid var(--navy); }
.srow { border-bottom: 1px solid var(--rule); }
.srow a { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 200px 28px; gap: var(--s5); align-items: center; padding: var(--s4) 0; text-decoration: none; color: var(--text); }
.srow__n { font: 800 52px/1 var(--f-d); color: var(--red); font-variant-numeric: tabular-nums; }
.srow__b { display: flex; flex-direction: column; gap: 4px; }
.srow__t { font: 800 clamp(26px, 2.6vw, 36px)/1 var(--f-d); text-transform: uppercase; color: var(--navy); }
.srow__s { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.srow__ph .srow__img, .srow__ph .ph { width: 200px; aspect-ratio: 3 / 2; object-fit: cover; }
.srow__arr { width: 28px; height: 28px; color: var(--red); }
.srow a:hover .srow__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.srows__list:not(:has(.srow__ph)) .srow a { grid-template-columns: 4.2rem minmax(0, 1fr) 28px; }
@media (max-width: 767px) { .srow a, .srows__list:not(:has(.srow__ph)) .srow a { grid-template-columns: 3rem minmax(0, 1fr) 24px; gap: var(--s3); } .srow__ph { display: none; } .srow__n { font-size: 36px; } }
.links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.links a { font: 600 20px/1.3 var(--f-d); text-transform: uppercase; letter-spacing: .03em; }

/* pager */
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s5) 0 var(--s7); }
.pager a, .pager span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--navy); color: var(--navy); text-decoration: none; font: 600 18px/1 var(--f-d); }
.pager .is-current { background: var(--navy); color: var(--white); }

/* ------------------------------------------------------------------ A8 long read */
.lr { --wfs: 120px; }
.g-navy { background: var(--navy); --g: var(--navy); }
.g-red { background: var(--red); --g: var(--red); }
.g-white { background: var(--white); --g: var(--white); }
.g-ink { background: var(--ink-g); --g: var(--ink-g); }
.g-pale { background: var(--pale); --g: var(--pale); }
.lr-intro { background: var(--white); padding: clamp(48px, 5vw, 72px) 0 clamp(40px, 4vw, 56px); }
.lr-intro--pale { background: var(--pale); }
.lr-intro--navy { background: var(--navy); color: var(--white); padding-bottom: var(--s5); }
.lr-intro--navy .lr-intro__h { color: var(--white); }
.lr-intro--navy .lr-intro__k { color: var(--red-dk); }
.lr-intro__h { font: 600 clamp(30px, 3.4vw, 48px)/1.05 var(--f-d); color: var(--navy); max-width: 30em; margin: 0 0 var(--s3); }
.lr-intro__dek { max-width: 68ch; margin: 0; }
.bandix__list { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--s6); }
.bandix__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: var(--s3) var(--s2); text-decoration: none; text-align: center; font-family: var(--f-d); text-transform: uppercase; color: var(--white); border: 2px solid transparent; }
.bandix__a.g-white { color: var(--navy); border-color: var(--navy); }
.bandix__a.g-pale { color: var(--navy); border-color: var(--pale); }
.lr-intro--pale .bandix__a.g-pale { border-color: var(--rule); }
.bandix__n { font: 800 36px/1 var(--f-d); }
.bandix__w { font: 800 clamp(18px, 1.9vw, 28px)/1 var(--f-d); letter-spacing: .01em; }
.bandix__a:hover .bandix__w { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.lr-intro--navy .bandix__list { grid-template-columns: repeat(3, max-content); gap: var(--s3); }
.lr-intro--navy .bandix__a { min-height: 0; flex-direction: row; gap: 10px; padding: 10px 18px; border-color: var(--white); background: transparent; color: var(--white); }
.lr-intro--navy .bandix__a.g-white, .lr-intro--navy .bandix__a.g-pale { background: var(--white); color: var(--navy); }
.lr-intro--navy .bandix__n, .lr-intro--navy .bandix__w { font-size: 22px; }
@media (max-width: 767px) { .bandix__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bandix__a { min-height: 76px; } .bandix__n { font-size: 26px; } .lr-intro--navy .bandix__list { grid-template-columns: minmax(0, 1fr); } }

.lrc { position: relative; padding: 0 0 var(--pad); overflow: hidden; }
.lrc.on-dark .lrc__body { color: var(--white); }
.lrc__open { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; }
.lrc__word { margin: 0; font: 800 min(var(--wfs), 17vw)/.84 var(--f-d); text-transform: uppercase; letter-spacing: -.01em; color: var(--white); white-space: nowrap; }
.lrc__ttl { padding-bottom: .4em; min-width: 0; flex: 1 1 18em; }
.lrc__k { margin-bottom: var(--s2); }
.lrc__h { font: 600 clamp(26px, 2.6vw, 37px)/1.1 var(--f-d); color: var(--navy); }
.on-dark .lrc__h { color: var(--white); }
.lrc__photo { position: relative; height: min(38vh, 420px); min-height: 260px; }
.lrc__photo .lrc__img, .lrc__photo .ph { width: 100%; height: 100%; object-fit: cover; }
.lrc__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--g) 100%); }
.lrc--full .lrc__open, .lrc--full-r .lrc__open { margin-top: calc(-.62 * min(var(--wfs), 17vw)); }
.lrc--full-r .lrc__open { flex-direction: row-reverse; justify-content: flex-start; }
.lrc--full-r .lrc__ttl { text-align: right; }
.lrc--type .lrc__open, .lrc--outline .lrc__open { padding-top: var(--pad); }
.lrc--outline .lrc__word span:first-child { color: transparent; -webkit-text-stroke: 2px var(--red); }
.g-white .lrc__word, .g-pale .lrc__word { color: var(--navy); }
.lrc--outline .lrc__word { color: transparent; }
.g-red .lrc__word { color: var(--white); }
.g-red .stop { --stop: var(--ink-g); }
.g-red .kicker { color: var(--white); }
.lrc__grid { margin-top: var(--s5); }
.lrc__body { max-width: 68ch; margin-left: clamp(0px, 12vw, 190px); counter-reset: lrh; hyphens: auto; }
.lrc__body > p:first-child::first-letter { float: left; font: 800 calc(1.7em * 4 * .9)/.78 var(--f-d); color: var(--red); margin: .04em .1em 0 0; }
.lrc.on-dark .lrc__body > p:first-child::first-letter { color: var(--red-dk); }
.g-red .lrc__body > p:first-child::first-letter { color: var(--ink-g); }
.lrc .lrc__body.lrc__body--cont > p:first-child::first-letter, .lrc .lrc__body.lrc__body--closer > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.lrc__body h3 { font: 700 26px/1.1 var(--f-d); text-transform: uppercase; margin: var(--s6) 0 var(--s3); color: inherit; }
.lrc__body h3::before { counter-increment: lrh; content: counter(lrh, decimal-leading-zero) '  '; color: var(--red); }
.lrc.on-dark .lrc__body h3::before { color: var(--red-dk); }
.g-red .lrc__body h3::before { color: var(--white); }
.lrc__body ul, .lrc__body ol, .flow ul, .flow ol, .answer ul, .answer ol, .ledger ul, .ledger ol { padding-left: 1.2em; margin: 0 0 1em; }
.lrc__body li, .flow li, .answer li, .ledger li { margin-bottom: .35em; }
.wrap--plate { max-width: calc(1060px + 2 * var(--gut)); margin-top: var(--s6); }
.lrc__side { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); margin-top: var(--s5); align-items: start; }
.lrc__side .lrc__body { margin-left: 0; }
.lrc__splitph { position: absolute; top: 0; right: 0; width: 50%; height: min(52vh, 480px); }
.lrc__splitph .lrc__img, .lrc__splitph .ph { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.lrc--split .lrc__open, .lrc--split-l .lrc__open { min-height: min(52vh, 480px); flex-direction: column; align-items: flex-start; justify-content: center; padding-top: var(--s6); padding-right: calc(50% + var(--s5)); }
.lrc--split .lrc__ttl, .lrc--split-l .lrc__ttl { flex: none; }
.lrc--split-l .lrc__splitph { right: auto; left: 0; }
.lrc--split-l .lrc__splitph .lrc__img, .lrc--split-l .lrc__splitph .ph { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30%); mask-image: linear-gradient(to left, transparent 0, #000 30%); }
.lrc--split-l .lrc__open { padding-right: var(--gut); padding-left: calc(50% + var(--s5)); }
.lrc--split .lrc__grid .lrc__body { margin-left: 0; }
.lrc__figwrap { margin-top: var(--s5); }
.lrc__closer { position: relative; margin-top: var(--s5); }
.lrc__closer .wrap { position: relative; z-index: 1; }
.lrc__body--closer { max-width: min(46%, 52ch); margin-left: 0; padding: var(--s6) 0; }
.lrc__closerph { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.lrc__closerph .lrc__img, .lrc__closerph .ph { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
	.lrc__body { margin-left: 0; }
	.lrc__splitph, .lrc--split-l .lrc__splitph { position: relative; width: auto; height: 260px; left: auto; right: auto; }
	.lrc__splitph .lrc__img, .lrc__splitph .ph, .lrc--split-l .lrc__splitph .lrc__img, .lrc--split-l .lrc__splitph .ph { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
	.lrc--split .lrc__open, .lrc--split-l .lrc__open { min-height: 0; max-width: none; margin: calc(-.5 * min(var(--wfs), 17vw)) 0 0; padding: 0 var(--gut); }
	.lrc__open { gap: var(--s3); }
	.lrc--full-r .lrc__open { flex-direction: row; }
	.lrc--full-r .lrc__ttl { text-align: left; }
	.lrc__side { grid-template-columns: minmax(0, 1fr); }
	.lrc__closerph { position: relative; width: auto; height: 240px; }
	.lrc__body--closer { max-width: none; padding-bottom: var(--s4); }
}

/* plates and modules */
.mod--crop, .mod--table, .mod--mf, .mod--steps, .mod--figs { position: relative; }
.crop { margin: 0; }
.crop__ph { position: relative; }
.crop__ph .crop__img, .crop__ph .ph { width: 100%; object-fit: cover; aspect-ratio: 16 / 7; }
.crop--small .crop__ph .crop__img, .crop--small .crop__ph .ph { aspect-ratio: 16 / 9; }
.crop__pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; }
.crop__pin b { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--red); color: var(--white); font: 700 18px/1 var(--f-d); box-shadow: 0 0 0 2px var(--white); }
.crop__pin i { font: 500 15px/1.2 var(--f-b); font-style: normal; background: var(--white); color: var(--navy); padding: 4px 8px; white-space: nowrap; }
.crop__tags { list-style: none; display: none; margin-top: var(--s3); }
.crop__tags b { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: var(--red); color: var(--white); font: 700 15px/1 var(--f-d); margin-right: 6px; }
.crop__cap { font: italic 400 14px/1.45 var(--f-b); margin-top: var(--s3); text-align: center; }
.on-dark .crop__cap { color: var(--muted); }
@media (max-width: 767px) { .crop__pin i { display: none; } .crop__tags { display: block; } .crop__ph .crop__img, .crop__ph .ph { aspect-ratio: 4 / 3; } }
.mf { list-style: none; display: grid; gap: 0; border-top: 2px solid currentColor; }
.mf__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.on-dark .mf__i { border-bottom-color: var(--rule-dk); }
.mf__m, .mf__f { margin: 0; }
.mf__m s { font: italic 600 22px/1.25 var(--f-d); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.on-dark .mf__m s { text-decoration-color: var(--red-dk); }
.mf__k { display: block; font: 600 13px/1.2 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.on-dark .mf__k { color: var(--red-dk); }
@media (max-width: 767px) { .mf__i { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }
.mod--table { background: var(--white); color: var(--text); padding: var(--s5); }
.g-white .mod--table { border: 2px solid var(--navy); }
.lrt { table-layout: fixed; }
.lrt caption { text-align: left; font: 700 22px/1.15 var(--f-d); text-transform: uppercase; color: var(--navy); margin-bottom: var(--s3); }
.lrt th, .lrt td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.lrt thead th { font: 600 14px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--navy); }
.lrt tbody th { font: 600 18px/1.3 var(--f-d); color: var(--navy); }
.mod--table .src { color: var(--text-2); }
@media (max-width: 599px) {
	.mod--table { padding: var(--s4); }
	.lrt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.lrt tr { display: block; border-bottom: 1px solid var(--navy); padding: var(--s2) 0; }
	.lrt th, .lrt td { display: block; border: 0; padding: 2px 0; }
	.lrt td::before { content: attr(data-label) ': '; font: 600 13px/1.2 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
}
.lsteps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s5); }
.lsteps__i { border-top: 2px solid currentColor; padding-top: var(--s3); }
.lsteps__n { display: block; font: 800 64px/.9 var(--f-d); color: var(--red); }
.on-dark .lsteps__n { color: var(--red-dk); }
.lsteps__t { font: 700 22px/1.1 var(--f-d); text-transform: uppercase; margin: var(--s2) 0 6px; }
.lsteps__d { margin: 0; font-size: 16px; line-height: 1.5; }
.lsteps--ledger { margin-top: var(--s6); }
.figs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--white); border-bottom: 2px solid var(--white); }
.figs__i { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s5) var(--s4); }
.figs__i + .figs__i::before { content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px; background: var(--white); transform-origin: top; }
.figs__f { font: 800 clamp(72px, 8.6vw, 128px)/.9 var(--f-d); color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.figs__f small, .pair__f small, .pull__fig small { font-size: .38em; margin-left: .08em; letter-spacing: 0; }
.figs__l { margin-top: var(--s3); font: 600 20px/1.2 var(--f-d); text-transform: uppercase; letter-spacing: .03em; color: var(--white); max-width: 14em; }
.g-red .src { color: var(--white); }
@media (max-width: 767px) { .figs { grid-template-columns: minmax(0, 1fr); } .figs__i { flex-direction: row; gap: var(--s4); text-align: left; padding: var(--s4) 0; } .figs__i + .figs__i::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; } .figs__f { font-size: 64px; white-space: nowrap; flex: none; } /* unit kept on its number (390 review 2026-11-01) */ .figs__l { margin: 0; } }
.beat { margin: var(--s6) 0; }
.pair { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); border-top: 2px solid currentColor; padding-top: var(--s4); }
.pair li { display: flex; flex-direction: column; gap: 6px; }
.pair__f { font: 800 clamp(48px, 5vw, 72px)/.9 var(--f-d); color: var(--red); }
.on-dark .pair__f { color: var(--white); }
.pair__l { font: 600 18px/1.25 var(--f-d); text-transform: uppercase; }

/* pull interludes */
.pull { background: var(--white); padding: var(--s6) 0; }
.lr--knowledge .pull { background: var(--pale); }
.pull__in { display: flex; align-items: center; justify-content: center; gap: var(--s5); flex-wrap: wrap; text-align: center; }
.pull__fig { margin: 0; font: 800 clamp(40px, 4vw, 56px)/1 var(--f-d); color: var(--red); }
.pull__q { margin: 0; display: flex; align-items: center; gap: var(--s4); flex: 1 1 28em; max-width: 50em; }
.pull__q::before, .pull__q::after { content: ''; flex: 0 0 56px; height: 3px; background: var(--red); }
.pull__q p { margin: 0; font: italic 600 clamp(24px, 2.6vw, 36px)/1.15 var(--f-d); color: var(--navy); quotes: '\201C' '\201D'; }
.pull__q p::before { content: open-quote; }
.pull__q p::after { content: close-quote; }
.pull .src { flex-basis: 100%; margin: 0; }
@media (max-width: 599px) { .pull__q::before, .pull__q::after { flex-basis: 24px; } }

/* close band */
.lr-close { background: var(--white); padding: var(--pad) 0; }
.lr-close--pale { background: var(--pale); }
.lr-close__in { max-width: calc(860px + 2 * var(--gut)); text-align: center; }
.lr-close__h { font: 800 clamp(36px, 4.4vw, 60px)/.95 var(--f-d); text-transform: uppercase; color: var(--navy); margin-bottom: var(--s4); }
.lr-close__p { max-width: 60ch; margin: 0 auto var(--s5); }
.lr-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin: 0; }

/* ------------------------------------------------------------------ feature flow (guides, posts) */
.flow { background: var(--white); }
.byline { display: flex; flex-wrap: wrap; gap: 4px var(--s5); font: 500 14px/1.4 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.byline a { color: var(--red); }
.flow__sf { font: 600 clamp(22px, 2.2vw, 28px)/1.3 var(--f-d); color: var(--navy); margin-bottom: var(--s5); }
.dropcap > p:first-child::first-letter { float: left; font: 800 calc(1.7em * 4 * .9)/.78 var(--f-d); color: var(--red); margin: .04em .1em 0 0; }
.toc { margin: var(--s6) 0; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); padding: var(--s4) 0; }
.toc ol { list-style: none; columns: 2 18em; column-gap: var(--s6); }
.toc li { break-inside: avoid; }
.toc a { display: flex; gap: var(--s3); padding: 5px 0; text-decoration: none; font: 500 17px/1.35 var(--f-b); color: var(--navy); }
.toc a span { font: 800 17px/1.35 var(--f-d); color: var(--red); }
.toc a:hover { text-decoration: underline; }
.flow__sec { padding-top: var(--s7); }
.flow__no { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s4); }
.flow__no::before, .flow__no::after { content: ''; flex: 1; height: 2px; background: var(--red); transform-origin: center; }
.flow__no span { font: 800 48px/1 var(--f-d); color: var(--red); }
.flow__h { font: 700 clamp(30px, 3vw, 40px)/1.05 var(--f-d); text-transform: uppercase; text-align: center; margin: 0 0 var(--s5); }
.flow h3, .answer h3, .ledger h3 { font: 700 24px/1.15 var(--f-d); color: var(--navy); margin: var(--s5) 0 var(--s2); }
.flow aside, .answer aside, .ledger aside:not(.legal-contact) { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--pale); border-top: 3px solid var(--red); }
.flow aside.pull, .answer aside.pull { background: none; border: 0; border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); font: italic 600 26px/1.2 var(--f-d); color: var(--navy); text-align: center; padding: var(--s4) 0; }
.flow table, .answer table, .ledger table { margin: var(--s5) 0; table-layout: fixed; }
.flow th, .flow td, .answer th, .answer td, .ledger th, .ledger td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); font-size: 16px; overflow-wrap: anywhere; }
.flow thead th, .answer thead th, .ledger thead th { font: 600 14px/1.2 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--navy); }

/* next step band */
.nextb { background: var(--ink-g); padding: clamp(48px, 5vw, 72px) 0; }
.nextb__in { max-width: calc(900px + 2 * var(--gut)); }
.nextb__t { font: 600 clamp(26px, 2.8vw, 36px)/1.15 var(--f-d); margin-bottom: var(--s5); }
.nextb__ctas { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4); }
.nextb__hub { margin: 0; color: var(--muted); }

/* direct answer */
.dans { background: var(--ink-g); padding: clamp(40px, 5vw, 64px) 0; }
.dans__t { font: 600 clamp(26px, 3vw, 40px)/1.2 var(--f-d); max-width: 34ch; margin: 0; }
.answer { background: var(--white); }
.answer__sec + .answer__sec { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid var(--navy); }
.answer__h { font: 700 clamp(28px, 2.8vw, 36px)/1.05 var(--f-d); text-transform: uppercase; margin: 0 0 var(--s4); }

/* designed article: the ledger */
.ledger { background: var(--white); }
.ledger--pale, .ledger--gbp { background: var(--pale); }
/* Seam fixes (qa-gaps 2026-11-01): same-ground bands share one padding (404: rows + ledger left 188px of white); the last
   paragraph or link row of a ledger adds no margin under the band padding (blog: 132px). */
.srows + .ledger:not(.ledger--pale):not(.ledger--gbp) { padding-top: 0; }
.ledger > .wrap:last-child, .ledger .wrap > :last-child, .ledger p:last-child, .ledger .links:last-child { margin-bottom: 0; }
.ledger__lead { max-width: 68ch; margin-bottom: var(--s6); }
.ledger__sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); padding: var(--s6) 0; border-top: 2px solid var(--navy); }
.ledger__h { font: 700 clamp(26px, 2.4vw, 32px)/1.08 var(--f-d); text-transform: uppercase; }
.ledger__b { max-width: 68ch; }
.legal-contact { margin-top: var(--s6); padding: var(--s5); border: 2px solid var(--navy); }
@media (max-width: 1023px) { .ledger__sec { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }
.prices { background: var(--pale); }
.ptable { table-layout: fixed; border-top: 2px solid var(--navy); }
.ptable th, .ptable td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.ptable thead th { font: 600 14px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ptable tbody th { font: 600 19px/1.3 var(--f-d); color: var(--navy); }
.ptable__note { margin-top: var(--s4); }

/* contact */
.contact { background: var(--white); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
.contact__h { font: 800 clamp(32px, 3.6vw, 48px)/1 var(--f-d); text-transform: uppercase; margin-bottom: var(--s3); }
.contact .quote__card { box-shadow: none; border: 2px solid var(--navy); }
.contact__card { background: var(--ink-g); padding: var(--s6); }
.contact__ch { font: 700 28px/1.1 var(--f-d); text-transform: uppercase; margin-bottom: var(--s4); }
.contact__list { list-style: none; display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.contact__list a { display: inline-flex; gap: var(--s3); align-items: center; text-decoration: none; font: 500 18px/1.3 var(--f-b); overflow-wrap: anywhere; }
.contact__list .ico { width: 22px; height: 22px; flex: none; }
.contact__phone { font: 800 clamp(36px, 4vw, 52px)/1 var(--f-d) !important; font-variant-numeric: tabular-nums; }
.contact__area { color: var(--muted); }
.cnext { background: var(--pale); }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } .contact__card { padding: var(--s5); } }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--ink-g); padding: var(--s8) 0 var(--s6); }
.foot__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); align-items: center; }
.plate--foot { width: clamp(180px, 20vw, 260px); padding: 14px 16px; }
.plate--foot img { width: 100%; height: auto; }
.foot__phone { color: var(--white) !important; text-decoration: none; font: 800 clamp(48px, 9.4vw, 150px)/.9 var(--f-d); letter-spacing: -.005em; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s6); }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.foot__links a { font: 500 19px/1.4 var(--f-b); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.socials { list-style: none; display: flex; gap: var(--s4); }
.socials a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.socials .ico { width: 30px; height: 30px; }
.foot__idx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule-dk); }
.foot__h { font: 700 15px/1.2 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--red-dk); margin-bottom: var(--s3); }
.foot__list { list-style: none; display: grid; gap: 6px; }
.foot__list a { font-size: 16px; line-height: 1.4; text-decoration: none; color: var(--muted) !important; overflow-wrap: anywhere; }
.foot__list a:hover { color: var(--white) !important; text-decoration: underline; }
.foot__contact { margin-top: var(--s4); }
.foot__base { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule-dk); text-align: center; font-size: 15px; color: var(--muted); }
.foot__base p { margin: 0 0 6px; }
.footer-builtby { font: 500 17px/1.4 var(--f-b); color: var(--white); margin-top: var(--s3) !important; }
/* Holey footer fix (qa-gaps 2026-11-01): 16 services left Areas/Help/Legal ending 256-366px short at 1366.
   Desktop only: Services takes a double track and sets its links in two columns. */
@media (min-width: 1024px) { .foot__idx { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(max-content, 1.2fr) minmax(0, 1fr); } .foot__idx > .foot__col:first-child .foot__list { display: block; columns: 2; column-gap: var(--s6); } .foot__idx > .foot__col:first-child .foot__list li { break-inside: avoid; padding-bottom: 6px; } }
@media (max-width: 767px) { .foot__top { grid-template-columns: minmax(0, 1fr); justify-items: start; } .foot__phone { font-size: clamp(44px, 15vw, 80px); text-align: left; } .foot__links { gap: var(--s2) var(--s4); } }

/* mobile CTA bar (fixed; clearance is the footer's padding, never body padding: §7c.4) */
.mbar { display: none; }
@media (max-width: 1023px) {
	.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--ink-g); border-top: 1px solid var(--rule-dk); padding-bottom: env(safe-area-inset-bottom); }
	.mbar__a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; color: var(--white); text-decoration: none; font: 700 18px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
	.mbar__a .ico { width: 20px; height: 20px; }
	.mbar__a--q { background: var(--red); }
	.foot { padding-bottom: calc(var(--s6) + 58px + env(safe-area-inset-bottom)); }
}

/* WhatsApp pill + short-form panel (§4g) */
.wa-pill { position: fixed; right: 20px; bottom: 20px; z-index: 54; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px 8px 14px; background: #0B6E4F; color: var(--white); text-decoration: none; font: 700 18px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 6px 20px rgba(1, 21, 42, .3); }
.wa-pill .ico { width: 24px; height: 24px; }
@media (max-width: 1023px) { .wa-pill { display: none; } }
.wa-panel { position: fixed; right: 20px; bottom: 80px; z-index: 70; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--white); color: var(--text); border-top: 4px solid var(--red); box-shadow: 0 16px 48px rgba(1, 21, 42, .4); padding: var(--s5); }
.wa-panel[hidden] { display: none; }
@media (max-width: 1023px) { .wa-panel { right: 16px; bottom: 74px; } }
.wa-form__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.wa-form__h { font: 800 24px/1 var(--f-d); text-transform: uppercase; color: var(--navy); margin: 0; }
.wa-form__x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--navy); cursor: pointer; }
.wa-form__x .ico { width: 22px; height: 22px; }
.wa-form__p { font-size: 15px; color: var(--text-2); }
.wa-form label { display: block; font: 600 15px/1.3 var(--f-d); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.wa-form input, .wa-form textarea, .wa-form select { width: 100%; font: 400 17px/1.4 var(--f-b); padding: 9px 10px; border: 1px solid #8796AA; border-radius: 0; background: var(--white); color: var(--text); }
.wa-form p { margin: 0 0 var(--s3); }
.wa-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

/* icons */
.ico { width: 20px; height: 20px; flex: none; }

/* photo placeholder (no photo stamped yet): a slate-course ground, never a broken image */
.ph { display: block; width: 100%; min-height: 120px; background-color: #1C2733; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 34px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 58px); }

/* ------------------------------------------------------------------ Fidelity view (?crm_fid=1) */
.crm-fid [data-fid-hide], .crm-fid .wa-pill, .crm-fid .mbar { display: none !important; }

/* ------------------------------------------------------------------ motion (MOTION-PROFILE.md): CSS only, once, never reversed */
@keyframes crm-settle { from { transform: scale(1.03); } to { transform: none; } }
.js-motion .hero__bg .hero__img { animation: crm-settle 1.2s ease-out both; }
.js-motion .reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.js-motion .reveal { transition: opacity .38s var(--ease), transform .38s var(--ease); transition-delay: calc(min(var(--i, 0), 6) * 50ms); }
.js-motion .trust .reveal { transition-duration: .36s; transition-delay: calc(var(--i, 0) * 70ms); }
/* problem rows: the red rules draw left to right, then the words fade in (the list is observed, never a display:contents row) */
.js-motion .rows__list:not(.is-in) .rows__w, .js-motion .rows__list:not(.is-in) .rows__t { opacity: 0; }
.js-motion .rows__list .rows__w, .js-motion .rows__list .rows__t { transition: opacity .3s .42s; }
.js-motion .rows__list:not(.is-in) .rows__i + .rows__i .rows__w, .js-motion .rows__list:not(.is-in) .rows__i + .rows__i .rows__t { border-top-color: transparent; }
.js-motion .pinned__ph:not(.is-in) .pin { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.js-motion .pinned__ph .pin { transition: opacity .26s var(--ease), transform .26s var(--ease), box-shadow .15s; transition-delay: calc(var(--i, 0) * 60ms); }
.js-motion .pinned__ph:not(.is-in) .pinned__lines { opacity: 0; }
.js-motion .pinned__lines { transition: opacity .4s .3s; }
.js-motion .figs:not(.is-in) .figs__i + .figs__i::before { transform: scaleY(0); }
.js-motion .figs .figs__i::before { transition: transform .4s var(--ease); }
.js-motion .figs:not(.is-in) .figs__f { opacity: 0; transform: translateY(10px); }
.js-motion .figs .figs__f { transition: opacity .42s var(--ease), transform .42s var(--ease); transition-delay: calc(.4s + var(--i, 0) * 120ms); }
.js-motion .flow__no:not(.is-in)::before, .js-motion .flow__no:not(.is-in)::after { transform: scaleX(0); }
.js-motion .flow__no::before, .js-motion .flow__no::after { transition: transform .42s var(--ease); }
.js-motion .lrc__word .stop { transition: opacity .2s .12s; }
.js-motion .lrc__word:not(.is-in) .stop { opacity: 0; }
@media (min-width: 1024px) {
	.js-motion .ten:not(.is-in) .ten__n { opacity: 0; transform: translateX(-24px) scaleY(1.56); }
	.js-motion .ten .ten__n { transition: opacity .52s var(--ease), transform .52s var(--ease); }
	.js-motion .steps__arr { transition: transform .24s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + .2s); }
	.js-motion .steps__i:not(.is-in) .steps__arr { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* print */
@media print { .head, .mbar, .wa-pill, .wa-panel, .quote, .foot__idx { display: none !important; } .hero, .rows, .pinned, .lrc { background: none !important; color: #000 !important; } }

/* ---------- Design QA 2026-11-01 (desktop rules scoped to min-width; 390 untouched unless stated) ---------- */
/* Watermark corner kept whole on bleed photos (crm_img bleed + images.json wm). Below 1024 the bleed boxes fade out at
   the bottom (mask), so the anchor is desktop only. */
@media (min-width: 1024px) { img[data-wm] { object-position: var(--wmpos) !important; } }
/* Crop tags: the red disc sits ON the point it names (it used to be the middle of disc + label); right-hand points
   put their label on the left so it never runs off the photo. Applies at every width (labels hide below 768). */
.crop__pin { transform: translate(-17px, -50%); }
.crop__pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 17px), -50%); }
/* Chapter steps: columns follow the step count, so no step is left alone on a row. */
@media (min-width: 1024px) {
	.wrap--plate .lsteps[data-n] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
	.wrap--plate .lsteps[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wrap--plate .lsteps[data-n="7"], .wrap--plate .lsteps[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lrc__aside .lsteps[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lrc__aside .lsteps[data-n] > .lsteps__i:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.lsteps[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsteps[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lsteps[data-n] > .lsteps__i:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Ink split chapter: the two-column spread (fix loop 1) is retired in judge loop 2. The reading column is centred at
   >=1024 (below), and rhythm photos break its runs; columns doubled every paragraph's height in the prose-run measure. */
/* Footer rules: the border sat on the .wrap's padding box, so it ran a gutter past the text edge on both sides. The
   rule is now drawn inside the gutters, flush with the text, at every width. */
.foot__idx, .foot__base { border-top: 0; position: relative; }
.foot__idx::before, .foot__base::before { content: ''; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--rule-dk); }
/* Answer pages: the short-answer statement sat in 34ch on the left of a full ink band with ~690 x 580px bare beside
   it (qa-gaps HOLE). At >=1024 the label takes a left column, set large, and the statement runs the remaining measure. */
@media (min-width: 1024px) {
	.dans__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
	.dans__in > .kicker { font-size: 26px; line-height: 1.1; letter-spacing: .1em; padding-top: .45em; }
	.dans__t { max-width: 46ch; }
}
/* Pale split chapter: when the plate column is shorter than the body it sits centred beside it, so the spare depth is
   shared above and below rather than left as one block at the foot (crm_lr_side_fits picks this layout only when the
   difference is small). */
@media (min-width: 1024px) { .lrc__side > .lrc__aside { align-self: center; } }
/* Fidelity view (skill §7f.4): the shoot caps at 16,000px, so the long read hides what no mockup shows. Home's
   mockup has no long read; the service and area mockups show its intro, index and chapter 1 opener only. */
.crm-fid.tpl-home .lr { display: none !important; }
.crm-fid .lr > :not(.lr-intro):not(#lr-ch-1) { display: none !important; }
/* Fidelity loop 1 (page/area mockup): the town's chapter index sits ON the top of chapter 1's photo, which rises
   behind it out of the navy intro, instead of a separate navy strip above the photo. Desktop only. */
@media (min-width: 1024px) {
	.lr--knowledge .lr-intro--navy { position: relative; z-index: 2; padding-bottom: 0; }
	.lr--knowledge .lr-intro--navy .bandix { margin-bottom: -82px; }
	.lr--knowledge .lr-intro--navy + #lr-ch-1 .lrc__photo { height: min(46vh, 500px); }
	.lr--knowledge .lr-intro--navy + #lr-ch-1 .lrc__photo::before { content: ''; position: absolute; inset: 0 0 auto; height: 150px; background: linear-gradient(var(--navy), rgba(9, 57, 105, 0)); z-index: 1; }
}
/* Agency judge loop 1: the reading column sat 190px in from the left and left a ~450px void down the right of every
   chapter. At >=1024 it is centred on the plates below it, so the chapter reads as one symmetric column (skill §2). */
@media (min-width: 1024px) { .lrc .lrc__grid > .lrc__body { margin-left: auto; margin-right: auto; } }

/* Fix loop 1 (2026-11-01): figure values sized to their column so long codes ("BS 5534:2014+A2:2018") never
   overprint a neighbour. --fl = longest unbroken run, --fn = whole value, both in characters (inc/longread.php
   crm_lr_fl); a condensed 800 numeral is ~0.44em wide, .46 leaves a margin. overflow-wrap is the backstop only. */
.figs__i, .pair li { min-width: 0; container-type: inline-size; }
.figs__f { font-size: min(clamp(72px, 8.6vw, 128px), calc(100cqi / (var(--fl, 3) * .46))); max-width: 100%; overflow-wrap: anywhere; }
.pair__f { font-size: min(clamp(48px, 5vw, 72px), calc(100cqi / (var(--fl, 3) * .46))); max-width: 100%; overflow-wrap: anywhere; }
.pair--stack { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.pair--stack li + li { border-top: 1px solid currentColor; padding-top: var(--s4); }
.pull__fig { max-width: 100%; overflow-wrap: anywhere; font-size: min(clamp(40px, 4vw, 56px), calc((100vw - 48px) / (var(--fn, 3) * .46))); }
@media (max-width: 767px) {
	.figs__f { font-size: min(64px, calc(45cqi / (var(--fn, 3) * .46))); }
	.figs__i.is-long { flex-direction: column; gap: 6px; }
	.figs__i.is-long .figs__f { white-space: normal; font-size: min(64px, calc(100cqi / (var(--fl, 3) * .46))); }
}
.nw { white-space: nowrap; }
/* Trust band, long statements (fix loop 2026-11-01): sized to the longest statement so each holds two lines in its
   third at desktop; thin white rules part the three; at phone width each is its own ruled row. Nothing is cut. */
/* Short-label band (judge loop 2): label large on one line, sized so the three fit one row; the statement beneath. */
.trust--short { padding: var(--s6) 0; }
.trust--short .wrap { container-type: inline-size; }
.trust--short .trust__list { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s3) var(--s7); text-align: left; align-items: start; }
.trust--short .trust__i { font: inherit; display: flex; flex-direction: column; gap: 6px; text-wrap: initial; }
.trust__s { font: 800 clamp(26px, calc((100cqi - 2 * var(--s7)) / (var(--tt, 40) * .47)), 48px)/.95 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }
.trust__l { width: 0; min-width: 100%; font: 500 15px/1.35 var(--f-b); color: var(--white); text-transform: none; letter-spacing: 0; }
@media (max-width: 767px) {
	.trust--short .trust__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.trust--short .trust__i { padding: var(--s3) 0; }
	.trust--short .trust__i + .trust__i { border-top: 2px solid rgba(255, 255, 255, .55); }
	.trust__s { font-size: 30px; white-space: normal; }
}
.trust--long .trust__list { container-type: inline-size; gap: 0; align-items: stretch; }
.trust--long .trust__i { display: flex; align-items: center; justify-content: center; padding: 0 var(--s4); font-size: clamp(17px, calc(125cqi / var(--tl, 48)), 28px); line-height: 1.04; letter-spacing: .005em; }
.trust--long .trust__i + .trust__i { border-left: 2px solid rgba(255, 255, 255, .55); }
@media (max-width: 767px) {
	.trust--long .trust__i { justify-content: flex-start; padding: var(--s3) 0; font-size: 21px; line-height: 1.08; }
	.trust--long .trust__i + .trust__i { border-left: 0; border-top: 2px solid rgba(255, 255, 255, .55); }
	.trust--long { padding: var(--s3) 0; }
}
/* Reading-rhythm photos (fix loop 1, 2026-11-01): a library photo between paragraphs of a long run (crm_rhythm). */
.rh { margin: var(--s5) 0; }
.rh__img, .rh .ph { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rh--lr { margin: var(--s6) 0; }
@media (min-width: 1024px) { .flow .rh, .answer .rh { margin: var(--s6) calc(-1 * var(--s5)); } }
.foot__h--sub { margin-top: var(--s5); }
/* WhatsApp pill safe zone (fix loop 1, 2026-11-01): the pill never sits over the last lines of a page or the short
   answer; below 1280 it folds to its icon (the label stays for screen readers) so it clears the reading column. */
@media (min-width: 1024px) {
	.foot { padding-bottom: calc(var(--s6) + 72px); }
	.dans__in { padding-right: 190px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.wa-pill { padding: 12px; gap: 0; }
	.wa-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Map poster under the click-to-load button (fix loop 1, 2026-11-01): never an empty panel. */
.map__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__load { position: relative; z-index: 1; }
.map.is-live .map__poster { display: none; }
.mp-grid { stroke: var(--rule); stroke-width: 1; }
.mp-ring { fill: rgba(194, 39, 45, .06); stroke: var(--red); stroke-width: 2; stroke-dasharray: 8 6; }
.mp-dot { fill: var(--navy); }
.mp-home { fill: var(--navy); }
.mp-pin { fill: var(--red); stroke: var(--white); stroke-width: 3; }
.mp-lbl { font: 700 15px/1 var(--f-d); letter-spacing: .05em; fill: var(--navy); }
.mp-lbl--pin { font-size: 19px; fill: var(--red); }
.near--ink .mp-grid { stroke: rgba(255, 255, 255, .08); }
.near--ink .mp-dot, .near--ink .mp-home { fill: rgba(255, 255, 255, .7); }
.near--ink .mp-lbl { fill: rgba(255, 255, 255, .78); }
.near--ink .mp-lbl--pin { fill: var(--white); }
.map:not(.is-live) .map__canvas { align-items: flex-end; padding-bottom: var(--s5); }
@media (min-width: 1024px) and (max-width: 1279px) { .foot__idx { grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); } }
@media (max-width: 1023px) { .foot__idx > .foot__col:first-child .foot__list { display: block; columns: 2; column-gap: var(--s5); } .foot__idx > .foot__col:first-child .foot__list li { break-inside: avoid; padding-bottom: 6px; } }
/* Footer index below 1024 (fix loop 1): Services and Legal span the row in two columns, Areas and Help sit side by
   side, so no single short-link column leaves a 240 x 590px hole beside it (qa-gaps HOLE). */
@media (max-width: 1023px) {
	.foot__idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot__idx > .foot__col:first-child, .foot__idx > .foot__col:last-child { grid-column: 1 / -1; }
	.foot__idx > .foot__col:last-child { columns: 2; column-gap: var(--s5); }
	.foot__idx > .foot__col:last-child .foot__h--sub { break-before: column; margin-top: 0; }
}

/* Home guarantee card (fix loop 1b, mockup/master-b): a navy-ruled card on a pale ground holding the outlined red 10
   and the certificate; no seal, no bleed. Service and area pages keep the bleeding 10. */
.ten--card { background: var(--pale); }
.ten__card { background: var(--white); border: 2px solid var(--navy); padding: var(--s5) var(--s4); }
.ten__n.ten__n--o { position: static; transform: none; margin: 0 0 var(--s3); font: 800 140px/.8 var(--f-d); color: transparent; -webkit-text-stroke: 3px var(--red); letter-spacing: -.02em; }
.ten--card .ten__cert { border: 0; padding: 0; }
.js-motion .ten--card:not(.is-in) .ten__n--o { transform: translateX(-24px); }
@media (min-width: 1024px) {
	.ten--card { padding: clamp(48px, 5vw, 72px) 0; }
	.ten__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s7); align-items: center; max-width: 1100px; margin: 0 auto; padding: var(--s6) var(--s7) var(--s6) var(--s6); }
	.ten__n.ten__n--o { margin: 0; font-size: clamp(220px, 21vw, 300px); line-height: .78; -webkit-text-stroke-width: 4px; transform: scaleY(1.18); transform-origin: center; }
	.ten--card .ten__h { font-size: clamp(30px, 2.9vw, 44px); }
}

/* Home process strip (fix loop 1b, mockup/master-b): giant condensed uppercase step titles in one bar with red
   arrows between them; the step lines sit small beneath. Phones keep the stacked column. */
.steps__t { text-transform: uppercase; font-weight: 800; }
@media (min-width: 1024px) {
	.process__panel { padding: var(--s6) var(--s5) var(--s6); }
	.steps { --tfs: clamp(36px, 3.7vw, 56px); --sg: clamp(40px, 4vw, 64px); }
	.steps__t { font-size: var(--tfs); line-height: .95; letter-spacing: -.005em; }
	.steps__d { font: 500 16px/1.35 var(--f-b); margin-top: var(--s3); }
	.steps__arr { top: calc(var(--tfs) * .3); width: 40px; height: 26px; left: calc(100% + var(--sg) / 2 - 20px); stroke: var(--red); stroke-width: 3.5; }
}
@media (max-width: 1023px) { .steps__t { font-size: 40px; line-height: 1; } .steps__d { font-size: 18px; } }
.steps--light .steps__t { text-transform: none; }
@media (min-width: 1024px) {
	.process .steps { --tfs: clamp(32px, 3.3vw, 50px); --sg: clamp(52px, 5vw, 76px); }
	.process .steps__t { min-height: 1.9em; display: flex; align-items: center; justify-content: center; text-wrap: balance; }
	.process .steps__arr { top: calc(var(--tfs) * .95 - 13px); width: 36px; height: 24px; left: calc(100% + var(--sg) / 2 - 18px); }
}

/* Judge loop 2 (2026-11-01). Home services: the ALSO list sets in two columns at >=1024, so the key column ends near
   the photo (it ran ~170px past it and left dead navy under the photo). Area glance: the photo fills the column beside a
   long record table (Canterbury's ran ~380px past a square photo). */
@media (min-width: 1024px) {
	.pinned .also { columns: 2; column-gap: var(--s5); }
	.pinned .also li { break-inside: avoid; }
	.glance__grid { align-items: stretch; }
	.glance__ph { display: flex; }
	.glance__ph .glance__img, .glance__ph .ph { aspect-ratio: auto; height: 100%; min-height: 420px; }
}

/* ------------------------------------------------------------------ breakfix 2026-11-01: non-photo prose break */
/* When no on-topic break photo is left, a short rule and the next paragraph's first sentence set as a lead line
   (inc/images.php crm_rh_fallback). Inherits the ground's text colour, so it reads on white, pale, navy, ink and red. */
.rh-rule { display: block; width: 72px; height: 0; margin: var(--s7) 0 var(--s4); border: 0; border-top: 3px solid var(--red); }
.on-dark .rh-rule { border-top-color: var(--red-dk); }
.g-red .rh-rule { border-top-color: var(--white); }
.rh-lead { display: block; margin-bottom: var(--s2); font: 600 clamp(24px, 2.1vw, 30px)/1.18 var(--f-d); letter-spacing: .003em; color: inherit; }