/* ==========================================================================
   SNOVOTEK — main.css
   All layout and component styles. Colours, fonts and spacing are always
   referenced via the CSS custom properties defined in style.css — never
   hardcoded here. Animation-only rules (keyframes, transitions, reveal
   states) live in animations.css.
   ========================================================================== */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	background: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	font-size: 16px;
	line-height: 1.5;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }

.wrap { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-pad); }

@media (max-width: 600px) {
	.wrap { padding: 0 20px; }
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.eyebrow.no-margin { margin-bottom: 14px; }

/* Scroll progress bar */
#prog {
	position: fixed; top: 0; left: 0; height: 2px; width: 0;
	background: var(--cyan); z-index: 999; pointer-events: none;
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-body); font-size: 14px; font-weight: 500;
	padding: 13px 22px; min-height: 44px;
	border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: none;
}
.bp { background: var(--cyan); color: var(--void); }
.bo { border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.8); background: transparent; }
.bd { border: 1px solid rgba(56,175,255,.35); color: var(--cyan); background: transparent; }

/* ---- Navigation ----
   Always solid dark navy with a blur backdrop, matching the approved
   reference design — a "transparent on hero, solid on scroll" nav was
   tried but a sticky-positioned nav sits in normal document flow above
   the hero rather than overlaid on top of it, so "transparent" only
   ever showed the plain page background, never the hero. Simpler and
   correct to just always render it solid. */
#site-nav {
	position: sticky; top: 0; z-index: 100;
	background: rgba(9,20,35,.88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-in {
	height: 66px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img.mk { height: 28px; }
.brand img.wd { height: 16px; opacity: .95; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
	font-size: 13.5px; color: var(--mist); text-decoration: none; position: relative;
	min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a:not(.nc)::after {
	content: ''; position: absolute; bottom: 8px; left: 0; width: 0; height: 1px;
	background: var(--cyan);
}
.nav-links a:not(.nc):hover, .nav-links a.active { color: #fff; }
.nav-links a:not(.nc):hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--cyan); }
.nc {
	font-size: 13px; font-weight: 500; border: 1px solid rgba(56,175,255,.45);
	color: var(--cyan) !important; padding: 8px 16px; border-radius: var(--radius-sm);
}
.nc:hover { background: var(--cyan); color: var(--void) !important; border-color: var(--cyan); }

#menu-toggle {
	display: none; width: 44px; height: 44px; background: transparent; border: none;
	cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
#menu-toggle span { width: 22px; height: 2px; background: #fff; display: block; }
#mobile-menu { display: none; }

@media (max-width: 840px) {
	.nav-links a:not(.nc) { display: none; }
	#menu-toggle { display: flex; }
}
@media (max-width: 640px) {
	.nc { display: none; }
	#mobile-menu {
		display: flex; flex-direction: column; gap: 2px; padding: 8px 20px 20px;
		background: var(--void); border-top: 1px solid rgba(255,255,255,.08);
	}
	#mobile-menu a {
		font-size: 15px; color: var(--mist); text-decoration: none; padding: 12px 4px;
		min-height: 44px; display: flex; align-items: center;
		border-bottom: 1px solid rgba(255,255,255,.06);
	}
	#mobile-menu a.active { color: var(--cyan); }
	#mobile-menu a.nc { color: var(--cyan); }
}

/* ---- Footer ---- */
#site-footer {
	background: var(--void); color: rgba(255,255,255,.5);
	border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 32px;
}
.fg { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.fb img { height: 13px; opacity: .5; margin-bottom: 10px; display: block; }
.fb p { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.65; max-width: 26ch; }
.fc h4 {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--steel-2); margin-bottom: 12px;
}
.fc a {
	display: block; font-size: 13px; color: rgba(255,255,255,.52); text-decoration: none;
	margin-bottom: 9px; min-height: 24px;
}
.fc a:hover { color: var(--cyan); }
.fbot {
	border-top: 1px solid rgba(255,255,255,.07); margin-top: 32px; padding-top: 22px;
	display: flex; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 10px;
}
@media (max-width: 840px) {
	.fg { grid-template-columns: 1fr 1fr; }
	.fb { grid-column: 1 / -1; }
}

/* ---- Hero (home) ---- */
.hero {
	background: var(--void); color: #fff; min-height: 92vh;
	display: flex; align-items: center; position: relative; overflow: hidden;
}

/* Optional full-bleed background photo, on .hero and .ph (page headers)
   alike — see snovotek_bg_class()/snovotek_bg_style() in
   inc/template-helpers.php. Sits below the ambient glow and content,
   with a dark scrim baked into the same layer so text always stays
   legible over any photo. No photo = this rule never matches
   (--bg-photo is only set inline when an image exists), so sections
   fall back to their plain flat-dark background exactly as before. */
.has-bg::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background-image: linear-gradient(180deg, rgba(9,20,35,.72) 0%, rgba(9,20,35,.88) 100%), var(--bg-photo);
	background-size: cover; background-position: center;
}
.glow-a, .glow-b, .pg {
	position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.glow-a { width: 900px; height: 900px; background: radial-gradient(circle, rgba(56,175,255,.13) 0%, transparent 65%); top: -400px; right: -300px; }
.glow-b { width: 600px; height: 600px; background: radial-gradient(circle, rgba(42,119,255,.1) 0%, transparent 65%); bottom: -350px; left: -200px; }
.pg { width: 800px; height: 800px; background: radial-gradient(circle, rgba(56,175,255,.12) 0%, transparent 65%); top: -400px; right: -300px; }
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 120px 0 80px; }
.hero h1 {
	font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.5vw, 82px);
	line-height: 1.02; letter-spacing: -.038em; margin: 16px 0 22px; max-width: 15ch;
}
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,.6); max-width: 46ch; line-height: 1.6; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-scroll {
	position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.hero-scroll .arr { width: 1px; height: 28px; background: linear-gradient(to bottom, rgba(56,175,255,.6), transparent); }

/* ---- Ticker ---- */
.ticker {
	background: var(--deep); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
	height: 46px; overflow: hidden; position: relative;
}
.ticker-track { display: flex; white-space: nowrap; width: max-content; }
.ticker-item {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--mist); padding: 0 32px; line-height: 46px; border-right: 1px solid rgba(255,255,255,.08);
}
.ticker-item span { color: var(--cyan); margin-right: 8px; }

/* ---- Section heading shorthand ---- */
.section-h {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.025em; line-height: 1.12;
}

/* ---- Challenges (home) — plain numbered list, full-width rows ---- */
.challenges { padding: var(--space-3xl) 0; background: var(--void); }
.ch-head { margin-bottom: 40px; }
.ch-label {
	font-size: clamp(28px, 3.5vw, 40px); font-family: var(--font-display); font-weight: 700;
	letter-spacing: -.03em; line-height: 1.16; color: #fff; max-width: 20ch;
}
.ch-label em { font-style: normal; color: var(--cyan); }
.ch-list { border-top: 1px solid rgba(255,255,255,.1); }
.ch-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: baseline; }
.ch-num { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); }
.ch-row h4 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: #fff; margin-bottom: 4px; }
.ch-row p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.55; }
@media (max-width: 600px) { .ch-row { grid-template-columns: 1fr; gap: 6px; } .ch-num { display: none; } }

/* ---- Core services (home) ---- */
.services-sec { padding: var(--space-3xl) 0; background: var(--white); border-bottom: 1px solid var(--line); }
.svc-3 {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md);
	overflow: hidden; margin-top: 8px;
}
.sc { background: var(--white); padding: 40px 30px 36px; position: relative; }
.sc-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px; display: block; }
.sc h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin-bottom: 10px; color: var(--ink); }
.sc p { font-size: 14.5px; color: var(--steel); line-height: 1.62; margin-bottom: 22px; }
.sc a { font-size: 13px; color: var(--blue); text-decoration: none; font-weight: 600; }
.sc a:hover { color: var(--cyan); }
.sc-icon { width: 44px; height: 44px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; }
.sc-icon svg, .sc-icon img { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .svc-3 { grid-template-columns: 1fr; } }

/* ---- Process (home + OEM shared look) ---- */
.process-sec { padding: var(--space-3xl) 0; background: var(--void); color: #fff; position: relative; overflow: hidden; }
.process-sec .wrap { position: relative; z-index: 2; }
.process-sec h2 {
	font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px);
	letter-spacing: -.025em; line-height: 1.12; color: #fff; margin: 12px 0 10px;
}
.process-sec .sub { font-size: 16px; color: rgba(255,255,255,.55); margin-bottom: 56px; max-width: 48ch; }
/* .ps-node circles are 56px wide and sit at the LEFT edge of their
   20%-wide grid column (not centered) — so each node's true centre is
   a fixed 28px (half its own width) from the track's left edge, not a
   percentage. The line used to start/end at left/right:10%, a
   percentage-based guess that only lined up with node 1 by coincidence
   at one specific width — at the actual site width it landed well past
   node 1, reading as "floating" between nodes 1 and 2. Anchoring the
   left edge to a fixed 28px (matching the node's real centre) and
   deriving `right` the same way fixes it at every viewport width. The
   fill's JS-driven width (see initProcessScrub() in main.js) still
   works unchanged — the 28px offset cancels out of that math exactly,
   since the fill's start and end both shift by the same 28px. */
.ps-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.ps-line { position: absolute; top: 28px; left: 28px; right: calc(20% - 28px); height: 1px; background: rgba(255,255,255,.12); }
.ps-fill { position: absolute; top: 28px; left: 28px; height: 1px; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px rgba(56,175,255,.5); }
.ps { position: relative; z-index: 2; padding: 0 12px 0 0; text-align: left; }
.ps-node {
	width: 56px; height: 56px; border-radius: 50%; background: var(--void);
	border: 1.5px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--steel-2); margin-bottom: 20px;
}
.ps h4 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; margin-bottom: 6px; }
.ps p { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.58; }
@media (max-width: 900px) {
	.ps-track { grid-template-columns: 1fr; }
	.ps-line, .ps-fill { display: none; }
	.ps { padding: 0 0 24px 68px; position: relative; min-height: 56px; }
	.ps-node { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

/* ---- Why (home) ---- */
/* ---- Why SNOVOTEK (home) — annotated paragraph + footnote strip ---- */
.why-sec { padding: var(--space-3xl) 0; border-bottom: 1px solid var(--line); }
.why-prose {
	font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -.016em; line-height: 1.6; max-width: 64ch; color: var(--ink);
}
.footnotes { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.fn { font-size: 12.5px; color: var(--steel); line-height: 1.55; }
.fn b { display: block; font-family: var(--font-mono); color: var(--blue); font-size: 11px; margin-bottom: 6px; font-weight: 500; }
@media (max-width: 900px) { .footnotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footnotes { grid-template-columns: 1fr; } }

/* ---- CTA (home) ---- */
.cta-sec { padding: 96px 0; background: var(--deep); text-align: center; position: relative; overflow: hidden; }
.cta-sec .pg { top: -300px; left: 50%; transform: translateX(-50%); opacity: .5; }
.cta-sec .wrap { position: relative; z-index: 2; }
.cta-sec h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.5vw, 42px); letter-spacing: -.03em; color: #fff; margin-bottom: 14px; }
.cta-sec p { font-size: 17px; color: rgba(255,255,255,.6); margin-bottom: 30px; max-width: 44ch; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Page header (Services / OEM / About / Contact) ----
   Same min-height + vertically-centered flex layout as .hero, so a
   background photo (see snovotek_bg_class()) gets just as much room to
   read, and short header copy doesn't just sit awkwardly at the top
   of a tall empty box — it centers in the available space instead. */
.ph {
	background: var(--void); color: #fff; min-height: 92vh;
	display: flex; align-items: center; position: relative; overflow: hidden;
}
.ph-g { position: absolute; width: 700px; height: 700px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(56,175,255,.13) 0%, transparent 65%); top: -300px; right: -200px; z-index: 1; }
.ph .wrap { position: relative; z-index: 2; width: 100%; padding: 48px 32px; }
.ph h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 54px); line-height: 1.08; letter-spacing: -.032em; margin: 12px 0 14px; }
.ph h1 .w { display: inline-block; overflow: hidden; vertical-align: top; }
.ph h1 em { font-style: normal; color: var(--cyan); }
.ph p { font-size: 16.5px; color: rgba(255,255,255,.6); max-width: 48ch; line-height: 1.6; }

/* ---- Services page ----
   Full-width tinted row per service, with a large faint ghost numeral
   behind the copy and a small floating spec card (coloured top edge,
   sized to its own rows) instead of a tall dark panel. */
.sb { position: relative; padding: 76px 0; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--white); }
.sb-wash { position: absolute; inset: 0; z-index: 0; }
.sb-num {
	position: absolute; top: 20px; right: -10px; font-family: var(--font-display); font-weight: 800;
	font-size: clamp(120px, 15vw, 220px); line-height: 1; letter-spacing: -.04em; z-index: 0;
	user-select: none; pointer-events: none;
}
.sb .inner { position: relative; z-index: 1; }
.sb-photo {
	width: 100%; aspect-ratio: 21 / 8; border-radius: var(--radius-lg); overflow: hidden;
	margin-bottom: 44px; background: var(--paper);
}
.sb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sb-label {
	display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 12.5px;
	letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px;
}
/* Scoped via the section's own colour class rather than .fc/.lc/.pc
   alone — .fc alone would otherwise also match the unrelated
   "footer column" .fc divs in footer.php. */
.sb.fc .sb-label { color: #2A77FF; }
.sb.lc .sb-label { color: #1FAE5D; }
.sb.pc .sb-label { color: #7C3AED; }

.sb h2 {
	font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px);
	letter-spacing: -.026em; line-height: 1.1; margin-bottom: 16px; max-width: 16ch; color: var(--ink);
}
.sb .lead { font-size: 16px; color: var(--steel); line-height: 1.7; max-width: 46ch; margin-bottom: 0; }

.sb-g { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; margin-top: 40px; }
.scope li {
	display: flex; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line);
	font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.5;
}
.scope li:first-child { padding-top: 0; }
.scope li::before { content: ''; width: 14px; height: 1px; flex-shrink: 0; position: relative; top: -4px; }
.sb.fc .scope li::before { background: #2A77FF; }
.sb.lc .scope li::before { background: #1FAE5D; }
.sb.pc .scope li::before { background: #7C3AED; }

.sb-vis {
	background: var(--white); border-radius: var(--radius-md); padding: 26px 28px; color: var(--ink);
	box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 20px 44px rgba(17,24,39,.09);
	border-top: 4px solid; align-self: start;
}
.sb.fc .sb-vis { border-color: #2A77FF; }
.sb.lc .sb-vis { border-color: #1FAE5D; }
.sb.pc .sb-vis { border-color: #7C3AED; }

.sv-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; }
.sb.fc .sv-title { color: #2A77FF; }
.sb.lc .sv-title { color: #1FAE5D; }
.sb.pc .sv-title { color: #7C3AED; }

.kv-row { font-size: 13px; color: var(--steel); line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: none; }

.note { margin-top: 32px; padding: 16px 20px; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.sb.fc .note { background: #EEF5FF; color: #12447A; }
.sb.lc .note { background: #EAFAF1; color: #1A5C35; }
.sb.pc .note { background: #F5F0FF; color: #3C1E8F; }

.sb.fc .sb-wash { background: linear-gradient(180deg, #EEF5FF 0%, #fff 100%); }
.sb.fc .sb-num { color: rgba(42,119,237,.07); }
.sb.lc .sb-wash { background: linear-gradient(180deg, #EAFAF1 0%, #fff 100%); }
.sb.lc .sb-num { color: rgba(31,174,93,.07); }
.sb.pc .sb-wash { background: linear-gradient(180deg, #F5F0FF 0%, #fff 100%); }
.sb.pc .sb-num { color: rgba(124,58,237,.07); }

@media (max-width: 900px) {
	.sb-g { grid-template-columns: 1fr; }
	.sb-photo { aspect-ratio: 16 / 10; margin-bottom: 32px; }
	.sb-num { font-size: 90px; top: 8px; }
}

.dark-cta { background: var(--deep); padding: 72px 0; text-align: center; }
.dark-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.8vw, 34px); letter-spacing: -.024em; color: #fff; margin-bottom: 12px; }
.dark-cta p { font-size: 15.5px; color: rgba(255,255,255,.6); margin-bottom: 26px; }

/* ---- OEM page ---- */
.oem-why { padding: var(--space-3xl) 0; border-bottom: 1px solid var(--line); }
.ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ow-grid p { font-size: 15.5px; color: var(--steel); line-height: 1.7; margin-bottom: 14px; }
.res-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.rc { background: var(--void); border-radius: var(--radius-md); padding: 22px; overflow: hidden; }
.rc h4 { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--cyan); margin-bottom: 6px; }
.rc p { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.5; }
@media (max-width: 560px) { .res-4 { grid-template-columns: 1fr; } }

.process-oem { padding: var(--space-3xl) 0; background: var(--void); color: #fff; position: relative; overflow: hidden; }
.process-oem .wrap { position: relative; z-index: 2; }
.process-oem h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.025em; color: #fff; margin: 10px 0 48px; }
.process-oem h2:has(+ .sub) { margin-bottom: 14px; } /* room for an intro paragraph, e.g. the About page's roadmap intro, when present */
.process-oem .sub { font-size: 16px; color: rgba(255,255,255,.55); margin-bottom: 48px; max-width: 60ch; }
.step-rows { display: flex; flex-direction: column; }
.sr { display: grid; grid-template-columns: 70px 200px 1fr; gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.sr:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.sr-n { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); }
.sr-t h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: #fff; }
.sr-b p { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.65; max-width: 62ch; }
@media (max-width: 760px) { .sr { grid-template-columns: 50px 1fr; } .sr-t { grid-column: 2; } .sr-b { grid-column: 1 / -1; margin-top: 8px; } }

.auth-boundary { padding: var(--space-3xl) 0; }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ab-grid h2 { color: var(--ink); }
.bl { display: flex; flex-direction: column; gap: 2px; }
.bl li { font-size: 14.5px; padding: 12px 16px; border-radius: var(--radius-sm); display: flex; gap: 10px; align-items: center; font-weight: 500; }
.bl li.ok { background: #E9F8EE; color: #1A5C35; }
.bl li.ok::before { content: '✓'; font-weight: 700; }
.bl li.no { background: #FDECEC; color: #8A1F1F; margin-top: 14px; }
.bl li.no:first-of-type { margin-top: 14px; }
.bl li.no::before { content: '✕'; font-weight: 700; }
.pilot-card { background: var(--void); border-radius: var(--radius-lg); padding: 36px 32px; color: #fff; }
.pilot-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 10px; }
.pilot-card .sub { font-size: 14.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 22px; }
.pilot-card ul { margin-bottom: 26px; }
.pilot-card li { font-size: 13.5px; color: rgba(255,255,255,.75); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 900px) { .ow-grid, .ab-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .res-4 { grid-template-columns: 1fr; } }

/* ---- About page ----
   "Statement wall" language: big bold display type and one signature
   big-number moment (the resources collage only — deliberately NOT
   repeated in the roadmap, so it stays a one-off flourish rather than
   a repeated motif). The mission statement is sized to read as large
   and bold without out-competing the page's own <h1> in the header
   above it. */
.ms-wall { padding: var(--space-3xl) 0 var(--space-2xl); }
.ms-giant {
	font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 44px);
	letter-spacing: -.026em; line-height: 1.22; color: var(--ink); max-width: 20ch; margin-bottom: 32px;
}
.ms-support { display: flex; justify-content: flex-end; }
.ms-support-in { max-width: 40ch; }
.ms-support p { font-size: 15px; color: var(--steel); line-height: 1.72; margin-bottom: 14px; }
.ms-support p:last-child { margin-bottom: 0; }

/* Company facts — full-width dark navy bar (the "more dark blue"
   request), replacing the old boxed snapshot card. */
.facts-wall { background: var(--void); padding: 56px 0; }
.facts-wall .eyebrow { color: var(--cyan); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px 32px; margin-top: 8px; }
.fact-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.fact-v { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #fff; line-height: 1.3; }

.resources { padding: var(--space-3xl) 0; background: var(--void); }
.resources .eyebrow { color: var(--cyan); }
.resources .section-h { color: #fff; }
/* Local resources — the one signature "big number" moment on this
   page: an offset, gently rotated collage instead of a plain grid. */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 12px; }
.cnode { position: relative; padding: 4px 4px 6px; }
.cnode:nth-child(odd) { transform: rotate(-1deg); }
.cnode:nth-child(even) { transform: rotate(1deg); margin-top: 34px; }
.cn-tag {
	font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -.03em;
	line-height: 1; color: rgba(56,175,255,.16); margin-bottom: -10px;
}
.cnode h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cyan); margin-bottom: 8px; }
.cnode p { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.55; max-width: 30ch; }
@media (max-width: 560px) { .collage { grid-template-columns: 1fr; } .cnode:nth-child(even) { margin-top: 4px; } .cnode:nth-child(odd), .cnode:nth-child(even) { transform: none; } }

.qhse { padding: var(--space-3xl) 0; border-bottom: 1px solid var(--line); }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.q-grid h2 { color: var(--ink); }
.q-list li { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); padding: 15px 0; border-bottom: 1px solid var(--line); }
.q-list li:first-child { padding-top: 0; }
.coord-p { font-size: 15.5px; color: var(--steel); line-height: 1.7; margin-bottom: 14px; }
@media (max-width: 900px) { .q-grid { grid-template-columns: 1fr; } }

/* Development roadmap — dark navy closing section, deliberately
   without the collage's big-number motif: the "Phase 1 / 2 / 3"
   labels already carry the sequence, so a repeated giant numeral
   here would just dilute the one place it's meant to stand out. */
.roadmap-wall { background: var(--void); color: #fff; padding: var(--space-3xl) 0; }
.roadmap-wall .eyebrow { color: var(--cyan); }
.roadmap-wall h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.022em; color: #fff; margin: 10px 0 14px; }
.roadmap-wall .sub { font-size: 15.5px; color: rgba(255,255,255,.55); max-width: 60ch; margin-bottom: 44px; }
.rm-list { display: flex; flex-direction: column; }
.rm-row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); }
.rm-list .rm-row:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.rm-phase { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); padding-top: 2px; }
.rm-row p { font-size: 14.5px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 68ch; }
@media (max-width: 640px) { .rm-row { grid-template-columns: 1fr; gap: 8px; } }


/* ---- Contact page ----
   One unified inquiry form (no more tab-switcher — the visitor picks
   the relevant service from the "Service needed" dropdown inside the
   form itself instead of choosing between three separate forms). */
.contact-wrap { padding: var(--space-3xl) 0; }
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fg1 { grid-template-columns: 1fr; }
.fl { display: flex; flex-direction: column; gap: 8px; }
.fl label, .wpcf7-form label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); }
.fl input, .fl select, .fl textarea,
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form select, .wpcf7-form textarea {
	background: var(--white); border: 1px solid var(--line-2); border-radius: 4px;
	padding: 12px 13px; min-height: 44px; color: var(--ink); font-family: var(--font-body); font-size: 14.5px; width: 100%;
}
.fl input:focus, .fl select:focus, .fl textarea:focus,
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--blue); }
.fl textarea, .wpcf7-form textarea { resize: vertical; min-height: 110px; }
.fsub, .wpcf7-form .wpcf7-submit { margin-top: 8px; }
.fsub button, .wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit {
	background: var(--blue); color: #fff; border: none; border-radius: 4px;
	padding: 13px 28px; min-height: 44px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
}
.fsub button:hover, .wpcf7-form input[type="submit"]:hover { background: var(--cyan); color: var(--void); }
.wpcf7-form br { display: none; } /* CF7 default spacing — layout handled by .fl/.fg2 wrappers */
.wpcf7-form p:not(.wpcf7-response-output) { display: contents; } /* unwrap any stray CF7 <p>, but leave the response message box alone */
.wpcf7-not-valid-tip { font-size: 12px; color: #C0392B; margin-top: 4px; }
.wpcf7-response-output { border-radius: 4px; padding: 12px 16px; font-size: 14px; margin-top: 20px; display: block; }

.contact-aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.ca h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); margin-bottom: 9px; }
.ca a, .ca p { font-size: 14.5px; color: var(--ink); text-decoration: none; line-height: 1.6; }
.ca a:hover { color: var(--blue); }
@media (max-width: 900px) { .fg2 { grid-template-columns: 1fr; } .contact-aside { grid-template-columns: 1fr; } }

/* ---- Generic fallback article styling (index.php) ---- */
.sb article h2 a { text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.sb article .lead { color: var(--steel); }

/* ---- Responsive base rules (tablet / mobile) ----
   Section padding never drops below the 80px minimum at any breakpoint. */
@media (max-width: 1024px) {
	.challenges, .services-sec, .process-sec, .why-sec, .sb, .oem-why, .process-oem,
	.auth-boundary, .ms-wall, .facts-wall, .resources, .qhse, .roadmap-wall, .contact-wrap {
		padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); /* 80px */
	}
}
@media (max-width: 768px) {
	body { font-size: 16px; }
	.ph { min-height: 60vh; } /* full hero height reads as excessive scroll-before-content on small screens */
}