/* ==========================================================================
   Gawain Cox — Executive Portfolio
   Dark / smoked-charcoal theme with brass accent
   ========================================================================== */

:root {
	--bg: #0c0c0b;
	--bg-alt: #151412;
	--surface: #1b1916;
	--surface-2: #211f1b;
	--border: rgba(217, 168, 108, 0.16);
	--border-strong: rgba(217, 168, 108, 0.32);
	--text: #ece7df;
	--text-dim: #a8a29a;
	--text-faint: #6f6a63;
	--brass: #b8874f;
	--brass-light: #d9a86c;
	--brass-dark: #8a6238;
	--radius: 2px;
	--maxw: 1180px;
	--footer-h: 4.25rem;
	--font-display: 'Fraunces', 'Georgia', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Horizontal slide layout ----------
   The page no longer scrolls vertically. #scroll-main is a full-viewport
   flex row; each top-level section is one full-width "slide". Sections with
   more content than fits one viewport (Leadership, Network, Press) scroll
   internally on their own y-axis — see main.js for the wheel/touch logic
   that lets that internal scroll happen before advancing to the next slide. */
#scroll-main {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#scroll-main::-webkit-scrollbar { display: none; }

#scroll-main > section {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	/* Every slide is vertically centered, same as Hero — main.js flags any
	   slide whose content is taller than the viewport with .overflowing,
	   which switches it to top-aligned below (centering + internal scroll
	   otherwise hides the top of the content, unreachable). */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#scroll-main > section.overflowing {
	justify-content: flex-start;
}

/* Prev / next arrows */
.slide-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 450;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: rgba(12,12,11,0.55);
	backdrop-filter: blur(6px);
	color: var(--text);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.slide-arrow:hover { border-color: var(--brass); color: var(--brass-light); }
.slide-arrow-prev { left: 1.5rem; }
.slide-arrow-next { right: 1.5rem; }
.slide-arrow[disabled] { opacity: 0; pointer-events: none; }

/* Dot navigation */
.slide-dots {
	position: fixed;
	left: 50%;
	bottom: calc(var(--footer-h) + 1.1rem);
	transform: translateX(-50%);
	z-index: 450;
	display: flex;
	gap: 0.7rem;
}
.slide-dots .dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.slide-dots .dot:hover { border-color: var(--brass); }
.slide-dots .dot.active {
	background: var(--brass-light);
	border-color: var(--brass-light);
	transform: scale(1.3);
}

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

a { color: var(--brass-light); text-decoration: none; }
a:hover { color: var(--brass); }

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.75rem;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text);
	margin: 0 0 0.6em 0;
	line-height: 1.15;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brass-light);
	margin-bottom: 1em;
}

.section-heading {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	max-width: 34ch;
}

.section-lede {
	color: var(--text-dim);
	max-width: 62ch;
	font-size: 1.08rem;
}

section {
	/* Tightened for the horizontal layout — every slide now has to fit a
	   fixed viewport height rather than just flowing down the page, so
	   generous top/bottom padding costs real content room. Bottom padding
	   also reserves room for the fixed footer bar so content never sits
	   underneath it. */
	padding: clamp(4rem, 5vw, 6rem) 0;
	padding-bottom: calc(clamp(4rem, 5vw, 6rem) + var(--footer-h));
	position: relative;
}

.section-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0;
}

/* ---------- Background cover image ----------
   A single fixed, full-bleed cover photo sits behind the whole page. A dark
   scrim (background-color, ~93% opaque) is layered on top of it so the photo
   reads as a faint, atmospheric backdrop rather than competing with content —
   adjust the scrim's opacity below to taste once the real image is in place.
   Swap assets/images/bg-cover.jpg for a high-quality, wide (2400px+) landscape
   image — brewery interior, hop yard, or similar atmospheric shot works best. */
body {
	background-color: var(--bg);
	background-image:
		linear-gradient(to bottom, rgba(12,12,11,0.50) 0%, rgba(12,12,11,0.60) 20%, rgba(12,12,11,0.95) 25%, rgba(12,12,11,0.95) 75%, rgba(12,12,11,0.60) 80%, rgba(12,12,11,0.50) 100%),
		url("../images/bg-cover.jpg");
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: cover, cover;
	/* Was background-attachment: fixed — that combined with the body's new
	   overflow:hidden (the page no longer scrolls vertically at all) made
	   some browsers fail to paint the image entirely, leaving only the
	   near-black background-color showing. "fixed" only ever mattered to
	   distinguish it from content scrolling past underneath it; since body
	   itself never scrolls now, the default (background stays put either
	   way) gives the same look without the rendering bug. */
}

/* ---------- Nav ---------- */
#site-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 500;
	background: rgba(12,12,11,0.92);
	border-bottom: 1px solid transparent;
	transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
	padding: 1.5rem 0;
}

#site-nav.scrolled {
	background: rgba(12,12,11,0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--border);
	padding: 0.9rem 0;
}

#site-nav .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand {
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.brand .mono {
	width: 34px; height: 34px;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.85rem;
	color: var(--brass-light);
	letter-spacing: 0;
}

.nav-links {
	display: flex;
	gap: 2.1rem;
	list-style: none;
	margin: 0; padding: 0;
}

.nav-links a {
	color: #FFF;
	font-size: 0.88rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--brass-light); }

.nav-cta {
	border: 1px solid var(--border-strong);
	padding: 0.55em 1.3em;
	font-size: 0.88rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover { background: var(--brass); border-color: var(--brass); color: #0c0c0b; }

.nav-toggle {
	display: none;
	background: none; border: none;
	color: var(--text);
	font-size: 1.5rem;
	cursor: pointer;
	position: relative;
	z-index: 600;
}

/* ---------- Hero ---------- */
#hero {
	/* Vertical centering now comes from the shared #scroll-main > section
	   rule (column direction + justify-content:center) — this just handles
	   Hero's own padding, so it doesn't fight that rule's axis. */
	padding-top: 7rem;
	padding-bottom: calc(4rem + var(--footer-h));
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 4rem;
	align-items: center;
}

.hero-eyebrow {
	color: var(--brass-light);
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 1.4rem;
	display: block;
}

.hero-title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.05;
	margin-bottom: 0.5em;
}

.hero-title em {
	font-style: italic;
	color: var(--brass-light);
}

.hero-sub {
	font-size: 1.15rem;
	color: var(--text-dim);
	max-width: 46ch;
	margin-bottom: 2.2rem;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.9em;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--border-strong);
	color: var(--text);
	transition: all 0.25s ease;
	cursor: pointer;
	background: transparent;
}

.btn.primary {
	background: linear-gradient(135deg, var(--brass-light), var(--brass-dark));
	border-color: transparent;
	color: #14110c;
	font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.12); color: #14110c; }
.btn.ghost:hover { background: var(--surface); border-color: var(--brass); color: var(--brass-light); }

.hero-stats {
	display: flex;
	gap: 2.4rem;
	flex-wrap: wrap;
}

.hero-stat b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.7rem;
	color: var(--brass-light);
}
.hero-stat span {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.hero-portrait {
	position: relative;
}

.hero-portrait .frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--border-strong);
}

.hero-portrait img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.08) brightness(0.92);
}

.hero-portrait .frame::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,12,11,0) 55%, rgba(12,12,11,0.85) 100%),
		linear-gradient(90deg, rgba(184,135,79,0.12), transparent 40%);
	pointer-events: none;
}

.hero-portrait .caption {
	position: absolute;
	left: 1.4rem; bottom: 1.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.scroll-cue {
	position: absolute;
	bottom: 2rem; left: 50%;
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center;
	gap: 0.6rem;
	color: var(--text-faint);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.scroll-cue .line {
	width: 1px; height: 34px;
	background: linear-gradient(var(--brass-light), transparent);
}

/* ---------- Stat band ---------- */
#stat-band {
	padding: 3rem 0;
	padding-bottom: calc(3rem + var(--footer-h));
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	/* Was a solid var(--bg-alt) fill — fine as a short band in the old
	   vertical layout, but now this section is a full 100vh slide like
	   every other, so a solid colour here blanks out the cover photo
	   entirely for this one slide. Dropped so it matches every other
	   slide's transparent look; the top/bottom hairlines still mark it
	   out as a distinct "band". */
}
.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}
.stat-row b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--brass-light);
}
.stat-row span {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* ---------- About ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 4rem;
	align-items: center;
}
.about-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--border);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media .tag {
	position: absolute; top: 1rem; left: 1rem;
	background: rgba(12,12,11,0.7);
	border: 1px solid var(--border-strong);
	padding: 0.4em 0.8em;
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass-light);
}

.about-copy p { color: var(--text-dim); margin-bottom: 1.3em; }
.about-copy .pull {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--text);
	border-left: 2px solid var(--brass);
	padding-left: 1.2rem;
	margin: 1.8rem 0;
}

/* ---------- Network media (floats right, lede text wraps left of it) ---------- */
.network-media {
	float: right;
	width: min(44%, 460px);
	margin: 0.3rem 0 1.4rem 2.4rem;
}
.network-media img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.9;
}

/* ---------- Cards ---------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.3rem;
	margin-top: 2rem;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 1.6rem 1.5rem;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.card .icon {
	width: 42px; height: 42px;
	margin-bottom: 1.2rem;
	color: var(--brass-light);
}
.card h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.card p { color: var(--text-dim); font-size: 0.94rem; margin: 0 0 0.8em 0; }
.card ul { margin: 0.8em 0 0 0; padding-left: 1.1em; color: var(--text-dim); font-size: 0.9rem; }
.card li { margin-bottom: 0.4em; }

/* Consulting's 4 cards always stay in a single row, at any width — they
   shrink together rather than wrapping into a 2x2 grid. Responsive sizing
   for narrower screens lives in the breakpoints below. */
#consulting .wrap {
	/* The forced 4-in-a-row grid runs card edges close to the fixed prev/next
	   arrows on narrower viewports; a bit of extra side padding here keeps
	   card headings clear of the arrow circles. */
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}
#consulting .card-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* ---------- Timeline ----------
   A compact 2-column grid rather than one long vertical list — the same
   five roles in roughly half the vertical space, so Leadership fits much
   closer to a single slide instead of requiring heavy internal scrolling. */
.timeline-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.3rem 2rem;
	margin: 1.8rem 0 0 0;
}
.timeline-item {
	border-left: 2px solid var(--brass-light);
	padding: 0.1rem 0 0.1rem 1.1rem;
}
.timeline-item-wide { grid-column: 1 / -1; }
.timeline-item .dates {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass-light);
	margin-bottom: 0.3em;
}
.timeline-item .role {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--text);
	margin-bottom: 0.35em;
}
.timeline-item p { color: var(--text-dim); font-size: 0.88rem; max-width: 64ch; margin: 0; }

/* ---------- Gallery ---------- */
.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.8rem;
	margin-top: 1.6rem;
}
.gallery figure {
	margin: 0;
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	border: 1px solid var(--border);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0.8rem 0.9rem;
	background: linear-gradient(0deg, rgba(12,12,11,0.9), transparent);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dim);
}

/* ---------- Press ---------- */
.press-list {
	margin-top: 1.8rem;
	border-top: 1px solid var(--border);
}
.press-item {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--border);
}
.press-item .date { color: var(--text-faint); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.press-item h4 { margin: 0 0 0.3em 0; font-size: 1.05rem; }
.press-item p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.press-item a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* ---------- CV callout ---------- */
.cv-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.2rem;
	flex-wrap: wrap;
	padding: 0.2rem 0.4rem;
	margin-top: 0.3rem;
}
.cv-callout p { margin: 0; color: var(--text-dim); max-width: 40ch; }

/* ---------- Contact ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
}
.field { margin-bottom: 1.3rem; }
.field label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 0.5em;
}
.field input, .field select, .field textarea {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 0.85em 1em;
	font-family: var(--font-body);
	font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--brass);
}
.field.full { grid-column: 1 / -1; }
.contact-form .fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }

.contact-info .item {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.6rem;
}
.contact-info .item .icon {
	width: 20px; height: 20px;
	color: var(--brass-light);
	flex-shrink: 0;
}
.contact-info h4 { margin: 0 0 0.2em 0; font-size: 0.95rem; }
.contact-info p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

#form-status { margin-top: 1rem; font-size: 0.88rem; }

/* ---------- Footer ----------
   Fixed at the very bottom on every slide — the mirror of #site-nav being
   fixed at the top. --footer-h is its reserved height, used below so every
   slide's own bottom padding (and the dot-nav's position) clears it. */
#site-footer {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 500;
	height: var(--footer-h);
	display: flex;
	align-items: center;
	border-top: 1px solid var(--border);
	background-color: rgba(0,0,0,0.92);
	backdrop-filter: blur(10px);
}
.footer-grid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}
.footer-social {
	display: flex;
	gap: 0.8rem;
	list-style: none;
	margin: 0; padding: 0;
}
.footer-social a {
	width: 30px; height: 30px;
	border: 1px solid var(--border);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--text-dim);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a svg { width: 13px; height: 13px; }
.footer-social a:hover { border-color: var(--brass); color: var(--brass-light); }
.footer-copy { color: var(--text-faint); font-size: 0.76rem; }

/* ---------- Reveal animation ----------
   Content is visible by default (opacity:1). Only when JS confirms it
   can run (html.js class) and IntersectionObserver is supported do we
   hide-then-reveal. This guarantees content is never permanently hidden
   if JS fails, is slow, or is disabled. */
.reveal {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js-reveal .reveal {
	opacity: 0;
	transform: translateY(20px);
}
html.js-reveal .reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.gallery img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
	.hero-portrait { order: -1; max-width: 340px; margin: 0 auto 1rem; }
	/* Below this width the wrapped lede gets too narrow a column to read
	   comfortably next to the graphic, so stack it full-width instead. */
	.network-media { float: none; width: 100%; max-width: 460px; margin: 0 auto 1.4rem; }
	.stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.press-item { grid-template-columns: 1fr; gap: 0.4rem; }
	.timeline-grid { grid-template-columns: 1fr; }
	.timeline-item-wide { grid-column: auto; }
	/* Consulting's 4 cards stay in one row and shrink instead of wrapping. */
	#consulting .card-grid { gap: 0.9rem; }
	#consulting .card { padding: 1.1rem 0.9rem; }
	#consulting .card .icon { width: 32px; height: 32px; margin-bottom: 0.9rem; }
	#consulting .card h3 { font-size: 0.95rem; }
	#consulting .card p { font-size: 0.8rem; }
	#consulting .card ul { font-size: 0.78rem; }
}

@media (max-width: 760px) {
	.nav-links, .nav-cta { display: none; }
	.nav-toggle { display: block; }
	#site-nav.open .nav-links {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: 78%;
		max-width: 320px;
		background: var(--bg-alt);
		border-left: 1px solid var(--border);
		padding: 6rem 2rem 2rem;
		gap: 1.6rem;
		z-index: 400;
	}
	#site-nav.open .nav-cta { display: inline-flex; margin-top: 1rem; }
	.contact-form .fields-2 { grid-template-columns: 1fr; }
	.cv-callout { flex-direction: column; align-items: flex-start; }
	.slide-arrow { display: none; }
	/* Keep the fixed footer bar thin on small screens — icons only. */
	:root { --footer-h: 3.5rem; }
	.footer-grid { justify-content: center; }
	.footer-copy { display: none; }
	/* Consulting's 4 cards keep shrinking rather than wrap at phone widths. */
	#consulting .card-grid { gap: 0.5rem; }
	#consulting .card { padding: 0.75rem 0.6rem; }
	#consulting .card .icon { width: 24px; height: 24px; margin-bottom: 0.6rem; }
	#consulting .card h3 { font-size: 0.75rem; margin-bottom: 0.4em; line-height: 1.25; }
	#consulting .card p { font-size: 0.62rem; margin-bottom: 0.5em; }
	#consulting .card ul { font-size: 0.58rem; padding-left: 0.9em; }
	#consulting .card li { margin-bottom: 0.25em; }
}

@media (max-width: 560px) {
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.hero-stats { gap: 1.4rem; }
	/* One more step down for the smallest phones. */
	#consulting .card-grid { gap: 0.35rem; }
	#consulting .card { padding: 0.55rem 0.4rem; }
	#consulting .card .icon { width: 18px; height: 18px; margin-bottom: 0.4rem; }
	#consulting .card h3 { font-size: 0.62rem; margin-bottom: 0.3em; }
	#consulting .card p { font-size: 0.5rem; margin-bottom: 0.35em; }
	#consulting .card ul { font-size: 0.48rem; padding-left: 0.8em; }
}

/* ---------- Short-viewport scaling (laptops, not phones) ----------
   Every slide is a fixed 100vh, so on a shorter *but not narrow* screen —
   a 1024x768 laptop, an un-maximised browser window — the limiting factor
   is vertical space, not width. The width breakpoints above don't fire at
   these sizes (there's plenty of width), so without this, content just
   scrolls internally more than it needs to. These tiers shrink vertical
   rhythm — padding, headings, card/timeline/gallery spacing — so more
   content fits the actual viewport, on top of (not instead of) the
   internal-scroll fallback that already guarantees nothing is ever
   permanently out of reach. */
@media (max-height: 820px) {
	section {
		padding: clamp(2.75rem, 4vh, 4rem) 0;
		padding-bottom: calc(clamp(2.75rem, 4vh, 4rem) + var(--footer-h));
	}
	#hero { padding-top: 5.5rem; padding-bottom: calc(2.75rem + var(--footer-h)); }
	#stat-band { padding: 2rem 0; padding-bottom: calc(2rem + var(--footer-h)); }
	.hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 0.35em; }
	.hero-sub { font-size: 1rem; margin-bottom: 1.4rem; }
	.hero-actions { margin-bottom: 1.4rem; }
	.section-heading { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
	.section-lede { font-size: 0.98rem; }
	.about-grid { gap: 2.5rem; }
	.about-media { aspect-ratio: 16 / 11; }
	.card-grid { gap: 1rem; margin-top: 1.4rem; }
	.card { padding: 1.2rem 1.1rem; }
	.card .icon { width: 32px; height: 32px; margin-bottom: 0.8rem; }
	.card h3 { font-size: 1rem; }
	.card p, .card ul { font-size: 0.85rem; }
	.timeline-grid { gap: 0.6rem 1.5rem; margin-top: 0.9rem; }
	.timeline-item { padding: 0 0 0 0.9rem; }
	.timeline-item .dates { font-size: 0.65rem; margin-bottom: 0.2em; }
	.timeline-item .role { font-size: 0.94rem; margin-bottom: 0.2em; }
	.timeline-item p { font-size: 0.78rem; line-height: 1.4; }
	#leadership .section-lede { margin-bottom: 0; }
	#leadership .cv-callout { padding: 1rem 1.4rem; margin-top: 1rem; }
	.gallery { margin-top: 1.1rem; gap: 0.6rem; }
	.gallery figure { aspect-ratio: 16 / 9; }
	.gallery figcaption { padding: 0.45rem 0.6rem; font-size: 0.58rem; }
	.press-list { margin-top: 1.2rem; }
	.press-item { padding: 0.75rem 0; }
	.cv-callout { padding: 1.4rem 1.6rem; margin-top: 1.6rem; }
	#credentials h3, #network h3 { font-size: 1rem; margin-top: 1.6rem !important; margin-bottom: 0.6rem; }
	#credentials .card p { font-size: 0.8rem; line-height: 1.45; }
	.timeline-grid { row-gap: 0.6rem; }
	.timeline-item { padding-left: 1rem; }
}

/* A further step down for genuinely small windows (netbook-class heights,
   or a browser window someone's left far from maximised). */
@media (max-height: 660px) {
	section {
		padding: clamp(2rem, 3.5vh, 3rem) 0;
		padding-bottom: calc(clamp(2rem, 3.5vh, 3rem) + var(--footer-h));
	}
	#hero { padding-top: 4.5rem; padding-bottom: calc(2rem + var(--footer-h)); }
	.hero-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
	.hero-sub { font-size: 0.92rem; margin-bottom: 1.1rem; max-width: 52ch; }
	.hero-actions { margin-bottom: 1.1rem; }
	.section-heading { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
	.section-lede { font-size: 0.9rem; }
	.eyebrow { margin-bottom: 0.6em; }
	.about-media { aspect-ratio: 16 / 9; }
	.about-grid { gap: 1.8rem; }
	.card-grid { gap: 0.7rem; margin-top: 1rem; }
	.card { padding: 0.9rem 0.85rem; }
	.card .icon { width: 26px; height: 26px; margin-bottom: 0.6rem; }
	.card h3 { font-size: 0.9rem; }
	.card p, .card ul { font-size: 0.78rem; }
	.timeline-grid { gap: 0.8rem 1.3rem; margin-top: 1rem; row-gap: 0.5rem; }
	.timeline-item p { font-size: 0.8rem; }
	.timeline-item { padding-left: 0.9rem; }
	.gallery { margin-top: 0.8rem; gap: 0.4rem; }
	.gallery figure { aspect-ratio: 21 / 9; }
	.gallery figcaption { padding: 0.35rem 0.5rem; font-size: 0.55rem; }
	.press-list { margin-top: 1rem; }
	.press-item { padding: 0.55rem 0; }
	.cv-callout { padding: 1.1rem 1.3rem; margin-top: 1.2rem; }
	#credentials h3, #network h3 { font-size: 0.92rem; margin-top: 1.2rem !important; margin-bottom: 0.5rem; }
	#credentials .card p { font-size: 0.76rem; line-height: 1.4; }
	#credentials .card { padding: 0.85rem 0.8rem; }
}