/*
Theme Name: SoftVault
Description: Custom theme for the SoftVault site — a product catalogue, a visible delivery process and a service-level commitment. Outfit headings and Plus Jakarta Sans body; a logo-true palette of deep navy, electric blue and teal; photography in the hero, product tiles and engagement cards; soft corners, soft shadows and a single scroll-reveal.
Version: 3.0.0
Author: SoftVault
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: softvault
*/

/* ============================================================
   0. Fonts — self-hosted, latin subset, swap
   ============================================================ */

@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/outfit-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/outfit-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/outfit-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   1. Tokens
   ------------------------------------------------------------
   The logo has three colours — a deep navy, a steel blue and a
   teal — and all three are here: navy for bands and type, blue
   as the primary accent, teal as the secondary. Greys are the
   navy at an alpha step. Inside an ink surface (.sv-ink) the
   ladder is remapped to white alphas and the accent lifts to a
   light teal, so one set of component rules serves both light
   and navy bands. Soft radii and soft shadows; the gradient is
   reserved for surfaces, never text.
   ============================================================ */

:root {
	/* Sampled from the logo: navy #002058→#003868, steel #084870→#106880, teal →#1FA39A */
	--sv-ink: #05215C;
	--sv-ink-rgb: 5 33 92;
	--sv-ink-2: #0A3A7A;
	--sv-paper: #F2F5FC;
	--sv-white: #FFFFFF;

	--sv-blue: #1050E0;
	--sv-blue-rgb: 16 80 224;
	--sv-blue-deep: #0C3FBF;
	--sv-blue-lt: #7EA2FF;
	--sv-blue-50: #E4ECFF;
	--sv-blue-100: #C9D9FF;

	--sv-teal: #0E7A75;          /* the only teal used as text */
	--sv-teal-rgb: 14 122 117;
	--sv-teal-bright: #16A39A;   /* the logo's teal — surfaces and icons */
	--sv-teal-lt: #3FE0D0;
	--sv-teal-50: #D6F3EF;

	--sv-navy-50: #E9EEFA;
	--sv-glow-blue: radial-gradient(640px 360px at 92% -10%, rgb(16 80 224 / .45), transparent 70%);
	--sv-glow-teal: radial-gradient(520px 320px at -6% 110%, rgb(22 163 154 / .30), transparent 70%);

	--sv-accent: var(--sv-blue);
	--sv-accent-rgb: var(--sv-blue-rgb);
	--sv-accent-deep: var(--sv-blue-deep);
	--sv-accent-lt: var(--sv-blue-lt);
	--sv-accent-fg: var(--sv-blue);

	--sv-text: var(--sv-ink);
	--sv-text-2: rgb(var(--sv-ink-rgb) / .72);
	--sv-text-3: rgb(var(--sv-ink-rgb) / .62);
	--sv-text-4: rgb(var(--sv-ink-rgb) / .45);

	--sv-line: rgb(var(--sv-ink-rgb) / .10);
	--sv-line-2: rgb(var(--sv-ink-rgb) / .18);
	--sv-line-3: rgb(var(--sv-ink-rgb) / .28);

	--sv-card-bg: var(--sv-white);
	--sv-error: #B42318;

	--sv-r-sm: 8px;
	--sv-r: 12px;
	--sv-r-lg: 20px;

	--sv-shadow-sm: 0 1px 2px rgb(5 33 92 / .05), 0 2px 8px rgb(5 33 92 / .05);
	--sv-shadow: 0 4px 24px rgb(5 33 92 / .09);
	--sv-shadow-lg: 0 12px 32px rgb(5 33 92 / .15);
	--sv-shadow-header: 0 2px 12px rgb(5 33 92 / .08);

	--sv-grad: linear-gradient(135deg, #1050E0 0%, #0E7A75 100%);                    /* text-bearing bands */
	--sv-grad-brand: linear-gradient(135deg, #05215C 0%, #0A3A7A 45%, #16A39A 100%); /* decorative: the logo's own sweep */
	--sv-grad-soft: linear-gradient(135deg, var(--sv-blue-50), var(--sv-teal-50));
	--sv-lift: translateY(-3px);

	--sv-font-heading: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
	--sv-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--sv-maxw: 1280px;
	--sv-maxw-narrow: 768px;
	--sv-nav-h: 80px;
	--sv-gutter: 24px;
	--sv-section-y: 88px;
	--sv-grid-gap: 24px;

	--sv-dur: .2s;
	--sv-dur-reveal: .6s;
	--sv-dur-slow: .7s;
	--sv-ease: ease-out;
}

@media (min-width: 1024px) {
	:root {
		--sv-gutter: 48px;
		--sv-section-y: 112px;
		--sv-grid-gap: 32px;
	}
}

/* Ink surface: everything inside re-reads the ladder. */
.sv-ink,
.sv-way--dark,
.sv-cta,
.sv-footer,
.sv-stats-strip,
.sv-hero,
.sv-contact-panel {
	background: var(--sv-ink);
	color: #fff;
	--sv-text: #fff;
	--sv-text-2: rgb(255 255 255 / .72);
	--sv-text-3: rgb(255 255 255 / .55);
	--sv-text-4: rgb(255 255 255 / .35);
	--sv-line: rgb(255 255 255 / .10);
	--sv-line-2: rgb(255 255 255 / .20);
	--sv-line-3: rgb(255 255 255 / .40);
	--sv-accent-fg: var(--sv-teal-lt);
	--sv-card-bg: rgb(255 255 255 / .06);
}

/* A white card sitting inside an ink surface (the hero panel). */
.sv-light {
	color: var(--sv-ink);
	--sv-text: var(--sv-ink);
	--sv-text-2: rgb(11 31 68 / .72);
	--sv-text-3: rgb(11 31 68 / .62);
	--sv-text-4: rgb(11 31 68 / .45);
	--sv-line: rgb(11 31 68 / .10);
	--sv-line-2: rgb(11 31 68 / .18);
	--sv-line-3: rgb(11 31 68 / .28);
	--sv-accent-fg: var(--sv-blue);
	--sv-card-bg: #fff;
}

/* Navy bands carry a blue glow top-right and a teal one bottom-left — the
   logo's sweep, without ever sitting under body text. */
.sv-stats-strip,
.sv-way--dark,
.sv-footer {
	background-image: var(--sv-glow-blue), var(--sv-glow-teal);
	background-repeat: no-repeat;
}

.sv-section--paper { background: var(--sv-paper); }
.sv-section--white { background: var(--sv-white); }
.sv-section--alt   { background: var(--sv-white); }
.sv-section--tint  { background: var(--sv-grad-soft); }
.sv-section--teal  { background: var(--sv-teal-50); }

/* ============================================================
   2. Base
   ============================================================ */

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

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	font: 400 18px/1.6 var(--sv-font-body);
	color: var(--sv-text);
	background: var(--sv-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--sv-accent-fg); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sv-accent-deep); }

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

.sv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--sv-white);
	color: var(--sv-text);
	padding: 12px 18px;
	border: 1px solid var(--sv-line);
	border-radius: 0 0 var(--sv-r-sm) 0;
}
.sv-skip:focus { left: 0; }

.screen-reader-text,
.sv-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Reveal — hidden only when scripting will run, so nothing is lost without JS. */
@media (scripting: enabled) {
	.sv-reveal {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity var(--sv-dur-reveal) var(--sv-ease), transform var(--sv-dur-reveal) var(--sv-ease);
	}
}
.sv-reveal.is-revealed { opacity: 1; transform: none; }

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

/* ============================================================
   3. Type
   ============================================================ */

h1, h2, h3, h4 {
	font-family: var(--sv-font-heading);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--sv-text);
	text-wrap: balance;
}
h1, h2 { font-weight: 700; line-height: 1.1; }
h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 768px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
	h1 { font-size: 3.5rem; }
}

p { text-wrap: pretty; }

.sv-h-em { font-style: normal; font-weight: inherit; color: var(--sv-accent-fg); }

.sv-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--sv-text-2);
	max-width: 40rem;
}

.sv-eyebrow {
	display: block;
	font: 600 13px/1.4 var(--sv-font-body);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--sv-accent-fg);
	margin-bottom: 12px;
}

.sv-kicker {
	font: 600 12px/1.4 var(--sv-font-body);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--sv-text-3);
}

/* ============================================================
   4. Layout
   ============================================================ */

.sv-wrap {
	width: 100%;
	max-width: var(--sv-maxw);
	margin: 0 auto;
	padding: 0 var(--sv-gutter);
}

.sv-section { padding: var(--sv-section-y) 0; }
.sv-section--tight { padding-top: 64px; }

.sv-section-head { margin-bottom: 56px; }
.sv-section-head .sv-lead { margin-top: 16px; }
.sv-section-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 32px 64px;
	align-items: end;
}
.sv-section-aside {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sv-text-3);
	border-left: 2px solid var(--sv-blue-100);
	padding-left: 24px;
}
.sv-section-link { justify-self: end; margin-bottom: 6px; }
@media (max-width: 860px) {
	.sv-section-head--split { grid-template-columns: 1fr; align-items: start; }
	.sv-section-link { justify-self: start; }
}

.sv-grid { display: grid; gap: var(--sv-grid-gap); }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sv-grid > .sv-reveal { display: grid; }
@media (max-width: 1023px) {
	.sv-grid--3, .sv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.sv-grid--2, .sv-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
	.sv-grid--4 { grid-template-columns: 1fr; }
}

.sv-btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   5. Buttons, links, tags, discs, icons
   ============================================================ */

.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--sv-r);
	font: 600 14px/1.2 var(--sv-font-body);
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	background: var(--sv-accent);
	color: #fff;
	box-shadow: var(--sv-shadow-sm);
	transition: background-color var(--sv-dur), color var(--sv-dur), border-color var(--sv-dur), transform var(--sv-dur), box-shadow var(--sv-dur);
}
.sv-btn:hover { background: var(--sv-accent-deep); color: #fff; transform: var(--sv-lift); box-shadow: var(--sv-shadow); }
.sv-btn .sv-icon { width: 16px; height: 16px; }
.sv-btn--block { width: 100%; }

.sv-btn--ghost {
	background: transparent;
	color: var(--sv-text);
	border-color: var(--sv-line-3);
	box-shadow: none;
}
.sv-btn--ghost:hover {
	background: var(--sv-blue-50);
	color: var(--sv-blue);
	border-color: var(--sv-blue);
	box-shadow: none;
}

.sv-btn--light {
	background: transparent;
	color: #fff;
	border-color: rgb(255 255 255 / .5);
	box-shadow: none;
}
.sv-btn--light:hover {
	background: rgb(255 255 255 / .12);
	color: #fff;
	border-color: #fff;
	box-shadow: none;
}

.sv-btn--white {
	background: #fff;
	color: var(--sv-blue);
	box-shadow: var(--sv-shadow);
}
.sv-btn--white:hover { background: #fff; color: var(--sv-blue-deep); }

.sv-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 15px/1.2 var(--sv-font-body);
	color: var(--sv-accent-fg);
	text-decoration: none;
	transition: gap var(--sv-dur), color var(--sv-dur);
}
.sv-link .sv-icon { width: 16px; height: 16px; }
.sv-link:hover,
.sv-card:hover .sv-link,
.sv-way:hover .sv-link { gap: 12px; color: var(--sv-accent-fg); }

.sv-tag {
	display: inline-block;
	padding: 5px 12px;
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .02em;
	color: var(--sv-blue-deep);
	background: var(--sv-blue-50);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sv-dur), background-color var(--sv-dur), border-color var(--sv-dur);
}
a.sv-tag:hover { color: #fff; background: var(--sv-blue); }
.sv-tag.is-active { color: #fff; background: var(--sv-blue); border-color: var(--sv-blue); }
.sv-ink .sv-tag { color: #fff; background: rgb(255 255 255 / .12); }

.sv-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sv-text-3);
}
.sv-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.sv-status--available { color: var(--sv-teal); }
.sv-ink .sv-status--available { color: var(--sv-teal-lt); }
.sv-status--pilot { color: var(--sv-text-2); }
.sv-status--development { color: var(--sv-text-3); }
.sv-status--development::before { background: transparent; border: 1px solid currentColor; }

.sv-icon { width: 22px; height: 22px; flex: none; }

/* Coloured icon discs — the DSM idiom, in the logo palette. */
.sv-disc {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sv-blue);
	color: #fff;
	flex: none;
	box-shadow: 0 6px 16px rgb(16 80 224 / .28);
}
.sv-disc .sv-icon { width: 22px; height: 22px; }
.sv-disc--teal { background: var(--sv-teal); box-shadow: 0 6px 16px rgb(14 122 117 / .28); }
.sv-disc--sm { width: 40px; height: 40px; }
.sv-disc--sm .sv-icon { width: 18px; height: 18px; }
.sv-disc--lg { width: 56px; height: 56px; }
.sv-disc--lg .sv-icon { width: 26px; height: 26px; }
.sv-ink .sv-disc { background: var(--sv-blue); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .3); }
.sv-ink .sv-disc--teal { background: var(--sv-teal-bright); color: #fff; }
.sv-light .sv-disc { background: var(--sv-blue); color: #fff; }
.sv-light .sv-disc--teal { background: var(--sv-teal); color: #fff; }

.sv-badge-icon {
	display: inline-flex;
	color: var(--sv-accent-fg);
	flex: none;
}
.sv-badge-icon .sv-icon { width: 32px; height: 32px; }

/* ============================================================
   6. Header
   ============================================================ */

.sv-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgb(255 255 255 / .96);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sv-line);
	transition: box-shadow .3s, border-color .3s;
}
.sv-header.is-scrolled {
	box-shadow: var(--sv-shadow-header);
	border-bottom-color: transparent;
}

.sv-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	height: var(--sv-nav-h);
}

.sv-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sv-text);
	text-decoration: none;
	margin-right: auto;
}
.sv-brand img { height: 52px; width: auto; }
.sv-brand-text {
	display: none;
	font: 700 1.5rem/1 var(--sv-font-heading);
	letter-spacing: -.02em;
}
.sv-brand--text-only .sv-brand-text { display: inline; }
.sv-brand--text-only img { display: none; }

.sv-menu { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.sv-menu a {
	display: block;
	font: 500 15px/1.2 var(--sv-font-body);
	color: var(--sv-text-2);
	text-decoration: none;
	transition: color var(--sv-dur);
}
.sv-menu a:hover,
.sv-menu .current-menu-item > a,
.sv-menu .current_page_item > a,
.sv-menu .current-menu-parent > a { color: var(--sv-blue); }

.sv-nav-actions { display: flex; align-items: center; gap: 24px; }

.sv-nav-cta {
	display: inline-flex;
	padding: 10px 18px;
	font: 600 14px/1.2 var(--sv-font-body);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--sv-r);
	background: var(--sv-blue);
	text-decoration: none;
	transition: background-color var(--sv-dur), color var(--sv-dur);
}
.sv-nav-cta:hover { background: var(--sv-blue-deep); color: #fff; }

.sv-burger {
	display: none;
	place-items: center;
	border: 0;
	background: none;
	color: var(--sv-text);
	padding: 4px;
	cursor: pointer;
}
.sv-burger .sv-icon { width: 24px; height: 24px; }
.sv-burger .sv-close { display: none; }
.sv-nav.is-open .sv-burger .sv-close { display: block; }
.sv-nav.is-open .sv-burger .sv-bars { display: none; }

@media (max-width: 900px) {
	.sv-burger { display: grid; }
	.sv-nav-cta { display: none; }
	.sv-menu {
		position: absolute;
		top: var(--sv-nav-h);
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--sv-gutter) 24px;
		background: var(--sv-white);
		border-top: 1px solid var(--sv-line);
		border-radius: 0 0 var(--sv-r) var(--sv-r);
		box-shadow: var(--sv-shadow-lg);
	}
	.sv-nav.is-open .sv-menu { display: flex; }
	.sv-menu a {
		font: 500 1.0625rem/1.3 var(--sv-font-body);
		color: var(--sv-text);
		padding: 16px 0;
		border-bottom: 1px solid var(--sv-line);
	}
	.sv-menu li:last-child a { border-bottom: 0; }
	.sv-menu .sv-menu-cta { margin-top: 16px; }
	.sv-menu .sv-menu-cta a {
		font: 600 14px/1.2 var(--sv-font-body);
		text-align: center;
		padding: 14px;
		border: 0;
		border-radius: var(--sv-r);
		background: var(--sv-blue);
		color: #fff;
	}
	.sv-menu .sv-menu-cta a:hover { background: var(--sv-blue-deep); color: #fff; }
}

/* ============================================================
   7. Hero — photo behind a navy scrim; catalogue panel floats right
   ============================================================ */

.sv-hero {
	position: relative;
	overflow: hidden;
	background: var(--sv-grad-brand);     /* no-photo fallback */
}
.sv-hero-media { position: absolute; inset: 0; z-index: 0; }
.sv-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.sv-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(5 33 92 / .95) 0%, rgb(10 58 122 / .82) 45%, rgb(22 163 154 / .28) 100%),
		linear-gradient(180deg, rgb(5 33 92 / .25) 0%, transparent 30%, rgb(5 33 92 / .45) 100%);
}
.sv-hero-dial {
	position: absolute;
	width: 720px;
	height: 720px;
	right: -200px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	opacity: .18;
	pointer-events: none;
}

.sv-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	min-height: clamp(560px, 72vh, 760px);
	padding: 96px 0;
}
.sv-hero-copy { position: relative; }
.sv-hero-copy-inner { max-width: 600px; width: 100%; }
.sv-hero h1 { max-width: 16ch; margin-bottom: 24px; }
.sv-hero .sv-lead { margin-bottom: 40px; color: rgb(255 255 255 / .82); }
.sv-hero .sv-eyebrow { margin-bottom: 24px; }

.sv-trust {
	margin-top: 32px;
	display: flex;
	gap: 12px 24px;
	flex-wrap: wrap;
	font-size: 14px;
	color: rgb(255 255 255 / .75);
}
.sv-trust li { display: flex; align-items: center; gap: 8px; }
.sv-trust .sv-icon { width: 16px; height: 16px; color: var(--sv-teal-lt); }

/* The catalogue panel */
.sv-hero-panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	justify-self: end;
	padding: 24px;
	background: rgb(255 255 255 / .92);
	backdrop-filter: blur(14px);
	border: 1px solid rgb(255 255 255 / .6);
	border-radius: 16px;
	box-shadow: var(--sv-shadow-lg);
}
.sv-panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sv-line);
}
.sv-panel-dial {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	background: var(--sv-grad-brand);
	color: #fff;
	box-shadow: 0 6px 16px rgb(5 33 92 / .25);
}
.sv-panel-dial .sv-icon { width: 22px; height: 22px; }
.sv-panel-title { display: block; font: 600 1.125rem/1.2 var(--sv-font-heading); color: var(--sv-ink); }
.sv-panel-sub { display: block; font-size: 14px; color: var(--sv-text-3); }

.sv-panel-rows { display: grid; }
.sv-panel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--sv-line);
	font-size: 15px;
	text-decoration: none;
	color: var(--sv-text);
	transition: color var(--sv-dur);
}
.sv-panel-row:hover { color: var(--sv-blue); }
.sv-panel-row .sv-icon { width: 18px; height: 18px; color: var(--sv-teal); }
.sv-panel-row-name { font-weight: 500; }
.sv-panel-row-meta {
	margin-left: auto;
	font: 600 11px/1.4 var(--sv-font-body);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sv-teal);
	white-space: nowrap;
}
.sv-panel-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	font-size: 14px;
	color: var(--sv-text-3);
}
.sv-panel-foot .sv-icon { width: 16px; height: 16px; color: var(--sv-teal); }

@media (min-width: 1024px) {
	.sv-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (max-width: 1023px) {
	.sv-hero-scrim { background: linear-gradient(160deg, rgb(5 33 92 / .92), rgb(10 58 122 / .86)); }
	.sv-hero-panel { display: none; }
	.sv-hero-inner { min-height: 0; padding: 80px 0; }
}

/* Trust band */
.sv-stats-strip { padding: 0; }
.sv-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding: 48px 0;
}
.sv-stat {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	min-width: 0;
}
.sv-stat-k {
	font: 700 1.75rem/1.1 var(--sv-font-heading);
	letter-spacing: -.02em;
	color: #fff;
}
.sv-stat-v { font-size: 14px; color: var(--sv-text-2); margin-top: 4px; }
@media (min-width: 1024px) {
	.sv-stat + .sv-stat { border-left: 1px solid var(--sv-line); padding-left: 32px; }
}
@media (max-width: 1023px) {
	.sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
	.sv-stats { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   8. Cards, product tiles, engagement cards, sectors, proof
   ============================================================ */

.sv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--sv-card-bg);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow-sm);
	overflow: hidden;
	transition: transform var(--sv-dur), box-shadow var(--sv-dur), border-color var(--sv-dur);
}
.sv-card:hover {
	transform: var(--sv-lift);
	box-shadow: var(--sv-shadow-lg);
	border-color: rgb(var(--sv-blue-rgb) / .35);
}
.sv-card > * { margin: 0; }

/* Photo / tinted media well at the top of a product tile */
.sv-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: -24px -24px 8px;
	overflow: hidden;
	background: var(--sv-grad-soft);
}
.sv-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sv-dur-slow) var(--sv-ease);
}
.sv-card:hover .sv-card-media img { transform: scale(1.04); }
.sv-card-media--tint { display: grid; place-items: center; }
.sv-card-media--tint > .sv-icon { width: 56px; height: 56px; color: var(--sv-blue); }
.sv-card:nth-child(3n+2) .sv-card-media--tint,
.sv-reveal:nth-child(3n+2) > .sv-card .sv-card-media--tint { background: var(--sv-teal-50); }
.sv-card:nth-child(3n+2) .sv-card-media--tint > .sv-icon,
.sv-reveal:nth-child(3n+2) > .sv-card .sv-card-media--tint > .sv-icon { color: var(--sv-teal); }
.sv-card-disc {
	position: absolute;
	left: 20px;
	bottom: -24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--sv-blue);
	display: grid;
	place-items: center;
	box-shadow: var(--sv-shadow);
}
.sv-card-disc .sv-icon { width: 22px; height: 22px; }
.sv-card-media + .sv-card-head { justify-content: flex-end; }
.sv-card-media--photo + .sv-card-head { padding-top: 12px; }
.sv-card-media + .sv-card-head:empty { display: none; }

.sv-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sv-card-title { font-size: 1.25rem; }
.sv-card-title a { color: inherit; text-decoration: none; transition: color var(--sv-dur); }
.sv-card:hover .sv-card-title a { color: var(--sv-accent-fg); }
.sv-card-lead { font-size: 16px; color: var(--sv-text-2); }

.sv-card-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--sv-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.sv-mini-list { display: grid; gap: 8px; font-size: 14px; color: var(--sv-text-2); }
.sv-mini-list li { display: flex; gap: 10px; align-items: flex-start; }
.sv-mini-list .sv-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--sv-teal); }
.sv-ink .sv-mini-list .sv-icon { color: var(--sv-teal-lt); }

.sv-replaces {
	padding: 12px 14px;
	border-radius: var(--sv-r-sm);
	background: var(--sv-paper);
	font-size: 14px;
	color: var(--sv-text-2);
}
.sv-replaces span {
	display: block;
	font: 600 11px/1.4 var(--sv-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sv-text-3);
	margin-bottom: 2px;
}

/* Two ways to work */
.sv-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-grid-gap); }
@media (max-width: 860px) { .sv-ways { grid-template-columns: 1fr; } }

.sv-way {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	background: var(--sv-card-bg);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-lg);
	box-shadow: var(--sv-shadow);
	overflow: hidden;
	transition: transform var(--sv-dur), box-shadow var(--sv-dur), border-color var(--sv-dur);
}
.sv-way:hover { transform: var(--sv-lift); box-shadow: var(--sv-shadow-lg); border-color: rgb(var(--sv-blue-rgb) / .25); }
.sv-way--dark {
	background: var(--sv-ink);
	background-image: var(--sv-glow-blue), var(--sv-glow-teal);
	background-repeat: no-repeat;
	border-color: transparent;
}
.sv-way-title { font-size: 1.5rem; }
@media (min-width: 1024px) { .sv-way-title { font-size: 1.75rem; } }
.sv-way-foot { margin-top: auto; padding-top: 8px; }

.sv-way-figure {
	aspect-ratio: 16 / 9;
	margin: -32px -32px 16px;
	overflow: hidden;
	background: var(--sv-grad-soft);
	color: var(--sv-ink);
}
.sv-way--dark .sv-way-figure { background: var(--sv-ink-2); color: #fff; }
.sv-way-figure svg,
.sv-way-figure img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform var(--sv-dur-slow) var(--sv-ease);
}
.sv-way:hover .sv-way-figure svg,
.sv-way:hover .sv-way-figure img { transform: scale(1.04); }

/* Figures */
.sv-figure-svg { display: block; }
.sv-fig-accent { fill: var(--sv-accent-fg); }
.sv-fig-accent-stroke { stroke: var(--sv-accent-fg); fill: none; }

/* Sectors we serve */
.sv-sectors {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 1023px) { .sv-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .sv-sectors { grid-template-columns: 1fr; } }
.sv-sector {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow-sm);
	text-decoration: none;
	color: var(--sv-text);
	font: 600 16px/1.3 var(--sv-font-body);
	transition: transform var(--sv-dur), box-shadow var(--sv-dur), border-color var(--sv-dur), color var(--sv-dur);
}
a.sv-sector:hover {
	transform: var(--sv-lift);
	box-shadow: var(--sv-shadow);
	border-color: rgb(var(--sv-blue-rgb) / .25);
	color: var(--sv-blue);
}
.sv-sector .sv-disc { width: 44px; height: 44px; }
.sv-sector .sv-disc .sv-icon { width: 20px; height: 20px; }

/* Proof band */
.sv-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 860px) { .sv-proof { grid-template-columns: 1fr; } }
.sv-proof-item {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 28px;
	background: var(--sv-teal-50);
	border-radius: var(--sv-r-lg);
}
.sv-proof-item:nth-child(3n+2) { background: var(--sv-blue-50); }
.sv-proof-k {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sv-teal);
}
.sv-proof-item:nth-child(3n+2) .sv-proof-k { color: var(--sv-blue); }
.sv-proof-item h3 { font-size: 1.125rem; }
.sv-proof-item h3 a { color: inherit; text-decoration: none; }
.sv-proof-item h3 a:hover { color: var(--sv-blue); }
.sv-proof-item p { font-size: 15px; color: var(--sv-text-2); }

/* ============================================================
   9. Delivery process — ghost numerals
   ============================================================ */

.sv-timeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 32px;
	counter-reset: sv-step;
}
@media (min-width: 768px) { .sv-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; } }

.sv-tl-item {
	position: relative;
	display: block;
	padding-top: 40px;
	counter-increment: sv-step;
}
.sv-tl-item::before {
	content: counter(sv-step, decimal-leading-zero);
	position: absolute;
	top: -24px;
	left: -8px;
	font: 700 4.5rem/1 var(--sv-font-heading);
	letter-spacing: -.02em;
	color: rgb(var(--sv-blue-rgb) / .16);
	pointer-events: none;
}
.sv-tl-node { display: none; }
.sv-tl-card { position: relative; }
.sv-tl-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.sv-tl-step {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sv-tl-body { font-size: 16px; color: var(--sv-text-2); }
.sv-tl-body p + p { margin-top: 8px; }

.sv-tl-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sv-line);
}
@media (max-width: 560px) { .sv-tl-split { grid-template-columns: 1fr; } }
.sv-tl-split dt {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sv-blue);
	margin-bottom: 4px;
}
.sv-tl-split dd { font-size: 14px; color: var(--sv-text-2); }

.sv-tl-item.is-gate .sv-tl-card {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-top: 3px solid var(--sv-teal-bright);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow);
}
.sv-tl-flag {
	display: inline-block;
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sv-teal);
	margin-bottom: 12px;
}

/* ============================================================
   10. Service-level table
   ============================================================ */

.sv-table-wrap {
	background: #fff;
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow);
	overflow: hidden;
}
.sv-table { width: 100%; border-collapse: collapse; }
.sv-table th, .sv-table td {
	padding: 16px 24px;
	text-align: left;
	font-size: 16px;
	border-bottom: 1px solid var(--sv-line);
	vertical-align: top;
}
.sv-table thead th {
	background: var(--sv-blue);
	color: #fff;
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 0;
}
.sv-table tbody tr:nth-child(even) { background: rgb(228 236 255 / .5); }
.sv-table tbody tr:last-child th,
.sv-table tbody tr:last-child td { border-bottom: 0; }
.sv-table tbody th { font: 600 1.125rem/1.3 var(--sv-font-heading); letter-spacing: -.01em; }
.sv-sev { color: var(--sv-text); }
.sv-footnote { margin-top: 24px; font-size: 14px; color: var(--sv-text-3); max-width: 40rem; }

@media (max-width: 760px) {
	.sv-table thead { display: none; }
	.sv-table, .sv-table tbody, .sv-table tr, .sv-table th, .sv-table td { display: block; width: 100%; }
	.sv-table tr { padding: 8px 0 16px; border-bottom: 1px solid var(--sv-line); }
	.sv-table tbody tr:last-child { border-bottom: 0; }
	.sv-table th, .sv-table td { border: 0; padding: 6px 24px; }
	.sv-table td::before {
		content: attr(data-label);
		display: block;
		font: 600 12px/1.4 var(--sv-font-body);
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--sv-blue);
	}
	.sv-table tbody th { padding-top: 16px; }
}

/* ============================================================
   11. Contact + forms
   ============================================================ */

.sv-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: stretch;
}
@media (max-width: 940px) { .sv-contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.sv-contact-grid .sv-section-head { margin-bottom: 0; }

.sv-contact-panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--sv-r-lg);
	padding: 40px;
	min-height: 100%;
	box-shadow: var(--sv-shadow);
}
.sv-contact-panel-media { position: absolute; inset: 0; z-index: 0; }
.sv-contact-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.sv-contact-panel-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(5 33 92 / .70) 0%, rgb(5 33 92 / .94) 100%);
}
.sv-contact-panel--plain { background: var(--sv-grad-brand); }
.sv-contact-panel-inner { position: relative; z-index: 1; }
.sv-contact-panel .sv-lead { color: rgb(255 255 255 / .8); }

.sv-contact-methods { display: grid; margin-top: 32px; }
.sv-cmethod {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sv-line);
	text-decoration: none;
	color: var(--sv-text);
}
.sv-cmethod:first-child { border-top: 1px solid var(--sv-line); }
.sv-cmethod .sv-badge-icon {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sv-blue);
	color: #fff;
}
.sv-cmethod:nth-child(even) .sv-badge-icon { background: var(--sv-teal); }
.sv-ink .sv-cmethod .sv-badge-icon { background: var(--sv-blue); color: #fff; }
.sv-ink .sv-cmethod:nth-child(even) .sv-badge-icon { background: var(--sv-teal-bright); color: #fff; }
.sv-cmethod .sv-badge-icon .sv-icon { width: 18px; height: 18px; }
.sv-cmethod-text { display: grid; }
.sv-cmethod-label {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sv-text-3);
}
.sv-cmethod-value { font-weight: 500; font-size: 17px; transition: color var(--sv-dur); }
.sv-cmethod:hover .sv-cmethod-value { color: var(--sv-accent-fg); }

.sv-hours {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sv-text-3);
}
.sv-hours .sv-icon { width: 16px; height: 16px; }

.sv-form {
	padding: 32px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-lg);
	box-shadow: var(--sv-shadow-lg);
	scroll-margin-top: 96px;
}
@media (min-width: 1024px) { .sv-form { padding: 40px; } }
.sv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .sv-form-grid { grid-template-columns: 1fr; } }
.sv-field { display: grid; gap: 6px; }
.sv-field--wide { grid-column: 1 / -1; }
.sv-field label { font: 600 14px/1.4 var(--sv-font-body); color: var(--sv-text-2); }
.sv-req { color: var(--sv-blue); }

.sv-form input[type="text"],
.sv-form input[type="email"],
.sv-form input[type="tel"],
.sv-form select,
.sv-form textarea {
	width: 100%;
	font: 400 16px/1.5 var(--sv-font-body);
	color: var(--sv-text);
	background: #fff;
	border: 1px solid var(--sv-line-2);
	border-radius: var(--sv-r-sm);
	padding: 12px 16px;
	transition: border-color var(--sv-dur), box-shadow var(--sv-dur);
}
.sv-form textarea { resize: vertical; min-height: 128px; }
.sv-form input:focus, .sv-form select:focus, .sv-form textarea:focus {
	outline: none;
	border-color: var(--sv-blue);
	box-shadow: 0 0 0 3px rgb(26 86 214 / .18);
}
.sv-form ::placeholder { color: var(--sv-text-4); opacity: 1; }

.sv-form-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.sv-form-note { font-size: 14px; color: var(--sv-text-3); max-width: 34ch; }

.sv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sv-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: var(--sv-r-sm);
	margin-bottom: 24px;
	font-size: 16px;
}
.sv-notice p { margin-top: 2px; color: var(--sv-text-2); }
.sv-notice ul { margin: 6px 0 0 18px; list-style: disc; }
.sv-notice .sv-icon { width: 20px; height: 20px; margin-top: 2px; }
.sv-notice--ok { background: var(--sv-teal-50); color: var(--sv-text); }
.sv-notice--ok .sv-icon { color: var(--sv-teal); }
.sv-notice--error { background: rgb(180 35 24 / .06); border-color: rgb(180 35 24 / .3); color: var(--sv-error); }

/* ============================================================
   12. Call-to-action band — the one gradient surface
   ============================================================ */

.sv-cta { position: relative; overflow: hidden; padding: 112px 0; background: var(--sv-grad); }
.sv-cta::after {
	content: "";
	position: absolute;
	width: 640px;
	height: 640px;
	right: -200px;
	top: -200px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(23 168 161 / .45), transparent);
	pointer-events: none;
}
.sv-cta-dial {
	position: absolute;
	width: 900px;
	height: 900px;
	right: -260px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .22;
	color: #fff;
	pointer-events: none;
}
.sv-cta-inner { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; text-align: center; }
.sv-cta h2 { color: #fff; margin-bottom: 24px; }
.sv-cta p { color: rgb(255 255 255 / .85); font-size: 18px; margin: 0 auto 40px; max-width: 40rem; }
.sv-cta .sv-btn-row { justify-content: center; }
.sv-cta .sv-btn--ghost { color: #fff; border-color: rgb(255 255 255 / .5); }
.sv-cta .sv-btn--ghost:hover { background: rgb(255 255 255 / .12); color: #fff; border-color: #fff; }
@media (max-width: 1023px) { .sv-cta { padding: 88px 0; } .sv-cta-dial { right: -400px; } }

/* ============================================================
   13. Page head, breadcrumb, product single, prose, lists
   ============================================================ */

.sv-page-head {
	padding: 56px 0 48px;
	background: var(--sv-grad-soft);
}
.sv-page-head h1 { margin-bottom: 16px; }
.sv-page-head-row { display: flex; gap: 20px; align-items: flex-start; }
.sv-page-head-row .sv-badge-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sv-grad-brand);
	color: #fff;
	box-shadow: 0 6px 16px rgb(5 33 92 / .25);
}
.sv-page-head-row .sv-badge-icon .sv-icon { width: 26px; height: 26px; }
.sv-page-head-row .sv-lead { margin-top: 12px; }

.sv-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sv-text-3);
	margin-bottom: 24px;
}
.sv-breadcrumb a { color: var(--sv-text-3); text-decoration: none; transition: color var(--sv-dur); }
.sv-breadcrumb a:hover { color: var(--sv-blue); }
.sv-breadcrumb .sv-icon { width: 12px; height: 12px; color: var(--sv-text-4); }

.sv-meta-row { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 24px; }
.sv-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }

.sv-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 64px;
	align-items: start;
}
@media (max-width: 960px) { .sv-product-layout { grid-template-columns: 1fr; gap: 48px; } }

.sv-aside { position: sticky; top: 96px; display: grid; gap: 24px; }
@media (max-width: 960px) { .sv-aside { position: static; } }
.sv-aside-card {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow-sm);
}
.sv-aside-card h3 { font-size: 1.125rem; margin-bottom: 20px; }
.sv-aside-list { display: grid; gap: 14px; }
.sv-aside-list div { display: grid; gap: 2px; }
.sv-aside-list dt {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sv-text-3);
}
.sv-aside-list dd { font-size: 16px; color: var(--sv-text); }
.sv-aside-copy { font-size: 14px; color: var(--sv-text-2); margin-bottom: 16px; }

.sv-product-plate {
	position: relative;
	aspect-ratio: 21 / 9;
	margin-bottom: 40px;
	overflow: hidden;
	border-radius: var(--sv-r-lg);
	box-shadow: var(--sv-shadow);
}
.sv-product-plate img { width: 100%; height: 100%; object-fit: cover; }
.sv-product-plate svg { width: 100%; height: 100%; }
.sv-product-plate--figure { background: var(--sv-ink); color: #fff; --sv-accent-fg: var(--sv-teal-lt); }
.sv-figure { margin-bottom: 40px; }
.sv-figure img { width: 100%; border-radius: var(--sv-r-lg); }

.sv-subhead { margin: 48px 0 24px; }

.sv-prose { max-width: 68ch; color: var(--sv-text-2); }
.sv-prose > * + * { margin-top: 1.1em; }
.sv-prose h2, .sv-prose h3, .sv-prose h4 { color: var(--sv-text); }
.sv-prose h2 { font-size: 1.75rem; margin-top: 1.8em; }
@media (min-width: 768px) { .sv-prose h2 { font-size: 2rem; } }
.sv-prose h3 { margin-top: 1.6em; }
.sv-prose ul, .sv-prose ol { padding-left: 1.3em; }
.sv-prose ul { list-style: disc; }
.sv-prose ol { list-style: decimal; }
.sv-prose li + li { margin-top: .4em; }
.sv-prose blockquote {
	border-left: 3px solid var(--sv-blue);
	border-radius: 0 var(--sv-r-sm) var(--sv-r-sm) 0;
	background: var(--sv-blue-50);
	padding: 16px 24px;
	font: 500 1.25rem/1.45 var(--sv-font-heading);
	color: var(--sv-text);
}
.sv-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	background: rgb(var(--sv-ink-rgb) / .05);
	border: 1px solid var(--sv-line);
	border-radius: 4px;
	padding: 1px 5px;
}
.sv-prose pre { background: var(--sv-ink); color: #fff; padding: 20px; overflow-x: auto; border-radius: var(--sv-r); }
.sv-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.sv-prose table { width: 100%; border-collapse: collapse; }
.sv-prose th, .sv-prose td { border: 1px solid var(--sv-line); padding: 10px 12px; text-align: left; }
.sv-prose img { border-radius: var(--sv-r); }

.sv-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .sv-feature-list { grid-template-columns: 1fr; } }
.sv-feature-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-sm);
	font-size: 15px;
}
.sv-feature-list .sv-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--sv-teal); }

/* Post lists */
.sv-post-list { display: grid; gap: 16px; }
.sv-post {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow-sm);
	transition: transform var(--sv-dur), box-shadow var(--sv-dur);
}
.sv-post:hover { transform: var(--sv-lift); box-shadow: var(--sv-shadow); }
.sv-post h2 { font-size: 1.5rem; margin-bottom: 8px; }
.sv-post h2 a { color: inherit; text-decoration: none; transition: color var(--sv-dur); }
.sv-post h2 a:hover { color: var(--sv-blue); }
.sv-post-meta {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sv-text-3);
	margin-bottom: 12px;
}
.sv-post p { color: var(--sv-text-2); font-size: 16px; }
.sv-post .sv-link { margin-top: 16px; }

.sv-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.sv-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sv-line-2);
	border-radius: var(--sv-r-sm);
	color: var(--sv-text-2);
	text-decoration: none;
	font-size: 14px;
	transition: color var(--sv-dur), border-color var(--sv-dur);
}
.sv-pagination .page-numbers:hover { border-color: var(--sv-blue); color: var(--sv-blue); }
.sv-pagination .page-numbers.current { background: var(--sv-blue); border-color: var(--sv-blue); color: #fff; }

.sv-empty {
	text-align: center;
	padding: 80px 24px;
	color: var(--sv-text-3);
	font: 600 1.5rem/1.3 var(--sv-font-heading);
	background: #fff;
	border: 1px dashed var(--sv-line-3);
	border-radius: var(--sv-r);
}
.sv-empty .sv-badge-icon { display: inline-flex; margin: 0 auto 16px; }
.sv-empty p + p { font: 400 16px/1.6 var(--sv-font-body); margin-top: 8px; }

.sv-search-block { margin-bottom: 40px; }
.sv-searchform { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }
.sv-searchform input[type="search"] {
	flex: 1 1 200px;
	font: 400 16px/1.5 var(--sv-font-body);
	color: var(--sv-text);
	background: var(--sv-white);
	border: 1px solid var(--sv-line-2);
	border-radius: var(--sv-r-sm);
	padding: 12px 16px;
}
.sv-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--sv-blue);
	box-shadow: 0 0 0 3px rgb(26 86 214 / .18);
}

/* ============================================================
   14. Footer
   ============================================================ */

.sv-footer { padding: 80px 0 40px; }
.sv-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgb(255 255 255 / .14);
}
@media (max-width: 940px) { .sv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.sv-footer-brand { display: inline-flex; margin-bottom: 24px; color: #fff; text-decoration: none; }
.sv-footer-brand img { height: 72px; width: auto; }
.sv-footer-brand .sv-brand-text { font: 700 1.5rem/1 var(--sv-font-heading); letter-spacing: -.02em; }
.sv-footer-about { font-size: 16px; color: var(--sv-text-2); max-width: 40ch; }
.sv-footer h4 {
	font: 600 12px/1.4 var(--sv-font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-teal-lt);
	margin-bottom: 20px;
}
.sv-footer-links { display: grid; gap: 12px; font-size: 14px; }
.sv-footer a { color: var(--sv-text-2); text-decoration: none; transition: color var(--sv-dur); }
.sv-footer a:hover { color: var(--sv-teal-lt); }
.sv-footer-hours { font-size: 14px; color: var(--sv-text-3); margin-top: 16px; }
.sv-footer-bottom {
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--sv-text-3);
}
.sv-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   15. Admin bar
   ============================================================ */

body.admin-bar .sv-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .sv-header { top: 46px; }
}