:root {
	/* ---- WAYPOWERED BRAND — retuned to her REAL logo (sampled 2026-07-16) ---- */
	--navy: #062984; /* logo royal blue */
	--navy-deep: #041b52; /* dark ground for bands */
	--navy-ink: #0a1f4e; /* headings on light */
	--teal: #03c5c3; /* logo turquoise — GRAPHICS on dark/large only */
	--teal-ink: #0b7c7b; /* teal for text/borders on light — 4.9:1 on white */
	--teal-band: #0e837f; /* statement band bg — white text 4.6:1 */
	--gold: #8f6420; /* gold for TEXT on light — 5.2:1 on white */
	--gold-bright: #fecd46; /* logo gold — graphics + buttons on dark */
	--sage: #92cda2; /* logo sage — graphics */
	--ink: #16233b; /* body text */
	--bg: #ffffff;
	--bg-2: #f0f6f1; /* sage-tinted surface */

	--muted: color-mix(in oklab, var(--ink) 68%, var(--bg));
	--line: color-mix(in oklab, var(--ink) 14%, var(--bg));
	--line-strong: color-mix(in oklab, var(--ink) 45%, var(--bg));
	--surface: color-mix(in oklab, var(--bg-2) 85%, var(--bg));

	--font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--font-body:
		"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--fs-display: clamp(2.9rem, 1.2rem + 6.4vw, 6rem);
	--fs-h2: clamp(1.7rem, 1rem + 2.8vw, 3rem);
	--fs-h3: clamp(1.1rem, 0.9rem + 1vw, 1.4rem);
	--fs-lead: clamp(1.05rem, 0.95rem + 0.55vw, 1.28rem);
	--measure: 66ch;

	--s1: 0.5rem;
	--s2: 1rem;
	--s3: 1.5rem;
	--s4: 2rem;
	--s6: 3rem;
	--s8: 4rem;
	--section: clamp(4rem, 2rem + 7vw, 8.5rem);
	--maxw: 1180px;

	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-pill: 100px;
	--shadow: 0 6px 24px color-mix(in oklab, var(--ink) 12%, transparent);
	--shadow-lg: 0 14px 40px color-mix(in oklab, var(--ink) 18%, transparent);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 0.3s;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}
body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.serif {
	font-family: var(--font-display);
}
a {
	color: inherit;
	text-decoration: none;
}
img,
svg {
	max-width: 100%;
	display: block;
}
:focus-visible {
	outline: 3px solid var(--teal-ink);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	padding: 0.7rem 1.2rem;
	border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
	left: 0;
}

.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
	position: relative;
}
.section {
	padding-block: var(--section);
}
.prose {
	max-width: var(--measure);
}

h1,
.h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-display);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
h2,
.h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--navy-ink);
}
h3,
.h3 {
	font-weight: 600;
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
}
.lead {
	font-size: var(--fs-lead);
	color: var(--muted);
	max-width: 54ch;
	text-wrap: pretty;
}
p {
	text-wrap: pretty;
}
.kicker {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.78rem 1.6rem;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur),
		background var(--dur);
}
.btn-primary {
	background: linear-gradient(135deg, var(--teal-ink), var(--navy));
	color: #fff;
	box-shadow: 0 6px 22px color-mix(in oklab, var(--navy) 32%, transparent);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px color-mix(in oklab, var(--navy) 45%, transparent);
}
.btn-gold {
	background: var(--gold-bright);
	color: #082050;
	box-shadow: 0 6px 22px rgba(3, 10, 40, 0.35);
}
.btn-gold:hover {
	transform: translateY(-2px);
	background: #ffd75e;
	box-shadow: 0 10px 30px rgba(3, 10, 40, 0.45);
}
.btn-ghost {
	border-color: var(--line);
	color: var(--ink);
}
.btn-ghost:hover {
	background: color-mix(in oklab, var(--ink) 7%, transparent);
	transform: translateY(-2px);
}
.btn-ghost-light {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.btn-ghost-light:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}
.btn:active {
	transform: translateY(0) scale(0.98);
}
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

/* ---- DARK/COLOR BANDS (Kindra rhythm) ---- */
.band-navy {
	background: linear-gradient(165deg, #03123a, var(--navy) 58%, #0b3ea8);
	color: #eff4fb;
	color-scheme: dark;
}
.band-navy h2,
.band-navy .h2 {
	color: #fff;
}
.band-navy .lead {
	color: rgba(236, 243, 252, 0.82);
}
.band-navy .kicker {
	color: var(--gold-bright);
}
.band-teal {
	background: linear-gradient(150deg, #0f918c, var(--teal-band) 60%, #0b6e76);
	color: #fff;
	color-scheme: dark;
}
.band-teal h2,
.band-teal .h2 {
	color: #fff;
}

/* ---- NAV (light glass w/ REAL logo) ---- */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: color-mix(in oklab, var(--bg) 82%, transparent);
	border-bottom: 1px solid var(--line);
}
.nav-inner {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding-block: 0.55rem;
}
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.42rem;
	letter-spacing: -0.01em;
	color: var(--navy);
}
.logo img {
	height: 54px;
	width: auto;
	flex: none;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin-left: auto;
	font-size: 0.95rem;
	font-weight: 500;
}
.nav-links a {
	color: var(--muted);
	transition: color 0.2s;
}
.nav-links a:hover {
	color: var(--ink);
}
.nav .btn {
	padding: 0.55rem 1.15rem;
	font-size: 0.85rem;
}
/* .nav-links a outranks .btn-primary — force the CTA white, and give it a soft glow */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover {
	color: #fff;
}
@keyframes wp-glow {
	0%,
	100% {
		box-shadow:
			0 0 12px rgba(3, 197, 195, 0.4),
			0 6px 22px color-mix(in oklab, var(--navy) 32%, transparent);
	}
	50% {
		box-shadow:
			0 0 24px rgba(3, 197, 195, 0.75),
			0 6px 22px color-mix(in oklab, var(--navy) 32%, transparent);
	}
}
.nav .btn-primary {
	animation: wp-glow 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.nav .btn-primary {
		animation: none;
		box-shadow: 0 0 16px rgba(3, 197, 195, 0.55);
	}
}
/* CSS-only mobile menu (artifact viewer may not run JS) — checkbox stays focusable for keyboard/AT */
.menu-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}
.menu-toggle:focus-visible + .menu-btn {
	outline: 3px solid var(--teal-ink);
	outline-offset: 2px;
}
.menu-btn {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 0.5rem 0.65rem;
	cursor: pointer;
	color: var(--ink);
	transition: background var(--dur);
}
.menu-btn:hover {
	background: color-mix(in oklab, var(--ink) 6%, transparent);
}
@media (max-width: 880px) {
	.nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		padding: 0.5rem clamp(20px, 5vw, 40px) 1.2rem;
	}
	.menu-toggle:checked ~ .nav-links {
		display: flex;
	}
	.nav-links a:not(.btn) {
		padding: 0.8rem 0;
		width: 100%;
		border-bottom: 1px solid var(--line);
	}
	.nav-links .btn {
		margin-top: 1rem;
		width: auto;
	}
	.menu-btn {
		display: inline-flex;
	}
}

/* ---- HERO — full-bleed photo (Kindra pattern) ---- */
.hero {
	position: relative;
	overflow: clip;
	background: linear-gradient(
		160deg,
		#03123a 0%,
		var(--navy) 52%,
		#0b3ea8 100%
	);
	color: #fff;
	color-scheme: dark;
}
.hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	min-height: min(88vh, 820px);
	padding-block: clamp(4rem, 8vh, 6rem);
}
.hero-photo {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: min(79.4%, 1161px);
	z-index: 1;
	pointer-events: none;
}
.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
}
.hero-photo::before,
.hero-photo::after {
	display: none;
}
.hero-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.hero-glow::before {
	content: "";
	position: absolute;
	width: 700px;
	height: 700px;
	left: -220px;
	top: -260px;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.5;
	background: radial-gradient(
		circle at 40% 40%,
		rgba(3, 197, 195, 0.4),
		transparent 70%
	);
}
.hero-glow::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	left: 30%;
	bottom: -300px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.4;
	background: radial-gradient(
		circle at 50% 40%,
		rgba(254, 205, 70, 0.4),
		transparent 70%
	);
}
.hero h1 {
	color: #fff;
	margin: 0.9rem 0 0;
}
.hero h1 .gold {
	color: var(--gold-bright);
}
.hero-copy {
	max-width: 52ch;
}
.hero-copy p {
	font-size: var(--fs-lead);
	color: rgba(236, 243, 252, 0.88);
	margin-top: 1.4rem;
	max-width: 44ch;
}
.hero .actions {
	margin-top: 1.6rem;
}
.hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-pill);
	padding: 0.4rem 0.95rem;
	background: rgba(255, 255, 255, 0.08);
}
.hero .eyebrow .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-bright), var(--teal));
	flex: none;
}
/* ---- HERO RESPONSIVE ---- */
/* Desktop (>1000): the approved feathered image (photo + baked left feather), her at original scale, right-anchored. */
@media (max-width: 1180px) {
	.hero-copy {
		max-width: 46ch;
	}
}
/* Tablet + phone: NO feather image. Plain clean photo, stacked under the copy, bottom flush on the teal band. */
@media (max-width: 1000px) {
	.hero {
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
	}
	.hero-glow {
		order: 0;
	}
	.hero-inner {
		order: 1;
		grid-template-columns: 1fr;
		min-height: 0;
		padding-block: clamp(2.5rem, 6vh, 4rem) 0;
		width: 100%;
	}
	.hero-copy {
		max-width: 60ch;
		position: relative;
		z-index: 3;
	}
	.hero-photo {
		order: 2;
		position: relative;
		width: min(72%, 540px);
		height: auto;
		top: auto;
		bottom: auto;
		right: auto;
		margin: 1.25rem 0 0 auto;
		aspect-ratio: 1 / 1;
		display: block;
		align-self: flex-end;
		padding-right: clamp(20px, 5vw, 40px);
	}
	.hero-photo img {
		content: url("assets/yira-headshot-clean.jpg");
		object-fit: cover;
		object-position: top center;
		border-radius: 18px 18px 0 0;
	}
	.hero-spacer {
		display: none;
	}
}
@media (max-width: 700px) {
	.hero-inner {
		gap: 0.75rem;
	}
	.hero-copy {
		max-width: none;
		padding-top: 1.5rem;
	}
	.hero-photo {
		width: min(88%, 420px);
		margin: 0.75rem auto 0;
		align-self: center;
		padding-right: 0;
	}
}

/* ---- STATEMENT BAND (Kindra teal band) ---- */
.statement {
	text-align: center;
}
.statement blockquote {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 1rem + 2.7vw, 2.8rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	max-width: 30ch;
	margin-inline: auto;
	text-wrap: balance;
}
.statement em {
	font-style: italic;
	color: var(--gold-bright);
}
.statement .actions {
	margin-top: 2rem;
	justify-content: center;
}

/* ---- STATS CARD (keynote section) ---- */
.stats-card {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	padding: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
	box-shadow: var(--shadow);
}
@media (max-width: 560px) {
	.stats-card {
		grid-template-columns: 1fr;
	}
}
.stat b {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--navy);
}
.stat span {
	font-size: 0.85rem;
	color: var(--muted);
}

/* ---- SPLITS ---- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.about-split .career {
	order: 2;
}
@media (max-width: 880px) {
	.about-split .career {
		order: 0;
	}
}
@media (max-width: 880px) {
	.split {
		grid-template-columns: 1fr;
	}
}
.split .check {
	list-style: none;
	display: grid;
	gap: 0.85rem;
	margin-top: 1.6rem;
}
.split .check li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
}
.split .check li svg {
	width: 20px;
	height: 20px;
	stroke: var(--teal-ink);
	fill: none;
	stroke-width: 2;
	flex: none;
	margin-top: 0.2rem;
}
.split .check b {
	display: block;
}
.split .check li span span {
	color: var(--muted);
	font-size: 0.95rem;
}
.equation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.8rem;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem);
	font-weight: 600;
}
.equation .term {
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: var(--r-md);
	padding: 0.5rem 1rem;
}
.equation .op {
	color: var(--gold);
	font-size: 1.3em;
}
.science-panel {
	position: relative;
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	background:
		radial-gradient(
			120% 120% at 80% 10%,
			color-mix(in oklab, var(--teal) 12%, transparent),
			transparent 55%
		),
		radial-gradient(
			120% 120% at 10% 90%,
			color-mix(in oklab, var(--gold-bright) 14%, transparent),
			transparent 55%
		),
		var(--surface);
	padding: 2.2rem;
	display: grid;
	gap: 1rem;
}
.science-panel .node {
	border: 1px solid var(--line);
	background: var(--bg);
	border-radius: var(--r-md);
	padding: 1.1rem 1.3rem;
	box-shadow: var(--shadow);
}
.science-panel .node b {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 1rem;
}
.science-panel .node b i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-bright), var(--teal));
	flex: none;
	font-style: normal;
}
.science-panel .node span {
	color: var(--muted);
	font-size: 0.95rem;
}
.science-panel .src {
	font-size: 0.78rem;
	color: var(--muted);
	text-align: right;
	letter-spacing: 0.04em;
}

/* ---- VIDEO BAND (Kindra full-bleed video section) ---- */
.video-band {
	text-align: center;
}
.video-slot {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 860px;
	margin: 3rem auto 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: #04173f;
	box-shadow: var(--shadow-lg);
}
.video-slot video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #04173f;
}
.video-slot:hover .play {
	transform: scale(1.06);
	background: rgba(255, 255, 255, 0.2);
}

/* ---- FEATURES / ROUTES ---- */
.features {
	display: grid;
	gap: var(--s4);
	grid-template-columns: repeat(3, 1fr);
	margin-top: 3rem;
}
@media (max-width: 880px) {
	.features {
		grid-template-columns: 1fr;
	}
}
.feature {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.9rem;
	background: var(--bg);
	transition:
		transform 0.35s var(--ease),
		border-color 0.35s;
}
.feature:hover {
	transform: translateY(-6px);
	border-color: color-mix(in oklab, var(--teal-ink) 40%, var(--line));
}
.feature .ico {
	width: 48px;
	height: 48px;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	margin-bottom: 1.1rem;
	background: linear-gradient(
		135deg,
		color-mix(in oklab, var(--gold-bright) 24%, transparent),
		color-mix(in oklab, var(--teal) 16%, transparent)
	);
	border: 1px solid var(--line);
}
.feature .ico svg {
	width: 24px;
	height: 24px;
	stroke: var(--navy);
	fill: none;
	stroke-width: 1.7;
}
.feature h3 {
	margin-bottom: 0.45rem;
}
.feature p {
	color: var(--muted);
}
.route {
	display: flex;
	flex-direction: column;
}
.route .go {
	margin-top: auto;
	padding-top: 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.route .go::after {
	content: "→";
	transition: transform 0.25s var(--ease);
}
.route:hover .go::after {
	transform: translateX(4px);
}

/* ---- PROGRAMS ---- */
.programs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s3);
	margin-top: 3rem;
}
@media (max-width: 880px) {
	.programs {
		grid-template-columns: 1fr;
	}
}
.program {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.35s var(--ease),
		border-color 0.35s;
}
.program:hover {
	transform: translateY(-6px);
	border-color: color-mix(in oklab, var(--teal-ink) 40%, var(--line));
}
.program .head {
	padding: 1.6rem 1.8rem 1.2rem;
	color: #fff;
	background: linear-gradient(150deg, #0a2f73, #0e837f);
}
.program:nth-child(2) .head {
	background: linear-gradient(150deg, var(--navy), #0a2f73);
}
.program .head .tag {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-bright);
}
.program .head h3 {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	margin-top: 0.4rem;
	letter-spacing: -0.015em;
}
.program .body {
	padding: 1.5rem 1.8rem 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	flex: 1;
}
.program .body p {
	color: var(--muted);
	font-size: 0.95rem;
}
.program ul {
	list-style: none;
	display: grid;
	gap: 0.55rem;
}
.program li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.95rem;
	color: var(--muted);
}
.program li::before {
	content: "✓";
	content: "✓" / "";
	color: var(--teal-ink);
	font-weight: 700;
	flex: none;
}
.program .meta {
	margin-top: auto;
	padding-top: 0.8rem;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}

/* ---- SERVICE CARDS ---- */
.pricing {
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	margin-top: 3rem;
}
@media (max-width: 880px) {
	.pricing {
		grid-template-columns: 1fr;
		max-width: 440px;
		margin-inline: auto;
	}
}
.price-card {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 2rem;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}
.price-card.featured {
	border-color: var(--teal-ink);
	box-shadow: var(--shadow-lg);
	transform: scale(1.03);
}
@media (max-width: 880px) {
	.price-card.featured {
		transform: none;
	}
}
.price-card .badge {
	position: absolute;
	top: -12px;
	left: 2rem;
	background: linear-gradient(135deg, var(--teal-ink), var(--navy));
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3rem 0.8rem;
	border-radius: var(--r-pill);
}
.price-card .plan {
	font-weight: 600;
	font-size: 1.1rem;
}
.price-card .fmt {
	font-size: 0.95rem;
	color: var(--muted);
	font-weight: 500;
}
.price-card ul {
	list-style: none;
	display: grid;
	gap: 0.7rem;
	margin: 0.4rem 0;
}
.price-card li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	color: var(--muted);
	font-size: 0.95rem;
}
.price-card li::before {
	content: "✓";
	content: "✓" / "";
	color: var(--teal-ink);
	font-weight: 700;
	flex: none;
}
.price-card .btn {
	margin-top: auto;
	justify-content: center;
}
.fees-note {
	margin-top: 1.6rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--muted);
}

/* ---- BOOKS (Kindra books section — two-title shelf) ---- */
.bookshelf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	margin-top: 3.4rem;
	align-items: start;
}
@media (max-width: 880px) {
	.bookshelf {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-inline: auto;
	}
}
.book {
	text-align: center;
}
.book-cover {
	aspect-ratio: 5 / 6.6;
	max-width: 320px;
	margin-inline: auto;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			130% 100% at 80% 0%,
			rgba(3, 197, 195, 0.35),
			transparent 55%
		),
		linear-gradient(165deg, #083077, var(--navy) 60%, #04173f);
	box-shadow: 0 24px 60px rgba(4, 15, 50, 0.45);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
	color: #fff;
	text-align: left;
	transition: transform 0.35s var(--ease);
}
.book:hover .book-cover {
	transform: translateY(-6px);
}
/* ---- BOOK COVERS — flat and square (Shawn 8/27); store-style soft shadow only ---- */
.book-cover.cover-3d {
	padding: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	aspect-ratio: auto;
	position: relative;
}
.cover-3d .b3 {
	position: relative;
	width: 86%;
	margin-inline: auto;
	aspect-ratio: 2 / 3;
	transition: transform 0.35s var(--ease);
}
.book:hover .cover-3d .b3 {
	transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
	.cover-3d .b3 {
		transition: none;
	}
}
.b3-front {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
	box-shadow:
		0 10px 28px rgba(4, 15, 50, 0.35),
		0 2px 6px rgba(4, 15, 50, 0.25);
}
.b3-hinge,
.b3-sheen,
.b3-back,
.b3-spine,
.b3-pages {
	display: none;
}
.cover-3d::after {
	content: none;
}
.book-cover.cover-teal {
	background:
		radial-gradient(
			130% 100% at 80% 0%,
			rgba(254, 205, 70, 0.28),
			transparent 55%
		),
		linear-gradient(165deg, #0e837f, #0b6e76 55%, #083d4e);
}
.book-cover.cover-teal .bk-kicker {
	color: #fff;
}
.book-cover .bk-kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-bright);
}
.book-cover .bk-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-top: 0.8rem;
}
.book-cover .bk-author {
	font-size: 0.85rem;
	color: rgba(236, 243, 252, 0.85);
	letter-spacing: 0.04em;
}
.book-cover .bk-mark {
	position: absolute;
	right: 1.4rem;
	top: 1.6rem;
	width: 44px;
	height: 44px;
	opacity: 0.9;
}
.book-cover .bk-note {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 0.5rem;
	text-align: center;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(2, 8, 30, 0.45);
}
.book .bd {
	margin-top: 1.5rem;
	max-width: 44ch;
	margin-inline: auto;
}
.book .bd b {
	display: block;
	font-size: 1.05rem;
}
.book .bd .sub {
	display: block;
	font-style: italic;
	color: var(--muted);
	font-size: 0.92rem;
	margin-top: 0.15rem;
}
.book .bd p {
	color: var(--muted);
	font-size: 0.92rem;
	margin-top: 0.6rem;
}
.book .bd .go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.8rem;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-ink);
}
.book .bd .go::after {
	content: "→";
}
.pubs-slim {
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	text-align: center;
	font-size: 0.9rem;
	color: var(--muted);
}

/* ---- ABOUT / TIMELINE ---- */
.career {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 2rem 2.2rem;
	background: var(--bg);
	box-shadow: var(--shadow);
}
.career .kicker {
	display: block;
	margin-bottom: 1.3rem;
}
.tl {
	list-style: none;
	display: grid;
	gap: 1.05rem;
	position: relative;
	padding-left: 1.8rem;
	margin: 0;
}
.tl::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	border-radius: 1px;
	background: linear-gradient(var(--teal), var(--gold-bright));
}
.tl li {
	position: relative;
}
.tl li::before {
	content: "";
	position: absolute;
	left: -1.8rem;
	top: 0.42em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 3px solid var(--teal-ink);
}
.tl li:last-child::before {
	border-color: var(--gold-bright);
	background: var(--gold-bright);
}
.tl b {
	font-family: var(--font-display);
	font-size: 1.02rem;
	margin-right: 0.5rem;
}
.tl span {
	color: var(--muted);
	font-size: 0.95rem;
}

/* ---- QUOTE BAND (Kindra testimonial band) ---- */
.signature {
	text-align: center;
}
.signature blockquote {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 1rem + 2.6vw, 2.7rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
}
.signature .gold {
	color: var(--gold-bright);
}
.signature cite {
	display: block;
	margin-top: 1.4rem;
	font-style: normal;
	font-size: 0.9rem;
	color: rgba(236, 243, 252, 0.72);
	letter-spacing: 0.06em;
}

/* ---- CLIENT WALL (Kindra "Past Clients") ---- */
.clients {
	text-align: center;
}
.clients .wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.2rem 3rem;
	margin-top: 2.4rem;
	max-width: 900px;
	margin-inline: auto;
}
.clients .wall span {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.clients .note {
	margin-top: 1.6rem;
	font-size: 0.78rem;
	color: var(--muted);
	letter-spacing: 0.04em;
}
.connect {
	margin-top: 2.6rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}
.connect .kicker {
	display: block;
	margin-bottom: 1rem;
}
.connect-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.connect-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--ink);
	transition:
		border-color 0.2s,
		transform 0.2s;
}
.connect-links a:hover {
	border-color: var(--teal);
	transform: translateY(-2px);
}

.stats-inline {
	margin-top: 2.2rem;
	margin-bottom: 0.4rem;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 880px) {
	.stats-inline {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- LEAD CAPTURE BAND (Kindra newsletter band) ---- */
.capture {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (max-width: 880px) {
	.capture {
		grid-template-columns: 1fr;
	}
}
.capture .mini-form {
	display: grid;
	gap: 0.9rem;
}
.capture .mini-form input {
	font: inherit;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.capture .mini-form input::placeholder {
	color: rgba(236, 243, 252, 0.6);
}
.capture .mini-form input:focus {
	border-color: var(--gold-bright);
	box-shadow: 0 0 0 3px rgba(254, 205, 70, 0.25);
	outline: none;
}
.capture .note {
	font-size: 0.85rem;
	color: rgba(236, 243, 252, 0.7);
	margin-top: 0.4rem;
}

/* ---- FAQ ---- */
.faq {
	max-width: 760px;
	margin: 3rem auto 0;
	display: grid;
	gap: 0.6rem;
}
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	overflow: hidden;
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.3rem;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	transition: background var(--dur);
}
.faq-item summary:hover {
	background: color-mix(in oklab, var(--ink) 4%, transparent);
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "+";
	content: "+" / "";
	font-size: 1.4rem;
	color: var(--teal-ink);
	transition: transform 0.25s var(--ease);
	flex: none;
}
.faq-item[open] summary::after {
	transform: rotate(45deg);
}
.faq-item summary:focus-visible {
	outline: 3px solid var(--teal-ink);
	outline-offset: -3px;
}
.faq-item .answer {
	padding: 0 1.3rem 1.2rem;
	color: var(--muted);
}

/* ---- CONTACT ---- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 5rem);
	margin-top: 3rem;
}
@media (max-width: 880px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}
.form {
	display: grid;
	gap: 1.1rem;
}
.form .row {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
	.form .row {
		grid-template-columns: 1fr;
	}
}
.field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.field label {
	font-size: 0.85rem;
	font-weight: 600;
}
.field input,
.field textarea,
.field select {
	font: inherit;
	font-size: 1rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.field textarea {
	min-height: 130px;
	resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
	border-color: var(--teal-ink);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-ink) 22%, transparent);
}
.form .consent {
	font-size: 0.85rem;
	color: var(--muted);
}
.contact-info {
	display: grid;
	gap: 1.2rem;
	align-content: start;
}
.contact-info .card {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	padding: 1.3rem 1.5rem;
}
.contact-info .card b {
	display: block;
	margin-bottom: 0.2rem;
}
.contact-info .card span,
.contact-info .card a {
	color: var(--muted);
	font-size: 0.95rem;
}
.contact-info .card a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- FOOTER ---- */
footer {
	background: #03123a;
	color: rgba(236, 243, 252, 0.78);
	padding-block: 3rem;
	margin-top: var(--section);
	color-scheme: dark;
}
.foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem 2rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.85rem;
}
.foot .fl {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: #fff;
}
.foot .fl svg {
	width: 34px;
	height: 34px;
	flex: none;
}

/* ---- REVEAL (JS-gated so no-JS renders everything) ---- */
html.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.8s var(--ease),
		transform 0.8s var(--ease);
}
html.js .reveal.in {
	opacity: 1;
	transform: none;
}
html.js .reveal.d1 {
	transition-delay: 0.08s;
}
html.js .reveal.d2 {
	transition-delay: 0.16s;
}
html.js .reveal.d3 {
	transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
	html.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}
@media print {
	html.js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}
	.nav,
	.hero-glow,
	.menu-btn,
	.hero-photo {
		display: none;
	}
	.band-navy,
	.band-teal,
	.hero,
	footer {
		background: #fff !important;
		color: #000 !important;
	}
	:is(.band-navy, .band-teal, .hero, footer)
		:is(h1, h2, p, blockquote, cite, span, a, b, .lead, .kicker, em) {
		color: #000 !important;
	}
}

/* ============ MULTI-PAGE ADDITIONS (2026-09-08) ============ */
/* interior page header (small, not a full hero) */
.page-head {
	background: linear-gradient(160deg, #03123a, var(--navy) 60%, #0b3ea8);
	color: #fff;
	color-scheme: dark;
	padding-block: clamp(3rem, 4rem + 3vw, 5.5rem) clamp(2.5rem, 3rem + 2vw, 4rem);
}
.page-head .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-pill);
	padding: 0.4rem 0.95rem;
	background: rgba(255, 255, 255, 0.08);
}
.page-head .eyebrow .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-bright), var(--teal));
	flex: none;
}
.page-head h1 {
	color: #fff;
	margin: 1rem 0 0.6rem;
	font-size: clamp(2.4rem, 1.4rem +3.4vw, 4rem);
}
.page-head .lead {
	color: rgba(236, 243, 252, 0.85);
	max-width: 60ch;
}
.page-head .gold {
	color: var(--gold-bright);
}

/* active nav link */
.nav-links a[aria-current="page"] {
	color: var(--navy);
	font-weight: 700;
}
.nav-links a[aria-current="page"]::after {
	content: "";
	display: block;
	height: 2px;
	background: var(--teal);
	border-radius: 2px;
	margin-top: 2px;
}

/* engagement hub — Calendly-only, the single call to action */
.hub {
	text-align: center;
}
.hub .cal-card {
	max-width: 640px;
	margin: 2.6rem auto 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-lg);
	padding: clamp(2rem, 4vw, 3.2rem);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hub .cal-card .big {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1rem +2vw, 2.3rem);
	line-height: 1.15;
	color: #fff;
}
.hub .cal-card p {
	color: rgba(236, 243, 252, 0.82);
	margin: 0.8rem auto 1.8rem;
	max-width: 46ch;
}
.hub .cal-card .note {
	font-size: 0.85rem;
	color: rgba(236, 243, 252, 0.65);
	margin-top: 1.1rem;
}

/* preview trio on landing (condensed, links to Services) */
.previews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s3);
	margin-top: 3rem;
}
@media (max-width: 880px) {
	.previews {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-inline: auto;
	}
}
.prev {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg);
	padding: 1.9rem;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.35s var(--ease),
		border-color 0.35s;
}
.prev:hover {
	transform: translateY(-6px);
	border-color: color-mix(in oklab, var(--teal-ink) 40%, var(--line));
}
.prev .ico {
	width: 46px;
	height: 46px;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	margin-bottom: 1rem;
	background: linear-gradient(
		135deg,
		color-mix(in oklab, var(--gold-bright) 24%, transparent),
		color-mix(in oklab, var(--teal) 16%, transparent)
	);
	border: 1px solid var(--line);
}
.prev .ico svg {
	width: 24px;
	height: 24px;
	stroke: var(--navy);
	fill: none;
	stroke-width: 1.7;
}
.prev h3 {
	margin-bottom: 0.4rem;
}
.prev p {
	color: var(--muted);
	font-size: 0.95rem;
	flex: 1;
}
.prev .go {
	margin-top: 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.prev .go::after {
	content: "→";
	transition: transform 0.25s var(--ease);
}
.prev:hover .go::after {
	transform: translateX(4px);
}

/* portrait slot for the About page (real promo photo when it arrives) */
.portrait {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
	aspect-ratio: 3 / 2;
	max-width: 420px;
}
.portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.portrait.placeholder {
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--muted);
	padding: 2rem;
	font-size: 0.85rem;
}

/* footer sitemap menu */
.foot-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	justify-content: center;
	margin-top: 1.6rem;
	font-size: 0.9rem;
}
.foot-nav a {
	color: rgba(236, 243, 252, 0.8);
}
.foot-nav a:hover {
	color: #fff;
}
.foot-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	align-items: center;
	margin-top: 1.4rem;
}
.foot-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(236, 243, 252, 0.82);
	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}
.foot-social a svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.foot-social a img {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	display: block;
}
.foot-social a:hover {
	background: var(--gold-bright, #f6c243);
	color: #0a1c40;
	transform: translateY(-2px);
}
.foot-legal {
	text-align: center;
	margin-top: 1.6rem;
	font-size: 0.8rem;
	color: rgba(236, 243, 252, 0.6);
}
.foot .foot-col {
	width: 100%;
}

/* ---- ABOUT GALLERY ---- */
.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2.4rem;
}
.gphoto {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
/* all four tiles share one tall portrait height; the two center portraits fill it,
   the outer landscape shots crop to match (Shawn 2026-09-09) */
.gphoto img {
	width: 100%;
	height: clamp(300px, 26vw, 380px);
	object-fit: cover;
	display: block;
}
.gphoto:nth-child(2) img,
.gphoto:nth-child(3) img {
	object-position: center top;
}
@media (max-width: 760px) {
	.gallery {
		grid-template-columns: 1fr 1fr;
		gap: 0.7rem;
	}
	.gphoto img {
		height: 260px;
	}
}

/* ---- LOGO WALL (logo + name) ---- */
.clients .wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 1.4rem;
	margin-top: 2.4rem;
	max-width: 1000px;
}
.clients .wall .org {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg);
}
.clients .wall .org .mk {
	width: 30px;
	height: 30px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 6px;
	overflow: hidden;
}
.clients .wall .org .mk img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.clients .wall .org .mk.badge {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}
.clients .wall .org span.nm {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--navy-ink);
	white-space: nowrap;
}
.clients .wall .org .mk.badge {
	font-size: 0.72rem;
	line-height: 1;
}
.clients .wall .org .mk:not(.badge) {
	background: #fff;
	border: 1px solid var(--line);
}

/* ============ HERO v2 — full-bleed photo background (2026-09-09) ============ */
/* The new hero photo already carries its own blue->purple gradient, so the whole
   hero IS the image: no feather, no separate navy block, no seam. Left scrim keeps
   the headline legible over the open side. */
.hero.hero-bg {
	position: relative;
	overflow: clip;
	color: #fff;
	color-scheme: dark;
	background-color: #0a1c40;
	background-image:
		linear-gradient(
			96deg,
			rgba(4, 15, 42, 0.86) 0%,
			rgba(4, 15, 42, 0.6) 30%,
			rgba(4, 15, 42, 0.18) 50%,
			rgba(4, 15, 42, 0) 66%
		),
		url("assets/yira-hero-blue-bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.hero.hero-bg .hero-inner {
	display: flex;
	align-items: center;
	min-height: min(78vh, 700px);
	padding-block: clamp(3rem, 7vh, 6rem);
	grid-template-columns: none;
}
.hero.hero-bg .hero-copy {
	max-width: 34rem;
}
@media (max-width: 900px) {
	.hero.hero-bg {
		background-position: 78% center;
		background-image:
			linear-gradient(
				180deg,
				rgba(4, 15, 42, 0.55) 0%,
				rgba(4, 15, 42, 0.72) 60%,
				rgba(4, 15, 42, 0.88) 100%
			),
			url("assets/yira-hero.webp");
	}
	.hero.hero-bg .hero-inner {
		min-height: min(72vh, 620px);
		align-items: flex-end;
	}
	.hero.hero-bg .hero-copy {
		max-width: none;
	}
}

/* ============ GALLERY — even 2x2 grid, uniform tiles (Shawn 2026-09-08) ============ */
.gallery {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
	max-width: 900px;
	margin-inline: auto;
}
.gphoto {
	grid-column: auto;
}
.gphoto img {
	height: clamp(240px, 30vw, 340px);
	object-position: center;
}
/* per-photo framing so each subject stays in the crop (Shawn 2026-09-08) */
.gphoto:nth-child(1) img {
	object-position: center 30%;
} /* swearing-in on the field */
.gphoto:nth-child(2) img {
	object-position: 32% 8%;
} /* podium portrait — her head is upper-left */
.gphoto:nth-child(3) img {
	object-position: center 24%;
} /* with SecAF — two faces sit high */
.gphoto:nth-child(4) img {
	object-position: center 42%;
} /* Times Square crowd + flag */
@media (max-width: 640px) {
	.gallery {
		grid-template-columns: 1fr;
	}
	.gphoto img {
		height: 260px;
	}
}

/* ============ HERO — stacked photo on small screens (2026-09-09) ============ */
/* Desktop: full-bleed background photo carries her; the separate figure is hidden. */
.hero.hero-bg .hero-fig {
	display: none;
}
@media (max-width: 900px) {
	/* collapse: drop the background photo, run navy, then her photo as a block UNDER the text */
	.hero.hero-bg {
		background-image: linear-gradient(
			165deg,
			#03123a 0%,
			var(--navy) 60%,
			#0b3ea8 100%
		);
	}
	.hero.hero-bg .hero-inner {
		display: block;
		min-height: 0;
		padding-block: clamp(2.5rem, 6vh, 4rem) 0;
	}
	.hero.hero-bg .hero-copy {
		max-width: none;
	}
	.hero.hero-bg .hero-fig {
		display: block;
		width: 100%;
		height: auto;
		margin-top: 1.6rem;
		border-top: 3px solid var(--gold-bright);
	}
}

/* ============ HERO — video background (2026-09-09) ============ */
/* Video plays on desktop; the still hero-bg image is the base layer + fallback.
   Scrim moves to ::after so it sits ABOVE the video. Reduced-motion + small
   screens hide the video and fall back to the still / stacked layout. */
.hero.hero-video {
	background-color: #0a1c40;
}
.hero.hero-video .hero-vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: 0;
	border: 0;
}
.hero.hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		96deg,
		rgba(4, 15, 42, 0.86) 0%,
		rgba(4, 15, 42, 0.6) 30%,
		rgba(4, 15, 42, 0.18) 50%,
		rgba(4, 15, 42, 0) 66%
	);
}
.hero.hero-video .hero-inner {
	position: relative;
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.hero.hero-video .hero-vid {
		display: none;
	}
}
@media (max-width: 900px) {
	/* phones: no autoplay video, use the stacked still (navy + hero-fig below the text) */
	.hero.hero-video .hero-vid {
		display: none;
	}
	.hero.hero-video::after {
		display: none;
	}
}

/* ============ HERO MOBILE — authoritative: TEXT first, her PHOTO below (Shawn 2026-08-28) ============ */
@media (max-width: 900px) {
	.hero.hero-bg {
		display: flex;
		flex-direction: column;
		background-color: var(--navy);
		background-image: linear-gradient(
			165deg,
			#03123a 0%,
			var(--navy) 60%,
			#0b3ea8 100%
		);
		background-position: center;
	}
	.hero.hero-bg .hero-inner {
		order: 1;
		display: block;
		min-height: 0;
		align-items: stretch;
		padding-block: clamp(2.25rem, 6vh, 3.5rem) 0;
	}
	.hero.hero-bg .hero-copy {
		max-width: none;
	}
	.hero.hero-bg .hero-fig {
		order: 2;
		display: block;
		width: 100%;
		height: auto;
		margin-top: 1.6rem;
		border-top: 3px solid var(--gold-bright);
	}
}

/* ============ RESOURCE LIBRARY (Free Resources page, Shawn 2026-09-10) ============ */
.res-group {
	margin-top: 2.6rem;
}
.res-h {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}
.res-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}
.res-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.15rem 2.4rem 1.15rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg);
	text-decoration: none;
	color: var(--ink);
	transition:
		border-color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease;
}
.res-card:hover {
	border-color: var(--teal);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.res-card b {
	font-size: 1rem;
	line-height: 1.3;
}
.res-card span {
	font-size: 0.82rem;
	color: var(--muted);
}
.res-card::after {
	content: "↗";
	position: absolute;
	top: 1.05rem;
	right: 1.1rem;
	font-size: 1rem;
	color: var(--muted);
	transition:
		color 0.18s ease,
		transform 0.18s ease;
}
.res-card:hover::after {
	color: var(--teal);
	transform: translate(2px, -2px);
}
.res-card.is-video::after {
	content: "▶";
	font-size: 0.8rem;
}
.res-books {
	list-style: none;
	display: grid;
	gap: 0.95rem;
	margin: 1rem 0 0;
	padding: 0;
	max-width: 74ch;
}
.res-books li {
	position: relative;
	padding-left: 1.2rem;
	color: var(--ink);
	line-height: 1.55;
}
.res-books li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 2px;
	background: var(--gold-bright);
}
.res-books em {
	color: var(--navy);
	font-style: italic;
}
@media (max-width: 560px) {
	.res-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Resource videos + book cards (Shawn 2026-09-10) ---- */
.video-embeds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.4rem;
}
.vembed {
	margin: 0;
}
.vframe {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #00122b;
}
.vframe iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.vembed figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--muted);
}
.book-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 1.1rem;
}
.bcard {
	display: flex;
	gap: 1rem;
	padding: 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg);
}
.bcard img {
	width: 94px;
	height: auto;
	align-self: flex-start;
	border-radius: 6px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
	flex: none;
}
.bcard-body {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
}
.bcard-body b {
	font-size: 1.02rem;
	line-height: 1.25;
}
.bcard-body .bmeta {
	font-size: 0.8rem;
	color: var(--muted);
}
.bcard-body p {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ink);
}
@media (max-width: 560px) {
	.book-cards {
		grid-template-columns: 1fr;
	}
}

/* ---- Center a lone book when the shelf has only one (Shawn 2026-09-10) ---- */
.bookshelf:has(.book:only-child) {
	grid-template-columns: minmax(0, 360px);
	justify-content: center;
}

/* ---- Resource layout v3: 2x2 videos, uniform small covers, one book per row (Shawn 2026-09-10) ---- */
.video-embeds {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
	max-width: 820px;
}
.book-cards {
	grid-template-columns: 1fr;
	max-width: 820px;
	gap: 1rem;
}
.bcard {
	gap: 1.25rem;
	padding: 1.2rem 1.4rem;
	align-items: flex-start;
}
.bcard img {
	width: 84px;
	height: 126px;
	object-fit: cover;
	object-position: center;
	border-radius: 6px;
}
@media (max-width: 640px) {
	.video-embeds {
		grid-template-columns: 1fr;
	}
}

/* ---- Free Resources: center library on the page + book links (Shawn 2026-09-10) ---- */
.res-group {
	max-width: 940px;
	margin-inline: auto;
}
.res-h {
	text-align: center;
}
.res-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.video-embeds,
.book-cards {
	margin-inline: auto;
}
.blink {
	display: inline-block;
	margin-top: 0.55rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gold);
	text-decoration: none;
}
.blink:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bsoon {
	display: inline-block;
	margin-top: 0.55rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
}

/* ---- Visible link label on resource cards (Shawn 2026-09-10) ---- */
.res-card .rlink {
	color: var(--gold);
	font-weight: 600;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}