/* =========================================================
   Devraturi — Design System & Layout
   Mobile-first. BEM-ish naming. CSS custom properties.
   Cinematic dark theme: near-black base, gold accent, wide
   letter-spacing micro-labels, hairline dividers.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
	/* Color */
	--color-bg: #050505;
	--color-surface: #0a0908;
	--color-surface-2: #121110;
	--color-border: rgba(255, 255, 255, 0.06);
	--color-border-strong: rgba(255, 255, 255, 0.12);

	--color-text: #f2efe9;
	--color-text-muted: #a8a29b;
	--color-text-dim: #857e73;

	--color-gold: #d4af37;
	--color-gold-light: #e8cb73;
	--color-gold-rgb: 212, 175, 55;

	--color-success: #6fae7e;
	--color-error: #c96a5e;

	/* Type */
	--font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
	--font-accent: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 5rem;
	--space-16: 7rem;

	--container-max: 1240px;
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--tracking-label: 0.32em;
	--tracking-wide: 0.5em;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-size: 93.75%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
textarea {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}

p {
	margin: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: var(--space-4);
	z-index: 9999;
	background: var(--color-gold);
	color: #0d0a03;
	padding: var(--space-2) var(--space-4);
	transition: top 200ms var(--ease);
}

.skip-link:focus {
	top: var(--space-4);
	width: auto;
	height: auto;
	clip: auto;
}

:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

/* ---------- 3. Preloader ---------- */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	background: var(--color-bg);
	transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}

.preloader__mark {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text);
}

.preloader__line {
	display: block;
	width: 140px;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transition: transform 900ms var(--ease) 200ms;
}

.preloader.is-ready .preloader__line {
	transform: scaleX(1);
}

.preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- 4. Layout helpers ---------- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	/* Fixed 15px mobile gutter (not the --space-4 token) — every homepage
	   section, title, subtitle, and card block shares this wrapper, so
	   this single value keeps the left/right gap consistent site-wide
	   on phones. */
	padding-inline: 15px;
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-6);
	}
}

.section {
	padding-block: clamp(3.5rem, 7vw, 7rem);
	border-bottom: 1px solid var(--color-border);
}

.section:nth-of-type(even) {
	background: var(--color-surface);
	position: relative;
}

.section:nth-of-type(even)::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--color-gold-rgb), 0.35), transparent);
}

.section-heading {
	max-width: var(--container-max);
	margin-bottom: var(--space-10);
}

.section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.section-heading--center .eyebrow {
	margin-inline: auto;
}

.section-heading--center .section-intro {
	margin-inline: auto;
	text-align: left;
}

.section-heading--left {
	text-align: left;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: var(--space-4);
}

/* --tracking-wide (0.5em) is wide enough that long, admin-entered eyebrow
   copy (e.g. multi-word taglines separated by middots) wraps to several
   lines before the real heading even starts on narrow phones. Tighten it
   there — same three eyebrow styles across hero/homepage/about. */
@media (max-width: 480px) {
	.eyebrow,
	.hero__eyebrow,
	.about-hero__eyebrow {
		letter-spacing: 0.15em;
	}
}

.section-title {
	font-size: 3rem;
	line-height: 1.1;
	color: var(--color-text);
}

.section-title em {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--color-gold);
}

.section-intro {
	margin-top: var(--space-5);
	color: var(--color-text-muted);
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	max-width: none;
}

.section-intro--quote {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	line-height: 1.6;
	max-width: 46ch;
}

/* Mobile (0–767px): section titles/subtitles are a flat 3rem with no
   responsive scaling in the base rules above, which is too large on
   phones — clamp them down here. .section-title's own base rule is
   above this block (line ~292) so this override safely wins here; every
   OTHER "big heading" class sitewide that follows this same pattern has
   its base rule defined much later in this file, so those live in a
   second, guaranteed-last copy of this same rule near the end of this
   file (search "big headings — mobile, guaranteed-last") instead —
   see [[main-css-source-order]] for why. */
@media (max-width: 767px) {
	.section-title {
		font-size: 1.6rem;
	}

	.section-intro:not(.section-intro--quote) {
		font-size: 13px;
	}
}

/* ---------- 5. Reveal-on-scroll & load-in ---------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 800ms var(--ease), transform 800ms var(--ease);
	transition-delay: var(--d, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.load-in {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

body.is-loaded .load-in {
	opacity: 1;
	transform: translateY(0);
}

body.is-loaded .hero__eyebrow.load-in { transition-delay: 60ms; }
body.is-loaded .hero__subtitle.load-in { transition-delay: 420ms; }
body.is-loaded .hero__actions.load-in { transition-delay: 560ms; }
body.is-loaded .hero__scroll.load-in { transition-delay: 680ms; }

/* ---------- 6. Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 1.05em 1.85em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
	white-space: nowrap;
}

/* .btn's padding computes to ~43px tall at this font-size — just under
   the 44px minimum comfortable touch target. Bump it slightly on
   touch-sized screens only (desktop hover-driven clicks don't need it). */
@media (max-width: 1023px) {
	.btn:not(.btn--text) {
		min-height: 44px;
	}
}

.btn--primary {
	background: var(--color-gold);
	color: #0d0a03;
}

.btn--primary:hover {
	background: var(--color-text);
}

.btn--ghost {
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.btn--ghost:hover {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.btn--outline {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.btn--outline:hover {
	background: var(--color-gold);
	color: #0d0a03;
}

.btn--text {
	padding: 0.4em 0;
	color: var(--color-text-muted);
	border: none;
	border-bottom: 1px solid transparent;
}

.btn--text:hover {
	color: var(--color-text);
	border-bottom-color: var(--color-gold);
}

.btn--small {
	padding: 0.65em 1.4em;
}

/* ---------- 7. Media placeholder ---------- */
.media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.1), rgba(0, 0, 0, 0.2)),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 12px);
	border: 1px dashed var(--color-border-strong);
	color: var(--color-text-dim);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-align: center;
	padding: var(--space-4);
}

.media-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A YouTube background video (hero banners — see
   devraturi_render_hero_banner() in inc/helpers.php) has no object-fit
   equivalent, so the iframe is oversized to a fixed 16:9 ratio relative to
   both viewport dimensions and centered — whichever dimension is the
   constraint, the video always fully covers its box, matching how
   object-fit: cover behaves on the <video>/<img> alternatives. */
.hero-youtube-bg {
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

.hero-youtube-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	border: 0;
	transform: translate(-50%, -50%);
}

/* ---------- 8. Header ---------- */
/* Original homepage behaviour, restored and applied to every page:
   transparent with a soft gradient scrim at the top, becoming a solid
   blurred bar once scrolled past 20px (see toggleScrolled in main.js). */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 90;
	background: transparent;
	transition: border-color 300ms var(--ease);
	border-bottom: 1px solid transparent;
}

.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	bottom: -48px;
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.8) 0%, rgba(5, 5, 5, 0.4) 60%, transparent 100%);
	opacity: 1;
	transition: opacity 300ms var(--ease);
	pointer-events: none;
	z-index: -1;
}

/* The scrolled-state solid background lives on ::after (not the
   .site-header element itself) — backdrop-filter directly on the header
   would establish a new containing block, breaking the mobile nav
   panel's `position: fixed; inset: 0` (it would anchor to the header's
   own box instead of the viewport). */
.site-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 5, 0.92);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 300ms var(--ease);
	pointer-events: none;
	z-index: -1;
}

.site-header.is-scrolled {
	border-color: var(--color-border);
}

.site-header.is-scrolled::before {
	opacity: 0;
}

.site-header.is-scrolled::after {
	opacity: 1;
}

/* While the mobile nav overlay is open, match its solid background so
   there's no visible seam between the header bar and the opaque menu
   panel sitting right below it, whether or not the page is scrolled. */
.site-header:has(.primary-navigation.is-open)::before {
	opacity: 0;
}

.site-header:has(.primary-navigation.is-open)::after {
	opacity: 1;
	background: var(--color-bg);
	backdrop-filter: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-block: var(--space-5);
}

@media (max-width: 767px) {
	.site-header__inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	/* Flex items shrink by default, and a replaced element (the logo
	   <img>) has no text-based min-content floor to stop it — once the
	   nav + CTA's combined width exceeds the header row at ~1240px+
	   containers, the flexbox algorithm squeezes the logo down to a
	   sliver (height held by its HTML attribute, width crushed) instead
	   of touching the nowrap nav labels or CTA button. The logo should
	   never be the flex-sacrifice; it stays fixed at its intrinsic size. */
	flex-shrink: 0;
}

.site-logo__name {
	font-family: var(--font-heading);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-text);
}

.primary-navigation {
	margin-left: auto;
}

.nav-menu {
	display: none;
	align-items: center;
	gap: var(--space-5);
}

.nav-menu .menu-item a {
	position: relative;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	transition: color 200ms var(--ease);
	padding-bottom: 4px;
	white-space: nowrap;
}

/* At the narrow end of desktop (nav switches to this horizontal layout
   at 1024px), --tracking-label's wide 0.32em letter-spacing plus the
   full item gap doesn't leave room for all menu items on one line —
   they wrap mid-label instead. Tighten spacing/gap/size just for this
   range; screens wide enough for --container-max (1240px) plus margin
   get the roomier default back. */
@media (min-width: 1024px) and (max-width: 1365px) {
	.nav-menu {
		gap: var(--space-4);
	}

	.nav-menu .menu-item a {
		font-size: 0.625rem;
		letter-spacing: 0.12em;
	}
}

.nav-menu .menu-item a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--ease);
}

.nav-menu .menu-item a:hover {
	color: var(--color-text);
}

.nav-menu .menu-item a:hover::after {
	transform: scaleX(1);
}

.header-cta {
	display: none;
}

.nav-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 44px;
	min-height: 44px;
	margin-left: auto;
}

.nav-toggle__bar {
	width: 22px;
	height: 1px;
	background: var(--color-text);
}

.nav-toggle__close {
	display: none;
	width: 22px;
	height: 22px;
	color: var(--color-text);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

@media (max-width: 1023px) {
	/* `position: fixed` (not `absolute` off the fixed header) so this
	   panel's box always matches the real, current viewport exactly —
	   `top: 100%` + `height: 100vh` (the previous approach) stacked a
	   full extra viewport height UNDER the header instead of filling
	   just the remaining space, so the panel's own box ran taller than
	   the screen. Since nothing then overflowed that oversized box,
	   `overflow-y: auto` never actually had anything to scroll, and menu
	   items past the true viewport bottom (a real risk now the menu has
	   grown to seven items) were simply unreachable. `padding-top` on
	   the inner .nav-menu (not this element) clears the header instead —
	   doesn't need to track the header's exact height to the pixel, just
	   enough breathing room. */
	.primary-navigation {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: var(--color-bg);
		transform: translateX(100%);
		transition: transform 350ms var(--ease);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* This panel covering the full viewport (inset: 0, including the
	   header row itself) is what fixed the scroll bug above — but a
	   full-screen fixed panel with no z-index otherwise paints over
	   static in-flow siblings like the logo and toggle button, hiding
	   them. Lift both onto their own stacking layer above the panel so
	   they stay visible/clickable the whole time the menu is open (the
	   toggle button doubles as the close button — see its bars→cross
	   icon swap above). */
	.site-logo,
	.nav-toggle {
		position: relative;
		z-index: 2;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	/* Opaque bar at the top of the panel so menu items scrolling upward
	   disappear behind it instead of sliding across the logo and the
	   close (X) button — those sit on their own z-index:2 layer above the
	   panel, but only the glyphs are opaque, leaving that top band
	   otherwise unmasked. `position: sticky` (not fixed — a fixed child of
	   this `overflow-y: auto` panel scrolls away with the content in most
	   browsers) keeps it pinned to the scrollport top. The negative
	   margin-bottom cancels its own height from the flow, so it overlaps
	   the empty zone .nav-menu's padding-top already reserves rather than
	   stacking on top of it; z-index:1 keeps it above the scrolling
	   items, and it still rides below the logo/X (panel is z-index:1, they
	   are z-index:2). */
	.primary-navigation::before {
		content: '';
		position: sticky;
		top: 0;
		z-index: 1;
		display: block;
		height: calc(var(--space-6) + 4.5rem);
		margin-bottom: calc((var(--space-6) + 4.5rem) * -1);
		background: var(--color-bg);
		pointer-events: none;
	}

	.primary-navigation .nav-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--space-6);
		padding-top: calc(var(--space-6) + 4.5rem);
	}

	.primary-navigation .menu-item {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.primary-navigation .menu-item a {
		display: block;
		padding: var(--space-4) 0;
		font-size: 0.75rem;
	}

	/* Show the Connect / Contact button inside the open mobile panel,
	   just below the menu list (it's hidden by the base .header-cta
	   { display: none } otherwise). Fixed 120px width, horizontally
	   centred in the panel, flush against the last menu item above. */
	.primary-navigation .header-cta {
		display: flex;
		width: 120px;
		margin: 0 auto var(--space-6);
	}
}

@media (min-width: 1024px) {
	/* .header-cta now lives inside <nav.primary-navigation> (so it also
	   shows in the mobile panel) — lay the nav out as a flex row here so
	   the menu list and the CTA button sit inline, as they did when the
	   button was a separate header child. */
	.primary-navigation {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}

	.nav-menu {
		display: flex;
	}

	.header-cta {
		display: inline-flex;
	}

	.nav-toggle {
		display: none;
	}
}

/* ---------- 9. Hero ---------- */

/* Hero content box — shared by every hero variant across the site
   (homepage .hero__content, .about-hero__content, .film-hero__content,
   .gallery-hero__content) so the light, frosted-glass treatment behind
   the hero text reads identically everywhere. Defines its own --box-*
   custom properties (kept separate from the global --color-text/
   --color-gold/etc. tokens, which other components still rely on meaning
   "light text for a dark background" — e.g. .btn--primary's hover fill) —
   text/accent colors inside the box are switched to these explicitly
   rather than by redefining the global tokens. */
.hero__content,
.about-hero__content,
.film-hero__content,
.gallery-hero__content {
	--box-text: #000000;
	--box-text-muted: #000000;
	--box-gold: #000000;
	--box-gold-light: #000000;
	--box-gold-rgb: 0, 0, 0;
	--box-border-strong: rgba(20, 15, 5, 0.18);
	--box-divider: rgba(150, 117, 31, 0.35);
	background: rgba(245, 242, 233, 0.14);
	backdrop-filter: blur(8px) saturate(120%) brightness(1.3);
	-webkit-backdrop-filter: blur(8px) saturate(120%) brightness(1.3);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0.75rem;
	box-shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.4);
}

/* Blog hero — the --box-* text/accent tokens stay defined at all times
   (so eyebrow/headline/quote colors are consistent regardless of
   alignment), but the frosted-glass background/border/shadow only
   applies when Content Alignment is Left or Right. Center (the default)
   keeps the plain, un-boxed "personal journal" look. */
.blog-hero__inner {
	--box-text: #000000;
	--box-text-muted: #000000;
	--box-gold: #000000;
	--box-gold-light: #000000;
	--box-gold-rgb: 0, 0, 0;
	--box-border-strong: rgba(20, 15, 5, 0.18);
	--box-divider: rgba(150, 117, 31, 0.35);
}

.blog-hero__inner.blog-hero__inner--align-left,
.blog-hero__inner.blog-hero__inner--align-right {
	background: rgba(245, 242, 233, 0.14);
	backdrop-filter: blur(8px) saturate(120%) brightness(1.3);
	-webkit-backdrop-filter: blur(8px) saturate(120%) brightness(1.3);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0.75rem;
	box-shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.4);
}

/* Hero Slider — Film & Television page's alternative to the standard
   hero (see template-parts/film-television-page/hero-slider.php),
   toggled via the "Hero Type" field. Full-bleed, auto-advancing,
   clickable slides — no text overlay, the images are the content. */
.hero-slider {
	position: relative;
	height: 100svh;
	overflow: hidden;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	transition: height 400ms var(--ease);
}

.hero-slider__track {
	display: flex;
	height: 100%;
	transition: transform 700ms var(--ease);
	/* Let vertical page scroll pass through untouched — only a clear
	   horizontal drag is captured (see the touchstart/touchmove/touchend
	   handling in assets/js/main.js) to change slides. */
	touch-action: pan-y;
}

.hero-slider__slide {
	position: relative;
	flex: 0 0 100%;
	display: block;
	height: 100%;
	background: var(--color-surface);
}

.hero-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(5, 5, 5, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--color-text);
	transform: translateY(-50%);
	transition: background 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}

.hero-slider__arrow svg {
	width: 18px;
	height: 18px;
	transition: transform 300ms var(--ease);
}

.hero-slider__arrow:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
	transform: translateY(-50%) scale(1.08);
}

.hero-slider__arrow--prev {
	left: var(--space-5);
}

.hero-slider__arrow--prev:hover svg {
	transform: translateX(-2px);
}

.hero-slider__arrow--next {
	right: var(--space-5);
}

.hero-slider__arrow--next:hover svg {
	transform: translateX(2px);
}

.hero-slider__dots {
	position: absolute;
	bottom: var(--space-6);
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0.6rem var(--space-4);
	border-radius: 999px;
	background: rgba(5, 5, 5, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateX(-50%);
}

.hero-slider__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	transition: background 350ms var(--ease), width 350ms var(--ease), box-shadow 350ms var(--ease);
}

.hero-slider__dot:hover {
	background: rgba(255, 255, 255, 0.75);
}

.hero-slider__dot.is-active {
	width: 22px;
	background: var(--color-gold);
	box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.6);
}

@media (max-width: 640px) {
	.hero-slider__arrow {
		width: 40px;
		height: 40px;
	}

	.hero-slider__arrow svg {
		width: 15px;
		height: 15px;
	}

	.hero-slider__arrow--prev {
		left: var(--space-3);
	}

	.hero-slider__arrow--next {
		right: var(--space-3);
	}

	.hero-slider__dots {
		bottom: var(--space-4);
		gap: var(--space-2);
		padding: 0.5rem var(--space-3);
	}

	.hero-slider__dot {
		width: 6px;
		height: 6px;
	}

	.hero-slider__dot.is-active {
		width: 18px;
	}
}

@media (max-width: 1024px) {
	/* Pure CSS, no JS — the most reliable way to guarantee zero cropping
	   on every phone/tablet/tool: let the box height follow the image's
	   own natural ratio (width: 100%, height: auto) instead of forcing
	   it into a fixed-height box at all. Placed after every base
	   hero-slider rule above so it actually wins the cascade at this
	   width (equal specificity — source order decides). Threshold is
	   deliberately generous (not just phone widths) so it also catches
	   tablets and wider dev-tools device presets — the desktop full-bleed
	   treatment only kicks in past 1024px, where there's little risk of
	   an unintentionally tall, narrow box. */
	.hero-slider {
		height: auto;
		/* The site header is position:fixed and normally floats over a
		   hero's full-bleed image (desktop keeps that cinematic look) —
		   but at this height:auto, image-sized box, the header would sit
		   on top of the image itself rather than a tall scrim-covered
		   backdrop. Push the slider down below the header here instead.
		   133px is the header's actual measured rendered height at this
		   width (logo + hamburger row), not the ~72px desktop-nav figure
		   used elsewhere in the codebase — measure before reusing that
		   value anywhere else mobile-specific. */
		margin-top: 133px;
	}

	.hero-slider__track {
		height: auto;
	}

	.hero-slider__slide {
		height: auto;
	}

	.hero-slider__image {
		height: auto;
		object-fit: contain;
	}
}

@media (max-width: 767px) {
	/* Phone header is shorter than the tablet logo+hamburger row above —
	   sit the slider 105px down instead of 133px. */
	.hero-slider {
		margin-top: 105px;
	}
}

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media .media-placeholder,
.hero__media .media-image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border: 0;
	object-fit: cover;
	object-position: center;
}

.hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 5, 0.15);
	pointer-events: none;
	z-index: 1;
}

.hero__scrim {
	position: absolute;
	inset: 0;
}

.hero__scrim--bottom {
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.45) 0%, rgba(5, 5, 5, 0.55) 45%, var(--color-bg) 100%);
}

.hero__scrim--top {
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.35) 0%, transparent 40%);
}

.hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.hero__particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero__particle {
	position: absolute;
	bottom: 0;
	border-radius: 50%;
	background: var(--color-gold);
	box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.8);
	animation: devraturi-float-up linear infinite;
	opacity: 0;
}

@keyframes devraturi-float-up {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 0.7; }
	90% { opacity: 0.4; }
	100% { transform: translateY(-100vh); opacity: 0; }
}

.hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	max-width: 1280px;
	margin-inline: auto;
	/* Fluid placement + padding — one clamp per property replaces the old
	   split mobile / tablet / desktop rules, so the card scales smoothly
	   through the 768–1023px tablet range that previously had no breakpoint
	   of its own. Top clear-zone 6.5rem→10rem (must always clear the fixed
	   header), bottom gap 1.5rem→3rem, inner padding ~1.125rem→2.25rem. */
	margin-top: clamp(6.5rem, 3.1rem + 9vw, 10rem);
	margin-bottom: clamp(1.5rem, 0.9rem + 2vw, 3rem);
	padding: clamp(1.125rem, 0.6rem + 2.2vw, 2.25rem);
}

@media (min-width: 1024px) {
	/* Content Alignment (dashboard-configurable): the text column takes
	   half the hero's width and sits against the left or right edge —
	   only at desktop widths, where there's room for a two-sided layout;
	   phones/tablets keep the full-width single column above. */
	.hero__content.hero__content--align-left,
	.hero__content.hero__content--align-right {
		max-width: 45%;
	}

	.hero__content.hero__content--align-left {
		margin-inline: clamp(1.5rem, 4vw, 3.5rem) auto;
	}

	.hero__content.hero__content--align-right {
		margin-inline: auto clamp(1.5rem, 4vw, 3.5rem);
	}
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: clamp(0.625rem, 2vw, 1rem);
	/* ~10.5px on the narrowest phones up to 12px on desktop — a small
	   legibility lift over the flat 10px the old mobile rule forced. */
	font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.75rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--box-gold);
	margin: 0 0 clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
}

.hero__eyebrow-line {
	width: 48px;
	height: 1px;
	background: var(--box-gold);
}

.hero__title-wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.hero__title-wrap {
		max-width: 56rem;
	}
}

.hero__title-line {
	grid-area: 1 / 1;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 500;
	/* Fluid display size: ~1.6rem on the narrowest phones up to 3rem from
	   ~1090px on. Smooths the old hard jump from 1.6rem (≤767px) straight
	   to a flat 3rem, which dropped an oversized 48px headline into the
	   full-width card across the whole tablet range. */
	font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
	line-height: 1.1;
	color: var(--box-text);
	margin: 0;
	opacity: 0;
	filter: blur(10px);
	transform: translateY(16px);
	transition: opacity 1200ms var(--ease), filter 1200ms var(--ease), transform 1200ms var(--ease);
	will-change: transform, opacity, filter;
}

.hero__title-line.is-active {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

.hero__subtitle {
	/* Tight step straight off the title — no hairline divider, no
	   padding: ~8px on phones up to ~15px on desktop. */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	max-width: 42rem;
	/* Floor 15px keeps phones comfortable; top end 17px gives a clear
	   lead-paragraph hierarchy under the headline. */
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem);
	line-height: 1.65;
	color: var(--box-text-muted);
}

.hero__subtitle-dot {
	margin: 0 var(--space-2);
	color: var(--box-gold);
}

.hero__subtitle-tagline {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 500;
	font-size: 1em;
	color: var(--box-text-muted);

}

@media (max-width: 767px) {
	/* Full 100svh hero was pushing every other section a full screen's
	   height below the fold on phones — cap it at half the viewport so
	   the background photo and content card both stay compact and the
	   next section is visible right away. min-height (not height) lets
	   the box grow past 50svh if the content card genuinely needs more
	   room, rather than clipping it. */
	.hero {
		min-height: 50svh;
	}

	/* Placement, padding and text sizes for this range now come from the
	   fluid clamp()s in the base .hero__content / .hero__eyebrow /
	   .hero__title-line / .hero__subtitle / .hero__actions rules — the
	   clamp floors already land on the tight phone rhythm this block used
	   to set by hand (and its margin-top floor still clears the fixed
	   .site-header, ~72–88px here). Only the look-swap below is mobile-only. */

	/* Homepage hero only (not .about-hero__content/.film-hero__content/
	   .gallery-hero__content, which keep the frosted-glass card on every
	   screen size) — on mobile, swap the light frosted-glass card for a
	   dark overlay card instead, reusing the sitewide dark-theme tokens
	   (light text on a dark surface) rather than the --box-* tokens the
	   glass treatment needs (dark text on a light blur). Desktop/tablet
	   keep the glass card untouched. The same treatment for every other
	   page's hero lives in its own block near the end of this file (search
	   "Other page heroes — mobile") since those families' own base rules
	   (background/scrim colour/etc.) are defined later in this file than
	   this block and would otherwise win the cascade tie by source order. */
	.hero__content {
		--box-text: var(--color-text);
		--box-text-muted: var(--color-text-muted);
		--box-gold: var(--color-gold);
		--box-gold-light: var(--color-gold-light);
		--box-gold-rgb: var(--color-gold-rgb);
		--box-border-strong: var(--color-border-strong);
		--box-divider: var(--color-border);
		/* Dark overlay now lives on the card only — the hero image itself
		   keeps just a faint wash (see .hero__media::after below). Bring
		   back a contained, rounded card shape to hold it, inset 14px from
		   each screen edge (width accounts for both margins so it can't
		   overflow the flex row). */
		width: calc(100% - 28px);
		margin-inline: 14px;
		background: rgba(5, 5, 5, 0.58);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		border: none;
		border-radius: 0.6rem;
		box-shadow: none;
		/* Tighten the gap below the CTA buttons on phones — the base
		   clamp floor (1.5rem) left a bit too much air before the next
		   section here. */
		margin-bottom: 0.75rem;
	}

	/* Trim the card copy on phones so the whole hero sits comfortably
	   within one screen. Smaller than the base clamp floors. */
	.hero__eyebrow {
		font-size: 10px;
	}

	.hero__title-line {
		font-size: 22px;
	}

	.hero__subtitle {
		font-size: 13px;
	}

	/* Image keeps only a faint wash on phones — the readable dark layer
	   sits on the card (above), not the whole photo. */
	.hero__media::after {
		background: rgba(5, 5, 5, 0.12);
	}

	/* .btn--ghost's black-fill/white-text look (below) was built for the
	   light glass card — a black button would nearly disappear against
	   the new dark card. Fall back to the sitewide ghost style (outlined,
	   transparent) that already reads correctly on a dark surface. */
	.hero__content .btn--ghost {
		background: transparent;
		color: var(--color-text);
		border-color: var(--color-border-strong);
	}

	.hero__content .btn--ghost:hover {
		background: transparent;
		border-color: var(--color-gold);
		color: var(--color-gold-light);
	}
}

/* Fixed type sizes for tablet + desktop (client-specified): eyebrow 11 /
   title 32 / paragraph 15. Overrides the fluid clamps in the base rules
   above from 768px up; phones (≤767px) keep the base clamp sizes. */
@media (min-width: 768px) {
	.hero__eyebrow {
		font-size: 11px;
	}

	.hero__title-line {
		font-size: 32px;
	}

	.hero__subtitle {
		font-size: 15px;
	}
}

.hero__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--space-3);
	/* Fluid step off the subtitle — 1.25rem on phones up to 2rem on
	   desktop; replaces the old flat 2rem + a mobile `12px !important`. */
	margin-top: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}

.hero__actions .btn {
	flex: 1 1 0;
	min-width: 0;
	white-space: normal;
	text-align: center;
}

.hero__actions .hero__press-link {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.hero__actions {
		flex-direction: column;
		gap: 15px;
	}

	.hero__actions .btn,
	.hero__actions .hero__press-link {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* .btn--ghost/.btn--text default to the global light-on-dark palette
   (see .btn--primary:hover, which relies on --color-text staying the
   site's light token) — inside the hero box they need the dark box
   palette instead, so override explicitly rather than redefining the
   global tokens. */
.hero__content .btn--ghost {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.hero__content .btn--ghost:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.hero__content .btn--text {
	color: var(--box-text-muted);
}

.hero__content .btn--text:hover {
	color: var(--box-text);
	border-bottom-color: var(--box-gold);
}

.hero__press-link {
	display: none;
}

@media (min-width: 900px) {
	.hero__press-link {
		display: inline-flex;
	}
}

.hero__scroll {
	position: absolute;
	bottom: var(--space-6);
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

/* .load-in's own transform (translateY, for the reveal animation) would
   otherwise completely replace the translateX(-50%) centering above —
   a single transform property can't hold both independently, so both
   states need to be combined into one value here. */
.hero__scroll.load-in {
	transform: translateX(-50%) translateY(18px);
}

body.is-loaded .hero__scroll.load-in {
	transform: translateX(-50%) translateY(0);
}

.hero__scroll-label {
	font-size: 0.625rem;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hero__scroll-track {
	display: block;
	width: 1px;
	height: 44px;
	overflow: hidden;
	background: var(--color-border-strong);
}

.hero__scroll-bar {
	display: block;
	width: 1px;
	height: 20px;
	background: var(--color-gold);
	animation: devraturi-scroll-pulse 2.4s var(--ease) infinite;
}

@keyframes devraturi-scroll-pulse {
	0% { transform: translateY(-24px); }
	100% { transform: translateY(44px); }
}

/* ---------- 10. Story (Chapter One) ---------- */
.story__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	margin-bottom: var(--space-12);
}

.story__heading {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 3rem;
	line-height: 1.1;
	color: var(--color-text);
}

.story__heading em {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--color-gold);
}

@media (max-width: 767px) {
	.story__heading {
		font-size: 1.6rem;
	}
}

.story__grid {
	display: grid;
	gap: var(--space-10);
}

.story__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.1);
}

.story__media .media-image,
.story__media .media-placeholder {
	aspect-ratio: 3 / 4;
	height: 100%;
}

.story__media-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--color-bg) 0%, transparent 55%);
}

.story__quote-overlay {
	position: absolute;
	left: var(--space-5);
	right: var(--space-5);
	bottom: var(--space-5);
	margin: 0;
	font-family: var(--font-accent);
	font-style: italic;
	font-size: 0.875rem;
	color: rgba(242, 239, 233, 0.85);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.story__text {
	font-family: var(--font-accent);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.5;
	color: rgba(242, 239, 233, 0.9);
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8) var(--space-6);
	margin-top: var(--space-10);
}

.stat-grid__item {
	border-left: 1px solid var(--color-border-strong);
	padding-left: var(--space-4);
}

.stat-grid__value {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 3rem);
	color: var(--color-gold);
	margin: 0;
}

.stat-grid__label {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
}

@media (min-width: 1024px) {
	.story__grid {
		grid-template-columns: 5fr 7fr;
		gap: 3rem;
		align-items: start;
	}

	.stat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Global Recognition strip ---------- */
.recognition-strip .section-heading {
	max-width: var(--container-max);
	margin-bottom: 0;
}

.recognition-strip .section-heading .section-intro {
	max-width: none;
	margin-top: var(--space-6);
}

.recognition-strip__press,
.recognition-strip__footnote {
	text-align: left;
	margin-inline: auto;
}

.recognition-strip__press {
	margin-top: var(--space-8);
}

.recognition-strip__footnote {
	margin-top: var(--space-8);
	font-size: 0.8125rem;
}

.recognition-strip__stats {
	gap: var(--space-5);
	margin-top: var(--space-10);
}

.recognition-strip__stat {
	position: relative;
	border-left: 0;
	background: var(--color-bg);
	padding: var(--space-8) var(--space-5);
	text-align: center;
	overflow: hidden;
	transition: background 250ms var(--ease);
}

.recognition-strip__stat::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transition: transform 500ms var(--ease);
}

.recognition-strip__stat:hover {
	background: var(--color-surface-2);
}

.recognition-strip__stat:hover::before {
	transform: scaleX(1);
}

.recognition-strip__stat .stat-grid__value,
.recognition-strip__stat .stat-grid__label {
	margin-inline: auto;
}

/* Mobile (0–767px): the recognition stat tiles are boxed/bordered like
   the .hairline-grid cards, so they get the same swipeable-row treatment
   instead of stacking as a cramped 2-column grid. */
@media (max-width: 767px) {
	.recognition-strip__stats {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.recognition-strip__stats::-webkit-scrollbar {
		display: none;
	}

	.recognition-strip__stats > * {
		flex: 0 0 auto;
		width: min(55vw, 220px);
		scroll-snap-align: start;
	}
}

@media (min-width: 768px) {
	.recognition-strip__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.recognition-strip__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.story__milestones {
	margin-top: 8rem;
}

.story__milestones-heading {
	margin-bottom: var(--space-10);
}

.story__milestones-title {
	font-size: clamp(1.875rem, 4vw, 3rem);
}

/* ---------- 11. Timeline, nested inside Chapter One ---------- */
.chapters .section-heading {
	max-width: var(--container-max);
}

.chapters .section-heading .section-intro {
	max-width: none;
}

.timeline {
	position: relative;
}

.timeline__line {
	position: absolute;
	left: 7px;
	top: var(--space-2);
	bottom: var(--space-2);
	width: 1px;
	background: linear-gradient(180deg, rgba(var(--color-gold-rgb), 0.4), var(--color-border) 80%);
}

.timeline__list {
	position: relative;
}

.timeline__item {
	position: relative;
	padding-left: var(--space-8);
	padding-bottom: var(--space-10);
}

.timeline__item:last-child {
	padding-bottom: 0;
}

.timeline__dot {
	position: absolute;
	left: 0;
	top: var(--space-2);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-gold);
	box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.6);
}

.timeline__year {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: var(--space-2);
}

.timeline__title {
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	margin-bottom: var(--space-3);
	padding-right: 3px;
}

.timeline__text {
	max-width: 34ch;
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.timeline__link {
	display: inline-flex;
	margin-top: var(--space-5);
	padding: 0.8em 1.6em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.timeline__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.timeline__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.timeline__link:hover .timeline__link-arrow {
	transform: translateX(4px);
}

@media (min-width: 768px) {
	.timeline__text {
		font-size: 0.9375rem;
	}
}

@media (min-width: 900px) {
	.timeline__line {
		left: 50%;
		transform: translateX(-50%);
	}

	.timeline__item {
		width: 50%;
		padding-left: 0;
	}

	.timeline__item--left {
		padding-left: var(--space-10);
		margin-left: 0;
	}

	.timeline__item--right {
		padding-left: var(--space-10);
		margin-left: 50%;
	}

	.timeline__item--right .timeline__dot {
		left: calc(-7px);
	}
}

/* ---------- 12. Hairline grid (hospitality / honors / network / press) ---------- */
.hairline-grid {
	display: grid;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	margin-top: var(--space-10);
}

@media (min-width: 640px) {
	.hairline-grid--3,
	.hairline-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.hairline-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hairline-grid > :nth-child(1) { transition-delay: 0ms; }
.hairline-grid > :nth-child(2) { transition-delay: 80ms; }
.hairline-grid > :nth-child(3) { transition-delay: 160ms; }
.hairline-grid > :nth-child(4) { transition-delay: 240ms; }
.hairline-grid > :nth-child(5) { transition-delay: 320ms; }
.hairline-grid > :nth-child(6) { transition-delay: 400ms; }
.hairline-grid > :nth-child(n+7) { transition-delay: 460ms; }

/* Mobile (0–767px): card grids (network/bridge/award cards) become a
   swipeable row instead of stacking full-width — same scroll-snap
   treatment as the .cinema__carousel film cards. */
@media (max-width: 767px) {
	.hairline-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* The desktop grid's own background/border only ever show as a
		   1px hairline in the gap — on a scrollable flex row that same
		   fill can flash behind/around cards mid-swipe, so drop it here
		   and let each card's own background (already set per card)
		   carry the color instead. */
		background: transparent;
		border: 0;
	}

	.hairline-grid::-webkit-scrollbar {
		display: none;
	}

	.hairline-grid > * {
		flex: 0 0 auto;
		/* Narrower than a near-full-width card so roughly half of the
		   next one peeks in at the edge — a visible hint there's more
		   to swipe to, instead of the card filling the whole screen. */
		width: min(62vw, 260px);
		scroll-snap-align: start;
		/* Separation now comes from each card's own border instead of the
		   container's hairline-gap background, so it scrolls with the
		   card and can't flash. Same subtle gold tint as the Leadership
		   section's own .network-card__icon border. */
		border: 1px solid rgba(var(--color-gold-rgb), 0.3);
	}
}

.bridge-card {
	position: relative;
	background: var(--color-bg);
	padding: var(--space-6);
}

.section:nth-of-type(even) .bridge-card {
	background: var(--color-surface);
}

.bridge-card__title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	color: var(--color-gold);
	margin-bottom: var(--space-3);
}

.bridge-card__text {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: 0.6875rem;
	line-height: 1.6;
	text-align: left;
}

.restaurant-card,
.award-card,
.network-card,
.press-card {
	position: relative;
	background: var(--color-bg);
	padding: var(--space-8);
	transition: background 250ms var(--ease);
}

.section:nth-of-type(even) .restaurant-card,
.section:nth-of-type(even) .award-card,
.section:nth-of-type(even) .network-card,
.section:nth-of-type(even) .press-card {
	background: var(--color-surface);
}

.restaurant-card:hover,
.award-card:hover,
.network-card:hover,
.press-card:hover {
	background: var(--color-surface-2);
}

.restaurant-card::before,
.award-card::before,
.press-card::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms var(--ease);
}

.restaurant-card:hover::before,
.award-card:hover::before,
.press-card:hover::before {
	transform: scaleX(1);
}

.restaurant-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.restaurant-card__index {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-label);
	color: rgba(var(--color-gold-rgb), 0.7);
}

.restaurant-card__year,
.restaurant-card__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.restaurant-card__name {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	margin-bottom: var(--space-2);
	transition: color 250ms var(--ease);
}

.restaurant-card:hover .restaurant-card__name {
	color: var(--color-gold);
}

.hospitality__feature {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-12);
}

.hospitality__feature-media,
.hospitality__feature-media .media-image,
.hospitality__feature-media .media-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
	border: 0;
}

.hospitality__feature::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.15) 55%, transparent 100%);
}

.hospitality__feature-copy {
	position: absolute;
	left: var(--space-6);
	right: var(--space-6);
	bottom: var(--space-6);
	z-index: 1;
}

.hospitality__feature-copy h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: var(--space-3);
}

.hospitality__feature-copy p {
	max-width: 42ch;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.network-card {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.network-card__title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	color: var(--color-text);
}

.award-card__year {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: var(--space-4);
}

.award-card__title {
	font-size: 1.25rem;
	margin-bottom: var(--space-3);
}

.award-card__text {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.honors__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-8);
}

.honors__header .section-heading {
	max-width: 760px;
	flex: 1 1 480px;
}

.honors__media {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid rgba(var(--color-gold-rgb), 0.25);
}

.honors__media .media-image,
.honors__media .media-placeholder {
	aspect-ratio: 1 / 1;
	height: 100%;
}

.honors__cta {
	margin-top: var(--space-10);
	text-align: center;
}

.honors__link {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.honors__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.honors__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.honors__link:hover .honors__link-arrow {
	transform: translateX(4px);
}

.honors__gallery {
	margin-top: var(--space-10);
	margin-bottom: var(--space-10);
}

/* ---------- 13. Cinema carousel (Chapter Four) ---------- */
.cinema__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-8);
}

.cinema .section-heading {
	max-width: var(--container-max);
	margin-bottom: 0;
}

.cinema__note {
	max-width: 68ch;
	margin-inline: auto;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.cinema__cta {
	margin: 0;
}

.cinema__link {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.cinema__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.cinema__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.cinema__link:hover .cinema__link-arrow {
	transform: translateX(4px);
}

.cinema__carousel-wrap {
	position: relative;
	margin-top: var(--space-10);
}

.cinema__arrow {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: rgba(5, 5, 5, 0.6);
	backdrop-filter: blur(6px);
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease), opacity 250ms var(--ease);
}

.cinema__arrow--prev {
	left: var(--space-2);
	transform: translateY(-50%);
}

.cinema__arrow--next {
	right: var(--space-2);
	transform: translateY(-50%);
}

.cinema__arrow:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.cinema__arrow[aria-disabled="true"] {
	pointer-events: none;
}

@media (min-width: 900px) {
	.cinema__arrow {
		display: flex;
	}

	.cinema__arrow--prev {
		left: var(--space-4);
	}

	.cinema__arrow--next {
		right: var(--space-4);
	}
}

.cinema__carousel {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Matches .container's 15px mobile gutter so the carousel — which
	   deliberately sits outside .container for its full-bleed edges —
	   still lines up with every other section's left/right gap. */
	padding: 0 15px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cinema__carousel::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.cinema__carousel {
		padding-inline: var(--space-6);
	}
}

.film-card {
	display: block;
	flex: 0 0 auto;
	/* min() with the carousel's own side padding subtracted keeps the
	   first card fully visible (not pre-clipped) down to a 320px
	   viewport, instead of a flat 240px that can crowd very narrow
	   screens once the carousel's own padding is accounted for — same
	   safeguard .legacy-card uses. */
	width: min(240px, calc(100vw - 2 * 15px));
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.film-card {
		width: 300px;
	}
}

.film-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}

/* Chapter-context Cinematic Movie Slider only (scoped to .film-chapter,
   the chapter section wrapper) — a gold "picture frame" mat around each
   slide, matching .split-image-row__col. The homepage Cinema section
   reuses this same .film-card/.film-card__media markup verbatim and is
   deliberately left with its plain border, unframed. */
.film-chapter .film-card {
	padding: var(--space-2);
	background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.04));
	border: 1px solid var(--color-gold);
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.08), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.film-chapter .film-card__media {
	border-radius: 3px;
	border-color: rgba(var(--color-gold-rgb), 0.5);
}

.film-card__media .media-image,
.film-card__media .media-placeholder {
	aspect-ratio: 2 / 3;
	height: 100%;
	transition: transform 900ms var(--ease);
}

.film-card:hover .media-image {
	transform: scale(1.08);
}

.film-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.25) 55%, transparent 80%);
	transition: background 400ms var(--ease);
}

.film-card:hover .film-card__media::after {
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.97) 0%, rgba(5, 5, 5, 0.4) 60%, transparent 85%);
}

.film-card:hover .film-card__media {
	border-color: rgba(var(--color-gold-rgb), 0.4);
	box-shadow: 0 0 0 1px rgba(var(--color-gold-rgb), 0.25), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.film-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--space-5);
}

.film-card__year {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
}

.film-card__title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	margin: var(--space-2) 0 var(--space-1);
}

.film-card__role {
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.film-card__tagline {
	margin-top: var(--space-2);
	font-size: 0.8125rem;
	color: var(--color-text-dim);
}

.film-card__film {
	margin-top: var(--space-2);
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text);
}

.film-card__meta {
	margin-top: var(--space-1);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gold-light);
}

.film-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.film-card__link span {
	transition: transform 250ms var(--ease);
}

.film-card:hover .film-card__link {
	opacity: 1;
	transform: translateY(0);
}

.film-card:hover .film-card__link span {
	transform: translateX(4px);
}

/* ---------- 14. Bridge (Chapter Five) ---------- */
.bridge {
	position: relative;
	overflow: hidden;
}

/* #bridge (ID selector) is used here instead of .bridge so this wins
   over .section:nth-of-type(even)::before's higher specificity, which
   would otherwise silently replace this background and squash the
   pseudo-element down to its 1px hairline height. */
#bridge::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background:
		radial-gradient(80% 50% at 50% 0%, rgba(183, 110, 58, 0.18), transparent 60%),
		radial-gradient(60% 40% at 50% 100%, rgba(var(--color-gold-rgb), 0.1), transparent 60%),
		var(--color-bg);
}

.bridge > .container {
	position: relative;
	z-index: 1;
}

.bridge__gallery {
	margin-top: var(--space-10);
}

@media (min-width: 480px) {
	.hairline-grid--bridge {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 640px) {
	.hairline-grid--bridge {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.hairline-grid--bridge {
		grid-template-columns: repeat(5, 1fr);
	}
}

.bridge-card {
	text-align: center;
}

.bridge .section-heading {
	max-width: var(--container-max);
}

.bridge .section-heading .section-intro {
	max-width: none;
}

.bridge__cta {
	margin-top: var(--space-10);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
}

.bridge__cta-label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.bridge__cta-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.bridge__cta-circle svg {
	transition: transform 250ms var(--ease);
}

.bridge__cta-circle:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.bridge__cta-circle:hover svg {
	transform: translateX(3px);
}

/* ---------- 15. Legacy (Chapter Six) ---------- */
.legacy__grid {
	display: grid;
	gap: var(--space-10);
}

.legacy__heading {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 3rem;
	line-height: 1.1;
	color: var(--color-text);
}

.legacy__heading em {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--color-gold);
}

.legacy__media {
	margin-top: var(--space-8);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.legacy__media .media-image,
.legacy__media .media-placeholder {
	aspect-ratio: 4 / 5;
	height: 100%;
}

.legacy__lead {
	font-family: var(--font-accent);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.5;
	color: rgba(242, 239, 233, 0.9);
}

.legacy__list {
	margin-top: var(--space-8);
}

.legacy__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-5);
	padding: var(--space-6) var(--space-5);
	border-top: 1px solid var(--color-border);
	transition: background 250ms var(--ease);
}

.legacy__item:first-child {
	border-top: 0;
}

.legacy__item:hover {
	background: rgba(255, 255, 255, 0.015);
}

.legacy__item-index {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-label);
	color: rgba(var(--color-gold-rgb), 0.6);
	transition: color 250ms var(--ease);
}

.legacy__item:hover .legacy__item-index {
	color: var(--color-gold);
}

.legacy__item-title {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	margin-bottom: var(--space-2);
}

.legacy__item-text {
	max-width: 42ch;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.legacy__grid {
		grid-template-columns: 5fr 7fr;
		gap: 3rem;
		align-items: start;
	}
}

.legacy__cta {
	margin-top: var(--space-10);
}

.legacy__link {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.legacy__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.legacy__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.legacy__link:hover .legacy__link-arrow {
	transform: translateX(4px);
}

/* ---------- 16. Network (Chapter Seven) ---------- */
.network-card {
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.network-card__icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-5);
	border-radius: 50%;
	border: 1px solid rgba(var(--color-gold-rgb), 0.3);
	transition: all 250ms var(--ease);
}

.network-card:hover .network-card__icon {
	border-color: var(--color-gold);
	background: rgba(var(--color-gold-rgb), 0.1);
}

.network-card__subtitle {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ---------- Leadership Across Industries ---------- */
.leadership .section-heading {
	max-width: var(--container-max);
}

.leadership .section-heading .section-intro {
	max-width: none;
}

.leadership .network-card {
	position: relative;
	transition: background 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
}

.leadership .network-card::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
	transform: scaleX(0);
	transition: transform 500ms var(--ease);
}

.leadership .network-card:hover {
	box-shadow: 0 0 0 1px rgba(var(--color-gold-rgb), 0.35), 0 20px 45px -12px rgba(0, 0, 0, 0.55), 0 0 60px -10px rgba(var(--color-gold-rgb), 0.3);
	z-index: 1;
}

.leadership .network-card:hover::before {
	transform: scaleX(1);
}

.leadership .network-card__icon {
	transition: transform 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
}

.leadership .network-card:hover .network-card__icon {
	transform: scale(1.15);
}

.leadership .network-card__title {
	transition: color 300ms var(--ease);
}

.leadership .network-card:hover .network-card__title {
	color: var(--color-gold);
}

.leadership__quote {
	text-align: center;
	margin-inline: auto;
	margin-top: var(--space-10);
}

.leadership__cta {
	margin-top: var(--space-8);
	text-align: center;
}

.leadership__link {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.leadership__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.leadership__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.leadership__link:hover .leadership__link-arrow {
	transform: translateX(4px);
}

/* ---------- 17. Press (Chapter Eight) ---------- */
.press__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
}

.press__header .section-heading {
	margin-bottom: 0;
}

.press__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin-bottom: var(--space-2);
}

.press__filter {
	padding: var(--space-2) var(--space-4);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border-strong);
	transition: all 200ms var(--ease);
}

.press__filter:hover {
	border-color: rgba(var(--color-gold-rgb), 0.4);
	color: var(--color-text);
}

.press__filter.is-active {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.hairline-grid--press {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.hairline-grid--press {
		grid-template-columns: repeat(2, 1fr);
	}
}

.press-card {
	display: block;
	transition: background 250ms var(--ease);
}

.press-card:hover {
	background: var(--color-surface-2);
}

.press-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
}

.press-card__outlet {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
}

.press-card__type {
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.press-card__headline {
	margin-top: var(--space-5);
	font-family: var(--font-accent);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.35;
	color: var(--color-text);
	transition: color 250ms var(--ease);
}

.press-card:hover .press-card__headline {
	color: var(--color-gold-light);
}

.press-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.press-card:hover .press-card__link {
	color: var(--color-gold-light);
}

.press-card[hidden] {
	display: none;
}

/* ---------- 18. Gallery (Chapter Nine), mosaic ---------- */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 220px;
	gap: var(--space-3);
}

@media (max-width: 767px) {
	.gallery__grid {
		padding-inline: var(--space-3);
	}

	/* Only the first few photos on phones — a full chapter's worth of
	   photos otherwise turns this into a very long mobile scroll. */
	.gallery__grid > :nth-child(n+5) {
		display: none;
	}
}

@media (min-width: 768px) {
	.gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 240px;
	}
}

.gallery__item {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	padding: 0;
	text-align: left;
}

.gallery__item .media-image,
.gallery__item .media-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border: 0;
	transition: transform 900ms var(--ease);
}

.gallery__item:hover .media-image {
	transform: scale(1.08);
}

.gallery__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.75) 0%, transparent 45%);
	opacity: 0.8;
	transition: opacity 250ms var(--ease);
}

.gallery__item:hover::after {
	opacity: 0.55;
}

.gallery__item-caption {
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 1;
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, 0.9);
}

.gallery__item {
	cursor: zoom-in;
}

/* ---------- Preview galleries: swipeable slider on mobile, simple 2-row, 3-per-row grid on larger screens ---------- */
@media (max-width: 767px) {
	.gallery-preview {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--space-3);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.gallery-preview::-webkit-scrollbar {
		display: none;
	}

	.gallery-preview .gallery__item {
		flex: 0 0 75%;
		height: 180px;
		scroll-snap-align: start;
	}
}

@media (min-width: 768px) {
	.gallery-preview {
		grid-template-columns: repeat(5, 1fr);
		grid-auto-rows: 190px;
	}
}

.gallery-preview .gallery__item {
	border: 0;
}

.gallery-preview .gallery__item::after {
	content: none;
}

.gallery-preview .gallery__item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.85) 0%, transparent 55%);
	opacity: 0;
	transition: opacity 250ms var(--ease);
	pointer-events: none;
}

.gallery-preview .gallery__item:hover::before {
	opacity: 1;
}

.gallery-preview .media-image {
	object-fit: cover;
}

.gallery-preview .gallery__item-caption {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}

.gallery-preview .gallery__item:hover .gallery__item-caption {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767px) {
	.gallery-preview .gallery__item::before {
		opacity: 1;
	}

	.gallery-preview .gallery__item-caption {
		opacity: 1;
		transform: translateY(0);
	}
}

.gallery__view-all {
	margin-top: var(--space-8);
	text-align: center;
}

.gallery__view-all .btn {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.gallery__view-all .btn:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.gallery__view-all .btn span {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.gallery__view-all .btn:hover span {
	transform: translateX(4px);
}

/* ---------- Gallery lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 5, 5, 0.94);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms var(--ease), visibility 300ms var(--ease);
}

.lightbox[data-open] {
	opacity: 1;
	visibility: visible;
}

.lightbox__stage {
	position: relative;
	width: min(92vw, 1100px);
	height: min(86vh, 800px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 1px solid var(--color-border-strong);
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.lightbox[data-open] .lightbox__image {
	opacity: 1;
	transform: scale(1);
}

.lightbox__video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 1px solid var(--color-border-strong);
	background: #000;
}

.lightbox__youtube-wrap {
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-border-strong);
	background: #000;
}

.lightbox__youtube {
	width: 100%;
	height: 100%;
	border: 0;
}

.lightbox__close,
.lightbox__arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: rgba(5, 5, 5, 0.6);
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
	z-index: 1;
}

.lightbox__close:hover,
.lightbox__arrow:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.lightbox__close {
	top: var(--space-5);
	right: var(--space-5);
}

.lightbox__arrow--prev {
	left: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__arrow--next {
	right: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
}

@media (min-width: 900px) {
	.lightbox__arrow--prev {
		left: var(--space-8);
	}

	.lightbox__arrow--next {
		right: var(--space-8);
	}
}

.lightbox__caption {
	position: absolute;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	max-width: min(90vw, 720px);
	padding: var(--space-3) var(--space-5);
	text-align: center;
	background: rgba(5, 5, 5, 0.6);
	border: 1px solid var(--color-border-strong);
	backdrop-filter: blur(6px);
}

.lightbox__caption-year {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
}

.lightbox__caption-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text);
}

/* ---------- 19. Testimonials (Chapter Ten) ---------- */
.testimonial-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
}

.testimonial {
	position: relative;
	margin: 0;
	padding: var(--space-10) var(--space-6);
	background: var(--color-surface);
}

@media (min-width: 900px) {
	.testimonial {
		padding: var(--space-12) var(--space-10);
	}
}

.testimonial__mark {
	position: absolute;
	top: var(--space-6);
	left: var(--space-6);
	font-family: var(--font-accent);
	font-size: clamp(2.75rem, 6vw, 4rem);
	line-height: 1;
	color: rgba(var(--color-gold-rgb), 0.3);
}

.testimonial__body {
	margin-left: var(--space-8);
}

@media (min-width: 900px) {
	.testimonial__body {
		margin-left: var(--space-12);
	}
}

.testimonial__quote {
	font-family: var(--font-accent);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.45;
	color: var(--color-text);
}

.testimonial__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-gold);
}

.testimonial__source-line {
	width: 32px;
	height: 1px;
	background: var(--color-gold);
}

/* ---------- 19. Contact ---------- */
.contact__closing-wrap {
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.contact__closing {
	max-width: 42ch;
	font-family: var(--font-accent);
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.vision .section-heading {
	max-width: var(--container-max);
}

.vision .section-heading .section-intro {
	max-width: none;
}

.vision__quote-wrap {
	text-align: center;
}

.vision__quote {
	max-width: 60ch;
	margin-inline: auto;
}

.vision__cta {
	margin-top: var(--space-8);
	text-align: center;
}

.vision__link {
	padding: 0.9em 1.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.vision__link:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.vision__link-arrow {
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.vision__link:hover .vision__link-arrow {
	transform: translateX(4px);
}

/* .btn's white-space: nowrap forces long button/link text onto one line,
   which can push the button (and the whole page) wider than the mobile
   viewport once admin-entered copy runs long. Let it wrap as a last
   resort on the narrowest screens instead — covers every .btn use
   (primary/ghost/text/outline), not just a hand-maintained list. */
@media (max-width: 480px) {
	.btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-field label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-text-dim);
}

.form-field input,
.form-field textarea,
.form-field select {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-strong);
	border-radius: 10px;
	padding: var(--space-3) var(--space-4);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.form-field textarea {
	resize: vertical;
}

.form-field select {
	appearance: none;
	line-height: 1.7;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-size: 16px;
	padding-right: var(--space-8);
}

.form-field select option {
	background: var(--color-surface-2);
	color: var(--color-text);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	border-color: var(--color-gold);
	background: var(--color-surface-2);
	outline: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: var(--color-text-dim);
}

.form-field-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	font-size: 0.9375rem;
	border: 1px solid;
}

.form-notice--success {
	background: rgba(111, 174, 126, 0.08);
	border-color: var(--color-success);
	color: var(--color-success);
}

.form-notice--error {
	background: rgba(201, 106, 94, 0.08);
	border-color: var(--color-error);
	color: var(--color-error);
}

/* ---------- Form validation states (Contact inquiry form) ---------- */
.form-field__req {
	color: var(--color-gold);
	font-weight: 400;
}

.form-field__error {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-error);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.form-field--has-error input,
.form-field--has-error textarea,
.form-field--has-error select {
	border-color: var(--color-error);
}

.form-field--has-error input:focus,
.form-field--has-error textarea:focus,
.form-field--has-error select:focus {
	border-color: var(--color-error);
	box-shadow: 0 0 0 2px rgba(201, 106, 94, 0.25);
}

.form-error-summary {
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: rgba(201, 106, 94, 0.08);
	border: 1px solid var(--color-error);
	border-radius: 10px;
}

.form-error-summary:focus {
	outline: 2px solid var(--color-error);
	outline-offset: 2px;
}

.form-error-summary__title {
	margin: 0 0 var(--space-2);
	font-weight: 600;
	color: var(--color-error);
}

.form-error-summary ul {
	margin: 0;
	padding-left: var(--space-5);
	list-style: disc;
}

.form-error-summary li + li {
	margin-top: var(--space-1);
}

.form-error-summary a {
	color: var(--color-error);
	text-decoration: underline;
}

.btn.is-submitting,
.btn:disabled {
	opacity: 0.6;
	pointer-events: none;
	cursor: not-allowed;
}

/* ---------- Contact page ---------- */
.contact-page-form .section-title {
	margin-top: 70px;
}

.contact-page-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 700px) {
	.contact-page-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.contact-page-form__field--full {
		grid-column: 1 / -1;
	}
}

.contact-page-form__form {
	max-width: var(--container-max);
	margin-top: var(--space-10);
}

.contact-page-form__form > .btn {
	align-self: center;
	margin-top: var(--space-8);
}

.form-field__legend {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-text-dim);
}

.contact-page-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-2);
}

.contact-page-form__radio {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	cursor: pointer;
}

.contact-page-form__radio input {
	accent-color: var(--color-gold);
}

.contact-who__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	list-style: none;
	margin: var(--space-10) 0 0;
	padding: 0;
}

@media (min-width: 700px) {
	.contact-who__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.contact-who__item {
	background: var(--color-bg);
	padding: var(--space-6) var(--space-5);
	font-family: var(--font-heading);
	font-size: 0.8rem;
	color: var(--color-text);
	line-height: 1.4;
}

.contact-cta__actions {
	margin-top: var(--space-8);
	text-align: center;
}

/* ---------- Contact page — mobile (0–767px): tighten the vertical
   rhythm (desktop's space-10 / space-8 gaps leave big empty bands on a
   phone) and size the form inputs so iOS Safari doesn't zoom in on
   focus. Heading font-sizes are already handled sitewide
   (.section-title / .section-intro mobile rules near the top of this
   file); this block is spacing + form-control specifics only. ---------- */
@media (max-width: 767px) {
	.contact-page-form .form-field input,
	.contact-page-form .form-field textarea,
	.contact-page-form .form-field select {
		font-size: 16px;
	}

	.contact-page-form .section-heading,
	.contact-who .section-heading,
	.social-links .section-heading,
	.contact-cta .section-heading {
		margin-bottom: var(--space-6);
	}

	.contact-page-form__form {
		margin-top: var(--space-6);
		gap: var(--space-5);
	}

	.contact-page-form__form > .btn {
		margin-top: var(--space-6);
		width: 100%;
	}

	.contact-page-form__grid {
		gap: var(--space-5);
	}

	.contact-page-form__radios {
		gap: var(--space-3) var(--space-5);
	}

	.contact-who__grid {
		margin-top: var(--space-6);
	}

	.contact-who__item {
		padding: var(--space-4) var(--space-3);
		font-size: 0.75rem;
		line-height: 1.3;
	}

	.contact-cta__actions {
		margin-top: var(--space-6);
	}
}

/* Social Media — reuses Leadership's .network-card shell (see "16.
   Network" above) but dressed up for a premium, plaque-like feel: a
   faint gold gradient wash, a top hairline that sweeps in on hover, and
   a glowing icon badge — echoing the Global Impact page's
   .notable-item treatment (also an icon + name card) rather than
   inventing a third card style. */
.social-links .section-title {
	color: var(--color-gold);
}

.social-links .section-heading .section-intro {
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
}

.section.social-links .network-card {
	position: relative;
	padding: 2.25rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(var(--color-gold-rgb), 0.07), transparent 65%),
		linear-gradient(155deg, rgba(var(--color-gold-rgb), 0.06), rgba(0, 0, 0, 0.1) 75%);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	transition: border-color 350ms var(--ease), box-shadow 350ms var(--ease);
}

.social-links .network-card::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
	transform: scaleX(0);
	transition: transform 500ms var(--ease);
}

.social-links .network-card:hover {
	border-color: rgba(var(--color-gold-rgb), 0.45);
	box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55), 0 0 40px -14px rgba(var(--color-gold-rgb), 0.3);
}

.social-links .network-card:hover::before {
	transform: scaleX(1);
}

.social-links .network-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--color-gold);
	background: rgba(var(--color-gold-rgb), 0.07);
	border-color: rgba(var(--color-gold-rgb), 0.35);
	filter: drop-shadow(0 0 8px rgba(var(--color-gold-rgb), 0.25));
	transition: border-color 400ms var(--ease), background 400ms var(--ease), filter 400ms var(--ease);
}

.social-links .network-card:hover .network-card__icon {
	border-color: var(--color-gold);
	background: rgba(var(--color-gold-rgb), 0.16);
	filter: drop-shadow(0 0 14px rgba(var(--color-gold-rgb), 0.45));
}

.social-links .network-card__icon svg {
	width: 22px;
	height: 22px;
}

.social-links .network-card__title {
	transition: color 300ms var(--ease);
}

.social-links .network-card:hover .network-card__title {
	color: var(--color-gold);
}

.social-links .network-card__subtitle {
	display: flex;
	align-items: baseline;
	max-width: 100%;
	color: var(--color-text-dim);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

.social-links .network-card__handle {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.network-card__arrow {
	display: inline-block;
	flex-shrink: 0;
	margin-left: 0.35em;
	transition: transform 250ms var(--ease);
}

.social-links .network-card:hover .network-card__arrow {
	transform: translateX(4px);
}

/* ---------- 20. Footer ---------- */
.site-footer {
	padding-block: var(--space-8);
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
}

.nav-menu--footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
}

.nav-menu--footer a {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.nav-menu--footer a:hover {
	color: var(--color-gold-light);
}

.site-footer__copyright {
	margin: 0;
	color: var(--color-text);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}

.site-footer__copyright-icon {
	display: inline-block;
	font-size: 1.4em;
	line-height: 1;
	vertical-align: middle;
	margin-right: 0.2em;
	color: var(--color-gold-light);
}

@media (min-width: 900px) {
	.site-footer__inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: left;
	}

	.site-footer__copyright {
		flex-basis: 100%;
		text-align: center;
	}
}

/* ---------- 21. Generic page template (page.php) ---------- */
.page-content {
	padding-block: clamp(6rem, 10vw, 9rem) var(--space-16);
}

.page-content__header {
	max-width: 760px;
	margin-bottom: var(--space-8);
}

.page-content__title {
	font-size: 3rem;
}

.page-content__thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-10);
}

.page-content__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-content__body {
	max-width: 70ch;
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.page-content__body > * + * {
	margin-top: var(--space-5);
}

.page-content__body h2,
.page-content__body h3 {
	color: var(--color-text);
	margin-top: var(--space-8);
}

.page-content__body a {
	color: var(--color-gold-light);
	text-decoration: underline;
}

.page-content__body img {
	max-width: 100%;
	height: auto;
}

/* ---------- 22. Fallback blog index (index.php) ---------- */
.post-list-wrap {
	padding-block: var(--space-16);
}

.post-list__item {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.post-list__title a:hover {
	color: var(--color-gold-light);
}

.post-list__excerpt {
	color: var(--color-text-muted);
	margin-top: var(--space-2);
}

/* ---------- 23. About Us page ---------- */
.about-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.about-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.about-hero__media .media-placeholder,
.about-hero__media .media-image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 20%;
}

.about-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 5, 5, 0.15);
	pointer-events: none;
}

.about-hero__scrim {
	position: absolute;
	inset: 0;
}

.about-hero__scrim--bottom {
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0.15) 55%, var(--color-bg) 100%);
}

.about-hero__scrim--top {
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.1) 0%, transparent 35%);
}

.about-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Top value clears the fixed/floating site header (~72px) with real
	   breathing room above it, not just the bare minimum — the eyebrow
	   should never look like it's touching the header. Kept as margin
	   (outside the visible box) rather than padding (inside it) so the
	   box itself stays a compact card, not a tall mostly-empty panel. */
	margin-block: clamp(6rem, 9vw, 7.5rem) clamp(1.5rem, 0.9rem + 2vw, 3rem);
	padding: clamp(1.125rem, 0.6rem + 2.2vw, 2.25rem);
}

@media (min-width: 1024px) {
	/* Content Alignment (dashboard-configurable) — see .hero__content for
	   the same pattern; half-width text column, left or right, desktop only. */
	.about-hero__content.about-hero__content--align-left,
	.about-hero__content.about-hero__content--align-right {
		max-width: 45%;
	}

	.about-hero__content.about-hero__content--align-left {
		margin-inline: clamp(1.5rem, 4vw, 3.5rem) auto;
	}

	.about-hero__content.about-hero__content--align-right {
		margin-inline: auto clamp(1.5rem, 4vw, 3.5rem);
	}
}

.about-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--box-gold);
	margin: 0 0 var(--space-4);
}

.about-hero__eyebrow-line {
	width: 40px;
	height: 1px;
	background: var(--box-gold);
	flex-shrink: 0;
}

.about-hero__headline {
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--box-text);
	/* Gap to the paragraph lives entirely on .about-hero__sub's small
	   margin-top now (matches the homepage hero) — no reserved bottom gap. */
	margin-bottom: 0;
}

.about-hero__sub {
	/* Tight step off the headline — no hairline divider, no padding
	   (same as the homepage hero's .hero__subtitle). */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	padding-top: 0;
	border-top: none;
}

.about-hero__sub p {
	color: var(--box-text-muted);
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem);
	line-height: 1.65;
	margin-bottom: var(--space-3);
	max-width: none;
	text-align: left;
}

.about-hero__quote {
	position: relative;
	margin-top: var(--space-6);
	padding: var(--space-4) var(--space-5);
	max-width: 52ch;
	background: linear-gradient(135deg, rgba(var(--box-gold-rgb), 0.07), rgba(255, 255, 255, 0.35));
	border-left: 2px solid var(--box-gold);
}

.about-hero__quote::before {
	content: '\201C';
	position: absolute;
	top: -0.3em;
	left: var(--space-4);
	font-family: var(--font-accent);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--box-gold);
	opacity: 0.5;
}

.about-hero__quote p {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(0.9rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
	color: var(--box-text);
	margin-bottom: var(--space-2);
}

.about-hero__quote cite {
	display: block;
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--box-gold);
}

.about-hero__cta {
	margin-top: var(--space-6);
}

.chapters .container {
	display: flex;
	flex-direction: column;
	gap: clamp(4rem, 8vw, 7rem);
}

.chapter-block {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.chapter-block {
		/* The image column shrink-wraps its photo (auto); the text column is
		   a comfortable reading measure. justify-content centres the whole
		   image+text pair in the section, so a narrow (portrait) photo
		   leaves no empty half-column beside it and the gap to the copy is
		   only the grid gap. align-items: center so short copy sits centred
		   against the photo rather than pinned to the top with dead space
		   below it. */
		grid-template-columns: auto minmax(0, 36rem);
		justify-content: center;
		align-items: center;
		gap: clamp(1.25rem, 3vw, 2.5rem);
	}

	.chapter-block--reverse .chapter-block__media {
		order: 2;
	}
}

/* Plain positioning context only — the gold frame (padded gradient mat +
   border + ring/shadow) lives on the image itself below, so it hugs the
   photo at whatever size the photo ends up (see the ≥900px block further
   down) instead of on this box, which would leave an empty gold slab
   around a scaled-down image. */
.chapter-block__media {
	position: relative;
}

.chapter-block__media .media-image {
	display: block;
	width: 100%;
	height: auto;
	padding: var(--space-2);
	background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.04));
	border: 1px solid var(--color-gold);
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.08), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.chapter-block__media img {
	transition: transform 900ms var(--ease);
}

.chapter-block__media:hover img {
	transform: scale(1.04);
}

.chapter-block__content {
	position: relative;
	z-index: 0;
}

.chapter-block__title {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 3rem;
	line-height: 1.22;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.chapter-block__content p {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.8;
	margin-bottom: var(--space-4);
}

.chapter-block__link {
	margin-top: var(--space-4);
}

/* Image/text chapters (≥900px): the framed photo is shown at its natural
   size, its column shrink-wraps it, and the whole pair is centred in the
   section (see the earlier min-width:900px block). max-height caps a very
   tall portrait so it can't tower over the copy; nothing is cropped —
   width/height stay auto, so the aspect ratio is always intact. Placed
   AFTER the base .chapter-block__media / .media-image rules so it wins the
   source-order tie (see [[main-css-source-order]]). Below 900px the
   columns stack and the image keeps its natural full-width height. */
@media (min-width: 900px) {
	.chapter-block__media .media-image {
		position: static;
		display: block;
		width: auto;
		height: auto;
		/* Absolute caps (not 100% — the auto image column can't resolve a
		   percentage): keep a landscape photo from crushing the text column
		   and a portrait one from towering over the copy. The width cap
		   eases down on narrower desktops so the text column keeps a usable
		   measure. Aspect ratio is preserved by the browser when either cap
		   binds, so no crop. */
		max-width: clamp(20rem, 40vw, 32rem);
		max-height: 38rem;
		margin: 0;
	}

	/* Missing-image fallback needs an explicit width here — its base
	   width:100% has nothing to resolve against in the auto image column. */
	.chapter-block__media .media-placeholder {
		width: 32rem;
		max-width: 100%;
	}
}

/* Global Impact — "Impact Type 2" Chapter Format: a two-column grid of
   Notable Personalities (icon badge + name + designation), loosely
   inspired by a dignitaries-list reference screenshot — gold circular
   icon badge and two-column layout, kept within this site's existing
   minimal/premium visual language rather than the reference's ornate
   medallion/flourish/particle treatment. */
.notable-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	max-width: 68rem;
	margin-inline: auto;
}

@media (min-width: 700px) {
	.notable-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

.notable-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-6);
	background:
		radial-gradient(ellipse at 50% 0%, rgba(var(--color-gold-rgb), 0.05), transparent 65%),
		linear-gradient(155deg, rgba(var(--color-gold-rgb), 0.08), rgba(0, 0, 0, 0.1) 75%);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	transition: border-color 350ms var(--ease), box-shadow 350ms var(--ease);
}

/* Corner-bracket accents (top-left / bottom-right) — a restrained,
   plaque/certificate-style frame instead of a full border ring, fitting
   a "notable people" list meant to read as premium. */
.notable-item::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--color-gold), transparent 70%) top left / 3.5rem 2px no-repeat,
		linear-gradient(180deg, var(--color-gold), transparent 70%) top left / 2px 3.5rem no-repeat,
		linear-gradient(270deg, var(--color-gold), transparent 70%) bottom right / 3.5rem 2px no-repeat,
		linear-gradient(0deg, var(--color-gold), transparent 70%) bottom right / 2px 3.5rem no-repeat;
	opacity: 0.65;
	transition: opacity 350ms var(--ease);
}

.notable-item:hover {
	border-color: rgba(var(--color-gold-rgb), 0.45);
	box-shadow: 0 24px 45px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--color-gold-rgb), 0.12);
}

.notable-item:hover::before {
	opacity: 1;
}

/* Vertical separator between the icon and the name/designation text. */
.notable-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(var(--space-6) + 3.5rem + var(--space-4) / 2);
	transform: translateY(-50%);
	width: 1px;
	height: 2.75rem;
	background: linear-gradient(180deg, transparent, rgba(var(--color-gold-rgb), 0.55), transparent);
}

.notable-item__icon {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	color: var(--color-gold);
	filter: drop-shadow(0 0 10px rgba(var(--color-gold-rgb), 0.35));
	transition: filter 350ms var(--ease);
}

.notable-item:hover .notable-item__icon {
	filter: drop-shadow(0 0 16px rgba(var(--color-gold-rgb), 0.55));
}

.notable-item__icon svg {
	width: 2rem;
	height: 2rem;
}

.notable-item__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.notable-item__text {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	min-width: 0;
	padding-left: calc(var(--space-4) / 2 + 0.5rem);
}

.notable-item__name {
	font-family: var(--font-accent);
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: 0.015em;
	background: linear-gradient(120deg, var(--color-gold) 0%, var(--color-gold-light) 45%, #fbe8b8 55%, var(--color-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.25);
}

.notable-item__title {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.quote-band-section {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

.quote-band {
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--space-6);
}

.quote-band p {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(1.375rem, 3vw, 2rem);
	line-height: 1.4;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.quote-band cite {
	display: block;
	font-style: normal;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gold);
}

.snapshot-table__wrap {
	overflow-x: auto;
}

.snapshot-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 62rem;
	margin-inline: auto;
	border-top: 1px solid var(--color-border-strong);
}

.snapshot-table th,
.snapshot-table td {
	text-align: left;
	padding: var(--space-5) var(--space-2);
	border-bottom: 1px solid var(--color-border);
	vertical-align: baseline;
}

.snapshot-table thead th {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-dim);
	border-bottom: 1px solid var(--color-border-strong);
}

.snapshot-table th:first-child,
.snapshot-table td:first-child {
	width: 15rem;
}

.snapshot-table tbody th {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	vertical-align: baseline;
}

.snapshot-table tbody td {
	font-family: var(--font-accent);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	color: var(--color-gold-light);
}

.snapshot-table tbody tr:hover {
	background: rgba(var(--color-gold-rgb), 0.04);
}

.cta-band {
	text-align: center;
}

.cta-band__inner {
	max-width: 42rem;
	margin-inline: auto;
}

.cta-band__heading {
	font-family: var(--font-heading);
	font-size: 3rem;
	color: var(--color-text);
	margin-bottom: var(--space-6);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5) var(--space-6);
}

/* ---------- Gallery page — hero ---------- */
.gallery-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background:
		radial-gradient(60% 75% at 6% 0%, rgba(var(--color-gold-rgb), 0.2), transparent 62%),
		radial-gradient(55% 65% at 100% 100%, rgba(var(--color-gold-rgb), 0.13), transparent 58%),
		linear-gradient(165deg, var(--color-surface) 0%, var(--color-bg) 68%);
	border-bottom: 1px solid var(--color-border);
}

/* Optional banner image/video (Banner Media field) — sits behind the
   existing gradient wash and texture, full-bleed like every other page
   hero. Renders nothing (falling through to the plain gradient) when no
   media is set, so pages that never opt in look exactly as before. */
.gallery-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gallery-hero__media .media-image,
.gallery-hero__media .media-placeholder {
	width: 100%;
	height: 100%;
}

.gallery-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0.15) 55%, var(--color-bg) 100%);
}

.gallery-hero__texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.5;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 14px);
	pointer-events: none;
}

.gallery-hero__content {
	position: relative;
	z-index: 1;
	/* Matches .about-hero__content's top clearance — real breathing room
	   above the fixed/floating site header (~72px), not just the bare
	   minimum. Shared by Gallery, Awards, Media & Press and
	   Entrepreneurial Journey (all reuse this hero verbatim). Kept as
	   margin (outside the visible box) so the box itself stays a compact
	   card, not a tall mostly-empty panel. */
	margin-block: clamp(6rem, 9vw, 7.5rem) clamp(1.5rem, 0.9rem + 2vw, 3rem);
	padding: clamp(1.125rem, 0.6rem + 2.2vw, 2.25rem);
}

@media (min-width: 1024px) {
	/* Content Alignment (dashboard-configurable) — see .hero__content for
	   the same pattern; half-width text column, left or right, desktop only. */
	.gallery-hero__content.gallery-hero__content--align-left,
	.gallery-hero__content.gallery-hero__content--align-right {
		max-width: 45%;
	}

	.gallery-hero__content.gallery-hero__content--align-left {
		margin-inline: clamp(1.5rem, 4vw, 3.5rem) auto;
	}

	.gallery-hero__content.gallery-hero__content--align-right {
		margin-inline: auto clamp(1.5rem, 4vw, 3.5rem);
	}
}

.gallery-hero__content .eyebrow {
	color: var(--box-gold);
	font-size: 0.75rem;
}

.gallery-hero__headline {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 3rem;
	line-height: 1.1;
	color: var(--box-text);
	/* Gap to the paragraph lives on .gallery-hero__sub's margin-top now
	   (matches the homepage hero) — no reserved bottom gap. */
	margin-bottom: 0;
}

.gallery-hero__sub {
	/* Tight step off the headline — no hairline divider, no padding
	   (same as the homepage hero's .hero__subtitle). */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	padding-top: 0;
	border-top: none;
}

.gallery-hero__sub p {
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem);
	color: var(--box-text-muted);
	line-height: 1.65;
	margin-bottom: var(--space-3);
	max-width: none;
	text-align: left;
}

.gallery-hero__quote {
	position: relative;
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	max-width: 52ch;
	background: linear-gradient(135deg, rgba(var(--box-gold-rgb), 0.07), rgba(255, 255, 255, 0.35));
	border-left: 2px solid var(--box-gold);
}

.gallery-hero__quote p {
	font-family: var(--font-accent);
	font-size: clamp(1rem, 1.8vw, 1.3125rem);
	line-height: 1.4;
	color: var(--box-text);
	margin-bottom: var(--space-2);
}

.gallery-hero__quote cite {
	display: block;
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--box-gold);
}

/* ---------- Gallery page — chapter blocks ---------- */
.gallery-chapter__head {
	max-width: var(--container-max);
	margin-inline: auto;
	margin-bottom: var(--space-10);
	text-align: center;
}

.gallery-chapter__title {
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1.1;
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

.gallery-chapter__subheading {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	color: var(--color-text);
	margin-bottom: var(--space-5);
}

/* Global Impact "Impact Type 2" chapter head — scoped override so only
   this layout's subheading changes, not every other page reusing
   .gallery-chapter__* verbatim. */
.notable-chapter-head .gallery-chapter__subheading {
	color: var(--color-gold-light);
	text-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.25);
}

.gallery-chapter__text {
	max-width: none;
	margin-inline: auto;
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	color: var(--color-text-muted);
	line-height: 1.8;
	text-align: left;
}

/* Awards & Recognition — decorative divider under the "Section Title +
   Split Images" chapter title: a solid gold bar with sharp angled
   (chevron-cut) ends and a small glowing diamond centered on it. */
.gallery-chapter__divider {
	display: block;
	position: relative;
	width: 50%;
	height: 2px;
	margin: 0 auto var(--space-8);
	background: var(--color-gold);
	clip-path: polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%);
}

.gallery-chapter__divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	background: var(--color-gold);
	transform: translate(-50%, -50%) rotate(45deg);
	box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.6);
}

/* Awards & Recognition — "Section Title + Split Images" chapter layout.
   Two images in one row, left at 40% width and right at 50% (matching the
   requested asymmetric split), stacking to full-width on mobile. Each
   image sits in a gold "picture frame" mat (padded gold-tinted border +
   glow), echoing the certificate/award-plaque reference look without
   needing decorative corner artwork. */
.split-image-row {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	justify-content: center;
}

.split-image-row__col--left {
	flex: 0 0 40%;
	max-width: 40%;
}

.split-image-row__col--right {
	flex: 0 0 50%;
	max-width: 50%;
}

.split-image-row__col {
	padding: var(--space-2);
	background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.04));
	border: 1px solid var(--color-gold);
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.08), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.split-image-row img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(var(--color-gold-rgb), 0.5);
	border-radius: 3px;
}

/* Award Type 2 — left column holds rich text instead of an image; no
   gold-mat frame here (that's for the photo columns only), just spacing. */
.split-image-row__col--text {
	padding: var(--space-6) 0;
	background: none;
	border: none;
	box-shadow: none;
	display: flex;
	align-items: center;
}

.split-image-row__text {
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	color: var(--color-text-muted);
	line-height: 1.8;
}

@media (max-width: 767px) {
	.split-image-row {
		flex-direction: column;
	}

	.split-image-row__col--left,
	.split-image-row__col--right {
		flex-basis: auto;
		max-width: 100%;
	}
}

/* Text + image variant (Gallery / Awards "Type 2") only — matched via
   :has() so the two-image (Type 1) split keeps its deliberate 40/50
   asymmetry untouched. Brings this variant in line with the .chapter-block
   image/text treatment: tighter gap, the pair centred (justify-content),
   the photo capped so it can't tower over the copy (never cropped — width
   stays auto), the photo column shrink-wraps that capped photo, and the
   text column holds a reading measure. align-items: center so short copy
   sits centred against the photo rather than pinned to the top. Placed
   after every base .split-image-row rule so it wins the source order (see
   [[main-css-source-order]]). */
@media (min-width: 768px) {
	.split-image-row:has(.split-image-row__col--text) {
		align-items: center;
		justify-content: center;
		gap: clamp(1.25rem, 3vw, 2.5rem);
	}

	.split-image-row:has(.split-image-row__col--text) .split-image-row__col--text {
		flex: 1 1 0;
		max-width: 36rem;
		padding-block: 0;
	}

	.split-image-row:has(.split-image-row__col--text) .split-image-row__col--right {
		flex: 0 1 auto;
		max-width: clamp(20rem, 40vw, 32rem);
	}

	.split-image-row:has(.split-image-row__col--text) .split-image-row__col--right img {
		width: auto;
		max-width: 100%;
		max-height: 38rem;
	}
}

/* Gallery "Gallery Type 3" chapter layout — title, then one full-width
   image banner. Reuses .split-image-row__col's gold-mat frame verbatim
   (see above), just full width instead of a 40%/50% split column. */
.gallery-chapter-banner {
	width: 100%;
}

/* ---------- Rich text (wysiwyg chapter/body fields) — shared styling for
   whatever HTML the editor produces (paragraphs, links, lists, tables),
   applied alongside a page's own typography class (max-width/color/
   font-size) via devraturi_render_rich_text() — see inc/helpers.php. One
   set of rules reused by every chapter/body field on the site instead of
   each page repeating its own paragraph/list/table CSS. ---------- */
.rich-text p:not(:first-child) {
	margin-top: var(--space-4);
}

.rich-text a {
	color: var(--color-gold-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rich-text a:hover {
	color: var(--color-gold);
}

.rich-text ul,
.rich-text ol {
	margin-top: var(--space-4);
	padding-left: 1.4em;
	text-align: center;
}

.rich-text li:not(:last-child) {
	margin-bottom: var(--space-2);
}

.rich-text table {
	width: 100%;
	margin-top: var(--space-6);
	border-collapse: collapse;
	border-top: 1px solid var(--color-border-strong);
	font-size: 0.9em;
	display: block;
	overflow-x: auto;
}

@media (min-width: 640px) {
	.rich-text table {
		display: table;
	}
}

.rich-text th,
.rich-text td {
	padding: var(--space-4) var(--space-2);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: baseline;
}

.rich-text th {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-dim);
	border-bottom: 1px solid var(--color-border-strong);
}

.rich-text td {
	font-family: var(--font-accent);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	color: var(--color-gold-light);
}

.rich-text tr:hover td {
	background: rgba(var(--color-gold-rgb), 0.04);
}

/* ---------- Gallery page — responsive masonry photo grid ----------
 * Base state (no JS) uses CSS multi-column as a safe fallback.
 * main.js redistributes items into true shortest-column-first
 * balanced .masonry__col flex columns (.masonry--js) once it runs,
 * using each image's own width/height attributes — this keeps
 * column heights evenly balanced instead of relying on the browser's
 * column auto-balance, which can leave uneven gaps at the bottom of
 * shorter columns.
 */
.masonry {
	margin-top: var(--space-8);
	column-count: 1;
	column-gap: var(--space-5);
}

/* Below 640px, main.js leaves the grid in this natural (non-JS-balanced)
   order — see getMasonryColumnCount()'s columnCount===1 branch — so it
   can become a swipeable horizontal slider instead of one tall stacked
   column. Every photo stays reachable via swipe, keeping the page's
   scroll length short instead of trading photos away to do it (the
   previous approach: show only the first four, hide the rest). Mirrors
   the "Preview galleries" mobile-slider pattern (.gallery-preview). */
@media (max-width: 639px) {
	.masonry {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		align-items: flex-start;
		gap: var(--space-3);
		padding-inline: var(--space-3);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.masonry::-webkit-scrollbar {
		display: none;
	}

	.masonry .ms {
		flex: 0 0 75%;
		height: 260px;
		scroll-snap-align: start;
		margin-bottom: 0;
	}

	/* Fixed slide height means the "natural width/height auto" rule
	   .ms img normally uses (so masonry's desktop columns can vary photo
	   heights) would stretch/distort here — crop to fill the fixed box
	   instead, same as .gallery-preview's mobile slides. .ms__trigger
	   also needs an explicit height: a percentage height on the img only
	   resolves against an ancestor with its OWN defined height, and
	   .ms__trigger (the button wrapping the img) has none by default —
	   without this the img silently keeps sizing to its natural aspect
	   ratio instead of filling the 260px box. */
	.masonry .ms__trigger {
		height: 100%;
	}

	.masonry .ms img,
	.masonry .ms video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 640px) {
	.masonry {
		column-count: 2;
	}
}

/* 6 columns from 1024px up, sitewide — every page's masonry gallery
   (Gallery/Awards/Media & Press/Global Impact/Film & Television/Cultural
   Ambassador/Entrepreneurial Journey) except the homepage, which doesn't
   use this component. */
@media (min-width: 1024px) {
	.masonry {
		column-count: 6;
	}
}

.masonry.masonry--js {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
}

.masonry__col {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

.ms {
	position: relative;
	break-inside: avoid;
	margin: 0;
	margin-bottom: 20px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.ms__trigger {
	display: block;
	width: 100%;
	padding: 0;
}

/* Play-icon overlay — shown only on grid items that carry a video
   (uploaded or YouTube) alongside their photo, see
   devraturi_render_gallery_item() in inc/helpers.php. Clicking the
   thumbnail still opens the sitewide lightbox, which plays the video
   instead of just enlarging the photo. */
.ms__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(5, 5, 5, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	pointer-events: none;
	transition: transform 250ms var(--ease), background 250ms var(--ease), color 250ms var(--ease);
}

.ms:hover .ms__play {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
	transform: translate(-50%, -50%) scale(1.08);
}

.ms img,
.ms video {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(0.15);
	transition: transform 1s var(--ease), filter 0.5s var(--ease);
}

.ms:hover img,
.ms:hover video {
	transform: scale(1.06);
	filter: grayscale(0);
}

.ms figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 30px 16px 14px;
	font-family: var(--font-heading);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(transparent, rgba(5, 5, 5, 0.9));
	opacity: 0;
	transform: translateY(8px);
	transition: 0.45s var(--ease);
	pointer-events: none;
}

.ms__sublabel {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--color-gold-light);
}

.ms:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 520px) {
	.ms figcaption {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Film & Television's Image Gallery only — its Film/Year/Genre/Role
   credit line should always be visible, not just on hover, unlike every
   other page's masonry gallery (scoped via .ft-media-gallery, added
   only in template-parts/film-television-page/media-gallery.php). */
.ft-media-gallery .ms figcaption {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Gallery page — Legacy Timeline (cinematic filmstrip) ----------
   A horizontal "reel" of letterboxed film-still frames — same dark scrim +
   caption-overlay treatment used by .film-card and .hero__media elsewhere
   in the theme — strung together by a thin gold line + year marker above
   each frame so it still reads as a timeline, not just a gallery. */
.legacy-timeline__carousel-wrap {
	position: relative;
	margin-top: var(--space-10);
}

.legacy-timeline__arrow {
	display: none;
	position: absolute;
	top: 45%;
	z-index: 3;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: rgba(5, 5, 5, 0.6);
	backdrop-filter: blur(6px);
	color: var(--color-text);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease), opacity 250ms var(--ease);
}

.legacy-timeline__arrow--prev {
	left: var(--space-2);
	transform: translateY(-50%);
}

.legacy-timeline__arrow--next {
	right: var(--space-2);
	transform: translateY(-50%);
}

.legacy-timeline__arrow:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.legacy-timeline__arrow[aria-disabled="true"] {
	pointer-events: none;
}

@media (min-width: 900px) {
	.legacy-timeline__arrow {
		display: flex;
	}

	.legacy-timeline__arrow--prev {
		left: var(--space-4);
	}

	.legacy-timeline__arrow--next {
		right: var(--space-4);
	}
}

.legacy-timeline__track {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: var(--space-6) var(--space-4) var(--space-6);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.legacy-timeline__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.legacy-timeline__track {
		padding-inline: var(--space-6);
	}
}

.legacy-card {
	position: relative;
	flex: 0 0 auto;
	/* min() with the track's own side padding (2 * --space-4) subtracted
	   keeps the very first card fully visible (not pre-clipped) down to a
	   320px viewport, instead of a flat 300px that's already wider than a
	   320px screen once the track's padding is accounted for. */
	width: min(300px, calc(100vw - 2 * var(--space-4)));
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.legacy-card {
		width: 420px;
	}
}

.legacy-card__marker {
	position: relative;
	height: 32px;
	margin-bottom: var(--space-4);
}

.legacy-card__marker::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(var(--color-gold-rgb), 0.5), var(--color-border) 90%);
}

.legacy-card__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--color-gold);
	box-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.6);
}

.legacy-card__year {
	position: absolute;
	top: 50%;
	left: var(--space-6);
	transform: translateY(-50%);
	padding: 0 var(--space-2);
	background: var(--color-bg);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	color: var(--color-gold);
	white-space: nowrap;
}

.legacy-card__frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	text-align: left;
	cursor: zoom-in;
	transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}

.legacy-card__frame .media-image,
.legacy-card__frame .media-placeholder {
	aspect-ratio: 16 / 9;
	height: 100%;
	transition: transform 900ms var(--ease);
}

.legacy-card:hover .legacy-card__frame .media-image {
	transform: scale(1.06);
}

.legacy-card:hover .legacy-card__frame {
	border-color: rgba(var(--color-gold-rgb), 0.4);
	box-shadow: 0 0 0 1px rgba(var(--color-gold-rgb), 0.25), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.legacy-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.15) 55%, transparent 100%);
}

.legacy-card__index {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.legacy-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--space-4) var(--space-5);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text);
}

.legacy-timeline__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-12);
}

/* ---------- Media & Press page — Impact Dashboard table ---------- */
.impact-table {
	max-width: 62rem;
	margin: 0 auto;
	border-top: 1px solid var(--color-border-strong);
}

.impact-table__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-1);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
	transition: background-color 0.3s var(--ease);
}

.impact-table__row[hidden] {
	display: none;
}

.impact-table__row:hover {
	background-color: rgba(var(--color-gold-rgb), 0.04);
}

.impact-table__metric {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.impact-table__figure {
	font-family: var(--font-accent);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: var(--color-gold-light);
	line-height: 1.4;
}

.impact-table__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-gold);
	transition: color 200ms var(--ease);
}

.impact-table__link:hover {
	color: var(--color-gold-light);
}

.impact-table__link--empty {
	color: var(--color-text-dim);
}

@media (min-width: 768px) {
	.impact-table__row {
		grid-template-columns: minmax(0, 15rem) 1fr auto;
		align-items: baseline;
		gap: var(--space-6);
		padding: var(--space-6) var(--space-2);
	}
}

/* Shared "N rows per page" pagination controls — used by any paginated
   table/list on the site (see the "Paginated table" JS block in
   main.js), not just the Media Impact Dashboard it was first built for. */
.table-pagination {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-2);
	max-width: 62rem;
	margin: var(--space-5) auto 0;
}

.table-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--space-2);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid var(--color-border-strong);
	border-radius: 4px;
	transition: color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.table-pagination__btn:hover {
	color: var(--color-text);
	border-color: rgba(var(--color-gold-rgb), 0.4);
}

.table-pagination__btn.is-active {
	color: var(--color-bg);
	background: var(--color-gold);
	border-color: var(--color-gold);
}

/* ---------- 24. Ambient FX — non-homepage pages only ---------- */
/* .site-header is deliberately NOT included here — it must stay
   `position: fixed` (its base rule) on every page, not just the
   homepage, so the header (and the mobile menu it contains) stays
   sticky everywhere. Its base z-index (90) already stacks above the
   ambient FX layers' z-index of 2 without needing this override. */
.has-cinematic-fx #main,
.has-cinematic-fx .site-footer {
	position: relative;
	z-index: 3;
}

.has-cinematic-fx .ambient-grain {
	position: fixed;
	inset: -10%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.045;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: devraturi-grain 6s steps(6) infinite;
}

@keyframes devraturi-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-4%, 3%); }
	40% { transform: translate(3%, -4%); }
	60% { transform: translate(-3%, 2%); }
	80% { transform: translate(2%, -2%); }
	100% { transform: translate(0, 0); }
}

.has-cinematic-fx .ambient-particles {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.has-cinematic-fx .ambient-particles__dot {
	position: absolute;
	bottom: 0;
	border-radius: 50%;
	background: var(--color-gold);
	box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.8);
	animation: devraturi-float-up linear infinite;
	opacity: 0;
}

.has-cinematic-fx .scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 120;
	background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
	pointer-events: none;
}

.has-cinematic-fx .to-top {
	position: fixed;
	right: var(--space-6);
	bottom: var(--space-6);
	z-index: 90;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: rgba(10, 9, 8, 0.7);
	backdrop-filter: blur(6px);
	color: var(--color-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 300ms var(--ease), transform 300ms var(--ease), border-color 250ms var(--ease), background 250ms var(--ease);
}

.has-cinematic-fx .to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.has-cinematic-fx .to-top:hover {
	background: var(--color-gold);
	color: #0d0a03;
	border-color: var(--color-gold);
}

@media (hover: hover) and (pointer: fine) {
	.has-custom-cursor .has-cinematic-fx {
		cursor: none;
	}

	.has-cinematic-fx .cursor,
	.has-cinematic-fx .cursor-dot {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		pointer-events: none;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}

	.has-cinematic-fx .cursor {
		width: 36px;
		height: 36px;
		border: 1px solid var(--color-gold);
		transition: width 300ms var(--ease), height 300ms var(--ease), background 300ms var(--ease), opacity 300ms;
		mix-blend-mode: difference;
	}

	.has-cinematic-fx .cursor.is-hover {
		width: 60px;
		height: 60px;
		background: rgba(var(--color-gold-rgb), 0.25);
		border-color: transparent;
	}

	.has-cinematic-fx .cursor-dot {
		width: 5px;
		height: 5px;
		background: var(--color-gold);
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-cinematic-fx .ambient-grain,
	.has-cinematic-fx .ambient-particles {
		display: none;
	}
}

/* =========================================================
   Film & Television page
   ========================================================= */

/* ---------- Hero — full-bleed still with a two-layer overlay (bottom
   gradient for text legibility + a soft radial vignette for cinematic
   depth) and a bold Cinzel headline, deliberately heavier/darker than
   About/Gallery's softer documentary-toned heroes so this page reads as
   "entertainment" at a glance. ---------- */
.film-hero {
	position: relative;
	overflow: hidden;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
}

.film-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.film-hero__media .media-image,
.film-hero__media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film-hero__scrim {
	position: absolute;
	inset: 0;
}

.film-hero__scrim--bottom {
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.3) 0%, rgba(5, 5, 5, 0.2) 30%, rgba(5, 5, 5, 0.08) 58%, rgba(5, 5, 5, 0.15) 100%);
}

.film-hero__scrim--vignette {
	background: radial-gradient(120% 90% at 50% 20%, transparent 45%, rgba(5, 5, 5, 0.15) 100%);
}

.film-hero__content {
	position: relative;
	z-index: 1;
	/* Same top clearance as .about-hero__content/.gallery-hero__content —
	   real breathing room above the fixed/floating site header (~72px).
	   Kept as margin (outside the visible box) so the box itself stays a
	   compact card, not a tall mostly-empty panel. */
	margin-block: clamp(6rem, 9vw, 7.5rem) clamp(1.5rem, 0.9rem + 2vw, 3rem);
	padding: clamp(1.125rem, 0.6rem + 2.2vw, 2.25rem);
}

@media (min-width: 1024px) {
	/* Content Alignment (dashboard-configurable) — see .hero__content for
	   the same pattern; half-width text column, left or right, desktop only. */
	.film-hero__content.film-hero__content--align-left,
	.film-hero__content.film-hero__content--align-right {
		max-width: 45%;
	}

	.film-hero__content.film-hero__content--align-left {
		margin-inline: clamp(1.5rem, 4vw, 3.5rem) auto;
	}

	.film-hero__content.film-hero__content--align-right {
		margin-inline: auto clamp(1.5rem, 4vw, 3.5rem);
	}
}

.film-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--box-gold-light);
	margin-bottom: var(--space-4);
}

.film-hero__eyebrow-line {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--box-gold);
}

.film-hero__headline {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1.1;
	max-width: 18ch;
	color: var(--box-text);
	/* Gap to the paragraph lives on .film-hero__sub's margin-top now
	   (matches the homepage hero) — no reserved bottom gap. */
	margin-bottom: 0;
}

.film-hero__sub {
	max-width: none;
	/* Tight step off the headline — no hairline divider, no padding
	   (same as the homepage hero's .hero__subtitle). */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	padding-top: 0;
	margin-bottom: var(--space-5);
	border-top: none;
}

.film-hero__sub p {
	color: var(--box-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin-bottom: var(--space-3);
	text-align: left;
}

.film-hero__quote {
	max-width: 46rem;
	padding-left: var(--space-4);
	border-left: 2px solid var(--box-gold);
	/* Own top gap so it still sits clear of the headline when no
	   paragraph renders above it (headline margin-bottom is 0 now). */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	margin-bottom: var(--space-6);
}

.film-hero__quote p {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(0.9rem, 1.6vw, 1.0625rem);
	line-height: 1.5;
	color: var(--box-text);
	margin-bottom: var(--space-2);
}

.film-hero__quote cite {
	display: block;
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--box-gold);
}

.film-hero__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--space-3);
	/* Fluid step off whatever precedes it — same as the homepage hero's
	   .hero__actions (also guards the case where no sub/quote renders). */
	margin-top: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}

.film-hero__actions .btn {
	flex: 1 1 0;
	min-width: 0;
	white-space: normal;
	text-align: center;
}

.film-hero__content .btn--ghost {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.film-hero__content .btn--ghost:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.film-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: var(--space-6);
	z-index: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	transform: translateX(-50%);
}

.film-hero__scroll-label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.film-hero__scroll-track {
	position: relative;
	width: 1px;
	height: 40px;
	background: var(--color-border-strong);
	overflow: hidden;
}

.film-hero__scroll-bar {
	position: absolute;
	top: -40px;
	left: 0;
	width: 100%;
	height: 40px;
	background: var(--color-gold);
	animation: devraturi-film-hero-scroll 2.2s var(--ease) infinite;
}

@keyframes devraturi-film-hero-scroll {
	0% { transform: translateY(0); }
	100% { transform: translateY(80px); }
}

@media (min-width: 768px) {
	.film-hero__scroll {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.film-hero__scroll-bar {
		animation: none;
	}
}

/* ---------- Variant C — TV & Shows Slider: landscape "streaming shelf"
   cards, deliberately distinct from Variant B's poster carousel
   (.film-card) — network-tag numeral, wider aspect ratio, a decorative
   progress line instead of a bottom text scrim. Reuses the same
   data-carousel-wrap/-prev/-next interaction as the Cinema/Legacy
   Timeline carousels. ---------- */
.show-slider__wrap {
	position: relative;
	margin-top: var(--space-4);
}

.show-slider__arrow {
	display: none;
	position: absolute;
	top: 40%;
	z-index: 3;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: rgba(5, 5, 5, 0.6);
	backdrop-filter: blur(6px);
	color: var(--color-text);
	transform: translateY(-50%);
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.show-slider__arrow--prev {
	left: var(--space-2);
}

.show-slider__arrow--next {
	right: var(--space-2);
}

.show-slider__arrow:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.show-slider__arrow[aria-disabled="true"] {
	pointer-events: none;
}

@media (min-width: 900px) {
	.show-slider__arrow {
		display: flex;
	}
}

.show-slider__track {
	display: flex;
	align-items: stretch;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: var(--space-4) var(--space-4) var(--space-6);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.show-slider__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.show-slider__track {
		padding-inline: var(--space-6);
	}
}

.show-card {
	position: relative;
	flex: 0 0 auto;
	width: min(340px, calc(100vw - 2 * var(--space-4)));
	scroll-snap-align: start;
	padding: var(--space-2);
	background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.04));
	border: 1px solid var(--color-gold);
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.08), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.show-card__tag {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	padding: 0.2em 0.7em;
	background: rgba(5, 5, 5, 0.7);
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-gold-light);
}

.show-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(var(--color-gold-rgb), 0.5);
	border-radius: 3px;
	transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}

.show-card__media .media-image,
.show-card__media .media-placeholder {
	width: 100%;
	height: 100%;
	transition: transform 900ms var(--ease);
}

.show-card:hover .show-card__media .media-image {
	transform: scale(1.06);
}

.show-card:hover .show-card__media {
	border-color: rgba(var(--color-gold-rgb), 0.4);
	box-shadow: 0 0 0 1px rgba(var(--color-gold-rgb), 0.25), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.show-card__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
}

.show-card__progress::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 35%;
	background: var(--color-gold);
}

.show-card__body {
	padding-top: var(--space-4);
}

.show-card__title {
	font-family: var(--font-accent);
	font-size: 1.0625rem;
	color: var(--color-text);
	margin-bottom: var(--space-1);
}

.show-card__meta {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.show-card__film {
	margin-top: var(--space-2);
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text);
}

.show-card__details {
	margin-top: var(--space-1);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gold-light);
}

/* Chapter media layout — Table (Title/Genre/Role filmography). Fourth
   "Media Layout" option alongside Image Gallery/Cinematic Movie
   Slider/TV & Shows Slider — see template-parts/film-television-page/
   media-table.php. Follows the sitewide .impact-table/.snapshot-table
   table design (thin border-top, no filled header band, gold-accent
   value column) rather than a distinct style of its own. */
.filmography-table__wrap {
	overflow-x: auto;
	margin-top: var(--space-8);
}

.filmography-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 72rem;
	margin-inline: auto;
	border-top: 1px solid var(--color-border-strong);
}

.filmography-table th,
.filmography-table td {
	text-align: left;
	padding: var(--space-5) var(--space-2);
	border-bottom: 1px solid var(--color-border);
	vertical-align: baseline;
}

.filmography-table thead th {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-gold);
	background: rgba(var(--color-gold-rgb), 0.12);
	border-bottom: 1px solid var(--color-border-strong);
}

.filmography-table tbody td {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text-muted);
}

.filmography-table tbody td:first-child {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-gold-light);
}

.filmography-table tbody tr:hover {
	background: rgba(var(--color-gold-rgb), 0.04);
}

/* Awards & Recognition's Table layout reuses .filmography-table verbatim
   but has 6 columns (S.No / Award / Year / Presented By / Location /
   Purpose) instead of 3 — the gold-accent "name" treatment belongs on the
   Award column (2nd), not S.No (1st), so this modifier moves it over
   without touching the base 3-column rules Film & Television uses. */
.filmography-table--6col tbody td:first-child {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text-muted);
}

.filmography-table--6col tbody td:nth-child(2) {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-gold-light);
}

/* Film & Television Closing CTA's own button-row class — same
   flex/spacing as .legacy-timeline__cta, kept as a separate rule since
   Closing CTA isn't part of the Legacy Timeline functionality. */
.film-television-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-12);
}

/* ---------- Entrepreneurial Journey — Closing Section: a smaller,
   wider, more editorial treatment than the sitewide .section-heading
   default (which runs up to 4.5rem at a narrow 760px) — scoped to this
   section only via descendant selectors so no other page's headings are
   affected. ---------- */
.entrepreneurial-journey-closing .section-heading {
	max-width: var(--container-max);
}

.entrepreneurial-journey-closing .section-heading::before {
	content: '';
	display: block;
	width: 64px;
	height: 2px;
	background: var(--color-gold);
	margin: 0 auto var(--space-6);
}

.entrepreneurial-journey-closing .section-title {
	font-family: var(--font-accent);
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
}

.entrepreneurial-journey-closing .section-intro {
	max-width: none;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.85;
	margin-top: var(--space-6);
}

.entrepreneurial-journey-closing__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-8);
}

/* ---------- 25. Blog page hero — deliberately distinct "personal
   journal" treatment, its own classes, shares nothing with .film-hero
   (see template-parts/blog-page/hero.php) ---------- */
.blog-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 8vw, 6rem);
	background: var(--color-surface);
	overflow: hidden;
}

/* Optional banner image/video (Banner Media field) — sits behind the
   ruled-notebook texture and content, full-bleed like every other page
   hero. Renders nothing when no media is set, so the page looks exactly
   as before until the client opts in. */
.blog-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.blog-hero__media .media-image,
.blog-hero__media .media-placeholder {
	width: 100%;
	height: 100%;
}

.blog-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.18) 55%, var(--color-surface) 100%);
}

/* Faint ruled-notebook lines across the whole hero — sits above the
   optional banner media (still legible as a texture over a photo) and
   below the content. */
.blog-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent,
		transparent 41px,
		var(--color-border) 42px
	);
	pointer-events: none;
}

.blog-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 5vw, 3rem);
	text-align: center;
}

.blog-hero__eyebrow {
	display: inline-flex;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--box-gold);
	margin-bottom: var(--space-4);
}

@media (max-width: 480px) {
	.blog-hero__eyebrow {
		letter-spacing: 0.15em;
	}
}

.blog-hero__headline {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 500;
	font-size: 3rem;
	line-height: 1.25;
	color: var(--box-text);
}

/* Widened (well past the usual ~75ch readability guideline) purely so
   this section's full copy comes closer to wrapping into 3 lines on
   typical desktop widths — nothing here is clamped/truncated, the
   complete text always renders, it just wraps sooner or later depending
   on viewport width. */
.blog-hero__sub {
	/* Tight step off the headline — no hairline divider, no padding
	   (same as the homepage hero's .hero__subtitle). */
	margin-top: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
	padding-top: 0;
	margin-inline: auto;
	max-width: 100ch;
	border-top: none;
}

.blog-hero__sub p {
	color: var(--box-text-muted);
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem);
	line-height: 1.65;
	text-align: left;
}

.blog-hero__sub p + p {
	margin-top: var(--space-4);
}

/* The pulled quote — same left-accent strip design as the other hero
   families' quotes (.about-hero__quote/.film-hero__quote/.gallery-hero__quote):
   a gold border-left, soft gold-tinted gradient background, faded giant
   quote mark, left-aligned text, centered as a block within the hero. */
.blog-hero__quote {
	position: relative;
	margin-top: var(--space-6);
	margin-inline: auto;
	padding: var(--space-4) var(--space-5);
	max-width: 52ch;
	background: linear-gradient(135deg, rgba(var(--box-gold-rgb), 0.07), rgba(255, 255, 255, 0.35));
	border-left: 2px solid var(--box-gold);
	text-align: left;
}

.blog-hero__quote::before {
	content: '\201C';
	position: absolute;
	top: -0.3em;
	left: var(--space-4);
	font-family: var(--font-accent);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--box-gold);
	opacity: 0.5;
}

.blog-hero__quote p {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(0.9rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
	color: var(--box-text);
	margin-bottom: var(--space-2);
}

.blog-hero__quote cite {
	display: block;
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--box-gold);
}

.blog-hero__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-6);
}

@media (min-width: 1024px) {
	/* Content Alignment (dashboard-configurable) — same half-width, desktop-
	   only pattern as the other hero components, but this hero is centered
	   by design (the "None" choice), so its children's own centering
	   (margin-inline: auto, justify-content: center) needs overriding too
	   when Left/Right is set instead. */
	.blog-hero__inner.blog-hero__inner--align-left,
	.blog-hero__inner.blog-hero__inner--align-right {
		max-width: 45%;
		text-align: left;
	}

	.blog-hero__inner.blog-hero__inner--align-left {
		margin-inline: clamp(1.5rem, 4vw, 3.5rem) auto;
	}

	.blog-hero__inner.blog-hero__inner--align-right {
		margin-inline: auto clamp(1.5rem, 4vw, 3.5rem);
	}

	.blog-hero__inner.blog-hero__inner--align-left .blog-hero__sub,
	.blog-hero__inner.blog-hero__inner--align-right .blog-hero__sub,
	.blog-hero__inner.blog-hero__inner--align-left .blog-hero__quote,
	.blog-hero__inner.blog-hero__inner--align-right .blog-hero__quote {
		margin-inline: 0;
	}

	.blog-hero__inner.blog-hero__inner--align-left .blog-hero__actions,
	.blog-hero__inner.blog-hero__inner--align-right .blog-hero__actions {
		justify-content: flex-start;
	}
}

/* Center alignment (no glass card, see .blog-hero__inner.blog-hero__inner--align-left/
   --align-right above for the boxed look) — no dark scrim needed since the
   photo itself doesn't need darkening for legibility, and explicit
   gold/white colors instead of the --box-* tokens (which are black,
   meant to sit on the light glass card) so text reads against the photo
   directly. */
.blog-hero--align-center .blog-hero__scrim {
	display: none;
}

.blog-hero__inner--align-center .blog-hero__eyebrow {
	color: #ffffff;
}

.blog-hero__inner--align-center .blog-hero__headline {
	color: var(--color-gold);
}

.blog-hero__inner--align-center .blog-hero__sub {
	border-top-color: rgba(var(--color-gold-rgb), 0.35);
}

.blog-hero__inner--align-center .blog-hero__sub p {
	color: rgba(255, 255, 255, 0.85);
}

.blog-hero__inner--align-center .blog-hero__quote {
	background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.12), rgba(var(--color-gold-rgb), 0.02));
	border-left-color: var(--color-gold);
}

.blog-hero__inner--align-center .blog-hero__quote::before {
	color: var(--color-gold);
}

.blog-hero__inner--align-center .blog-hero__quote p {
	color: var(--color-gold-light);
}

.blog-hero__inner--align-center .blog-hero__quote cite {
	color: var(--color-gold);
}

/* ---------- 26. Blog listing page ---------- */
.blog-listing .section-heading {
	margin-inline: 0;
	margin-bottom: var(--space-5);
	text-align: left;
}

/* Category filter tabs — a horizontally scrollable row on narrow screens
   (same overflow-x/no-visible-scrollbar treatment .masonry's mobile
   slider uses) so eight-plus tabs never wrap awkwardly on a phone. */
.blog-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-3);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-1);
}

.blog-tabs::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.blog-tabs {
		flex-wrap: wrap;
	}
}

.blog-tabs__item {
	flex: 0 0 auto;
	padding: 0.65em 1.4em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: border-color 250ms var(--ease), color 250ms var(--ease), background 250ms var(--ease);
	white-space: nowrap;
}

.blog-tabs__item:hover {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.blog-tabs__item.is-active {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 640px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-10) var(--space-6);
	}
}

.blog-card {
	transition: transform 350ms var(--ease);
}

.blog-card:hover {
	transform: translateY(-6px);
}

.blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.blog-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
	transition: border-color 350ms var(--ease), box-shadow 350ms var(--ease);
}

.blog-card:hover .blog-card__media {
	border-color: rgba(var(--color-gold-rgb), 0.4);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
}

/* Category badge, overlaid on the image itself rather than as plain text
   in the body — keeps the meta line below to just the date. */
.blog-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	padding: 0.4em 0.95em;
	background: rgba(5, 5, 5, 0.7);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold-light);
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: var(--space-5);
}

.blog-card__date {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.blog-card__title {
	margin-top: var(--space-3);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--color-text);
	transition: color 250ms var(--ease);
}

.blog-card:hover .blog-card__title {
	color: var(--color-gold-light);
}

.blog-card__excerpt {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pinned to the bottom of the card body (flex + margin-top: auto) so
   "Read More" lines up across a row even when excerpts clamp to a
   different number of visual lines. */
.blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	transition: color 250ms var(--ease), gap 250ms var(--ease);
}

.blog-card:hover .blog-card__more {
	color: var(--color-gold);
	gap: var(--space-3);
}

.blog-empty {
	color: var(--color-text-muted);
	padding-block: var(--space-10);
}

/* Wraps the results grid so the "Loading…" text below can center itself
   over it while a category-tab/pagination AJAX request is in flight —
   see the "Blog category filter" block in assets/js/main.js. */
.blog-results-wrap {
	position: relative;
}

/* A soft dark tint over the whole results area while loading, on top of
   the dimmed grid beneath it. */
.blog-results-wrap:has(.blog-results.is-loading)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 5, 0.4);
	z-index: 1;
	pointer-events: none;
}

.blog-results.is-loading {
	opacity: 0.4;
	transition: opacity 200ms var(--ease);
	pointer-events: none;
}

.blog-loading {
	position: absolute;
	top: var(--space-12);
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
	z-index: 2;
}

.blog-pagination {
	margin-top: var(--space-12);
}

.blog-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	list-style: none;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	transition: border-color 250ms var(--ease), color 250ms var(--ease);
}

.blog-pagination a.page-numbers:hover {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.blog-pagination .page-numbers.current {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0d0a03;
}

.blog-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--color-text-dim);
}

/* ---------- 28. Biography page — reuses page.php's own .page-content__*
   for the title/body, just with more top clearance (this page has no
   hero pushing content down like every other page does) and a rule
   under the title ---------- */
.biography-page-content {
	padding-top: clamp(9rem, 15vw, 12rem);
}

.biography-page-content .page-content__header {
	margin-bottom: var(--space-8);
}

/* inline-block so the rule below sits only as wide as the title text
   itself, not the full header width. */
.biography-page-content .page-content__title {
	display: inline-block;
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--color-gold);
}

/* Full-width body text — page.php's own .page-content__body caps at 70ch
   for readability, but this page's copy should fill the block. */
.biography-page-content .page-content__body {
	max-width: none;
}

/* ---------- 29. Single blog post (single.php) — image, then a category
   (left) / date (right) meta row, then title, then the full post body.
   Everything sits in one 800px centered column. ---------- */
.single-post__inner {
	max-width: 800px;
	margin-inline: auto;
	padding: clamp(9rem, 15vw, 12rem) var(--space-4) var(--space-16);
}

@media (min-width: 768px) {
	.single-post__inner {
		padding-inline: var(--space-6);
	}
}

.single-post__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	transition: color 250ms var(--ease), gap 250ms var(--ease);
}

.single-post__back:hover {
	color: var(--color-gold);
	gap: var(--space-3);
}

.single-post__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	margin-bottom: var(--space-6);
}

.single-post__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.single-post__category {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
}

.single-post__date {
	font-size: 0.8125rem;
	color: var(--color-text-dim);
}

.single-post__title {
	margin-top: var(--space-4);
	font-family: var(--font-heading);
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.2;
	color: var(--color-text);
}

.single-post__content {
	margin-top: 15px;
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.single-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* ---------- 29. Homepage mobile (0–767px) vertical rhythm ----------
   Flattens every section-to-section gap and every major internal block
   gap (eyebrow → title → subtitle → cards/gallery → CTA) on the
   homepage down to a single, consistent 15px, replacing the desktop-
   scaled --space-8/10/12 gaps below 768px only. Targets the shared
   base classes so it also reaches every section-specific block that
   relies on them (.hairline-grid, .gallery__view-all, etc. are reused
   by more than one homepage section). */
@media (max-width: 767px) {
	.section {
		padding-block: 15px;
	}

	.section-heading {
		margin-bottom: 15px;
	}

	.eyebrow {
		margin-bottom: 15px;
	}

	.section-intro {
		margin-top: 15px;
	}

	.recognition-strip .section-heading .section-intro {
		margin-top: 15px;
	}

	.recognition-strip__stats {
		margin-top: 15px;
	}

	.recognition-strip__press,
	.recognition-strip__footnote {
		margin-top: 15px;
	}

	.story__header {
		margin-bottom: 15px;
	}

	.hairline-grid {
		margin-top: 15px;
	}

	.leadership__quote {
		margin-top: 15px;
	}

	.leadership__cta,
	.gallery__view-all,
	.vision__cta {
		margin-top: 15px;
	}

	.bridge__gallery,
	.bridge__cta {
		margin-top: 15px;
	}

	.honors__header {
		gap: 15px;
	}

	.honors__gallery {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.honors__cta {
		margin-top: 15px;
	}

	.cinema__header {
		gap: 15px;
	}

	.cinema__carousel-wrap {
		margin-top: 15px;
	}

	.timeline__item {
		padding-bottom: 15px;
	}

	.contact__closing-wrap {
		padding-top: 15px;
	}

	/* Every other piece of homepage copy — normal or italic, excluding
	   titles/subtitles/eyebrows (already sized above) — reads at a
	   single 13px on mobile: card body text, meta labels, captions,
	   quotes, footnotes, and CTA/link labels. The recognition-strip
	   stat cards ("Recognised by Governments, Media and Institutions")
	   keep their original size — deliberately not in this list. */
	.story__text,
	.story__quote-overlay,
	.section-intro--quote,
	.contact__closing,
	.bridge-card__text,
	.gallery__item-caption,
	.award-card__text,
	.award-card__year,
	.film-card__role,
	.film-card__tagline,
	.film-card__year,
	.timeline__year,
	.timeline__text,
	.recognition-strip__footnote,
	.cinema__note,
	.leadership__link,
	.honors__link,
	.vision__link,
	.cinema__link,
	.bridge__cta-label,
	.timeline__link,
	.film-card__link,
	.gallery__view-all .btn {
		font-size: 13px;
	}
}

/* Hero CTA — fluid step off whatever precedes it, matching the homepage
   hero's .hero__actions. Unconditional + placed after every family's base
   rule so it wins the cascade tie by source order. */
.about-hero__cta,
.gallery-hero__cta,
.blog-hero__actions {
	margin-top: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}

/* ---------- Other page heroes — tablet + desktop (≥768px): the same
   client-specified fixed type sizes the homepage hero uses (eyebrow 11 /
   headline 32 / paragraph 15), extended to About / Gallery (+ Awards /
   Media & Press / Entrepreneurial Journey) / Film & Television (+ Cultural
   Ambassador / Global Impact / Contact) / Blog. Placed after every
   family's own base rule so it wins the cascade tie by source order
   (see [[main-css-source-order]]); the ≤767px sizes live in the block
   below. ---------- */
@media (min-width: 768px) {
	.about-hero__eyebrow,
	.gallery-hero__content .eyebrow,
	.film-hero__eyebrow,
	.blog-hero__eyebrow {
		font-size: 11px;
	}

	.about-hero__headline,
	.gallery-hero__headline,
	.film-hero__headline,
	.blog-hero__headline {
		font-size: 32px;
	}

	.about-hero__sub p,
	.gallery-hero__sub p,
	.film-hero__sub p,
	.blog-hero__sub p {
		font-size: 15px;
	}
}

/* ---------- Other page heroes — mobile (0–767px): same dark overlay
   card + faint image wash treatment as the homepage hero (see the
   .hero__content block near the top of this file),
   extended to About/Gallery(+Media & Press/Awards/Entrepreneurial
   Journey)/Film & Television(+Cultural Ambassador/Global Impact/Contact).
   Placed here, after every family's own base rule (background/scrim
   colour/etc. — .about-hero__media::after, .gallery-hero__scrim,
   .film-hero__scrim--bottom, .about-hero__content, .film-hero__content
   are all defined earlier in this file), so this block reliably wins the
   cascade instead of being silently overridden by source order. Blog's
   hero keeps its own separate design (centered, no card by default) —
   not covered here. ---------- */
@media (max-width: 767px) {
	.about-hero,
	.gallery-hero,
	.film-hero {
		min-height: 50svh;
	}

	/* Dark overlay card (identical to the homepage hero's mobile
	   .hero__content) — the dark, readable layer sits on the card, not
	   the whole photo. Contained + rounded, inset 14px from each screen
	   edge; width accounts for both margins so it can't overflow the
	   flex row. */
	.about-hero__content,
	.gallery-hero__content,
	.film-hero__content {
		--box-text: var(--color-text);
		--box-text-muted: var(--color-text-muted);
		--box-gold: var(--color-gold);
		--box-gold-light: var(--color-gold-light);
		--box-gold-rgb: var(--color-gold-rgb);
		--box-border-strong: var(--color-border-strong);
		--box-divider: var(--color-border);
		width: calc(100% - 28px);
		margin-inline: 14px;
		margin-bottom: 0.75rem;
		background: rgba(5, 5, 5, 0.58);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		border: none;
		border-radius: 0.6rem;
		box-shadow: none;
	}

	/* Image keeps only a faint wash now the card carries the dark layer.
	   Each family darkens through a different existing layer —
	   .about-hero__media::after is a pseudo-element on the image itself;
	   .gallery-hero__scrim / .film-hero__scrim--* are dedicated divs. */
	.about-hero__media::after {
		background: rgba(5, 5, 5, 0.12);
	}

	.gallery-hero__scrim {
		background: rgba(5, 5, 5, 0.12);
	}

	.film-hero__scrim--bottom {
		background: rgba(5, 5, 5, 0.12);
	}

	.film-hero__scrim--vignette {
		background: transparent;
	}

	/* Belt-and-braces for the Film & Television family's brighter, more
	   colour-saturated cinematic photos — a shadow directly on the text
	   keeps it legible even where a bright patch shows through the
	   semi-transparent card. */
	.film-hero__sub p,
	.film-hero__quote p,
	.film-hero__quote cite {
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
	}

	.film-hero__content .btn--ghost {
		background: transparent;
		color: var(--color-text);
		border-color: var(--color-border-strong);
	}

	.film-hero__content .btn--ghost:hover {
		background: transparent;
		border-color: var(--color-gold);
		color: var(--color-gold-light);
	}

	.about-hero__eyebrow,
	.gallery-hero__content .eyebrow,
	.film-hero__eyebrow {
		font-size: 10px;
		margin-bottom: 8px;
	}

	.about-hero__sub p,
	.gallery-hero__sub p,
	.film-hero__sub p {
		font-size: 13px;
	}

	.about-hero__quote,
	.gallery-hero__quote,
	.film-hero__quote {
		width: 100%;
		max-width: none;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-inline: 0;
	}

	/* Blog hero — same treatment as the other three families, extended
	   here per direct request ("wherever the same type of UI/content
	   exists, keep it consistent"). Blog's card only ever appears for the
	   Content Alignment = Left/Right choice (Center, the default, has no
	   card by design — nothing to change there); the height cap,
	   eyebrow/quote sizing, and sub/quote spacing apply regardless of
	   alignment since they aren't card-specific. */
	.blog-hero {
		min-height: 50svh;
	}

	.blog-hero__inner.blog-hero__inner--align-left,
	.blog-hero__inner.blog-hero__inner--align-right {
		--box-text: var(--color-text);
		--box-text-muted: var(--color-text-muted);
		--box-gold: var(--color-gold);
		--box-gold-light: var(--color-gold-light);
		--box-gold-rgb: var(--color-gold-rgb);
		--box-border-strong: var(--color-border-strong);
		--box-divider: var(--color-border);
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.blog-hero__scrim {
		background: rgba(5, 5, 5, 0.6);
	}

	.blog-hero__eyebrow {
		font-size: 10px;
		margin-bottom: 8px;
	}

	.blog-hero__sub p {
		font-size: 13px;
	}

	.blog-hero__quote {
		width: 100%;
		max-width: none;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-inline: 0;
	}
}

/* ---------- Big headings — mobile, guaranteed-last (0–767px) ----------
   These all share the same flat-3rem/no-mobile-scale pattern as
   .section-title (its own override lives near the top of this file,
   ~line 326, safely BEFORE its base rule at ~line 292) — but every
   selector below has its OWN base rule defined later in this file than
   that early block, so a same-specificity override placed there was
   silently losing the cascade tie by source order (see
   [[main-css-source-order]] — found 2026-08-26, this file had been
   serving these nine headings at their full 3rem on mobile the entire
   time despite the earlier "fix"). Placed here, after literally every
   other rule in this file, so nothing can out-order it again. */
@media (max-width: 767px) {
	.about-hero__headline,
	.chapter-block__title,
	.cta-band__heading,
	.gallery-hero__headline,
	.gallery-chapter__title,
	.film-hero__headline,
	.legacy__heading,
	.blog-hero__headline,
	.page-content__title {
		font-size: 1.6rem;
	}

	/* Hero card titles specifically (not chapter/CTA/legacy headings,
	   which keep their own base spacing) — the homepage hero's fixed
	   22px phone size, and flush against whatever sits above/below them
	   (no reserved gap). */
	.about-hero__headline,
	.gallery-hero__headline,
	.film-hero__headline,
	.blog-hero__headline {
		font-size: 22px;
	}

	.about-hero__headline,
	.gallery-hero__headline,
	.film-hero__headline {
		margin-bottom: 0;
	}
}

/* ---------- Hero CTA buttons — mobile, guaranteed-last (0–767px) ----------
   Full-width, stacked buttons with a consistent 15px gap. Homepage's own
   .hero__actions already had this pattern (see near the top of this
   file) — this covers the other families, whose base rules for these
   selectors are defined later in the file than an early override could
   safely reach (see [[main-css-source-order]]). */
@media (max-width: 767px) {
	.film-hero__actions {
		flex-direction: column;
		gap: 15px;
	}

	.film-hero__actions .btn {
		flex: 1 1 auto;
		width: 100%;
	}

	.blog-hero__actions .btn {
		width: 100%;
	}

	.about-hero__cta,
	.gallery-hero__cta {
		display: block;
		width: 100%;
	}
}

/* ---------- Contact page — mobile top clearance, guaranteed-last
   (0–767px) ---------- Contact's Page Hero can be toggled off (it
   currently is), which makes the Form section — normally a mid-page
   section with no special top clearance — the very first thing on the
   page, sitting directly under the fixed .site-header instead of below
   a hero. The existing unconditional `margin-top: 70px` on its title
   (line ~3384) wasn't enough once measured against the header's real
   mobile height (~117.5px, two-line logo + hamburger row) — the title
   rendered partly underneath it. Mirrors Biography's own solution to the
   same "no hero above this content" problem (its own generous
   `padding-top: clamp(9rem, 15vw, 12rem)`). */
@media (max-width: 767px) {
	.contact-page-form .section-title {
		/* Header is a touch shorter now its inner padding was trimmed to
		   10px top/bottom — 120px clears it with a small gap above the
		   title without the old 140px leaving a dead band. */
		margin-top: 120px;
	}
}