/*
Theme Name: Koine
Theme URI: https://koinecyber.com
Author: Koine Cyber
Author URI: https://koinecyber.com
Description: A custom theme for Koine Cyber, presenting its two-fold approach (refining technology and process, and people) and its growing family of companies, with a persistent scrolling logo ticker on every page.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koine
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	--navy:      #0a1f3c;
	--navy-3:    #113059;
	--ink:       #10233c;
	--body:      #48566b;
	--muted:     #7c8aa0;
	--line:      #e4e9f1;
	--paper:     #f5f8fc;
	--paper-2:   #eef3fa;
	--white:     #ffffff;
	--accent:    #2bb3c0;   /* Koine brand accent — decorative use only */
	--accent-2:  #3d7fd6;

	/* Text-safe variants. The brand accents are 2.5:1 and 4.0:1 on white, which
	   fails WCAG 1.4.3 for body-sized text. Use these anywhere the token colors
	   a glyph; keep the brand tokens for fills, rules, and gradients. */
	--accent-text:   #16707a;
	--accent-2-text: #2f63ad;
	--muted-text:    #5d6b80;

	--font-head: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1140px;
	--radius:    16px;
	--radius-sm: 10px;
	--shadow:    0 18px 40px -20px rgba(12, 32, 60, 0.35);
	--shadow-sm: 0 8px 24px -14px rgba(12, 32, 60, 0.3);

	--header-h:  74px;
	--ticker-h:  82px;

	/* No dark theme exists: without this, Chrome-on-Android's Auto Dark Theme
	   is free to invert the white bands while leaving the navy hero, footer,
	   and ticker alone — and to mangle every per-company color-mix() tint. */
	color-scheme: only light;
	accent-color: var(--accent-2);
}

::selection { background: var(--accent-2); color: #fff; }

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

html {
	scroll-behavior: smooth;
	/* Keep anchor targets and tabbed-to links clear of the sticky header and the
	   fixed ticker. Without the bottom value, tabbing parks short links
	   underneath the 82px ticker — a WCAG 2.2 SC 2.4.11 failure. */
	scroll-padding-top: calc(var(--header-h) + 12px);
	scroll-padding-bottom: calc(var(--ticker-h) + 12px);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Keep content clear of the fixed ticker at the bottom of the viewport. */
	padding-bottom: var(--ticker-h);
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--ink);
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }

a { color: var(--accent-2-text); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 13px 22px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	text-decoration: none;
	white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn--primary {
	background: linear-gradient(120deg, var(--accent-2), var(--accent));
	color: #fff;
	box-shadow: 0 10px 26px -12px rgba(61, 127, 214, 0.7);
}
.btn--primary:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(61, 127, 214, 0.85); }

.btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.35);
}
.btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }

/* ============================================================
   Header / navigation
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(9, 22, 43, 0.80);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.site-header.is-scrolled {
	background: rgba(7, 18, 36, 0.94);
	border-bottom-color: rgba(255,255,255,0.10);
	box-shadow: 0 12px 30px -20px rgba(0,0,0,0.6);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { height: 34px; width: auto; }
.brand__word {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 25px;
	letter-spacing: -0.01em;
	color: #fff;
	line-height: 1;
}
.brand__logo, .custom-logo { height: 40px; width: auto; }

.main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}
.nav-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
}
.nav-menu a {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 15.5px;
	color: #cdd8e8;
	text-decoration: none;
	position: relative;
	padding: 6px 0;
	transition: color .18s ease;
}
.nav-menu a:hover { color: #fff; }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: #7fd3dd; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 10px;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

/* ============================================================
   Sections / shared
   ============================================================ */
.band { padding: 88px 0; }
.band--intro { background: var(--white); }
.band--companies { background: var(--paper); }
/* The tile is opaque navy with fine light linework, so it repeats over the flat
   navy rather than tinting it. Cropped to its true 153x124 repeat unit, so the
   size is stated explicitly — letting it scale would reintroduce a seam. */
.band--lines {
	background: url("assets/img/pattern-tile.png") repeat top left / 153px 124px, var(--navy);
	color: #cdd8e8;
}
.band--values { background: var(--white); }
.band--others { background: var(--paper); }

.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-eyebrow {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin: 0 0 14px;
}
.band--lines .section-eyebrow { color: #6fd0da; }
.section-title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; }
.band--lines .section-title { color: #fff; }
.section-sub { color: var(--muted-text); font-size: 18px; margin: 0; }
.band--lines .section-sub { color: #a9b8cd; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 120% at 15% 0%, var(--navy-3) 0%, var(--navy) 55%, #071831 100%);
	color: #d7e2f1;
	padding: clamp(64px, 9vw, 108px) 0 clamp(64px, 9vw, 108px);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
}
/* Decorative hero art. Sits above the glows but below .hero__inner, which is
   position:relative and therefore already wins the stacking order.
   The ::after scrim is not optional: the headline is white and left-aligned, and
   the art's brightest region (the lit diamond) runs from about 55% across, so
   without it the last words of a wrapped line would sit on the bright area. */
.hero__art {
	position: absolute;
	inset: 0;
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.62;
}
.hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Holds ~0.82 alpha out to 62% — past the right edge of .hero__inner
	   (860px in a 1140px container) — and only then releases. An earlier
	   version faded from 32%, i.e. inside the text, and measured 3.3:1 on the
	   eyebrow against a 7.7:1 baseline. Keep the fade outside the text zone. */
	background: linear-gradient(90deg,
		#0a1f3c 0%,
		rgba(10, 31, 60, 0.93) 42%,
		rgba(10, 31, 60, 0.82) 62%,
		rgba(10, 31, 60, 0.18) 86%,
		rgba(10, 31, 60, 0) 100%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.hero__glow--1 { width: 460px; height: 460px; background: #1f6fd6; top: -120px; right: -80px; }
.hero__glow--2 { width: 420px; height: 420px; background: #14a3a1; bottom: -160px; left: -100px; opacity: 0.4; }

.hero__inner { position: relative; max-width: 860px; }
.hero__eyebrow {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7fd3dd;
	margin: 0 0 20px;
}
.hero__title {
	color: #fff;
	font-size: clamp(36px, 6.2vw, 66px);
	line-height: 1.04;
	margin: 0 0 22px;
}
.hero__title .hl {
	background: linear-gradient(120deg, #6fd0da, #7fb0ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Windows High Contrast strips backgrounds; transparent text would vanish. */
@media (forced-colors: active) {
	.hero__title .hl { background: none; color: inherit; }
}
.hero__lede {
	font-size: clamp(17px, 2.1vw, 21px);
	color: #b9c8dd;
	max-width: 640px;
	margin: 0 0 34px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero__family {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	list-style: none;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__family li a {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 500;
	color: #cdd8e8;
	padding: 7px 15px;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.hero__family li a:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }

/* ============================================================
   Intro band
   ============================================================ */
/* Secondary heading inside the intro band (the etymology, demoted below the
   definition). */
.band--intro__subtitle { font-size: 19px; margin: 34px 0 10px; color: var(--ink); }
.faq__all { text-align: center; margin: 26px 0 0; font-family: var(--font-head); font-weight: 600; }
.band--intro__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.band--intro__title { font-size: clamp(24px, 3.4vw, 34px); color: var(--ink); margin-bottom: 20px; }
.band--intro__text { font-size: 19px; color: var(--body); margin: 0; }

/* ============================================================
   Company cards grid
   ============================================================ */
.company-grid {
	display: grid;
	/* auto-fit, not a fixed count: four companies today, and any future count
	   reflows without an orphan card in a fractional-width track. Same
	   reasoning as .pillars-grid above. */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 26px;
}
.company-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 28px 28px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.company-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.company-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.company-card:hover::before { transform: scaleX(1); }
.company-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	text-indent: -9999px;
	overflow: hidden;
}
.company-card__top { margin-bottom: 22px; }
.company-card__cat {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent2);
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	padding: 6px 11px;
	border-radius: 999px;
}
.company-card__logo-wrap {
	height: 60px;
	display: flex;
	align-items: center;
	margin-bottom: 22px;
}
.company-card__logo { max-height: 52px; width: auto; max-width: 190px; object-fit: contain; }
.company-card__name { font-size: 23px; margin: 0 0 10px; color: var(--ink); }
.company-card__region {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	color: var(--accent2);
	margin: 0 0 14px;
}
.loc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	display: inline-block;
	flex: 0 0 auto;
}
.company-card__blurb { font-size: 15.5px; color: var(--body); margin: 0 0 20px; flex: 1; }
.company-card__more {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--accent2);
	display: inline-flex;
	gap: 7px;
	align-items: center;
}
.company-card:hover .company-card__more span { transform: translateX(3px); }
.company-card__more span { transition: transform .2s ease; }

/* ============================================================
   Service lines band (dark)
   ============================================================ */
.lines-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.line-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius);
	padding: 32px 30px;
}
.line-card__title { color: #fff; font-size: 22px; margin: 0 0 12px; }
.line-card__desc { color: #a9b8cd; font-size: 16px; margin: 0 0 18px; }
.line-card__tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; }
.line-card__tags a {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 500;
	color: #dbe6f4;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 999px;
	padding: 6px 13px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.line-card__tags a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); }

/* Two-fold approach pillars (dark band) */
/* auto-fit, not repeat(2): the two folds are data-driven, so a third would
   otherwise need a CSS edit to stop overflowing. */
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.pillar-card {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius);
	padding: 40px 36px;
}
/* Pillar art fades out downward so the body copy never sits on linework. The
   two pieces are a deliberate pair — geometric for technology, flowing for
   people — so they are keyed off the pillar array key, not hardcoded. */
.pillar-card__art {
	position: absolute;
	inset: 0;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.34;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.28) 52%, transparent 88%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.28) 52%, transparent 88%);
}
/* Lift the real content above the art layer. :not() keeps this from re-stacking
   the art on top of itself. */
.pillar-card > *:not(.pillar-card__art) { position: relative; }
.pillar-card__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: #6fd0da;
	margin-bottom: 16px;
}
.pillar-card__title { color: #fff; font-size: 27px; margin: 0 0 8px; }
.pillar-card__lead {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	color: #9fd8e0;
	margin: 0 0 16px;
}
.pillar-card__desc { color: #a9b8cd; font-size: 16.5px; margin: 0 0 22px; }
.pillar-card__tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; }
.pillar-card__tags a {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 500;
	color: #dbe6f4;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 999px;
	padding: 6px 13px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.pillar-card__tags a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); }

/* ============================================================
   Values
   ============================================================ */
.advantages-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.value__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--accent-text);
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}
.value__title { font-size: 19px; margin: 0 0 10px; }
.value__text { font-size: 15.5px; color: var(--body); margin: 0; }

/* ============================================================
   CTA band
   ============================================================ */
/* CTA art is scrimmed harder than the heroes because this text is centred —
   it crosses the middle of the frame, where the art is busiest. */
.cta {
	background:
		linear-gradient(180deg, rgba(10, 31, 60, 0.86) 0%, rgba(13, 39, 73, 0.90) 100%),
		url("assets/img/cta-bg.webp") center / cover no-repeat,
		linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
	color: #fff;
	text-align: center;
	padding: 78px 0;
}
.cta__inner { max-width: 640px; margin: 0 auto; }
.cta__title { color: #fff; font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 14px; }
.cta__text { color: #b9c8dd; font-size: 18px; margin: 0 0 28px; }

/* ============================================================
   FAQ (homepage) — visible Q&A + FAQPage schema
   ============================================================ */
.band--faq { background: var(--paper); }
.faq { max-width: 800px; margin: 0 auto; }
.faq__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open] {
	border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line));
	box-shadow: var(--shadow-sm);
}
.faq__q {
	cursor: pointer;
	list-style: none;
	padding: 20px 54px 20px 24px;
	position: relative;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 17.5px;
	color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--accent-2);
	border-bottom: 2px solid var(--accent-2);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 24px 22px; }
.faq__a p { margin: 0; color: var(--body); font-size: 16px; }

/* ============================================================
   Generic page hero + prose
   ============================================================ */
/* Interior page hero. The art is referenced relatively rather than through
   koine_art_url() because it is shared by every interior page and never varies —
   one cached stylesheet beats an inline style repeated on each template. The
   original radial gradient stays as the bottom layer, so a missing or 404ing
   file degrades to exactly what shipped before rather than to bare colour. */
.page-hero {
	background:
		linear-gradient(90deg,
			rgba(10, 31, 60, 0.97) 0%,
			rgba(10, 31, 60, 0.90) 45%,
			rgba(10, 31, 60, 0.84) 62%,
			rgba(10, 31, 60, 0.40) 100%),
		url("assets/img/page-hero-bg.webp") center right / cover no-repeat,
		radial-gradient(120% 120% at 20% 0%, var(--navy-3) 0%, var(--navy) 60%, #071831 100%);
	color: #d7e2f1;
	padding: clamp(70px, 9vw, 116px) 0 clamp(48px, 6vw, 72px);
}
/* The 404 art is the same composition carrying one detached diamond, so it only
   needs the image layer swapped — the scrim and fallback gradient still apply. */
.page-hero--404 {
	background-image:
		linear-gradient(90deg,
			rgba(10, 31, 60, 0.97) 0%,
			rgba(10, 31, 60, 0.90) 45%,
			rgba(10, 31, 60, 0.84) 62%,
			rgba(10, 31, 60, 0.40) 100%),
		url("assets/img/404.webp"),
		radial-gradient(120% 120% at 20% 0%, var(--navy-3) 0%, var(--navy) 60%, #071831 100%);
}
.page-hero__title { color: #fff; font-size: clamp(32px, 5vw, 52px); margin: 0 0 16px; }
.page-hero__lede { font-size: 19px; color: #b9c8dd; max-width: 680px; margin: 0; }

/* About hero with the Koine emblem badge */
.about-hero__grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 48px; align-items: center; }
.about-hero__badge { justify-self: center; }
.about-hero__badge img {
	width: 100%;
	max-width: 300px;
	height: auto;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 30px 60px -28px rgba(0,0,0,0.75);
}
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 26px; margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; }
.prose p { font-size: 17.5px; }
.prose ul { padding-left: 0; list-style: none; }
.prose-companies li {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: 16.5px;
	color: var(--body);
}
.prose-companies li a { color: var(--ink); }

/* Legal prose (privacy policy). The base .prose strips list markers because the
   About page uses <ul> as a link list; a legal document needs real bullets, so
   they are restored here rather than unset globally. */
.page-hero--legal .page-hero__lede { max-width: 620px; }
/* scroll-margin-top keeps a heading jumped to from the contents nav clear of the
   fixed site header instead of landing underneath it. */
.prose--legal h2 { font-size: 22px; margin: 44px 0 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose--legal p { margin: 0 0 16px; }
.prose--legal ul {
	list-style: disc;
	padding-left: 24px;
	margin: 0 0 20px;
}
.prose--legal ul li {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 10px;
	padding: 0;
	border: 0;
}
/* Contents nav on the terms page. scroll-margin-top keeps a jumped-to heading
   clear of the fixed site header instead of hiding it underneath. */
.legal-toc {
	margin: 0 0 40px;
	padding: 22px 26px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
}
/* Scoped with .prose--legal so it outweighs the .prose--legal h2 rule above —
   an equal-specificity .legal-toc__title would lose and render at 22px. */
.prose--legal .legal-toc__title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	color: var(--muted-text);
}
.legal-toc ol {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 32px;
}
.legal-toc li { margin-bottom: 6px; font-size: 16px; }
@media (max-width: 600px) {
	.legal-toc ol { columns: 1; }
}

.prose__address {
	font-style: normal;
	font-size: 17px;
	line-height: 1.75;
	color: var(--body);
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

/* ============================================================
   Company detail page
   ============================================================ */
.company-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--accent) 24%, var(--navy)) 0%, var(--navy) 55%, #071831 100%);
	color: #d7e2f1;
	padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 84px);
	border-bottom: 4px solid var(--accent);
}
/* Per-company art, emitted only when assets/img/co-{slug} exists. A company
   without a piece keeps the accent-tinted gradient above and looks unchanged. */
.company-hero__art {
	position: absolute;
	inset: 0;
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.55;
	pointer-events: none;
}
.company-hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(10, 31, 60, 0.95) 0%,
		rgba(10, 31, 60, 0.86) 40%,
		rgba(10, 31, 60, 0.78) 58%,
		rgba(10, 31, 60, 0.14) 82%,
		rgba(10, 31, 60, 0) 100%);
}
/* .company-hero__inner is a .container; without this it stacks under the art. */
.company-hero__inner { position: relative; }
.company-hero__crumb { font-size: 14px; color: #9fb2cc; margin: 0 0 22px; }
.company-hero__crumb a { color: #cdd8e8; }
.company-hero__logo-wrap {
	background: #fff;
	border-radius: 14px;
	padding: 16px 22px;
	display: inline-flex;
	align-items: center;
	height: 76px;
	margin-bottom: 26px;
	box-shadow: var(--shadow-sm);
}
.company-hero__logo { height: 44px; width: auto; max-width: 240px; object-fit: contain; }

/* Dark/neon logos: no white box, let the art glow on the dark hero.
   Opt in by giving a company a 'logo_dark' file in inc/data.php. */
.company-hero__logo-wrap--dark {
	background: transparent;
	box-shadow: none;
	padding: 0;
	height: auto;
	border-radius: 0;
}
.company-hero__logo-wrap--dark .company-hero__logo {
	height: 74px;
	max-width: 340px;
	filter: drop-shadow(0 0 16px rgba(30, 200, 240, 0.45));
}
.company-hero__title { color: #fff; font-size: clamp(34px, 5vw, 54px); margin: 0 0 14px; }
.company-hero__tagline { font-size: clamp(18px, 2.3vw, 23px); color: #c6d4e6; max-width: 640px; margin: 0 0 22px; }
.company-hero__region {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 14.5px;
	color: #dbe6f4;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.16);
	padding: 9px 16px;
	border-radius: 999px;
	margin: 0 0 26px;
}
.company-hero__region .loc-dot { background: #fff; }

.company-body { padding: 78px 0; background: #fff; }
.company-body__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 56px;
	align-items: start;
}
.company-body__intro { font-size: 21px; color: var(--ink); font-weight: 500; line-height: 1.5; margin-bottom: 24px; }
.company-body__main p { font-size: 17.5px; }
.company-body__aside {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 30px 28px;
	position: sticky;
	top: calc(var(--header-h) + 20px);
	/* Never taller than the space between header and fixed ticker. */
	max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 40px);
	overflow: auto;
}
.company-body__aside-title { font-size: 19px; margin: 0 0 18px; }
.company-services { list-style: none; margin: 0 0 26px; }
.company-services li {
	position: relative;
	padding: 11px 0 11px 30px;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px;
	color: var(--ink);
}
.company-services li:last-child { border-bottom: 0; }
.company-services li::before {
	content: "";
	position: absolute;
	left: 4px; top: 18px;
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--accent);
}

/* Others grid on company page */
.others-grid {
	display: grid;
	/* Always exactly the sibling count (companies minus the current page). */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}
.other-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
	text-decoration: none;
}
.other-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
	border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
	text-decoration: none;
}
.other-card__logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.other-card__cat {
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-text);
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 56px;
	align-items: start;
}
.contact-intro h2 { font-size: 26px; }
.contact-email { font-size: 20px; font-weight: 600; margin: 6px 0 30px; }
.contact-intro h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-text); }
.contact-companies { list-style: none; }
.contact-companies li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }

.contact-form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 30px;
}
.field { margin-bottom: 18px; }
.field label {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	margin-bottom: 7px;
}
.field input, .field select, .field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
	/* No outline:none here — the :focus-visible rule below must still be able to
	   draw a real ring for keyboard users. The border and glow are the mouse
	   affordance, not a replacement for it. */
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(61,127,214,0.15);
}
.field textarea { resize: vertical; }
.contact-form__note { font-size: 13px; color: var(--muted-text); margin: 12px 0 0; }

/* ---- Contact desk ---- */
.contact-form-wrap { min-width: 0; }
.contact-support { font-size: 15px; margin-bottom: 10px; }

/* ============================================================
   Companies page
   ============================================================ */
.page-hero--companies .page-hero__lede { max-width: 66ch; }

.costats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 56px;
	margin: 38px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.14);
}
.costats__item { margin: 0; }
.costats__label {
	font-family: var(--font-head);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fa3bf;
	margin: 0 0 4px;
}
.costats__value {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	margin: 0;
}

.band--group { padding: 84px 0; }
.band--group:nth-of-type(odd) { background: var(--paper); }
.band--group:nth-of-type(even) { background: var(--white); }

.grouphead {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	max-width: 780px;
	margin: 0 0 46px;
}
.grouphead__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--accent-text);
	padding-top: 10px;
	flex: 0 0 auto;
}
.grouphead__title { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 10px; }
.grouphead__lead {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 8px;
}
.grouphead__desc { color: var(--body); margin: 0; }

.cofeatures { display: grid; gap: 26px; }

.cofeature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: stretch;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 6px);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.cofeature:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
/* Alternate which side the artwork sits on. order works on grid items. */
.cofeature:nth-child(even) .cofeature__visual { order: 2; }

.cofeature__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 250px;
	padding: 48px 36px;
	background:
		radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, transparent 60%),
		linear-gradient(145deg, var(--accent) 0%, var(--accent2) 100%);
}
.cofeature__index {
	position: absolute;
	top: 18px;
	left: 22px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: rgba(255,255,255,0.62);
}
.cofeature__logo-wrap {
	background: #fff;
	border-radius: 14px;
	padding: 20px 26px;
	box-shadow: 0 16px 34px -18px rgba(6, 18, 38, 0.55);
	display: grid;
	place-items: center;
	transition: transform .32s ease;
}
.cofeature:hover .cofeature__logo-wrap { transform: scale(1.035); }
.cofeature__logo { height: 46px; width: auto; object-fit: contain; }

.cofeature__body { padding: 40px 42px; display: flex; flex-direction: column; }
.cofeature__cat {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted-text);
	margin: 0 0 10px;
}
.cofeature__name { font-size: clamp(24px, 2.6vw, 31px); margin: 0 0 10px; }
.cofeature__link { color: var(--ink); text-decoration: none; }
.cofeature__link:hover { text-decoration: none; }
/* Stretched hit area for the whole row. The external "Visit site" link below is
   lifted above it so it stays independently clickable. */
.cofeature__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cofeature__hq {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--muted-text);
	margin: 0 0 14px;
}
.cofeature__blurb { color: var(--body); margin: 0 0 18px; }

.cofeature__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cofeature__chips li {
	font-size: 13px;
	line-height: 1.3;
	padding: 7px 12px;
	border-radius: 999px;
	color: var(--body);
	background: color-mix(in srgb, var(--accent) 8%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}

.cofeature__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: auto 0 0;
}
.cofeature__more {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--accent-2-text);
}
.cofeature__more span { display: inline-block; transition: transform .25s ease; }
.cofeature:hover .cofeature__more span { transform: translateX(5px); }
.cofeature__ext {
	position: relative;
	z-index: 2;
	font-size: 14.5px;
	color: var(--muted-text);
	text-decoration: underline;
}
.cofeature__ext:hover { color: var(--accent-2-text); }

/* ---- Entrance animation ----
   Transform only — deliberately no opacity. Anything that animates from
   opacity:0 holds the content invisible until the browser actually paints, and
   a page loaded in a background tab or rendered by a headless crawler may not
   paint for a long time, or ever. This site's primary job is being read, so
   nothing here is allowed to have an invisible state: the rows are fully
   opaque at all times and simply slide into place. */
@keyframes koine-rise {
	from { transform: translateY(16px); }
	to   { transform: none; }
}

.grouphead,
.cofeature {
	animation: koine-rise .5s cubic-bezier(.22,.61,.36,1) both;
}
.cofeature:nth-child(1) { animation-delay: .04s; }
.cofeature:nth-child(2) { animation-delay: .12s; }
.cofeature:nth-child(3) { animation-delay: .20s; }
.cofeature:nth-child(n+4) { animation-delay: .26s; }

@media (max-width: 900px) {
	.cofeature { grid-template-columns: 1fr; }
	/* Artwork always on top when stacked; the alternating order only makes sense
	   in two columns. */
	.cofeature:nth-child(even) .cofeature__visual { order: 0; }
	.cofeature__visual { min-height: 190px; padding: 34px 26px; }
	.cofeature__body { padding: 30px 26px; }
	.grouphead { gap: 14px; margin-bottom: 34px; }
	.costats { gap: 12px 32px; }
	.costats__value { font-size: 25px; }
}

.company-body__q {
	font-size: 23px;
	margin: 34px 0 12px;
}
.company-body__q:first-of-type { margin-top: 22px; }

.page-hero__note {
	font-size: 15px;
	color: #a9b8cd;
	margin: 14px 0 0;
	max-width: 62ch;
}

.notfound__links { margin-top: 48px; }
.notfound__links ul { list-style: disc; padding-left: 20px; }
.notfound__links li { margin-bottom: 6px; }

.contact-nap { list-style: none; margin: 0 0 30px; }
.contact-nap li { padding: 4px 0; }
.contact-nap__phone { font-size: 19px; font-weight: 600; }
.contact-nap address { font-style: normal; color: var(--muted-text); font-size: 15.5px; line-height: 1.5; }

.site-footer__address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.55;
	color: #93a4bd;
	margin-top: 12px;
}
/* Lives in .site-footer__bottom, not .site-footer__col, so the footer link rule
   never matched it and it fell through to the global link colour — which is the
   text-safe token for WHITE backgrounds, giving 2.96:1 on the dark footer.
   Underlined because colour alone is not a sufficient link cue here either. */
.site-footer__legal {
	margin-left: 6px;
	color: #9fb2cc;
	text-decoration: underline;
}
.site-footer__legal:hover { color: #fff; }
/* Two legal links now sit side by side; 6px of margin plus a source-code space
   is not enough separation to read them as distinct targets. */
.site-footer__legal + .site-footer__legal { margin-left: 14px; }

.field__hint { font-size: 13px; color: var(--muted-text); margin: 6px 0 0; }
.field__err { font-size: 13.5px; color: #a3231d; margin: 6px 0 0; font-weight: 500; }
.req { color: #a3231d; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
	border-color: #a3231d;
	background: #fdf6f5;
}

/* The honeypot must be reachable to a bot filling every input, but never seen,
   focused, or announced. Off-screen rather than display:none — some bots skip
   inputs that are explicitly hidden. */
.koine-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formmsg {
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	margin-bottom: 24px;
	border: 1px solid var(--line);
	background: var(--paper);
}
.formmsg p:last-child { margin-bottom: 0; }
.formmsg__title { font-size: 21px; margin: 0 0 8px; }
.formmsg--ok {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	background: color-mix(in srgb, var(--accent) 8%, #fff);
}
.formmsg--warn { border-color: #e6c15a; background: #fdf8e9; }
.formmsg--error { border-color: #d98d88; background: #fdf6f5; }
.formmsg--error ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.formmsg--error a { color: #a3231d; text-decoration: underline; }

/* ---- Focus visibility ----
   The company and post cards use overflow:hidden with a stretched link overlay,
   so the UA focus ring was drawn on the clipped boundary and never appeared —
   the main route into the portfolio brands had no visible focus indicator.
   :where() keeps specificity at zero so this cannot fight .skip-link:focus. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--accent-2-text);
	outline-offset: 2px;
}
.site-header :focus-visible,
.band--lines :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible { outline-color: #7fd3dd; }

/* .post-summary joins even though it does not use overflow:hidden and so would
   show a ring either way — keeping all three stretched-link components on one
   rule is what stops the next one drifting. */
.company-card:has(.company-card__link:focus-visible),
.post-card:has(.post-card__link:focus-visible),
.post-summary:has(.post-summary__link:focus-visible) {
	outline: 3px solid var(--accent-2-text);
	outline-offset: 2px;
}
.company-card__link:focus-visible,
.post-card__link:focus-visible,
.post-summary__link:focus-visible { outline: none; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: #071831;
	color: #9fb2cc;
	padding: 66px 0 26px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__brandlink { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px; text-decoration: none; }
.site-footer__mark { height: 42px; width: auto; }
.site-footer__word { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: #fff; line-height: 1; }
.site-footer__tagline { font-size: 15px; color: #8fa2bd; max-width: 300px; margin: 0; }
.site-footer__heading {
	font-family: var(--font-head);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cdd8e8;
	margin: 0 0 16px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: 10px; }
.site-footer__col a { color: #9fb2cc; font-size: 15px; text-decoration: none; }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 30px;
	padding-top: 24px;
	font-size: 13.5px;
	color: #7488a4;
}
.site-footer__bottom p { margin: 0; }
.site-footer__note { max-width: 620px; }

/* ============================================================
   Persistent logo ticker (fixed to viewport bottom)
   ============================================================ */
.koine-ticker {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ticker-h);
	z-index: 90;
	background: rgba(255,255,255,0.96);
	backdrop-filter: saturate(160%) blur(8px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -10px 30px -22px rgba(12,32,60,0.5);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.koine-ticker__viewport {
	width: 100%;
	overflow: hidden;
	/* Fade the edges so logos slide in and out cleanly. */
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.koine-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	list-style: none;
	animation: koine-marquee 34s linear infinite;
}
/* Pause on hover, and on keyboard focus — otherwise a keyboard user who tabs
   into the four real links is chasing a moving focus ring. */
.koine-ticker:hover .koine-ticker__track,
.koine-ticker:focus-within .koine-ticker__track { animation-play-state: paused; }

/* main is focusable only as a skip-link target; never show a ring for it. */
.site-main:focus { outline: none; }
.koine-ticker__item { flex: 0 0 auto; padding: 0 42px; }
.koine-ticker__link { display: inline-flex; align-items: center; opacity: 0.72; transition: opacity .2s ease; }
.koine-ticker__link:hover { opacity: 1; }
.koine-ticker__logo {
	height: 38px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

@keyframes koine-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.advantages-grid { grid-template-columns: repeat(2, 1fr); }
	.company-body__grid { grid-template-columns: 1fr; gap: 36px; }
	.company-body__aside { position: static; }
	.location-grid { grid-template-columns: 1fr; gap: 36px; }
	.location-aside { position: static; max-height: none; }
	.contact-grid { grid-template-columns: 1fr; gap: 36px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.about-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.about-hero__badge { order: -1; }
	.about-hero__badge img { max-width: 220px; }
}

@media (max-width: 760px) {
	body { font-size: 16px; }
	.nav-toggle { display: flex; }
	.main-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #0a1f3c;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		box-shadow: 0 20px 40px -24px rgba(0,0,0,0.7);
		padding: 12px 24px 22px;
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		/* visibility (not just opacity) is what removes the closed menu from the
		   tab order. With opacity alone the panel is invisible but every link in
		   it is still focusable, so on a phone each page shipped a run of
		   phantom tab stops where focus vanished off-screen — and the toggle's
		   aria-expanded="false" was actively lying about it.
		   Delayed on the way out so the fade still plays. */
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}
	body.nav-open .main-nav {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		visibility: visible;
		transition-delay: 0s;
	}
	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-menu li { border-bottom: 1px solid rgba(255,255,255,0.08); }
	.nav-menu a { display: block; padding: 14px 0; font-size: 17px; }
	.main-nav__cta { margin-top: 16px; justify-content: center; }

	.band { padding: 60px 0; }
	.lines-grid { grid-template-columns: 1fr; }
	.pillars-grid { grid-template-columns: 1fr; }
	.advantages-grid { grid-template-columns: 1fr; }
	.post-nav__inner { flex-direction: column; gap: 18px; }
	.post-nav__cell { max-width: 100%; }
	.post-nav__cell--next { text-align: left; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 30px; }

	.koine-ticker__item { padding: 0 26px; }
	.koine-ticker__logo { height: 30px; }
	/* On phones the ticker becomes a normal strip above the footer instead of a
	   fixed bar: 68px fixed + the 74px header was 21% of an iPhone SE viewport
	   spent on chrome. --ticker-h: 0 collapses body padding-bottom and
	   scroll-padding-bottom with it. Desktop keeps the fixed ticker (stated
	   design intent in the theme header). */
	.koine-ticker { position: static; }
	:root { --ticker-h: 0px; }
}

@media (max-width: 420px) {
	.hero__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Values page
   ============================================================ */
.values-page {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
}
.valcard {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px 30px 32px;
	overflow: hidden;
}
.valcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.valcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: 16px;
	/* --val-text is set inline per card; the fallback keeps old markup working. */
	color: var(--val-text, var(--accent-text));
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	margin-bottom: 22px;
}
.valcard__icon svg { width: 34px; height: 34px; }
.valcard__title { font-size: 24px; margin: 0 0 6px; }
.valcard__lead {
	font-family: var(--font-head);
	font-weight: 600;
	/* Per-value text-safe colour; raw accent2 measured 4.16:1 on Respect. */
	color: var(--val-text, var(--accent2));
	font-size: 15px;
	margin: 0 0 16px;
}
.valcard__body { font-size: 16px; color: var(--body); margin: 0; }

/* ============================================================
   Service-area location pages
   ============================================================ */
/* Links inside dark heroes: the global link colour is the text-safe token for
   WHITE backgrounds (2.96:1 on navy). These stay in the hero's own palette. */
.page-hero__crumb-link,
.page-hero__lede a { color: #cdd8e8; text-decoration: underline; }
.page-hero__crumb-link:hover,
.page-hero__lede a:hover { color: #fff; }

.location-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
}
.location-para { font-size: 17.5px; }
.location-q { font-size: 24px; margin: 40px 0 14px; }
.location-services { list-style: none; padding: 0; margin: 0 0 8px; }
.location-services li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-bottom: 1px solid var(--line);
	font-size: 16.5px;
}
.location-services li::before {
	content: "";
	position: absolute;
	left: 4px; top: 16px;
	width: 8px; height: 8px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: var(--accent);
}
.location-aside {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	position: sticky;
	top: calc(var(--header-h) + 20px);
	max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 40px);
	overflow: auto;
}
.location-aside__title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted-text);
	margin: 0 0 14px;
}
.location-aside__title + .location-aside__title,
.location-nearby + .location-aside__title,
.location-aside__note + .location-aside__title { margin-top: 26px; }
.location-aside__provider img { max-height: 44px; width: auto; }
.location-aside__note { font-size: 15px; color: var(--body); margin: 12px 0 0; }
.location-nearby { list-style: none; padding: 0; }
.location-nearby li { border-bottom: 1px solid var(--line); }
.location-nearby a { display: block; padding: 9px 0; font-size: 15.5px; color: var(--ink); }

/* Hub page index */
.location-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}
.location-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
	color: var(--body);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.location-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
	border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line));
}
.location-card__name { font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--ink); }
.location-card__blurb {
	font-size: 15px;
	/* The intro paragraphs run long; clamp the card preview. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.location-card__more { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--accent-2-text); }

/* ============================================================
   Blog listing
   ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line));
}
.post-card__link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
	font-family: var(--font-head);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-text);
	margin: 0 0 10px;
}
.post-card__meta a { color: var(--muted-text); }
.post-card__title { font-size: 21px; margin: 0 0 10px; }
.post-card__excerpt { font-size: 15.5px; color: var(--body); margin: 0 0 18px; flex: 1; }
.post-card__more { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--accent-2-text); }
/* Archive / search list. index.php is also the search template (there is no
   search.php) and its results are mostly pages, not posts, so it gets a dense
   single-column list rather than the 16/9 media grid above — same tokens, same
   hover and focus contract, no media box. */
.post-archive { max-width: 760px; margin: 0 auto; }
.post-list { display: grid; gap: 18px; }
.post-summary {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 28px 24px;
	transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
/* --shadow-sm and -3px, not --shadow and -4px: these rows are lighter than the
   grid cards above. Matches .location-card's lift, the closest existing
   bordered non-media card. */
.post-summary:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
	border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line));
}
/* Whole-row target, matching .post-card__link. The title stays plain text so
   the row announces once, not twice. */
.post-summary__link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }
.post-summary__meta {
	font-family: var(--font-head);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-text);
	margin: 0 0 10px;
}
/* The category links are real links. Without lifting them above the overlay a
   pointer user cannot click them while a keyboard user can still tab to and
   activate them — two different behaviours for the same link. Only the anchors
   are raised, so the rest of the meta line stays part of the row target. */
.post-summary__meta a { position: relative; z-index: 4; color: var(--muted-text); }
.post-summary__title { font-size: 21px; margin: 0 0 10px; }
.post-summary__excerpt { font-size: 15.5px; color: var(--body); margin: 0 0 14px; }
.post-summary__more { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--accent-2-text); }
.post-archive__empty { margin-top: 8px; }

.pagination { margin-top: 46px; }
.pagination .nav-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination a.page-numbers:hover { border-color: var(--accent-2); color: var(--accent-2); }
/* ============================================================
   Site search
   ============================================================ */
/* Field tokens are lifted verbatim from .field (the contact form) so the only
   two form controls on the site cannot drift apart — including the literal
   10px radius that block uses rather than --radius-sm. */
.searchform {
	display: flex;
	gap: 10px;
	max-width: 760px;
	margin: 0 auto 34px;
}
.searchform__field {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 16px;
	/* iOS Safari ignores the radius and padding on type=search without this.
	   Prefixed first: unprefixed appearance only landed in Safari 15.4. */
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.searchform__field:focus {
	/* No outline:none — the global :focus-visible ring must still be able to
	   draw for keyboard users. Same contract as .field input:focus. */
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(61,127,214,0.15);
}
.searchform__submit { flex: none; }

/* Navy hero placement (404). Left-aligned to the hero copy, not centred. */
.searchform--dark { margin: 26px 0 0; max-width: 520px; }
.searchform--dark .searchform__field {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.22);
	color: #fff;
}
.searchform--dark .searchform__field::placeholder { color: #a9b8cd; }
.searchform--dark .searchform__field:focus {
	border-color: #7fd3dd;
	box-shadow: 0 0 0 3px rgba(127,211,221,0.2);
}

/* Kept here rather than in the shared 760px block ~200 lines up: there the
   column override is read *before* these declarations and only survives
   because this block happens never to set flex-direction. Same local-media
   pattern as the .legal-toc block. */
@media (max-width: 760px) {
	.searchform { flex-direction: column; }
	/* .btn is inline-flex, so it stretches in a column flex parent and its
	   label needs re-centring — same as .main-nav__cta. */
	.searchform__submit { justify-content: center; }
}

/* ============================================================
   Single post
   ============================================================ */
.single-post__crumb { font-size: 14px; color: #9fb2cc; margin: 0 0 18px; }
.single-post__crumb a { color: #cdd8e8; }
.single-post__title { margin-bottom: 14px; }
.single-post__meta { color: #b9c8dd; font-size: 15px; font-family: var(--font-head); }
.single-post__meta a { color: #cdd8e8; }
.single-post__feature { background: #fff; padding-top: 40px; }
.single-post__feature img { width: 100%; height: auto; border-radius: var(--radius); }
.single-post__content { font-size: 17.5px; }
.single-post__content h2 { font-size: 26px; margin: 38px 0 12px; }
.single-post__content h3 { font-size: 21px; margin: 28px 0 10px; }
.single-post__content img { border-radius: 12px; margin: 22px 0; }
.single-post__content blockquote {
	margin: 24px 0;
	padding: 6px 22px;
	border-left: 4px solid var(--accent-2);
	color: var(--ink);
	font-size: 19px;
	font-style: italic;
}
.single-post__content ul, .single-post__content ol { padding-left: 22px; margin: 0 0 18px; }
.single-post__content li { margin-bottom: 8px; }
.single-post__back { margin-top: 34px; font-family: var(--font-head); font-weight: 600; }
.single-post__tags { margin-top: 26px; }
.single-post__tags a {
	display: inline-block;
	font-size: 13px;
	background: var(--paper-2);
	color: var(--body);
	padding: 5px 11px;
	border-radius: 999px;
	margin: 0 6px 6px 0;
	text-decoration: none;
}

.post-nav { background: var(--paper); border-top: 1px solid var(--line); padding: 30px 0; }
.post-nav__inner { display: flex; justify-content: space-between; gap: 20px; }
.post-nav__cell { max-width: 46%; }
.post-nav__cell--next { text-align: right; margin-left: auto; }
.post-nav__label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted-text);
	font-family: var(--font-head);
	margin-bottom: 4px;
}
.post-nav__cell a { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.koine-ticker__track { animation: none; }
	.koine-ticker__viewport { overflow-x: auto; }
	/* The second logo pass exists only so the marquee can loop; with the
	   animation off it would just show every logo twice to exactly the users
	   who asked for less motion. functions.php already marks it aria-hidden. */
	.koine-ticker__item[aria-hidden="true"] { display: none; }
	.grouphead, .cofeature { animation: none; }
	.btn, .company-card, .other-card, .post-card, .post-summary, .cofeature,
	.cofeature__logo-wrap, .cofeature__more span { transition: none; }
	/* Killing the transition alone converts the hover lift into an instant
	   snap — more abrupt than the motion it replaced. Kill the transform too. */
	.btn:hover, .company-card:hover, .other-card:hover, .post-card:hover,
	.post-summary:hover, .cofeature:hover, .cofeature:hover .cofeature__logo-wrap { transform: none; }
}