/* Fox Skylights: the night edition. Tokens from .factory/config/design-dna.json. */

/* ---------- Fonts (self-hosted) + metric-matched fallbacks so the swap does not shift layout ---------- */
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Times New Roman'); size-adjust: 88%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Spectral Fallback'; src: local('Georgia'); size-adjust: 104%; ascent-override: 92%; descent-override: 36%; line-gap-override: 0%; }
@font-face { font-family: 'DM Mono Fallback'; src: local('Courier New'); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }

:root {
	--night: #0F0E0C; --night-2: #1A1714; --umber: #231C16;
	--cream: #EBDFC8; --cream-muted: #B8AC98;
	--paper: #EEE2CC; --paper-2: #DFD2BB; --paper-white: #F6EFE2;
	--ink: #1A1612; --ink-muted: #5E5348; --stone: #796C60;
	--russet: #9A4318; --russet-deep: #8E3D15; --russet-light: #D2733F;

	--f-display: 'Instrument Serif', 'Instrument Serif Fallback', 'Times New Roman', serif;
	--f-body: 'Spectral', 'Spectral Fallback', Georgia, serif;
	--f-mono: 'DM Mono', 'DM Mono Fallback', 'Courier New', monospace;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
	--section: clamp(64px, 9vw, 128px);
	--gutter: clamp(16px, 4vw, 48px);
	--w-prose: 64ch; --w-std: 1140px; --w-wide: 1320px;
	--header-h: 88px;

	--t-18: 1.125rem; --t-24: 1.5rem; --t-32: 2rem; --t-43: 2.66rem; --t-57: 3.55rem; --t-76: 4.73rem;
	--rule-dark: rgba(235, 223, 200, .3); --rule-paper: rgba(26, 22, 18, .35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 var(--t-18)/1.65 var(--f-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin: 0; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--russet-light); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--russet-deep); }
.sr-only { 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: var(--s4); top: -100px; z-index: 100; background: var(--paper-white); color: var(--ink); padding: var(--s3) var(--s4); font-family: var(--f-mono); }
.skip:focus { top: var(--s4); }
main:focus { outline: none; }

.wrap { width: min(var(--w-std), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(var(--w-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Grounds. One class per ground carries every correction (§7c.3). */
.on-dark { background: var(--night); color: var(--cream); }
.on-dark a:not(.btn) { color: var(--cream); text-decoration-color: var(--russet-light); text-underline-offset: 3px; }
.on-dark a:not(.btn):hover { color: var(--russet-light); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper a:not(.btn) { color: var(--ink); text-decoration-color: var(--russet-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.on-paper a:not(.btn):hover { color: var(--russet-deep); }
/* A ground nested inside the other ground must outrank its parent, never tie with it (§7c.3). */
.on-paper .on-dark { color: var(--cream); }
.on-paper .on-dark a:not(.btn) { color: var(--cream); text-decoration-color: var(--russet-light); }
.on-paper .on-dark a:not(.btn):hover { color: var(--russet-light); }
.on-dark .on-paper { color: var(--ink); }
.on-dark .on-paper a:not(.btn) { color: var(--ink); text-decoration-color: var(--russet-deep); }

/* Buttons: flat rectangles. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; font: 400 1.25rem/1.2 var(--f-body); letter-spacing: .03em; text-decoration: none; border: 1px solid transparent; transition: background-color .15s, transform .15s; }
.btn--russet { background: var(--russet); color: var(--paper-white); }
.btn--russet:hover { background: var(--russet-deep); transform: translateY(-1px); }
.btn--line { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn--line:hover { background: var(--umber); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(235, 223, 200, .08); }
.site-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--header-h); gap: var(--s5); }
.site-header__wa { font-size: 1.0625rem; text-decoration: none; white-space: nowrap; grid-column: 1; grid-row: 1; justify-self: start; }
.on-dark .site-header__wa { text-decoration: none; }
.logo { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--cream); }
.logo__mark { width: 52px; height: auto; }
.logo__word { font: 400 1.125rem/1 var(--f-display); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; white-space: nowrap; }
.nav { display: contents; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); }
.nav__list--left { grid-column: 1; grid-row: 1; justify-self: end; margin-right: clamp(8px, 2vw, 40px); }
.nav__list--right { grid-column: 3; grid-row: 1; justify-self: start; margin-left: clamp(8px, 2vw, 40px); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { text-decoration: none; font-size: 1.0625rem; white-space: nowrap; padding: 8px 0; }
.on-dark .nav__link { text-decoration: none; }
.nav__link[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--russet-light); }
.nav__caret { width: 28px; height: 44px; margin-left: 2px; border: 0; background: transparent; color: var(--cream); cursor: pointer; position: relative; }
.nav__caret::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); transition: transform .15s; }
.nav__caret[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); }
.nav__sub { list-style: none; position: absolute; top: 100%; left: -20px; min-width: 280px; padding: var(--s3) 0; background: var(--night-2); border: 1px solid var(--rule-dark); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav__sub a { display: block; padding: 8px 20px; text-decoration: none; font-size: 1rem; }
.on-dark .nav__sub a { text-decoration: none; }
.nav__sub a:hover { background: var(--umber); }
.nav__sub-all { border-top: 1px solid var(--rule-dark); margin-top: var(--s2); padding-top: var(--s2); }
.nav__sub-all a { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--russet-light) !important; }
.nav__item--has-sub.is-open .nav__sub { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) and (min-width: 1025px) {
	.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { visibility: visible; opacity: 1; transform: none; }
}
.nav__mobile-extra { display: none; }
.site-header__end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: var(--s5); }
.site-header__cta { color: var(--russet-light) !important; text-decoration: none !important; font-size: 1.0625rem; white-space: nowrap; }
.site-header__cta:hover { text-decoration: underline !important; }
.site-header__phone { text-decoration: none; white-space: nowrap; }
/* Desktop: the phone sits above the CTA, so the right-hand nav keeps its room (late-phone lesson). */
@media (min-width: 1025px) {
	.site-header__end { flex-direction: column; align-items: flex-end; gap: 0; }
	/* Each stacked link is a 24px-tall target (WCAG 2.2 target size). */
	.site-header__phone, .site-header__cta { display: inline-flex; align-items: center; min-height: 26px; }
	.site-header__phone { font: 500 .875rem/1.3 var(--f-mono); letter-spacing: .06em; color: var(--cream-muted); }
	.on-dark .site-header__phone { text-decoration: none; }
	.site-header__phone:hover { color: var(--cream); }
}
/* Small laptops: the full nav and the CTA share the right column, so close the gaps up. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.site-header__bar { gap: var(--s3); }
	.nav__list { gap: 18px; }
	.nav__list--right { margin-left: 4px; }
	.nav__link, .site-header__cta { font-size: 1rem; }
	.logo__word { font-size: 1rem; letter-spacing: .32em; margin-right: -.32em; }
}
@media (max-width: 360px) {
	.quote__sentence .nowrap { white-space: normal; }
}
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--rule-dark); background: transparent; color: var(--cream); cursor: pointer; position: relative; }
.burger__lines, .burger__lines::before, .burger__lines::after { position: absolute; left: 11px; width: 20px; height: 1.5px; background: currentColor; content: ''; transition: transform .2s, opacity .2s; }
.burger__lines { top: 21px; }
.burger__lines::before { left: 0; top: -6px; }
.burger__lines::after { left: 0; top: 6px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1280px) {
	.site-header__wa { display: none; }
	.nav__list--left { justify-self: start; margin-right: 0; }
}
@media (max-width: 1024px) {
	:root { --header-h: 72px; }
	.site-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
	.logo { grid-column: 1; flex-direction: row; gap: 12px; }
	.logo__mark { width: 40px; }
	.logo__word { font-size: 1rem; letter-spacing: .3em; }
	.site-header__end { grid-column: 3; }
	.site-header__cta, .site-header__phone { display: none; }
	.burger { display: block; }
	.nav { display: block; position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--night); border-top: 1px solid var(--rule-dark); padding: var(--s5) var(--gutter) var(--s7); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
	.nav.is-open { visibility: visible; opacity: 1; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0 !important; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--rule-dark); }
	.nav__link { flex: 1; padding: 14px 0; font: 400 1.75rem/1.2 var(--f-display); }
	.nav__caret { width: 44px; height: 52px; }
	.nav__sub { position: static; width: 100%; min-width: 0; padding: 0 0 var(--s3); border: 0; background: transparent; display: none; visibility: visible; opacity: 1; transform: none; }
	.nav__item--has-sub.is-open .nav__sub { display: block; }
	.nav__sub a { padding: 10px 0 10px var(--s4); }
	.nav__sub a:hover { background: transparent; color: var(--russet-light); }
	.nav__mobile-extra { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s6); }
	.nav__phone { font: 400 1.5rem/1.2 var(--f-display); text-decoration: none; }
	html.nav-open { overflow: hidden; }
}

/* ---------- Hero: the cover ---------- */
.hero { padding-block: var(--s7) var(--s8); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cover-lines { list-style: none; counter-reset: none; }
.cover-lines li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--rule-dark); }
.cover-lines li:last-child { border-bottom: 0; }
.cover-lines__n { font: italic 400 clamp(3.2rem, 5vw, 4.6rem)/1 var(--f-display); color: var(--russet-light); }
.cover-lines__t { font: 400 clamp(1.15rem, 1.5vw, 1.45rem)/1.3 var(--f-body); }
.nowrap { white-space: nowrap; }
.cover { position: relative; aspect-ratio: 2 / 3; border: 2px solid var(--paper-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.cover__img { width: 100%; height: 100%; object-fit: cover; }
.cover__mast { position: absolute; left: 0; right: 0; top: 4%; margin: 0; text-align: center; font: 400 clamp(5rem, 11vw, 11rem)/.9 var(--f-display); letter-spacing: .02em; color: var(--paper-white); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.cover__strap { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; font-size: clamp(.95rem, 1.2vw, 1.15rem); color: var(--paper-white); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.hero__kicker { display: block; font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-muted); margin-bottom: var(--s5); }
.hero__title { font-size: clamp(3.2rem, 6.4vw, 6.2rem); line-height: .98; }
.hero__title em { font-style: italic; }
.hero__sub { font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.3 var(--f-body); margin: var(--s5) 0 var(--s6); color: var(--cream); max-width: 16em; }
.hero__ctas { display: grid; gap: var(--s4); max-width: 400px; }
.hero__assure { list-style: none; margin-top: var(--s6); font: 400 1.1875rem/1.7 var(--f-body); color: var(--cream); }
.hero__call { margin: var(--s4) 0 0; font: 400 1.1875rem/1.5 var(--f-body); color: var(--cream); }
.hero__call a { white-space: nowrap; }
.hero__call--centre { text-align: center; }

/* ---------- The awkward ones (paper) ---------- */
.awkward { padding-block: var(--s8); }
.awkward__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .5fr); grid-template-areas: "t t ." "a b n" "c d n"; gap: var(--s4) clamp(24px, 3.5vw, 56px); align-items: center; }
.awkward__title { grid-area: t; font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: 0; }
.awkward__item { display: grid; grid-template-columns: clamp(100px, 10vw, 150px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: center; }
.awkward__item:nth-of-type(1) { grid-area: a; } .awkward__item:nth-of-type(2) { grid-area: b; } .awkward__item:nth-of-type(3) { grid-area: c; } .awkward__item:nth-of-type(4) { grid-area: d; }
.awkward__item p { margin: 0; font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.5; max-width: 26ch; }
.awkward__item--lead p { max-width: 34ch; }
.awkward__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.dropcap { float: left; font: 400 4.6em/.8 var(--f-display); margin: .06em .08em 0 0; }
.note { grid-area: n; border: 1px solid var(--ink); padding: var(--s6); font-family: var(--f-mono); }
.note__label { font-size: 1rem; margin-bottom: var(--s5); }
.note__label::after { content: ''; display: block; width: 28px; height: 1px; background: var(--ink); margin-top: var(--s5); }
.note__text { font-size: .9375rem; line-height: 1.75; margin: 0; }

/* ---------- What we fit (night) ---------- */
.fit { padding-block: var(--s7) var(--s8); }
.fit__title { font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: var(--s4); }
.fit__big, .fit__small { list-style: none; display: grid; gap: var(--s3); }
.fit__big { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.5fr); margin-bottom: var(--s3); }
.fit__small { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fit__card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--paper); color: var(--ink) !important; transition: transform .15s; }
.fit__card a:hover { transform: translateY(-2px); }
.fit__card img { width: 100%; height: 100%; object-fit: cover; }
.fit__big img { height: clamp(150px, 18vw, 270px); }
.fit__small img { aspect-ratio: 4 / 3.4; height: auto; }
.fit__label { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; font: 400 1.3rem/1.2 var(--f-body); }
.fit__small .fit__label { flex: 1; font-size: 1.05rem; min-height: 4.4rem; }

/* ---------- Straight answers (paper) ---------- */
.answers { padding-block: var(--s7); }
.answers__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.answers__title { font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: var(--s3); }
.ledger { margin: 0; }
.ledger__row { padding-block: var(--s4); border-bottom: 1px solid var(--rule-paper); }
.ledger__row:last-child { border-bottom: 0; }
.ledger dt, .ledger dd { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; }
.ledger dt { font: 400 1.3rem/1.35 var(--f-body); }
.ledger dd { margin: var(--s1) 0 0; font-size: 1.1875rem; line-height: 1.45; }
.ledger__q { font: 400 2rem/1 var(--f-body); color: var(--russet-deep); }
.ledger__a { font: 400 2rem/1 var(--f-body); }
.answers__photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* ---------- In this job (night) ---------- */
.job { padding-block: var(--s8); }
.job__grid { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 2fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.job__title { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.job__steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job__step { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, .95fr); gap: var(--s4); align-items: center; padding: var(--s6) var(--s5); }
.job__step:nth-child(odd) { border-right: 1px solid var(--rule-dark); padding-left: 0; }
.job__step:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }
.job__n { font: italic 400 clamp(4rem, 6vw, 5.6rem)/1 var(--f-display); color: var(--russet-light); text-align: center; }
.job__text h3 { font: 400 1.45rem/1.2 var(--f-body); letter-spacing: 0; margin-bottom: var(--s2); }
.job__text p { font-size: 1.125rem; line-height: 1.45; margin: 0; color: var(--cream); }
.job__img { width: 100%; aspect-ratio: 3 / 2.2; object-fit: cover; border: 1px solid var(--rule-dark); }
@media (min-width: 901px) {
	.job__steps .job__step:nth-child(even) { grid-template-columns: 4.2rem minmax(0, .9fr) minmax(0, 1.25fr); }
}

/* ---------- Areas map (night) ---------- */
.areas-map { padding-block: var(--s5); overflow: hidden; }
.areas-map__grid { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.areas-map__title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); margin-bottom: var(--s5); }
.areas-map__link { font: 400 1.6rem/1.2 var(--f-display); color: var(--russet-light) !important; text-decoration: underline; text-decoration-color: var(--russet-light); text-underline-offset: 8px; letter-spacing: .04em; }
.areas-map__map { position: relative; }
.areas-map__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; mask-image: linear-gradient(90deg, transparent 0, #000 14%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.areas-map__towns { list-style: none; }
.areas-map__towns li { position: absolute; transform: translate(-6px, -50%); }
.areas-map__towns a { font: 400 clamp(.9rem, 1.3vw, 1.25rem)/1 var(--f-body); text-decoration: none !important; white-space: nowrap; text-shadow: 0 1px 6px #000; padding: 4px 2px; }
.areas-map__towns li::before { content: ''; position: absolute; left: -10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--russet-light); transform: translateY(-50%); }
.areas-map__home { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; font: 400 clamp(1.6rem, 2.6vw, 2.6rem)/1 var(--f-display); text-shadow: 0 1px 10px #000; pointer-events: none; }
.areas-map__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--russet); }

/* ---------- Quote band (paper) ---------- */
.quote { padding-block: var(--s9); text-align: center; }
.quote .wrap { width: min(1220px, 100% - 2 * var(--gutter)); }
.quote__sentence { font: 400 clamp(1.9rem, 3.6vw, 3.4rem)/1.4 var(--f-display); margin: 0 auto var(--s5); }
@media (max-width: 1100px) { .quote__br { display: none; } }
.blank { display: inline-block; width: 5.4em; border-bottom: 2px solid var(--ink); vertical-align: -.08em; height: .2em; }
.blank--short { width: 3.6em; }
.quote__hint { font: 400 1rem/1 var(--f-mono); letter-spacing: .06em; vertical-align: middle; }
.quote__form { max-width: 560px; margin: 0 auto; background: var(--paper-white); border-top: 3px solid var(--russet); }
.quote__note { font: 400 .9375rem/1.5 var(--f-mono); letter-spacing: .06em; margin: var(--s5) 0 0; }
.quote__paths { font-size: 1.0625rem; margin: var(--s3) 0 0; overflow-wrap: anywhere; }

/* ---------- Footer (night) ---------- */
.site-footer { padding-block: var(--s9) var(--s6); border-top: 1px solid rgba(235, 223, 200, .08); }
.site-footer__lockup { text-align: center; max-width: 760px; margin: 0 auto var(--s8); }
.site-footer__mark { display: inline-block; }
.site-footer__svg { width: 92px; height: auto; margin-bottom: var(--s5); }
.site-footer__statement { font-size: 1.25rem; letter-spacing: .02em; }
.site-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 1.1875rem; }
.on-dark .site-footer__contact a { text-decoration: none; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s6); padding-block: var(--s6); border-block: 1px solid var(--rule-dark); }
.site-footer__head { font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-muted); margin-bottom: var(--s4); }
.site-footer__col ul { list-style: none; display: grid; gap: 6px; }
.site-footer__col a { text-decoration: none !important; font-size: 1.0625rem; }
.site-footer__col a:hover { color: var(--russet-light) !important; }
.site-footer__base { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding-top: var(--s6); text-align: center; }
.site-footer__base p { margin: 0; }
.footer-builtby { color: var(--cream-muted); letter-spacing: .03em; }

/* ---------- WhatsApp pill + mobile bar ---------- */
.wa { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 50; }
.wa__pill { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; background: var(--night); color: var(--cream); border: 1px solid var(--cream); font: 400 1.125rem/1 var(--f-display); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.wa__pill:hover { background: var(--umber); }
.wa__icon { width: 22px; height: 22px; color: #25D366; }
.wa__panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(380px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 120px)); overflow-y: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: var(--s5); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.wa__head { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); margin-bottom: var(--s4); }
.wa__title { font-size: 1.6rem; }
.wa__close { width: 44px; height: 44px; border: 1px solid var(--rule-paper); background: transparent; font-size: 1.5rem; color: var(--ink); cursor: pointer; }
.wa__form { display: grid; gap: 6px; }
.wa__form label { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px; }
.wa__form input, .wa__form select, .wa__form textarea { width: 100%; min-height: 44px; padding: 10px 12px; font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: var(--paper-white); border: 1px solid var(--stone); border-radius: 0; }
.wa__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--s3); }
.wa__row > div { display: grid; gap: 6px; }
.wa__send { margin-top: var(--s4); width: 100%; }
.mobile-bar { display: none; }
@media (max-width: 760px) {
	.mobile-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--night); border-top: 1px solid var(--rule-dark); }
	.mobile-bar__btn { display: flex; align-items: center; justify-content: center; min-height: 56px; font: 400 1.25rem/1 var(--f-display); text-decoration: none; color: var(--cream); }
	.mobile-bar__btn + .mobile-bar__btn { border-left: 1px solid var(--rule-dark); }
	.mobile-bar__btn--quote { background: var(--russet); color: var(--paper-white); }
	.wa { bottom: 72px; right: var(--s4); }
	.wa__pill { min-height: 48px; width: 48px; padding: 0; justify-content: center; }
	.wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.site-footer { padding-bottom: calc(var(--s6) + 56px); }
}

/* ---------- Page hero + breadcrumbs (other templates) ---------- */
.page-hero { padding-block: var(--s9); }
.page-hero__inner { max-width: 900px; }
.page-hero__line { font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-muted); }
.page-hero__title { font-size: clamp(2.8rem, 6vw, 5.2rem); margin-bottom: var(--s5); }
.page-hero__sub { font-size: 1.25rem; max-width: 56ch; margin-bottom: var(--s6); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font: 400 .8125rem/1.4 var(--f-mono); letter-spacing: .04em; margin-bottom: var(--s6); color: var(--cream-muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; opacity: .6; }

/* ---------- The broadsheet long read (§2c A7) ---------- */
.lr-mast { padding-block: var(--s9) var(--s7); }
.lr-mast .wrap--wide { border-top: 4px double var(--ink); padding-top: var(--s5); }
.lr-mast__line { text-align: center; font: 500 .875rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.lr-mast__headline { text-align: center; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1.02; max-width: 20ch; margin: var(--s5) auto var(--s4); }
.lr-mast__deck { text-align: center; font: italic 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.4 var(--f-body); margin: 0 auto var(--s6); max-width: 60ch; padding-bottom: var(--s5); border-bottom: 1px solid var(--rule-paper); }
.lr-open { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s6); align-items: start; padding-bottom: var(--s6); border-bottom: 1px solid var(--rule-paper); }
.lr-inside { border: 1px solid var(--ink); padding: var(--s5); }
.lr-inside__title { font: 500 .875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s4); }
.lr-inside ol { list-style: none; display: grid; gap: var(--s3); }
.lr-inside a { text-decoration: none !important; font-size: 1.0625rem; line-height: 1.3; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); }
.lr-inside a:hover { color: var(--russet-deep) !important; }
.lr-inside__n { color: var(--russet-deep); font-family: var(--f-mono); }

.lr-cols { column-count: 3; column-gap: clamp(24px, 3vw, 40px); column-rule: 1px solid var(--rule-paper); font-size: 1.0625rem; line-height: 1.62; hyphens: auto; -webkit-hyphens: auto; text-align: justify; text-wrap: pretty; }
.lr-cols--intro { column-count: 3; }
.lr-cols--two { column-count: 2; column-rule-color: var(--rule-dark); }
.lr-cols p, .lr-cols li { orphans: 3; widows: 3; }
.lr-cols ul, .lr-cols ol { padding-left: 1.2em; margin: 0 0 var(--s4); text-align: left; }
.lr-cols li { margin-bottom: 6px; }
.lr-ch { padding-block: var(--s8); }
.lr-ch--paper + .lr-ch--paper, .lr-mast + .lr-ch--paper { border-top: 0; }
.crosshead { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); text-align: center; font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: var(--s6); }
.crosshead::before, .crosshead::after { content: ''; flex: 0 0 clamp(36px, 7vw, 96px); height: 2px; background: var(--russet); }
.lr-ch--paper .lr-cols > p:first-child::first-letter { float: left; font: 400 4.4em/.78 var(--f-display); margin: .05em .08em 0 0; color: var(--ink); }
.lr__h3 { font-size: 1.55rem; line-height: 1.15; margin: var(--s4) 0 var(--s3); break-after: avoid; text-align: left; }
.lr-sidebar { break-inside: avoid; border: 1px solid currentColor; padding: var(--s5); margin: var(--s3) 0 var(--s5); font-family: var(--f-mono); font-size: .875rem; line-height: 1.7; text-align: left; hyphens: manual; }
.lr-sidebar p:last-child { margin-bottom: 0; }
.lr-sidebar__label { font: 500 .9375rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.lr-butway { break-inside: avoid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid currentColor; margin: var(--s3) 0 var(--s5); text-align: left; hyphens: manual; }
.lr-butway__half { padding: var(--s5); }
.lr-butway__half + .lr-butway__half { border-left: 1px solid currentColor; }
.lr-butway__head { font: italic 400 1.9rem/1.1 var(--f-display); margin-bottom: var(--s3); }
.lr-butway__half p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.lr-ask { break-inside: avoid; margin: var(--s3) 0 var(--s5); padding: var(--s5); border: 3px double var(--ink); background: var(--paper-white); color: var(--ink); text-align: left; hyphens: manual; }
.on-dark .lr-ask { background: var(--paper); border-color: var(--paper-2); color: var(--ink); }
.on-dark .lr-ask a:not(.btn) { color: var(--ink); text-decoration-color: var(--russet-deep); }
.lr-ask__label { font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.lr-ask__q { font: italic 400 1.55rem/1.25 var(--f-body); }
.lr-ask p:last-child { margin-bottom: 0; }
.lr-figure { margin: var(--s5) 0 var(--s6) auto; width: min(100%, 66%); }
.lr-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lr-figure figcaption { font: 400 .875rem/1.5 var(--f-mono); margin-top: var(--s3); }
.lr-table { margin: var(--s5) 0 var(--s6); }
.lr-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--f-mono); font-size: .9375rem; line-height: 1.45; }
.lr-table caption { text-align: left; font: italic 400 1.0625rem/1.4 var(--f-body); margin-bottom: var(--s3); }
.lr-table th, .lr-table td { border: 1px solid var(--rule-paper); padding: 10px 14px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.on-dark .lr-table th, .on-dark .lr-table td { border-color: var(--rule-dark); }
.lr-table thead th { font-weight: 500; background: var(--paper-2); }
.on-dark .lr-table thead th { background: var(--night-2); }
.lr-table tbody th { font-weight: 400; }
.lr-stop { padding-block: var(--s6); border-top: 1px solid var(--rule-paper); }
.lr-stop__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); align-items: center; }
.lr-stop__label { margin: 0; font: 500 1.25rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--russet-deep); }
.lr-stop ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.lr-stop li { text-align: center; font: 400 1.35rem/1.3 var(--f-display); padding: var(--s3) var(--s5); border-left: 1px solid var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.lr-cols, .lr-cols--intro { column-count: 2; }
	.fit__small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.job__grid { grid-template-columns: minmax(0, 1fr); }
	.awkward__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "t t" "a b" "c d" "n n"; }
}
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr); }
	.hero__copy { order: -1; }
	.cover { max-width: 460px; width: 100%; margin-inline: auto; }
	.hero__ctas { max-width: none; }
	.answers__grid, .areas-map__grid { grid-template-columns: minmax(0, 1fr); }
	.fit__big { grid-template-columns: minmax(0, 1fr); }
	.fit__big .fit__card img { aspect-ratio: 16 / 8 !important; }
	.lr-open { grid-template-columns: minmax(0, 1fr); }
	.lr-figure { width: 100%; }
	.job__steps { grid-template-columns: minmax(0, 1fr); }
	.job__step { padding-inline: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--rule-dark); }
	.job__step:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
	body { font-size: 1.0625rem; }
	.lr-cols, .lr-cols--intro, .lr-cols--two { column-count: 1; text-align: left; hyphens: manual; }
	.awkward__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "a" "b" "c" "d" "n"; }
	.awkward__item { grid-template-columns: 96px minmax(0, 1fr); }
	.fit__small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.job__step { grid-template-columns: 3rem minmax(0, 1fr); }
	.job__img { grid-column: 1 / -1; }
	.lr-butway { grid-template-columns: minmax(0, 1fr); }
	.lr-butway__half + .lr-butway__half { border-left: 0; border-top: 1px solid currentColor; }
	.lr-stop__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.lr-stop li { border-left: 0; border-top: 1px solid var(--ink); }
	.lr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.lr-table table, .lr-table tbody, .lr-table tr, .lr-table th, .lr-table td { display: block; width: 100%; }
	.lr-table tr { border: 1px solid var(--rule-paper); margin-bottom: var(--s3); }
	.lr-table th, .lr-table td { border: 0; padding: 6px 12px; }
	.lr-table tbody th { font-weight: 500; background: var(--paper-2); }
	.on-dark .lr-table tbody th { background: var(--night-2); }
	.lr-table td::before { content: attr(data-label) ': '; color: var(--ink-muted); }
	.on-dark .lr-table td::before { color: var(--cream-muted); }
	/* Map labels become a chip list under the map (§2b.2: mobile is designed, not squeezed). */
	.areas-map__towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
	.areas-map__towns li { position: static !important; transform: none; }
	.areas-map__towns li::before { display: none; }
	.areas-map__towns a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--rule-dark); font-size: 1rem; text-shadow: none; }
	.areas-map__home { font-size: 1.2rem; }
	.areas-map__dot { width: 14px; height: 14px; }
	.quote__sentence { font-size: 1.75rem; }
	.blank { width: 3.6em; } .blank--short { width: 2.6em; }
}

/* ---------- Motion (CSS only; hidden states only under .js-motion, §7c.6) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js-motion .cover { animation: fsl-rise .6s ease-out both; }
	.js-motion .cover-lines li { animation: fsl-fade .4s ease-out both; }
	.js-motion .cover-lines li:nth-child(2) { animation-delay: .08s; } .js-motion .cover-lines li:nth-child(3) { animation-delay: .16s; } .js-motion .cover-lines li:nth-child(4) { animation-delay: .24s; }
	.js-motion [data-reveal]:not(.is-in) .job__n, .js-motion [data-reveal]:not(.is-in) .areas-map__towns li { opacity: 0; transform: translateY(8px); }
	.js-motion [data-reveal] .job__n, .js-motion [data-reveal] .areas-map__towns li { transition: opacity .4s ease-out, transform .4s ease-out; }
	.js-motion [data-reveal]:not(.is-in) .ledger__row { box-shadow: none; }
}
@keyframes fsl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fsl-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =================== Stage 4 templates =================== */

/* Template gate fixes (2026-10-22): town roof notes stack under their circle; captions never squeeze. */
.lr-table caption { caption-side: top; }
@media (max-width: 640px) {
	.lr-table caption { display: block; width: 100%; }
}

/* Cover hero on service and town pages */
.hero--page { padding-block: var(--s5) var(--s8); }
.hero--page .crumbs ol { margin-bottom: var(--s4); }
.hero__title--page { font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.02; }
.cover__mast--word { font-size: clamp(2.6rem, 5.4vw, 5.2rem); letter-spacing: .01em; top: 5%; padding-inline: 4%; overflow-wrap: anywhere; }
.cover__strap--word { top: auto; bottom: 6%; left: 6%; right: 6%; font-size: clamp(.9rem, 1.1vw, 1.05rem); }

/* Further reading (service) */
.reading { padding-block: var(--s8); }
.reading__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--s7); align-items: start; }
.reading__title { font-size: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: var(--s4); }
.reading__label { font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--russet-light); margin-bottom: var(--s3); }
.reading__label--answers { margin-top: calc(var(--s8) + 4px); }
.reading__guides, .reading__answers { list-style: none; }
.reading__guides li { padding-block: var(--s4); border-bottom: 1px solid var(--rule-dark); }
.reading__guides li:last-child { border-bottom: 0; }
.reading__guide { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--f-display); text-decoration: none !important; }
.reading__summary { margin: var(--s2) 0 var(--s1); color: var(--cream-muted); font-size: 1.0625rem; }
.reading__time { font: 400 .8125rem/1.3 var(--f-mono); color: var(--cream-muted); margin: 0; }
.reading__answers li { border-bottom: 1px solid var(--rule-dark); }
.reading__answers a { display: block; padding-block: var(--s4); font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.25 var(--f-body); text-decoration: none !important; }

/* Other things we fit (service) */
.related { padding-block: var(--s7); }
.related__title { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: var(--s4); }
.related__row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--s4); }
.related__card a { border: 1px solid var(--rule-paper); }
.related__card img { aspect-ratio: 4 / 2.9; height: auto; }
.related__card .fit__label { font-size: 1.05rem; padding-block: 12px; }

/* Town: the roofs spread (three items + note) */
.awkward__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .7fr); grid-template-areas: "t t t ." "a b c n"; }
.awkward__grid--three .awkward__item:nth-of-type(3) { grid-area: c; }
.awkward__grid--three .awkward__item { grid-template-columns: minmax(0, 1fr); justify-items: start; align-self: start; }
.awkward__grid--three .awkward__photo { width: clamp(96px, 8vw, 128px); }
.awkward__grid--three .awkward__item p { font-size: 1.05rem; max-width: none; }

/* Town: what fits here */
.fits { padding-block: var(--s7) var(--s8); }
.fits__row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s4); }
.fit__card-link { display: flex; flex-direction: column; text-decoration: none !important; background: var(--paper); color: var(--ink) !important; }
.fit__card-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fits__line { margin: var(--s3) var(--s2) 0; font-size: 1.0625rem; line-height: 1.5; color: var(--cream); text-align: center; }

/* Town: nearby */
.nearby { padding-block: var(--s7); border-top: 1px solid var(--rule-dark); }
.nearby__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s7); align-items: center; }
.nearby__title { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: var(--s3); }
.nearby__intro { color: var(--cream-muted); }
.nearby__chips { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--s3); margin-top: var(--s5); }
.nearby__chips a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px; border: 1px solid var(--cream); text-decoration: none !important; font-size: 1.0625rem; text-align: center; }
.nearby__chips a:hover { background: var(--umber); }
.nearby__chips .nearby__all { border-color: var(--russet-light); color: var(--russet-light) !important; }
.nearby__map { position: relative; }
.nearby__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.nearby__home { position: absolute; transform: translate(-50%, -50%); font: 400 1.2rem/1 var(--f-display); text-shadow: 0 1px 8px #000; }
.nearby__dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--russet); box-shadow: 0 0 0 4px rgba(154, 67, 24, .35); transform: translate(-50%, -50%); }
.nearby__dot span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 400 1.05rem/1 var(--f-body); color: var(--russet-light); text-shadow: 0 1px 6px #000; }

/* Town: the lighter broadsheet */
.lr--light { padding-block: var(--s8); }
.lr-light__line { font: 500 .875rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding-bottom: var(--s3); border-bottom: 2px solid var(--russet); margin-bottom: var(--s6); }
.lr-light__ch + .lr-light__ch { margin-top: var(--s8); }
.lr--light .lr-cols--two { column-rule-color: var(--rule-paper); }

/* Page heroes for guides, answers, articles, indexes, contact */
.page-hero__inner--centre { margin-inline: auto; text-align: center; max-width: 900px; }
.page-hero__inner--centre .crumbs ol { justify-content: center; }
.page-hero__deck { font: italic 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.45 var(--f-body); color: var(--cream); max-width: 56ch; margin-inline: auto; }
.page-hero__inner:not(.page-hero__inner--centre) .page-hero__deck { margin-inline: 0; }
.page-hero__title--q { font-size: clamp(2.6rem, 5vw, 4.6rem); max-width: 22ch; }
.page-hero--short, .page-hero--index { padding-block: var(--s7); }
.hero__ctas--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); max-width: none; margin-top: var(--s5); }

/* Guide: the feature flow */
.feature, .article, .answer, .index { padding-bottom: var(--s9); }
.feature__banner { margin: 0 auto; transform: translateY(calc(-1 * var(--s6))); }
.feature__banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.feature__body, .article__body, .answer__body { width: min(var(--w-prose), 100% - 2 * var(--gutter)); margin-inline: auto; font-size: 1.1875rem; line-height: 1.7; }
.feature__intro > p:first-child::first-letter { float: left; font: 400 4.6em/.78 var(--f-display); margin: .06em .1em 0 0; }
.feature__section { margin-top: var(--s8); }
.feature__num { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s4); }
.feature__num::before, .feature__num::after { content: ""; flex: 1; height: 1px; background: var(--rule-paper); }
.feature__num span { font: italic 400 2.6rem/1 var(--f-display); color: var(--russet-deep); }
.feature__h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); text-align: center; margin-bottom: var(--s5); }
.feature__body h3, .article__body h3 { font-size: 1.55rem; margin: var(--s5) 0 var(--s3); }
.feature__body ul, .feature__body ol, .article__body ul, .article__body ol, .answer__body ul, .answer__body ol { padding-left: 1.2em; margin-bottom: var(--s4); }
.pull { margin: var(--s6) 0; padding: var(--s5) var(--s6); background: var(--night); color: var(--cream); border-left: 4px solid var(--russet); }
.pull p { margin: 0; font: italic 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.35 var(--f-display); }
.checklist { margin: var(--s5) 0; padding: var(--s5); border: 1px solid var(--ink); background: var(--paper-white); }
.checklist__label { font: 500 .875rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.checklist ul { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: var(--s3); }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--russet-deep); }

/* Keep reading */
.keep { margin-top: var(--s9); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6); align-items: start; border-top: 1px solid var(--rule-paper); padding-top: var(--s6); }
.keep__title { grid-column: 1 / -1; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.keep__hub { display: block; padding: var(--s5); background: var(--night); color: var(--cream) !important; text-decoration: none !important; font: 400 1.6rem/1.2 var(--f-display); }
.keep__kicker { display: block; font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--russet-light); margin-bottom: var(--s3); }
.keep__list { list-style: none; }
.keep__list li { border-bottom: 1px solid var(--rule-paper); }
.keep__list a { display: block; padding-block: var(--s3); text-decoration: none !important; font-size: 1.125rem; }
.keep__type { display: inline-block; min-width: 5.5rem; font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--russet-deep); }

/* Answer: the direct answer */
.answer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: var(--s6); align-items: stretch; transform: translateY(calc(-1 * var(--s6))); }
.answer__callout { background: var(--paper-white); border-top: 4px solid var(--russet); padding: var(--s6); font-size: 1.3rem; line-height: 1.55; box-shadow: 0 10px 30px rgba(15, 14, 12, .12); }
.answer__callout p { font-weight: 500; }
.answer__callout .answer__label { font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--russet-deep); }
.answer__cta { margin-top: var(--s3); }
.answer__photo { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.answer__section { margin-top: var(--s7); }
.answer__section h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); padding-top: var(--s4); border-top: 1px solid var(--rule-paper); margin-bottom: var(--s4); }

/* Designed article (core + legal) */
.article__updated { font: 400 .875rem/1.4 var(--f-mono); color: var(--ink-muted); text-align: center; padding-top: var(--s6); }
.article__section { margin-top: var(--s7); }
.article__kicker { font: 500 .875rem/1 var(--f-mono); letter-spacing: .14em; color: var(--russet-deep); text-align: center; margin-bottom: var(--s3); }
.article__kicker::after { content: ""; display: block; width: 36px; height: 1px; background: var(--russet); margin: var(--s3) auto 0; }
.article__section h2 { text-align: center; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: var(--s5); }
.article__body li::marker, .feature__body li::marker, .answer__body li::marker { color: var(--russet-deep); }
.article .feature__banner { transform: none; padding-top: var(--s7); }

/* Contact: form first */
.contact { padding-block: var(--s7); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.contact__h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: var(--s4); }
.contact__embed { max-width: none; }
.contact__card { padding: var(--s6); }
.contact__card-title { font-size: 2rem; margin-bottom: var(--s4); }
.contact__list { margin: var(--s5) 0 0; display: grid; gap: var(--s4); }
.contact__list dt { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-muted); }
.contact__list dd { margin: 4px 0 0; font-size: 1.1875rem; overflow-wrap: anywhere; }
.contact-map { padding-block: var(--s7); }
.contact-map__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s6); align-items: center; }
.contact-map__title { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: var(--s4); }
.contact-map__map { height: 440px; border: 1px solid var(--rule-dark); background: var(--night-2); }
.leaflet-container { font: 400 .875rem/1.4 var(--f-body); }

/* Indexes */
.index { padding-top: var(--s7); }
.index__cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.index__cards--featured { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.index__card a { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; background: var(--paper-white); border: 1px solid var(--rule-paper); transition: transform .15s; }
.index__card a:hover { transform: translateY(-2px); }
.index__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.index__cards--featured img { aspect-ratio: 4 / 5; }
.index__card-title { font: 400 1.35rem/1.2 var(--f-display); padding: var(--s4) var(--s4) var(--s2); }
.index__card-line { padding: 0 var(--s4) var(--s4); font-size: 1rem; color: var(--ink-muted); }
.index__card-meta { margin-top: auto; padding: 0 var(--s4) var(--s4); font: 400 .8125rem/1.3 var(--f-mono); color: var(--ink-muted); }
.index__jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s6); }
.index__jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid var(--ink); text-decoration: none !important; }
.index__group { margin-bottom: var(--s7); }
.index__group-title { font-size: clamp(1.8rem, 3vw, 2.4rem); padding-bottom: var(--s3); border-bottom: 2px solid var(--russet); margin-bottom: var(--s5); }
.index__count { font: 400 .875rem/1 var(--f-mono); color: var(--ink-muted); letter-spacing: .06em; vertical-align: middle; }
.index__compact { list-style: none; columns: 3 240px; column-gap: var(--s6); }
.index__compact li { break-inside: avoid; padding-block: 8px; border-bottom: 1px solid var(--rule-paper); }
.index__compact a { font-size: 1.125rem; }
.index__compact span { display: block; font: 400 .8125rem/1.4 var(--f-mono); color: var(--ink-muted); }
.index__after { max-width: 64ch; margin: var(--s6) auto 0; text-align: center; }

@media (max-width: 1100px) {
	.awkward__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "t t" "a b" "c n"; }
}
@media (max-width: 900px) {
	.nearby__grid, .contact__grid, .contact-map__grid, .answer__top, .keep { grid-template-columns: minmax(0, 1fr); }
	.answer__top { transform: none; padding-top: var(--s5); }
	.feature__banner { transform: none; padding-top: var(--s5); }
}
@media (max-width: 640px) {
	.awkward__grid--three { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "a" "b" "c" "n"; }
	.contact-map__map { height: 320px; }
	.feature__banner img { aspect-ratio: 16 / 10; }
	.feature__body, .article__body, .answer__body { font-size: 1.0625rem; }
	.answer__callout { padding: var(--s5); font-size: 1.15rem; }
	.fits__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
	.fits__line { font-size: .975rem; }
	.nearby__dot span { display: none; }
}

/* ---------- Judge loop 1 (2026-10-22) ---------- */
/* Columns go ragged-right with hyphenation: justified 33-38ch columns opened rivers. */
.lr-cols { text-align: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.crosshead { text-wrap: balance; }
.crosshead__no { text-align: center; font: 500 .8125rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--russet-deep); margin: 0 0 var(--s3); }
.on-dark .crosshead__no { color: var(--russet-light); }
/* A reader's question on paper spans the columns, set beside its own two-column answer. */
.lr-ch--paper > .wrap--wide > .lr-ask, .lr--light .lr-ask { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: var(--s2) var(--s6); margin: var(--s5) 0 var(--s6); }
.lr-ch--paper > .wrap--wide > .lr-ask > .lr-ask__label, .lr--light .lr-ask > .lr-ask__label { grid-column: 1; margin: 0; }
.lr-ch--paper > .wrap--wide > .lr-ask > .lr-ask__q, .lr--light .lr-ask > .lr-ask__q { grid-column: 1; margin: 0; }
.lr-ch--paper > .wrap--wide > .lr-ask > .lr-ask__a, .lr--light .lr-ask > .lr-ask__a { grid-column: 2; grid-row: 1 / span 2; columns: 2 240px; column-gap: var(--s6); }

/* Cover word fits its frame whatever its length (container units against the cover width). */
.cover { container-type: inline-size; }
.cover__head { position: absolute; left: 0; right: 0; top: 4%; text-align: center; padding-inline: 5%; }
.cover__head .cover__mast--word { position: static; font-size: min(5.2rem, calc(150cqi / var(--chars))); line-height: .95; white-space: nowrap; overflow-wrap: normal; padding: 0; }
.cover__head .cover__strap--word { position: static; margin-top: var(--s3); font-size: clamp(.875rem, 4cqi, 1.05rem); }

/* Town roofs: circle beside its note, as the mockup has it. */
.awkward__grid--three .awkward__item { grid-template-columns: clamp(88px, 8vw, 112px) minmax(0, 1fr); justify-items: stretch; align-items: start; }
.awkward__grid--three .awkward__photo { width: 100%; }
.awkward__grid--three .awkward__item p { font-size: 1rem; line-height: 1.5; }

/* Town nearby: the map bleeds to the right edge and carries labels. */
.nearby { overflow: hidden; padding-block: 0; }
.nearby__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: stretch; }
.nearby__grid > div:first-child { padding-block: var(--s8); }
.nearby__map { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--w-wide)) / 2)); min-height: 420px; }
.nearby__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.nearby__home { font-size: 1.6rem; }
.nearby__label { position: absolute; transform: translate(-6px, -50%); font: 400 .95rem/1 var(--f-body); color: var(--cream); text-shadow: 0 1px 6px #000; white-space: nowrap; }
.nearby__chips a { font-size: 1.125rem; min-height: 60px; }

@media (max-width: 900px) {
	.nearby__map { margin-right: 0; min-height: 0; aspect-ratio: 2 / 1; }
	.nearby__grid > div:first-child { padding-bottom: 0; }
	.nearby { padding-bottom: var(--s6); }
	.lr-ch--paper > .wrap--wide > .lr-ask, .lr--light .lr-ask { grid-template-columns: minmax(0, 1fr); }
	.lr-ch--paper > .wrap--wide > .lr-ask > .lr-ask__a, .lr--light .lr-ask > .lr-ask__a { grid-column: 1; grid-row: auto; columns: 1; }
}
@media (max-width: 640px) {
	.nearby__label { display: none; }
}
@media (max-width: 480px) {
	.crosshead::before, .crosshead::after { flex-basis: 20px; }
}

/* Judge loop 2 bug fixes (2026-10-22) */
.lr-ask__a p:last-child { margin-bottom: 0; }
.lr-cols--one { column-count: 1 !important; max-width: 68ch; }
.hero--page .cover::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(15, 14, 12, .72) 0%, rgba(15, 14, 12, .45) 60%, rgba(15, 14, 12, 0) 100%); pointer-events: none; }
.hero--page .cover__head { z-index: 1; }
.hero--page .cover__img { object-position: center 38%; }