/* ==========================================================================
   Prime Leak Detection theme
   Source of truth: docs/design-system.md. Plain CSS, no build step.

   1  Tokens            8  Intro              15 Request form
   2  Base              9  Services           16 Footer + CTA band
   3  Layout           10  Story (leak reveal) 17 Inner pages + prose
   4  Type helpers     11  Process            18 Reveal motion
   5  Buttons          12  Local causes       19 Reduced motion
   6  Header           13  Areas
   7  Hero             14  FAQ

   Breakpoints: 40em (640px) tablet, 64em (1024px) desktop.
   ========================================================================== */

/* 1 Tokens ---------------------------------------------------------------- */
:root {
	/* Palette (design system §03) */
	--color-prime-blue: #1078B9;
	--color-tech-cyan: #20B8D6;
	--color-dark-900: #071C2C;
	--color-dark-800: #0D3148;
	--color-light-300: #EAF6FB;
	--color-light-200: #F7FAFC;
	--color-white: #FFFFFF;
	--color-text: #425466;
	--color-text-muted: #64748B;
	--color-border: #DCE6EC;
	--color-success: #159957;
	--color-error: #B42318;
	--color-error-on-dark: #FF9C93;

	/* Infrared palette: used only inside thermal visuals */
	--thermal-scale: linear-gradient(90deg, #0d1f5a, #3a1462, #9a2a73, #e8613f, #ffcf73);

	--gradient-brand: linear-gradient(135deg, var(--color-prime-blue), var(--color-tech-cyan));

	/* Type (design system §04) */
	--font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
	--font-tech: 'Space Grotesk', ui-monospace, 'Segoe UI', sans-serif;

	--text-display: clamp(2.75rem, 1.4rem + 5.2vw, 6.25rem);
	--text-h1: clamp(2.5rem, 5vw, 5rem);
	--text-h2: clamp(2rem, 1.2rem + 3vw, 4rem);
	--text-h3: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	--text-statement: clamp(1.75rem, 1rem + 2.9vw, 3.75rem);
	--text-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	--text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--text-small: 0.9375rem;
	--text-caption: 0.8125rem;
	--text-button: 1rem;

	--leading-tight: 1.04;
	--leading-heading: 1.12;
	--leading-body: 1.65;
	--tracking-display: -0.035em;
	--tracking-heading: -0.022em;
	--tracking-caps: 0.14em;

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-fluid-sm: clamp(1rem, 0.75rem + 1.1vw, 1.5rem);
	--space-fluid-md: clamp(1.5rem, 1rem + 2.2vw, 3rem);
	--space-fluid-lg: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	--space-fluid-xl: clamp(4.5rem, 2.5rem + 7vw, 9rem);
	--section-y: var(--space-fluid-xl);
	--gutter: clamp(1rem, 4vw, 3rem);

	/* Layout (§05) */
	--container-max: 1440px;
	--container-narrow: 46rem;
	--grid-gap: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
	--header-h: 4.25rem;
	--tap: 2.75rem;

	/* Shape (§06) */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(7 28 44 / 0.06);
	--shadow-md: 0 10px 30px -12px rgb(7 28 44 / 0.18);
	--shadow-lg: 0 40px 80px -32px rgb(0 0 0 / 0.55);

	/* Motion (§21) */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 160ms;
	--dur: 320ms;
	--dur-slow: 700ms;
}

@media (min-width: 64em) {
	:root { --header-h: 5rem; }
}

/* Surface themes. Components read these roles, never raw palette values. */
:root,
.theme-light {
	--surface: var(--color-white);
	--surface-2: var(--color-light-200);
	--ink-strong: var(--color-dark-900);
	--ink: var(--color-text);
	--ink-muted: var(--color-text-muted);
	--line: var(--color-border);
	--line-strong: #8a9bab;
	--accent: var(--color-prime-blue);
	--accent-hover: #0c5f93;
	--accent-ink: var(--color-white);
	--accent-soft: var(--color-light-300);
	--link: var(--color-prime-blue);
	--focus: var(--color-prime-blue);
	--error: var(--color-error);
}

.theme-tint {
	--surface: var(--color-light-300);
	--surface-2: var(--color-white);
	--ink-muted: var(--color-text);
	--line: rgb(13 49 72 / 0.14);
	--link: var(--color-dark-800);
	--accent-soft: var(--color-white);
}

.theme-dark {
	--surface: var(--color-dark-900);
	--surface-2: var(--color-dark-800);
	--ink-strong: var(--color-white);
	--ink: var(--color-light-300);
	--ink-muted: rgb(234 246 251 / 0.72);
	--line: rgb(234 246 251 / 0.14);
	--line-strong: rgb(234 246 251 / 0.42);
	--accent: var(--color-tech-cyan);
	--accent-hover: #5fd0e6;
	--accent-ink: var(--color-dark-900);
	--accent-soft: rgb(32 184 214 / 0.12);
	--link: var(--color-tech-cyan);
	--focus: var(--color-tech-cyan);
	--error: var(--color-error-on-dark);
}

.theme-light,
.theme-tint,
.theme-dark {
	background-color: var(--surface);
	color: var(--ink);
}

/* 2 Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--color-dark-900);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.site-main { display: block; background: var(--color-white); }
.site-main:focus { outline: none; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--ink-strong);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--color-tech-cyan); color: var(--color-dark-900); }

.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-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--color-tech-cyan);
	color: var(--color-dark-900);
	font-weight: 600;
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.icon { flex: none; width: 1.25em; height: 1.25em; }

/* 3 Layout ---------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

/* 4 Type helpers ------------------------------------------------------------ */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-4);
	color: var(--accent);
	font-family: var(--font-tech);
	font-size: var(--text-caption);
	font-weight: 500;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 1px;
	background: currentColor;
}
.eyebrow--plain::before { display: none; }

.section-title {
	font-size: var(--text-h2);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: var(--tracking-display);
}

.section-lead {
	max-width: 38rem;
	margin-top: var(--space-5);
	color: var(--ink-muted);
	font-size: var(--text-lead);
	line-height: 1.55;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--link);
	font-weight: 600;
	text-decoration: none;
}
.text-link .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease-out); }
.text-link:hover { text-decoration: underline; }
.text-link:hover .icon { transform: translateX(3px); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.tag {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-tech);
	font-size: var(--text-caption);
	letter-spacing: 0.02em;
}
.tag a { color: var(--link); }

/* 5 Buttons ------------------------------------------------------------------
   Shine: a single light sweep on hover/focus, never a loop. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.btn {
	--btn-bg: transparent;
	--btn-ink: var(--ink-strong);
	--btn-line: transparent;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: var(--tap);
	padding: 0.8rem 1.35rem;
	overflow: hidden;
	border: 1px solid var(--btn-line);
	border-radius: 10px;
	background: var(--btn-bg);
	color: var(--btn-ink);
	font-family: var(--font-display);
	font-size: var(--text-button);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.5) 48%, rgb(255 255 255 / 0.15) 54%, transparent 70%);
	transform: translateX(-110%);
	pointer-events: none;
}
.btn .icon { transition: transform var(--dur) var(--ease-out); }
.btn:hover { text-decoration: none; }

@media (hover: hover) {
	.btn:hover::after,
	.btn:focus-visible::after {
		transform: translateX(110%);
		transition: transform 900ms var(--ease-out);
	}
	.btn:hover .icon--arrow { transform: translateX(3px); }
}

.btn--primary {
	--btn-bg: var(--accent);
	--btn-ink: var(--accent-ink);
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 85%, transparent); }

.btn--ghost {
	--btn-line: var(--line-strong);
	--btn-ink: var(--ink-strong);
}
.btn--ghost::after { background: linear-gradient(105deg, transparent 30%, rgb(32 184 214 / 0.22) 50%, transparent 70%); }
.btn--ghost:hover { --btn-line: var(--accent); --btn-bg: var(--accent-soft); }

.btn--sm { min-height: 2.5rem; padding: 0.55rem 1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 3.25rem; padding: 0.95rem 1.6rem; }
.btn--block { width: 100%; }

/* 6 Header -------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding-top: 0.625rem;
	color: var(--color-light-300);
	pointer-events: none;
}
.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: var(--header-h);
	pointer-events: auto;
}
.site-header__bar::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--gutter) * 0.5);
	z-index: -1;
	border: 1px solid transparent;
	border-radius: 16px;
	transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled .site-header__bar::before,
.pld-inner .site-header .site-header__bar::before,
.site-header.is-open .site-header__bar::before {
	border-color: rgb(234 246 251 / 0.1);
	background: rgb(7 28 44 / 0.94);
	box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

.brand { display: inline-flex; flex: none; border-radius: 6px; }
.brand__img { width: auto; height: 2.25rem; }
.brand--footer .brand__img { height: 2.75rem; }
.brand--text { align-items: center; min-height: var(--tap); color: var(--color-white); font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
@media (min-width: 64em) {
	.brand__img { height: 2.6rem; }
}

.site-nav { display: none; margin-left: auto; }
.site-nav__list { display: flex; gap: 0.25rem; list-style: none; }
.site-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 0.85rem;
	color: rgb(234 246 251 / 0.82);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--dur-fast);
}
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.6rem;
	height: 1px;
	background: var(--color-tech-cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--color-white); }
.site-nav__list a:hover::after { transform: scaleX(1); }
.site-nav__list .sub-menu { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.site-header .btn--primary { --btn-bg: var(--color-tech-cyan); --btn-ink: var(--color-dark-900); --accent: var(--color-tech-cyan); --accent-hover: #5fd0e6; }
.site-header :focus-visible { outline-color: var(--color-tech-cyan); }

.header-phone {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
}
.header-phone .icon { color: var(--color-tech-cyan); }

.menu-toggle {
	display: inline-grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid rgb(234 246 251 / 0.2);
	border-radius: 10px;
	background: rgb(7 28 44 / 0.4);
	color: var(--color-white);
	cursor: pointer;
}
.menu-toggle .icon { grid-area: 1 / 1; width: 1.4rem; height: 1.4rem; }
.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.site-header__cta { display: none; }

@media (min-width: 40em) {
	.site-header__cta { display: inline-flex; }
}

@media (min-width: 64em) {
	.site-nav { display: block; }
	.site-header__actions { margin-left: var(--space-3); }
	.menu-toggle { display: none; }
}
@media (min-width: 80em) {
	.header-phone { display: inline-flex; }
}

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: -1;
	padding-top: calc(var(--header-h) + 2.5rem);
	overflow-y: auto;
	background: var(--color-dark-900);
	pointer-events: auto;
}
.mobile-menu:not([hidden]) { animation: menu-in var(--dur) var(--ease-out); }
.mobile-menu__list { list-style: none; border-top: 1px solid rgb(234 246 251 / 0.12); }
.mobile-menu__list li { border-bottom: 1px solid rgb(234 246 251 / 0.12); }
.mobile-menu__list a {
	display: flex;
	align-items: center;
	min-height: 3.75rem;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}
.mobile-menu__list .sub-menu { list-style: none; padding-bottom: 0.75rem; }
.mobile-menu__list .sub-menu li { border: 0; }
.mobile-menu__list .sub-menu a { min-height: 2.75rem; font-size: 1.0625rem; font-weight: 500; color: var(--color-light-300); }
.mobile-menu__actions { display: grid; gap: var(--space-3); padding-block: var(--space-6); }
.mobile-menu .btn--primary { --btn-bg: var(--color-tech-cyan); --btn-ink: var(--color-dark-900); }
.mobile-menu .btn--ghost { --btn-ink: var(--color-white); --btn-line: rgb(234 246 251 / 0.42); }
body.menu-open { overflow: hidden; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* 7 Hero ----------------------------------------------------------------------- */
.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(100svh, 62rem);
	padding-block: calc(var(--header-h) + var(--space-fluid-lg)) var(--space-fluid-lg);
	overflow: hidden;
	background:
		radial-gradient(60rem 40rem at 78% 42%, rgb(16 120 185 / 0.26), transparent 62%),
		radial-gradient(40rem 30rem at 8% 100%, rgb(32 184 214 / 0.1), transparent 70%),
		var(--color-dark-900);
}
.hero__backdrop { position: absolute; inset: 0; pointer-events: none; }
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(234 246 251 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(234 246 251 / 0.045) 1px, transparent 1px);
	background-size: 4.5rem 4.5rem;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 85%);
	mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 85%);
}
.hero__beam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgb(32 184 214 / 0.55), transparent);
	box-shadow: 0 0 24px 2px rgb(32 184 214 / 0.25);
	opacity: 0;
	animation: hero-beam 2.6s var(--ease-in-out) 0.2s both;
}
.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	opacity: 0.38;
}
.hero--photo .hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-dark-900) 15%, rgb(7 28 44 / 0.75) 50%, rgb(7 28 44 / 0.35));
}

.hero__inner {
	position: relative;
	display: grid;
	gap: var(--space-fluid-lg);
	align-items: center;
}
@media (min-width: 64em) {
	.hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.hero__eyebrow { color: var(--color-tech-cyan); }
.hero__eyebrow::before { display: none; }
.eyebrow__mark {
	position: relative;
	width: 0.75rem;
	height: 0.75rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}
.eyebrow__mark::after {
	content: "";
	position: absolute;
	inset: 2.5px;
	border-radius: 50%;
	background: currentColor;
}

.hero__title {
	max-width: 13ch;
	font-size: var(--text-display);
	font-weight: 800;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
}
.hero__title .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.05em; padding-bottom: 0.18em; margin-bottom: -0.18em; vertical-align: top; }
.hero__title .w > span { display: inline-block; }
.hero__title .w--accent > span {
	background: linear-gradient(100deg, var(--color-white) 0%, #9fe4f2 55%, var(--color-tech-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lead {
	max-width: 36rem;
	margin-top: var(--space-fluid-sm);
	color: rgb(234 246 251 / 0.8);
	font-size: var(--text-lead);
	line-height: 1.6;
}
.hero__actions { margin-top: var(--space-fluid-md); }
.hero__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-fluid-md);
	color: rgb(234 246 251 / 0.72);
	font-family: var(--font-tech);
	font-size: var(--text-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hero__meta .icon { color: var(--color-tech-cyan); }

/* Entrance sequence (CSS only, runs once on load) */
.hero__eyebrow,
.hero__lead,
.hero__actions,
.hero__meta,
.hero__visual { animation: rise 1s var(--ease-out) both; }
.hero__eyebrow { animation-delay: 0.1s; }
.hero__title .w > span { animation: word-up 1.1s var(--ease-out) both; animation-delay: calc(0.18s + var(--i, 0) * 0.08s); }
.hero__lead { animation-delay: 0.55s; }
.hero__actions { animation-delay: 0.68s; }
.hero__meta { animation-delay: 0.8s; }
.hero__visual { animation: visual-in 1.4s var(--ease-out) 0.3s both; }

@keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes word-up { from { transform: translateY(105%); } }
@keyframes visual-in { from { opacity: 0; transform: translateY(1.5rem) scale(0.97); clip-path: inset(12% 0 12% 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@keyframes hero-beam { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	display: none;
	width: var(--tap);
	height: 3.5rem;
	transform: translateX(-50%);
}
.scroll-cue__line {
	position: absolute;
	left: 50%;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: rgb(234 246 251 / 0.2);
	overflow: hidden;
}
.scroll-cue__line::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 40%;
	background: var(--color-tech-cyan);
	animation: cue 2.2s var(--ease-in-out) 1.8s infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@media (min-width: 64em) and (min-height: 44em) {
	.scroll-cue { display: block; }
}

/* Viewfinder */
@property --scan {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 100%;
}

.hero__visual { position: relative; }
.hero__visual::before {
	content: "";
	position: absolute;
	inset: 12% 8%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(32 184 214 / 0.22), transparent);
	filter: blur(30px);
}

.viewfinder {
	position: relative;
	width: min(100%, 34rem);
	margin: 0 auto;
	padding: 0.625rem;
	border: 1px solid rgb(234 246 251 / 0.12);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgb(234 246 251 / 0.09), rgb(234 246 251 / 0.02));
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
@media (max-width: 63.99em) {
	.viewfinder { width: min(100%, 30rem); }
}
.viewfinder__screen {
	--scan: 100%;
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: 16px;
	background: #0c273a;
	animation: vf-scan 3.4s var(--ease-in-out) 1.1s both;
}
@media (max-width: 39.99em) {
	.viewfinder__screen { aspect-ratio: 1 / 1; }
	/* Square crop trims 60 units top and bottom of the 600x720 artwork. */
	.vf-reticle { --y: 42% !important; }
	.vf-tag--stain { --y: 88% !important; }
	.vf-scale { display: none; }
	.process-step__visual { aspect-ratio: 16 / 9; }
	.pv { width: auto; height: 88%; }
}
.viewfinder__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Rasterise the blurred infrared art once; the scan only changes its clip. */
.viewfinder__thermal .viewfinder__layer { transform: translateZ(0); }
.viewfinder__thermal {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--scan)) 0 0);
}
.viewfinder__scan {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--scan);
	width: 2px;
	margin-left: -1px;
	background: #bdf3ff;
	box-shadow: 0 0 16px 3px rgb(32 184 214 / 0.75);
	opacity: 0;
	animation: vf-beam 3.4s linear 1.1s both;
}
.viewfinder__scan::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 2px;
	width: 7rem;
	background: linear-gradient(90deg, transparent, rgb(32 184 214 / 0.16));
}
@keyframes vf-scan { from { --scan: 0%; } to { --scan: 100%; } }
@keyframes vf-beam { 0% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }

.viewfinder__hud { position: absolute; inset: 0; color: var(--color-white); font-family: var(--font-tech); }
.vf-corner { position: absolute; width: 1.25rem; height: 1.25rem; border: 0 solid rgb(234 246 251 / 0.75); }
.vf-corner--tl { top: 0.875rem; left: 0.875rem; border-width: 2px 0 0 2px; border-top-left-radius: 4px; }
.vf-corner--tr { top: 0.875rem; right: 0.875rem; border-width: 2px 2px 0 0; border-top-right-radius: 4px; }
.vf-corner--bl { bottom: 0.875rem; left: 0.875rem; border-width: 0 0 2px 2px; border-bottom-left-radius: 4px; }
.vf-corner--br { bottom: 0.875rem; right: 0.875rem; border-width: 0 2px 2px 0; border-bottom-right-radius: 4px; }

.vf-status {
	position: absolute;
	top: 1.25rem;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.65rem 0.3rem 0.3rem;
	border: 1px solid rgb(234 246 251 / 0.16);
	border-radius: var(--radius-pill);
	background: rgb(7 28 44 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}
.vf-chip {
	padding: 0.15rem 0.45rem;
	border-radius: var(--radius-pill);
	background: var(--color-tech-cyan);
	color: var(--color-dark-900);
	font-weight: 500;
}
.vf-state { display: grid; }
.vf-state > span { grid-area: 1 / 1; }
.vf-state__scan { animation: hide-after 0.3s linear 4.4s both; }
.vf-state__found { color: #bdf3ff; animation: show-after 0.4s var(--ease-out) 4.5s both; }
.vf-state__scan::after { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-left: 0.4rem; border-radius: 50%; background: var(--color-tech-cyan); vertical-align: middle; animation: blink 0.9s steps(2, jump-none) infinite; }
@keyframes hide-after { to { opacity: 0; visibility: hidden; } }
@keyframes show-after { from { opacity: 0; transform: translateY(4px); } }
@keyframes blink { 50% { opacity: 0.2; } }

.vf-reticle {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 4.25rem;
	height: 4.25rem;
	transform: translate(-50%, -50%);
	animation: lock 0.8s var(--ease-out) 4.3s both;
}
.vf-reticle::before,
.vf-reticle::after {
	content: "";
	position: absolute;
	background: var(--color-white);
}
.vf-reticle::before { left: 50%; top: -0.6rem; bottom: -0.6rem; width: 1.5px; margin-left: -0.75px; -webkit-mask: linear-gradient(#000 0 0.9rem, transparent 0.9rem calc(100% - 0.9rem), #000 0) ; mask: linear-gradient(#000 0 0.9rem, transparent 0.9rem calc(100% - 0.9rem), #000 0); }
.vf-reticle::after { top: 50%; left: -0.6rem; right: -0.6rem; height: 1.5px; margin-top: -0.75px; -webkit-mask: linear-gradient(90deg, #000 0 0.9rem, transparent 0.9rem calc(100% - 0.9rem), #000 0); mask: linear-gradient(90deg, #000 0 0.9rem, transparent 0.9rem calc(100% - 0.9rem), #000 0); }
.vf-reticle__ring {
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--color-white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(7 28 44 / 0.35), 0 0 22px rgb(32 184 214 / 0.55);
}
.vf-reticle__ring::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--color-tech-cyan);
	border-radius: 50%;
	animation: ripple 3.2s var(--ease-out) 5.2s infinite;
	opacity: 0;
}
@keyframes lock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(45deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ripple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

.vf-tag {
	position: absolute;
	padding: 0.25rem 0.55rem;
	border: 1px solid rgb(234 246 251 / 0.35);
	border-radius: 6px;
	background: rgb(7 28 44 / 0.8);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.vf-tag--source {
	left: calc(100% + 0.75rem);
	top: 50%;
	border-color: var(--color-tech-cyan);
	color: #bdf3ff;
	transform: translateY(-50%);
	animation: show-after 0.5s var(--ease-out) 4.9s both;
}
.vf-tag--stain {
	left: var(--x);
	top: var(--y);
	color: rgb(234 246 251 / 0.85);
	transform: translate(-50%, -50%);
	animation: show-after 0.5s var(--ease-out) 5.3s both;
}
.vf-scale {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgb(234 246 251 / 0.8);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	animation: show-after 0.5s var(--ease-out) 4.6s both;
}
.vf-scale i { width: 4.5rem; height: 0.375rem; border-radius: 4px; background: var(--thermal-scale); }

/* 8 Intro ------------------------------------------------------------------------ */
.intro { padding-block: var(--section-y) calc(var(--section-y) * 0.6); }
.intro__grid { display: grid; gap: var(--space-fluid-md); }
.intro__statement {
	max-width: 22ch;
	color: var(--ink-strong);
	font-family: var(--font-display);
	font-size: var(--text-statement);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: var(--tracking-heading);
}
.intro__side { display: grid; gap: var(--space-4); max-width: 34rem; }
.intro__kicker {
	color: var(--ink-strong);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.intro__kicker::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: var(--space-4);
	background: var(--gradient-brand);
}
.intro__body { color: var(--ink); }
@media (min-width: 64em) {
	.intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
	.intro__statement { grid-column: 1 / span 8; }
	.intro__side { grid-column: 9 / span 4; }
}

/* 9 Services ------------------------------------------------------------------ */
.services { padding-block: calc(var(--section-y) * 0.6) var(--section-y); }
.services__grid { display: grid; gap: var(--space-fluid-lg); }
.services__note { max-width: 30rem; margin-top: var(--space-6); color: var(--ink-muted); font-size: var(--text-small); }
.services__note .text-link { margin-top: var(--space-3); display: flex; width: fit-content; }
@media (min-width: 64em) {
	.services__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
	.services__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 3rem); }
	.service-list { grid-column: 7 / span 6; }
}

.service-list { list-style: none; border-bottom: 1px solid var(--line); }
.service__inner {
	position: relative;
	display: grid;
	grid-template-columns: 2rem 3rem minmax(0, 1fr) auto;
	gap: 0 var(--space-4);
	align-items: start;
	padding-block: var(--space-6);
	border-top: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
}
.service__index {
	padding-top: 0.75rem;
	color: var(--ink-muted);
	font-family: var(--font-tech);
	font-size: var(--text-caption);
	letter-spacing: 0.06em;
}
.service__glyph {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background: var(--color-light-300);
	color: var(--color-prime-blue);
	transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.service__glyph .icon { width: 1.5rem; height: 1.5rem; }
.service__body { display: grid; gap: 0.4rem; }
.service__title { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.02em; }
.service__text { color: var(--ink-muted); max-width: 34rem; }
.service__go {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: 0.25rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink-strong);
	transition: all var(--dur) var(--ease-out);
}
.service__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--color-prime-blue), var(--color-tech-cyan), transparent);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}
.service.is-visible .service__scan { animation: scanline 1.4s var(--ease-out) calc(var(--reveal-index, 0) * 90ms + 0.2s) both; }
@keyframes scanline { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

a.service__inner:hover .service__title { color: var(--accent); }
a.service__inner:hover .service__glyph { background: var(--color-prime-blue); color: var(--color-white); }
a.service__inner:hover .service__go { border-color: var(--accent); background: var(--accent); color: var(--color-white); transform: rotate(-45deg); }
a.service__inner:hover .service__scan { transform: scaleX(1); transition: transform 600ms var(--ease-out); opacity: 1; animation: none; }

@media (max-width: 39.99em) {
	.service__inner { grid-template-columns: 3rem minmax(0, 1fr) auto; }
	.service__index { display: none; }
}

/* 10 Story: "The stain is not the source." ------------------------------------
   Static by default (finished scene, all paragraphs). leak-reveal.js adds
   .is-live on large screens with motion allowed: the section grows tall, the
   stage pins, and scroll position drives the scene. */
.story { position: relative; background: radial-gradient(70rem 40rem at 70% 50%, rgb(16 120 185 / 0.18), transparent 70%), var(--color-dark-900); }
.story__sticky { padding-block: var(--section-y); }
.story__grid { display: grid; gap: var(--space-fluid-md); align-items: center; }
.story__steps { display: grid; gap: var(--space-4); margin-top: var(--space-6); list-style: none; }
.story__step p { max-width: 34rem; color: var(--ink); font-size: var(--text-lead); line-height: 1.55; }
.story__step:last-child p { color: var(--ink-strong); }
.story__progress { display: none; }
.story__stage { margin: 0; }
.leak-scene { width: 100%; height: auto; overflow: hidden; border-radius: var(--radius-lg); }
.story__legend ol {
	display: grid;
	gap: 0.5rem;
	margin-top: var(--space-5);
	padding: 0;
	list-style: none;
	counter-reset: legend;
	font-family: var(--font-tech);
	font-size: var(--text-small);
	color: var(--ink);
}
.story__legend li { display: flex; align-items: center; gap: 0.75rem; counter-increment: legend; }
.story__legend li::before {
	content: counter(legend);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1.5px solid var(--color-tech-cyan);
	border-radius: 50%;
	color: var(--color-tech-cyan);
	font-size: 0.8125rem;
}

.ls-text { fill: var(--color-light-300); font-family: var(--font-tech); font-size: 19px; letter-spacing: 0.02em; }
.ls-text { paint-order: stroke; stroke: var(--color-dark-900); stroke-width: 6px; stroke-linejoin: round; }
.ls-text--end { text-anchor: end; }
.ls-num { r: 15px; fill: var(--color-dark-900); stroke: var(--color-tech-cyan); stroke-width: 1.5; }
.ls-num-text { fill: var(--color-tech-cyan); font-family: var(--font-tech); font-size: 15px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.ls-surface { opacity: 0.14; }
.ls-beam { display: none; }

@media (max-width: 63.99em) {
	.ls-text, .ls-label path { display: none; }
	.ls-num { r: 26px; stroke-width: 3; }
	.ls-num-text { font-size: 26px; }
}
@media (min-width: 64em) {
	.story__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.story__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Live (scroll-driven) mode */
.story.is-live { height: 400vh; }
.story.is-live .story__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100vh;
	height: 100svh;
	padding-block: calc(var(--header-h) + 1rem) 2rem;
	overflow: hidden;
}
.story.is-live .story__steps { display: grid; grid-template-areas: "s"; }
.story.is-live .story__step {
	grid-area: s;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
	pointer-events: none;
}
.story.is-live .story__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story.is-live .story__step.is-active p { color: var(--ink-strong); }
.story.is-live .story__progress { display: flex; gap: 0.5rem; margin-top: var(--space-7); }
.story__progress span {
	position: relative;
	width: 3rem;
	height: 2px;
	overflow: hidden;
	background: rgb(234 246 251 / 0.18);
}
.story__progress span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-tech-cyan);
	transform: scaleX(var(--fill, 0));
	transform-origin: left;
}
.story.is-live .leak-scene { max-height: calc(100svh - var(--header-h) - 4rem); }
.story.is-live .ls-beam { display: inline; }
.story.is-live .ls-drop { animation: drip 1.6s ease-in infinite; }
.story.is-live .ls-drop--2 { animation-delay: 0.8s; }
@keyframes drip { 0% { transform: translateY(-8px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }

/* 11 Process ---------------------------------------------------------------- */
.process { padding-block: var(--section-y); }
.process__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-fluid-lg); }
.process__head .section-lead { margin-top: 0; }
@media (min-width: 64em) {
	.process__head { grid-template-columns: 1fr 1fr; align-items: end; }
}
.process__rail { position: relative; display: none; height: 2px; margin-bottom: var(--space-6); background: var(--line); }
.process__rail-fill { position: absolute; inset: 0; background: var(--gradient-brand); transform: scaleX(var(--progress, 1)); transform-origin: left; }
.process__steps { display: grid; gap: var(--space-fluid-md) var(--grid-gap); list-style: none; }
@media (min-width: 40em) {
	.process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.process__rail { display: block; }
	.process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.process-step__visual {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-5);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	color: #8a9bab;
	transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.process-step__photo { width: 100%; height: 100%; object-fit: cover; }
.pv { width: 88%; height: auto; }
.pv-faint { stroke-opacity: 0.45; }
.pv-soft { fill: var(--color-light-200); stroke-opacity: 0.35; }
.pv-accent-stroke { stroke: var(--color-prime-blue); }
.pv-accent-fill { fill: var(--color-prime-blue); stroke: none; }
.pv-zone { fill: rgb(32 184 214 / 0.08); stroke: var(--color-tech-cyan); stroke-dasharray: 5 6; opacity: 0.35; }
.pv-zone--3 { fill: rgb(16 120 185 / 0.14); stroke: var(--color-prime-blue); stroke-dasharray: none; opacity: 1; }
.pv-waves circle { stroke: var(--color-prime-blue); }
.pv-waves circle:nth-child(2) { opacity: 0.6; }
.pv-waves circle:nth-child(3) { opacity: 0.3; }
.pv-needle { transform-origin: 200px 150px; transform: rotate(38deg); }

.process-step__num { color: var(--ink-muted); font-family: var(--font-tech); font-size: var(--text-caption); letter-spacing: 0.1em; transition: color var(--dur); }
.process-step__title { margin-top: var(--space-2); font-size: var(--text-h3); font-weight: 800; }
.process-step__text { margin-top: var(--space-3); color: var(--ink); max-width: 30rem; }

.process-step.is-active .process-step__visual { border-color: rgb(16 120 185 / 0.45); box-shadow: var(--shadow-md); }
.process-step.is-active .process-step__num { color: var(--color-prime-blue); }
.process-step.is-active .pv-needle { animation: needle 4s var(--ease-in-out) infinite alternate; }
.process-step.is-active .pv-flow { animation: blink 1.2s ease-in-out infinite; }
.process-step.is-active .pv-zone--1 { animation: zone 3.6s var(--ease-out) both; }
.process-step.is-active .pv-zone--2 { animation: zone 3.6s var(--ease-out) 0.5s both; }
.process-step.is-active .pv-zone--3 { animation: zone-final 3.6s var(--ease-out) 1s both; }
.process-step.is-active .pv-waves circle { animation: wave 2.4s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.process-step.is-active .pv-waves circle:nth-child(2) { animation-delay: 0.4s; }
.process-step.is-active .pv-waves circle:nth-child(3) { animation-delay: 0.8s; }
.process-step.is-active .pv-lock { animation: pv-lock 1.1s var(--ease-out) both; transform-origin: 228px 150px; }
.process-step.is-active .pv-check { stroke-dasharray: 60; animation: draw 0.9s var(--ease-out) 0.3s both; }
@keyframes needle { from { transform: rotate(-20deg); } to { transform: rotate(60deg); } }
@keyframes zone { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes zone-final { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 1; transform: none; } }
@keyframes wave { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes pv-lock { from { transform: scale(1.8) rotate(30deg); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 60; } }
.pv-zone--3 { transform-box: fill-box; transform-origin: center; }

/* 12 Local causes ---------------------------------------------------------- */
.local { padding-block: var(--section-y); }
.local__grid { display: grid; gap: var(--space-fluid-md); }
.local__body { display: grid; gap: var(--space-5); align-content: start; }
.local__body > p { color: var(--ink); font-size: var(--text-lead); line-height: 1.6; }
.local__body .tag-list { margin-top: var(--space-3); }
@media (min-width: 64em) {
	.local__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
	.local__head { grid-column: 1 / span 5; }
	.local__body { grid-column: 7 / span 6; padding-top: var(--space-3); }
}

/* 13 Areas ------------------------------------------------------------------ */
.areas {
	padding-block: var(--section-y);
	background:
		radial-gradient(50rem 30rem at 10% 0%, rgb(16 120 185 / 0.2), transparent 70%),
		var(--color-dark-900);
}
.areas__head { margin-bottom: var(--space-fluid-lg); max-width: 52rem; }
.offices { display: grid; gap: var(--grid-gap); }
@media (min-width: 64em) {
	.offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.office {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgb(13 49 72 / 0.85), rgb(13 49 72 / 0.45));
}
.office__map {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 46%, rgb(32 184 214 / 0.22), transparent 28%),
		linear-gradient(rgb(234 246 251 / 0.06) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		linear-gradient(90deg, rgb(234 246 251 / 0.06) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		var(--color-dark-800);
}
.office__map-art { position: absolute; inset: 0; display: grid; place-items: center; }
.office__map-art::before,
.office__map-art::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 9rem;
	height: 9rem;
	border: 1px solid rgb(32 184 214 / 0.35);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.office__map-art::after { width: 4.5rem; height: 4.5rem; border-color: rgb(32 184 214 / 0.6); }
.office__pin { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 8%; border-radius: 50%; background: var(--color-tech-cyan); color: var(--color-dark-900); box-shadow: 0 0 0 6px rgb(32 184 214 / 0.18); }
.office__map-actions { position: absolute; left: var(--space-4); bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.office__map-actions .btn { background: rgb(7 28 44 / 0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.office__map.is-loaded .office__map-art,
.office__map.is-loaded [data-map-load] { display: none; }
.office__body { display: grid; gap: var(--space-4); padding: var(--space-fluid-md); }
.office__region { color: var(--accent); font-family: var(--font-tech); font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.office__name { font-size: var(--text-h3); font-weight: 800; margin-top: calc(var(--space-2) * -1); }
.office__facts { display: grid; gap: var(--space-3); list-style: none; }
.office__facts li { display: flex; align-items: flex-start; gap: 0.75rem; }
.office__facts .icon { margin-top: 0.2em; color: var(--accent); }
.office__facts a { color: var(--ink-strong); font-weight: 600; text-decoration: none; }
.office__facts a:hover { text-decoration: underline; }
.office__areas-lead { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--text-small); }
.tag-list--dark .tag { background: rgb(7 28 44 / 0.5); }
.office__tail { color: var(--ink-muted); font-size: var(--text-small); }
.office__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }

/* 14 FAQ --------------------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq__grid { display: grid; gap: var(--space-fluid-md); }
@media (min-width: 64em) {
	.faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
	.faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 3rem); }
	.accordion { grid-column: 6 / span 7; }
}
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: var(--tap);
	padding-block: var(--space-5);
	cursor: pointer;
	list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline-offset: 2px; }
.accordion__q { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); font-weight: 700; letter-spacing: -0.015em; transition: color var(--dur-fast); }
.accordion__summary:hover .accordion__q { color: var(--accent); }
.accordion__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink-strong);
	transition: transform var(--dur) var(--ease-out), background-color var(--dur), color var(--dur), border-color var(--dur);
}
.accordion__item[open] .accordion__icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.accordion__panel { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); max-width: 44rem; overflow: hidden; }
.accordion__panel p { color: var(--ink); }

/* 15 Request form ------------------------------------------------------------- */
.request { position: relative; overflow: hidden; padding-block: var(--section-y); }
.request__glow {
	position: absolute;
	right: -20rem;
	bottom: -24rem;
	width: 60rem;
	height: 60rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(32 184 214 / 0.18), transparent);
	pointer-events: none;
}
.request__grid { position: relative; display: grid; gap: var(--space-fluid-lg); }
@media (min-width: 64em) {
	.request__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
	.request__intro { grid-column: 1 / span 5; }
	.request-form { grid-column: 7 / span 6; }
}
.request__title { font-size: var(--text-h2); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.04; }
.request__lead { margin-top: var(--space-5); color: var(--ink-muted); font-size: var(--text-lead); }
.request__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
	color: var(--ink-strong);
	text-decoration: none;
}
.request__phone .icon { width: 3rem; height: 3rem; padding: 0.8rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.request__phone span { display: grid; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; }
.request__phone small { color: var(--ink-muted); font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; }
.request__tip {
	max-width: 30rem;
	margin-top: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-left: 2px solid var(--color-tech-cyan);
	background: rgb(234 246 251 / 0.04);
	color: var(--ink);
	font-size: var(--text-small);
}

.request-form {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-fluid-md);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgb(13 49 72 / 0.8), rgb(13 49 72 / 0.4));
	box-shadow: var(--shadow-lg);
}
.field { display: grid; gap: 0.4rem; }
.field label { color: var(--ink-strong); font-size: var(--text-small); font-weight: 600; }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40em) {
	.field-row { grid-template-columns: 1fr 1fr; }
}
.field-hint { margin-top: -0.5rem; color: var(--ink-muted); font-size: var(--text-caption); }
.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: rgb(7 28 44 / 0.6);
	color: var(--ink-strong);
	font: inherit;
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--color-dark-900); color: var(--color-white); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field ::placeholder { color: rgb(234 246 251 / 0.5); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--color-tech-cyan); box-shadow: 0 0 0 3px rgb(32 184 214 / 0.25); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: var(--text-caption); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-small); }
.form-note--success { border: 1px solid rgb(21 153 87 / 0.6); background: rgb(21 153 87 / 0.14); color: #c9f2dc; }
.form-note--error { border: 1px solid rgb(255 156 147 / 0.5); background: rgb(180 35 24 / 0.18); color: #ffd6d2; }
.request-form .btn { margin-top: var(--space-2); }

/* 16 Footer + CTA band -------------------------------------------------------- */
.cta-band { padding-block: var(--space-fluid-lg); border-top: 1px solid var(--line); background: radial-gradient(40rem 20rem at 85% 50%, rgb(32 184 214 / 0.14), transparent 70%), var(--color-dark-900); }
.cta-band__inner { display: grid; gap: var(--space-5); align-items: center; }
.cta-band__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: var(--tracking-display); }
.cta-band__text { margin-top: var(--space-2); color: var(--ink-muted); }
@media (min-width: 64em) {
	.cta-band__inner { grid-template-columns: 1fr auto; }
}

.site-footer { padding-block: var(--space-fluid-lg) var(--space-6); border-top: 1px solid var(--line); font-size: var(--text-small); }
.site-footer__grid { display: grid; gap: var(--space-7) var(--grid-gap); }
@media (min-width: 40em) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.site-footer__grid { grid-template-columns: 4fr 2.5fr 2.5fr 2fr; }
}
.site-footer__brand p { max-width: 22rem; margin-top: var(--space-5); color: var(--ink-muted); }
.site-footer__contact { display: grid; gap: var(--space-2); margin-top: var(--space-5); list-style: none; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; color: var(--ink-strong); font-weight: 600; text-decoration: none; }
.site-footer__contact .icon { color: var(--accent); }
.site-footer__heading { margin-bottom: var(--space-4); color: var(--ink-muted); font-family: var(--font-tech); font-size: var(--text-caption); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.site-footer address { color: var(--ink); line-height: 1.6; }
.site-footer__meta { margin-top: var(--space-2); color: var(--ink-muted); }
.site-footer__links { display: grid; gap: 0.25rem; list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ink); text-decoration: none; }
.site-footer__links a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-fluid-lg); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-muted); }
.site-footer__base a { color: var(--ink-muted); }

/* 17 Inner pages + prose ---------------------------------------------------------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--header-h) + var(--space-fluid-lg)) var(--space-fluid-lg);
	background: radial-gradient(50rem 26rem at 80% 0%, rgb(16 120 185 / 0.28), transparent 70%), var(--color-dark-900);
}
.page-hero__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgb(234 246 251 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(234 246 251 / 0.04) 1px, transparent 1px);
	background-size: 4.5rem 4.5rem;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
	mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.page-hero__inner { position: relative; }
.page-hero__title { max-width: 18ch; font-size: var(--text-h1); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.05; }
.page-hero__lead { max-width: 40rem; margin-top: var(--space-5); color: var(--ink-muted); font-size: var(--text-lead); }
.page-hero .btn-row { margin-top: var(--space-6); }
.page-hero--404 { min-height: 70vh; display: grid; align-items: center; }

.page-body { padding-block: var(--space-fluid-lg) var(--section-y); background: var(--color-white); color: var(--color-text); }

.prose { color: var(--ink); }
.prose > * + * { margin-top: 1.25em; }
.prose > h2 { margin-top: 2em; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: var(--tracking-display); }
.prose > h3 { margin-top: 1.75em; font-size: var(--text-h3); }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.75em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--color-prime-blue); }
.prose blockquote { margin-inline: 0; padding-left: var(--space-5); border-left: 2px solid var(--color-tech-cyan); color: var(--ink-strong); font-family: var(--font-display); font-size: 1.25rem; }
.prose img, .prose .wp-block-image img { border-radius: var(--radius-md); }
.prose figcaption { margin-top: 0.5rem; color: var(--ink-muted); font-size: var(--text-caption); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.prose th, .prose td { padding: 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--ink-strong); }
.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0.8rem 1.35rem;
	border-radius: 10px;
	background: var(--color-prime-blue);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--accent-hover); }
.prose .is-style-outline .wp-block-button__link { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-strong); }
.prose details { border-bottom: 1px solid var(--line); padding-block: var(--space-4); }
.prose summary { color: var(--ink-strong); font-weight: 700; cursor: pointer; }
.prose--wide > * { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.prose--wide > .alignwide { max-width: 75rem; }
.prose--wide > .alignfull { max-width: none; padding-inline: 0; }
.prose--wide > .alignfull > * { max-width: var(--container-max); margin-inline: auto; }
.prose .has-background { padding: var(--space-fluid-md); border-radius: var(--radius-lg); }
.prose .alignfull.has-background { border-radius: 0; }

.post-grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 40em) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--color-white); transition: box-shadow var(--dur), border-color var(--dur); }
.post-card:hover { border-color: rgb(16 120 185 / 0.4); box-shadow: var(--shadow-md); }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.post-card__date { color: var(--ink-muted); font-family: var(--font-tech); font-size: var(--text-caption); }
.post-card__title { font-size: 1.25rem; }
.post-card__title a { color: var(--ink-strong); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt { color: var(--ink); font-size: var(--text-small); }
.pagination { margin-top: var(--space-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-numbers { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding-inline: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-strong); text-decoration: none; }
.page-numbers.current { background: var(--color-prime-blue); border-color: var(--color-prime-blue); color: var(--color-white); }

/* 18 Reveal motion ----------------------------------------------------------------
   Only when JS is running (html.js) so content is never hidden without it. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
	transition-delay: calc(var(--reveal-index, 0) * 80ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="text"] { opacity: 1; transform: none; }
.reveal-word { transition: opacity 0.6s var(--ease-out), color 0.6s var(--ease-out); }
.js [data-reveal="text"]:not(.is-visible) .reveal-word { opacity: 0.16; }
.js [data-reveal="text"].is-visible .reveal-word { transition-delay: calc(var(--i, 0) * 45ms); }

/* 19 Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
	.viewfinder__screen { --scan: 100%; animation: none; }
	.viewfinder__scan, .hero__beam, .scroll-cue__line::after, .vf-reticle__ring::after, .vf-state__scan::after { display: none; }
	.js [data-reveal], .js [data-reveal="text"] .reveal-word { opacity: 1 !important; transform: none !important; }
}