/* Inner pages — shared components layered on top of style.css */

.skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--navy-900);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--r) 0;
}
.skiplink:focus { left: 0; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Page hero ---------- */
.phero {
	position: relative;
	color: #fff;
	padding: clamp(46px, 7vw, 86px) 0 clamp(40px, 6vw, 70px);
	overflow: hidden;
	isolation: isolate;
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.phero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, rgba(10,43,79,.95) 0%, rgba(10,43,79,.86) 45%, rgba(19,78,140,.72) 100%);
}
.phero h1 {
	color: #fff;
	font-size: clamp(1.85rem, 4vw, 3rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 14px;
	max-width: 20ch;
}
.phero__lead {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(.98rem, 1.5vw, 1.12rem);
	color: #d3e3f2;
	line-height: 1.75;
}

.crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 18px;
	font-size: .82rem;
	color: #9fbdd8;
}
.crumb a { color: #cfe1f1; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb svg { width: 13px; height: 13px; opacity: .55; flex: none; }
.crumb [aria-current] { color: #fff; font-weight: 600; }

/* ---------- Section sub-navigation ---------- */
.subnav {
	position: sticky;
	top: 0;
	z-index: 55;
	background: #fff;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.subnav__scroll {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.subnav__scroll::-webkit-scrollbar { display: none; }
.subnav__link {
	white-space: nowrap;
	padding: 17px 16px;
	font-size: .88rem;
	font-weight: 500;
	color: var(--muted);
	border-bottom: 3px solid transparent;
}
.subnav__link:hover { color: var(--navy); background: var(--navy-50); }
.subnav__link.is-current { color: var(--navy); font-weight: 600; border-bottom-color: var(--green); }

/* ---------- Two-column shell ---------- */
.shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(28px, 4vw, 54px); align-items: start; }
.shell--narrow { max-width: 860px; margin: 0 auto; }
.aside { position: sticky; top: 78px; display: grid; gap: 18px; }

/* ---------- Rich text ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; letter-spacing: -.01em; margin-top: 1.9em; color: var(--navy-900); }
.prose h3 { font-size: 1.08rem; margin-top: 1.7em; color: var(--navy-900); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: #384b5d; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li + li { margin-top: .5em; }
.prose strong { color: var(--navy-900); font-weight: 600; }
.prose a:not(.btn) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--green-700); }

/* ---------- Panels & cards ---------- */
.panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(20px, 2.4vw, 28px);
}
.panel--soft { background: var(--bg-soft); border-color: transparent; }
.panel--navy { background: var(--navy-900); border-color: transparent; color: #cfe1f1; }
/* Headings carry an explicit colour from style.css, so dark surfaces must reset them. */
.panel--navy h1, .panel--navy h2, .panel--navy h3, .panel--navy h4, .panel--navy b { color: #fff; }
.panel__title { margin: 0 0 12px; font-size: 1.02rem; color: var(--navy-900); }

.callout {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--r-lg);
	background: var(--navy-50);
	border-left: 4px solid var(--navy);
}
.callout--green { background: var(--green-50); border-left-color: var(--green); }
.callout--saffron { background: var(--saffron-50); border-left-color: var(--saffron); }
.callout svg { width: 21px; height: 21px; flex: none; color: var(--navy); margin-top: 2px; }
.callout--green svg { color: var(--green-700); }
.callout--saffron svg { color: var(--saffron); }
.callout p { margin: 0; font-size: .92rem; color: #384b5d; }
.callout p + p { margin-top: 8px; }

/* ---------- Key figures ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kpi {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 22px;
	border-top: 3px solid var(--green);
}
.kpi__num { display: block; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; color: var(--navy-900); line-height: 1.1; letter-spacing: -.02em; }
.kpi__label { display: block; margin-top: 6px; font-size: .86rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl { position: relative; padding-bottom: 30px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px var(--green-50);
}
.tl__year { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); margin-bottom: 4px; }
.tl h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--navy-900); }
.tl p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 22px; }
.person { text-align: left; }
.person__img {
	aspect-ratio: 1 / 1;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--bg-soft);
	margin-bottom: 13px;
}
.person__img img { width: 100%; height: 100%; object-fit: cover; }
/* Monogram stands in until real headshots arrive — no stock faces on named people. */
.person__img--mono {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--navy-50) 0%, #dfeaf6 100%);
}
.person__img--mono::after {
	content: attr(data-initials);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--navy);
	opacity: .65;
}
.person h3 { margin: 0 0 2px; font-size: 1rem; color: var(--navy-900); }
.person__role { display: block; font-size: .84rem; color: var(--green-700); font-weight: 600; margin-bottom: 7px; }
.person p { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.6; }

/* ---------- Accordion ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.acc__item + .acc__item { border-top: 1px solid var(--line); }
.acc__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	padding: 18px 20px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: .97rem;
	color: var(--navy-900);
	cursor: pointer;
}
.acc__q:hover { background: var(--bg-soft); }
.acc__q svg { width: 18px; height: 18px; flex: none; color: var(--navy); transition: transform .22s ease; }
.acc__item.is-open .acc__q svg { transform: rotate(45deg); }
.acc__a { display: none; padding: 0 20px 20px; }
.acc__item.is-open .acc__a { display: block; }
.acc__a p { margin: 0; color: #384b5d; font-size: .93rem; }
.acc__a p + p { margin-top: 10px; }

/* ---------- Documents ---------- */
.doclist { display: grid; gap: 10px; }
.doc {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.doc:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.doc__icon {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--navy-50);
	color: var(--navy);
}
.doc__icon svg { width: 18px; height: 18px; }
.doc b { display: block; font-size: .93rem; color: var(--navy-900); font-weight: 600; }
.doc span { font-size: .8rem; color: var(--muted); }
.doc__dl { margin-left: auto; flex: none; color: var(--green-700); font-size: .85rem; font-weight: 600; }

/* ---------- Data table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.dtable { width: 100%; border-collapse: collapse; min-width: 620px; }
.dtable th, .dtable td { padding: 14px 18px; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--line); }
.dtable th { background: var(--navy-900); color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--navy-50); }
.dtable td b { color: var(--navy-900); }
.dtable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.step__n {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
}
.step h3 { margin: 10px 0 5px; font-size: 1.02rem; color: var(--navy-900); }
.step p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field { display: grid; gap: 7px; }
.field > label { font-size: .86rem; font-weight: 600; color: var(--navy-900); }
.field .req { color: #c0392b; }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	font: inherit;
	font-size: .93rem;
	color: var(--ink);
	background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: 2px solid var(--navy);
	outline-offset: 1px;
	border-color: var(--navy);
}
.field__hint { font-size: .8rem; color: var(--muted); }
.checkrow { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; color: #384b5d; }
.checkrow input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--green); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .87rem;
	color: var(--muted);
	cursor: pointer;
	background: #fff;
}
/* Sized explicitly — it would otherwise inherit .field input's width:100%. */
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--green); background: var(--green-50); color: var(--green-700); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Accreditation logos ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 14px; }
.logos span {
	padding: 13px 20px;
	border: 1px dashed var(--line);
	border-radius: var(--r);
	font-size: .84rem;
	font-weight: 600;
	color: var(--muted);
	background: #fff;
}

/* ---------- CTA band ---------- */
.ctaband {
	background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	padding: clamp(28px, 4vw, 46px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}
.ctaband h2 { color: #fff; margin: 0 0 8px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.01em; }
.ctaband p { margin: 0; color: #c6dcef; max-width: 56ch; font-size: .95rem; }
.ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Memorial ---------- */
.memorial { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.remember {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 20px;
	text-align: center;
}
.remember__flame {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--saffron-50);
	color: var(--saffron);
}
.remember__flame svg { width: 20px; height: 20px; }
.remember h3 { margin: 0 0 3px; font-size: 1rem; color: var(--navy-900); }
.remember__meta { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.remember p { margin: 0; font-size: .87rem; color: #4a5c6d; font-style: italic; line-height: 1.65; }

/* ---------- Gallery ---------- */
.galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.galitem { margin: 0; cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.galitem[hidden] { display: none; }
.galitem img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .35s ease; }
.galitem:hover img { transform: scale(1.04); }
.galitem figcaption { padding: 12px 15px; font-size: .86rem; color: var(--muted); }
.chip.is-on { border-color: var(--green); background: var(--green-50); color: var(--green-700); font-weight: 600; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(6, 22, 40, .93);
	display: grid;
	place-items: center;
	padding: 28px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1000px; width: 100%; }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r-lg); display: block; }
.lightbox figcaption { margin-top: 14px; color: #cfe1f1; text-align: center; font-size: .92rem; }
.lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close svg { width: 22px; height: 22px; }

/* ---------- Figure ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); display: block; }
.figure figcaption { margin-top: 10px; font-size: .82rem; color: var(--muted); }

/* ---------- Misc ---------- */
.tag {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: var(--green-50);
	color: var(--green-800);
}
.tag--navy { background: var(--navy-50); color: var(--navy); }
.tag--saffron { background: var(--saffron-50); color: var(--saffron); }
.stack { display: grid; gap: 18px; }
.stack--lg { gap: 34px; }

@media (max-width: 980px) {
	.shell { grid-template-columns: minmax(0, 1fr); }
	.aside { position: static; }
}

@media (max-width: 900px) {
	.subnav { top: var(--mhead); }
}

@media (max-width: 640px) {
	.form__row { grid-template-columns: minmax(0, 1fr); }
	.ctaband { flex-direction: column; align-items: flex-start; }
	.step { grid-template-columns: 38px 1fr; gap: 13px; }
	.step__n { width: 38px; height: 38px; font-size: .9rem; }
	.timeline { padding-left: 26px; }
	.tl::before { left: -23px; }
}