/* Resilient Consult, by Mako Digital. Studio system (v2, 13 Oct 2026).
   Light, cool paper page; navy colour-blocks for film and legal bands; one accent
   (signal blue, from the logo). Sharp corners everywhere. One typeface: Archivo,
   wide (112-125%) for display, normal width for reading. Bump RCON_VERSION on any change. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
	--paper: #f1f3f4;
	--paper-2: #e6eaed;
	--white: #fbfcfc;
	--ink: #0b1726;
	--ink-2: #273647;
	--muted: #586577;
	--line: rgb(11 23 38 / .14);
	--line-2: rgb(11 23 38 / .28);
	--navy: #0a1a2d;
	--navy-2: #0e2239;
	--on-dark: #e9eef4;
	--on-dark-2: rgb(233 238 244 / .72);
	--line-dark: rgb(233 238 244 / .18);
	--sig: #3ba4f5;          /* signal blue: fills, rules, marks on dark */
	--sig-ink: #1460b8;      /* signal blue as text on paper: 6:1 */

	--f: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--gut: clamp(1.25rem, 4vw, 3.5rem);
	--max: 1480px;
	--sec: clamp(5rem, 10vw, 9.5rem);
	--hd: 76px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 1.0625rem/1.62 var(--f); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; color: var(--ink); }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .7rem 1rem; }
.skip:focus { top: 1rem; }
.scroll-sentinel { position: absolute; top: 0; height: 40px; width: 1px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }

/* type scale */
.h-xl, .h-l, .h-m, .hx-d, .hx-h1, .st-text { font-family: var(--f); color: var(--ink); text-wrap: balance; }
.h-xl { font-size: clamp(2.2rem, 1.15rem + 3.5vw, 5rem); font-stretch: 122%; font-weight: 380; line-height: .98; letter-spacing: -.035em; }
.h-l { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.1rem); font-stretch: 118%; font-weight: 420; line-height: 1.02; letter-spacing: -.03em; }
.h-m { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-stretch: 112%; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }

/* buttons: sharp, one primary fill, one outline */
.b { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .9rem 1.5rem; border: 1px solid transparent; border-radius: 0; font: 600 .98rem/1 var(--f); font-stretch: 108%; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease); }
.b:active { transform: translateY(1px); }
.b-solid, .btn-send { background: var(--sig); color: var(--navy); border-color: var(--sig); }
.b-solid:hover, .btn-send:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.b-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.b-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.b-line.is-light { color: #fff; border-color: rgb(255 255 255 / .45); }
.b-line.is-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.ln { display: inline-flex; align-items: center; gap: .55rem; font: 600 1rem/1.2 var(--f); font-stretch: 108%; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: .35rem; transition: border-color .3s, gap .3s var(--ease); }
.ln:hover { border-color: var(--ink); gap: .85rem; }

/* -------------------------------------------------------------- header */
.hd { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--hd); color: #fff; transition: color .4s var(--ease), transform .5s var(--ease); }
.hd::before { content: ""; position: absolute; inset: 0; background: rgb(241 243 244 / .86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s var(--ease); }
.is-scrolled .hd { color: var(--ink); }
.is-scrolled .hd::before { opacity: 1; }
.hd-in { position: relative; height: 100%; display: flex; align-items: center; gap: 2rem; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.hd-brand { position: relative; display: block; margin-right: auto; }
.hd-brand .logo { height: 40px; width: auto; transition: opacity .4s var(--ease); }
.hd-brand .logo-dark { position: absolute; inset: 0 auto auto 0; opacity: 0; }
.is-scrolled .hd-brand .logo-light { opacity: 0; }
.is-scrolled .hd-brand .logo-dark { opacity: 1; }
.nav-open .hd { color: #fff; }
.nav-open .hd::before { opacity: 0; }
.nav-open .hd-brand .logo-light { opacity: 1; }
.nav-open .hd-brand .logo-dark { opacity: 0; }
.hd-nav { display: none; gap: 2rem; }
.hd-nav a { position: relative; font: 500 .95rem/1 var(--f); font-stretch: 108%; text-decoration: none; padding: .5rem 0; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hd-nav a:hover::after, .hd-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd-cta { display: none; min-height: 2.75rem; padding: .7rem 1.1rem; font-size: .92rem; }
.hd-menu { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: 0 .2rem; background: none; border: 0; color: inherit; font: 500 .95rem/1 var(--f); font-stretch: 108%; cursor: pointer; }
.hd-menu-i { position: relative; width: 26px; height: 12px; }
.hd-menu-i i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.hd-menu-i i:first-child { top: 1px; }
.hd-menu-i i:last-child { top: 9px; }
.nav-open .hd-menu-i i:first-child { top: 5px; transform: rotate(45deg); }
.nav-open .hd-menu-i i:last-child { top: 5px; transform: rotate(-45deg); }
@media (min-width: 1080px) {
	.hd-nav { display: flex; }
	.hd-cta { display: inline-flex; }
	.hd-brand .logo { height: 46px; }
}

/* full-screen menu */
.mn { position: fixed; z-index: 45; inset: 0; background: var(--navy); color: var(--on-dark); overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease-io), visibility 0s .8s; }
.nav-open .mn { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.nav-open { overflow: hidden; }
.mn-in { min-height: 100%; display: grid; gap: 3rem; align-content: start; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: calc(var(--hd) + 3rem) var(--gut) 3rem; }
.mn-groups { display: grid; gap: 2.2rem; }
.mn-h { font: 600 .75rem/1 var(--f); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--sig); margin: 0 0 1rem; }
.mn-group a { display: block; padding: .3rem 0; color: var(--on-dark-2); text-decoration: none; font-size: 1rem; transition: color .25s; }
.mn-group a:hover { color: #fff; }
.mn-big a { display: block; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); font-stretch: 122%; font-weight: 380; letter-spacing: -.035em; line-height: 1.12; color: #fff; text-decoration: none; transition: color .3s, transform .45s var(--ease); }
.mn-big a:hover { color: var(--sig); transform: translateX(.4rem); }
.mn-small { margin-top: 2rem; display: grid; gap: .4rem; }
.mn-small a, .mn-contact a { color: var(--on-dark-2); text-decoration: none; }
.mn-small a:hover, .mn-contact a:hover { color: #fff; }
.mn-contact { margin-top: 2rem; font-size: 1.05rem; }
@media (min-width: 900px) { .mn-in { grid-template-columns: 1.5fr 1fr; gap: 5rem; } .mn-groups { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
@media (prefers-reduced-motion: no-preference) {
	.mn-big li { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s var(--ease), transform .8s var(--ease); }
	.nav-open .mn-big li { opacity: 1; transform: none; }
	.nav-open .mn-big li:nth-child(2) { transition-delay: .05s; } .nav-open .mn-big li:nth-child(3) { transition-delay: .1s; } .nav-open .mn-big li:nth-child(4) { transition-delay: .15s; } .nav-open .mn-big li:nth-child(5) { transition-delay: .2s; } .nav-open .mn-big li:nth-child(6) { transition-delay: .25s; }
}

/* ---------------------------------------------------------------- film */
.film, .film-still, .film-still img { width: 100%; height: 100%; object-fit: cover; }
.film-still { display: block; }

/* ---------------------------------------------------------------- heroes */
.hx { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; }
.hx-media { position: absolute; inset: 0; z-index: -2; }
.hx::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(7 19 34 / .88) 0%, rgb(7 19 34 / .35) 48%, rgb(7 19 34 / .15) 70%, rgb(7 19 34 / .45) 100%), linear-gradient(90deg, rgb(7 19 34 / .55) 0%, rgb(7 19 34 / 0) 60%); }
.hx-in { position: relative; display: grid; align-content: end; min-height: inherit; padding-top: calc(var(--hd) + 3rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); }

.hx-home { min-height: 100svh; }
.hx-title { display: grid; gap: 1.6rem; color: #fff; }
.hx-k { font: 600 .78rem/1.3 var(--f); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .82); }
.hx-d { display: block; max-width: 12.5ch; font-size: clamp(2.9rem, 1.1rem + 6vw, 7.4rem); font-stretch: 125%; font-weight: 340; line-height: .94; letter-spacing: -.045em; color: #fff; }
.hx-foot { display: grid; gap: 1.6rem; margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 1.6rem; border-top: 1px solid rgb(255 255 255 / .22); }
.hx-lede { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); line-height: 1.5; color: rgb(255 255 255 / .86); }
.hx-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 900px) { .hx-foot { grid-template-columns: 1fr auto; align-items: end; } }

.hx-page.is-tall { min-height: min(86svh, 860px); }
.hx-page.is-short { min-height: 0; }
.hx-page.is-short .hx-in { padding-top: calc(var(--hd) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hx-page.is-short::after { display: none; }
.hx-page .hx-in { gap: 2.5rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.5rem; font-size: .88rem; color: rgb(255 255 255 / .7); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
.hx-h1 { max-width: 19ch; font-size: clamp(2.3rem, 1.1rem + 4.1vw, 5.6rem); font-stretch: 122%; font-weight: 360; line-height: .97; letter-spacing: -.04em; color: #fff; }
.hx-page .hx-lede { margin-top: 1.5rem; max-width: 48ch; }
.hx-page .hx-cta { margin-top: 2rem; }
.hx-side { width: 100%; }
@media (min-width: 1080px) { .hx-page.has-side .hx-in { grid-template-columns: 1fr 1fr; align-items: end; } }

@media (prefers-reduced-motion: no-preference) {
	.hx-home .hx-media { animation: settle 2.4s var(--ease) both; }
	.hx-k, .hx-d, .hx-foot, .hx-page .hx-main > * { animation: rise 1.2s var(--ease) both; }
	.hx-d { animation-delay: .12s; }
	.hx-foot { animation-delay: .3s; }
	.hx-page .hx-main > :nth-child(2) { animation-delay: .08s; } .hx-page .hx-main > :nth-child(3) { animation-delay: .16s; } .hx-page .hx-main > :nth-child(4) { animation-delay: .24s; }
}
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- statement */
.statement { padding: var(--sec) 0; }
.st-text { max-width: 30ch; margin: 0 0 3rem; font-size: clamp(1.75rem, .95rem + 3.1vw, 4.1rem); font-stretch: 118%; font-weight: 380; line-height: 1.08; letter-spacing: -.032em; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.st-text .w { opacity: .14; animation: lit linear both; animation-timeline: view(); animation-range: cover calc(18% + var(--p) * 34%) cover calc(22% + var(--p) * 34%); }
	}
}
@keyframes lit { to { opacity: 1; } }

/* ------------------------------------------------- disciplines: sticky films */
.disc { position: relative; }
.disc-panel { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; color: var(--on-dark); background: var(--navy); }
.disc-media { position: absolute; inset: 0; z-index: -2; }
.disc-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(7 19 34 / .9) 0%, rgb(7 19 34 / .62) 45%, rgb(7 19 34 / .2) 100%), linear-gradient(0deg, rgb(7 19 34 / .6), transparent 50%); }
.disc-body { height: 100%; display: grid; align-content: end; padding-top: calc(var(--hd) + 2rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.disc-h { max-width: 14ch; font-size: clamp(2.2rem, 1.1rem + 3.8vw, 5.2rem); font-stretch: 122%; font-weight: 360; line-height: .98; letter-spacing: -.04em; color: #fff; }
.disc-p { max-width: 50ch; margin: 1.5rem 0 2.5rem; color: var(--on-dark-2); font-size: 1.05rem; }
.disc-links { display: grid; max-width: 860px; column-gap: 2.5rem; }
.disc-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line-dark); color: #fff; text-decoration: none; font-size: 1.02rem; font-stretch: 108%; font-weight: 500; transition: color .3s, padding .45s var(--ease); }
.disc-links a .ico { color: var(--sig); transition: transform .45s var(--ease); }
.disc-links a:hover { color: var(--sig); padding-left: .4rem; }
.disc-links a:hover .ico { transform: translate(3px, -3px); }
@media (min-width: 760px) { .disc-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 759px) { .disc-panel { position: relative; height: auto; min-height: 100svh; } }
.is-drift img { animation: drift 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .is-drift img { animation: none; } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(-2%); } }

/* ---------------------------------------------- process: sticky media */
.proc { padding: var(--sec) 0; }
.proc-grid { display: grid; gap: 3rem; }
.proc-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.proc-intro { max-width: 46ch; margin: 1.5rem 0 3rem; font-size: 1.15rem; color: var(--muted); }
.proc-list { counter-reset: st; }
.proc-list li { counter-increment: st; display: grid; grid-template-columns: 4.5rem 1fr; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.proc-list li:last-child { border-bottom: 1px solid var(--line); }
.proc-list li::before { content: counter(st, decimal-leading-zero); grid-row: span 2; font: 500 .95rem/1.6 var(--f); font-stretch: 112%; color: var(--sig-ink); }
.proc-list h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); font-stretch: 116%; font-weight: 460; letter-spacing: -.025em; margin-bottom: .45rem; }
.proc-list p { margin: 0; color: var(--muted); max-width: 52ch; }
@media (min-width: 1000px) {
	.proc-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
	.proc-media { position: sticky; top: calc(var(--hd) + 3rem); }
}

/* ------------------------------------------------------ service index */
.ix { position: relative; padding: var(--sec) 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ix-head { display: grid; gap: 2rem; margin-bottom: 3rem; }
.ix-tabs { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.ix-tabs button { position: relative; padding: .6rem 0; background: none; border: 0; cursor: pointer; font: 500 1.02rem/1 var(--f); font-stretch: 110%; color: var(--muted); transition: color .3s; }
.ix-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.ix-tabs button[aria-selected="true"] { color: var(--ink); }
.ix-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.ix-tabs button:hover { color: var(--ink); }
.ix-list { border-top: 1px solid var(--line-2); }
.ix-row { position: relative; display: grid; gap: .4rem 2rem; padding: clamp(1.2rem, 2vw, 1.8rem) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ix-t { font-size: clamp(1.45rem, .95rem + 1.7vw, 2.7rem); font-stretch: 118%; font-weight: 400; line-height: 1.05; letter-spacing: -.03em; transition: transform .6s var(--ease), color .3s; }
.ix-b { color: var(--muted); font-size: .97rem; max-width: 52ch; }
.ix-go { display: none; width: 1.6rem; height: 1.6rem; color: var(--sig-ink); transition: transform .5s var(--ease); }
.ix-row:hover .ix-t { transform: translateX(.6rem); color: var(--sig-ink); }
.ix-row:hover .ix-go { transform: translate(4px, -4px); }
@media (min-width: 900px) {
	.ix-head { grid-template-columns: 1fr auto; align-items: end; }
	.ix-row { grid-template-columns: 1.15fr 1fr 2rem; align-items: center; }
	.ix-go { display: block; }
}
.ix .wrap { position: static; }
.ix-preview { position: absolute; left: 0; top: 0; z-index: 3; width: 300px; aspect-ratio: 4 / 3; margin: -112px 0 0 -150px; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
.ix.is-previewing .ix-preview { opacity: 1; }
.ix-pic { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .35s; }
.ix-pic.is-on { opacity: 1; }
.ix-pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-panel[hidden] { display: none; }
@media (hover: none), (pointer: coarse) { .ix-preview { display: none; } }

/* ------------------------------------------------------ sector strip */
.sx { padding: var(--sec) 0; }
.sx .h-xl { max-width: 16ch; margin-bottom: 3rem; }
.sx-strip { display: flex; gap: 6px; height: clamp(440px, 64vh, 680px); padding: 0 var(--gut); max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; }
.sx-item { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--ease); }
.sx-item a { position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--navy); }
.sx-item picture, .sx-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.sx-item a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(7 19 34 / .9), rgb(7 19 34 / .2) 60%); }
.sx-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; }
.sx-t { display: block; font-size: 1.05rem; font-stretch: 112%; font-weight: 520; line-height: 1.15; letter-spacing: -.01em; }
.sx-p { display: block; max-width: 36ch; margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: rgb(255 255 255 / .8); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
@media (min-width: 900px) {
	.sx-item:hover, .sx-item:focus-within { flex-grow: 4.2; }
	.sx-item:hover .sx-p, .sx-item:focus-within .sx-p { opacity: 1; transform: none; transition-delay: .2s; }
	.sx-item:hover img { transform: scale(1.04); }
	.sx-strip:not(:hover):not(:focus-within) .sx-item:first-child { flex-grow: 4.2; }
	.sx-strip:not(:hover):not(:focus-within) .sx-item:first-child .sx-p { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
	.sx-strip { overflow-x: auto; scroll-snap-type: x mandatory; height: 460px; scrollbar-width: none; }
	.sx-item { flex: 0 0 80vw; scroll-snap-align: start; }
	.sx-p { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- areas */
.ar { padding: var(--sec) 0; background: var(--white); border-top: 1px solid var(--line); }
.ar-grid { display: grid; gap: 3rem; }
.ar-copy > p { max-width: 44ch; margin: 1.5rem 0 2.5rem; color: var(--muted); }
.ar-towns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 1px solid var(--line); }
.ar-towns a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 1.1rem; font-stretch: 112%; font-weight: 480; letter-spacing: -.01em; transition: color .3s, padding .45s var(--ease); }
.ar-towns a:hover { color: var(--sig-ink); padding-left: .35rem; }
@media (min-width: 1000px) { .ar-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; } }

/* ------------------------------------------------------------- guides */
.gd { padding: var(--sec) 0; }
.gd .h-l { margin-bottom: 2.5rem; }
.gd-grid { display: grid; gap: 2.5rem; }
.gd-card { display: grid; gap: .8rem; text-decoration: none; color: var(--ink); }
.gd-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.gd-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gd-card:hover .gd-pic img { transform: scale(1.04); }
.gd-t { margin-top: .6rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); font-stretch: 118%; font-weight: 420; letter-spacing: -.03em; line-height: 1.05; }
.gd-p { color: var(--muted); max-width: 52ch; }
@media (min-width: 800px) { .gd-grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- faq */
.faq { padding: var(--sec) 0; }
.faq-grid { display: grid; gap: 2.5rem; }
.faq-head h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.1rem); font-stretch: 118%; font-weight: 420; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1.5rem; }
.faq-head p { color: var(--muted); }
.faq-head .link-arrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-stretch: 108%; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: .35rem; }
.faq-list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); font-stretch: 110%; font-weight: 520; line-height: 1.35; letter-spacing: -.01em; }
.qa summary .ico { width: 1.3rem; height: 1.3rem; color: var(--ink); transition: transform .5s var(--ease); }
.qa[open] summary .ico { transform: rotate(180deg); }
.qa-a { padding: 0 0 1.5rem; max-width: 70ch; }
.qa-a p { margin: 0; color: var(--muted); }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: 4fr 8fr; gap: 5rem; } .faq-head { position: sticky; top: calc(var(--hd) + 2rem); align-self: start; } }

/* ------------------------------------------------- contact band + form */
.ct { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec) 0; background: var(--navy); color: var(--on-dark); }
.ct #quote { position: absolute; top: 0; }
.ct-media { position: absolute; inset: 0; z-index: -2; }
.ct::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(7 19 34 / .92), rgb(7 19 34 / .72)); }
.ct-grid { display: grid; gap: 3rem; align-items: start; }
.ct-copy .h-xl { color: #fff; max-width: 12ch; }
.ct-intro { max-width: 40ch; margin: 1.5rem 0 2.5rem; font-size: 1.12rem; color: var(--on-dark-2); }
.ct-reach { display: grid; grid-template-columns: auto 1fr; gap: .7rem 2rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.ct-reach dt { font-size: .78rem; font-stretch: 112%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); padding-top: .2rem; }
.ct-reach dd { margin: 0; color: #fff; }
.ct-reach a { color: #fff; }
.ct-card { background: var(--white); color: var(--ink-2); padding: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 1000px) { .ct-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 6rem); } .ct-copy { position: sticky; top: calc(var(--hd) + 2rem); } }

.quote-form { display: grid; gap: 1.6rem; }
.fields { display: grid; gap: 1.3rem; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fld-wide { grid-column: 1 / -1; } }
.fld { display: grid; gap: .45rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld label, .fld legend { font: 600 .9rem/1.3 var(--f); font-stretch: 106%; color: var(--ink); padding: 0; }
.fld legend { margin-bottom: .6rem; }
.opt { font-weight: 400; color: var(--muted); }
.fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld textarea { width: 100%; min-height: 3.2rem; padding: .8rem .95rem; border: 1px solid var(--line-2); border-radius: 0; background: #fff; font: 400 1rem/1.4 var(--f); color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.fld textarea { min-height: 8rem; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--sig); }
.fld input[aria-invalid=true], .fld textarea[aria-invalid=true] { border-color: #b3261e; }
.fld input[type=file] { width: 100%; padding: .8rem; border: 1px dashed var(--line-2); background: #fff; font: 400 .92rem/1.4 var(--f); color: var(--muted); }
.fld input[type=file]::file-selector-button { margin-right: .9rem; padding: .55rem .9rem; border: 0; background: var(--ink); color: #fff; font: 600 .85rem/1 var(--f); cursor: pointer; }
.hint { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.fld-err { font-size: .86rem; color: #b3261e; }
.stream-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.stream { position: relative; }
.stream input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.stream span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .55rem .95rem; border: 1px solid var(--line-2); font-size: .92rem; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s; }
.stream input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.stream input:focus-visible + span { outline: 2px solid var(--sig); outline-offset: 2px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.btn.btn-send { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .9rem 1.6rem; border: 1px solid var(--sig); border-radius: 0; font: 600 .98rem/1 var(--f); font-stretch: 108%; cursor: pointer; transition: background-color .35s var(--ease), color .35s, border-color .35s; }
.btn-send .ico { width: 1.1em; height: 1.1em; }
.form-status { margin: 0; font-size: .92rem; color: var(--muted); }
.form-status.is-err { color: #b3261e; }
.form-small { margin: 0; font-size: .85rem; color: var(--muted); }
.form-note { display: flex; gap: .8rem; padding: 1rem 1.1rem; border-left: 3px solid var(--sig); background: var(--paper); }
.form-note.is-err { border-color: #b3261e; }
.form-note p { margin: 0; }
.form-note .ico { color: var(--sig-ink); margin-top: .15rem; }

/* ------------------------------------------------------------- footer */
.ft { padding: clamp(4rem, 8vw, 7rem) 0 2rem; background: var(--navy-2); color: var(--on-dark-2); }
.ft-top { display: grid; gap: 2rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--line-dark); }
.ft-line { margin: 0; max-width: 24ch; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); font-stretch: 118%; font-weight: 400; line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.ft-grid { display: grid; gap: 2.5rem; padding: 3.5rem 0; }
.ft-h { margin: 0 0 1rem; font-size: .75rem; font-stretch: 112%; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sig); }
.ft-grid ul + .ft-h { margin-top: 2rem; }
.ft-grid a { display: inline-block; padding: .22rem 0; color: var(--on-dark-2); text-decoration: none; font-size: .95rem; transition: color .25s; }
.ft-grid a:hover { color: #fff; }
.ft-cols { columns: 2; column-gap: 1.5rem; }
.ft-mark { padding: 1rem 0 2.5rem; border-top: 1px solid var(--line-dark); }
.ft-mark .logo { width: min(100%, 1100px); height: auto; opacity: .9; }
.ft-base { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.ft-base p { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ft-base a, .ft-btn { color: var(--on-dark-2); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ft-base a:hover, .ft-btn:hover { color: #fff; }
@media (min-width: 800px) { .ft-top { grid-template-columns: 1fr auto; align-items: end; } .ft-grid { grid-template-columns: repeat(4, 1fr); } .ft-base { grid-template-columns: 1fr auto; } }

/* ============================================================ inner pages */
.sec { padding: var(--sec) 0; }
.sec.is-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-h { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 22ch; }
.sec-intro { max-width: 60ch; margin: -1.5rem 0 3rem; color: var(--muted); font-size: 1.08rem; }

/* service: intro */
.intro { padding: var(--sec) 0 calc(var(--sec) * .7); }
.intro-grid { display: grid; gap: 2rem; }
.intro-lead { margin: 0; font-size: clamp(1.35rem, 1rem + 1.35vw, 2.15rem); font-stretch: 110%; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.intro-rest p { color: var(--muted); }
.intro-rest .ln { margin-top: 1rem; }
@media (min-width: 1000px) { .intro-grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } .intro-rest { padding-top: .6rem; } }

/* service: scope accordion */
.scope { padding: 0 0 var(--sec); }
.scope-grid { display: grid; gap: 2rem; }
.acc { border-top: 1px solid var(--line-2); }
.acc-i { border-bottom: 1px solid var(--line); }
.acc-i summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; }
.acc-i summary::-webkit-details-marker { display: none; }
.acc-t { font-size: clamp(1.25rem, 1rem + 1vw, 1.95rem); font-stretch: 116%; font-weight: 440; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); transition: color .3s; }
.acc-i summary:hover .acc-t { color: var(--sig-ink); }
.acc-x { position: relative; width: 22px; height: 22px; flex: none; }
.acc-x::before, .acc-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .5s var(--ease); }
.acc-x::after { transform: rotate(90deg); }
.acc-i[open] .acc-x::after { transform: rotate(0); }
.acc-i p { max-width: 62ch; margin: 0; padding: 0 0 1.6rem; color: var(--muted); font-size: 1.04rem; }
@media (min-width: 1000px) { .scope-grid { grid-template-columns: 4fr 8fr; gap: 5rem; } .scope-h { position: sticky; top: calc(var(--hd) + 2rem); align-self: start; } }

/* service: legal band */
.law { padding: var(--sec) 0; background: var(--navy); color: var(--on-dark-2); }
.law .h-l { color: #fff; margin-bottom: 2rem; }
.law-grid { display: grid; gap: 3rem; }
.law-copy p { max-width: 62ch; }
.law-out { border-top: 1px solid var(--sig); padding-top: 1.5rem; }
.law-out h3 { font-size: 1.15rem; font-stretch: 112%; font-weight: 560; color: #fff; margin-bottom: 1rem; }
.law-out li { padding: .8rem 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
@media (min-width: 1000px) { .law-grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); } }

/* service: numbered steps */
.steps { padding: var(--sec) 0; }
.steps .h-l { margin-bottom: 3rem; }
.steps-list { display: grid; gap: 2rem; counter-reset: s; }
.steps-list li { counter-increment: s; padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.steps-list li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 1.6rem; font-size: .9rem; font-stretch: 112%; font-weight: 600; color: var(--sig-ink); }
.steps-list h3 { font-size: 1.3rem; font-stretch: 112%; font-weight: 520; letter-spacing: -.015em; margin-bottom: .6rem; }
.steps-list p { margin: 0; color: var(--muted); font-size: .98rem; }
@media (min-width: 700px) { .steps-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .steps-list { grid-template-columns: repeat(4, 1fr); } .steps-list.n-5 { grid-template-columns: repeat(5, 1fr); } .steps-list.n-3 { grid-template-columns: repeat(3, 1fr); } }

/* service: value split (full bleed) */
.val { display: grid; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.val-media { min-height: 360px; overflow: hidden; }
.val-media picture, .val-media img { width: 100%; height: 100%; object-fit: cover; }
.val-copy { padding: clamp(3rem, 7vw, 7rem) var(--gut); max-width: 760px; }
.val-copy .h-l { margin-bottom: 1.8rem; }
.val-copy p { color: var(--muted); }
.who-h { margin: 2rem 0 .9rem !important; font-size: .78rem; font-stretch: 112%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tags li { padding: .45rem .8rem; border: 1px solid var(--line-2); font-size: .9rem; color: var(--ink); }
@media (min-width: 1000px) { .val { grid-template-columns: 1fr 1fr; } .val-media { min-height: 640px; } }

/* photo cards (related, hubs) */
.cards { padding: var(--sec) 0; }
.cards .h-l { margin-bottom: 2.5rem; max-width: 22ch; }
.cards-intro { max-width: 60ch; margin: -1rem 0 2.5rem; color: var(--muted); }
.cards-grid { display: grid; gap: 2.5rem 1.5rem; }
.card { display: grid; gap: .7rem; color: var(--ink); text-decoration: none; }
.card-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card-pic img { transform: scale(1.045); }
.card-t { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: 1.3rem; font-stretch: 114%; font-weight: 480; letter-spacing: -.02em; line-height: 1.15; }
.card-t .ico { color: var(--sig-ink); transition: transform .45s var(--ease); }
.card:hover .card-t .ico { transform: translate(3px, -3px); }
.card-p { color: var(--muted); font-size: .97rem; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cards-grid.n-3 { grid-template-columns: repeat(3, 1fr); } }

/* towns line */
.towns { padding: calc(var(--sec) * .7) 0; border-top: 1px solid var(--line); }
.towns-grid { display: grid; gap: 1.5rem; }
.towns-list { display: flex; flex-wrap: wrap; gap: .3rem 0; }
.towns-list li { display: flex; align-items: center; }
.towns-list li:not(:last-child)::after { content: ""; width: 1px; height: 1.2em; background: var(--line-2); margin: 0 1rem; }
.towns-list a { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-stretch: 112%; font-weight: 480; letter-spacing: -.01em; color: var(--ink); text-decoration: none; transition: color .25s; }
.towns-list a:hover, .towns-list a.is-all { color: var(--sig-ink); }
@media (min-width: 1000px) { .towns-grid { grid-template-columns: 4fr 8fr; gap: 5rem; } }

/* split text + photo (about, how, area pages) */
.split { display: grid; gap: 3rem; align-items: center; }
.split-copy p { color: var(--muted); max-width: 60ch; }
.split-copy .h-l { margin-bottom: 1.8rem; }
.split-copy .lead { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-stretch: 108%; line-height: 1.4; color: var(--ink); }
.split-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.split-media picture, .split-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) { .split { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 7rem); } .split.is-rev .split-media { order: -1; } .split.is-rev { grid-template-columns: 5fr 7fr; } }

/* principles grid (about) */
.princ { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.princ li { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.princ h3 { font-size: 1.4rem; font-stretch: 114%; font-weight: 480; letter-spacing: -.02em; margin-bottom: .6rem; }
.princ p { margin: 0; color: var(--muted); max-width: 48ch; }
@media (min-width: 800px) { .princ { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

/* facts list */
.facts { display: grid; margin: 0; border-top: 1px solid var(--line-2); }
.facts > div { display: grid; gap: .3rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .78rem; font-stretch: 112%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-size: 1.05rem; }
.facts dd a { color: var(--sig-ink); }
@media (min-width: 700px) { .facts > div { grid-template-columns: 14rem 1fr; } }

/* discipline groups (services hub) */
.grp { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.grp:nth-of-type(even) { background: var(--white); }
.grp-head { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
.grp-head p { margin: 0; max-width: 54ch; color: var(--muted); }
@media (min-width: 1000px) { .grp-head { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: end; } }

/* sectors page rows */
.srow { display: grid; gap: 2rem; padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hd) + 1rem); }
.srow-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.srow-media img { width: 100%; height: 100%; object-fit: cover; }
.srow h2 { margin-bottom: 1.2rem; }
.srow p { color: var(--muted); max-width: 58ch; font-size: 1.05rem; }
@media (min-width: 1000px) { .srow { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: center; } .srow:nth-child(even) .srow-media { order: 2; } .srow:nth-child(even) { grid-template-columns: 7fr 5fr; } }

/* areas hub */
.tw-grid { display: grid; border-top: 1px solid var(--line-2); }
.tw { display: grid; gap: .5rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tw-n { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); font-stretch: 118%; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; transition: color .3s, transform .6s var(--ease); }
.tw-m { font-size: .85rem; font-stretch: 110%; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tw-p { color: var(--muted); max-width: 52ch; }
.tw:hover .tw-n { color: var(--sig-ink); transform: translateX(.5rem); }
@media (min-width: 900px) { .tw { grid-template-columns: 1fr 9rem 1.2fr; align-items: baseline; } }

/* chips (districts) */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { padding: .5rem .85rem; border: 1px solid var(--line-2); font-size: .92rem; color: var(--ink); background: var(--white); }

/* faq page jump */
.jump { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 2.5rem; }
.jump a { font-weight: 500; font-stretch: 108%; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: .3rem; }
.jump a:hover { border-color: var(--ink); }

/* prose: legal, privacy, guides */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem); font-stretch: 116%; font-weight: 440; letter-spacing: -.025em; line-height: 1.1; margin: 3rem 0 1rem; scroll-margin-top: calc(var(--hd) + 1.5rem); }
.prose h3 { font-size: 1.2rem; font-stretch: 112%; font-weight: 560; margin: 2rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--sig-ink); }
.prose .lede { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.45; color: var(--ink); }
.prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .95rem; }
.prose th, .prose td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.guide-faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.guide-faq details p { margin: .7rem 0 0; }
.legal-dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 2rem; margin: 0 0 2rem; }
.legal-dl dt { font-weight: 600; color: var(--ink); }
.legal-dl dd { margin: 0; }
.guide-grid { display: grid; gap: 3rem; }
.toc { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.toc p { margin: 0 0 .8rem; font-size: .78rem; font-stretch: 112%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc ol { display: grid; gap: .1rem; list-style: none; padding: 0; }
.toc a { display: block; padding: .35rem 0; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.toc a:hover { color: var(--sig-ink); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .88rem; color: var(--muted); }
.guide-meta span { display: inline-flex; align-items: center; gap: .4rem; }
@media (min-width: 1080px) { .guide-grid { grid-template-columns: 17rem 1fr; gap: 6rem; } .toc { position: sticky; top: calc(var(--hd) + 2rem); align-self: start; } }

/* 404 */
.nf { padding: calc(var(--hd) + 6rem) 0 var(--sec); }
.nf .h-xl { margin-bottom: 1.5rem; }
.nf p { max-width: 50ch; color: var(--muted); margin-bottom: 2rem; }

/* cookie banner */
.cookie { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; padding: 1.2rem; background: var(--white); border: 1px solid var(--line-2); font-size: .92rem; }
.cookie p { margin: 0 0 .8rem; }
.cookie-btns { display: flex; gap: .6rem; }
.cookie-btn { min-height: 2.6rem; padding: .55rem 1rem; border: 0; background: var(--ink); color: #fff; font: 600 .9rem/1 var(--f); cursor: pointer; }
.cookie-btn[data-consent=no] { background: var(--paper-2); color: var(--ink); }

/* reveal on enter (IntersectionObserver adds .is-in) */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
	.js .reveal.is-in { opacity: 1; transform: none; }
}

@media print { .hd, .mn, .ft, .ct, .cookie { display: none !important; } body { background: #fff; color: #000; } .hx { color: #000; background: none; } .hx-media { display: none; } }

/* ============================================== coverage map (Mako map kit)
   Real boroughs + motorways (OpenStreetMap) under the town links.
   Theme it with the --mp-* custom properties on .area-map (defaults: navy + yellow). */
.area-map {
	--mp-bg: #0c1638; --mp-land: #111d47; --mp-edge: #2a3870; --mp-home: #1a2a6b; --mp-home-edge: #5d70d6;
	--mp-water: #0a2a52; --mp-road: #7f8fd9; --mp-shield: #2b3d9b; --mp-accent: #ffcd2e; --mp-text: #e6e9fa;
	--mp-muted: #b7bfdc; --mp-faint: #4f5d96; --mp-font: var(--font-head); --mp-radius: var(--radius-lg, 18px);
	position: relative; margin: 0; padding: 0; overflow: hidden; background: var(--mp-bg);
	border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--mp-radius); box-shadow: 0 30px 70px rgba(6, 11, 32, .35);
}
.area-map svg.mp { display: block; width: 100%; height: auto; max-height: none; }
.mp-sea { fill: var(--mp-bg); }
.mp-boro { fill: var(--mp-land); stroke: var(--mp-edge); stroke-width: 1.2; stroke-linejoin: round; }
.mp-boro.is-home { fill: var(--mp-home); stroke: var(--mp-home-edge); stroke-width: 1.6; }
.mp-water { fill: var(--mp-water); stroke: none; }
.mp-coast { fill: none; stroke: var(--mp-water); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.mp-river { fill: none; stroke: var(--mp-water); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mp-river.is-big { stroke-width: 3.2; }
.mp-boro-l { fill: var(--mp-faint); font: 700 calc(10px * var(--mp-scale, 1)) var(--mp-font); letter-spacing: .16em; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--mp-bg); stroke-width: 4px; }
.mp-mway-c { fill: none; stroke: var(--mp-bg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mp-mway { fill: none; stroke: var(--mp-road); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.mp-shield rect { fill: var(--mp-shield); stroke: #fff; stroke-width: 1.2; }
.mp-shield text { fill: #fff; font: 800 calc(10.5px * var(--mp-scale, 1)) var(--mp-font); text-anchor: middle; }
.mp-glow-a { stop-color: var(--mp-accent); stop-opacity: .16; }
.mp-glow-b { stop-color: var(--mp-accent); stop-opacity: .06; }
.mp-glow-c { stop-color: var(--mp-accent); stop-opacity: 0; }
.mp-ring { fill: none; stroke: var(--mp-accent); stroke-opacity: .35; stroke-width: 1.2; stroke-dasharray: 3 6; }
.mp-ring.is-outer { stroke-opacity: .75; stroke-width: 1.8; stroke-dasharray: 8 6; }
.mp-ring-l { fill: var(--mp-accent); font: 800 calc(11px * var(--mp-scale, 1)) var(--mp-font); letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; paint-order: stroke; stroke: var(--mp-bg); stroke-width: 4px; }
.mp-line { stroke: var(--mp-accent); stroke-width: 2.2; stroke-dasharray: 6 5; }
.mp-town { cursor: pointer; }
.mp-hit { fill: transparent; }
.mp-dot { fill: #fff; stroke: var(--mp-bg); stroke-width: 2.5; transition: r .2s ease, fill .2s ease; }
.mp-name { fill: var(--mp-text); font: 700 calc(13.5px * var(--mp-scale, 1)) var(--mp-font); paint-order: stroke; stroke: var(--mp-bg); stroke-width: 4px; stroke-linejoin: round; transition: fill .2s ease; }
.mp-town:hover .mp-dot, .mp-town:focus-visible .mp-dot { fill: var(--mp-accent); r: 8; }
.mp-town:hover .mp-name, .mp-town:focus-visible .mp-name { fill: var(--mp-accent); }
.mp-town:focus-visible, .mp-pin:focus-visible { outline: none; }
.mp-town.is-current .mp-dot { fill: var(--mp-accent); }
.mp-town.is-current .mp-name { fill: var(--mp-accent); font-size: calc(15px * var(--mp-scale, 1)); }
.mp-halo { fill: var(--mp-accent); fill-opacity: .22; }
.mp-pin-body { fill: var(--mp-accent); stroke: var(--mp-bg); stroke-width: 2; }
.mp-pin-dot { fill: var(--mp-bg); }
.mp-pin-pulse { fill: var(--mp-accent); fill-opacity: .35; transform-box: fill-box; transform-origin: center; }
.mp-pin-l { fill: #fff; font: 900 calc(17px * var(--mp-scale, 1)) var(--mp-font); paint-order: stroke; stroke: var(--mp-bg); stroke-width: 4px; }
.mp-pin-s { fill: var(--mp-accent); font: 700 calc(10.5px * var(--mp-scale, 1)) var(--mp-font); letter-spacing: .12em; text-transform: uppercase; paint-order: stroke; stroke: var(--mp-bg); stroke-width: 4px; }
a.mp-pin:hover .mp-pin-l { fill: var(--mp-accent); }
@media (prefers-reduced-motion: no-preference) {
	.mp-pin-pulse { animation: mp-pulse 2.6s ease-out infinite; }
	.mp-halo { animation: mp-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes mp-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.mp-uk-wrap { position: absolute; top: .85rem; left: .85rem; z-index: 1; width: clamp(4.5rem, 14%, 6.25rem); padding: .45rem; border-radius: 12px; background: rgba(6, 11, 32, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(4px); }
.mp-uk-wrap.is-right { left: auto; right: .85rem; }
.mp-uk { display: block; width: 100%; height: auto; overflow: visible; }
.mp-uk-ie { fill: color-mix(in srgb, var(--mp-land) 70%, #fff 6%); }
.mp-uk-gb { fill: var(--mp-shield); stroke: var(--mp-road); stroke-width: .6; }
.mp-uk-box { fill: var(--mp-accent); fill-opacity: .25; stroke: var(--mp-accent); stroke-width: 1.2; }
.mp-uk-pin { fill: var(--mp-accent); stroke: var(--mp-bg); stroke-width: 1.2; }
.area-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin: 0; padding: .8rem 1.1rem .9rem; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--mp-muted); font-size: .82rem; line-height: 1.35; text-align: left; }
.mp-key { display: inline-flex; align-items: center; gap: .45rem; }
.mp-key i { display: inline-block; flex: none; }
.k-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--mp-bg), 0 0 0 3px var(--mp-faint); }
.k-ring { width: .9rem; height: .9rem; border-radius: 50%; border: 2px dashed var(--mp-accent); }
.k-road { width: 1.1rem; height: 3px; border-radius: 2px; background: var(--mp-road); }
.k-home { width: .9rem; height: .7rem; border-radius: 2px; background: var(--mp-home); border: 1px solid var(--mp-home-edge); }
.mp-src { margin-left: auto; font-size: .72rem; opacity: .7; }
/* the SVG scales down on phones, so its text scales up to stay readable */
@media (max-width: 640px) {
	.mp-src { margin-left: 0; width: 100%; }
	.mp-boro-l, .mp-shield { display: none; }
	.mp-name { font-size: 21px; stroke-width: 6px; }
	.mp-town.is-current .mp-name { font-size: 23px; }
	.mp-pin-l { font-size: 25px; }
	.mp-pin-s { font-size: 14px; }
	.mp-ring-l { font-size: 15px; }
	.mp-dot { r: 7.5; }
	.mp-uk-wrap { width: 3.6rem; top: .6rem; left: .6rem; padding: .3rem; }
	.mp-uk-wrap.is-right { left: auto; right: .6rem; }
}
/* end map kit */

/* Resilient Consult map palette (after the kit block on purpose): navy ground, signal-blue accent, sharp frame. */
.area-map {
	--mp-bg: #071322; --mp-land: #0e2239; --mp-edge: #24405f; --mp-home: #16365a; --mp-home-edge: #3ba4f5;
	--mp-water: #0a2a48; --mp-road: #8aa0b8; --mp-shield: #0e2239; --mp-accent: #3ba4f5; --mp-text: #eef3f8;
	--mp-muted: #b3c2d2; --mp-faint: #5a7593; --mp-font: var(--f); --mp-radius: 0;
}

/* ------------------------------------------------ v2.0.1 refinements */
@media (min-width: 900px) {
	.ix-head { grid-template-columns: 1fr; align-items: start; }
	.sx-copy { opacity: 0; transition: opacity .4s var(--ease); }
	.sx-item:hover .sx-copy, .sx-item:focus-within .sx-copy, .sx-strip:not(:hover):not(:focus-within) .sx-item:first-child .sx-copy { opacity: 1; transition-delay: .25s; }
	.sx-t { white-space: nowrap; }
}
.gd-grid { align-items: start; }
.card-pic picture, .gd-pic picture, .srow-media picture, .ix-pic picture, .proc-frame picture, .disc-media picture, .hx-media picture, .ct-media picture, .val-media picture { display: block; height: 100%; }
.card-pic img, .gd-pic img, .srow-media img { height: 100%; }
@media (max-width: 759px) {
	.disc-panel::after { background: linear-gradient(0deg, rgb(7 19 34 / .94) 0%, rgb(7 19 34 / .8) 55%, rgb(7 19 34 / .55) 100%); }
	.hx::after { background: linear-gradient(0deg, rgb(7 19 34 / .92) 0%, rgb(7 19 34 / .55) 55%, rgb(7 19 34 / .4) 100%); }
}
/* Footer logo at standard size (Martin, 13 Oct: the full-width mark was too big). */
.ft-mark { padding: 2rem 0; }
.ft-mark .logo { width: auto; height: 52px; opacity: 1; }