/*
 * Current — design tokens & site shell.
 *
 * THE RULE THIS FILE EXISTS TO ENFORCE: a long, dense, engineering-credible
 * B2B infrastructure-sales page (same "long/rich/many-images" brief as
 * Nyx, but the tone and layout language must read as a real enterprise
 * network-operator site, not a lifestyle/experience brand) — generous
 * section rhythm, but content leans toward spec sheets, stat bands, and
 * named systems/facilities rather than editorial prose. Every section uses
 * a DIFFERENT layout template from its neighbours — full-viewport stat
 * hero, a geographic route map, a vertical process timeline, a 2x2 product
 * card grid, stacked spec rows, a horizontal facility rail, a dense photo
 * grid, a numbered differentiators list, stat-forward case-study cards, a
 * split sustainability band, a vessel portrait grid, a journal teaser grid,
 * and a closing RFP band — so length reads as rich rather than repetitive.
 *
 * One persistent, fixed, full-viewport WebGL2 canvas
 * (assets/js/current-field.js) sits behind the whole site — never rebuilt
 * per section, driven by scroll. Every element with class="glass" is a
 * frosted dark panel whose inner glow colour/intensity (--crnt-glow-rgb /
 * --crnt-glow) is driven live by the same field's current network↔subsea
 * mix, same "one real system drives the UI" discipline used sitewide
 * across this catalogue.
 */

:root {
	--bg: #050a12;
	--bg-2: #071120;
	--bg-deep: #02050a;
	--bg-3: #0b1626;
	--surface: rgba(255, 255, 255, 0.045);
	--surface-strong: rgba(255, 255, 255, 0.08);
	--line: rgba(255, 255, 255, 0.11);
	--line-soft: rgba(255, 255, 255, 0.06);

	--text: #EAF2F7;
	--text-soft: #B7C6D3;
	--text-faint: #7E90A0;
	--text-dim: #566575;

	/* Lit-fiber cyan — the network register's signature colour. */
	--cyan: #22D3EE;
	--cyan-deep: #0EA5C4;
	--cyan-rgb: 34, 211, 238;
	/* Landing-station amber — a small functional accent, never a scene colour. */
	--amber: #F5A24B;
	--amber-deep: #D98A38;
	--amber-rgb: 245, 162, 75;

	/* Live-updated by current-field.js from the background's current
	   scroll-mix state (0 = global network, 1 = subsea) -- read by every
	   .glass panel's inner glow. Defaults here cover no-JS / pre-first-frame. */
	--crnt-glow-rgb: 34, 211, 238;
	--crnt-glow: 0.4;

	--font-display: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
	--font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	--fs-1: 1rem;
	--fs-2: 1.25rem;
	--fs-3: 1.5625rem;
	--fs-4: 1.9531rem;
	--fs-5: 2.4414rem;
	--fs-6: clamp(2.2rem, 1.1rem + 4.6vw, 3.8rem);
	--fs-7: clamp(2.4rem, 1rem + 6.2vw, 5.2rem);

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 40px;
	--sp-6: 64px;
	--sp-7: 96px;
	--sp-8: 144px;

	--section-pad: clamp(64px, 6vw + 88px, 176px);

	--radius: 14px;
	--radius-sm: 8px;
	--radius-lg: 22px;
	--wrap: 1280px;
	--wrap-wide: 1480px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-sans);
	/* Deliberately NO background-color here (unlike html's, just above).
	   See known bug class #3: an opaque body background + position:relative
	   with no explicit z-index paints ABOVE a negative-z-index fixed child
	   (canvas.crnt-field, z-index:-2) under CSS2.1 painting-order rules,
	   silently hiding the entire WebGL background. Leaving body transparent
	   lets html's identical background colour show through as the pre-JS
	   fallback while never occluding the canvas once it mounts. */
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.14; margin: 0 0 var(--sp-3); letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-7); font-weight: 500; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-3); }
p { margin: 0 0 var(--sp-3); color: var(--text-soft); }
em, i { font-style: italic; }
code, .mono { font-family: var(--font-mono); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--narrow { max-width: 760px; }
.wrap--wide { max-width: var(--wrap-wide); }

/* Invisible scroll markers current-field.js's IntersectionObserver watches
   to pick up the target network<->subsea mix. Spans the FULL section
   (position:absolute; inset:0 against the section's own position:relative)
   rather than a thin line -- see known bug class #4: a thin
   "crossing the centre" band can be skipped entirely by a fast/discrete
   scroll jump. A full-section-height target intersects continuously for as
   long as any part of that section is on screen, and current-field.js
   blends the currently-intersecting sections by live intersectionRatio. */
.crnt-mix-marker { position: absolute; inset: 0; pointer-events: none; z-index: -1; }

/* ---------- Persistent WebGL2 background ---------- */
canvas.crnt-field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
	display: block;
}
.crnt-field-static-fallback {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 65% 50% at 26% 20%, rgba(34, 211, 238, 0.20), transparent 60%),
		radial-gradient(ellipse 55% 42% at 76% 68%, rgba(245, 162, 75, 0.12), transparent 62%),
		linear-gradient(180deg, #050a12 0%, #071120 55%, #02060a 100%);
}
/* A very subtle fixed vignette + grain scrim above the canvas, below content
   -- keeps edges/corners grounded and prevents the field from ever reading
   as a flat, infinite, wallpaper-like texture. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(2, 5, 10, 0.55) 100%);
}

/* ---------- Glass (frosted dark panel, live glow-coupled) ---------- */
.glass {
	position: relative;
	background: rgba(9, 15, 26, 0.60);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--radius);
	box-shadow:
		inset 0 0 calc(14px + var(--crnt-glow, 0.4) * 30px) rgba(var(--crnt-glow-rgb, 34, 211, 238), calc(0.10 + var(--crnt-glow, 0.4) * 0.22)),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 30px 70px -34px rgba(0, 0, 0, 0.65);
	transition: box-shadow 300ms ease, transform 220ms ease, border-color 220ms ease;
	color: var(--text);
}
.glass:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.glass--solid { background: rgba(6, 10, 18, 0.88); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; padding: 10px 0; margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 6px var(--sp-4); max-width: var(--wrap-wide); margin: 0 auto; }
.brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.01em; display: flex; align-items: baseline; gap: 12px; font-weight: 600; }
.brand__tag { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; }
.nav ul { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; }
.nav a { font-size: 0.875rem; color: var(--text-soft); transition: color 160ms ease; letter-spacing: 0.01em; }
.nav a:hover { color: var(--cyan); }

.nav-toggle {
	display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
	color: var(--text); padding: 0.5em 0.9em; font-size: 0.9rem; cursor: pointer;
}
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	/* backdrop-filter on .site-header creates a containing block for
	   position:fixed descendants, trapping the mobile nav panel inside the
	   header's own box instead of the viewport -- recurring bug class across
	   this catalogue, fixed from day one here. */
	.site-header.nav-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-deep); transform: none !important; }
	.nav {
		position: fixed; inset: 64px 0 0 0; background: var(--bg-deep); padding: var(--sp-5) var(--sp-4);
		transform: translateY(-8px); opacity: 0; pointer-events: none;
		transition: opacity 220ms ease, transform 220ms ease; overflow-y: auto; z-index: 59;
	}
	.nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.nav ul { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
	.nav a { font-size: 1.3rem; }
	.brand__tag { display: none; }
	.site-header__inner { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
	.site-header__inner > div { gap: var(--sp-2) !important; }
	.btn.btn--solid { padding: 0.6em 0.85em; font-size: 0.75rem; }
	.nav-toggle { padding: 0.5em 0.7em; font-size: 0.78rem; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 0.9em 1.6em; border-radius: 6px;
	font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; border: 1px solid var(--line);
	background: transparent; color: var(--text); cursor: pointer; transition: all 180ms ease;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--solid { background: var(--amber); color: #201404; border-color: var(--amber); }
.btn--solid:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #201404; }
.btn--cyan { background: var(--cyan); color: #012027; border-color: var(--cyan); }
.btn--cyan:hover { background: var(--cyan-deep); border-color: var(--cyan-deep); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: var(--sp-3); }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--cyan); }
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: var(--amber); }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Reveal (directional entrance choreography) ---------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 800ms ease, transform 800ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translate(-40px, 12px); }
[data-reveal="left"].is-visible { transform: none; }
[data-reveal="right"] { transform: translate(40px, 12px); }
[data-reveal="right"].is-visible { transform: none; }
[data-reveal="up"] { transform: translateY(56px); }
[data-reveal="up"].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Generic grid / card
   ===================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { display: block; padding: var(--sp-4); }
.card__media { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-4); background: var(--surface); }
.card__media--glow { background: radial-gradient(ellipse at 30% 30%, rgba(var(--cyan-rgb), 0.30), transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(var(--amber-rgb), 0.22), transparent 60%), var(--bg-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); margin-bottom: var(--sp-2); }
.card__title { margin-bottom: var(--sp-2); font-size: var(--fs-3); }
.card__excerpt { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: 0; }

.section-head { max-width: 700px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head--left { margin: 0 0 var(--sp-6); text-align: left; }
.pull-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-4); line-height: 1.35; color: var(--text); }
.pull-quote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; font-style: normal; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; padding: var(--sp-8) 0 var(--sp-5); background: var(--bg-deep); color: var(--text); border-top: 1px solid var(--line-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-family: var(--font-mono); font-weight: 600; margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a, .footer-grid p { color: var(--text-soft); font-size: 0.9375rem; }
.footer-grid .brand { color: var(--text); }
.footer-legal { display: flex; justify-content: space-between; padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--text-faint); flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Forms ---------- */
.enquiry-form input, .enquiry-form textarea, .enquiry-form select {
	width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: rgba(255,255,255,0.04); color: var(--text); font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: var(--text-dim); }
.enquiry-form input:focus, .enquiry-form textarea:focus, .enquiry-form select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.enquiry-form__status { font-size: 0.875rem; color: var(--text-soft); }
.enquiry-form__status.is-error { color: #e88a7a; }

/* ---------- Inner page head / detail head (CPT + page templates) ---------- */
.page-head { padding: var(--sp-8) 0 var(--sp-7); background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.page-head h1 { font-size: var(--fs-6); max-width: 18ch; }
.page-head__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.page-head__intro { max-width: 660px; }
.page-head__stats { display: flex; gap: var(--sp-6); flex: 0 0 auto; }
.page-head__stats .about-stats__num { font-size: var(--fs-5); }
@media (max-width: 720px) { .page-head__inner { align-items: flex-start; } .page-head__stats { gap: var(--sp-5); } }

.entry-content { line-height: 1.85; }
.entry-content h2 { margin-top: var(--sp-7); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; color: var(--text-soft); }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--cyan); }

.detail-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; padding: var(--sp-8) 0; background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.detail-head__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.detail-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-head--system .detail-head__media { aspect-ratio: 4/5; }
.detail-head--station .detail-head__media { aspect-ratio: 4/5; }
.detail-head__body { display: flex; flex-direction: column; }
.detail-head__lede { font-size: var(--fs-2); color: var(--text-soft); margin-bottom: var(--sp-4); }
.detail-head__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 880px) { .detail-head { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7) 0; } }

.material-link { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); text-decoration: none; color: inherit; }
.material-link__media { width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.material-link__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-link__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); margin-bottom: 4px; }
.material-link__title { font-family: var(--font-display); font-size: var(--fs-3); margin: 0; }

.spec-sheet { display: grid; gap: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.spec-sheet__row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); gap: var(--sp-4); }
.spec-sheet__row dt { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.spec-sheet__row dd { margin: 0; font-weight: 700; text-align: right; color: var(--text); font-family: var(--font-mono); }
.fact-line { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
dl.fact-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-4); }
dl.fact-line .fact-line__row dt { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
dl.fact-line .fact-line__row dd { margin: 0; color: var(--text); font-weight: 700; white-space: normal; font-family: var(--font-mono); }

.archive-intro { max-width: 660px; margin: var(--sp-3) 0 0; color: var(--text-soft); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-5) 0 var(--sp-6); }
.filter-pills a { display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.filter-pills a:hover, .filter-pills a.is-active { border-color: var(--cyan); color: var(--cyan); }

.about-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-6) 0; padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-stats__num { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-4); color: var(--cyan); }
.about-stats__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp-5); }
.comment-body { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: rgba(255,255,255,0.04); color: var(--text); font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}

/* =====================================================================
   Signature 1: HERO — full viewport, minimal DOM, atmosphere carried by
   the persistent background canvas, closed with a real four-stat band.
   ===================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-8) 0 0;
}
.hero__inner { max-width: 820px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero__eyebrow { color: var(--cyan); }
.hero__title { font-size: var(--fs-7); max-width: 15ch; margin-bottom: var(--sp-4); font-weight: 500; }
.hero__title em { font-style: normal; color: var(--cyan); }
.hero__lede { font-size: var(--fs-2); color: var(--text-soft); max-width: 52ch; margin-bottom: var(--sp-6); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); margin-top: var(--sp-8); }
.hero__stat { padding: var(--sp-5) var(--sp-4) var(--sp-6); border-right: 1px solid var(--line-soft); }
.hero__stat:last-child { border-right: none; }
.hero__stat-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-4); color: var(--cyan); display: block; }
.hero__stat-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-top: 4px; display: block; }
@media (max-width: 720px) {
	.hero__stats { grid-template-columns: repeat(2, 1fr); }
	.hero__stat { border-bottom: 1px solid var(--line-soft); }
}

/* =====================================================================
   Signature 2: global network map — a geographically-plotted SVG
   graticule with landing-station nodes and route arcs, backed by a real
   stat strip. The section where "the network itself" is shown.
   ===================================================================== */
.map-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.map-card { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); max-width: var(--wrap-wide); margin: 0 auto; }
.map-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); overflow: hidden; }
.map-legend { display: flex; gap: var(--sp-5); margin-top: var(--sp-5); flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
@media (max-width: 880px) { .map-stats { grid-template-columns: repeat(2, 1fr); } .map-card { padding: var(--sp-4); } }

/* =====================================================================
   Signature 3: how it works — vertical stepped process timeline, the
   text/diagram-forward register, opposite the map's visual-forward one.
   ===================================================================== */
.process-section { padding: var(--section-pad) 0; background: var(--bg-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.process-list { position: relative; max-width: 880px; margin: 0 auto; }
.process-list::before { content: ''; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--line), var(--line), transparent); }
.process-step { position: relative; padding-left: 84px; padding-bottom: var(--sp-7); }
.process-step:last-child { padding-bottom: 0; }
.process-step__num { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--cyan); font-size: 1.05rem; font-weight: 600; }
.process-step__title { font-size: var(--fs-4); margin-bottom: var(--sp-2); }
.process-step__text { color: var(--text-soft); max-width: 62ch; margin-bottom: 0; }
@media (max-width: 640px) { .process-step { padding-left: 64px; } .process-step__num { width: 44px; height: 44px; font-size: 0.9rem; } .process-list::before { left: 21px; } }

/* =====================================================================
   Signature 4: capacity & solutions — 2x2 dense product-spec cards.
   ===================================================================== */
.products-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); max-width: var(--wrap-wide); margin: 0 auto; }
.product-card { padding: var(--sp-6); }
.product-card__title { font-size: var(--fs-4); margin-bottom: var(--sp-3); }
.product-card__lede { color: var(--text-soft); margin-bottom: var(--sp-4); }
.product-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.product-card li { padding-left: 1.5em; position: relative; color: var(--text-soft); font-size: 0.9375rem; }
.product-card li::before { content: '→'; position: absolute; left: 0; color: var(--cyan); font-family: var(--font-mono); }
@media (max-width: 880px) { .products-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Signature 5: cable systems catalogue — stacked full-width spec rows,
   the densest "rate card" register on the page.
   ===================================================================== */
.systems-section { padding: var(--section-pad) 0; background: var(--bg-2); position: relative; z-index: 1; }
.system-row { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: center; padding: var(--sp-5); margin-bottom: var(--sp-4); }
.system-row:last-child { margin-bottom: 0; }
.system-row__media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.system-row__media img { width: 100%; height: 100%; object-fit: cover; }
.system-row__route { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-2); }
.system-row__title { font-size: var(--fs-4); margin-bottom: var(--sp-3); }
.system-row__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.system-row__fact dt, .system-row__facts dt { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 3px; }
.system-row__fact dd, .system-row__facts dd { margin: 0; font-family: var(--font-mono); font-weight: 600; color: var(--text); font-size: 0.9375rem; }
.system-row__link { display: inline-flex; margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--cyan); }
@media (max-width: 880px) {
	.system-row { grid-template-columns: 1fr; }
	.system-row__facts { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Signature 6: landing stations — horizontal-scroll facility rail
   (distinct from the map's static visual and the systems' stacked rows).
   ===================================================================== */
.stations-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.rail { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--sp-2) var(--sp-4) var(--sp-6); margin: 0 calc(var(--sp-4) * -1); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.station-card { flex: 0 0 auto; width: min(74vw, 420px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.station-card__media { aspect-ratio: 4/3; overflow: hidden; }
.station-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.station-card:hover .station-card__media img { transform: scale(1.05); }
.station-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.station-card__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin: var(--sp-2) 0 var(--sp-3); }
.station-card__excerpt { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: var(--sp-3); flex: 1; }
.station-card__link { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--cyan); }
.rail-hint { text-align: right; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: calc(var(--sp-6) * -1 + 8px); }
@media (max-width: 640px) { .station-card { width: 84vw; } }

/* =====================================================================
   Signature 7: marine-operations photography — dense masonry-like grid,
   the section where "lots of images" is most visible.
   ===================================================================== */
.gallery-section { padding: var(--section-pad) 0; background: var(--bg-deep); position: relative; z-index: 1; }
.photo-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 140px;
	grid-auto-flow: dense;
	gap: var(--sp-3);
	max-width: var(--wrap-wide);
	margin: 0 auto;
}
.g-cell { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.g-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.g-cell:hover img { transform: scale(1.06); }
.g-cell__caption {
	position: absolute; inset: auto 0 0 0; padding: var(--sp-3) var(--sp-3) var(--sp-2);
	background: linear-gradient(0deg, rgba(2,5,10,0.85) 0%, transparent 100%);
	font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-soft);
	opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease;
}
.g-cell:hover .g-cell__caption, .g-cell:focus-within .g-cell__caption { opacity: 1; transform: none; }
.g-wide { grid-column: span 2; grid-row: span 1; }
.g-tall { grid-column: span 2; grid-row: span 2; }
.g-sq   { grid-column: span 2; grid-row: span 1; }
.g-big  { grid-column: span 3; grid-row: span 2; }
@media (max-width: 900px) {
	.photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.g-wide, .g-tall, .g-sq, .g-big { grid-column: span 1; grid-row: span 1; }
	.g-tall, .g-big { grid-row: span 2; }
}

/* =====================================================================
   Signature 8: why Current — numbered two-column text list, no imagery,
   deliberately the plainest register on the page.
   ===================================================================== */
.diff-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; }
.diff-item { display: flex; gap: var(--sp-4); }
.diff-item__num { font-family: var(--font-mono); font-size: var(--fs-4); color: var(--cyan); opacity: 0.55; flex: 0 0 auto; min-width: 2ch; }
.diff-item__title { font-size: var(--fs-3); margin-bottom: 6px; }
.diff-item__text { color: var(--text-soft); margin: 0; max-width: 48ch; }
@media (max-width: 880px) { .diff-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* =====================================================================
   Signature 9: client case studies — stat-forward glass cards.
   ===================================================================== */
.case-section { padding: var(--section-pad) 0; background: var(--bg-2); position: relative; z-index: 1; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); max-width: var(--wrap-wide); margin: 0 auto; }
.case-card { padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; }
.case-card__metric { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6); color: var(--cyan); line-height: 1; margin-bottom: 4px; }
.case-card__metric-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-4); }
.case-card__quote { font-style: italic; color: var(--text-soft); margin-bottom: var(--sp-4); flex: 1; }
.case-card__result { font-size: 0.875rem; color: var(--text-faint); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Signature 10: environmental practice — split text/image, reusing the
   proportions of a split band but at a single-pair scale, cyan register.
   ===================================================================== */
.sustain-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.sustain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--sp-4); align-items: center; }
.sustain-grid__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.sustain-grid__media img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.sustain-grid__media a:first-child { margin-top: var(--sp-7); }
.sustain-stats { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.sustain-stats li { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text-soft); font-size: 0.9375rem; }
.sustain-stats strong { color: var(--text); font-weight: 600; font-family: var(--font-mono); }
@media (max-width: 900px) { .sustain-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .sustain-grid__media a:first-child { margin-top: 0; } }

/* =====================================================================
   Signature 11: the fleet — rectangular vessel-portrait grid (distinct
   from a circular team-portrait pattern; these are ships, not people).
   ===================================================================== */
.fleet-section { padding: var(--section-pad) 0; background: var(--bg-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.fleet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); max-width: var(--wrap-wide); margin: 0 auto; }
.vessel-card { padding: 0; overflow: hidden; }
.vessel-card__media { aspect-ratio: 4/3; overflow: hidden; }
.vessel-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vessel-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.vessel-card__name { font-size: var(--fs-3); margin-bottom: 2px; }
.vessel-card__role { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); margin-bottom: var(--sp-3); display: block; }
.vessel-card__bio { font-size: 0.8125rem; color: var(--text-soft); margin: 0; }
@media (max-width: 900px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fleet-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Journal teaser band.
   ===================================================================== */
.journal-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }

/* =====================================================================
   Signature 12: RFP / contact-sales CTA — full-width dark closing band
   with a real request-capacity form beside NOC/contact details.
   ===================================================================== */
.cta-band { padding: var(--section-pad) 0 calc(var(--section-pad) - var(--sp-4)); background: var(--bg-deep); border-top: 1px solid var(--line-soft); position: relative; z-index: 1; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--sp-4); align-items: start; }
.cta-noc { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); }
.cta-noc li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-soft); font-size: 0.9375rem; }
.cta-noc li::before { content: '—'; color: var(--cyan); flex: 0 0 auto; }
.cta-address { font-size: 0.9375rem; color: var(--text-soft); white-space: pre-line; margin-bottom: var(--sp-5); font-family: var(--font-mono); }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Reduced content padding on small screens so the generous desktop rhythm
   doesn't feel bloated on a 390px viewport. */
@media (max-width: 600px) {
	:root { --section-pad: 72px; }
	.hero__title { font-size: clamp(2.2rem, 8vw + 1rem, 3rem); }
}