/*
Theme Name: SeisVantage
Theme URI: https://www.seisvantage.com
Author: SeisVantage
Author URI: https://www.seisvantage.com
Description: A production-grade, mobile-first B2B theme for SeisVantage — near-surface research and the Sanitas seismic statics system. Classic PHP templates with full Gutenberg support, native CSS and vanilla JavaScript, no required plugins, no external asset hosts. English-first with translation-ready strings.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seisvantage
Tags: business, technology, geoscience, energy, custom-logo, featured-images, full-width-template, translation-ready, block-styles
*/

/* =============================================================================
   SEISVANTAGE — DESIGN SYSTEM
   -----------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout: container, section, grid
   5.  Links & buttons
   6.  Site header & navigation      (expanded in phase 3)
   7.  Hero
   8.  Editorial & component patterns
   9.  Figures & media
   10. Forms
   11. Site footer
   12. Motion & scroll reveal
   13. Accessibility helpers
   14. Block editor / WordPress core classes
   15. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================== */
:root {
	/* --- Brand palette (exact values, do not drift) --- */
	--sv-navy-deep:   #091D33;
	--sv-navy:        #0E2A47;
	--sv-blue:        #1A5CB0;
	--sv-gold:        #F2B01E;
	--sv-teal:        #249F9D;
	--sv-slate:       #5B6673;
	--sv-off-white:   #F4F7FC;
	--sv-white:       #FFFFFF;

	/* --- Derived tints & shades (hover, borders, washes) --- */
	--sv-navy-900:    #061423;
	--sv-navy-700:    #12365C;
	--sv-blue-700:    #14498B;
	--sv-blue-300:    #6E9BD6;
	--sv-blue-100:    #E4EDF9;
	--sv-blue-050:    #F0F5FC;
	--sv-gold-700:    #B07D10;
	--sv-gold-100:    #FDF1D6;
	--sv-teal-ink:    #17706E;  /* AA-safe teal for text on light backgrounds */
	--sv-teal-100:    #E2F4F3;

	/* --- Text roles --- */
	--sv-text:        #2A3542;  /* body copy on light — 9.2:1 on white       */
	--sv-text-muted:  var(--sv-slate);  /* secondary copy — 5.8:1 on white   */
	--sv-text-invert: #FFFFFF;
	--sv-text-invert-muted: #B9C6D6;    /* secondary copy on navy — 8.4:1    */

	/* --- Surfaces & lines --- */
	--sv-surface:      var(--sv-white);
	--sv-surface-alt:  var(--sv-off-white);
	--sv-surface-dark: var(--sv-navy-deep);
	--sv-line:         #DDE3EA;
	--sv-line-strong:  #C3CCD7;
	--sv-line-invert:  rgba(255, 255, 255, 0.16);

	/* --- Layout --- */
	--sv-content:  1200px;
	--sv-narrow:   62ch;      /* reading measure, not a pixel width */
	--sv-gutter:   clamp(1.25rem, 4vw, 2.5rem);
	--sv-header-h: 76px;

	/* --- Radii (16 / 20 / 24 per brand spec) --- */
	--sv-r-sm: 10px;
	--sv-r-md: 16px;
	--sv-r-lg: 20px;
	--sv-r-xl: 24px;
	--sv-r-pill: 999px;

	/* --- Elevation — restrained, never glossy --- */
	--sv-shadow-sm: 0 1px 2px rgba(9, 29, 51, 0.06), 0 2px 8px rgba(9, 29, 51, 0.05);
	--sv-shadow-md: 0 2px 6px rgba(9, 29, 51, 0.07), 0 12px 28px rgba(9, 29, 51, 0.08);
	--sv-shadow-lg: 0 4px 12px rgba(9, 29, 51, 0.08), 0 24px 56px rgba(9, 29, 51, 0.12);

	/* --- Fluid type scale --- */
	--sv-fs-display: clamp(2.25rem, 1.42rem + 3.55vw, 3.75rem);   /* 36 → 60 */
	--sv-fs-h1:      clamp(2.125rem, 1.62rem + 2.16vw, 3.125rem); /* 34 → 50 */
	--sv-fs-h2:      clamp(1.8125rem, 1.62rem + 0.83vw, 2.375rem);/* 29 → 38 */
	--sv-fs-h3:      clamp(1.25rem, 1.16rem + 0.39vw, 1.5rem);    /* 20 → 24 */
	--sv-fs-h4:      clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);  /* 17 → 19 */
	--sv-fs-lead:    clamp(1.0625rem, 1rem + 0.26vw, 1.25rem);    /* 17 → 20 */
	--sv-fs-body:    clamp(1rem, 0.98rem + 0.12vw, 1.0625rem);    /* 16 → 17 */
	--sv-fs-sm:      0.9375rem;
	--sv-fs-xs:      0.875rem;
	--sv-fs-caption: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14 → 15 */
	--sv-fs-subhead: clamp(1.0625rem, 1rem + 0.26vw, 1.25rem);   /* 17 → 20 */
	--sv-fs-eyebrow: 0.8125rem;

	/* --- Type families: system stacks only, zero network requests --- */
	--sv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
	           Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
	--sv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	                "Liberation Mono", monospace;
	--sv-font-serif: Georgia, "Times New Roman", "Songti SC", serif;

	/*
	 * --- Rhythm ---
	 * Three deliberate steps rather than one padding applied everywhere.
	 * `section` resolves to 48px at 390, ~57px at 768 and ~79px at 1440.
	 * `tight` couples modules that belong together; `loose` is reserved for
	 * the one or two places that genuinely need to breathe.
	 */
	--sv-space-section: clamp(3rem, 1.9rem + 3.4vw, 5.5rem);
	--sv-space-tight:   clamp(2rem, 1.4rem + 2vw, 3.25rem);
	--sv-space-loose:   clamp(3.75rem, 2.4rem + 4.2vw, 6.75rem);
	--sv-space-block:   clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);

	/* --- Motion --- */
	--sv-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--sv-ease-out:    cubic-bezier(.22, .61, .36, 1);
	--sv-dur-fast:    200ms;
	--sv-dur-mid:     280ms;
	--sv-dur-slow:    580ms;
}

/* 2. RESET & BASE =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Fixed header must not cover in-page anchor targets. */
	scroll-padding-top: calc(var(--sv-header-h) + 28px);
}

body {
	margin: 0;
	background: var(--sv-surface);
	color: var(--sv-text);
	font-family: var(--sv-font);
	font-size: var(--sv-fs-body);
	line-height: 1.65;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nothing may scroll the page sideways. */
	overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.4rem; }

hr {
	border: 0;
	border-top: 1px solid var(--sv-line);
	margin: var(--sv-space-block) 0;
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sv-blue); color: #fff; }

/* 3. TYPOGRAPHY ============================================================= */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--sv-navy-deep);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--sv-fs-h1); line-height: 1.12; }
h2 { font-size: var(--sv-fs-h2); line-height: 1.17; }
h3 { font-size: var(--sv-fs-h3); line-height: 1.28; }
h4 { font-size: var(--sv-fs-h4); line-height: 1.35; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.sv-lead {
	font-size: var(--sv-fs-lead);
	line-height: 1.6;
	color: var(--sv-text-muted);
	text-wrap: pretty;
}

.sv-eyebrow {
	display: block;
	margin: 0 0 0.85rem;
	/* A hairline tick before the label — small, and only where there is room. */
	position: relative;
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sv-blue);
}

.sv-measure   { max-width: 68ch; }
.sv-muted     { color: var(--sv-text-muted); }
.sv-strong    { font-weight: 700; color: var(--sv-navy-deep); }

/* Gold is reserved for dark surfaces — it fails contrast on white. */
.sv-on-dark .sv-eyebrow,
.sv-section--dark .sv-eyebrow { color: var(--sv-teal); }
.sv-on-dark, .sv-on-dark p { color: var(--sv-text-invert-muted); }
.sv-on-dark h1, .sv-on-dark h2, .sv-on-dark h3,
.sv-on-dark h4, .sv-on-dark .sv-strong { color: var(--sv-text-invert); }
.sv-on-dark .sv-lead { color: var(--sv-text-invert-muted); }

/* 4. LAYOUT ================================================================= */
.sv-container {
	width: 100%;
	max-width: var(--sv-content);
	margin-inline: auto;
	padding-inline: var(--sv-gutter);
}
.sv-container--narrow { max-width: var(--sv-narrow); }

.sv-section { padding-block: var(--sv-space-section); }
.sv-section--tight { padding-block: var(--sv-space-tight); }
.sv-section--loose { padding-block: var(--sv-space-loose); }
/* Follows the section above it directly — no double gap between the two. */
.sv-section--joined { padding-top: 0; }
.sv-section--alt   { background: var(--sv-surface-alt); }
.sv-section--dark  { background: var(--sv-surface-dark); color: var(--sv-text-invert-muted); }

/* Reading measure for long-form prose. */
.sv-prose { max-width: 62ch; }
.sv-prose--wide { max-width: 68ch; }

/*
 * DESIGN RULE — body copy is set ragged right.
 *
 * English body text is left-aligned with a natural ragged right edge. Forced
 * justification stretched word spacing and, with auto hyphenation on, produced
 * unnatural breaks ("near-sur-face", "stat-ics", "sin-gle-pass"), so both are
 * off. `text-wrap: pretty` does the work instead: the browser balances the
 * last lines to avoid orphans without touching word spacing.
 *
 *   applies to    every body-copy context — prose blocks, split columns,
 *                 panels, leads, timeline and flow-line text, editor content
 *   never applies justification anywhere; navigation, buttons, captions,
 *                 tables and short labels are left alone
 *
 * Long unbreakable strings (email, URLs, long identifiers) get
 * `overflow-wrap: anywhere` locally — see .sv-team__contact / .sv-convert__list.
 * `word-break: break-all` is never used on prose.
 */
.sv-prose,
.sv-story__text,
.sv-story__fwi p,
.sv-flowline__text,
.sv-path__line,
.sv-finalcta__text,
.sv-split__text p,
.sv-section-head:not(.sv-section-head--center) .sv-lead,
.sv-panel p,
.sv-download__inner p,
.sv-entry p {
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
	text-wrap: pretty;
}

/* Opt-in for prose that must be centered. */
.sv-text-center { text-align: center !important; }

.sv-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

.sv-stack > * + * { margin-top: var(--sv-space-block); }

/* 5. LINKS & BUTTONS ======================================================== */
a { color: var(--sv-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--sv-blue-700); }
/* Buttons carry their own colours — only prose links recolour on dark. */
.sv-on-dark a:not(.sv-btn), .sv-section--dark a:not(.sv-btn) { color: var(--sv-teal); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sv-gold);
	outline-offset: 3px;
	border-radius: 4px;
}
.sv-section--dark :focus-visible, .sv-on-dark :focus-visible { outline-color: var(--sv-gold); }

.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.82rem 1.5rem;
	min-height: 48px;               /* comfortable touch target */
	border: 1px solid transparent;
	border-radius: var(--sv-r-pill);
	font: inherit;
	font-size: var(--sv-fs-sm);
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sv-dur-fast) var(--sv-ease-out),
	            border-color var(--sv-dur-fast) var(--sv-ease-out),
	            color var(--sv-dur-fast) var(--sv-ease-out),
	            transform var(--sv-dur-fast) var(--sv-ease-out);
}
.sv-btn:hover { transform: translateY(-1px); }
.sv-btn:active { transform: translateY(0); }

.sv-btn--primary { background: var(--sv-blue); color: #fff; }
.sv-btn--primary:hover { background: var(--sv-blue-700); color: #fff; }

.sv-btn--gold { background: var(--sv-gold); color: var(--sv-navy-deep); }
.sv-btn--gold:hover { background: #DE9F12; color: var(--sv-navy-deep); }

.sv-btn--ghost {
	background: transparent;
	color: var(--sv-blue);
	border-color: var(--sv-line-strong);
}
.sv-btn--ghost:hover { background: var(--sv-blue-050); border-color: var(--sv-blue-300); }

.sv-on-dark .sv-btn--ghost, .sv-section--dark .sv-btn--ghost {
	color: #fff;
	border-color: var(--sv-line-invert);
}
.sv-on-dark .sv-btn--ghost:hover, .sv-section--dark .sv-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.sv-btn--lg { padding: 0.95rem 1.85rem; font-size: var(--sv-fs-body); min-height: 54px; }

.sv-btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.sv-btn .sv-icon { width: 1.15em; height: 1.15em; flex: none; }

/* 6. SITE HEADER & NAVIGATION =============================================== */
/*
 * Two states, one element.
 *
 *   default      a floating glass card: inset from every edge, rounded, deep
 *                navy, white logo and white links.
 *   .is-scrolled the card has stretched to both viewport edges, squared off,
 *                gone ~96% opaque white, and swapped to the blue logo and
 *                navy links.
 *
 * The stretch is animated as PADDING on the fixed full-width <header>, never as
 * width on the card. Padding cannot push content past the viewport edge, so the
 * springy easing can overshoot without ever producing a horizontal scrollbar.
 * The card's own inline padding animates in the opposite direction, keeping the
 * logo and links locked to the 1200px content column in both states — that
 * counter-motion is what reads as elastic.
 *
 * Nothing that participates in page layout is animated: the header is fixed and
 * the two logos are absolutely stacked, so neither state change can shift the
 * document or resize the mark.
 */

:root {
	--sv-nav-gap:      22px;                                     /* float distance from the top   */
	--sv-nav-inset:    max(24px, calc((100% - 1200px) / 2));     /* float distance from the sides */
	--sv-nav-h:        76px;                                     /* glass card height             */
	--sv-nav-h-solid:  70px;                                     /* stuck-to-top height           */
	--sv-nav-radius:   22px;
	--sv-nav-move:     580ms;                                    /* geometry                      */
	--sv-nav-fade:     240ms;                                    /* colour and logo cross-fade    */
}

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding-block: var(--sv-nav-gap) 0;
	padding-inline: var(--sv-nav-inset);
	/* Only the card itself is interactive; the inset gutter never blocks clicks. */
	pointer-events: none;
	transition: padding var(--sv-nav-move) var(--sv-ease-spring);
}

.site-header.is-scrolled,
.site-header.is-menu-open,
body.sv-solid-header .site-header {
	padding-block: 0;
	padding-inline: 0;
}

/*
 * The glass lives on a pseudo-element, not on the card itself.
 * `backdrop-filter` makes an element the containing block for any
 * position:fixed descendant, which silently trapped the mobile drawer and its
 * scrim inside the 384x62 bar instead of letting them cover the viewport. The
 * pseudo-element has no descendants, so it can carry the effect harmlessly.
 */
.site-header__inner {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	min-height: var(--sv-nav-h);
	padding-inline: clamp(1rem, 1.6vw, 1.35rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--sv-nav-radius);
	transition:
		min-height     var(--sv-nav-move) var(--sv-ease-spring),
		border-radius  var(--sv-nav-move) var(--sv-ease-spring),
		padding-inline var(--sv-nav-move) var(--sv-ease-spring),
		border-color   var(--sv-nav-fade) var(--sv-ease-out),
		box-shadow     var(--sv-nav-fade) var(--sv-ease-out);
}

.site-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(9, 29, 51, 0.62);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	transition: background-color var(--sv-nav-fade) var(--sv-ease-out),
	            -webkit-backdrop-filter var(--sv-nav-fade) var(--sv-ease-out),
	            backdrop-filter var(--sv-nav-fade) var(--sv-ease-out);
}

.site-header.is-scrolled .site-header__inner,
.site-header.is-menu-open .site-header__inner,
body.sv-solid-header .site-header__inner {
	min-height: var(--sv-nav-h-solid);
	border-radius: 0;
	/* Content stays on the content column now that the bar spans the viewport. */
	padding-inline: max(24px, calc((100% - 1200px) / 2));
	border-color: transparent;
	border-bottom-color: rgba(9, 29, 51, 0.09);
	box-shadow: 0 6px 22px rgba(9, 29, 51, 0.07);
}

.site-header.is-scrolled .site-header__inner::before,
.site-header.is-menu-open .site-header__inner::before,
body.sv-solid-header .site-header__inner::before {
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
}

/* Without backdrop-filter the glass would read as a washed-out rectangle. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
	.site-header__inner::before { background: rgba(9, 29, 51, 0.93); }
	.site-header.is-scrolled .site-header__inner::before,
	.site-header.is-menu-open .site-header__inner::before { background: #fff; }
}

/* --- Brand: two identical files stacked, cross-faded by opacity only ------- */
.site-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	border-radius: 8px;
}

.site-brand__stack {
	position: relative;
	display: block;
	width: clamp(150px, 14vw, 186px);
	/* Locked to the logo's own 480x103 ratio so the mark can never resize. */
	aspect-ratio: 480 / 103;
}

/* <picture> wrappers stack in the same box as the images they carry. */
.site-brand__stack picture {
	position: absolute;
	inset: 0;
	display: block;
}

.site-brand__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--sv-nav-fade) var(--sv-ease-out);
}

.site-brand__logo--white { opacity: 1; }
.site-brand__logo--blue  { opacity: 0; }

.site-header.is-scrolled .site-brand__logo--white,
.site-header.is-menu-open .site-brand__logo--white,
body.sv-solid-header .site-brand__logo--white { opacity: 0; }
.site-header.is-scrolled .site-brand__logo--blue,
.site-header.is-menu-open .site-brand__logo--blue,
body.sv-solid-header .site-brand__logo--blue { opacity: 1; }

/* --- Primary navigation ---------------------------------------------------- */
.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
	margin-left: auto;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu li { margin: 0; }

.primary-menu a {
	position: relative;
	display: inline-block;
	padding: 0.5rem 0.15rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sv-nav-fade) var(--sv-ease-out);
}

.primary-menu a:hover { color: #fff; }

.site-header.is-scrolled .primary-menu a,
.site-header.is-menu-open .primary-menu a,
body.sv-solid-header .primary-menu a { color: var(--sv-navy); }
.site-header.is-scrolled .primary-menu a:hover,
.site-header.is-menu-open .primary-menu a:hover { color: var(--sv-blue); }

/* Current page: a restrained gold underline, never a colour-only cue. */
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-menu-ancestor > a { color: #fff; }

.site-header.is-scrolled .primary-menu .current-menu-item > a,
.site-header.is-scrolled .primary-menu .current_page_item > a,
.site-header.is-menu-open .primary-menu .current-menu-item > a,
.site-header.is-menu-open .primary-menu .current_page_item > a { color: var(--sv-navy-deep); }

.primary-menu .current-menu-item > a::after,
.primary-menu .current_page_item > a::after,
.primary-menu .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--sv-teal);
}

.site-header.is-scrolled .primary-menu .current-menu-item > a::after,
.site-header.is-scrolled .primary-menu .current_page_item > a::after,
.site-header.is-menu-open .primary-menu .current-menu-item > a::after,
.site-header.is-menu-open .primary-menu .current_page_item > a::after {
	background: var(--sv-blue);
}

.site-nav__cta { flex: none; }

/*
 * Over the hero this is a restrained outline button: the hero already owns the
 * one gold call to action, and two gold downloads on the same screen would
 * read as two competing priorities. Once the bar goes white it becomes a solid
 * brand-blue button, which is the strongest thing on that surface.
 */
.site-nav__cta .sv-btn {
	min-height: 42px;
	padding: 0.55rem 1.15rem;
	font-size: 0.875rem;
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.34);
	box-shadow: none;
}

.site-nav__cta .sv-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.site-header.is-scrolled .site-nav__cta .sv-btn,
.site-header.is-menu-open .site-nav__cta .sv-btn,
body.sv-solid-header .site-nav__cta .sv-btn {
	background: var(--sv-blue);
	border-color: var(--sv-blue);
	color: #fff;
}

.site-header.is-scrolled .site-nav__cta .sv-btn:hover,
.site-header.is-menu-open .site-nav__cta .sv-btn:hover {
	background: var(--sv-blue-700);
	border-color: var(--sv-blue-700);
}

/* --- Menu button: a pure CSS line icon, no font, emoji or inline SVG ------- */
.sv-nav-toggle {
	display: none;
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color var(--sv-nav-fade) var(--sv-ease-out),
	            color var(--sv-nav-fade) var(--sv-ease-out),
	            background-color var(--sv-nav-fade) var(--sv-ease-out);
}

.site-header.is-scrolled .sv-nav-toggle,
.site-header.is-menu-open .sv-nav-toggle,
body.sv-solid-header .sv-nav-toggle {
	color: var(--sv-navy-deep);
	border-color: rgba(9, 29, 51, 0.18);
}

.sv-nav-toggle__bars,
.sv-nav-toggle__bars::before,
.sv-nav-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translateX(-50%);
	transition: transform 260ms var(--sv-ease-out), opacity 160ms linear;
}

.sv-nav-toggle__bars { top: 50%; margin-top: -1px; }
.sv-nav-toggle__bars::before { content: ""; top: -6px; left: 0; transform: none; }
.sv-nav-toggle__bars::after  { content: ""; top: 6px;  left: 0; transform: none; }

.sv-nav-toggle[aria-expanded="true"] .sv-nav-toggle__bars { background: transparent; }
.sv-nav-toggle[aria-expanded="true"] .sv-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.sv-nav-toggle[aria-expanded="true"] .sv-nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Below 1025px: hamburger + slide-down panel ---------------------------- */
@media (max-width: 1024px) {
	:root {
		--sv-nav-gap:     12px;
		--sv-nav-inset:   12px;   /* card width becomes calc(100% - 24px) */
		--sv-nav-h:       64px;
		--sv-nav-h-solid: 62px;
		--sv-nav-radius:  18px;
	}

	.sv-nav-toggle { display: block; }

	/*
	 * Full-height drawer, not a dropdown. The old panel hung under the bar and
	 * left the hero call to action visible and clickable behind it; this covers
	 * the viewport and puts a scrim over everything underneath.
	 */
	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(24rem, 100vw);
		display: flex;
		flex-direction: column;
		/* The desktop rule centres on the cross axis; in a column that would
		   shrink every link to its text width. */
		align-items: stretch;
		margin: 0;
		padding: calc(var(--sv-nav-h-solid) + 1.5rem) var(--sv-gutter) 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: -18px 0 48px rgba(9, 29, 51, 0.22);
		z-index: 2;
		visibility: hidden;
		opacity: 0;
		transform: translateX(12px);
		transition: opacity 240ms var(--sv-ease-out),
		            transform 240ms var(--sv-ease-out),
		            visibility 0s linear 240ms;
	}

	.site-header.is-menu-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* The scrim: covers the page, absorbs the tap that closes the drawer. */
	.sv-nav-scrim {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgba(6, 20, 35, 0.55);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		border: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 240ms var(--sv-ease-out), visibility 0s linear 240ms;
	}

	.site-header.is-menu-open .sv-nav-scrim {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	/* The toggle has to sit above both. */
	.sv-nav-toggle { position: relative; z-index: 3; }
	.site-brand { position: relative; z-index: 3; }

	.primary-menu { display: block; }

	.primary-menu li + li { margin-top: 0; }

	.primary-menu a {
		display: block;
		padding: 0.95rem 0.25rem;
		min-height: 48px;
		font-size: 1.0625rem;
		color: var(--sv-navy) !important;
		border-bottom: 1px solid var(--sv-line);
	}

	.primary-menu .current-menu-item > a::after,
	.primary-menu .current_page_item > a::after {
		left: 0;
		right: auto;
		width: 28px;
		bottom: 0.55rem;
	}

	.site-nav__cta { margin-top: auto; padding-top: 1.5rem; }

	/*
	 * The drawer is white, so the outline treatment used over the hero would
	 * put white text on white here. Inside the drawer it is always the solid
	 * brand-blue button, whatever state the bar itself is in.
	 */
	.site-nav__cta .sv-btn,
	.site-header.is-scrolled .site-nav__cta .sv-btn {
		background: var(--sv-blue);
		border-color: var(--sv-blue);
		color: #fff;
	}

	.site-nav__cta .sv-btn:hover,
	.site-header.is-scrolled .site-nav__cta .sv-btn:hover {
		background: var(--sv-blue-700);
		border-color: var(--sv-blue-700);
	}
	.site-nav__cta .sv-btn {
		width: 100%;
		min-height: 52px;
		font-size: var(--sv-fs-body);
	}
}

@media (min-width: 1025px) {
	.sv-nav-scrim { display: none; }
}

/* Freeze the page behind an open panel (JS also pins body scroll position). */
html.sv-menu-open { overflow: hidden; }

/* --- Page content must clear the fixed header ----------------------------- */
/* Full-bleed heroes handle this themselves; everything else gets a spacer.   */
.site-main > .sv-section:first-child,
.site-main > .sv-page-hero:first-child {
	padding-top: calc(var(--sv-nav-h) + var(--sv-nav-gap) + clamp(1.5rem, 3vw, 3rem));
}

/* 7. HERO =================================================================== */
/*
 * STANDARD HERO: COVER MEDIA + CENTRED OVERLAY
 *
 * The media layer is absolutely positioned and fills the entire banner with
 * object-fit: cover, and the copy is centred on top of it. Cover necessarily
 * trims the picture's edges on some window shapes — that is the definition of
 * filling the area with a 2.37:1 image — so the trade is made openly: the
 * frame is anchored per breakpoint (object-position below) to keep the gold
 * crest in the upper part and the centred copy over the dark region.
 *
 * No scrim, no mask, no filter sits over the image. Legibility comes from the
 * framing, verified pixel-by-pixel against the served image variant at each
 * breakpoint using real glyph extents; the measured floor per viewport is
 * recorded next to each object-position override. Text shadows tighten the
 * glyph edges but are not counted in those numbers.
 *
 * The content block is biased slightly below geometric centre (the asymmetric
 * paddings): the crest owns the upper third of the frame, so optical centre
 * for the copy is at roughly 58% of the banner height.
 */
.sv-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(640px, 92vh, 900px);
	/*
	 * The asymmetric paddings place the copy block's centre at ~55% of the
	 * banner height — optically balanced, slightly above where pure centring
	 * plus the crest-clearance bias used to put it (~59%). Any further raise
	 * must be re-measured against the crest: the contrast table in the hero
	 * comment block was produced at exactly this geometry.
	 */
	padding-block: calc(var(--sv-nav-h) + var(--sv-nav-gap) + clamp(1.75rem, 4.5vh, 3.25rem))
	               clamp(3.25rem, 7.5vh, 5rem);
	background: var(--sv-navy-deep);
	overflow: hidden;
	isolation: isolate;
}

/* The image IS the banner background: it fills the section, always. */
/*
 * The media carries a 6% rest-state zoom. That slack is what lets the
 * parallax drift the image without ever exposing a gap at the hero's edges,
 * and it applies to every visitor (JS or not, motion or not) so the page has
 * exactly one at-rest geometry — the contrast sweep models this scale.
 */
.sv-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: scale(1.06);
	will-change: transform;
}

.sv-hero__media picture,
.sv-hero__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	/* Right-anchored on desktop: keeps the crest upper-left, copy on dark. */
	object-position: 100% 50%;
}

.sv-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	will-change: transform, opacity;
}

.sv-hero__content {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

/*
 * Lighter tint of the brand teal, used only here: the eyebrow is the topmost
 * line and therefore the closest to the crest, and the tint is what buys the
 * contrast headroom for it.
 */
.sv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	letter-spacing: 0.2em;
	color: #5FD0CE;
	text-shadow: 0 1px 12px rgba(0, 4, 13, 0.6);
}

/* Editorial detail: short hairlines flanking the eyebrow. Part of the text
   block — nothing is drawn over the photograph. */
.sv-hero__eyebrow::before,
.sv-hero__eyebrow::after {
	content: "";
	width: clamp(26px, 3.5vw, 52px);
	height: 1px;
	flex: none;
}

.sv-hero__eyebrow::before {
	background: linear-gradient(to left, rgba(95, 208, 206, 0.55), rgba(95, 208, 206, 0));
}

.sv-hero__eyebrow::after {
	background: linear-gradient(to right, rgba(95, 208, 206, 0.55), rgba(95, 208, 206, 0));
}

@media (max-width: 480px) {
	.sv-hero__eyebrow::before,
	.sv-hero__eyebrow::after { display: none; }
}

/*
 * Only "Very" is bold. The rest of the headline is regular weight, so the one
 * emphasised word carries all of the emphasis.
 */
.sv-hero__title {
	font-size: clamp(2.125rem, 1.45rem + 2.25vw, 3.125rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: #fff;
	margin-bottom: 0.35em;
	text-shadow: 0 1px 3px rgba(0, 4, 13, 0.5), 0 2px 22px rgba(0, 4, 13, 0.45);
}

.sv-hero__title strong {
	color: var(--sv-gold);
	font-weight: 800;
}

.sv-hero__lead {
	max-width: 42ch;
	margin-inline: auto;
	margin-bottom: 1.7rem;
	color: #DCE5F0;
	text-shadow: 0 1px 14px rgba(0, 4, 13, 0.55);
}

.sv-hero__actions { gap: 0.85rem; justify-content: center; }


/* --- Hero foot: method keywords + scroll cue --------------------------------
 * Sits in the dark bottom band of the frame. The keywords are verbatim source
 * terms; the cue is the draining hairline from the earlier design, restored.
 * -------------------------------------------------------------------------- */
.sv-hero__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.1rem, 2.6vh, 1.9rem);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	pointer-events: none;
	will-change: opacity;
}

.sv-hero__meta {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-hero__meta li {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-invert-muted);
	white-space: nowrap;
}

/* Hairline dividers between the keywords, not bullets. */
.sv-hero__meta li + li {
	position: relative;
	padding-left: clamp(0.9rem, 2vw, 1.6rem);
}

.sv-hero__meta li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 0.85em;
	background: rgba(255, 255, 255, 0.22);
}

/* Scroll cue: a hairline that drains downward into a small chevron. */
.sv-hero__cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.sv-hero__cue-line {
	display: block;
	width: 1px;
	height: clamp(30px, 4.5vh, 48px);
	overflow: hidden;
	position: relative;
	background: rgba(255, 255, 255, 0.16);
}

.sv-hero__cue-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 46%;
	background: linear-gradient(to bottom, rgba(95, 208, 206, 0), #5FD0CE);
	animation: sv-cue 2.6s var(--sv-ease-out) infinite;
}

.sv-hero__cue-tip {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1px solid rgba(95, 208, 206, 0.75);
	border-bottom: 1px solid rgba(95, 208, 206, 0.75);
	transform: rotate(45deg);
	animation: sv-cue-tip 2.6s ease-in-out infinite;
}

@keyframes sv-cue {
	0%   { transform: translateY(-110%); }
	55%  { transform: translateY(230%); }
	100% { transform: translateY(230%); }
}

@keyframes sv-cue-tip {
	0%, 35%  { opacity: 0.35; }
	60%      { opacity: 1; }
	100%     { opacity: 0.35; }
}

@media (max-width: 760px) {
	.sv-hero__meta { display: none; }
}

@media (max-width: 600px) {
	.sv-hero__foot { display: none; }
}

/* --- Hero entrance: one gentle staggered rise on load ------------------------
 * Distinct from scroll-reveal (which stays reserved for figures): this runs
 * once, on load, entirely in CSS, and only for people who accept motion.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.sv-hero__eyebrow,
	.sv-hero__title,
	.sv-hero__lead,
	.sv-hero__actions,
	.sv-hero__foot {
		animation-name: sv-hero-in;
		animation-duration: 620ms;
		animation-timing-function: var(--sv-ease-out);
		animation-fill-mode: backwards;
	}

	.sv-hero__title   { animation-delay: 90ms; }
	.sv-hero__lead    { animation-delay: 180ms; }
	.sv-hero__actions { animation-delay: 270ms; }
	.sv-hero__foot    { animation-delay: 420ms; }
}

@keyframes sv-hero-in {
	from { opacity: 0; transform: translateY(14px); }
}

@media (max-width: 1024px) {
	.sv-hero { min-height: clamp(600px, 88vh, 800px); }
	.sv-hero__image { object-position: 62% 50%; }
	.sv-hero__lead { max-width: 46ch; }
}

@media (max-width: 600px) {
	.sv-hero {
		min-height: clamp(600px, 86vh, 720px);
		padding-block: calc(var(--sv-nav-h) + var(--sv-nav-gap) + clamp(2rem, 6vh, 3.5rem))
		               clamp(2.75rem, 6vh, 3.75rem);
	}
	/* Narrow windows: anchor toward the dark side — at 52% the crest fringe
	   reached the eyebrow (measured 1.6:1 at 390px); 62% keeps part of the
	   wave in frame and still clears AA (measured below). */
	.sv-hero__image { object-position: 62% 50%; }
	.sv-hero__actions { gap: 0.75rem; }
}

/* Very narrow windows: the 62% frame lets the crest reach the eyebrow again
   (measured 3.05:1 at 320px) — anchor further into the dark side. */
@media (max-width: 344px) {
	.sv-hero__image { object-position: 72% 50%; }
}

/* 8. EDITORIAL & COMPONENT PATTERNS ========================================= */
.sv-section-head { max-width: 62ch; margin-bottom: var(--sv-space-block); }
.sv-section-head--center { margin-inline: auto; text-align: center; }

/*
 * Section rule. Brand blue, not gold — gold is reserved for the single
 * highest-priority CTA, the headline metric and a couple of emphasis words.
 */
.sv-rule {
	width: 40px;
	height: 2px;
	border-radius: 2px;
	background: var(--sv-blue);
	margin: 0 0 1rem;
}

.sv-section--dark .sv-rule,
.sv-on-dark .sv-rule { background: var(--sv-teal); }

.sv-section-head--center .sv-rule { margin-inline: auto; }
.sv-section-head--center .sv-rule { margin-inline: auto; }

.sv-panel {
	background: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-lg);
	padding: clamp(1.35rem, 1rem + 1.5vw, 2rem);
}
.sv-panel--flush { border: 0; padding: 0; background: none; }

/*
 * A hairline between two consecutive light sections that would otherwise run
 * together. Drawn inside the container so it aligns with the content column,
 * not edge to edge.
 */
.sv-section--divided > .sv-container { position: relative; }

.sv-section--divided > .sv-container::before {
	content: '';
	position: absolute;
	top: calc(var(--sv-space-section) * -0.5);
	left: var(--sv-gutter);
	right: var(--sv-gutter);
	height: 1px;
	background: var(--sv-line);
}

.sv-note {
	border-left: 3px solid var(--sv-teal);
	padding-left: 1rem;
	color: var(--sv-text-muted);
	font-size: var(--sv-fs-sm);
}
/* --- Home 2: the problem ---------------------------------------------------- */
.sv-problem__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.sv-problem__title {
	font-size: var(--sv-fs-h1);
	letter-spacing: -0.026em;
	margin-bottom: 0.5em;
}

.sv-problem__text p + p { margin-top: 1em; }

/* Right-hand figure: vertically balanced against the prose column. */
.sv-problem__figure { align-self: center; }

/* --- The traveltime equation, full width and full size -----------------------
 * The flyer's own vector artwork on a deep navy panel. At the content column's
 * width the 30px equation glyphs render at ~36px — the size the source gave
 * it. Narrow screens scroll it inside its own box (keyboard reachable via the
 * focusable wrapper) instead of shrinking the maths to illegibility; the
 * figcaption states the whole equation in words for anyone who cannot read
 * the artwork at any size.
 * -------------------------------------------------------------------------- */
.sv-equation {
	margin: var(--sv-space-block) 0 0;
	padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 1.5rem);
	background: var(--sv-navy-deep);
	border-radius: var(--sv-r-lg);
}

.sv-equation__scroll { padding-bottom: 0.35rem; }

.sv-equation .sv-eq-svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--sv-font-serif);
}

/*
 * One line above 720px, two lines below. The single-line artwork needs about
 * 720px before the 30px glyphs and the 12px bracket labels stay legible;
 * narrower than that it used to be clipped inside a horizontally scrolling
 * box, which read as a broken formula on a phone. The compact layout carries
 * the same symbols in the same order, so nothing is lost by the swap.
 */
.sv-equation__wide   { display: block; overflow-x: auto; }
.sv-equation__narrow { display: none; }

@media (max-width: 720px) {
	.sv-equation__wide   { display: none; }
	.sv-equation__narrow { display: block; }

	/* The compact viewBox is 400 units wide, so type scales up with it. */
	.sv-eq-svg--compact .sv-eq-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
	.sv-eq-svg--compact .sv-eq-tech    { font-size: 13px; }
}

.sv-equation figcaption {
	margin-top: 0.9rem;
	max-width: 72ch;
	font-size: var(--sv-fs-xs);
	line-height: 1.55;
	color: var(--sv-text-invert-muted);
	/* The panel supplies the caption's separation; no hairline needed here. */
	border-top: 0;
	padding-top: 0;
}

/*
 * Equation palette. On deep navy every term clears WCAG AA by a wide margin:
 * gold 8.9:1, teal-tint 10.8:1, blue-tint 7.5:1, slate 8.4:1.
 */
.sv-eq-ink   { fill: #FFFFFF; }
.sv-eq-blue  { fill: #7FB0E8; }
.sv-eq-teal  { fill: #5FD0CE; }
.sv-eq-gold  { fill: var(--sv-gold); }
.sv-eq-slate { fill: var(--sv-text-invert-muted); }

.sv-eq-stroke-blue { stroke: #7FB0E8; }
.sv-eq-stroke-teal { stroke: #5FD0CE; }
.sv-eq-stroke-gold { stroke: var(--sv-gold); }

.sv-eq-main { font-size: 30px; }
.sv-eq-sub  { font-size: 62%; font-style: italic; }

.sv-eq-label {
	font-family: var(--sv-font);
	font-size: 12px;
	font-weight: 600;
	text-anchor: middle;
}

.sv-eq-eyebrow {
	font-family: var(--sv-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-anchor: middle;
	fill: var(--sv-text-invert-muted);
}

.sv-eq-tech {
	font-size: 14.5px;
	font-style: italic;
	text-anchor: middle;
	fill: var(--sv-text-invert-muted);
}

.sv-eq-brace { stroke-width: 1.6; fill: none; stroke-linecap: round; }
.sv-eq-rule  { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }

@media (max-width: 860px) {
	.sv-problem__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Home 2b: the research story ---------------------------------------------
 * Three milestones on a connected timeline, the land-FWI aside, and the
 * foundation pull quote — the flyer's narrative spine, verbatim.
 * -------------------------------------------------------------------------- */
.sv-story__head { max-width: 52rem; margin-bottom: var(--sv-space-block); }

.sv-story__title {
	font-size: var(--sv-fs-h2);
	letter-spacing: -0.024em;
	margin-bottom: 0;
}

.sv-story__timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The connecting hairline the milestones sit on. */
.sv-story__timeline::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right,
		rgba(26, 92, 176, 0), rgba(26, 92, 176, 0.35) 12%,
		rgba(26, 92, 176, 0.35) 88%, rgba(26, 92, 176, 0));
}

.sv-story__item {
	position: relative;
	margin: 0;
	padding-top: 1.5rem;
}

/* Node marker: a small teal diamond centred on the hairline. */
.sv-story__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: var(--sv-teal);
}

.sv-story__year {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-blue);
}

.sv-story__name { font-size: var(--sv-fs-h4); margin-bottom: 0.35em; }

.sv-story__text {
	margin: 0;
	font-size: var(--sv-fs-sm);
	color: var(--sv-text-muted);
}

/* Land-FWI aside: a quiet panel, teal-edged like every method cue.
   The paragraph runs in two editorial columns, so the copy fills the card
   edge to edge at a comfortable ~55ch measure and the card stays shallow. */
.sv-story__fwi {
	margin-top: var(--sv-space-block);
	padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.85rem);
	background: var(--sv-white);
	border: 1px solid var(--sv-line);
	border-left: 3px solid var(--sv-teal);
	border-radius: var(--sv-r-md);
}

.sv-story__fwi h3 { font-size: var(--sv-fs-h4); margin-bottom: 0.55em; }

.sv-story__fwi p {
	margin: 0;
	font-size: var(--sv-fs-sm);
	color: var(--sv-text-muted);
	columns: 2;
	column-gap: clamp(1.75rem, 3.5vw, 3rem);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sv-story__fwi p { columns: 1; }
}

/* The foundation pull quote: centred, serif, and free of the default
   blockquote border. */
.sv-story__quote {
	margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
	padding: 0;
	border: 0;
	/* Wide enough that each sentence holds a single line on desktop. */
	max-width: 56rem;
	text-align: center;
}

/* One sentence per line; on narrow screens each may wrap, balanced. */
.sv-story__quote-line {
	display: block;
	text-wrap: balance;
}

.sv-story__quote-rule {
	display: block;
	width: 40px;
	height: 2px;
	border-radius: 2px;
	margin: 0 auto 1.25rem;
	background: var(--sv-teal);
}

.sv-story__quote p {
	margin: 0;
	font-family: var(--sv-font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	line-height: 1.55;
	color: var(--sv-navy);
}

@media (max-width: 860px) {
	/* Vertical timeline: the hairline runs down the left, nodes sit on it. */
	.sv-story__timeline { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

	.sv-story__timeline::before {
		top: 0;
		bottom: 0;
		left: 4px;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(to bottom,
			rgba(26, 92, 176, 0), rgba(26, 92, 176, 0.35) 8%,
			rgba(26, 92, 176, 0.35) 92%, rgba(26, 92, 176, 0));
	}

	.sv-story__item { padding-top: 0; padding-left: 1.6rem; }
	.sv-story__item::before { top: 0.3rem; }
}

/* --- Home 3: two paths ------------------------------------------------------
 * A light card and a navy card, same height, one baseline. Deliberately not
 * two identical white marketing cards.
 */
.sv-paths__head { margin-bottom: var(--sv-space-block); }
.sv-paths__head h2 { margin-bottom: 0.4em; }

.sv-paths__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

.sv-path {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--sv-r-lg);
}

.sv-path--light {
	background: var(--sv-surface-alt);
	border: 1px solid var(--sv-line);
}

.sv-path--dark {
	background: var(--sv-navy-deep);
	border: 1px solid var(--sv-navy);
}

.sv-path__label {
	margin: 0 0 0.7rem;
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-blue);
}

.sv-path--dark .sv-path__label { color: var(--sv-teal); }

.sv-path__name { font-size: var(--sv-fs-h3); margin-bottom: 0.4em; }
.sv-path--dark .sv-path__name { color: #fff; }

.sv-path__line { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); }
.sv-path--dark .sv-path__line { color: var(--sv-text-invert-muted); }

.sv-path__points {
	margin: 1.25rem 0 1.5rem;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.sv-path__points li {
	position: relative;
	margin: 0 0 0.55rem;
	padding-left: 1.4rem;
	font-size: var(--sv-fs-sm);
}

.sv-path__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: var(--sv-blue);
}

.sv-path--dark .sv-path__points li::before { background: var(--sv-teal); }

.sv-path__link { margin-top: auto; }

@media (max-width: 760px) {
	.sv-paths__pair { grid-template-columns: minmax(0, 1fr); }
}

/* --- Text link: the standard tertiary action -------------------------------- */
.sv-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 24px;
	font-size: var(--sv-fs-sm);
	font-weight: 650;
	text-decoration: none;
	color: var(--sv-blue);
}

.sv-textlink:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.sv-textlink .sv-icon { width: 1.05em; height: 1.05em; transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.sv-textlink:hover .sv-icon { transform: translateX(2px); }

.sv-on-dark .sv-textlink,
.sv-section--dark .sv-textlink { color: var(--sv-teal); }

@media (prefers-reduced-motion: reduce) {
	.sv-textlink:hover .sv-icon { transform: none; }
}

/* --- Home 4: flagship evidence ---------------------------------------------- */
.sv-evidence__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.sv-evidence__side h2 { font-size: var(--sv-fs-h2); margin-bottom: 0.5em; }

.sv-evidence__side .sv-eyebrow { margin-bottom: 0.6rem; }

.sv-metric {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sv-line-invert);
}

p.sv-metric__value {
	margin: 0;
	font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--sv-gold);
}

p.sv-metric__label {
	margin: 0.3rem 0 1.1rem;
	font-size: var(--sv-fs-xs);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-invert-muted);
}

.sv-metric__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
}

/*
 * Value first, label under it. The two labels differ in length ("No statics"
 * vs "Cascade 3-3, anisotropy corrected"), so label-first layout pushed the
 * numbers to different heights; with the number on top both figures sit on
 * the same line no matter how the labels wrap. DOM order stays dt→dd for
 * assistive tech; only the visual order is reversed.
 */
.sv-metric__pair div {
	margin: 0;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.sv-metric__pair dt {
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-invert-muted);
	margin-top: 0.3rem;
}

.sv-metric__pair dd {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #fff;
}

@media (max-width: 960px) {
	.sv-evidence__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Home 5: ecosystem as a flow line --------------------------------------- */
.sv-eco__head { margin-bottom: var(--sv-space-block); }
.sv-eco__head h2 { margin-bottom: 0.4em; }

.sv-flowline {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sv-flowline__step {
	position: relative;
	margin: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--sv-line);
	transition: border-top-color var(--sv-dur-mid) var(--sv-ease-out);
}

.sv-flowline__step:hover { border-top-color: var(--sv-blue); }

.sv-flowline__num {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sv-blue);
}

.sv-flowline__title { font-size: var(--sv-fs-h4); margin-bottom: 0.35em; }
.sv-flowline__text { margin: 0; font-size: var(--sv-fs-sm); color: var(--sv-text-muted); }

@media (max-width: 860px) {
	.sv-flowline { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* --- Final call to action ---------------------------------------------------
 * A rule and two actions, not another full-width navy panel — the evidence
 * band above is already the page's dark anchor.
 */
.sv-finalcta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--sv-line);
}

.sv-finalcta__title { font-size: var(--sv-fs-h2); margin-bottom: 0.35em; }
.sv-finalcta__text { margin: 0; max-width: 52ch; color: var(--sv-text-muted); }

.sv-finalcta__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

@media (max-width: 860px) {
	.sv-finalcta__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --- Outline button: the hero's secondary action ---------------------------- */
.sv-btn--outline {
	background: rgba(9, 29, 51, 0.5);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.42);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
}

.sv-btn--outline:hover {
	background: rgba(9, 29, 51, 0.68);
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

/* --- Before / after comparison ---------------------------------------------
 * The control is a real <input type="range">: dragging, arrow keys, Home/End,
 * touch and the spoken value all come from the browser. JS only mirrors the
 * value into a custom property, so with JS off both labelled images still show
 * at a 50% wipe.
 * -------------------------------------------------------------------------- */
.sv-compare { --sv-wipe: 50%; }

.sv-compare__frame {
	position: relative;
	border-radius: var(--sv-r-md);
	overflow: hidden;
	background: var(--sv-navy-900);
	border: 1px solid var(--sv-line-invert);
	line-height: 0;
}

.sv-compare__layer { position: relative; }
.sv-compare__layer img { width: 100%; height: auto; display: block; }

.sv-compare__layer--after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--sv-wipe));
}

.sv-compare__tag {
	position: absolute;
	bottom: 0.65rem;
	padding: 0.3rem 0.65rem;
	border-radius: var(--sv-r-sm);
	background: rgba(6, 20, 35, 0.86);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1.35;
	max-width: calc(50% - 1rem);
}

.sv-compare__tag--before { left: 0.65rem; }
.sv-compare__tag--after  { right: 0.65rem; text-align: right; }

.sv-compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sv-wipe);
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

/*
 * The input extends half a thumb beyond each edge of the frame. A range thumb
 * travels from thumb-radius to width minus thumb-radius, while the divider
 * line spans the full 0-100% — so with the input flush to the frame the two
 * only met at 50% (drag left and the circle sat right of the line, drag right
 * and it sat left). Widening the track by exactly one thumb width makes the
 * thumb's centre land on value% of the frame at every value.
 */
.sv-compare__range {
	position: absolute;
	left: -22px;
	right: -22px;
	top: 50%;
	transform: translateY(-50%);
	width: calc(100% + 44px);
	height: 48px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: ew-resize;
}

.sv-compare__range::-webkit-slider-runnable-track { background: transparent; height: 48px; }
.sv-compare__range::-moz-range-track { background: transparent; height: 48px; }

.sv-compare__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(9, 29, 51, 0.72);
	box-shadow: 0 2px 10px rgba(6, 20, 35, 0.45);
	cursor: ew-resize;
}

.sv-compare__range::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(9, 29, 51, 0.72);
	box-shadow: 0 2px 10px rgba(6, 20, 35, 0.45);
	cursor: ew-resize;
}

.sv-compare__range:focus-visible { outline: 3px solid var(--sv-gold); outline-offset: 2px; }

.sv-compare__hint {
	margin: 0.65rem 0 0;
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-muted);
}

.sv-on-dark .sv-compare__hint,
.sv-section--dark .sv-compare__hint { color: var(--sv-text-invert-muted); }

/* --- Inner page hero -------------------------------------------------------- */
.sv-page-hero {
	background-color: var(--sv-navy-deep);
	background-image: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-navy-deep) 68%);
	padding-block: calc(var(--sv-nav-h) + var(--sv-nav-gap) + clamp(1.75rem, 4vw, 3rem))
	               clamp(1.75rem, 4vw, 3rem);
}

.sv-page-hero__inner { max-width: 46rem; }

.sv-page-hero__title {
	font-size: var(--sv-fs-h1);
	color: #fff;
	margin-bottom: 0.35em;
}

.sv-page-hero__lead { margin-bottom: 0; max-width: 60ch; }

.site-main > .sv-page-hero:first-child {
	padding-top: calc(var(--sv-nav-h) + var(--sv-nav-gap) + clamp(1.75rem, 4vw, 3rem));
}

.sv-h-sub {
	font-size: var(--sv-fs-h3);
	margin: 1.5em 0 0.5em;
	color: var(--sv-navy-deep);
}
.sv-h-sub:first-child { margin-top: 0; }
.sv-on-dark .sv-h-sub, .sv-section--dark .sv-h-sub { color: #fff; }

/* --- Two-column split ------------------------------------------------------- */
.sv-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: start;
	margin-top: var(--sv-space-block);
}

.sv-split--reverse .sv-split__text { order: 2; }

@media (max-width: 860px) {
	.sv-split { grid-template-columns: minmax(0, 1fr); }
	.sv-split--reverse .sv-split__text { order: 0; }
}

/* --- Numbered steps --------------------------------------------------------- */
.sv-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.5rem);
	margin: var(--sv-space-block) 0 0;
	padding: 0;
	list-style: none;
}

.sv-steps__item {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 2px solid var(--sv-line);
	transition: border-top-color var(--sv-dur-mid) var(--sv-ease-out);
}

.sv-steps__item:hover { border-top-color: var(--sv-blue); }

.sv-steps__num {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sv-blue);
}

.sv-steps__title { font-size: var(--sv-fs-h4); margin-bottom: 0.3em; }
.sv-steps__desc { margin: 0; font-size: var(--sv-fs-sm); color: var(--sv-text-muted); }

@media (max-width: 860px) { .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sv-steps { grid-template-columns: minmax(0, 1fr); } }

/* --- Result groups ---------------------------------------------------------- */
.sv-result-group + .sv-result-group { margin-top: var(--sv-space-tight); }

/*
 * A real sub-heading (17-20px sentence case), not an eyebrow. At 13px
 * uppercase it read as a label and lost the group it introduces; the eyebrow
 * style stays reserved for section kickers so the two levels never collide.
 */
.sv-result-group__title {
	margin-bottom: 1rem;
	font-size: var(--sv-fs-subhead);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--sv-navy-deep);
}

/* --- Comparison table ------------------------------------------------------- */
.sv-ct-wrap { margin-top: var(--sv-space-block); }

.sv-ct {
	width: 100%;
	border-collapse: collapse;
	background: var(--sv-white);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-md);
	overflow: hidden;
}

.sv-ct th, .sv-ct td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--sv-line);
	font-size: var(--sv-fs-sm);
	line-height: 1.5;
}

.sv-ct thead th {
	background: var(--sv-navy-deep);
	color: #fff;
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	border-bottom: 0;
}

.sv-ct tbody th[scope="row"] {
	width: 11rem;
	background: var(--sv-blue-050);
	color: var(--sv-navy-deep);
	font-weight: 650;
}

.sv-ct tbody tr:last-child th,
.sv-ct tbody tr:last-child td { border-bottom: 0; }

.sv-ct__col { display: none; }

/*
 * Below 860px each row becomes a block. Changing table elements to
 * display:block drops the table out of the accessibility tree, so the column
 * name that <thead> supplied is repeated inside every cell as real markup —
 * which value belongs to which method never depends on the layout.
 */
@media (max-width: 860px) {
	.sv-ct, .sv-ct tbody, .sv-ct tr, .sv-ct th, .sv-ct td { display: block; width: auto; }
	.sv-ct { border: 0; background: none; }
	.sv-ct thead { display: none; }

	.sv-ct tbody tr {
		margin-bottom: 0.8125rem;
		border: 1px solid var(--sv-line);
		border-radius: var(--sv-r-md);
		background: var(--sv-white);
		overflow: hidden;
	}

	.sv-ct tbody th[scope="row"] {
		width: auto;
		font-size: 1.0625rem;
		line-height: 1.4;
		font-weight: 700;
		border-bottom: 1px solid var(--sv-line);
	}

	.sv-ct tbody td { font-size: 0.9875rem; }

	.sv-ct tbody td { border-bottom: 1px solid var(--sv-line); }
	.sv-ct tbody tr td:last-child { border-bottom: 0; }

	.sv-ct__col {
		display: block;
		margin-bottom: 0.25rem;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--sv-blue);
	}

	.sv-ct__val { display: block; }
}

/* --- Solutions: option cards (Overview) ------------------------------------- */
/*
 * Both cards are one grid row, so they share a height; identical padding puts
 * both titles on the same start line whatever the title length.
 */
.sv-optioncards { align-items: stretch; }

.sv-optioncard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}

.sv-optioncard h3 {
	margin-bottom: 0.6rem;
	/* Long product names wrap naturally — never tracked out to fill a line. */
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.sv-optioncard p {
	margin-bottom: 0;
	max-width: 56ch;
	font-size: var(--sv-fs-body);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.sv-optioncard { padding: 1.3125rem; }
}

/* --- Solutions: method grid (Traditional) ----------------------------------- */
/*
 * DOM order is the mobile reading order (intro figure, method, its figure,
 * method, its figure). On desktop the same items are placed explicitly: text
 * runs down column 1, the three figures form one image group in columns 2-3,
 * and the picking figure spans both. align-items:start keeps the text and the
 * image group on the same top line.
 */
.sv-method {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
	row-gap: clamp(1.25rem, 2.4vw, 1.9rem);
	align-items: start;
}

/*
 * Desktop: the intro sits beside the picking figure it describes, then the two
 * methods stand as parallel columns — each description directly above the map
 * it produces. Descriptions share a row so their tops align, and so do the two
 * maps; nothing is left stranded beside a much taller image. DOM order is the
 * mobile order, so the explicit placement below is desktop-only.
 */
/*
 * The heading and lead are centred against the picking figure: the figure is
 * much taller than four lines of text, and top-aligning them left an obvious
 * hole under the paragraph. Centring balances the row without moving the
 * figure off the section's top line.
 */
.sv-method__intro       { grid-column: 1; grid-row: 1; align-self: center; }
.sv-method__intro .sv-section-head { margin-bottom: 0; max-width: none; }
.sv-method__fig--wide   { grid-column: 2; grid-row: 1; }
.sv-method__step--a     { grid-column: 1; grid-row: 2; }
.sv-method__fig--a      { grid-column: 1; grid-row: 3; }
.sv-method__step--b     { grid-column: 2; grid-row: 2; }
.sv-method__fig--b      { grid-column: 2; grid-row: 3; }

.sv-method__intro .sv-lead { margin-bottom: 0; max-width: 46ch; }
.sv-method__step--a,
.sv-method__step--b { padding-top: clamp(1rem, 2.5vw, 2rem); }

.sv-method__step h3 { margin-top: 0; }
.sv-method__step p { margin-bottom: 0; max-width: 56ch; }

/* Every figure in the group carries the same frame and caption spacing. */
.sv-method__fig img { border-radius: var(--sv-r-md); }

@media (max-width: 900px) {
	/* Single column: the DOM order already reads method → its figure. */
	.sv-method { grid-template-columns: minmax(0, 1fr); }
	.sv-method__intro,
	.sv-method__fig--wide,
	.sv-method__step--a,
	.sv-method__step--b,
	.sv-method__fig--a,
	.sv-method__fig--b { grid-column: 1; grid-row: auto; }
	.sv-method__step--a,
	.sv-method__step--b { padding-top: 0; }
	.sv-method__intro { align-self: start; }
	.sv-method__intro .sv-section-head { margin-bottom: 0; }
}

/* --- Solutions: Cascade two-column ------------------------------------------ */
.sv-cascade {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
	margin-top: var(--sv-space-block);
}

.sv-cascade p {
	font-size: var(--sv-fs-body);
	line-height: 1.65;
	/* Under ~55ch in a two-column setting, per the reading-measure rule. */
	max-width: 55ch;
}

/*
 * Three levels of emphasis, so the section has an obvious entry point:
 *   1. the statement — largest, brightest, the thing to read first
 *   2. the outcome   — body size behind a teal rule and a small label
 *   3. the aside     — a tinted card, plainly supporting material
 */
/* p.<class>, not .<class>: `.sv-cascade p` is 0-1-1 and would win otherwise. */
p.sv-cascade__statement {
	max-width: 40ch;
	font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
	line-height: 1.45;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #fff;
	text-wrap: pretty;
}

.sv-cascade__outcome {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--sv-teal);
}

.sv-cascade__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sv-teal);
}

.sv-cascade__aside {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	border: 1px solid var(--sv-line-invert);
	border-radius: var(--sv-r-lg);
	background: rgba(255, 255, 255, 0.035);
}

.sv-cascade__aside-title {
	margin: 0 0 0.7em;
	font-size: var(--sv-fs-h4);
	line-height: 1.35;
	color: #fff;
}

.sv-cascade__aside p { max-width: none; }

@media (max-width: 860px) {
	/* Main explanation first, "why it matters" after. */
	.sv-cascade { grid-template-columns: minmax(0, 1fr); }
	p.sv-cascade__statement { max-width: none; }
}

/* --- Solutions: results ------------------------------------------------------ */
/*
 * All three panels in a group share one aspect ratio and one column width, so
 * their tops, bottoms and caption baselines line up without cropping or
 * stretching anything.
 */
.sv-result-group__title + .sv-grid { margin-top: 0; }

.sv-result-track > .sv-figure {
	display: flex;
	flex-direction: column;
}

@media (max-width: 860px) {
	/*
	 * A scroll-snap track rather than six full-width images stacked. Each card
	 * takes ~85% of the viewport so the next one peeks in as the affordance;
	 * the region is focusable, so arrow keys scroll it.
	 */
	/*
	 * .sv-grid.sv-result-track, not .sv-result-track: the generic mobile rule
	 * further down collapses .sv-grid--3 to a single 1fr column, and with
	 * equal specificity it would win on source order — leaving one explicit
	 * zero-width track that swallowed the first figure.
	 */
	.sv-grid.sv-result-track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		grid-template-columns: none;
		gap: 0.875rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		scrollbar-width: thin;
	}

	.sv-grid.sv-result-track > .sv-figure { scroll-snap-align: start; }
	.sv-grid.sv-result-track:focus-visible { outline: 3px solid var(--sv-gold); outline-offset: 4px; }
}

/* --- Solutions: TrailMap ----------------------------------------------------- */
/*
 * Desktop: intro and the four-step strip in the left column, the product
 * screenshot top-aligned beside them, the Trails/SeisMentor block below the
 * steps. Mobile order follows the DOM: title, intro, steps, figure, products.
 */
.sv-trail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(1.75rem, 3.5vw, 3rem);
	row-gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: start;
	margin-top: var(--sv-space-block);
}

.sv-trail__intro { grid-column: 1; grid-row: 1; }
.sv-trail__steps { grid-column: 1; grid-row: 2; }
.sv-trail__figure { grid-column: 2; grid-row: 1 / span 2; }
.sv-trail__products { grid-column: 1 / -1; grid-row: 3; }

/* Measured caps: the lead resolves to ~58ch, body prose to ~60ch. */
.sv-trail__lead { max-width: 56ch; }

.sv-trail__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sv-trail__steps li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	padding-top: 0.7rem;
	border-top: 2px solid var(--sv-line);
}

.sv-trail__num {
	flex: none;
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	color: var(--sv-blue);
	font-variant-numeric: tabular-nums;
}

.sv-trail__step {
	font-size: var(--sv-fs-sm);
	font-weight: 650;
	line-height: 1.4;
	color: var(--sv-navy-deep);
}

.sv-trail__products { max-width: 58ch; }
.sv-trail__products h3 { margin-top: 0; }

@media (max-width: 900px) {
	.sv-trail { grid-template-columns: minmax(0, 1fr); }
	.sv-trail__intro,
	.sv-trail__steps,
	.sv-trail__figure,
	.sv-trail__products { grid-column: 1; grid-row: auto; }
}

@media (max-width: 460px) {
	.sv-trail__steps { grid-template-columns: minmax(0, 1fr); }
}

/* --- Brochure download band -------------------------------------------------- */
.sv-download__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-lg);
	background: var(--sv-surface-alt);
}

.sv-download__inner > div { flex: 1 1 22rem; }
.sv-download__inner p { margin: 0; font-size: var(--sv-fs-sm); }

/* --- Team: compact editorial cards -------------------------------------------
 * The previous version used three 4:5 monogram blocks, which read as three
 * missing photographs rather than a design. A 64px initial disc carries the
 * same identity cue at a fraction of the height, and the weight moves to the
 * name, the role and the contact details.
 * -------------------------------------------------------------------------- */
.sv-team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: var(--sv-space-block) 0 0;
	padding: 0;
	list-style: none;
}

.sv-team__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(0.9rem, 1.6vw, 1.15rem);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-lg);
	background: var(--sv-white);
	transition: border-color var(--sv-dur-mid) var(--sv-ease-out),
	            box-shadow var(--sv-dur-mid) var(--sv-ease-out);
}

.sv-team__card:hover { border-color: var(--sv-blue-300); box-shadow: var(--sv-shadow-sm); }

/*
 * Portrait on top, identity below — but the picture is an inset, framed
 * element rather than a full-bleed slab: the card's own padding surrounds it,
 * it carries the inner radius and a hairline ring, and the 4:5 masters are
 * shown in a squarer window so a candid half-body shot does not swamp the
 * card. All three cards share the frame, a photograph or the branded monogram,
 * so the row stays even.
 */
.sv-team__portrait {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: calc(var(--sv-r-lg) - 0.35rem);
	background: var(--sv-surface-alt);
	box-shadow: inset 0 0 0 1px var(--sv-line);
}

.sv-team__portrait picture,
.sv-team__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Slightly squarer window than the 4:5 master: it takes the trim off the
	 * lower body, never the head, so the card keeps a half-body portrait
	 * without letting a candid snapshot dominate the layout.
	 */
	object-position: 50% 15%;
}

/* A whisper of brand at the foot of the picture, so the photograph reads as
   part of the card instead of pasted onto it. */
.sv-team__portrait::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(to top, rgba(9, 29, 51, 0.24), rgba(9, 29, 51, 0));
	pointer-events: none;
}

.sv-team__portrait--placeholder { background: var(--sv-navy-deep); }
.sv-team__portrait--placeholder::after { background: none; }

.sv-team__monogram {
	font-size: clamp(2rem, 1.5rem + 1.9vw, 2.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.92);
}

.sv-team__body { padding: clamp(1rem, 1.8vw, 1.25rem) 0.35rem 0.35rem; }

.sv-team__name { font-size: var(--sv-fs-h3); margin: 0 0 0.2em; }

.sv-team__role {
	/* Breathing room so the hairline sits between the two blocks, not under
	   the role's baseline. */
	margin: 0 0 0.85rem;
	font-size: var(--sv-fs-xs);
	font-weight: 650;
	line-height: 1.35;
	color: var(--sv-blue);
}

/*
 * padding-left is reset explicitly: the global `ul` rule indents lists by
 * 1.25rem, which pushed every contact row 20px right of the name and role
 * above it. The icon column is a fixed grid track, so the icons sit on the
 * card's text edge and the values line up with each other.
 */
.sv-team__contact {
	margin: 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--sv-line);
	list-style: none;
}

.sv-team__contact li {
	display: grid;
	grid-template-columns: 1.05rem minmax(0, 1fr);
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.45rem;
	font-size: var(--sv-fs-sm);
	overflow-wrap: anywhere;
}

.sv-team__contact li:last-child { margin-bottom: 0; }
.sv-team__contact .sv-icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--sv-slate); }

/* Two up on tablets: three full-width 4:5 cards make an absurdly long page. */
@media (max-width: 860px) { .sv-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-team { grid-template-columns: minmax(0, 1fr); } }

/* --- Contacts: one conversion area, two columns -------------------------------
 * Previously three info blocks, three person cards and a separate form section
 * all competed at the same weight. Now a single bordered container: everything
 * needed to decide on the left, the form on the right.
 */
.sv-convert {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 0;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-xl);
	overflow: hidden;
	background: var(--sv-white);
}

.sv-convert__aside {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--sv-navy-deep);
	color: var(--sv-text-invert-muted);
}

.sv-convert__main { padding: clamp(1.5rem, 3vw, 2.5rem); }

.sv-convert__title { font-size: var(--sv-fs-h3); color: #fff; margin-bottom: 0.4em; }
.sv-convert__intro { font-size: var(--sv-fs-sm); margin-bottom: 1.5rem; }

.sv-convert__group + .sv-convert__group {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sv-line-invert);
}

.sv-convert__label {
	margin: 0 0 0.7rem;
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-teal);
}

.sv-convert__list { margin: 0; padding: 0; list-style: none; }

.sv-convert__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 0.5rem;
	font-size: var(--sv-fs-sm);
	overflow-wrap: anywhere;
}

.sv-convert__list li:last-child { margin-bottom: 0; }

.sv-convert__list .sv-icon {
	flex: none; width: 1.05rem; height: 1.05rem;
	margin-top: 0.15rem; color: var(--sv-teal);
}

.sv-convert__person + .sv-convert__person { margin-top: 0.9rem; }

.sv-convert__person-name { margin: 0; font-weight: 700; color: #fff; font-size: var(--sv-fs-sm); }

.sv-convert__person-role {
	margin: 0 0 0.3rem;
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-invert-muted);
}

.sv-convert__person a { font-size: var(--sv-fs-xs); }

.sv-convert__offices { display: grid; gap: 0.9rem; }

.sv-convert__office-name {
	margin: 0 0 0.15rem;
	font-size: var(--sv-fs-sm);
	font-weight: 650;
	color: #fff;
}

.sv-convert__office address {
	margin: 0;
	font-style: normal;
	font-size: var(--sv-fs-xs);
	line-height: 1.5;
}

.sv-convert__topics { margin: 0; padding: 0; list-style: none; }

.sv-convert__topics li {
	position: relative;
	margin: 0 0 0.4rem;
	padding-left: 1.15rem;
	font-size: var(--sv-fs-xs);
}

.sv-convert__topics li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 2px;
	border-radius: 1px;
	background: var(--sv-teal);
}

@media (max-width: 900px) {
	/* Single column, and the contact details come before the form. */
	.sv-convert { grid-template-columns: minmax(0, 1fr); }
	.sv-convert__aside { order: -1; }
}

/* --- Contact form layout ------------------------------------------------------ */
.sv-form-wrap { margin-top: 0; }

.sv-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.sv-field--full { grid-column: 1 / -1; }
.sv-optional { font-weight: 400; color: var(--sv-text-muted); }

.sv-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 1.25rem 0;
}

/* 24x24 minimum, so the checkbox meets WCAG 2.5.8 target size on its own. */
.sv-consent input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.05rem;
	accent-color: var(--sv-blue);
}

.sv-consent label { font-size: var(--sv-fs-sm); line-height: 1.5; }

.sv-form-note, .sv-form-fallback {
	margin-top: 0.9rem;
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-muted);
}

@media (max-width: 700px) { .sv-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Editor block on a custom-template page ------------------------------------ */
.sv-editor-block .sv-entry { font-size: var(--sv-fs-lead); }

/* --- Solutions: in-page anchor navigation -------------------------------------
 * Sticks under the site header on desktop; below 900px it becomes a scrollable
 * strip rather than a select, so every destination stays one tap away.
 * -------------------------------------------------------------------------- */
.sv-anchornav {
	position: sticky;
	top: var(--sv-nav-h-solid);
	z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border-bottom: 1px solid var(--sv-line);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
	.sv-anchornav { background: #fff; }
}

/*
 * The viewport paints the edge fades that hint at more tabs off-screen; JS
 * toggles .is-start / .is-end so the fade on a side disappears once the strip
 * is scrolled fully to it. The inner element owns the scrolling, and the
 * indicator lives inside it so the underline travels with the tabs.
 */
.sv-anchornav__viewport { position: relative; }

.sv-anchornav__viewport::before,
.sv-anchornav__viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 160ms linear;
	z-index: 1;
}

.sv-anchornav__viewport::before {
	left: 0;
	background: linear-gradient(to right, var(--sv-white) 12%, rgba(255, 255, 255, 0));
}

.sv-anchornav__viewport::after {
	right: 0;
	background: linear-gradient(to left, var(--sv-white) 12%, rgba(255, 255, 255, 0));
}

.sv-anchornav__viewport.is-start::before,
.sv-anchornav__viewport.is-end::after { opacity: 0; }

.sv-anchornav__scroll {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Safe inset so the first and last tab are never flush to the fade. */
	padding-inline: 18px;
	scroll-padding-inline: 18px;
	margin-inline: -18px;
}

.sv-anchornav__scroll::-webkit-scrollbar { display: none; }

.sv-anchornav__list {
	display: flex;
	gap: clamp(0.35rem, 1.2vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-anchornav__list li { margin: 0; flex: none; }

.sv-anchornav__list a {
	display: flex;
	align-items: center;
	padding: 0.75rem 0.5rem;
	min-height: 48px;
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	color: var(--sv-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sv-dur-fast) var(--sv-ease-out);
}

.sv-anchornav__list a:hover { color: var(--sv-blue); }

.sv-anchornav__list a[aria-current="true"] { color: var(--sv-navy-deep); }

/*
 * One shared underline that slides to the active tab (translateX + width,
 * positioned by main.js). Hidden until JS places it; aria-current carries the
 * state for assistive tech either way.
 */
.sv-anchornav__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	border-radius: 1px;
	background: var(--sv-blue);
	opacity: 0;
	pointer-events: none;
	transition: transform 280ms var(--sv-ease-out),
	            width 280ms var(--sv-ease-out),
	            opacity 160ms linear;
}

body.admin-bar .sv-anchornav { top: calc(var(--sv-nav-h-solid) + 32px); }

@media screen and (max-width: 782px) {
	body.admin-bar .sv-anchornav { top: calc(var(--sv-nav-h-solid) + 46px); }
}

@media (max-width: 900px) {
	.sv-anchornav__list { padding-inline: 0; }
	.sv-anchornav__list a { padding-inline: 0.65rem; }
}

/*
 * Anchor targets must clear both the site header and this bar, otherwise a
 * jump lands with the heading hidden behind them.
 */
/*
 * ADDITIVE with the global `html { scroll-padding-top }` (--sv-header-h + 28px
 * = 104px): the browser sums scroll-padding on the container and scroll-margin
 * on the target. 104 + 34 = 138px — the solid header (70) plus this bar (~49)
 * plus a breathing gap. Writing the full clearance here as well would double
 * count and land every jump 104px short of its tab.
 */
.sv-solutions-page [id] { scroll-margin-top: 34px; }

/* 9. FIGURES & MEDIA ======================================================== */
.sv-figure { margin: 0; }
.sv-figure img {
	width: 100%;
	border-radius: var(--sv-r-md);
	border: 1px solid var(--sv-line);
	background: var(--sv-surface-alt);
}
.sv-on-dark .sv-figure img, .sv-section--dark .sv-figure img { border-color: var(--sv-line-invert); }
.sv-figure figcaption {
	margin-top: 0.7rem;
	font-size: var(--sv-fs-caption);
	line-height: 1.5;
	text-align: left;
	color: var(--sv-text-muted);
}
.sv-on-dark .sv-figure figcaption,
.sv-section--dark .sv-figure figcaption { color: var(--sv-text-invert-muted); }

/* Wide content never pushes the page sideways — it scrolls inside its own box. */
.sv-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* 10. FORMS ================================================================= */
.sv-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sv-field label { font-size: var(--sv-fs-sm); font-weight: 650; color: var(--sv-navy-deep); }
.sv-field .sv-req { color: var(--sv-blue); }

.sv-field input,
.sv-field select,
.sv-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	min-height: 48px;
	border: 1px solid var(--sv-line-strong);
	border-radius: var(--sv-r-sm);
	background: var(--sv-white);
	color: var(--sv-text);
	font: inherit;
	font-size: var(--sv-fs-sm);
	transition: border-color var(--sv-dur-fast) var(--sv-ease-out),
	            box-shadow var(--sv-dur-fast) var(--sv-ease-out);
}
.sv-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.sv-field input:focus, .sv-field select:focus, .sv-field textarea:focus {
	border-color: var(--sv-blue);
	box-shadow: 0 0 0 3px var(--sv-blue-100);
}

.sv-alert {
	border-radius: var(--sv-r-md);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	font-size: var(--sv-fs-sm);
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
}
.sv-alert--ok  { background: var(--sv-teal-100); color: #0F4F4D; border: 1px solid #A9DBD9; }
.sv-alert--err { background: #FCEDEA; color: #8A2A17; border: 1px solid #F0C2B7; }
.sv-alert .sv-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }

/* Honeypot — visually and semantically removed, but still fillable by bots. */
.sv-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* 11. SITE FOOTER =========================================================== */
.site-footer {
	background: var(--sv-navy-deep);
	color: var(--sv-text-invert-muted);
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem) 1.75rem;
}

.site-footer a { color: var(--sv-text-invert-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--sv-line-invert);
}

/* The wordmark is a 480px asset — cap it or it fills the column. */
.site-footer__brand img {
	width: clamp(160px, 18vw, 200px);
	height: auto;
	margin-bottom: 0.9rem;
}

.site-footer__brand picture { display: block; }

.site-footer__tagline {
	margin: 0;
	font-size: var(--sv-fs-sm);
	color: var(--sv-text-invert-muted);
}

.site-footer__heading {
	margin: 0 0 0.9rem;
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu li { margin: 0 0 0.55rem; }
.footer-menu a { font-size: var(--sv-fs-sm); }

.site-footer__contact p { margin: 0 0 1.15rem; font-size: var(--sv-fs-sm); }

.site-footer__office { margin-bottom: 1.15rem; }

.site-footer__office-title {
	margin: 0 0 0.2rem;
	font-size: var(--sv-fs-sm);
	font-weight: 650;
	color: #fff;
}

.site-footer__office address {
	font-style: normal;
	font-size: var(--sv-fs-sm);
	line-height: 1.55;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 1.5rem;
}

.site-footer__bottom-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.5rem;
}

.site-footer__copy,
.site-footer__legal { margin: 0; font-size: var(--sv-fs-xs); }

/* Builder credit: sits opposite the client copyright. */
.site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-invert-muted);
}

.site-footer__credit img {
	display: block;
	height: 14px;
	width: auto;
	/* Slightly recessed so the mark reads as a colophon, not a nav item. */
	opacity: 0.85;
}

@media (max-width: 860px) {
	.site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* 12. MOTION & SCROLL REVEAL ================================================ */
/*
 * Reveal is for figures, metrics and non-critical decoration only. Headings,
 * body copy and buttons are never faded in: a reader scrolling at speed must
 * not meet half-transparent text. 280ms and 8px of travel, so it registers as
 * a settle rather than an animation.
 */
.sv-reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 280ms var(--sv-ease-out), transform 280ms var(--sv-ease-out);
	will-change: opacity, transform;
}
.sv-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* With scripting off, header.php prints a <noscript> override so nothing
   stays invisible. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sv-reveal { opacity: 1; transform: none; }

	/*
	 * The header is the one exception to the blanket reset above. Its travel —
	 * the stretch, the height change, the corner rounding — is exactly what
	 * reduced motion is asking us to drop, so that all goes. But the colour and
	 * logo cross-fades have to survive: switching two stacked logos with no
	 * fade at all is a hard flicker at the scroll threshold, which is a worse
	 * experience for a motion-sensitive reader than the 120ms dissolve. These
	 * sit after the reset and carry !important so they win it.
	 */
	.site-header {
		transition: none !important;
	}
	.site-header__inner {
		transition-property: border-color, box-shadow !important;
		transition-duration: 120ms !important;
		transition-timing-function: linear !important;
	}
	.site-header__inner::before {
		transition-property: background-color !important;
		transition-duration: 120ms !important;
		transition-timing-function: linear !important;
	}
	.site-brand__logo {
		transition-property: opacity !important;
		transition-duration: 120ms !important;
		transition-timing-function: linear !important;
	}
	.site-nav {
		transition-property: opacity, visibility !important;
		transition-duration: 120ms, 0s !important;
		transition-delay: 0s, 120ms !important;
	}
	.site-header.is-menu-open .site-nav {
		transition-delay: 0s, 0s !important;
	}

	/* The scroll cue keeps its shape but nothing moves. */
	.sv-hero__cue-line::after {
		animation: none !important;
		height: 100%;
		opacity: 0.55;
		transform: none;
	}
	.sv-hero__cue-tip { animation: none !important; opacity: 0.55; }
}

/* --- Scroll probe ---------------------------------------------------------
 * Out of flow so it adds no height, and tall enough that it is still partly on
 * screen at scroll 0 — that is what keeps the header in its glass state until
 * the page actually moves. Its height IS the threshold.
 * -------------------------------------------------------------------------- */
#sv-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 60px;
	pointer-events: none;
}

body { position: relative; }

/* --- Refinement pass -------------------------------------------------------
 * Small, consistent details rather than decoration: a texture that belongs to
 * the subject, hover states that respond, and hairlines that separate sections
 * without drawing a hard line.
 * -------------------------------------------------------------------------- */

/*
 * Dark surfaces carry a faint wiggle-trace texture — the same shape a seismic
 * trace makes. Two SVG data URIs, no request, no library, and at 100% / 4% it
 * reads as tone rather than pattern.
 */
/*
 * The wiggle-trace texture appears at most twice per page: the flagship
 * evidence band and the footer. Applying it to every dark surface turned a
 * detail into wallpaper.
 */
.sv-textured { position: relative; }

.sv-textured::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='72' viewBox='0 0 180 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 18c22-14 45 14 67 0s45-14 67 0 45 14 46 0'/%3E%3Cpath d='M0 54c22-14 45 14 67 0s45-14 67 0 45 14 46 0'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* Keep the texture behind everything the section actually says. */
.sv-textured > * { position: relative; z-index: 1; }

/* --- Panels respond to the pointer ------------------------------------------ */
.sv-panel {
	transition: border-color var(--sv-dur-mid) var(--sv-ease-out),
	            box-shadow var(--sv-dur-mid) var(--sv-ease-out);
}

.sv-panel:hover { border-color: var(--sv-blue-300); box-shadow: var(--sv-shadow-sm); }

/* --- Figures ---------------------------------------------------------------- */
.sv-figure img {
	box-shadow: 0 1px 2px rgba(9, 29, 51, 0.05), 0 10px 24px rgba(9, 29, 51, 0.06);
	transition: border-color var(--sv-dur-mid) var(--sv-ease-out);
}

.sv-figure:hover img { border-color: var(--sv-line-strong); }
.sv-on-dark .sv-figure:hover img,
.sv-section--dark .sv-figure:hover img { border-color: rgba(255, 255, 255, 0.3); }

/* Captions read as a set through a shared hairline, not a coloured dot. */
.sv-figure figcaption {
	padding-top: 0.55rem;
	border-top: 1px solid var(--sv-line);
}

.sv-on-dark .sv-figure figcaption,
.sv-section--dark .sv-figure figcaption { border-top-color: var(--sv-line-invert); }

/* --- Section seams ----------------------------------------------------------
 * A hairline that fades out at both ends, so light sections meet without a
 * ruled border across the full width.
 */
.sv-section--alt + .sv-section:not(.sv-section--dark):not(.sv-section--alt),
.sv-section:not(.sv-section--alt):not(.sv-section--dark) + .sv-section--alt {
	position: relative;
}

.sv-section--alt + .sv-section:not(.sv-section--dark):not(.sv-section--alt)::before,
.sv-section:not(.sv-section--alt):not(.sv-section--dark) + .sv-section--alt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 2 * var(--sv-gutter), var(--sv-content));
	height: 1px;
	background: linear-gradient(to right,
		rgba(91, 102, 115, 0), rgba(91, 102, 115, 0.28), rgba(91, 102, 115, 0));
}

/* --- Buttons: a touch more depth and a clearer press ------------------------ */
.sv-btn--primary { box-shadow: 0 1px 2px rgba(9, 29, 51, 0.12), 0 6px 18px rgba(26, 92, 176, 0.22); }
.sv-btn--primary:hover { box-shadow: 0 2px 4px rgba(9, 29, 51, 0.14), 0 10px 26px rgba(26, 92, 176, 0.3); }
.sv-btn--gold { box-shadow: 0 1px 2px rgba(9, 29, 51, 0.14), 0 6px 18px rgba(242, 176, 30, 0.22); }
.sv-btn--gold:hover { box-shadow: 0 2px 4px rgba(9, 29, 51, 0.16), 0 10px 26px rgba(242, 176, 30, 0.3); }

.sv-btn .sv-icon { transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.sv-btn:hover .sv-icon { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
	.sv-btn:hover .sv-icon { transform: none; }
}

/* --- Stat figures: a hairline beneath the number ---------------------------- */
/* --- Workflow chips and tick lists ------------------------------------------ */
.sv-steps__item { transition: border-top-color var(--sv-dur-mid) var(--sv-ease-out); }
.sv-steps__item:hover { border-top-color: var(--sv-blue); }

/* --- Ecosystem items: the left rule lights up ------------------------------- */
/* --- Footer: a fading rule where it meets the page -------------------------- */
.site-footer { position: relative; }

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 2 * var(--sv-gutter), var(--sv-content));
	height: 1px;
	background: linear-gradient(to right,
		rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.site-footer__office-title {
	position: relative;
	padding-left: 0.8rem;
}

.site-footer__office-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sv-teal);
}

/* --- Team monogram: a thin ring, so the frame reads as intentional ---------- */
/* 13. ACCESSIBILITY HELPERS ================================================= */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}
.screen-reader-text:focus {
	clip-path: none;
	height: auto; width: auto;
	margin: 0;
	padding: 0.9rem 1.25rem;
	position: fixed;
	top: 0.75rem; left: 0.75rem;
	z-index: 1000;
	background: var(--sv-white);
	color: var(--sv-navy-deep);
	border-radius: var(--sv-r-sm);
	box-shadow: var(--sv-shadow-lg);
	font-weight: 650;
	text-decoration: none;
}

/* 14. BLOCK EDITOR / CORE CLASSES =========================================== */
.sv-entry > * { margin-block: 1.1em; }
.sv-entry > :first-child { margin-top: 0; }
.sv-entry > :last-child { margin-bottom: 0; }
.sv-entry h2 { margin-top: 1.8em; }
.sv-entry h3 { margin-top: 1.6em; }
.sv-entry img, .sv-entry .wp-block-image img { border-radius: var(--sv-r-md); }

.alignwide  { width: min(100%, 1100px); margin-inline: auto; }
.alignfull  { width: 100%; }
.aligncenter { margin-inline: auto; }

.wp-block-table { overflow-x: auto; }
.wp-caption-text, .wp-block-image figcaption {
	font-size: var(--sv-fs-xs);
	color: var(--sv-text-muted);
}

blockquote {
	margin: 0;
	padding-left: 1.15rem;
	border-left: 3px solid var(--sv-blue);
	font-size: var(--sv-fs-lead);
	color: var(--sv-navy);
}

code, kbd, samp { font-family: var(--sv-font-mono); font-size: 0.92em; }

/* 15. RESPONSIVE ============================================================ */
@media (max-width: 1024px) {
	.sv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.sv-grid--2, .sv-grid--3, .sv-grid--split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.sv-btn { width: 100%; }
	.sv-btn-row { flex-direction: column; align-items: stretch; }
}

/* The WordPress admin bar must never sit on top of the fixed header. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}