/* ==========================================================================
   service.css — light service detail pages (the SEO engine)
   White / slate-50, brand tokens only. Loaded ONLY on the Service Detail
   template (functions.php). Near-zero JS; motion is minimal and respects
   prefers-reduced-motion.
   ========================================================================== */

body.svc-light {
	background: var(--white);
	color:      var(--ink);
}

.svc-wrap {
	width:      min(100% - 2 * var(--space-3), 900px);
	margin-inline: auto;
}

/* --- Header ---------------------------------------------------------------- */

.svc-header {
	border-bottom: 1px solid var(--slate-200);
	background: var(--white);
}

.svc-header__inner {
	width: min(100% - 2 * var(--space-3), 900px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-2);
}

.svc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	text-decoration: none;
	font-family: var(--font-display);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	font-size: 1.375rem;
}

.svc-brand__logo { display: block; }
.svc-brand__onog { color: var(--onog-red); }
.svc-brand__sub  { color: var(--deep-navy); }

/* Narrow phones: the brand lockup + CTA collide on one row (space-between
   slides the wordmark under the button when content is wider than the row).
   Shrink both, and as a hard guarantee allow the row to wrap — if it still
   can't fit (wide font rendering on real Safari), the CTA drops to its own
   line instead of overlapping the wordmark. */
@media (max-width: 480px) {
	.svc-header__inner {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
	.svc-brand { font-size: 1rem; gap: 0.4rem; flex-shrink: 0; }
	.svc-brand__logo { width: 26px; height: 26px; }
	.svc-header__inner .btn--small {
		padding: 0.5rem 0.7rem;
		font-size: 0.6875rem;
		letter-spacing: 0.05em;
	}
}

/* --- Breadcrumb ------------------------------------------------------------ */

.svc-breadcrumb {
	background: var(--slate-50);
	border-bottom: 1px solid var(--slate-200);
	padding-block: var(--space-2);
	font-size: 0.8125rem;
}

.svc-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5ch;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--slate-400);
}

.svc-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.5ch;
	color: var(--slate-200);
}

.svc-breadcrumb a { color: var(--marine-blue); text-decoration: none; }
.svc-breadcrumb a:hover { text-decoration: underline; }
.svc-breadcrumb [aria-current="page"] { color: var(--slate-700); }

/* --- Body ------------------------------------------------------------------ */

.svc-body { padding-block: var(--space-6); }

.svc-hero { max-width: 42rem; }

.svc-eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--onog-red);
	margin: 0 0 var(--space-2);
}

.svc-h1 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	font-size: var(--text-h1);
	line-height: var(--leading-tight);
	color: var(--deep-navy);
	margin: 0 0 var(--space-3);
}

.svc-lede {
	font-size: 1.25rem;
	line-height: var(--leading-normal);
	color: var(--slate-700);
	margin: 0;
}

.svc-section { margin-top: var(--space-6); max-width: 46rem; }

.svc-h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	color: var(--ink);
	margin: 0 0 var(--space-3);
}

.svc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.svc-list li {
	position: relative;
	padding-inline-start: 1.75rem;
	font-size: 1.0625rem;
	line-height: var(--leading-normal);
	color: var(--slate-700);
}

.svc-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--onog-red);
	border-radius: 50%;
}

.svc-brands-intro {
	font-size: 1.0625rem;
	line-height: var(--leading-normal);
	color: var(--slate-700);
	margin: 0 0 var(--space-3);
}

.svc-brand-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.svc-brand-list li {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--deep-navy);
	background: var(--slate-50);
	border: 1px solid var(--slate-200);
	border-radius: var(--radius);
	padding: 0.4rem 0.9rem;
}

.svc-reassure p {
	font-size: 1.0625rem;
	line-height: var(--leading-normal);
	color: var(--slate-700);
	margin: 0;
}
.svc-reassure strong { color: var(--deep-navy); }

/* --- CTA block ------------------------------------------------------------- */

.svc-cta {
	margin-top: var(--space-6);
	background: var(--deep-navy);
	color: var(--white);
	border-radius: var(--radius);
	padding: var(--space-5) var(--space-4);
	text-align: center;
}

.svc-cta__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-1);
	color: var(--white);
}

.svc-cta__text {
	color: var(--slate-200);
	font-size: 1.0625rem;
	margin: 0 0 var(--space-3);
}

.svc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}

/* On the dark CTA panel, the red-outline button needs light text. */
.svc-cta .btn--outline {
	border-color: var(--white);
	color: var(--white);
}
.svc-cta .btn--outline:hover,
.svc-cta .btn--outline:focus-visible {
	background: var(--white);
	color: var(--deep-navy);
}

/* --- Footer ---------------------------------------------------------------- */

.svc-footer {
	margin-top: var(--space-7);
	border-top: 1px solid var(--slate-200);
	background: var(--slate-50);
	padding-block: var(--space-5) var(--space-3);
}

.svc-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-4);
	justify-content: space-between;
}

.svc-footer__brand {
	margin: 0;
	display: grid;
	gap: var(--space-1);
	max-width: 22rem;
}
.svc-footer__brand a {
	font-family: var(--font-display);
	letter-spacing: var(--tracking-wide);
	color: var(--deep-navy);
	text-decoration: none;
	font-size: 1.25rem;
}
.svc-footer__brand a strong { color: var(--onog-red); font-weight: inherit; }
.svc-footer__brand span { color: var(--slate-400); font-size: 0.8125rem; line-height: 1.5; }

.svc-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-1);
}
.svc-footer__nav a { color: var(--slate-700); text-decoration: none; font-size: 0.9375rem; }
.svc-footer__nav a:hover { color: var(--onog-red); }

.svc-footer__email { color: var(--marine-blue); font-weight: 600; text-decoration: none; }
.svc-footer__email:hover { text-decoration: underline; }
.svc-footer__linkedin { color: var(--marine-blue); font-weight: 600; text-decoration: none; }
.svc-footer__linkedin:hover { color: var(--onog-red); }

.svc-footer__copy {
	text-align: center;
	color: var(--slate-400);
	font-size: 0.8125rem;
	margin: var(--space-4) 0 0;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 560px) {
	.svc-body { padding-block: var(--space-5); }
	.svc-cta { padding: var(--space-4) var(--space-3); }
	.svc-cta__actions .btn { width: 100%; }
}

/* ==========================================================================
   Prose — long-form page content (privacy policy, terms, etc.)
   Used by page.php via the_content(). The .svc-wrap parent constrains width
   to 900px; .prose further tightens the measure to ~70ch for comfortable reading.
   ========================================================================== */

.page-hero {
	margin-bottom: var(--space-5);
}

.prose {
	max-width: 70ch;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--slate-700);
}

.prose h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	color: var(--ink);
	margin: var(--space-6) 0 var(--space-3);
}

.prose h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-h3);
	line-height: var(--leading-tight);
	color: var(--ink);
	margin: var(--space-5) 0 var(--space-2);
}

.prose p {
	margin: 0 0 var(--space-3);
}

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

.prose ul,
.prose ol {
	margin: 0 0 var(--space-3);
	padding-inline-start: 1.5rem;
	display: grid;
	gap: var(--space-2);
}

.prose li {
	line-height: var(--leading-normal);
}

.prose strong {
	font-weight: 700;
	color: var(--deep-navy);
}

.prose a {
	color: var(--marine-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose a:hover,
.prose a:focus-visible {
	color: var(--onog-red);
}

/* WP editor sometimes injects an empty <p> before/after HTML comment nodes —
   collapse any zero-height paragraphs so they don't create extra whitespace. */
.prose p:empty {
	display: none;
}

/* -----------------------------------------------------------------------
 * 404 — off-the-chart page. Centered, generous whitespace, big CTA home.
 * Reuses the light svc chrome (header/footer); only the body block is bespoke.
 * --------------------------------------------------------------------- */
.err-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 220px); /* fill space between slim header + footer */
	padding: var(--space-12, 6rem) 0;
}

.err-wrap {
	text-align: center;
	max-width: 640px;
}

.err-code {
	font-family: var(--font-display, "Bebas Neue"), sans-serif;
	font-size: clamp(5rem, 22vw, 11rem);
	line-height: 0.9;
	letter-spacing: 2px;
	color: var(--slate-200);
	margin: 0 0 var(--space-2, 0.5rem);
}

.err-h1 {
	margin: 0 0 var(--space-4, 1rem);
}

.err-lede {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--slate-700);
	margin: 0 auto var(--space-8, 2.5rem);
	max-width: 38ch;
}

.err-actions {
	display: flex;
	gap: var(--space-4, 1rem);
	justify-content: center;
	flex-wrap: wrap;
}