/* Robin Skylights. Art direction: a November sky over Nottingham, printed big. */

/* ---------- Fonts (self-hosted, metric fallbacks keep CLS at 0) ---------- */
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Display Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 76%; ascent-override: 118%; descent-override: 30%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 103%; ascent-override: 92%; descent-override: 26%; }

/* ---------- Tokens ---------- */
:root {
	--plum: #201825; --plum-deep: #151219; --plum-mid: #3A2D40;
	--frost: #ECE9EC; --frost-2: #E3DEE4;
	--amber: #ECAB2D; --amber-deep: #8A5A00;
	--mauve: #6B5E6B; --mauve-light: #B9AFBE;
	--ink: var(--plum); --ground: var(--frost); --muted: var(--mauve); --rule: rgba(32, 24, 37, .18); --link: var(--plum);
	--f-display: "Big Shoulders Display", "Display Fallback", "Arial Narrow", sans-serif;
	--f-serif: "Source Serif 4", "Serif Fallback", Georgia, serif;
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
	--pad: clamp(64px, 9vw, 128px);
	--w-prose: 68ch; --w-std: 1140px; --w-wide: 1320px;
	--gutter: clamp(16px, 4vw, 40px);
	--header-h: 72px;
}

/* ---------- 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(--plum); color: var(--ink); font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.7; text-rendering: optimizeLegibility; }
main { display: block; background: var(--frost); }
main:focus { outline: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; margin: 0 0 var(--s4); }
p { margin: 0 0 var(--s4); }
mark { background: var(--frost); color: var(--plum); padding: 0.05em 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.screen-reader-text { 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: -60px; z-index: 100; background: var(--amber); color: var(--plum); padding: var(--s3) var(--s4); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }
.skip:focus { top: var(--s4); }
.wrap { width: 100%; max-width: calc(var(--w-std) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.wrap--prose { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Grounds: ONE mechanism (§7c.3). .on-dark outranks section rules. ---------- */
.on-dark { --ink: var(--frost); --muted: var(--mauve-light); --rule: rgba(236, 233, 236, .2); --link: var(--frost); background-color: var(--plum); color: var(--frost); }
body .on-dark a:not(.btn):not(.badge-cta):not(.pill):not(.mbar__btn) { color: var(--frost); }
body .on-light .on-dark a:not(.btn):not(.badge-cta):not(.pill) { color: var(--frost); }
body .on-dark .on-light a:not(.btn) { color: var(--plum); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn--amber { background: var(--amber); color: var(--plum); }
.btn--amber:hover { background: var(--frost); color: var(--plum); }
.btn--outline { border-color: currentColor; color: var(--ink); background: transparent; border-radius: 999px; }
.on-dark .btn--outline { color: var(--frost); }
.btn--outline:hover { background: var(--frost); color: var(--plum); border-color: var(--frost); }
.btn--plum { background: var(--plum); color: var(--frost); }
.btn--plum:hover { background: var(--plum-mid); }

/* ---------- Header (01) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--plum); border-bottom: 1px solid var(--plum-mid); }
.site-header__bar { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--frost); flex: none; }
.logo .mark { width: 44px; height: 44px; }
.mark__disc { fill: none; stroke: var(--amber); stroke-width: 3; }
.mark__bird { fill: var(--amber); }
.mark__breast { fill: var(--plum); opacity: .35; }
.mark__eye { fill: var(--plum); }
.logo__word { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; line-height: 1; }
.logo__place { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.logo--footer { flex-wrap: wrap; }
.logo--footer .logo__place { position: static; width: auto; height: auto; clip: auto; flex-basis: 100%; padding-left: 56px; margin-top: -6px; font-family: var(--f-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; color: var(--mauve-light); }
.nav { margin: 0 auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item + .nav__item::before { content: "/"; color: var(--mauve-light); padding: 0 var(--s3); font-family: var(--f-display); }
.nav__link { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: var(--s2) 0; }
.site-header .nav__link { color: var(--frost); }
.nav__link:hover, .nav__link:focus-visible { color: var(--amber) !important; }
.nav__caret { width: 28px; height: 28px; margin-left: 2px; background: none; border: 0; color: var(--frost); cursor: pointer; position: relative; }
.nav__caret::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s; }
.nav__caret[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); }
.nav__sub { list-style: none; margin: 0; padding: var(--s3) 0; position: absolute; top: 100%; left: -16px; min-width: 300px; background: var(--plum-deep); border: 1px solid var(--plum-mid); border-top: 3px solid var(--amber); display: none; z-index: 60; }
.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub, .nav__sub.is-open { display: block; }
.nav__sub a { display: block; padding: var(--s2) var(--s5); font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--frost) !important; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--plum-mid); color: var(--amber) !important; }
.nav__all a { color: var(--amber) !important; }
.nav__mobile-cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--s4); flex: none; }
.pill { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--frost); border-radius: 999px; font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--frost); }
.pill:hover { background: var(--frost); color: var(--plum) !important; }
.hdr-phone { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; text-decoration: none; color: var(--frost); min-height: 26px; }
.badge-cta { display: grid; place-content: center; width: 72px; height: 72px; margin: -4px 0; border-radius: 50%; background: var(--amber); color: var(--plum); text-align: center; text-decoration: none; font-family: var(--f-display); font-weight: 900; font-size: 1.125rem; line-height: .95; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s; }
.badge-cta span { display: block; }
.badge-cta:hover { transform: rotate(-6deg) scale(1.04); }
.burger { display: none; width: 48px; height: 48px; margin-left: auto; background: none; border: 1.5px solid var(--plum-mid); color: var(--frost); cursor: pointer; }
.burger__lines, .burger__lines::before, .burger__lines::after { display: block; width: 22px; height: 2px; background: currentColor; margin: 0 auto; position: relative; transition: transform .2s; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; }
.burger__lines::before { top: -7px; } .burger__lines::after { top: 7px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1025px) and (max-width: 1240px) {
	.nav__item + .nav__item::before { padding: 0 var(--s2); }
	.nav__link { font-size: 1rem; }
	.site-header__actions .pill span { display: none; }
	.site-header__actions .pill { padding: 0 var(--s3); }
}
@media (max-width: 1024px) {
	.burger { display: inline-flex; align-items: center; justify-content: center; order: 3; margin-left: 0; }
	.site-header__bar { gap: var(--s3); }
	.site-header__actions { margin-left: auto; gap: var(--s3); }
	.site-header__actions .pill, .hdr-phone { display: none; }
	.badge-cta { width: 56px; height: 56px; font-size: .9375rem; margin: 0; }
	.nav { position: fixed; left: 0; right: 0; top: var(--header-h); margin: 0; background: var(--plum-deep); border-top: 1px solid var(--plum-mid); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; display: none; padding: var(--s4) var(--gutter) var(--s7); }
	.nav.is-open { display: block; }
	html.nav-open { overflow: hidden; }
	.nav__list { flex-direction: column; align-items: stretch; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--plum-mid); }
	.nav__item + .nav__item::before { display: none; }
	.nav__link { flex: 1; padding: var(--s4) 0; font-size: 1.5rem; }
	.nav__caret { width: 48px; height: 48px; }
	.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { display: none; }
	.nav__sub { position: static; flex-basis: 100%; min-width: 0; border: 0; border-left: 3px solid var(--amber); background: transparent; padding: 0 0 var(--s3) var(--s4); }
	.nav__sub.is-open { display: block !important; }
	.nav__sub a { padding: var(--s2) 0; font-size: 1.125rem; }
	.nav__mobile-cta { display: grid; gap: var(--s3); margin-top: var(--s5); }
	.nav__mobile-cta .btn { justify-content: center; }
}
@media (max-width: 380px) { .logo__word { font-size: 1.3rem; } .logo .mark { width: 36px; height: 36px; } }

/* ---------- Hero (02): product strip ---------- */
.hero { padding: var(--s6) 0 0; }
.hero__label { font-family: var(--f-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mauve-light); margin: 0 0 var(--s2); font-size: .9375rem; }
.hero__title { font-size: clamp(2.4rem, 6.3vw, 5.6rem); font-weight: 900; line-height: .86; margin: 0 0 var(--s5); color: var(--frost); }
.panels { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; height: clamp(320px, 38vw, 520px); background: var(--plum); }
.panel { flex: 1 1 0; min-width: 0; transition: flex-grow .5s ease; position: relative; overflow: hidden; }
.panel.is-open { flex-grow: 1.35; }
.panels:hover .panel { flex-grow: 1; }
.panels:hover .panel:hover, .panel:focus-within { flex-grow: 1.6 !important; }
.panel__link { display: block; height: 100%; position: relative; text-decoration: none; }
.panel__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s ease; }
.panel__link:hover .panel__img { transform: scale(1.03); }
.panel__link::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(21, 18, 25, .88)); }
.panel__name { position: absolute; left: 0; right: 0; bottom: var(--s5); z-index: 1; text-align: center; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: .95; color: var(--frost); padding: 0 var(--s3); }
.hero__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); }
.hero__risk { margin: 0; color: var(--frost); font-size: 1rem; }
.hero__lede { max-width: 62ch; color: var(--mauve-light); margin: 0; padding-bottom: var(--s6); }
@media (max-width: 760px) {
	.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
	.panel { aspect-ratio: 4 / 5; }
	.panels:hover .panel, .panel.is-open { flex-grow: 1; }
	.panel__name { font-size: 1.5rem; bottom: var(--s3); }
	.hero__bar .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Ticker (03) ---------- */
.ticker { background: var(--amber); color: var(--plum); overflow: hidden; border-block: 1px solid var(--plum); }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__list { list-style: none; margin: 0; padding: 0; display: flex; }
.ticker__list li { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.125rem, 2.1vw, 1.875rem); padding: var(--s3) var(--s5); white-space: nowrap; display: flex; align-items: center; gap: var(--s5); }
.ticker__list li::after { content: "\2726"; font-size: .8em; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Problem (04): knockout word ---------- */
.knock { padding: clamp(40px, 5vw, 72px) 0; }
.knock__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.knock__word, .ch__word--fill { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .8; letter-spacing: -.01em; color: var(--frost); background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.knock__word { font-size: clamp(3.5rem, 22vw, 24rem); overflow-wrap: anywhere; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .knock__word, .ch__word--fill { -webkit-text-fill-color: currentColor; background: none; } }
.knock__title { font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--ink); }
.knock__para { color: var(--ink); font-size: 1.3125rem; max-width: 38ch; }
@media (max-width: 760px) { .knock__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* ---------- Services (05): type specimen ---------- */
.specimen { background: var(--frost); padding: var(--s7) 0 var(--s8); }
.specimen__label { font-size: 1.125rem; letter-spacing: .14em; color: var(--plum); margin-bottom: var(--s5); }
.specimen__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s6) var(--s7); }
.specimen__item a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 var(--s4); align-items: center; text-decoration: none; color: var(--plum); }
.specimen__img { grid-row: span 2; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.specimen__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 3.1vw, 2.9rem); line-height: .95; align-self: end; }
.specimen__item:nth-child(3n+2) .specimen__name { font-weight: 900; }
.specimen__item:nth-child(3n) .specimen__name { font-weight: 700; letter-spacing: .02em; }
.specimen__note { font-size: 1rem; color: var(--mauve); align-self: start; padding-top: 4px; }
.specimen__item a:hover .specimen__name { text-decoration: underline; text-decoration-color: var(--amber-deep); text-decoration-thickness: 3px; }

/* ---------- Proof (06) ---------- */
.proof { background: var(--amber); color: var(--plum); padding: var(--pad) 0; --link: var(--plum); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s8); align-items: center; }
.proof__title { font-family: var(--f-serif); text-transform: none; font-weight: 600; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.01em; margin: 0; }
.proof__text { border-left: 2px solid var(--plum); padding-left: var(--s7); font-size: 1.25rem; line-height: 1.5; }
.proof__text p { margin-bottom: var(--s3); }
.proof__link { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--plum); }
@media (max-width: 760px) { .proof__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .proof__text { padding-left: var(--s4); font-size: 1.125rem; } }

/* ---------- Process (07) ---------- */
.steps { padding: var(--s7) 0; }
.steps .wrap--wide { max-width: calc(var(--w-wide) + 2 * var(--s4)); padding-inline: var(--s4); }
.steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: var(--s5); counter-reset: none; }
.step { position: relative; display: grid; grid-template-columns: minmax(64px, 16%) minmax(0, 1fr); grid-template-rows: auto auto; min-height: 200px; }
.step__n { grid-row: 1 / 3; grid-column: 1 / 3; justify-self: start; margin-left: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(7rem, 13vw, 11rem); line-height: .78; color: transparent; -webkit-text-stroke: 3px var(--amber); position: relative; z-index: 2; align-self: center; }
.step__img { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 200px; object-fit: cover; filter: brightness(.68); }
.step__title, .step__text { grid-column: 2; grid-row: 1 / 3; position: relative; z-index: 1; padding: 0 var(--s5); }
.step__title { align-self: center; margin: 0 0 var(--s7) 34%; font-size: clamp(1.75rem, 3vw, 2.6rem); color: var(--frost); }
.step__text { align-self: end; margin: 0 0 var(--s4) 34%; font-size: .9375rem; color: var(--frost); }
@media (max-width: 560px) { .step__title, .step__text { margin-left: 0; } .step__title { margin-bottom: var(--s8); } }

/* ---------- Areas (08): the Trent map ---------- */
.areamap { background: var(--frost); padding: var(--s8) 0; text-align: center; }
.areamap__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.areamap__all a { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.25rem; color: var(--plum); text-decoration-thickness: 2px; }
.map { position: relative; margin: var(--s4) 0 0; }
.map__img { width: 100%; height: auto; }
.map__labels { list-style: none; margin: 0; padding: 0; }
.map__labels li { position: absolute; transform: translate(-50%, -50%); }
.map__labels a, .map__base span { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.9rem); letter-spacing: .02em; color: var(--plum); text-decoration: none; white-space: nowrap; }
.map__labels a:hover { text-decoration: underline; text-decoration-color: var(--amber-deep); text-decoration-thickness: 3px; }
.map__base span { display: inline-flex; align-items: center; gap: 8px; }
.map__base span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 2px solid var(--plum); }
@media (max-width: 640px) {
	.map__img { display: none; }
	.map__labels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
	.map__labels li { position: static; transform: none; }
	.map__labels a { display: inline-block; border: 1.5px solid var(--plum); padding: var(--s1) var(--s3); font-size: 1.0625rem; }
	.map__base { display: none; }
}

/* ---------- Long read: A8 colour-field chapters ---------- */
.lr-intro { padding: var(--pad) 0 var(--s7); }
.lr-intro__label { display: inline-block; background: var(--amber); color: var(--plum); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: var(--s1) var(--s3); }
.lr-intro__dek { font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.3; max-width: 34ch; color: var(--frost); }
.lr-intro__dek p { margin: 0; }
.lr-chips { margin-top: var(--s6); border-top: 1px solid var(--plum-mid); }
.lr-chips ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.lr-chips li + li { border-left: 1px solid var(--plum-mid); }
.lr-chips a { display: block; padding: var(--s4) var(--s3); text-align: center; text-decoration: none; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: 1; }
.lr-chips__n { display: block; color: var(--amber); font-size: 1.75rem; }
.lr-chips__w { display: block; font-size: 1.375rem; color: var(--frost); margin-top: var(--s2); }
.lr-chips a:hover .lr-chips__w { color: var(--amber); }

.ch { position: relative; padding-bottom: var(--s8); }
.ch__band { padding: var(--s8) 0 calc(var(--s9) + var(--s6)); }
.ch--amber .ch__band { background: var(--amber); color: var(--plum); }
.ch--plum .ch__band { background: var(--plum); color: var(--frost); }
.ch--frost .ch__band { background: var(--frost); color: var(--plum); }
.ch--frost2 .ch__band { background: var(--frost-2); color: var(--plum); }
.ch--amber { background: var(--plum); }
.ch--plum { background: var(--frost); }
.ch--frost, .ch--frost2 { background: var(--plum); }
.ch__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: end; }
.ch--r .ch__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ch--r .ch__word { order: 2; text-align: right; }
.ch__word { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(4.5rem, 14vw, 12rem); line-height: .8; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ch--amber .ch__word { color: var(--plum); }
.ch--plum .ch__word { color: var(--frost); }
.ch--frost .ch__word, .ch--frost2 .ch__word { color: var(--plum); }
.ch__num { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1; padding: var(--s1) var(--s2); margin-bottom: var(--s4); }
.ch--amber .ch__num { background: var(--plum); color: var(--amber); }
.ch--plum .ch__num, .ch--frost .ch__num, .ch--frost2 .ch__num { background: var(--amber); color: var(--plum); }
.ch__title { font-family: var(--f-serif); text-transform: none; font-weight: 400; font-size: clamp(1.625rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: 0; margin: 0; max-width: 22ch; }
.ch__dek { margin: var(--s3) 0 0; font-style: italic; font-size: 1.125rem; }
.ch__panel-wrap { position: relative; margin-top: calc(-1 * var(--s9)); }
.ch__panel { position: relative; max-width: 800px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); background: var(--frost); color: var(--plum); --ink: var(--plum); --muted: var(--mauve); --link: var(--plum); --rule: rgba(32, 24, 37, .18); }
.ch--plum .ch__panel { background: var(--frost); }
.ch--frost .ch__panel, .ch--frost2 .ch__panel { background: var(--plum); color: var(--frost); --ink: var(--frost); --muted: var(--mauve-light); --link: var(--frost); --rule: rgba(236, 233, 236, .2); }
.ch--frost .ch__panel a:not(.btn), .ch--frost2 .ch__panel a:not(.btn) { color: var(--frost); }
.ch--amber .ch__panel { box-shadow: 0 0 0 1px var(--plum-mid); }
.prose > *:last-child { margin-bottom: 0; }
.prose h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin: var(--s6) 0 var(--s3); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--amber-deep); font-weight: 700; }
.ch--frost .prose li::marker, .ch--frost2 .prose li::marker, .on-dark .prose li::marker { color: var(--amber); }
.ch__body p, .prose p { max-width: 70ch; }

.mod { margin: var(--s6) 0; }
.mod__label { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 1.0625rem; margin: 0 0 var(--s1); }
.mod-short { border-left: 6px solid var(--amber); padding: var(--s2) 0 var(--s2) var(--s5); font-size: 1.1875rem; line-height: 1.5; }
.mod-short p:last-child { margin: 0; }
.mod-winter { max-width: 800px; margin: var(--s5) auto 0; padding: 0 clamp(24px, 5vw, 56px); }
.mod-winter .mod__label { color: var(--amber-deep); font-family: var(--f-serif); font-weight: 600; letter-spacing: .12em; font-size: .875rem; }
.mod-winter p { font-style: italic; font-size: 1.1875rem; margin: 0; }
.ch--amber .mod-winter, .ch--frost .mod-winter, .ch--frost2 .mod-winter { color: var(--frost); }
.ch--amber .mod-winter .mod__label, .ch--frost .mod-winter .mod__label, .ch--frost2 .mod-winter .mod__label { color: var(--amber); }
.mod-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); border-block: 1px solid var(--rule); }
.fig-item { padding: var(--s4) var(--s3); }
.fig-item + .fig-item { border-left: 1px solid var(--rule); }
.fig-item__n { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: .9; color: var(--amber-deep); }
.ch--frost .fig-item__n, .ch--frost2 .fig-item__n { color: var(--amber); }
.fig-item__u { font-family: var(--f-serif); font-weight: 400; font-size: 1rem; margin-left: 6px; }
.fig-item__l { margin: var(--s2) 0 0; font-size: .9375rem; }
.mod-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s4); }
.pair__item { margin: 0; position: relative; }
.pair__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair__tag { position: absolute; top: var(--s3); left: var(--s3); background: var(--plum); color: var(--frost); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px var(--s2); z-index: 1; }
.pair__item figcaption, .fig figcaption { font-size: .9375rem; color: var(--muted); padding-top: var(--s2); }
.mod-glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s3); margin-inline: 0; }
.gloss { border: 2px solid var(--amber-deep); padding: var(--s3) var(--s4); }
.ch--frost .gloss, .ch--frost2 .gloss { border-color: var(--amber); }
.gloss dt { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.25rem; }
.gloss dd { margin: var(--s1) 0 0; font-size: .9375rem; line-height: 1.5; }
.mod-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; line-height: 1.45; }
.mod-table caption { text-align: left; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding-bottom: var(--s2); }
.mod-table th, .mod-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; hyphens: auto; }
.mod-table thead th { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; border-bottom: 2px solid currentColor; }
@media (max-width: 640px) {
	.mod-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mod-table tr { display: block; border-bottom: 2px solid var(--rule); padding: var(--s2) 0; }
	.mod-table th, .mod-table td { display: block; border: 0; padding: var(--s1) 0; }
	.mod-table td::before { content: attr(data-label) ": "; font-weight: 600; }
	.ch__head, .ch--r .ch__head { grid-template-columns: minmax(0, 1fr); }
	.ch--r .ch__word { order: 0; text-align: left; }
	.fig-item + .fig-item { border-left: 0; border-top: 1px solid var(--rule); }
}
.fig { margin: var(--s6) 0; }
.fig__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fig--inset { max-width: 80%; margin-inline: auto; }

/* ---------- FAQ ---------- */
.faq { background: var(--frost); padding: var(--pad) 0; }
.faq__title { font-size: clamp(2rem, 4vw, 3rem); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--s4) var(--s7) var(--s4) 0; position: relative; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.375rem; line-height: 1.1; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: var(--s3); font-size: 2rem; color: var(--amber-deep); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__a { padding-bottom: var(--s4); }

/* ---------- Quote band (09) ---------- */
.quote { padding: var(--s7) 0; scroll-margin-top: var(--header-h); }
.quote__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s7); align-items: start; }
.quote__title { font-size: clamp(3.5rem, 9vw, 8.5rem); font-weight: 900; line-height: .84; margin: 0; color: var(--frost); }
.quote__title span { display: block; }
.quote__form .crm { background: var(--frost); padding: var(--s1); min-height: 620px; }
.quote__wa { margin: var(--s4) 0 var(--s2); font-size: 1.5rem; text-align: center; }
.quote__wa-link { display: inline-flex; align-items: center; gap: 6px; color: var(--amber) !important; font-weight: 600; }
.quote__small { text-align: center; font-size: .9375rem; color: var(--mauve-light); margin: 0; }
@media (max-width: 900px) { .quote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* ---------- Footer (10) ---------- */
.site-footer { background: var(--plum); padding: var(--s6) 0 0; border-top: 1px solid var(--plum-mid); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s7); padding-bottom: var(--s5); }
.site-footer__contact { border-right: 1px solid var(--plum-mid); padding-right: var(--s7); }
.site-footer__big { margin: var(--s5) 0 var(--s2); }
.site-footer__wa, .site-footer__tel { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.35rem, 2.5vw, 2.3rem); line-height: 1.05; color: var(--amber) !important; text-decoration: none; }
.site-footer__mail { color: var(--amber) !important; font-size: 1.125rem; }
.site-footer__note { color: var(--mauve-light); font-size: .9375rem; max-width: 40ch; }
.site-footer__links { display: grid; gap: var(--s5); align-content: start; }
.site-footer__label { font-size: .875rem; letter-spacing: .14em; color: var(--mauve-light); margin-bottom: var(--s2); }
.slashes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.0625rem; line-height: 1.9; }
.slashes li:not(:last-child)::after { content: "/"; color: var(--mauve-light); padding: 0 var(--s2); }
.slashes a { color: var(--frost); text-decoration: none; }
.slashes a:hover { color: var(--amber) !important; text-decoration: underline; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--plum-mid); padding-top: var(--s5); padding-bottom: var(--s5); font-size: .875rem; color: var(--mauve-light); }
.site-footer__base p { margin: 0; }
.site-footer__base a { color: var(--frost); }
@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
	.site-footer__contact { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--plum-mid); padding-bottom: var(--s6); }
}
@media (max-width: 760px) { .site-footer__base { padding-bottom: calc(var(--s5) + 72px); } }

/* ---------- WhatsApp composer (§4g) ---------- */
.wa { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 70; }
.wa__pill { display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s5); border: 0; border-radius: 999px; background: #17713D; color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.wa__pill .ico { width: 24px; height: 24px; }
.wa__pill:hover { background: #125C31; }
.wa__panel { position: absolute; right: 0; bottom: 64px; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 120px)); overflow-y: auto; background: var(--frost); color: var(--plum); border-top: 4px solid #17713D; padding: var(--s5); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.wa__panel[hidden] { display: none; }
.wa__head { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); }
.wa__head h2 { font-size: 1.5rem; margin: 0 0 var(--s3); }
.wa__close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--plum); width: 44px; height: 44px; margin: -10px -10px 0 0; }
.wa__form label { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9375rem; margin: var(--s3) 0 var(--s1); }
.wa__form input, .wa__form textarea, .wa__form select { width: 100%; min-height: 44px; border: 1.5px solid var(--plum); background: #fff; color: var(--plum); font: inherit; font-size: 1rem; padding: var(--s2) var(--s3); border-radius: 0; }
.wa__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--s3); }
.wa__send { width: 100%; justify-content: center; margin-top: var(--s5); background: #17713D; color: #fff; }
.wa__send:hover { background: #17713D; color: #fff; }

/* ---------- Mobile action bar (§7d.4: visible from the first pixel) ---------- */
.mbar { display: none; }
@media (max-width: 760px) {
	.mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--plum-deep); border-top: 1px solid var(--plum-mid); }
	.mbar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 56px; font-family: var(--f-display); font-weight: 800; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--frost); text-decoration: none; }
	.mbar__btn + .mbar__btn { border-left: 1px solid var(--plum-mid); }
	.mbar__btn--amber { background: var(--amber); color: var(--plum); }
	.wa { bottom: 72px; right: var(--s3); }
	.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); }
}

/* ---------- Page heads + generic articles (other templates) ---------- */
.pagehead { padding: var(--s8) 0 var(--s7); }
.pagehead__label { font-family: var(--f-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mauve-light); }
.pagehead__title { font-size: clamp(2.6rem, 7vw, 6.2rem); font-weight: 900; line-height: .88; max-width: 18ch; color: var(--frost); }
.pagehead__lede { font-size: 1.25rem; max-width: 56ch; color: var(--frost); }
.crumbs ol { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9375rem; }
.crumbs li + li::before { content: "/"; padding: 0 var(--s2); color: var(--mauve-light); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--amber); }
.article { padding: var(--pad) 0; background: var(--frost); }

/* ---------- Motion (CSS only; JS adds .js-motion, reduced motion never gets it) ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.ticker__track { width: auto; flex-wrap: wrap; }
	.ticker__list[aria-hidden="true"] { display: none; }
	.ticker__list { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Page heads (service, area, guide, answer, core, index) ---------- */
.pagehead__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s7); align-items: stretch; }
.pagehead--service, .pagehead--area { padding-bottom: 0; }
.pagehead--service .pagehead__text, .pagehead--area .pagehead__text { padding-bottom: var(--s8); align-self: center; }
.pagehead__media { position: relative; min-height: 420px; margin-right: calc(-1 * var(--gutter)); }
.pagehead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead__label { font-size: .9375rem; }
.pagehead--area .pagehead__label { display: inline-block; background: var(--amber); color: var(--plum); padding: 2px var(--s2); }
.pagehead__title--q { font-size: clamp(2.4rem, 5.4vw, 4.8rem); max-width: 22ch; }
.pagehead .hero__bar { padding: var(--s4) 0 0; }
@media (max-width: 900px) {
	.pagehead__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pagehead--service .pagehead__text, .pagehead--area .pagehead__text { padding-bottom: var(--s6); }
	.pagehead__media { min-height: 0; aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gutter)); }
}

/* ---------- Knockout on light ground ---------- */
.knock--light { background: var(--frost); }

/* ---------- Spokes, related, nearby ---------- */
.spokes { padding: var(--s8) 0; }
.spokes__title, .related__title, .nearby__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.spokes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s4); }
.spokes__item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--plum-mid); }
.spokes__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spokes__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.375rem; line-height: 1; padding: var(--s4) var(--s4) var(--s2); color: var(--frost); }
.spokes__kind { margin-top: auto; padding: 0 var(--s4) var(--s4); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; color: var(--amber); }
.spokes__item a:hover .spokes__name { text-decoration: underline; text-decoration-color: var(--amber); }
.related { padding: var(--s8) 0; }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s3); }
.related__list a { display: block; height: 100%; padding: var(--s4); border: 1.5px solid var(--plum-mid); text-decoration: none; }
body .related__hub a { background: var(--amber); border-color: var(--amber); color: var(--plum); }
.related__kind { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; color: var(--amber); }
.related__hub .related__kind { color: var(--plum); }
.related__name { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.375rem; line-height: 1; margin-top: var(--s2); }
.nearby { background: var(--frost); padding: var(--s7) 0 var(--s8); }
.nearby__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.nearby__list a { display: inline-block; border: 1.5px solid var(--plum); padding: var(--s2) var(--s4); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--plum); }
.nearby__list a:hover, .nearby__all a { background: var(--plum); color: var(--frost); }

/* ---------- Indexes ---------- */
.cards, .library, .areas-index { background: var(--frost); padding: var(--s8) 0; }
.cards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s5); }
.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--plum); border-bottom: 3px solid var(--plum); }
.card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.875rem; line-height: 1; padding-top: var(--s4); }
.card__sum { padding: var(--s2) 0 var(--s4); color: var(--mauve); }
.card a:hover .card__name { text-decoration: underline; text-decoration-color: var(--amber-deep); }
.library__jump ul { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
body .library__jump a { display: inline-block; padding: var(--s1) var(--s3); background: var(--plum); color: var(--frost); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.library__group { padding: var(--s5) 0; border-top: 2px solid var(--plum); }
.library__h { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.library__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s3) var(--s6); }
.library__list a { display: block; text-decoration: none; color: var(--plum); }
.library__name { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.375rem; line-height: 1.05; }
.library__sum { display: block; color: var(--mauve); font-size: .9375rem; }
.areas-index__h { margin-top: var(--s7); font-size: clamp(1.5rem, 2.6vw, 2.2rem); border-top: 2px solid var(--plum); padding-top: var(--s4); }
.areas-index__h span { font-family: var(--f-serif); text-transform: none; font-weight: 400; font-size: 1rem; color: var(--mauve); margin-left: var(--s2); }
.areas-index__list { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: var(--s6); }
.areas-index__list li { break-inside: avoid; padding: 3px 0; }
.areas-index__list a { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.1875rem; color: var(--plum); }
.areas-index__mi { color: var(--mauve); font-size: .875rem; }
.index-after { background: var(--frost); padding: 0 0 var(--s8); }

/* ---------- Guide: feature flow ---------- */
.feature { background: var(--frost); padding: var(--s8) 0; }
.feature__sec { padding: var(--s5) 0; }
.feature__num { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s3); font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; color: var(--amber-deep); }
.feature__num::before, .feature__num::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.feature__h { text-align: center; font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.feature__sec--first .prose > p:first-child::first-letter { float: left; font-family: var(--f-display); font-weight: 900; font-size: 4.4em; line-height: .8; padding: 6px 10px 0 0; color: var(--plum); }
.pullpanel { margin: var(--s6) 0; padding: var(--s5) var(--s6); background: var(--plum); color: var(--frost); }
.pullpanel p { margin: 0; font-style: italic; font-size: 1.375rem; line-height: 1.4; }

/* ---------- Answer: direct answer ---------- */
.answer { background: var(--frost); padding: var(--s8) 0; }
.answer__callout { background: var(--amber); color: var(--plum); padding: var(--s6); margin-bottom: var(--s7); border-left: 10px solid var(--plum); }
.answer__label { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s2); }
.answer__text { font-size: 1.3125rem; line-height: 1.5; }
.answer__text p:last-child { margin: 0; }
.answer__sec { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.answer__h { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: var(--s3); }

/* ---------- Designed article (core, legal) ---------- */
.designed { background: var(--frost); padding: var(--s8) 0; }
.designed__sec { padding: var(--s4) 0 var(--s5); }
.designed__kicker { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--amber-deep); margin-bottom: var(--s1); }
.designed__h { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.designed .prose ul { list-style: square; }

/* ---------- Contact ---------- */
.contact { background: var(--frost); padding: var(--s7) 0; scroll-margin-top: var(--header-h); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.contact__form .crm { background: #fff; padding: var(--s2); border: 2px solid var(--plum); min-height: 620px; }
.contact__card { padding: var(--s6); }
.contact__h { font-size: 2rem; color: var(--amber); }
.contact__big { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.75rem; line-height: 1.05; text-decoration: none; }
body .contact__mail { color: var(--amber); overflow-wrap: anywhere; }
.contact__note { color: var(--mauve-light); font-size: .9375rem; }
.contact-map { background: var(--frost); padding: 0 0 var(--s8); }
.contact-map__title { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.contact-map__map { height: 440px; border: 2px solid var(--plum); }
.contact-map__note { font-size: .9375rem; color: var(--mauve); margin-top: var(--s3); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } .contact-map__map { height: 320px; } }

/* Panels nested inside a dark chapter reset the ground (nested-ground lesson): outrank the site-wide .on-dark link rule. */
body .ch--plum .ch__panel a:not(.btn):not(.badge-cta):not(.pill):not(.mbar__btn) { color: var(--plum); }
body .ch--plum .ch__panel { --ink: var(--plum); --link: var(--plum); color: var(--plum); }
.ch__panel .prose a { text-decoration-color: var(--amber-deep); text-decoration-thickness: 2px; }
body .ch--frost .ch__panel .prose a, body .ch--frost2 .ch__panel .prose a { text-decoration-color: var(--amber); }
.ch__panel .ch__body p, .ch__panel .prose p { max-width: none; }

@media (min-width: 900px) { .hero__title { white-space: nowrap; } }

/* Fidelity loop 1 follow-ups */
.step__img { grid-column: 1 / 3; margin-left: clamp(40px, 6%, 64px); width: calc(100% - clamp(40px, 6%, 64px)); }
.quote__title { font-size: clamp(3.25rem, 7.4vw, 7.8rem); }
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
	.ticker__list { flex-wrap: nowrap !important; }
	.ticker__list li { font-size: 1.5rem; padding: var(--s3) var(--s4); gap: var(--s4); }
}

/* Fidelity post-loop polish (not re-judged; credit rule) */
.quote { padding: var(--s6) 0; }
.quote__grid { align-items: end; }
.quote__wa { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.site-footer { padding-top: var(--s5); }
.site-footer__grid { padding-bottom: var(--s4); gap: var(--s6); }
/* Bottom padding clears the fixed WhatsApp pill (desktop) and mobile bar so the footer credit is never covered. */
.site-footer__base { padding-top: var(--s3); padding-bottom: calc(var(--s3) + 72px); }
.proof__title { font-size: clamp(2.6rem, 5.8vw, 5rem); }
.proof__text { font-size: 1.375rem; }
@media (min-width: 761px) { .panels { height: clamp(300px, 32vw, 460px); } }
.specimen__name { font-size: clamp(1.6rem, 2.8vw, 2.6rem); }
.step__img { filter: brightness(.8); }

/* Amber hub card inside a dark related band: outrank the .on-dark link rule (nested ground). */
body .related .related__hub a:not(.btn):not(.badge-cta):not(.pill):not(.mbar__btn) { color: var(--plum); }

/* Overflow fixes from the header/page gates (scrollbar-safe full bleed; long strings wrap on 320px). */
.areamap > .wrap--wide { max-width: none; padding-inline: 0; }
.areamap__title, .areamap__all { padding-inline: var(--gutter); }
.site-footer__mail, .contact__mail { overflow-wrap: anywhere; }
.contact__big { flex-wrap: wrap; font-size: clamp(1.35rem, 6vw, 1.75rem); }
@media (min-width: 600px) { .site-footer__wa { white-space: nowrap; } }
.pagehead__lede, .prose p, .prose li { overflow-wrap: anywhere; }

/* Service + town heads at the page-mockup scale */
.pagehead--service .pagehead__title, .pagehead--area .pagehead__title { font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: .86; }
.pagehead--service .pagehead__label { color: var(--amber); font-size: 1.0625rem; letter-spacing: .08em; }
.pagehead--service .pagehead__lede, .pagehead--area .pagehead__lede { font-size: clamp(1.125rem, 1.6vw, 1.4rem); line-height: 1.45; }
.pagehead--service .crumbs ol, .pagehead--area .crumbs ol { font-size: 1.0625rem; }

/* Service template, Fidelity loop 1 */
.knock__word--fit { white-space: nowrap; font-size: min(calc(min(56vw, 760px) / (var(--len) * 0.44)), 24rem); overflow-wrap: normal; }
@media (max-width: 760px) { .knock__word--fit { font-size: calc(86vw / (var(--len) * 0.44)); } }
.knock__grid { align-items: start; }
.pagehead--service .pagehead__title, .pagehead--area .pagehead__title { font-size: clamp(2.8rem, 8vw, 7.8rem); }
.pagehead--service .pagehead__grid, .pagehead--area .pagehead__grid { align-items: stretch; }
.pagehead--service .pagehead__media, .pagehead--area .pagehead__media { margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--w-wide) - 2 * var(--gutter)) / 2)); }
.pagehead--service, .pagehead--area { padding-top: var(--s6); }
.spokes__list { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.spokes__item a { position: relative; aspect-ratio: 3 / 4; overflow: hidden; justify-content: flex-end; background: var(--plum-mid); }
.spokes__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.spokes__item a::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(21, 18, 25, .92)); }
.spokes__name, .spokes__kind { position: relative; z-index: 1; }
.spokes__name { font-size: clamp(1.5rem, 2.2vw, 2.1rem); padding: 0 var(--s4) var(--s1); margin-top: 0; }
.spokes__kind { margin-top: 0; }
.quote__grid { align-items: start; }
.faq .wrap--prose { max-width: calc(var(--w-std) + 2 * var(--gutter)); }
.faq { padding: var(--s7) 0; }
.ch__num { display: block; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; padding: 0 0 var(--s2); margin-bottom: var(--s3); border-bottom: 2px solid currentColor; width: max-content; }
.ch--amber .ch__num { background: none; color: var(--plum); }
.ch--plum .ch__num, .ch--frost .ch__num, .ch--frost2 .ch__num { background: none; color: var(--amber-deep); }
.ch--plum .ch__num { color: var(--amber); }
.areamap--band { border-top: 1px solid var(--rule); }
.site-footer > .areamap--band { margin: calc(-1 * var(--s5)) 0 var(--s6); color: var(--plum); }
.site-footer > .areamap--band { --ink: var(--plum); --link: var(--plum); background: var(--frost); padding: var(--s6) 0; }
.site-footer > .areamap--band .areamap__title { color: var(--plum); }
body .site-footer .areamap--band a:not(.btn):not(.badge-cta):not(.pill):not(.mbar__btn) { color: var(--plum); }

/* Post-loop polish, service template (not re-judged; credit rule) */
.quote__side .quote__wa, .quote__side .quote__small { text-align: left; }
.quote__side .quote__wa { margin-top: var(--s6); }
.knock__word--fit { font-size: min(calc(min(56vw, 760px) / (var(--len) * 0.40)), 26rem); letter-spacing: -.02em; }
.site-footer > .areamap--band { padding: var(--s4) 0 0; }
.site-footer > .areamap--band .wrap--wide { position: relative; }
.site-footer > .areamap--band .areamap__title, .site-footer > .areamap--band .areamap__all { position: absolute; left: 0; right: 0; z-index: 2; }
.site-footer > .areamap--band .areamap__title { top: var(--s2); font-size: clamp(1.25rem, 2vw, 1.75rem); }
.site-footer > .areamap--band .areamap__all { top: calc(var(--s2) + 2.2rem); font-size: 1rem; }
.site-footer > .areamap--band .map { margin-top: 0; max-height: 260px; overflow: hidden; }
.site-footer > .areamap--band .map__img { height: 260px; object-fit: cover; }
@media (max-width: 640px) { .site-footer > .areamap--band .areamap__title, .site-footer > .areamap--band .areamap__all { position: static; } .site-footer > .areamap--band .map { max-height: none; } }
@media (min-width: 900px) { .pagehead--service .pagehead__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* Guides and answers: designed editorial index (featured band + image cards) */
.featured { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-bottom: var(--s7); background: var(--plum); color: var(--frost); text-decoration: none; }
.featured__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.featured__body { padding: var(--s6); display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.featured__kicker { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--amber); }
.featured__name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: .92; }
.featured__sum { font-size: 1.125rem; color: var(--frost); }
.featured__read, .library__read { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; color: var(--amber); }
.library__read { color: var(--amber-deep); margin-top: var(--s2); display: block; }
.library__list--cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s5); }
.library__list--cards a { display: flex; flex-direction: column; height: 100%; border-bottom: 3px solid var(--plum); padding-bottom: var(--s3); }
.library__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--s3); }
@media (max-width: 760px) { .featured { grid-template-columns: minmax(0, 1fr); } .featured__img { min-height: 0; aspect-ratio: 3 / 2; } }

/* Knock word sizing: wide letters (M, W) need ~0.5em each; town heads share the service head grid */
.knock__word--fit { font-size: min(calc(min(56vw, 760px) / (var(--len) * 0.52)), 26rem); }
@media (max-width: 760px) { .knock__word--fit { font-size: calc(86vw / (var(--len) * 0.52)); } }
@media (min-width: 900px) { .pagehead--area .pagehead__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* Town template, Fidelity loop 1 (site-wide where noted) */
/* Chapter words fit their column on one line, sized by length (site-wide real defect: VICTORIAN broke as VICTORIA/N). */
.ch__word { white-space: nowrap; overflow-wrap: normal; font-size: min(calc(min(52vw, 700px) / (var(--len, 6) * 0.52)), 12rem); }
@media (max-width: 640px) { .ch__word { font-size: calc(88vw / (var(--len, 6) * 0.52)); } }
.ch__panel { font-size: 1.125rem; line-height: 1.75; }
/* Service and town heads: photo runs full height from the top of the section; larger crumbs, label, buttons. */
.pagehead--service, .pagehead--area { padding-top: 0; }
.pagehead--service .pagehead__text, .pagehead--area .pagehead__text { padding-top: var(--s6); }
.pagehead--service .crumbs ol, .pagehead--area .crumbs ol { font-size: 1.1875rem; }
.pagehead--area .pagehead__label { font-size: 1.125rem; padding: 4px var(--s3); }
.pagehead--service .hero__bar .btn, .pagehead--area .hero__bar .btn { min-height: 54px; font-size: 1.3125rem; padding: 0 var(--s6); }
.pagehead--area .pagehead__title { font-size: clamp(2.6rem, 6vw, 6rem); }
/* Quote: a dark frame ground so the iframe never reads as a white slab before it loads. */
.quote__form .crm { background: var(--plum-mid); padding: 0; }
/* FAQ rows: sentence-case serif questions in boxed rows. */
.faq__item { border: 1px solid var(--rule); border-bottom: 0; padding: 0 var(--s4); background: rgba(255, 255, 255, .35); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item summary { font-family: var(--f-serif); font-weight: 600; text-transform: none; font-size: 1.25rem; line-height: 1.35; }
.pagehead { overflow-x: clip; }

/* Post-loop polish, town template (not re-judged; credit rule) */
.ch__word--fill, .knock__word { -webkit-text-stroke: 1.5px rgba(236, 233, 236, .55); }
.ch--amber .ch__word--fill, .ch--frost .ch__word--fill, .ch--frost2 .ch__word--fill { -webkit-text-stroke: 1.5px rgba(32, 24, 37, .7); }
.quote__wa { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.quote__wa-link { text-decoration: none; }

/* Winter note on a plum chapter sits on the frost ground below the band: plum text, not the band colour. */
.ch--plum .mod-winter, .ch--plum.on-dark .mod-winter, .ch--plum .mod-winter p { color: var(--plum); }

/* Footer map band: map starts below the absolute heading block so no town label sits under it, and the
   full-width heading boxes let clicks through to the map except on their own link. */
@media (min-width: 641px) {
.site-footer > .areamap--band .wrap--wide { padding-top: 4.5rem; } /* padding, not map margin: a margin collapses through the wrap and moves the heading too */
.site-footer > .areamap--band .areamap__title, .site-footer > .areamap--band .areamap__all { pointer-events: none; }
.site-footer > .areamap--band .areamap__all a { pointer-events: auto; }
}

/* Areas index featured band (§4c-i) */
.areas-index__feat-h { margin: var(--s7) 0 var(--s4); font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.areas-index__feat { margin-bottom: var(--s7); }

/* ===== Long read, agency loop 1 (2026-10-24): one system replacing the earlier chapter overrides ===== */
/* Chapter number: the mockup's filled tag. */
.ch__num, .ch--amber .ch__num, .ch--plum .ch__num, .ch--frost .ch__num, .ch--frost2 .ch__num { display: inline-block; width: auto; border: 0; padding: var(--s1) var(--s3); margin-bottom: var(--s4); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.ch--amber .ch__num { background: var(--plum); color: var(--amber); }
.ch--plum .ch__num, .ch--frost .ch__num, .ch--frost2 .ch__num { background: var(--amber); color: var(--plum); }
/* Reading comfort inside every panel. */
.ch__panel .prose p, .ch__panel .prose li { font-size: 1.125rem; line-height: 1.65; }
.ch__panel .prose h3 { margin-top: calc(var(--s6) + var(--s2)); }
.ch__panel > .ch__body + .ch__body h3:first-child { margin-top: var(--s5); }
.ch__panel > .mod { margin: var(--s6) 0; }
/* Light panels on the frost/frost2 chapters too: plum text on near-white instead of long light-on-plum columns. */
.ch--frost .ch__panel, .ch--frost2 .ch__panel { background: #FBFAFB; color: var(--plum); --ink: var(--plum); --muted: var(--mauve); --link: var(--plum); --rule: rgba(32, 24, 37, .16); box-shadow: 0 0 0 1px rgba(32, 24, 37, .08); }
body .ch--frost .ch__panel a:not(.btn), body .ch--frost2 .ch__panel a:not(.btn), body .ch--frost .ch__panel .prose a, body .ch--frost2 .ch__panel .prose a { color: var(--plum); text-decoration-color: var(--amber-deep); }
.ch--frost .ch__panel .prose li::marker, .ch--frost2 .ch__panel .prose li::marker { color: var(--amber-deep); }
.ch--frost .fig-item__n, .ch--frost2 .fig-item__n { color: var(--amber-deep); }
.ch--frost .gloss, .ch--frost2 .gloss { border-color: var(--amber-deep); }
/* Glossary: one row of outlined chips. */
.mod-glossary { display: flex; flex-wrap: wrap; gap: var(--s3); }
.gloss { flex: 1 1 180px; border: 2px solid var(--amber-deep); border-radius: 999px; padding: var(--s3) var(--s5); }
.gloss dt { font-size: 1.0625rem; }
.gloss dd { font-size: .875rem; line-height: 1.45; }
/* Tables: header in the chapter colour, tinted first column. */
.mod-table thead th { background: var(--plum); color: var(--frost); border-bottom: 0; padding-inline: var(--s3); }
.mod-table tbody th, .mod-table tbody td:first-child { background: rgba(236, 171, 45, .14); font-weight: 600; padding-inline: var(--s3); }
.mod-table td { padding-inline: var(--s3); }
/* Less dead ground after each panel. */
.ch { padding-bottom: var(--s7); }
@media (min-width: 901px) {
	/* Bigger chapter word (fills about half the band) and a deeper band the panel breaks into. */
	.ch__head, .ch--r .ch__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.ch--r .ch__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
	.ch__word { font-size: min(calc(min(58vw, 800px) / (var(--len, 6) * 0.5)), 15rem); }
	.ch__band { padding: var(--s8) 0 calc(var(--s9) + var(--s8)); }
	.ch__panel-wrap { margin-top: calc(-1 * (var(--s9) + var(--s5))); }
	.ch__title { font-size: clamp(2rem, 2.8vw, 2.75rem); font-weight: 600; }
	/* Intro: wider and shorter. */
	.lr-intro__dek { max-width: 64%; font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.35; }
}
/* Glossary as one row of term cells under an amber rule (the pill shape crowded multi-line definitions). */
.mod-glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s4); }
.gloss, .ch--frost .gloss, .ch--frost2 .gloss { border: 0; border-top: 3px solid var(--amber-deep); border-radius: 0; padding: var(--s3) 0 0; }
.ch--amber .gloss { border-top-color: var(--plum); }
/* Long read, after judge loop 2: light panels always read as their own surface, tighter chapter foot,
   nav chips at mockup scale. */
.ch--plum .ch__panel, .ch--amber .ch__panel { background: #FBFAFB; box-shadow: 0 0 0 1px rgba(32, 24, 37, .1), 0 18px 40px -24px rgba(32, 24, 37, .45); }
.ch--frost .ch__panel, .ch--frost2 .ch__panel { box-shadow: 0 0 0 1px rgba(32, 24, 37, .1), 0 18px 40px -24px rgba(32, 24, 37, .6); }
.ch { padding-bottom: var(--s5); }
.lr-chips__n { font-size: clamp(2rem, 3.4vw, 3rem); }
.lr-chips__w { font-size: clamp(1.25rem, 2vw, 1.875rem); }

/* Quote band: the call line follows the WhatsApp line as one contact group. */
.quote__side .quote__tel { margin-top: var(--s2); }