/* Solent Skylights: Stage 4 templates (service, area, guide, answer, article, quote, indexes).
   Same rules as main.css: named grid minimums (§7c.1), one .on-dark class (§7c.3), no vertical
   margin on full-bleed bands (§7c.4), nothing sticky but the header and the mobile bar. */

/* ---------------- shared inner heroes (service + area, against 02-hero of each page mockup) */
.crumbs--hero { margin-bottom: clamp(18px, 2vw, 30px); }
.crumbs--hero ol { font: 400 15px/1.4 var(--serif); }
.crumbs--hero a { color: var(--oxblood); text-decoration: none; }
.crumbs--hero a:hover { text-decoration: underline; }
.crumbs--hero [aria-current] { color: var(--ink); }
.crumbs--hero li + li::before { color: var(--oxblood); }
.hero-title--inner { font-size: clamp(38px, 4.3vw, 66px); line-height: 1.02; letter-spacing: -0.018em; }
.hero-title--inner em { display: block; }
.hero--inner .hero-lede { font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.6; max-width: 30em; }
@media (min-width: 900px) {
	.hero--inner { min-height: clamp(460px, 37vw, 640px); }
	.hero--inner .hero-copy { padding-right: clamp(16px, 1.6vw, 28px); }
	.area .hero--inner { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
	/* service 02-hero: 41% copy column and a shorter band, as the mockup */
	.service .hero--inner { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); min-height: clamp(440px, 40vw, 590px); }
	.service .hero--inner .hero-copy { padding-top: clamp(28px, 2.6vw, 44px); padding-bottom: clamp(28px, 2.6vw, 44px); }
	.service .hero--inner .crumbs--hero { margin-bottom: clamp(12px, 1.3vw, 20px); }
	.service .hero-title--inner { font-size: clamp(38px, 4.65vw, 67px); }
	.service .hero-title--inner em { font-size: .86em; line-height: 1.1; }
	.service .hero--inner .hero-lede { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.55; max-width: 26em; }
}

/* ---------------- espresso facts band (03-facts / 03-local) */
.band--facts { padding-block: clamp(40px, 5.2vw, 84px); }
.facts-row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.facts-row li { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 6px clamp(14px, 2vw, 32px); min-width: 0; }
.facts-row li + li { border-left: 1px solid var(--oat-mute); }
.fact-label { font: 700 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.fact-text { font-size: clamp(21px, 2.25vw, 34px); line-height: 1.18; color: var(--oat); max-width: 13em; }
@media (max-width: 759.98px) {
	.facts-row { row-gap: 18px; }
	.facts-row li + li { border-left: 0; border-top: 1px solid var(--espresso-rule); padding-top: 18px; }
}

/* ---------------- section heads on inner light bands */
.sec-head { margin-bottom: clamp(22px, 2.6vw, 38px); }
.sec-head .sec-num { margin-bottom: 8px; }
/* Designed section H2s take the homepage section scale (--fs-h2); the 37px cap binds the long-read
   chapter titles (.lr-ch-title), not these (blueprint §2, homepage Stage 3). */
.sec-title--sm { font-size: var(--fs-h2); line-height: 1.08; }

/* ---------------- 04-fit, 05-types */
.fit { padding-block: var(--band-pad) clamp(20px, 2.4vw, 40px); }
.fit-cols .problem-col h3 { font-size: clamp(21px, 2vw, 30px); margin-bottom: 12px; }
.fit-cols .problem-col p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 26em; }
.types { padding-top: clamp(20px, 2.4vw, 40px); padding-bottom: clamp(40px, 4.6vw, 72px); }
.types .wrap { border-top: 1px solid var(--oxblood); padding-top: clamp(24px, 2.6vw, 40px); }
.tiles--types { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.tile--static figure { margin: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel); }
.tile--static .tile-media { aspect-ratio: 3 / 2; }
.tile--static .tile-label { font-size: clamp(18px, 1.5vw, 22px); padding: 18px 12px 20px; }

/* ---------------- 06-programme band, 07-faq accordion, 08-related */
.programme-band { padding-block: clamp(40px, 4.6vw, 72px) clamp(28px, 3vw, 48px); }
.programme--band { margin: 0; background: transparent; border: 0; padding: 0; }
.faq-band { padding-block: clamp(36px, 4vw, 64px); }
.faq-band .sec-head { border-top: 1px solid var(--oxblood); padding-top: clamp(24px, 2.4vw, 36px); }
.accordion { border: 1px solid #CFC8BF; background: rgba(255, 255, 255, .35); }
.acc-item + .acc-item { border-top: 1px solid #CFC8BF; }
.acc-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 16px clamp(16px, 2vw, 28px); cursor: pointer; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.28; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover .acc-q { color: var(--oxblood); }
.acc-icon { position: relative; width: 18px; height: 18px; flex: none; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .2s ease; }
.acc-icon::after { transform: rotate(90deg); }
.acc-item[open] .acc-icon::after { transform: rotate(0deg); }
.acc-a { padding: 0 clamp(16px, 2vw, 24px) 18px; max-width: 70ch; }
.acc-a p { font-size: 17.5px; line-height: 1.65; margin: 0; }
.related { padding-block: clamp(28px, 3.4vw, 56px) var(--band-pad-tight); }
.related-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.related-card a { display: flex; flex-direction: column; height: 100%; background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease); }
.related-card a:hover { transform: translateY(-2px); }
.related-media { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #D8D3CC; }
.related-media img { width: 100%; height: 100%; object-fit: cover; }
.related-title { display: block; margin: 16px 18px 18px; padding-bottom: 12px; border-bottom: 2px solid var(--oxblood); font-size: clamp(19px, 1.75vw, 26px); line-height: 1.22; }
.related-card a:hover .related-title { color: var(--oxblood); }

/* ---------------- area: chapter + module rows (04-chapter ... 07-nearby) */
.area-chapter .lr-chapter { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(20px, 2.4vw, 36px); }
.area-mods { padding-block: clamp(14px, 1.8vw, 26px); }
.area-mods--last { padding-bottom: var(--band-pad-tight); }
.mod-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
@media (min-width: 900px) {
	.mod-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.mod-pair--one { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
}
.mod-qa--box { border: 1px solid #B4847F; background: transparent; padding: clamp(20px, 2.2vw, 32px); margin: 0; }
.mod-qa--box .mod-q { font-style: normal; font-size: clamp(22px, 2.05vw, 29px); line-height: 1.22; }
.mod-qa--box .mod-a { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.mod-pull--half { margin: 0; }
.mod-pull--half p { font-size: clamp(22px, 2.05vw, 29px); max-width: 20em; }
.mod-box { margin: 0; padding: clamp(18px, 2vw, 28px); background: var(--panel); border-left: 3px solid var(--oxblood); }
.mod-box p { font-size: 17px; line-height: 1.6; }
.mod-box p:last-child { margin-bottom: 0; }
.mod-box--conservation { background: transparent; border: 1px solid #CFC8BF; border-left: 3px solid var(--ink-soft); }
.lr-run--aside > .mod-box, .lr-run--aside > .mod-qa { margin: 0; }
.area-mods--route { padding-top: clamp(28px, 3.4vw, 56px); }
.route-figure { margin: 0; border-top: 1px solid var(--oxblood); padding-top: clamp(20px, 2.2vw, 34px); }
.route-map { height: clamp(240px, 23vw, 330px); background: #EFE8DC; border: 1px solid #CFC8BF; }
/* warm the OSM tiles toward cream while keeping water blue: the #sst-tiles SVG filter (map.js)
   desaturates land and roads and lays water over in map blue */
.route-map .leaflet-tile-pane { filter: url(#sst-tiles) contrast(.92) brightness(1.03); }
.route-map.leaflet-container { font-family: var(--serif); }
.route-map .leaflet-tooltip.town-label { background: none; border: 0; box-shadow: none; padding: 0 4px; font: 400 clamp(19px, 1.8vw, 26px)/1.1 var(--serif); color: var(--ink); text-shadow: 0 0 3px var(--oyster), 0 0 3px var(--oyster), 0 0 6px var(--oyster); }
.route-map .leaflet-tooltip.town-label::before { display: none; }
.route-map .leaflet-control-attribution { font: 11px/1.4 var(--sans); background: rgba(244, 243, 241, .85); }
.route-map .leaflet-control-attribution a { color: var(--ink); }
.route-figure figcaption { font-style: italic; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink); padding: 14px 0 4px; }
.route-map .landmark-pin { color: #6E655B; }
.route-map .landmark-pin svg { width: 26px; height: 30px; display: block; }
.route-map .leaflet-tooltip.landmark-label { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.15; text-align: right; white-space: normal; width: 5.2em; }
@media (max-width: 599.98px) { .route-map .leaflet-tooltip.landmark-label { display: none; } }
/* our place names on a cream plate centred on the place point (covers the tile's own label) */
.route-map .leaflet-tooltip.place-plate { background: #F3F0E9; padding: 12px 14px 12px; border-radius: 3px; box-shadow: 0 0 6px 3px #F3F0E9; text-shadow: none; }
.route-map .river-pt { background: none; border: 0; }
.route-map .leaflet-tooltip.river-label { font-style: italic; font-size: clamp(16px, 1.35vw, 20px); color: #2F5F86; }
.area-mods--nearby { padding-block: clamp(28px, 3.4vw, 56px); }
.nearby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(20px, 2.4vw, 40px); align-items: center; padding-block: clamp(22px, 2.6vw, 40px); border-top: 1px solid var(--oxblood); border-bottom: 1px solid var(--oxblood); }
@media (min-width: 900px) { .nearby { grid-template-columns: minmax(0, 17fr) minmax(0, 83fr); } }
.nearby-label { margin: 0; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.15; }
.nearby-chips { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.nearby-chips a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: clamp(48px, 4.4vw, 64px); padding: 8px 14px; border: 1.5px solid var(--oxblood); border-radius: 4px; color: var(--ink); text-decoration: none; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; transition: background-color .2s ease, color .2s ease; }
.nearby-chips a:hover { background: var(--oxblood); color: var(--oyster); }
.mod-faq-title { font-size: clamp(26px, 2.2vw, 34px); margin-bottom: 8px; text-align: center; }
.mod-faq .faq-list { margin-top: 12px; }

/* ---------------- guide: FEATURE FLOW */
.page-hero--feature { text-align: center; padding-bottom: clamp(36px, 3.6vw, 56px); }
.page-hero--feature .crumbs ol { justify-content: center; }
.feature-kicker { margin: 22px 0 14px; font: 700 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); }
.page-title--feature { margin-inline: auto; max-width: 20em; font-size: clamp(36px, 4.2vw, 62px); }
.page-standfirst--feature { margin-inline: auto; }
.feature-rule { display: block; width: 72px; height: 2px; margin: 26px auto 0; background: var(--oxblood); }
.feature { padding-block: var(--band-pad) var(--band-pad-tight); }
.feature-col { max-width: var(--w-prose); }
.feature-col p, .feature-col li { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.72; }
.feature-intro > p:first-child { font-size: clamp(19px, 1.45vw, 21px); }
.feature-intro > p:first-child::first-letter { float: left; font-size: 4.7em; line-height: .82; padding: 6px 12px 0 0; color: var(--oxblood); }
.feature-sec { margin-top: clamp(44px, 4.6vw, 72px); }
.feature-num { display: flex; align-items: center; gap: 20px; margin: 0 0 14px; color: var(--oxblood); }
.feature-num::before, .feature-num::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.feature-num span { font-style: italic; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; min-width: 1.4em; text-align: center; }
.feature-h { text-align: center; font-size: clamp(26px, 2.35vw, 35px); line-height: 1.15; margin: 0 auto 22px; max-width: 22em; }
.feature-col .lr-subhead { font-size: clamp(21px, 1.6vw, 24px); margin: 1.4em 0 .5em; }
.feature-col .lr-list, .article-col .lr-list, .answer-col .lr-list { margin: 0 0 1.2em 1.2em; }
.feature-col .lr-list li, .article-col .lr-list li { margin-bottom: .4em; padding-left: 4px; }
.feature-col ul.lr-list li::marker, .article-col ul.lr-list li::marker, .answer-col ul.lr-list li::marker { content: "\25A0  "; color: var(--oxblood); font-size: .7em; }
.feature-col ol.lr-list li::marker, .article-col ol.lr-list li::marker, .answer-col ol.lr-list li::marker { color: var(--oxblood); }
.pull-panel { margin: clamp(30px, 3.4vw, 48px) 0; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 3vw, 44px); background: var(--panel); text-align: center; border-top: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood); }
.pull-panel .mod-label { margin-bottom: 10px; }
.feature-col .pull-panel-text, .pull-panel-text { margin: 0; font-style: italic; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.38; }
.feature-col .mod-table, .feature-col .figure { margin-block: clamp(26px, 3vw, 40px); }
.feature-faq-list { margin: 0; }
.feature-faq-list > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.feature-faq-list dt { font-style: italic; font-size: 21px; line-height: 1.35; margin-bottom: 6px; }
.feature-faq-list dd { margin: 0; font-size: 18px; line-height: 1.65; }

/* read on (guides + answers) */
.read-on { margin-top: clamp(48px, 5vw, 76px); padding-top: 22px; border-top: 3px double var(--ink-soft); }
.read-on-title { font-size: clamp(24px, 2vw, 30px); margin-bottom: 12px; }
.read-on ul { list-style: none; display: grid; }
.read-on li { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dotted #B9B2A8; }
.read-on-kind { font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); }
.read-on a { color: var(--ink); font-size: 19px; line-height: 1.35; text-decoration-color: var(--oxblood); }

/* ---------------- answer: DIRECT ANSWER */
.answer-col { max-width: 780px; }
.page-hero--answer { padding-bottom: clamp(64px, 6vw, 96px); }
.page-title--answer { font-size: clamp(34px, 3.7vw, 54px); margin-top: 18px; }
.answer-body { padding-block: 0 var(--band-pad-tight); }
.answer-callout { position: relative; margin-top: calc(-1 * clamp(40px, 4vw, 64px)); padding: clamp(24px, 2.8vw, 40px); background: var(--espresso); color: var(--oat); border-left: 6px solid var(--sky); }
.answer-label { font: 700 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; }
.answer-lead { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.45; font-weight: 500; color: var(--oat); margin: 0; }
.answer-points { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--espresso-rule); }
.answer-points li { position: relative; padding-left: 22px; font-size: 17.5px; line-height: 1.5; color: var(--oat); }
.answer-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--sky); }
.answer-cta { margin: 22px 0 0; }
.answer-callout .btn--primary { background: var(--sky); color: var(--espresso); }
.answer-callout .btn--primary:hover { background: #B7D0F4; color: var(--espresso); }
.answer-callout a:not(.btn) { color: var(--oat); text-decoration-color: var(--sky); }
.answer-sec { margin-top: clamp(36px, 3.6vw, 52px); }
.answer-h { font-size: clamp(25px, 2.1vw, 31px); line-height: 1.2; margin-bottom: 14px; padding-top: 18px; border-top: 1px solid var(--oxblood); }
.answer-sec p, .answer-sec li { font-size: clamp(18px, 1.3vw, 19px); line-height: 1.7; }

/* ---------------- designed article (core + legal) */
.page-hero--article .page-title, .page-hero--index .page-title { max-width: 20em; }
.legal-updated { margin: 18px 0 0; font: 500 14px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink-soft); }
.article-col { margin-inline: auto; }
.article-col > p, .article-col li, .article-sec p { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.72; }
.article-sec + .article-sec, .article-col > * + .article-sec { margin-top: clamp(40px, 4.2vw, 64px); }
.article-sec-head { text-align: center; margin-bottom: 20px; }
.article-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px; font: 700 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); }
.article-kicker::before, .article-kicker::after { content: ""; width: 36px; height: 1px; background: var(--oxblood); }
.article-sec-head h2 { font-size: clamp(27px, 2.4vw, 36px); line-height: 1.15; }
.article-sec .lr-subhead { font-size: clamp(21px, 1.6vw, 24px); margin: 1.3em 0 .5em; }
.article-sec .mod-note, .article-sec .mod-qa { margin: 26px 0; }
/* wide modules break out of the reading column symmetrically, never past the gutter */
.article-sec > .programme, .article-sec > .mod-strip, .article-sec > .mod-table, .article-sec > .mod-annotated, .article-sec > .figure--wide {
	margin-inline: max(calc(50% - 520px), calc(50% - 50vw + var(--gutter)));
}
.article-page--legal .article-sec-head { text-align: left; }
.article-page--legal .article-kicker { justify-content: flex-start; }
.article-page--legal .article-kicker::after { display: none; }
.article-page--legal .article-sec-head h2 { font-size: clamp(24px, 2vw, 30px); }

/* ---------------- quote page */
.quote-steps { padding-block: var(--band-pad-tight); }
.qsteps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.qstep { border-top: 1px solid var(--oxblood); padding-top: 16px; min-width: 0; }
.qstep .step-num { display: block; margin-bottom: 10px; }
.qstep-title { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; margin-bottom: 8px; }
.qstep p { font-size: 17px; line-height: 1.6; margin: 0; }
.article--after { padding-top: 0; }

/* ---------------- wayfinding indexes */
.idx-band { padding-block: clamp(36px, 3.6vw, 56px); }
.idx-band + .idx-band { padding-top: 0; }
.svc-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.svc-card a { display: flex; flex-direction: column; height: 100%; background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease); }
.svc-card a:hover { transform: translateY(-2px); }
.svc-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #D8D3CC; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.svc-card a:hover .svc-media img { transform: scale(1.02); }
.svc-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.svc-title { font-size: clamp(22px, 1.8vw, 27px); line-height: 1.2; }
.svc-sum { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.svc-more { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oxblood); margin-top: 6px; }
.svc-arrow { width: 30px; height: 16px; flex: none; }
.jump-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 2.6vw, 36px); }
.jump-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #A49B90; color: var(--ink); text-decoration: none; font-size: 16px; }
.jump-row a:hover { border-color: var(--oxblood); color: var(--oxblood); }
.jump-n { font: 700 12px/1 var(--sans); color: var(--oxblood); }
.dir-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 2.6vw, 40px); }
.dir-group { min-width: 0; border-top: 2px solid var(--ink); padding-top: 14px; }
.dir-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; margin-bottom: 10px; }
.dir-count { font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oxblood); }
.dir-arrow { display: inline-block; width: 12px; height: 12px; border-top: 2px solid var(--oxblood); border-right: 2px solid var(--oxblood); transform: rotate(-45deg); align-self: center; }
.dir-arrow--north-east { transform: rotate(0deg); }
.dir-arrow--east { transform: rotate(45deg); }
.dir-arrow--south-east { transform: rotate(90deg); }
.dir-arrow--south { transform: rotate(135deg); }
.dir-arrow--south-west { transform: rotate(180deg); }
.dir-arrow--west { transform: rotate(225deg); }
.dir-arrow--north-west { transform: rotate(270deg); }
.town-list { list-style: none; }
.town-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #B9B2A8; color: var(--ink); text-decoration: none; font-size: 18px; }
.town-list a:hover .town-name { color: var(--oxblood); text-decoration: underline; }
.town-mi { font: 500 13px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feat-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.feat-card a { display: flex; flex-direction: column; height: 100%; background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease); }
.feat-card a:hover { transform: translateY(-2px); }
.feat-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #D8D3CC; }
.feat-media img { width: 100%; height: 100%; object-fit: cover; }
.feat-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; flex: 1; }
.feat-cluster { font: 700 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); }
.feat-title { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.22; }
.feat-sum { font-size: 16px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.feat-time, .entry-time { font: 500 12.5px/1.2 var(--sans); letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.idx-all-title { font-size: clamp(28px, 2.4vw, 38px); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.cluster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(28px, 3.4vw, 56px); }
.cluster { min-width: 0; border-top: 2px solid var(--oxblood); padding-top: 12px; }
.cluster-title { font-size: clamp(21px, 1.7vw, 25px); font-style: italic; margin-bottom: 6px; }
.entry-list { list-style: none; }
.entry-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dotted #B9B2A8; color: var(--ink); text-decoration: none; font-size: 17.5px; line-height: 1.35; }
.entry-list a:hover .entry-title { color: var(--oxblood); text-decoration: underline; }
.idx-after { padding-top: 0; }
.article-col--centre { text-align: center; }
.article-col--centre p { font-size: 18px; color: var(--ink-soft); }

/* view flag: the Fidelity view hides the WhatsApp widget on every template */
body.view-fid .wa { display: none; }
.area-chapter .lr-run--rest { padding-top: clamp(20px, 2vw, 32px); border-top: 1px solid var(--rule); }
.article-sec > .mod-table, .article-sec > .programme, .article-sec > .mod-strip { margin-top: 28px; margin-bottom: 28px; }

/* ================= Fidelity loop 2 (2026-10-10) ================= */
/* Template section heads take the STYLE-GUIDE section-head scale (clamp 32 / 3.6vw / 52). The long-read
   caps (chapter titles <= 37px, pulls <= 29px, §2) bind long-read classes only. */
:root { --fs-sec: clamp(32px, 3.6vw, 52px); }
.sec-title--sm { font-size: var(--fs-sec); line-height: 1.06; }
.sec-head .sec-num { font-size: clamp(22px, 2.1vw, 31px); }

/* inner heroes: bigger buttons (both templates); area italic line at 0.85 of the H1 */
.hero--inner .btn--lg { min-height: 62px; padding: 15px 32px; font-size: clamp(18px, 1.55vw, 23px); }
.hero--inner .hero-ctas .icon { width: 28px; height: 28px; }
.area .hero-title--inner { font-size: clamp(38px, 4.6vw, 72px); }
.area .hero-title--inner em { font-size: .85em; line-height: 1.08; margin-top: .12em; }

/* 04-fit: oxblood column rules that read as colour, not hairlines */
.fit-cols .problem-col + .problem-col { border-left-width: 2px; }
@media (max-width: 759.98px) { .fit-cols .problem-col + .problem-col { border-left-width: 0; border-top-width: 2px; } }

/* 06-programme: oxblood-tinted grid and frame, spaced-caps week heads, "built to our sizes" bar */
.programme-table { border: 1.5px solid #A0585E; }
.programme-table th, .programme-table td { border-color: #DFC6C7; }
.programme-cell { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--weeks) - 1px), #DFC6C7 calc(100% / var(--weeks) - 1px), #DFC6C7 calc(100% / var(--weeks))); }
.programme-week { font: 700 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 12px 2px !important; }
.bar--sized, .key--sized { background: repeating-linear-gradient(90deg, var(--oxblood) 0 12px, #9C3C44 12px 14px); }
@media (max-width: 759.98px) { .programme-week { font-size: 11px; letter-spacing: .06em; } }

/* 08-related: cream cards on a hairline, product close-ups, short one-line titles (related_titles);
   a long manifest fallback wraps to two clean lines, never truncated */
.related-card a { background: #FBF9F6; border: 1px solid #E2DCD4; }
.related-media { aspect-ratio: 2.15 / 1; }
.related-title { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; margin: 14px 20px 18px; padding-bottom: 12px; text-wrap: balance; }

/* Service long read foot: spokes that are neither a card nor linked inline (every spoke linked from its hub) */
.lr-more { padding-block: clamp(20px, 2vw, 32px) clamp(28px, 3.4vw, 56px); }
.lr-more .wrap { border-top: 1px solid #E2DCD4; padding-top: 16px; }
.lr-more-label { font: 700 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 8px; }
.lr-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; font-size: 16px; }
.lr-more a { color: var(--ink); text-decoration-color: #C9A3A6; text-underline-offset: 3px; }
.lr-more a:hover { color: var(--oxblood); }

/* area 03-local: deeper band */
.area .band--facts { padding-block: clamp(56px, 7.3vw, 118px); }

/* area 04-chapter: the mocked chapter head is a designed section head (data-sonic-section), so it
   takes the section scale; long-read chapter titles elsewhere keep the 37px cap. */
.area-chapter .lr-ch-title { font-size: var(--fs-sec); line-height: 1.06; max-width: 22em; }
.area-chapter .lr-ch-deck { font-size: clamp(20px, 1.95vw, 28px); }
.area-chapter .lr-part { font-size: 14px; }
@media (min-width: 1024px) { .area-chapter .lr-run--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
.area-chapter .mod-note { padding: 22px 24px 16px; border-color: #C9A3A6; border-top-color: var(--oxblood); }
.area-chapter .mod-note .mod-label { font-size: 14px; }
.area-chapter .mod-note li { font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.45; }

/* area 05-modules: question heading ~1.4x; the pull runs at the 29px pull cap from narrower widths */
.mod-qa--box { border-color: #B4646B; padding: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 40px); }
.mod-qa--box .mod-label { font-size: 14px; margin-bottom: 16px; }
.mod-qa--box .mod-q { font-size: clamp(27px, 2.75vw, 40px); line-height: 1.14; margin-bottom: 14px; }
.mod-qa--box .mod-a { font-size: clamp(17.5px, 1.4vw, 20px); }
/* double rules that read as two lines at 1440 (3px double antialiases to one grey line) */
.mod-pull--half { padding-block: clamp(26px, 3vw, 44px); border-top: 7px double #3B3530; border-bottom: 7px double #3B3530; }
.mod-pull--half p { font-size: clamp(24px, 2.4vw, 29px); line-height: 1.3; max-width: 15em; }

/* area 07-nearby: 2px oxblood rules, chips sized to their names */
.nearby { border-top-width: 2px; border-bottom-width: 2px; }
.nearby-chips { display: flex; flex-wrap: wrap; }
.nearby-chips li { flex: 1 1 auto; }
.nearby-chips a { white-space: nowrap; padding: 8px clamp(16px, 1.7vw, 26px); }