/*
 * The PCGP Pro: theme styles.
 *
 * Mobile first: base rules are for small screens and min-width queries add
 * the larger layouts. Colours, type and spacing are custom properties on
 * :root, so one change here restyles the site.
 *
 * Contents
 *   1.  Fonts
 *   2.  Tokens
 *   3.  Base and reset
 *   4.  Typography
 *   5.  Layout helpers
 *   6.  Buttons and forms
 *   7.  Header and navigation
 *   8.  Hero and hero illustration
 *   9.  Highlights strip
 *   10. Sections and section heads
 *   11. Cards (services, posts)
 *   12. Split layouts and feature tiles
 *   13. Free tools
 *   14. Process steps
 *   15. Testimonials
 *   16. FAQ
 *   17. Quote section and Contact Form 7
 *   18. Inner page hero
 *   19. Service pages
 *   20. Prose (page and post content)
 *   21. Call-to-action band
 *   22. Footer
 *   23. Listings, pagination, posts, comments, 404
 *   24. VP plugin bridge
 *   25. Motion
 *   26. Accessibility utilities
 *   27. Print
 *
 * @package ThePCGPPro
 * @author  Steve Austen, The PCGP
 */

/* ═══════════════════════════════════════════
   1. Fonts (self-hosted, Latin subset)
   ═══════════════════════════════════════════
   Archivo is a variable font with weight and width axes; its heavy italic
   echoes the slanted lettering of the logo. Inter carries the body text.
   Self-hosting avoids a third-party request (and the privacy question
   that comes with Google Fonts) and lets the two main files be preloaded. */
@font-face {
	font-family: "Archivo";
	src: url("../assets/fonts/Archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	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: "Archivo";
	src: url("../assets/fonts/Archivo-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
	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: "Inter";
	src: url("../assets/fonts/Inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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;
}

/* ═══════════════════════════════════════════
   2. Tokens
   ═══════════════════════════════════════════
   Navy and electric blue come straight from the logo (#0F172A and
   #3B82F6). Text colours are chosen to pass WCAG AA on the surface they
   sit on; the ratio is noted beside each. */
:root {
	/* Navy scale: backgrounds for the dark sections. */
	--navy-950: #060a14;
	--navy-900: #0b1120;
	--navy-800: #111a2e;
	--navy-700: #1a2540;
	--navy-600: #27365a;

	/* Electric blue scale. */
	--blue-200: #bfdbfe;
	--blue-300: #93c5fd; /* Text on navy: 10.9:1. */
	--blue-400: #60a5fa; /* Text on navy: 7.6:1. */
	--blue-500: #3b82f6; /* Logo blue: decoration and large type only. */
	--blue-600: #2563eb; /* Button fill: white text 5.2:1. */
	--blue-700: #1d4ed8; /* Links on white: 6.7:1. */
	--blue-800: #1e40af;
	--cyan-400: #22d3ee; /* Accents on navy only. */

	/* Light surfaces and text. */
	--white: #fff;
	--mist: #f3f6fb;
	--cloud: #e2e8f0;
	--border-strong: #cbd5e1;
	--ink: #0b1120;       /* Headings on white: 18.9:1. */
	--text: #334155;      /* Body on white: 10.4:1. */
	--muted: #526179;     /* Secondary on white: 6.4:1; on mist 5.9:1. */

	/* Text on navy. */
	--on-dark: #e6edf7;       /* 15.9:1. */
	--on-dark-muted: #a3b2c9; /* 8.6:1. */
	--dark-line: rgba(148, 163, 184, 0.16);

	/* Status. */
	--success: #22c55e;
	--error: #b91c1c;

	/* Focus ring: dark blue on light surfaces, redefined for dark ones. */
	--focus: var(--blue-700);

	/* Type. */
	--font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Spacing and shape. */
	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--section-pad: clamp(72px, 9vw, 128px);
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 22px;
	--header-h: 72px;

	/* Shadows. */
	--shadow-card: 0 24px 48px -24px rgba(11, 17, 32, 0.35);
	--shadow-float: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 1024px) {
	:root {
		--header-h: 84px;
	}
}

/* ═══════════════════════════════════════════
   3. Base and reset
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

img {
	display: block;
}

a {
	color: var(--blue-700);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* Anything the keyboard can land on in a dark context gets a light ring. */
.site-header,
.hero,
.page-hero,
.section-dark,
.site-footer,
.included-card {
	--focus: var(--blue-300);
}

.cta-band {
	--focus: var(--white);
}

/* Anchored sections stop below the sticky header, not under it. */
[id] {
	scroll-margin-top: calc(var(--header-h) + 24px);
}

main:focus {
	outline: none;
}

hr {
	border: 0;
	border-top: 1px solid var(--cloud);
	margin: 2.5em 0;
}

.icon {
	width: 24px;
	height: 24px;
	flex: none;
}

.icon-sm {
	width: 18px;
	height: 18px;
}

/* ═══════════════════════════════════════════
   4. Typography
   ═══════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Page-level headings lean forward like the logo. */
h1,
h2 {
	font-style: italic;
	font-stretch: 106%;
}

h1 {
	font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
}

h2 {
	font-size: clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
}

h3 {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h4 {
	font-size: 1.1rem;
}

p {
	margin: 0 0 1em;
}

/* The display style used for hero headings. */
.display {
	font-weight: 900;
	font-stretch: 112%;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

/* Highlighted words: an electric-blue gradient where supported, plain
   light blue everywhere else (and in forced-colours mode). */
.hl {
	color: var(--blue-400);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hl {
		background: linear-gradient(95deg, var(--blue-300) 0%, var(--blue-500) 45%, var(--cyan-400) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		/* Keep the italic overhang inside the painted box. */
		padding-right: 0.08em;
	}
}

.lead {
	color: var(--muted);
	font-size: clamp(1.075rem, 0.4vw + 1rem, 1.25rem);
	line-height: 1.6;
}

/* Small uppercase label above section headings. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--blue-700);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

.section-dark .eyebrow,
.page-hero .eyebrow,
.hero .eyebrow {
	color: var(--blue-300);
}

/* The pill version used in the heroes. */
.eyebrow-pill {
	padding: 8px 14px;
	border: 1px solid rgba(96, 165, 250, 0.35);
	border-radius: 999px;
	background: rgba(59, 130, 246, 0.12);
	letter-spacing: 0.1em;
}

.eyebrow-pill::before {
	display: none;
}

.pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cyan-400);
	box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
}

/* ═══════════════════════════════════════════
   5. Layout helpers
   ═══════════════════════════════════════════ */
.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* ═══════════════════════════════════════════
   6. Buttons and forms
   ═══════════════════════════════════════════ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease-out);
}

.btn:hover {
	text-decoration: none;
}

.btn svg {
	width: 18px;
	height: 18px;
}

.btn-arrow {
	transition: transform 0.25s var(--ease-out);
}

.btn:hover .btn-arrow {
	transform: translateX(4px);
}

.btn-lg {
	min-height: 56px;
	padding: 14px 28px;
	font-size: 1.05rem;
}

.btn-sm {
	min-height: 44px;
	padding: 8px 18px;
	font-size: 0.95rem;
}

.btn-block {
	width: 100%;
}

.btn-primary {
	background: var(--blue-600);
	color: var(--white);
	box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.8);
}

.btn-primary:hover {
	background: var(--blue-700);
	color: var(--white);
	box-shadow: 0 16px 32px -12px rgba(37, 99, 235, 0.95);
	transform: translateY(-2px);
}

.btn-ghost {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
}

.btn-ghost:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.btn-dark {
	background: var(--navy-900);
	color: var(--white);
}

.btn-dark:hover {
	background: var(--blue-700);
	color: var(--white);
	transform: translateY(-2px);
}

.btn-outline {
	border-color: var(--border-strong);
	background: var(--white);
	color: var(--ink);
}

.btn-outline:hover {
	border-color: var(--blue-600);
	color: var(--blue-700);
}

.btn-light {
	background: var(--white);
	color: var(--navy-900);
	box-shadow: 0 12px 28px -12px rgba(6, 10, 20, 0.6);
}

.btn-light:hover {
	background: #eff6ff;
	color: var(--navy-900);
	transform: translateY(-2px);
}

/* Text inputs share one look; the dark variant applies inside navy areas. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

input::placeholder,
textarea::placeholder {
	color: #64748b; /* 4.8:1 on white. */
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--blue-600);
	/* A transparent outline keeps a visible ring in Windows high contrast. */
	outline: 2px solid transparent;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

textarea {
	min-height: 150px;
	resize: vertical;
}

select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.section-dark input[type="text"],
.section-dark input[type="search"],
.page-hero input[type="search"] {
	border-color: rgba(148, 163, 184, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.section-dark input::placeholder,
.page-hero input::placeholder {
	color: #8fa1bb; /* 6.9:1 on navy. */
}

.section-dark input:focus,
.page-hero input:focus {
	border-color: var(--blue-400);
	box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* An input and a button on one row from phone-landscape width upwards. */
.inline-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

@media (min-width: 560px) {
	.inline-form {
		flex-direction: row;
	}

	.inline-form input {
		flex: 1;
	}

	.inline-form .btn {
		flex: none;
	}
}

/* ═══════════════════════════════════════════
   7. Header and navigation
   ═══════════════════════════════════════════
   Two modes, chosen by the space available rather than a fixed width:

   - Drawer (the base styles): logo, quote button and menu button; the
     menu slides in from the right over a dimmed page. Used on phones and
     tablets, and on any screen where the full menu would not fit.
   - Bar (min-width 1024px, when the header is not .is-compact): the
     whole menu on one line.

   js/site.js measures the bar and adds .is-tight (the phone number shrinks
   to an icon) and then .is-compact (switch to the drawer) when the menu
   would otherwise wrap or overflow. Without JavaScript the 1024px
   breakpoint still applies and nothing ever wraps, because every item is
   nowrap. */

/* Solid navy at the top of the page (it sits over the white body there),
   then frosted glass once the page scrolls beneath it. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--dark-line);
	background: var(--navy-900);
	color: var(--on-dark);
	transition: box-shadow 0.3s, background-color 0.3s;
}

.site-header.is-scrolled {
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.site-header.is-scrolled {
		background: rgba(11, 17, 32, 0.8);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
	}
}

/* Keep the sticky header clear of the WordPress admin bar. */
.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	.admin-bar .site-header {
		top: 0;
	}
}

.header-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.site-logo {
	display: block;
	flex: none;
	border-radius: 6px;
}

.site-logo img {
	width: 160px;
	height: auto;
}

@media (min-width: 1024px) {
	.site-logo img {
		width: 196px;
	}
}

/* ---------- Drawer mode (base) ---------- */

/* The drawer mode's own bar: a quote button and the menu button. */
.header-quick {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* The quote button joins the menu button once there is room beside the logo. */
.header-quick .btn {
	display: none;
	white-space: nowrap;
}

@media (min-width: 480px) {
	.header-quick .btn {
		display: inline-flex;
	}
}

.menu-toggle {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(148, 163, 184, 0.3);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.menu-toggle:hover {
	border-color: rgba(148, 163, 184, 0.6);
	background: rgba(255, 255, 255, 0.08);
}

.menu-toggle .icon {
	grid-area: 1 / 1;
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
	display: block;
}

/* The drawer: full width on phones, a 420px panel on anything wider. */
.site-nav {
	position: fixed;
	top: var(--nav-top, var(--header-h));
	right: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	padding: 8px 24px 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-left: 1px solid var(--dark-line);
	background: var(--navy-900);
	box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.6);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.35s var(--ease-out), visibility 0.35s;
}

.site-nav.is-open {
	visibility: visible;
	transform: none;
}

/* Dims the page behind the drawer; a click on it closes the menu. */
.nav-backdrop {
	position: fixed;
	inset: var(--nav-top, var(--header-h)) 0 0 0;
	z-index: 98;
	background: rgba(6, 10, 20, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.nav-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.nav-backdrop {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

/* Stop the page scrolling behind the open drawer. */
.nav-open {
	overflow: hidden;
}

.site-nav .menu,
.site-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu > li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	border-bottom: 1px solid var(--dark-line);
}

.site-nav .menu > li > a {
	padding: 16px 0;
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 800;
	text-decoration: none;
	/* Rounds the keyboard focus ring to match the rest of the design. */
	border-radius: 8px;
}

.site-nav .menu > li > a:focus-visible {
	outline-offset: 2px;
}

.site-nav .menu > li > a:hover,
.site-nav .menu > .current-menu-item > a {
	color: var(--blue-300);
}

.submenu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--on-dark-muted);
	cursor: pointer;
}

.submenu-toggle:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.submenu-toggle svg {
	transition: transform 0.25s;
}

.submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.site-nav .sub-menu {
	display: none;
	grid-column: 1 / -1;
	padding: 0 0 14px;
}

.site-nav .is-open-sub > .sub-menu {
	display: block;
}

.site-nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--on-dark);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu .current-menu-item > a {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.menu-title {
	display: block;
}

.menu-desc {
	display: block;
	margin-top: 2px;
	color: var(--on-dark-muted);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
}

/* Phone and quote button sit at the foot of the drawer. */
.nav-actions {
	display: grid;
	gap: 12px;
	margin-top: auto;
	padding-top: 28px;
}

.nav-actions .btn {
	width: 100%;
}

.nav-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--on-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nav-phone:hover {
	color: var(--white);
	text-decoration: underline;
}

/* ---------- Bar mode ---------- */
@media (min-width: 1024px) {
	.site-header:not(.is-compact) .header-quick,
	.site-header:not(.is-compact) .nav-backdrop {
		display: none;
	}

	.site-header:not(.is-compact) .site-nav {
		position: static;
		flex: 1;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		/* Lets the bar be measured: content that does not fit overflows
		   the nav rather than stretching the header. */
		min-width: 0;
		width: auto;
		padding: 0;
		overflow: visible;
		border: 0;
		background: none;
		box-shadow: none;
		visibility: visible;
		transform: none;
		transition: none;
		white-space: nowrap;
	}

	/* Pushed right with an auto margin, not justify-content: flex-end, so a
	   menu that is too long overflows to the right, where it can be
	   measured (overflow off the left edge is invisible to scrollWidth). */
	.site-header:not(.is-compact) .site-nav .menu {
		display: flex;
		flex: none;
		align-items: center;
		gap: 2px;
		margin-left: auto;
	}

	.site-header:not(.is-compact) .site-nav .menu > li {
		position: relative;
		display: flex;
		align-items: center;
		border: 0;
	}

	.site-header:not(.is-compact) .site-nav .menu > li > a {
		padding: 10px 12px;
		border-radius: 8px;
		color: #cbd5e1;
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-style: normal;
		font-weight: 600;
	}

	.site-header:not(.is-compact) .site-nav .menu > li > a:hover,
	.site-header:not(.is-compact) .site-nav .menu > .current-menu-item > a,
	.site-header:not(.is-compact) .site-nav .menu > .current-menu-ancestor > a {
		background: rgba(255, 255, 255, 0.06);
		color: var(--white);
	}

	.site-header:not(.is-compact) .site-nav .menu-item-has-children > a {
		padding-right: 2px;
	}

	.site-header:not(.is-compact) .submenu-toggle {
		width: 28px;
		height: 40px;
		margin-left: -2px;
	}

	.site-header:not(.is-compact) .submenu-toggle:hover {
		background: none;
	}

	/* Dropdown panel: opens on hover, keyboard focus and the toggle. */
	.site-header:not(.is-compact) .site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: block;
		width: max-content;
		min-width: 260px;
		max-width: 340px;
		padding: 8px;
		border-radius: var(--radius);
		background: var(--white);
		box-shadow: 0 30px 60px -20px rgba(6, 10, 20, 0.55), 0 0 0 1px rgba(11, 17, 32, 0.06);
		white-space: normal;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0.2s;
	}

	/* A transparent bridge so the pointer can cross the gap to the panel. */
	.site-header:not(.is-compact) .site-nav .sub-menu::before {
		content: "";
		position: absolute;
		inset: -12px 0 auto;
		height: 12px;
	}

	.site-header:not(.is-compact) .site-nav li:hover > .sub-menu,
	.site-header:not(.is-compact) .site-nav li:focus-within > .sub-menu,
	.site-header:not(.is-compact) .site-nav .is-open-sub > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(4px);
	}

	.site-header:not(.is-compact) .site-nav .sub-menu a {
		padding: 10px 14px;
		color: var(--ink);
		font-size: 0.95rem;
	}

	.site-header:not(.is-compact) .site-nav .sub-menu a:hover,
	.site-header:not(.is-compact) .site-nav .sub-menu .current-menu-item > a {
		background: var(--mist);
		color: var(--blue-700);
	}

	.site-header:not(.is-compact) .site-nav .sub-menu .menu-desc {
		color: var(--muted);
	}

	.site-header:not(.is-compact) .site-nav .sub-menu :focus-visible {
		--focus: var(--blue-700);
	}

	.site-header:not(.is-compact) .nav-actions {
		display: flex;
		flex: none;
		align-items: center;
		gap: 14px;
		margin: 0;
		padding: 0;
	}

	.site-header:not(.is-compact) .nav-actions .btn {
		width: auto;
	}

	.site-header:not(.is-compact) .nav-phone {
		color: #cbd5e1;
		font-size: 0.92rem;
	}

	/* Tight: the phone becomes an icon button; the number stays as its
	   accessible name. */
	.site-header.is-tight:not(.is-compact) .nav-phone {
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid rgba(148, 163, 184, 0.3);
		border-radius: 12px;
	}

	.site-header.is-tight:not(.is-compact) .nav-phone:hover {
		border-color: rgba(148, 163, 184, 0.6);
		background: rgba(255, 255, 255, 0.06);
	}

	.site-header.is-tight:not(.is-compact) .nav-phone-number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ═══════════════════════════════════════════
   8. Hero and hero illustration
   ═══════════════════════════════════════════ */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Top padding follows the screen height, so short laptop screens keep
	   the buttons above the fold; the bottom leaves room for the strip that
	   overlaps the hero. */
	padding: clamp(36px, 6vh, 88px) 0 clamp(150px, 14vw, 190px);
	background: var(--navy-900);
	color: var(--on-dark);
}

/* Background layers shared by the home hero and the inner page heroes:
   blue and cyan glows, a slanted light beam echoing the italic logo,
   and a faint grid that fades out towards the edges. */
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 55% 55% at 82% 18%, rgba(59, 130, 246, 0.34), transparent 70%),
		radial-gradient(ellipse 45% 45% at 5% 100%, rgba(34, 211, 238, 0.12), transparent 70%);
	pointer-events: none;
}

.hero-bg::before {
	content: "";
	position: absolute;
	top: -30%;
	right: 6%;
	width: 34%;
	height: 160%;
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0) 70%);
	transform: skewX(-20deg);
}

.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 25%, transparent 78%);
}

.hero-grid {
	display: grid;
	gap: 56px;
	align-items: center;
}

@media (min-width: 1024px) {
	/* The copy gets the larger share, so the headline sets in three lines. */
	.hero-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 56px;
	}
}

.hero h1 {
	margin-bottom: 20px;
	color: var(--white);
	/* Sized by width and by height (whichever is smaller), so the headline,
	   introduction and buttons all fit in the first screen on laptops as
	   well as large monitors. */
	font-size: clamp(2.5rem, min(4vw + 0.9rem, 7vh + 0.8rem), 4rem);
	text-wrap: balance;
}

.hero-lead {
	max-width: 54ch;
	margin: 0;
	color: var(--on-dark-muted);
	font-size: clamp(1.075rem, 0.45vw + 1rem, 1.25rem);
	line-height: 1.6;
}

.hero .btn-row {
	margin-top: 28px;
}

/* Reassurance and the phone number, under the buttons. */
.hero-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 16px 0 0;
	color: var(--on-dark-muted);
	font-size: 0.95rem;
}

.hero-note a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--white);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(147, 197, 253, 0.5);
	text-underline-offset: 4px;
}

.hero-note a:hover {
	text-decoration-color: var(--blue-300);
}

.hero-note .icon {
	color: var(--blue-300);
}

.hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	color: var(--on-dark);
	font-size: 0.95rem;
	font-weight: 500;
}

.hero-points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hero-points svg {
	padding: 3px;
	border-radius: 50%;
	background: rgba(34, 211, 238, 0.14);
	color: var(--cyan-400);
}

/* Illustration: a browser window showing a site, with status chips. */
.hero-visual {
	position: relative;
	width: 100%;
	max-width: 540px;
	margin-inline: auto;
	padding: 18px 0 30px;
}

.hv-window {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 18px;
	background: linear-gradient(180deg, #152039 0%, #0e1628 100%);
	box-shadow: var(--shadow-float), 0 0 90px -20px rgba(59, 130, 246, 0.45);
}

@media (min-width: 1024px) {
	.hv-window {
		transform: perspective(1400px) rotateY(-9deg) rotateX(4deg);
	}
}

.hv-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.hv-bar > span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f87171;
	opacity: 0.8;
}

.hv-bar > span:nth-child(2) {
	background: #fbbf24;
}

.hv-bar > span:nth-child(3) {
	background: #4ade80;
}

.hv-url {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	padding: 5px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--on-dark-muted);
	font-size: 0.75rem;
}

.hv-url .icon {
	width: 12px;
	height: 12px;
	color: var(--success);
}

.hv-body {
	display: grid;
	gap: 16px;
	padding: 18px;
}

.hv-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hv-nav i {
	width: 34px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
}

.hv-nav i:first-child {
	width: 58px;
	height: 10px;
	background: var(--blue-500);
}

.hv-nav b {
	width: 62px;
	height: 18px;
	margin-left: auto;
	border-radius: 6px;
	background: var(--blue-600);
}

.hv-hero {
	padding: 22px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(34, 211, 238, 0.08));
}

.hv-hero i {
	display: block;
	height: 14px;
	margin-bottom: 10px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.88);
}

.hv-hero .w80 {
	width: 82%;
}

.hv-hero .w60 {
	width: 58%;
}

.hv-hero .w40 {
	width: 44%;
}

.hv-hero .thin {
	height: 7px;
	margin-top: 16px;
	background: rgba(255, 255, 255, 0.38);
}

.hv-btns {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.hv-btns b {
	width: 84px;
	height: 24px;
	border-radius: 7px;
	background: var(--blue-500);
}

.hv-btns .alt {
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
}

.hv-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.hv-cards i {
	height: 64px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
}

.hv-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.92);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7);
	color: var(--on-dark-muted);
	font-size: 0.78rem;
	line-height: 1.3;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.hv-chip {
		background: rgba(15, 23, 42, 0.75);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

.hv-chip strong {
	display: block;
	color: var(--white);
	font-size: 0.9rem;
}

.hv-chip small {
	display: block;
	font-size: 0.75rem;
}

.hv-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(59, 130, 246, 0.18);
	color: var(--blue-300);
}

.hv-icon .icon {
	width: 20px;
	height: 20px;
}

.hv-ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: conic-gradient(var(--cyan-400), var(--blue-500) 98%, rgba(255, 255, 255, 0.1) 0);
}

.hv-ring::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: #0f172a;
}

.hv-ring span {
	position: relative;
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
}

.hv-score {
	bottom: 6px;
	left: -8px;
}

.hv-secure {
	top: 84px;
	right: -8px;
}

.hv-backup {
	display: none;
	right: 36px;
	bottom: -6px;
}

.hv-live {
	top: 0;
	left: 24px;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	color: var(--white);
	font-weight: 600;
}

.hv-live .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

@media (min-width: 560px) {
	.hv-backup {
		display: flex;
	}

	.hv-score {
		bottom: 64px;
		left: -28px;
	}

	.hv-secure {
		right: -28px;
	}
}

@media (max-width: 380px) {
	.hv-secure {
		display: none;
	}
}

/* ═══════════════════════════════════════════
   9. Highlights strip (overlaps the hero)
   ═══════════════════════════════════════════ */
.pillars {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * clamp(96px, 9vw, 120px));
}

.pillars-grid {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 40px 70px -30px rgba(11, 17, 32, 0.45), 0 0 0 1px rgba(11, 17, 32, 0.05);
	list-style: none;
}

/* Gradient rule along the top edge, like a status bar. */
.pillars-grid::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--cyan-400));
}

.pillar {
	padding: 26px 28px;
	border-bottom: 1px solid var(--cloud);
}

.pillar:last-child {
	border-bottom: 0;
}

.pillar strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 800;
	font-stretch: 106%;
	letter-spacing: -0.01em;
}

.pillar span {
	display: block;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.pillars-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pillar:nth-child(odd) {
		border-right: 1px solid var(--cloud);
	}

	.pillar:nth-last-child(-n + 2):nth-child(odd),
	.pillar:nth-last-child(-n + 2):nth-child(odd) ~ .pillar {
		border-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.pillars-grid {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}

	.pillar {
		padding: 32px 30px;
		border-right: 1px solid var(--cloud);
		border-bottom: 0;
	}

	.pillar:last-child {
		border-right: 0;
	}
}

/* ═══════════════════════════════════════════
   10. Sections and section heads
   ═══════════════════════════════════════════ */
.section {
	position: relative;
	padding: var(--section-pad) 0;
}

.section-tight {
	padding: 56px 0 0;
}

.section-light {
	background: var(--white);
}

.section-mist {
	background: var(--mist);
}

.section-dark {
	background: var(--navy-900);
	color: var(--on-dark);
}

.section-dark h2,
.section-dark h3 {
	color: var(--white);
}

.section-dark .lead {
	color: var(--on-dark-muted);
}

.section-dark a:not(.btn) {
	color: var(--blue-300);
}

/* Glowing navy sections: the same light as the hero, quieter. */
.section-glow {
	isolation: isolate;
	overflow: hidden;
}

.section-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 50% 60% at 0% 0%, rgba(59, 130, 246, 0.22), transparent 70%),
		radial-gradient(ellipse 40% 50% at 100% 100%, rgba(34, 211, 238, 0.1), transparent 70%);
}

/* The home page services follow the overlapping strip, so start closer. */
.pillars + .section {
	padding-top: clamp(64px, 7vw, 104px);
}

.section-head {
	max-width: 760px;
	margin-bottom: clamp(40px, 5vw, 56px);
}

.section-head h2 {
	margin-bottom: 16px;
}

.section-head .lead {
	margin: 0;
}

.section-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(40px, 5vw, 56px);
}

.section-head-row .section-head {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   11. Cards (services, posts)
   ═══════════════════════════════════════════ */
.card-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 32px 28px;
	border: 1px solid var(--cloud);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s;
}

/* A gradient rule that sweeps in along the top edge on hover. */
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 3px;
	background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}

.card.is-linked:hover,
.card.is-linked:focus-within,
.post-card:hover,
.post-card:focus-within {
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: var(--shadow-card);
	transform: translateY(-4px);
}

.card.is-linked:hover::before,
.card.is-linked:focus-within::before,
.post-card:hover::before,
.post-card:focus-within::before {
	transform: scaleX(1);
}

.card h3 {
	margin-bottom: 10px;
	font-size: 1.3rem;
}

.card p {
	margin: 0;
	color: var(--muted);
}

.card-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	border-radius: 16px;
	background: var(--navy-900);
	box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3), 0 12px 24px -12px rgba(11, 17, 32, 0.6);
	color: var(--blue-400);
	transition: background-color 0.3s, color 0.3s, transform 0.35s var(--ease-out);
}

.card-icon .icon {
	width: 26px;
	height: 26px;
}

.card.is-linked:hover .card-icon {
	background: var(--blue-600);
	color: var(--white);
	transform: rotate(-6deg) scale(1.05);
}

.card-icon,
.card-more {
	align-self: flex-start;
}

/* Pushed to the bottom so the links line up across a row of cards. */
.card-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--blue-700);
	font-size: 0.95rem;
	font-weight: 700;
}

.card-more svg {
	transition: transform 0.25s var(--ease-out);
}

.card:hover .card-more svg {
	transform: translateX(4px);
}

/* The heading link covers the whole card, so the card is one target. */
a.stretched {
	color: inherit;
	text-decoration: none;
}

a.stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

a.stretched:focus-visible {
	outline: none;
}

a.stretched:focus-visible::after {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
	border-radius: var(--radius-lg);
}

/* Post cards. */
.post-card {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.post-card-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--navy-900);
}

.post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.post-card:hover .post-card-media img {
	transform: scale(1.04);
}

.post-card-media.is-empty {
	display: grid;
	place-items: center;
	background:
		radial-gradient(ellipse 70% 80% at 80% 10%, rgba(59, 130, 246, 0.4), transparent 70%),
		var(--navy-900);
	color: var(--blue-400);
}

.post-card-media.is-empty .icon {
	width: 44px;
	height: 44px;
	opacity: 0.7;
}

.post-card-body {
	padding: 24px 26px 28px;
}

.post-meta {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 500;
}

.post-card h3 {
	font-size: 1.2rem;
}

/* ═══════════════════════════════════════════
   12. Split layouts and feature tiles
   ═══════════════════════════════════════════ */
.split {
	display: grid;
	gap: 48px;
}

@media (min-width: 1024px) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 72px;
		align-items: start;
	}

	.split-faq {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	.split-detail {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.split > .split-copy {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

.split-copy .prose {
	margin-bottom: 28px;
}

.feature-grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.feature-grid-3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

.feature {
	padding: 24px;
	border: 1px solid var(--cloud);
	border-radius: var(--radius);
	background: var(--white);
}

.feature h3 {
	margin: 16px 0 6px;
	font-size: 1.08rem;
}

.feature p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.feature-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(34, 211, 238, 0.12));
	color: var(--blue-700);
}

.feature-icon .icon {
	width: 22px;
	height: 22px;
}

.feature-card {
	padding: 30px 28px;
	background: var(--mist);
	border-color: transparent;
}

/* ═══════════════════════════════════════════
   13. Free tools
   ═══════════════════════════════════════════ */
.tool-grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 960px) {
	.tool-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tool-grid.is-single {
		grid-template-columns: minmax(0, 720px);
	}
}

.tool-panel {
	padding: clamp(28px, 4vw, 40px);
	border: 1px solid var(--dark-line);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.tool-panel .card-icon {
	background: rgba(59, 130, 246, 0.16);
	box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
	color: var(--blue-300);
}

.tool-panel h3 {
	font-size: 1.5rem;
}

.tool-panel p {
	color: var(--on-dark-muted);
}

/* ═══════════════════════════════════════════
   14. Process steps
   ═══════════════════════════════════════════ */
.steps {
	display: grid;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 640px) {
	.steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.steps {
		grid-template-columns: repeat(4, 1fr);
		gap: 28px;
	}
}

.step {
	position: relative;
	padding-top: 28px;
	border-top: 2px solid var(--cloud);
	counter-increment: step;
}

.step::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

/* Big outlined italic numerals: decorative, the list order carries meaning. */
.step::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	color: var(--blue-500);
	font-family: var(--font-display);
	font-size: 3.6rem;
	font-style: italic;
	font-weight: 900;
	font-stretch: 112%;
	line-height: 1;
}

@supports (-webkit-text-stroke: 1px black) {
	.step::before {
		color: transparent;
		-webkit-text-stroke: 1.5px var(--blue-500);
	}
}

.step h3 {
	margin-bottom: 8px;
}

.step p {
	margin: 0;
	color: var(--muted);
}

/* ═══════════════════════════════════════════
   15. Testimonials
   ═══════════════════════════════════════════ */
.testimonial-grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 900px) {
	.testimonial-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

.testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px;
	border: 1px solid var(--dark-line);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.04);
}

.testimonial blockquote {
	flex: 1;
	margin: 0 0 24px;
}

.testimonial blockquote::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	color: var(--blue-500);
	font-family: var(--font-display);
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 1;
}

.testimonial p {
	margin: 0;
	color: var(--on-dark);
	font-size: 1.08rem;
	line-height: 1.6;
}

.testimonial figcaption strong {
	display: block;
	color: var(--white);
}

.testimonial figcaption span {
	color: var(--on-dark-muted);
	font-size: 0.9rem;
}

/* ═══════════════════════════════════════════
   16. FAQ
   ═══════════════════════════════════════════ */
.faq-list {
	display: grid;
	gap: 12px;
}

.faq {
	border: 1px solid var(--cloud);
	border-radius: var(--radius);
	background: var(--white);
	transition: border-color 0.25s, box-shadow 0.25s;
}

.section-light .faq {
	background: var(--mist);
	border-color: transparent;
}

.faq[open] {
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 16px 32px -24px rgba(11, 17, 32, 0.4);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border-radius: var(--radius);
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.faq summary::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a minus. */
.faq-mark {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--navy-900);
}

.faq-mark::before,
.faq-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: var(--white);
	transition: transform 0.3s var(--ease-out);
}

.faq-mark::after {
	transform: rotate(90deg);
}

.faq[open] .faq-mark {
	background: var(--blue-600);
}

.faq[open] .faq-mark::after {
	transform: rotate(0deg);
}

.faq-answer {
	padding: 0 22px 20px;
	color: var(--text);
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   17. Quote section and Contact Form 7
   ═══════════════════════════════════════════ */
.quote-grid {
	display: grid;
	gap: 48px;
	align-items: start;
}

@media (min-width: 1024px) {
	.quote-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 72px;
	}
}

.contact-list {
	display: grid;
	gap: 18px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.contact-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--on-dark);
}

.contact-list small {
	display: block;
	color: var(--on-dark-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.section-dark .contact-list a {
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
}

.section-dark .contact-list a:hover {
	text-decoration: underline;
}

.contact-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.16);
	color: var(--blue-300);
}

.quote-card {
	position: relative;
	overflow: hidden;
	padding: 28px 22px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-float);
	color: var(--text);
	--focus: var(--blue-700);
}

.quote-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

@media (min-width: 640px) {
	.quote-card {
		padding: 40px;
	}
}

.quote-card h3 {
	color: var(--ink);
}

.wpcf7-form {
	display: grid;
	gap: 18px;
}

@media (min-width: 640px) {
	.wpcf7-form {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Contact Form 7's hidden fields and response box span the grid. */
.wpcf7-form > .hidden-fields-container,
.wpcf7-form > fieldset,
.wpcf7-form > .wpcf7-response-output,
.wpcf7-form > .qf-full,
.wpcf7-form > .pcgp-hp {
	grid-column: 1 / -1;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 600;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-not-valid {
	border-color: var(--error) !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--error);
	font-size: 0.85rem;
	font-weight: 500;
}

.qf-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.qf-help {
	flex: 1 1 220px;
	margin: 0;
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border-width: 2px;
	border-radius: 12px;
	font-size: 0.95rem;
}

.wpcf7-spinner {
	margin: 0;
}

/* The honeypot: invisible to people, still in the form for bots. */
.pcgp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ═══════════════════════════════════════════
   18. Inner page hero
   ═══════════════════════════════════════════ */
.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 88px);
	background: var(--navy-900);
	color: var(--on-dark);
}

.page-hero h1 {
	max-width: 20ch;
	margin-bottom: 18px;
	color: var(--white);
	font-size: clamp(2.25rem, 3.6vw + 1rem, 4rem);
}

.page-hero .hero-lead {
	max-width: 62ch;
}

.page-meta {
	margin: 0 0 8px;
	color: var(--on-dark-muted);
	font-size: 0.95rem;
}

.page-hero-grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

.page-hero-badge {
	display: none;
}

@media (min-width: 960px) {
	.page-hero.has-icon .page-hero-grid {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.page-hero-badge {
		display: grid;
		place-items: center;
		width: 200px;
		height: 200px;
		margin-right: 24px;
		border: 1px solid rgba(96, 165, 250, 0.32);
		border-radius: 44px;
		background: linear-gradient(145deg, rgba(59, 130, 246, 0.28), rgba(34, 211, 238, 0.06));
		box-shadow: 0 0 100px -20px rgba(59, 130, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
		color: var(--blue-300);
		transform: rotate(-6deg);
	}

	.page-hero-badge .icon {
		width: 92px;
		height: 92px;
		stroke-width: 1.4;
	}
}

/* ═══════════════════════════════════════════
   19. Service pages
   ═══════════════════════════════════════════ */
.included-card {
	padding: clamp(28px, 4vw, 40px);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(ellipse 80% 60% at 100% 0%, rgba(59, 130, 246, 0.3), transparent 70%),
		var(--navy-900);
	box-shadow: var(--shadow-card);
	color: var(--on-dark);
}

@media (min-width: 1024px) {
	.included-card {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

.included-card h3 {
	color: var(--white);
	font-size: 1.4rem;
}

.tick-list {
	margin: 20px 0 28px;
	padding: 0;
	list-style: none;
}

.tick-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--dark-line);
}

.tick-list li:last-child {
	border-bottom: 0;
}

.tick-list .icon {
	margin-top: 3px;
	color: var(--cyan-400);
}

.tool-section .vpdc,
.tool-section .vpsc {
	margin-inline: auto;
}

/* ═══════════════════════════════════════════
   20. Prose (page and post content)
   ═══════════════════════════════════════════ */
.prose {
	max-width: 72ch;
	color: var(--text);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.page-body .prose,
.article .prose,
.comments,
.post-navigation,
.empty-state {
	margin-inline: auto;
}

.prose-wide {
	max-width: none;
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.1rem);
}

.prose h3 {
	margin: 1.8em 0 0.5em;
	font-size: 1.35rem;
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 1.25em;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li {
	margin-bottom: 0.45em;
}

.prose li::marker {
	color: var(--blue-600);
}

.prose blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--blue-500);
	color: var(--ink);
	font-size: 1.15rem;
	font-style: italic;
}

.prose img,
.prose figure {
	border-radius: var(--radius);
}

.prose figure {
	margin: 2em 0;
}

.prose figcaption,
.wp-caption-text {
	margin-top: 8px;
	color: var(--muted);
	font-size: 0.875rem;
}

.prose code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--mist);
	font-size: 0.9em;
}

.prose pre {
	overflow-x: auto;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--navy-900);
	color: var(--on-dark);
	font-size: 0.9rem;
}

.prose pre code {
	padding: 0;
	background: none;
}

.prose table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.prose th,
.prose td {
	padding: 12px;
	border-bottom: 1px solid var(--cloud);
	text-align: left;
}

.prose th {
	color: var(--ink);
}

.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.aligncenter {
	margin-inline: auto;
}

.section-dark .prose,
.included-card .prose {
	color: var(--on-dark);
}

.section-dark .prose h2,
.section-dark .prose h3 {
	color: var(--white);
}

.page-figure {
	max-width: 1140px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.page-figure img {
	width: 100%;
	/* Capped so a tall or square original (uploads made before this theme
	   added its 16:9 size) never fills several screens. */
	max-height: min(70vh, 640px);
	object-fit: cover;
}


/* ═══════════════════════════════════════════
   21. Call-to-action band
   ═══════════════════════════════════════════ */
.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 7vw, 88px) 0;
	/* Every stop keeps white text above 5:1. */
	background: linear-gradient(115deg, var(--blue-800) 0%, var(--blue-700) 45%, var(--blue-600) 100%);
	color: var(--white);
}

/* Two slanted light beams, like the italic strokes of the logo. */
.cta-band::before,
.cta-band::after {
	content: "";
	position: absolute;
	top: -40%;
	z-index: -1;
	width: 22%;
	height: 180%;
	background: rgba(255, 255, 255, 0.07);
	transform: skewX(-20deg);
}

.cta-band::before {
	right: 18%;
}

.cta-band::after {
	right: 4%;
	width: 8%;
	background: rgba(255, 255, 255, 0.1);
}

.cta-inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

@media (min-width: 960px) {
	.cta-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cta-inner .btn-row {
		flex: none;
		margin: 0;
	}
}

.cta-band h2 {
	margin-bottom: 10px;
	color: var(--white);
	font-size: clamp(1.8rem, 2.4vw + 1rem, 2.75rem);
}

.cta-band p {
	max-width: 56ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.1rem;
}

.cta-band .btn-row {
	margin-top: 0;
}

.cta-band .btn-ghost {
	border-color: rgba(255, 255, 255, 0.55);
}

/* ═══════════════════════════════════════════
   22. Footer
   ═══════════════════════════════════════════ */
.site-footer {
	padding-top: clamp(56px, 7vw, 88px);
	background: var(--navy-950);
	color: var(--on-dark-muted);
	font-size: 0.95rem;
}

.footer-grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
		gap: 48px;
	}
}

.footer-logo img {
	width: 200px;
}

.footer-brand p {
	max-width: 38ch;
	margin: 20px 0 24px;
}

.footer-heading {
	margin: 0 0 18px;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-links,
.footer-contact,
.social-links,
.legal-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links {
	display: grid;
	gap: 10px;
}

.site-footer a {
	color: var(--on-dark-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--white);
	text-decoration: underline;
}

.footer-contact {
	display: grid;
	gap: 14px;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	overflow-wrap: anywhere;
}

.footer-contact .icon {
	margin-top: 3px;
	color: var(--blue-400);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.social-links a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 12px;
	color: var(--on-dark);
	transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out);
}

.social-links a:hover {
	border-color: var(--blue-600);
	background: var(--blue-600);
	color: var(--white);
	transform: translateY(-2px);
}

.social-links .icon {
	width: 20px;
	height: 20px;
}

.footer-bar {
	margin-top: clamp(48px, 6vw, 72px);
	padding: 22px 0;
	border-top: 1px solid rgba(148, 163, 184, 0.12);
	font-size: 0.875rem;
}

.footer-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.footer-bar p {
	margin: 0;
}

.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

/* ═══════════════════════════════════════════
   23. Listings, pagination, posts, comments, 404
   ═══════════════════════════════════════════ */
.pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: clamp(40px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}

.pagination a,
.pagination span {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--cloud);
	border-radius: 12px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.pagination a:hover {
	border-color: var(--blue-600);
	color: var(--blue-700);
}

.pagination .current {
	border-color: var(--navy-900);
	background: var(--navy-900);
	color: var(--white);
}

.empty-state {
	max-width: 640px;
	padding: 48px 32px;
	border-radius: var(--radius-lg);
	background: var(--mist);
	text-align: center;
}

.empty-state .search-form {
	max-width: 480px;
	margin-inline: auto;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.tag-list li {
	margin: 0;
}

.tag-list a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mist);
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.tag-list a:hover {
	background: var(--navy-900);
	color: var(--white);
}

.post-navigation {
	max-width: 72ch;
	margin-top: 56px;
}

.post-navigation .nav-links {
	display: grid;
	gap: 16px;
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: repeat(2, 1fr);
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 18px 22px;
	border: 1px solid var(--cloud);
	border-radius: var(--radius);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.25s;
}

.post-navigation a:hover {
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: var(--shadow-card);
}

.post-navigation small {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.comments {
	max-width: 72ch;
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--cloud);
}

.comment-list {
	padding: 0 !important;
	list-style: none;
}

.comment-list .children {
	list-style: none;
}

.comment-body {
	margin-bottom: 24px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--mist);
}

.comment-meta img {
	display: inline-block;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: middle;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--ink);
	font-weight: 600;
}

.comment-form p {
	margin-bottom: 18px;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.not-found {
	padding-bottom: clamp(80px, 10vw, 140px);
}

.big-404 {
	margin: 0 0 8px;
	color: var(--blue-500);
	font-family: var(--font-display);
	font-size: clamp(6rem, 18vw, 12rem);
	font-style: italic;
	font-weight: 900;
	font-stretch: 115%;
	line-height: 0.85;
	letter-spacing: -0.04em;
}

@supports (-webkit-text-stroke: 1px black) {
	.big-404 {
		color: transparent;
		-webkit-text-stroke: 2px var(--blue-500);
	}
}

.not-found .search-form {
	max-width: 540px;
	margin-top: 32px;
}

.not-found .search-form input {
	border-color: rgba(148, 163, 184, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

/* ═══════════════════════════════════════════
   24. VP plugin bridge
   ═══════════════════════════════════════════
   VP Site Check and VP Domain Check read these custom properties (with
   violet fallbacks), so defining them here repaints both tools in The
   PCGP's navy and blue with no change to the plugins. Pass is green,
   warning amber, and failure keeps the plugins' own pink. */
:root {
	--bg: var(--navy-900);
	--bg2: var(--navy-800);
	--line: var(--navy-600);
	--fg: var(--on-dark);
	--fg2: var(--on-dark-muted);
	--accent: var(--blue-500);
	--radius: 16px;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--v2: var(--blue-800);
	--v3: var(--success);
	--v5: var(--on-dark);
	--lilac: #fbbf24;
	--lilac2: #fcd34d;
}

/* The plugins' buttons pick up the theme's button look. */
.vpsc button[type="submit"],
.vpdc button[type="submit"] {
	min-height: 52px;
	padding: 12px 24px;
	border: 0;
	border-radius: 12px;
	background: var(--blue-600);
	color: var(--white);
	font: 700 1rem/1.1 var(--font-body);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.25s var(--ease-out);
}

.vpsc button[type="submit"]:hover,
.vpdc button[type="submit"]:hover {
	background: var(--blue-700);
	transform: translateY(-2px);
}

.tool-section .prose {
	color: var(--on-dark);
}

/* The VP tools use the Violet Pixels theme's button classes: "btn primary"
   for the main action and a bare "btn" for the rest. Map them onto this
   theme's buttons, so they are never left as browser-default white boxes
   or as dark-blue text on navy. */
.btn.primary {
	background: var(--blue-600);
	color: var(--white);
	box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.8);
}

.btn.primary:hover {
	background: var(--blue-700);
	color: var(--white);
	transform: translateY(-2px);
}

/* A bare .btn: outlined, on white. */
.btn:not(.primary):not([class*="btn-"]) {
	border-color: var(--border-strong);
	background: var(--white);
	color: var(--ink);
}

.btn:not(.primary):not([class*="btn-"]):hover {
	border-color: var(--blue-600);
	color: var(--blue-700);
}

/* A bare .btn on navy: the ghost look. */
.section-dark .btn:not(.primary):not([class*="btn-"]),
.page-hero .btn:not(.primary):not([class*="btn-"]) {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
}

.section-dark .btn:not(.primary):not([class*="btn-"]):hover,
.page-hero .btn:not(.primary):not([class*="btn-"]):hover {
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

/* Technical records (DNS, TXT) are shown in <code>. The prose style for
   code is a pale chip, which on navy left near-white text on a near-white
   background; on navy it becomes a dark chip instead. */
.section-dark code,
.section-dark .prose code {
	background: rgba(255, 255, 255, 0.06);
	color: var(--on-dark);
}

/* The Violet Pixels mascot is that brand's character, not The PCGP's. */
.vpdc-vi,
.vpsc-vi {
	display: none !important;
}

/* The plugins' explainer sections reuse the Violet Pixels theme's "grid3"
   and "card" classes. On navy those cards take the tool-panel look rather
   than the white card used on light sections, so their headings stay
   readable. */
.grid3 {
	display: grid;
	gap: 16px;
	margin: 24px 0;
}

@media (min-width: 768px) {
	.grid3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

.section-dark .card {
	padding: 24px;
	border-color: var(--dark-line);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	color: var(--on-dark);
}

.section-dark .card h3 {
	font-size: 1.15rem;
}

.section-dark .card p {
	color: var(--on-dark-muted);
	font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   25. Motion
   ═══════════════════════════════════════════
   Everything here is off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: the copy rises in line by line on first load, then the
	   illustration settles into place. Pure CSS, so it starts with the
	   first paint rather than waiting for JavaScript. */
	.hero-copy > *,
	.page-hero-copy > * {
		animation: pcgp-rise 0.8s var(--ease-out) both;
	}

	.hero-copy > :nth-child(2),
	.page-hero-copy > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.hero-copy > :nth-child(3),
	.page-hero-copy > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.hero-copy > :nth-child(4),
	.page-hero-copy > :nth-child(4) {
		animation-delay: 0.24s;
	}

	.hero-copy > :nth-child(5) {
		animation-delay: 0.32s;
	}

	.hero-copy > :nth-child(6) {
		animation-delay: 0.4s;
	}

	.hero-visual {
		animation: pcgp-settle 1.1s var(--ease-out) 0.2s both;
	}

	.page-hero-badge {
		animation: pcgp-badge 1s var(--ease-out) 0.2s both;
	}

	/* Status chips float gently, out of step with each other. */
	.hv-chip {
		animation: pcgp-float 6s ease-in-out infinite alternate;
	}

	.hv-secure {
		animation-delay: -2s;
	}

	.hv-backup {
		animation-delay: -4s;
	}

	.hv-live {
		animation-duration: 5s;
	}

	.pulse {
		animation: pcgp-ping 2s ease-out infinite;
	}

	/* Scroll reveals: js/site.js adds .is-pending only to elements still
	   below the fold, then swaps it for .is-revealed as they arrive. */
	.reveal-ready [data-reveal] {
		transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
		transition-delay: var(--reveal-delay, 0s);
	}

	.reveal-ready [data-reveal].is-pending {
		opacity: 0;
		transform: translateY(28px);
	}
}

@keyframes pcgp-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pcgp-settle {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pcgp-badge {
	from {
		opacity: 0;
		transform: rotate(-16deg) scale(0.85);
	}

	to {
		opacity: 1;
		transform: rotate(-6deg);
	}
}

@keyframes pcgp-float {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 -8px;
	}
}

@keyframes pcgp-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
	}

	80%,
	100% {
		box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
	}
}

/* ═══════════════════════════════════════════
   26. Accessibility utilities
   ═══════════════════════════════════════════ */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: 10px;
	background: var(--white);
	color: var(--navy-900);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-float);
}

.skip-link:focus {
	top: 16px;
}

/* Windows high contrast: keep card and panel edges visible. */
@media (forced-colors: active) {
	.card,
	.feature,
	.tool-panel,
	.faq,
	.quote-card,
	.included-card,
	.pillars-grid {
		border: 1px solid CanvasText;
	}

	.hl {
		color: LinkText;
	}
}

/* ═══════════════════════════════════════════
   27. Print
   ═══════════════════════════════════════════ */
@media print {
	.site-header,
	.site-footer,
	.cta-band,
	.hero-visual,
	.hero-bg,
	.page-hero-badge,
	.quote-card {
		display: none !important;
	}

	.hero,
	.page-hero,
	.section-dark {
		background: none !important;
		color: #000 !important;
	}

	.hero h1,
	.page-hero h1,
	.section-dark h2 {
		color: #000 !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}