/* Comera Medical Training — styles. BRAND: Comera brand kit v1.0 (July 2026), `comera-medical-training` tokens — dark #0D1F2D, light #F2F6F7, accent #1E86C9. Archivo (900) display / IBM Plex Mono eyebrows+labels / IBM Plex Sans body. Accessibility (WCAG-AA verified in the rendered DOM, not eyeballed): - The kit's raw --accent #1E86C9 fails 4.5:1 under BOTH white (3.96) and navy (4.24) text, and its --accent-ink #1B7AB7 passes on white (4.65) but fails on our pale band #F2F6F7 (4.28). So the accent is split into three roles below; the brand accent itself is used only where it carries no text, exactly as the kit's own token file instructs ("accent — fills and large elements. NOT body text on white"). - Grids step N → 2 (≤1180px) → 1 (≤920px), tighter spacing ≤540px (kit LAYOUT.md). - Every full-bleed band shares the same centered .wrap so nothing drifts on wide monitors. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #FFFFFF; --surface: #F2F6F7; /* pale blue-grey alternate band */ --navy: #0D1F2D; /* body text / dark bands / footer */ --navy-mid: #16344A; /* cards + panels on dark */ --navy-line: #22415A; /* hairline on dark */ --ink: #0D1F2D; --ink-soft: #4A5B66; /* muted body text on light (7.0:1 on white) */ --line: #E2E8EA; /* hairline borders on light */ --accent: #1E86C9; /* BRAND accent — decorative only (rules, borders, glow) */ --accent-strong: #1B7AB7; /* accent FILL under white text (AA 4.65:1) */ --accent-hover: #1E86C9; /* hover lifts the fill to the pure brand accent */ --accent-ink: #17699E; /* accent TEXT on light (AA 5.91 white / 5.44 pale) */ --accent-on-dark: #1F8CD2; /* accent TEXT on the navy bands (AA 4.59:1) */ --on-accent: #FFFFFF; /* text on accent fills */ --footer-muted: #9FB4C0; /* muted text on navy (7.8:1) */ --on-dark-soft: #B9C7D1; /* body text on navy bands */ --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --maxw: 1240px; --gutter: 2rem; --radius: 10px; --radius-sm: 6px; --shadow: 0 22px 48px -26px rgba(13, 31, 45, 0.35); } @media (min-width: 1600px) { :root { --maxw: 1400px; } } @media (max-width: 720px) { :root { --gutter: 1.4rem; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: 1rem; background: var(--bg); color: var(--ink); line-height: 1.65; /* NB: no `overflow-x: hidden` — it makes a scroll container and breaks `position: sticky` on the jump nav. Horizontal overflow is instead prevented properly, and verified at 375/1400 each build. */ -webkit-font-smoothing: antialiased; } /* ---------- shared container ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---------- accessibility helpers ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--accent-strong); color: var(--on-accent); font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.8rem 1.4rem; text-decoration: none; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .hero a:focus-visible, .band-dark a:focus-visible, .cta-band a:focus-visible, footer a:focus-visible, footer button:focus-visible { outline-color: var(--accent); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } section[id] { scroll-margin-top: calc(96px + var(--jumpnav-h, 0px)); } /* Registered-trademark mark. MEASURED, don't guess: in IBM Plex Sans/Mono the ® glyph is already drawn raised and small (~55–63% of cap height, ink sitting above the baseline) — wrapping those in .rtm or ^{would double-shrink them, so body/mono text is left alone.
In Archivo the ® is drawn FULL SIZE on the baseline (~103% of cap height), which is
visually huge next to a 900-weight heading — so display type only gets this class.
Uses position/bottom rather than vertical-align:super so the line box never grows. */
.rtm {
font-size: 0.45em;
vertical-align: baseline;
position: relative;
bottom: 0.78em;
font-weight: 700;
letter-spacing: 0;
}

/* ---------- typography atoms ---------- */
.eyebrow {
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink);
display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; display: block; width: 26px; height: 2px; background: var(--accent); }
.eyebrow.plain::before { display: none; }
.section-title {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
color: var(--navy);
}
.section-lead {
font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-soft);
max-width: 60ch; margin-top: 1.1rem; line-height: 1.7;
}

/* ---------- buttons (match variant to background) ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
letter-spacing: 0.005em; padding: 0.8rem 1.5rem; border-radius: var(--radius-sm);
border: 2px solid transparent; cursor: pointer; text-decoration: none;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); } /* white on blue — AA 4.65 */
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); } /* LIGHT bg */
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } /* DARK bg only */
.btn-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-arrow::after { content: '→'; font-weight: 600; }

/* ---------- section rhythm ---------- */
.section { padding: 6.5rem 0; position: relative; }
.section--surface { background: var(--surface); }
.band-dark { background: var(--navy); color: #fff; }
.band-dark .section-title { color: #fff; }
.band-dark .section-lead { color: var(--on-dark-soft); }
.band-dark .eyebrow { color: var(--accent-on-dark); }

/* =====================================================================
HEADER / NAV
===================================================================== */
header {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1.5rem; }
/* On mobile the row is brand | menu button | CTA, and space-between stranded the
menu button in the middle of the bar. The auto margin absorbs the free space so
the button sits next to the CTA on the right. Desktop is unaffected — the button
is display:none there, and space-between still governs brand | nav | CTA. */
.menu-btn { margin-left: auto; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; line-height: 1; }
/* Brand-kit Set A lockup. align-self stops the flex parent stretching it — that
distorted the artwork to aspect 5.88 (vs 3.72) the first time round. */
.brand-logo { height: 30px; width: auto; display: block; align-self: center; }
.footer-logo-img { height: 34px; width: auto; display: block; margin-bottom: 0.9rem; }
.brand-name {
font-family: var(--font-display); font-weight: 900; font-size: 1.12rem;
letter-spacing: 0.02em; color: var(--navy); text-transform: uppercase;
}
.brand-name span { color: var(--accent-ink); }
.brand-sub {
font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.35rem;
}
.nav-links { display: flex; gap: 1.7rem; list-style: none; align-items: center; }
.nav-links a {
font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
text-decoration: none; transition: color 0.2s; padding: 0.5rem 0;
}
.nav-links a:hover { color: var(--accent-ink); }
.nav-cta { flex-shrink: 0; padding: 0.6rem 1.2rem; min-height: 40px; font-size: 0.9rem; }
.menu-btn {
display: none; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase; background: none;
border: 1px solid var(--line); color: var(--navy); border-radius: var(--radius-sm);
padding: 0.5rem 0.9rem; cursor: pointer; min-height: 44px;
}
@media (max-width: 960px) {
.menu-btn { display: block; }
.nav-links {
display: none; position: absolute; top: 74px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: #fff; border-bottom: 1px solid var(--line); padding: 0.4rem 0;
box-shadow: var(--shadow);
}
.nav-links.open { display: flex; }
.nav-links a {
display: block; /* REQUIRED: inline ignores vertical padding, so the
border-bottom struck through the next item's text */
padding: 0.95rem var(--gutter);
border-bottom: 1px solid var(--line);
}
.nav-links li:last-child a { border-bottom: none; }
}

/* =====================================================================
HERO
===================================================================== */
.hero {
background: var(--navy); color: #fff; position: relative; overflow: hidden;
padding-top: 10rem; padding-bottom: 5rem;
}
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 60% 55% at 80% 15%, rgba(30,134,201,0.20) 0%, transparent 60%),
linear-gradient(165deg, #0D1F2D 0%, #0D1F2D 55%, #10273A 100%);
}
.hero-grid {
position: absolute; inset: 0; z-index: 0; opacity: 0.5;
background-image:
linear-gradient(rgba(159,180,192,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(159,180,192,0.06) 1px, transparent 1px);
background-size: 58px 58px;
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero .eyebrow { color: var(--accent-on-dark); }
.hero h1 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.03; letter-spacing: -0.025em;
color: #fff; margin-bottom: 1.6rem;
}
.hero h1 em { color: var(--accent-on-dark); font-style: italic; }
.hero-sub {
font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--on-dark-soft);
max-width: 62ch; line-height: 1.7; margin-bottom: 2.2rem; font-weight: 400;
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero-note {
font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255,255,255,0.6);
line-height: 1.7; margin-top: 3rem; max-width: 70ch;
border-left: 2px solid var(--accent); padding-left: 1.1rem;
}

/* =====================================================================
PAGE HEADER (inner pages — a shorter hero)
===================================================================== */
.page-header {
background: var(--navy); color: #fff; position: relative; overflow: hidden;
padding-top: 9rem; padding-bottom: 4rem;
}
.page-header-inner { position: relative; z-index: 2; max-width: 860px; }
.page-header .eyebrow { color: var(--accent-on-dark); }
.page-header h1 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.025em;
color: #fff; margin-bottom: 1.3rem;
}
.page-header .hero-note { margin-top: 2rem; }
/* Jump-to-category strip. Sticks directly under the fixed header once you scroll
past it, so the category filter stays reachable down a long courses page.
Opaque background + border are required — it scrolls OVER content.
NOT sticky below 920px: the chips wrap to several rows there and a ~200px bar
would eat the phone viewport. */
.jump-nav {
padding: 1rem 0;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
@media (min-width: 921px) {
.jump-nav {
position: sticky;
top: 74px; /* = header height */
z-index: 150; /* under the header (200), above page content */
}
}
/* current page in the nav */
.nav-links a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

/* =====================================================================
COURSE DETAIL PAGES (/courses/)
===================================================================== */
.course-header { padding-top: 8.5rem; padding-bottom: 3.5rem; }
.crumbs {
position: relative; z-index: 2; font-family: var(--font-mono); font-size: 0.74rem;
letter-spacing: 0.04em; color: var(--footer-muted); margin-bottom: 1.6rem;
}
.crumbs a { color: var(--footer-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.5; margin: 0 0.35rem; }
.crumbs [aria-current] { color: #fff; }
.course-header h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

.course-detail { display: grid; grid-template-columns: 1fr 360px; gap: 3.5rem; align-items: start; }
.course-body { max-width: 68ch; }
.detail-h {
font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--navy);
margin: 2.4rem 0 0.9rem; letter-spacing: -0.01em;
}
.course-body > .detail-h:first-child { margin-top: 0; }
.course-body p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1rem; }

.tick-list { list-style: none; margin: 0 0 1.2rem; }
.tick-list li {
position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem;
color: var(--ink-soft); line-height: 1.7;
}
.tick-list li::before {
content: '✓'; position: absolute; left: 0; top: 0;
color: var(--accent-ink); font-weight: 700;
}

/* sticky "at a glance" panel */
.course-aside { position: sticky; top: 96px; }
.aside-card {
background: var(--surface); border: 1px solid var(--line);
border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.8rem 1.6rem;
}
.aside-h {
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1.1rem;
}
.spec-list { margin-bottom: 1.4rem; }
.spec-row { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: none; padding-top: 0; }
.spec-row dt {
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem;
}
.spec-row dd { margin: 0; font-size: 0.92rem; color: var(--navy); line-height: 1.55; }
.aside-price { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; }
.aside-price .amount { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--navy); }
.aside-price .scope { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--navy); }
.aside-price .caveat { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.aside-note { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.9rem; }
.btn-block { width: 100%; }

/* count badge on the courses-index jump chips */
.chip-count {
margin-left: 0.45rem; font-size: 0.66rem; color: var(--ink-soft);
background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.4rem;
}
.band-dark .chip-count, .chip:hover .chip-count { border-color: var(--line); }

@media (max-width: 1080px) {
.course-detail { grid-template-columns: 1fr; gap: 2.5rem; }
.course-aside { position: static; max-width: 560px; }
}

/* =====================================================================
CHAIN OF SURVIVAL
===================================================================== */
.chain-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
margin-top: 3rem; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); overflow: hidden;
}
.chain-node { padding: 2rem 1.5rem; border-right: 1px solid var(--line); position: relative; }
.chain-node:last-child { border-right: none; }
.chain-num {
font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: 1;
color: var(--accent-ink); margin-bottom: 0.9rem;
}
.chain-node.done .chain-num { color: var(--accent-on-dark); }
.chain-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.6rem; }
.chain-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.6; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; }
.pillar-tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.7rem; }
.pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); margin-bottom: 0.5rem; }
.pillar p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; }

/* =====================================================================
JOURNEY (Listen / Tailor / Deliver / Support)
===================================================================== */
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.journey-step { position: relative; padding-top: 1.5rem; border-top: 3px solid var(--accent); }
.journey-kicker { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.7rem; }
.journey-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--navy); margin-bottom: 0.6rem; }
.journey-step p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; }

/* =====================================================================
FEATURED COURSES
===================================================================== */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.course-card {
display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.8rem 1.7rem; transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.course-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.course-card.flagship { border: 2px solid var(--accent); }
.course-flag { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.6rem; }
.course-meta { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.9rem; }
.course-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.7rem; }
/* Body copy only — the :not() guards matter: `.course-card > p` (0,1,1) otherwise
out-ranks the `.course-flag` / `.course-meta` class rules (0,1,0) and silently
repaints the coral flag grey. */
.course-card > p:not(.course-flag):not(.course-meta) {
font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.3rem;
}
.course-price { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.2rem; }
.course-price .amount { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--navy); letter-spacing: -0.01em; }
/* scope line — used instead of a price where the course is quoted per cohort */
.course-price .scope { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--navy); }
.course-price .caveat { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.course-card .btn { width: 100%; }
/* "there are more courses" line under the featured grid */
.courses-more {
margin-top: 2.2rem; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.7; max-width: 68ch;
}
.courses-more a { color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.courses-more a:hover { text-decoration: underline; }

/* =====================================================================
TWO-UP / AUDIENCE PANELS (individuals, organisations)
===================================================================== */
.panel-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.panel-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.panel {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 2rem 1.9rem; display: grid; grid-template-rows: auto auto 1fr auto;
}
.section--surface .panel { background: #fff; }
.band-dark .panel { background: var(--navy-mid); border-color: var(--navy-line); }
.panel-tag { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.8rem; }
.band-dark .panel-tag { color: var(--accent-on-dark); }
.panel h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.7rem; line-height: 1.2; }
.band-dark .panel h3 { color: #fff; }
.panel p { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.68; margin-bottom: 1.3rem; }
.band-dark .panel p { color: var(--on-dark-soft); }
.panel-link {
font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--accent-ink);
text-decoration: none; align-self: end; justify-self: start; display: inline-flex; gap: 0.4rem; align-items: center;
}
.band-dark .panel-link { color: var(--accent-on-dark); }
.panel-link:hover { gap: 0.7rem; }
.panel-link::after { content: '→'; transition: transform 0.18s ease; }

/* service chip list (org extras, SAFHEE variants) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.chip {
/* inline-flex + min-height keeps the tap target at the 44px quality bar
(LAYOUT.md); padding alone left these at 39px. */
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--navy); background: var(--surface);
border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.1rem; text-decoration: none;
transition: border-color 0.18s ease, color 0.18s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.band-dark .chip { color: #fff; background: var(--navy-mid); border-color: var(--navy-line); }
.band-dark .chip:hover { border-color: var(--accent); color: var(--accent-on-dark); }

/* =====================================================================
E-LEARNING (split)
===================================================================== */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; margin-top: 2.5rem; }
.split-card {
background: var(--navy); color: #fff; border-radius: var(--radius); padding: 2.2rem;
border: 1px solid var(--navy-line);
}
.split-card .course-flag { color: var(--accent-on-dark); }
.split-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin-bottom: 0.6rem; }
.split-card p { color: var(--on-dark-soft); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.5rem; }
.split-copy p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; max-width: 52ch; }
.split-copy p strong { color: var(--navy); }

/* =====================================================================
ARMED FORCES commitments
===================================================================== */
.commit-list { list-style: none; margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; }
.commit-list li {
font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); font-weight: 500;
padding-left: 1.9rem; position: relative; line-height: 1.5;
}
.commit-list li::before {
content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-ink); font-weight: 700;
}

/* =====================================================================
FAQ
===================================================================== */
.faq { max-width: 820px; margin: 2.5rem auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy);
padding: 1.2rem 2.5rem 1.2rem 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+'; position: absolute; right: 0.2rem; top: 1rem; font-size: 1.5rem; font-weight: 400;
color: var(--accent-ink); transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; padding: 0 0 1.3rem; max-width: 70ch; }

/* =====================================================================
CONTACT FORM
===================================================================== */
.contact-head { text-align: center; max-width: 640px; margin: 0 auto; }
.contact-head .eyebrow { justify-content: center; }
.contact-head .section-lead { margin-left: auto; margin-right: auto; }
.form-panel {
max-width: 780px; margin: 3rem auto 0; background: #fff;
border: 1px solid var(--line); border-top: 3px solid var(--accent);
border-radius: var(--radius); padding: 2.4rem;
}
.form-panel h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--navy); margin-bottom: 0.4rem; }
.fp-sub { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 1.8rem; line-height: 1.6; }
.f-hp { position: absolute; left: -9999px; top: -9999px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.f-field { display: flex; flex-direction: column; min-width: 0; }
.f-field.full { grid-column: 1 / -1; }
.f-field label {
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--navy); margin-bottom: 0.45rem;
}
.f-field label b { color: var(--accent-ink); }
.f-field input, .f-field select, .f-field textarea {
font-family: var(--font-body); font-size: 1rem; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 0.75rem 0.9rem; min-height: 46px; width: 100%; min-width: 0;
}
.f-field textarea { min-height: 130px; resize: vertical; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: #fff;
}
.f-consent { display: flex; gap: 0.7rem; align-items: flex-start; margin: 1.4rem 0; }
.f-consent input { width: 18px; height: 18px; margin-top: 0.2rem; flex-shrink: 0; accent-color: #17699E; }
.f-consent label { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; }
.f-actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.f-note { font-size: 0.8rem; color: var(--ink-soft); }
.f-note a { color: var(--accent-ink); }
.f-status { margin-top: 1.1rem; font-size: 0.93rem; min-height: 1.4em; font-weight: 500; }
.f-status.ok { color: #216127; }
.f-status.err { color: #A5301F; }

/* =====================================================================
FINAL CTA BAND
===================================================================== */
.cta-band { background: var(--navy); color: #fff; text-align: center; overflow: hidden; position: relative; }
.cta-band .hero-bg { opacity: 1; }
.cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.cta-band h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.cta-band p { color: var(--on-dark-soft); font-size: 1.08rem; line-height: 1.7; margin-bottom: 2rem; }
.cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
FOOTER
===================================================================== */
footer { background: var(--navy); color: var(--footer-muted); padding: 4rem 0 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand .brand-name { color: #fff; font-size: 1.15rem; }
.footer-brand .brand-name span { color: var(--accent-on-dark); }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; margin-top: 1rem; max-width: 34ch; }
.footer-brand .fb-contact { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--on-dark-soft); line-height: 2.2; }
/* inline-block + padding so the phone/email tap targets clear WCAG 2.5.8 (24px).
As plain inline links they measured 17px tall with a 5px gap = 22px effective,
the only two controls on the site that failed the AA target size. The roomier
line-height keeps the extra padding from closing that gap back up. */
.footer-brand .fb-contact a { color: var(--on-dark-soft); text-decoration: none; display: inline-block; padding: 4px 0; }
.footer-brand .fb-contact a:hover { color: #fff; }
/* Footer column headings are h2, not h4: h4 skipped a level and broke the
heading outline. Level is semantics, not size — the type scale is set here. */
.footer-col h2 { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { font-size: 0.88rem; color: var(--footer-muted); text-decoration: none; transition: color 0.18s; }
.footer-col a:hover { color: var(--accent-on-dark); }
.footer-legal { border-top: 1px solid var(--navy-line); margin-top: 3rem; padding-top: 2rem; font-size: 0.8rem; line-height: 1.7; }
.footer-legal p { margin-bottom: 0.6rem; }
.footer-legal a { color: var(--footer-muted); }
.footer-legal a:hover { color: #fff; }

/* =====================================================================
COOKIE BAR
===================================================================== */
.cookiebar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
background: var(--navy-mid); border-top: 1px solid var(--navy-line);
transform: translateY(110%); transition: transform 0.3s ease;
}
.cookiebar.show { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }
.cb-inner { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap; }
.cb-inner p { font-size: 0.85rem; color: rgba(255,255,255,0.85); max-width: 640px; }
.cb-inner a { color: var(--accent-on-dark); }
.cb-btns { display: flex; gap: 0.8rem; }
.btn-sm { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; border: 2px solid transparent; }
.cb-accept { background: var(--accent-strong); color: var(--on-accent); }
.cb-accept:hover { background: var(--accent-hover); }
.cb-decline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.cb-decline:hover { border-color: #fff; }

/* =====================================================================
LEGAL PAGES / 404
===================================================================== */
.doc-page { background: var(--surface); }
.doc { max-width: 820px; margin: 0 auto; padding: 9rem var(--gutter) 5rem; }
.back-link { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; display: inline-block; margin-bottom: 2rem; }
.back-link:hover { color: var(--navy); }
.back-link.bottom { margin: 2.5rem 0 0; }
.doc h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em; color: var(--navy); margin-bottom: 0.5rem; }
.doc .doc-updated { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem; }
.doc h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--navy); margin: 2.2rem 0 0.8rem; }
.doc h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--navy); margin: 1.6rem 0 0.6rem; }
.doc p, .doc li { font-size: 0.96rem; line-height: 1.75; color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.4rem; margin: 0.6rem 0 1rem; }
.doc p { margin-bottom: 1rem; }
.doc a { color: var(--accent-ink); }
.doc table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; font-size: 0.9rem; text-align: left; vertical-align: top; }
.doc th { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.74rem; background: #fff; }
.doc-tablewrap { overflow-x: auto; }
.notfound { min-height: 72vh; display: flex; align-items: center; text-align: center; background: var(--navy); }
.notfound .wrap { width: 100%; padding-top: 8rem; padding-bottom: 4rem; }
.notfound h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 10vw, 8rem); color: var(--accent-on-dark); line-height: 1; }
.notfound p { color: var(--on-dark-soft); margin: 1rem 0 2rem; }

/* =====================================================================
REVEAL ON SCROLL
===================================================================== */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.08s; } .delay-2 { transition-delay: 0.16s; } .delay-3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
.fade-up { opacity: 1; transform: none; transition: none; }
.btn:hover, .course-card:hover { transform: none; }
}

/* =====================================================================
RESPONSIVE — grids step N → 2 (≤1180) → 1 (≤920)
===================================================================== */
@media (max-width: 1180px) {
.chain-grid, .course-grid, .panel-3 { grid-template-columns: repeat(2, 1fr); }
.journey-grid { grid-template-columns: repeat(2, 1fr); }
.pillars { grid-template-columns: repeat(3, 1fr); }
.chain-node:nth-child(2n) { border-right: none; }
.chain-node:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.split { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 920px) {
.chain-grid, .course-grid, .panel-3, .panel-2, .journey-grid, .pillars { grid-template-columns: 1fr; }
.chain-node { border-right: none; border-bottom: 1px solid var(--line); }
.chain-node:last-child { border-bottom: none; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-brand { grid-column: 1 / -1; }
.f-grid { grid-template-columns: 1fr; }
.commit-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.section { padding: 4.5rem 0; }
.hero { padding-top: 8.5rem; padding-bottom: 3.5rem; }
.footer-top { grid-template-columns: 1fr; }
.form-panel { padding: 1.6rem; }
.cb-inner { flex-direction: column; align-items: flex-start; }
}
/* Header fit on small screens. The row is logo + Menu + CTA; below ~560px the
three no longer fit at full size, so scale them down rather than dropping the
CTA — the enquiry button is the page's primary action and shouldn't be buried
in the menu (kit LAYOUT.md). Verified for no overflow at 320-960px. */
@media (max-width: 560px) {
.nav-bar { gap: 0.6rem; }
.brand-logo { height: 24px; }
.nav-cta { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
.menu-btn { padding: 0.5rem 0.7rem; font-size: 0.7rem; }
}
@media (max-width: 380px) {
.brand-logo { height: 21px; }
.nav-cta { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
}}