/* McW Data Centers Decoded — tokens extracted from Figma (b9hDyTMU9IVVj5RR6c0KUr, node 2307-1911) */

:root {
	/* Brand colors — exact Figma variables (get_variable_defs, node 2307-1911) */
	--c-navy: #003b5c;        /* McGuireWoods Blue — headings, footer */
	--c-blue-700: #003b5c;
	--c-blue-500: #547590;    /* McGuireWoods Blue Grey */
	--c-band: #547590;        /* newsletter band */
	--c-blue-tint: #bbd5ec;   /* McGuireWoods Light Blue */
	--c-blue-tint-bg: #f7f7f7;
	--c-orange: #ee690c;      /* McGuireWoods Orange — graphics and fills only */
	--c-orange-dark: #ac3207; /* McGuireWoods Burnt Orange — hover */
	/* Brand orange is 3.15:1 on white, below the AA 4.5:1 the QA targets ask for.
	   This is the least-darkened version of it that passes, for text-sized use
	   and for white-on-orange buttons: 4.89:1 on white, 4.56:1 on the grey tint. */
	--c-orange-text: #ba5209;
	--c-white: #ffffff;
	--c-text: #171717;
	--c-text-muted: #666666;
	--c-text-light: #666666;
	--c-border: #d9d9d9;

	/* Type — per Figma: headings Inter Bold, body Inter/Roboto, kickers Bebas Neue */
	--f-heading: "Inter", -apple-system, "Segoe UI", sans-serif;
	--f-body: "Inter", "Roboto", -apple-system, "Segoe UI", sans-serif;
	--f-kicker: "Bebas Neue", "Inter", sans-serif;
	--fs-h1: clamp(2rem, 4.5vw, 2.75rem);      /* 44px desktop, line 1.15 */
	--fs-h2: clamp(1.65rem, 3vw, 2.25rem);     /* 36px desktop, line 1.15 */
	--fs-h3: 1rem;                              /* card titles 15–16px SemiBold 1.35 */
	--fs-body: 0.875rem;                        /* 14px / 1.5 */
	--fs-small: 0.8125rem;                      /* 13px */

	--w-content: 1200px;
	--sp-section: clamp(3.5rem, 8vw, 6.25rem);  /* 100px section padding */
	--header-h: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* `clip` (not `hidden`): kills sideways panning without turning html/body
   into scroll containers, which would break the sticky video sections. */
html,
body { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--c-text);
	background: var(--c-white);
}

h1, h2, h3, h4 {
	font-family: var(--f-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-blue-700); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-navy);
	color: #fff;
	padding: 0.5rem 1rem;
	z-index: 100;
}
.skip-link:focus { left: 0; }

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

/* ---- Layout helpers ---- */

.section { padding: var(--sp-section) 1.25rem; }
.section__inner { max-width: var(--w-content); margin: 0 auto; }
.section__inner--narrow { max-width: 800px; }

.section__kicker {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.96px;
	color: var(--c-text-muted);
	margin: 0 0 1rem;
}
.section__title { font-size: var(--fs-h2); color: var(--c-navy); }
.section__title--md { font-size: 1.5rem; color: var(--c-navy); }
.section__subtitle {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-text-muted);
}
.section__header { margin-bottom: 2.5rem; }
.section__footer { margin-top: 2.5rem; }
.section__footer-link { margin-top: 2rem; }

.kicker {
	font-family: var(--f-kicker);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--c-orange-text);
	margin: 0 0 0.75rem;
}
/* Figma: Bebas 11px, 0.88px tracking, brand orange. Decorative label —
   the duplicate category information lives in the card title/link context. */
.kicker--sm {
	font-size: 0.6875rem;
	letter-spacing: 0.88px;
	color: var(--c-orange);
	margin-bottom: 0.5rem;
}
.kicker--light { color: #fff; opacity: 0.9; }

.text-link {
	font-family: var(--f-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-blue-700);
	text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* ---- Buttons ---- */

.btn {
	display: inline-block;
	font-family: var(--f-heading);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	padding: 0.875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 2px;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Brand orange per Figma. (Below AA for white text — design's call.) */
.btn--primary { background: var(--c-orange); color: #fff; }
.btn--primary:hover { background: var(--c-orange-dark); }
.btn--light { background: #fff; color: var(--c-text); }
.btn--light:hover { background: #e8e8e8; }
.btn--ghost { background: #fff; color: var(--c-blue-700); }
.btn--ghost:hover { background: #ededed; }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--outline:hover { background: rgba(255, 255, 255, 0.1); }
.btn--large { font-size: 1.0625rem; padding: 1rem 2rem; }

/* ---- Header ---- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
	color: #fff;
	padding: 1rem 1.25rem;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Slides away while scrolling down, returns on the first upward move */
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}
.site-header__inner {
	max-width: var(--w-content);
	margin: 0 auto;
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 0 0.75rem 0 1.5rem;
	border-radius: 4px;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.is-scrolled .site-header__inner {
	background: rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}
.site-header__logo {
	display: block;
	width: 170px;
	height: 26.029px;
}
.site-header__brand {
	color: #fff;
	text-decoration: none;
	font-family: var(--f-heading);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
}
.site-nav { margin-left: auto; }
.site-nav__list {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	color: var(--c-white);
	text-decoration: none;
	font-family: var(--f-heading);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
}
.site-nav__list a:hover { color: var(--c-orange); }
.site-header__toggle { display: none; }

/* ---- Hero / masthead ---- */

.hero {
	position: relative;
	/* Full viewport: svh keeps sticky sections stable while mobile URL bars collapse */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	color: #fff;
}
.hero__media,
.event-banner__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__video,
.event-banner__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 43.79%, rgba(0, 0, 0, 0.4) 76.47%),
		linear-gradient(180deg, #000 14.33%, rgba(0, 0, 0, 0) 68.89%);
}
.hero__content {
	position: relative;
	max-width: var(--w-content);
	width: 100%;
	margin: 0 auto;
	padding: 4rem 1.25rem;
}
.hero__title {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.15;
	color: var(--c-white);
}
.hero__subtitle {
	max-width: 40ch;
	margin: 0 0 2rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #d9d9d9;
}
/* "Data Centers Decoded" lockup, bottom-right of the masthead */
.hero__badge {
	position: absolute;
	right: max(1.25rem, calc(50% - var(--w-content) / 2 + 1.25rem));
	bottom: 3rem;
	width: 215.988px;
	height: 113.738px;
	object-fit: contain;
}
/* Mouse-shaped scroll cue, bottom centre of the masthead */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 3.5rem;
	transform: translateX(-50%);
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 14px;
}
.hero__scroll span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
	.hero__scroll span { animation: mcw-scroll-cue 2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
	@keyframes mcw-scroll-cue {
		0% { transform: translateY(0); opacity: 1; }
		70% { transform: translateY(12px); opacity: 0; }
		100% { transform: translateY(0); opacity: 0; }
	}
}

.hero__event { margin: 2rem 0 1.5rem; }
.hero__event-label {
	font-family: var(--f-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.5;
	color: #d9d9d9;
	margin: 0 0 0.25rem;
}
.hero__event-text {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #d9d9d9;
}

/* Sticky video sections: content after them slides over */
@media (prefers-reduced-motion: no-preference) {
	/* Both class names on purpose: the later .hero / .event-banner rules set
	   position: relative, so a single class here would lose on source order. */
	.hero.section--sticky-video,
	.event-banner.section--sticky-video,
	.event-hero.section--sticky-video {
		position: sticky;
		top: 0;
		z-index: 0;
	}
	.scroll-over {
		position: relative;
		z-index: 1;
		background: var(--c-white);
	}
}

/* ---- Scroll reveal ----
   Never put [data-reveal] on a [data-parallax] element: both write `transform`
   and the rAF parallax loop would fight this transition. Reveal the children. */
@media (prefers-reduced-motion: no-preference) {
	.has-reveal [data-reveal] {
		opacity: 0;
		transition:
			opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--reveal-delay, 0s);
	}
	.has-reveal [data-reveal='up'] { transform: translate3d(0, 1.75rem, 0); }
	.has-reveal [data-reveal='left'] { transform: translate3d(-2rem, 0, 0); }
	.has-reveal [data-reveal='right'] { transform: translate3d(2rem, 0, 0); }
	/* The five-colour rule wipes out from the left instead of fading */
	.has-reveal [data-reveal='wipe'] {
		opacity: 1;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.has-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}

	/* Grid children trail each other so a row reads left to right */
	.card-grid > [data-reveal]:nth-child(2),
	.news__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.14s; }
	.card-grid > [data-reveal]:nth-child(3),
	.news__grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.28s; }
	.card-grid > [data-reveal]:nth-child(4),
	.news__grid > [data-reveal]:nth-child(4) { --reveal-delay: 0.42s; }
}

/* ---- Featured Q&A card ---- */

.featured-card {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	background: var(--c-blue-tint-bg);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	margin-bottom: 3rem;
}
.featured-card__body { padding: 2.5rem 0 2.5rem 3rem; align-self: center; }
.featured-card__title { font-size: 1.5rem; color: var(--c-blue-700); }
.featured-card__excerpt { color: var(--c-text); margin: 0 0 1.25rem; }
.featured-card__media { overflow: hidden; }
.featured-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.featured-card:hover .featured-card__media img { transform: scale(1.04); }
.featured-card:hover .text-link { text-decoration: underline; }

/* ---- Cards ---- */

.card-grid { display: grid; gap: 1.75rem; }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.card__media { margin-bottom: 1rem; aspect-ratio: 461 / 320; overflow: hidden; }
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__title {
	/* Figma: Inter 15px SemiBold, 135%, McGuireWoods Blue */
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-blue-700);
	line-height: 1.35;
}
.card:hover .card__title { text-decoration: underline; }

/* ---- Event banner ---- */

.event-banner {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	/* The parallax media is oversized; keep it inside the section box, or it
	   paints over whatever sits below while the section is pinned. */
	overflow: hidden;
	display: flex;
	align-items: center;
	color: #fff;
}
/* Parallax layers drift vertically, so the media is oversized to stay full-bleed */
.event-banner__media[data-parallax] { inset: -15% 0; }
.event-banner__media[data-parallax],
.event-banner__content[data-parallax] { will-change: transform; }
.event-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 24, 38, 0.55);
}
.event-banner__content {
	position: relative;
	max-width: var(--w-content);
	width: 100%;
	margin: 0 auto;
	padding: 2rem 1.25rem;
}
/* Content sits on a translucent black card so it stays legible over the video
   (Figma 2416:541: 60% black, 2px blur, 32px padding, 4px radius) */
.event-banner__card {
	max-width: 680px;
	padding: 2rem;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
/* Short screens leave little headroom around the card; tighten it so the
   parallax drift can't push the button past the section's clipped edge. */
@media (max-height: 700px) {
	.event-banner__card { padding: 1.5rem; }
}
.event-banner__title { font-size: var(--fs-h1); color: #fff; }
.event-banner__text { max-width: 46ch; }
.event-banner__meta { margin: 1.5rem 0 2rem; }
.event-banner__meta div { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
.event-banner__meta dt { font-family: var(--f-heading); font-weight: 700; }
.event-banner__meta dd { margin: 0; }

/* ---- Practice ---- */

/* Full-width 5-color brand stripe above the practice section (Figma 2337:1039) */
.color-stripe { display: flex; height: 13px; }
.color-stripe span { flex: 1; }
.color-stripe span:nth-child(1) { background: var(--c-orange-dark); }
.color-stripe span:nth-child(2) { background: var(--c-orange); }
.color-stripe span:nth-child(3) { background: #93b8d9; }
.color-stripe span:nth-child(4) { background: var(--c-blue-500); }
.color-stripe span:nth-child(5) { background: var(--c-navy); }

.practice { background: var(--c-white); }
.practice__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}
.practice .section__title { color: var(--c-navy); }
.practice__text p { margin: 0 0 1.25rem; }
/* Figma 2336:1026 — 620x600, kept proportional to the column width */
.practice__media img { width: 100%; aspect-ratio: 620 / 600; height: auto; object-fit: cover; }

/* ---- News ---- */

/* Figma 2336-979: 18px SemiBold heading sitting 16px above the row */
.news .section__title--md {
	font-family: var(--f-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-text);
}
.news .section__header { margin-bottom: 1rem; }

.news__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.news-card {
	/* Figma: 32px padding all round, 16px between every element inside */
	padding: 2rem;
	border-left: 1px solid var(--c-border);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.news-card > * { margin: 0; }
.news-card:first-child { border-left: 0; padding-left: 0; }
.news-card:last-child { padding-right: 0; }
/* "Read more" / "View all news" — black, Inter 13px SemiBold (Figma) */
.news .text-link {
	color: var(--c-text);
	font-size: 0.8125rem;
	font-weight: 600;
}
.news-card .kicker {
	font-size: 0.875rem;
	letter-spacing: 1.12px;
	color: var(--c-orange);
}
.news-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-text);
}
.news-card__meta { font-size: 0.75rem; color: var(--c-text-light); }
.news-card__excerpt { font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-light); }
.news-card__link { margin-top: auto; }

/* ---- Team / Connect With Us ---- */

/* Senior Contacts sits on the grey tint per Figma 2416:584 */
.team { background: var(--c-blue-tint-bg); }

.person-card {
	background: #fff;
	border-radius: 2px;
	/* Column layout + auto margin on the link keeps "Connect" on one baseline
	   across the row, however long each bio runs. */
	display: flex;
	flex-direction: column;
}
/* Portraits are wider per Figma (384x270); keep faces in frame with a top bias */
.person-card__media { aspect-ratio: 384 / 270; overflow: hidden; }
.person-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.person-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}
.person-card__body .text-link { margin-top: auto; align-self: flex-start; }
.person-card__name { font-size: 1.25rem; color: #1c1c1c; margin-bottom: 0.25rem; }
.person-card__role { color: var(--c-text-light); font-size: 0.9375rem; margin: 0 0 0.75rem; }
.person-card__bio { font-size: 0.9375rem; margin: 0 0 1rem; }

/* ---- Hover / focus states ----
   Interaction only: nothing here alters the resting design. */

.news-card__title,
.card__title,
.featured-card__title,
.person-card__name { transition: color 0.2s; }
.news-card:hover .news-card__title,
.card:hover .card__title { color: var(--c-orange-dark); }
.news-card:hover .news-card__link { text-decoration: underline; }

/* Portrait lifts on its own card, kept subtle so the row stays calm.
   Two classes deep on purpose: `.has-reveal [data-reveal]` also sets
   `transition` on this element, so a single-class rule would lose and the
   shadow would snap. The reveal timings are repeated here to keep both. */
.team .person-card {
	transition:
		box-shadow 0.25s,
		border-color 0.25s,
		opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Per-property, in the order above: hover reacts instantly, reveal staggers */
	transition-delay: 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.person-card:hover {
	box-shadow: 0 10px 24px rgba(0, 59, 92, 0.1);
}
.person-card__media img { transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); }
.person-card:hover .person-card__media img { transform: scale(1.03); }

/* Standalone arrow links nudge toward their destination */
a.text-link { display: inline-block; transition: color 0.2s, transform 0.2s; }
a.text-link:hover { transform: translateX(3px); }
/* Not on the person cards or news "Read more" — those stay put */
.person-card a.text-link:hover,
a.news-card__link:hover { transform: none; text-decoration: underline; }

.btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Keyboard focus stays visible everywhere; mouse hover is unaffected */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--c-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.card__media img,
	.featured-card__media img,
	.person-card__media img,
	a.text-link,
	.btn { transition: none; }
	.card:hover .card__media img,
	.featured-card:hover .featured-card__media img,
	.person-card:hover .person-card__media img,
	a.text-link:hover,
	.btn:hover { transform: none; }
}

/* ---- Newsletter band ---- */

.newsletter { background: var(--c-band); color: #fff; }
.newsletter__title { font-size: var(--fs-h1); color: #fff; }
.newsletter__text { margin: 0 0 2rem; }

/* ---- Footer ---- */

/* relative + z-index so the sticky video sections can never paint over it */
.site-footer { position: relative; z-index: 1; background: var(--c-navy); color: #fff; }
.site-footer__inner {
	max-width: var(--w-content);
	margin: 0 auto;
	padding: 4rem 1.25rem 2rem;
}
.site-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 3rem;
	flex-wrap: wrap;
}
.site-footer__logo {
	font-family: var(--f-heading);
	font-weight: 700;
	font-size: 1.75rem;
	margin: 0 0 1rem;
}
.site-footer__social {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Bare white glyphs, no ring — matches the live mcguirewoods.com footer */
.site-footer__social a {
	display: block;
	color: #fff;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.2s;
}
.site-footer__social svg { width: 1.125rem; height: 1.125rem; display: block; }
.site-footer__social a:hover { opacity: 0.7; }
.site-footer__nav { display: flex; gap: 4rem; }
.site-footer__col { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 0.75rem; }
.site-footer__col a { color: #fff; text-decoration: none; font-size: 0.9375rem; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	margin-top: 3rem;
	padding-top: 1.5rem;
	font-size: 0.875rem;
}

/* ---- Event page (Figma 2640-32) ---- */

.event-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--c-navy);
	overflow: hidden;
}
.event-hero__media { position: absolute; inset: 0; }
.event-hero__image { width: 100%; height: 100%; object-fit: cover; }
.event-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(-71.66deg, rgba(0, 0, 0, 0) 47.17%, rgba(0, 0, 0, 0.8) 60.9%),
		linear-gradient(180deg, #000 21.75%, rgba(0, 0, 0, 0) 55.45%);
}
.event-hero__content {
	position: relative;
	max-width: var(--w-content);
	width: 100%;
	margin: 0 auto;
	padding: 4rem 1.25rem;
}
/* Sits just under the header bar, aligned to the content column's left edge */
.event-hero__back {
	position: absolute;
	z-index: 1;
	top: calc(var(--header-h) + 3.5rem);
	left: max(1.25rem, calc(50% - var(--w-content) / 2 + 1.25rem));
	font-family: var(--f-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.event-hero__back:hover { text-decoration: underline; }
.event-hero__kicker {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.96px;
	color: #ccc;
	margin: 0 0 1rem;
}
.event-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.08;
	color: #fff;
	max-width: 12ch;
	margin: 0 0 1.25rem;
}
.event-hero__dateline {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1rem;
	color: #d9d9d9;
	margin: 0 0 3.75rem;
}
.event-hero__cta {
	font-size: 0.875rem;
	font-weight: 600;
	padding: 1.125rem 2rem;
}
.event-hero__badge {
	position: absolute;
	right: max(1.25rem, calc(50% - var(--w-content) / 2 + 1.25rem));
	bottom: 3rem;
	width: 215.988px;
	height: 113.738px;
	object-fit: contain;
}

/* Grey info band: about | divider | date & location, then the featured card */
.event-info { background: var(--c-blue-tint-bg); }
.event-info__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3.5rem;
	margin-bottom: 3rem;
}
.event-info__about { border-right: 1px solid var(--c-border); padding-right: 3.5rem; }
.event-info__heading {
	font-family: var(--f-kicker);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--c-orange-text);
	margin: 0 0 1.5rem;
}
.event-info__text {
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 44ch;
	margin: 0 0 1.5rem;
}
.event-info__signup { font-size: 0.8125rem; }
.event-info__date { font-family: var(--f-heading); font-weight: 600; font-size: 1rem; margin: 0 0 0.375rem; }
.event-info__time { font-size: 0.9375rem; margin: 0 0 1.5rem; }
.event-info__venue { font-family: var(--f-heading); font-weight: 600; font-size: 1rem; margin: 0 0 0.375rem; }
.event-info__venue a { color: inherit; text-decoration: none; }
.event-info__venue a:hover { text-decoration: underline; }
.event-info__address { font-size: 0.875rem; margin: 0; }

.event-featured {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3rem;
	align-items: center;
	background: #fff;
	border-radius: 4px;
	padding: 2.5rem 3rem;
}
.event-featured__title {
	font-family: var(--f-kicker);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--c-navy);
	margin: 0 0 1rem;
}
.event-featured__text { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 2rem; }
.event-featured__media { aspect-ratio: 461 / 320; overflow: hidden; }
.event-featured__media img { width: 100%; height: 100%; object-fit: cover; }

/* Topics + side photo */
.event-topics__inner {
	display: grid;
	grid-template-columns: 1fr minmax(0, 620px);
	gap: 3.75rem;
	align-items: start;
}
.event-topics .section__title { max-width: 16ch; }
.event-topics__lead { font-family: var(--f-heading); font-weight: 600; font-size: 1rem; margin: 2rem 0 1rem; }
.event-topics__list {
	margin: 0 0 2rem;
	padding-left: 1.25rem;
	max-width: 52ch;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.event-topics__note { color: var(--c-text-muted); font-size: 0.875rem; margin: 0 0 1.5rem; }
.event-topics__register { font-size: 0.9375rem; line-height: 1.55; }
.event-topics__register a { color: inherit; font-weight: 600; }
.event-topics__media { margin: 0; }
.event-topics__media img { width: 100%; aspect-ratio: 620 / 600; object-fit: cover; }

/* ---- Insight single (editorial layout, Figma 2665-273) ---- */

/* Light page → light frosted bar: white blur with dark logo and links.
   (A dark tint over the page's white padding reads as a flat strip.) */
.single-insight .site-header .site-header__inner {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}
.single-insight .site-header__logo { filter: brightness(0); }
.single-insight .site-nav__list a { color: var(--c-text); }
.single-insight .site-nav__list a:hover { color: var(--c-orange-dark); }
.single-insight .site-header__toggle-bar,
.single-insight .site-header__toggle-bar::before,
.single-insight .site-header__toggle-bar::after { background: var(--c-text); }
/* The open nav sheet stays dark — its links and the bar revert to light-on-dark */
html.nav-locked .single-insight .site-header__logo { filter: none; }
html.nav-locked .single-insight .site-nav__list a { color: #fff; }
html.nav-locked .single-insight .site-header__toggle-bar,
html.nav-locked .single-insight .site-header__toggle-bar::before,
html.nav-locked .single-insight .site-header__toggle-bar::after { background: #fff; }

.insight-article { padding: calc(var(--header-h) + 4.5rem) 1.25rem var(--sp-section); }
.insight-article__inner { max-width: var(--w-content); margin: 0 auto; }

.insight-article__breadcrumb {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.75rem;
	color: var(--c-text-muted);
	margin-bottom: 2rem;
}
.insight-article__breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.insight-article__breadcrumb a:hover { color: var(--c-blue-700); text-decoration: underline; }
.insight-article__breadcrumb [aria-current] {
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.insight-article__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.insight-article__title {
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	line-height: 1.12;
	color: var(--c-text);
	max-width: 22ch;
	margin: 0;
}
.insight-article__chip {
	flex-shrink: 0;
	font-family: var(--f-heading);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--c-text);
	border: 1px solid var(--c-border);
	border-radius: 2px;
	padding: 0.375rem 0.75rem;
}

.insight-article__byline {
	display: flex;
	gap: 3rem;
	align-items: flex-end;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
}
.insight-article__byline-item { display: flex; flex-direction: column; gap: 0.375rem; }
.insight-article__byline-label {
	font-size: 0.75rem;
	color: var(--c-text-muted);
}
.insight-article__byline-value {
	font-family: var(--f-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text);
	max-width: 52ch;
}
.insight-article__share {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-end;
}
.insight-article__share-links { display: flex; gap: 0.75rem; }
.insight-article__share-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	color: var(--c-text);
	transition: border-color 0.2s, color 0.2s;
}
.insight-article__share-links a:hover { border-color: var(--c-blue-700); color: var(--c-blue-700); }
.insight-article__share-links svg { width: 0.875rem; height: 0.875rem; }

.insight-article__hero {
	margin: 0 0 3.5rem;
	aspect-ratio: 1200 / 430;
	overflow: hidden;
}
.insight-article__hero img { width: 100%; height: 100%; object-fit: cover; }

.insight-article__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}
.insight-article__toc-wrap { position: sticky; top: calc(var(--header-h) + 3rem); }
.insight-article__toc-title {
	font-family: var(--f-heading);
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 1rem;
}
.insight-article__toc ul { list-style: none; margin: 0; padding: 0; }
.insight-article__toc a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--c-text);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: background-color 0.15s, border-color 0.15s;
}
.insight-article__toc a:hover { background: var(--c-blue-tint-bg); }
.insight-article__toc a.is-active {
	background: var(--c-blue-tint-bg);
	border-left-color: var(--c-orange);
	font-weight: 600;
}
.insight-article__content { max-width: 760px; }
/* Articles without H2 sections have no Contents rail — use the full row */
.insight-article__layout > .insight-article__content:only-child {
	grid-column: 1 / -1;
	margin: 0 auto;
}
/* Anchored headings land clear of the fixed header */
.insight-article__content h2 { scroll-margin-top: calc(var(--header-h) + 3rem); }
.insight-article__source {
	border-top: 1px solid var(--c-border);
	padding-top: 1.5rem;
	margin-top: 2.5rem;
}

.insight-article__related { margin-top: var(--sp-section); }
.insight-article__related-title {
	font-size: 1.5rem;
	color: var(--c-text);
	margin: 0 0 2rem;
}
.card__date { font-size: 0.75rem; color: var(--c-text-muted); margin: 0.5rem 0 0; }

@media (max-width: 900px) {
	.insight-article__layout { grid-template-columns: 1fr; gap: 2rem; }
	.insight-article__toc-wrap { position: static; }
	.insight-article__head { flex-direction: column; gap: 1rem; }
	.insight-article__share { margin-left: 0; align-items: flex-start; }
}

.prose { font-size: 1rem; line-height: 1.7; }
.prose p { margin: 0 0 1.25rem; }
.prose h2 {
	font-size: 1.375rem;
	color: var(--c-navy);
	margin: 2.25rem 0 0.75rem;
}
.prose h3 {
	font-size: 1.0625rem;
	color: var(--c-navy);
	margin: 1.75rem 0 0.5rem;
}
.prose ul,
.prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.625rem; }
.prose em { color: var(--c-text-muted); }

/* ---- Responsive ---- */

@media (max-width: 1024px) {
	.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.news__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
	.news-card:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 768px) {
	.hero__badge { width: 150px; height: 79px; bottom: 1.5rem; }
	.site-nav { display: none; }
	/* Full-height sheet under the bar; links start at the logo's left edge
	   (header 1.25rem + inner 1.5rem padding) */
	.site-nav.is-open {
		display: flex;
		align-items: center;
		position: fixed;
		top: calc(var(--header-h) + 2rem);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.55);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		padding: 2.5rem 1.25rem 2.5rem 2.75rem;
		overflow-y: auto;
	}
	.site-nav.is-open .site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}
	.site-nav.is-open .site-nav__list a {
		font-size: 1.375rem;
		font-weight: 500;
	}
	.site-header__toggle { margin-left: auto; }
	/* No background scroll while the nav sheet is open */
	html.nav-locked,
	html.nav-locked body { overflow: hidden; }
	/* The bar's backdrop-filter would become the containing block for the
	   fixed nav sheet and trap it inside the header — drop it while open.
	   A solid tint stands in so the bar stays legible over the page. */
	html.nav-locked .site-header__inner {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(0, 0, 0, 0.55);
	}
	.site-header__toggle {
		display: block;
		background: none;
		border: 0;
		width: 2rem;
		height: 2rem;
		position: relative;
		cursor: pointer;
	}
	.site-header__toggle-bar,
	.site-header__toggle-bar::before,
	.site-header__toggle-bar::after {
		content: "";
		position: absolute;
		left: 4px;
		right: 4px;
		height: 2px;
		background: #fff;
	}
	.site-header__toggle-bar { top: 50%; }
	.site-header__toggle-bar::before { top: -7px; }
	.site-header__toggle-bar::after { top: 7px; }

	/* Open state: outer bars fold onto the middle and rotate into an X;
	   the middle bar fades. Same box, same position — pure morph. */
	.site-header__toggle-bar,
	.site-header__toggle-bar::before,
	.site-header__toggle-bar::after {
		transition: transform 0.25s ease, top 0.25s ease, background-color 0.2s ease;
	}
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
		background: transparent;
	}
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
		top: 0;
		transform: rotate(45deg);
	}
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
	@media (prefers-reduced-motion: reduce) {
		.site-header__toggle-bar,
		.site-header__toggle-bar::before,
		.site-header__toggle-bar::after { transition: none; }
	}

	.featured-card,
	.practice__inner { grid-template-columns: 1fr; }
	.event-info__grid,
	.event-featured,
	.event-topics__inner { grid-template-columns: 1fr; }
	.event-info__about { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--c-border); padding-bottom: 2rem; }
	.event-featured { padding: 1.5rem 1.25rem; }
	.event-featured__media { order: -1; }
	.event-hero__badge { width: 150px; height: 79px; bottom: 1.5rem; }
	/* Stacked cards always read image first, then text */
	.featured-card__media { order: -1; }
	.featured-card__body { padding: 1.5rem 1.25rem 2rem; }
	.card-grid--3 { grid-template-columns: 1fr; }
	.card-grid--4,
	.news__grid { grid-template-columns: 1fr; }
	.news-card { border-left: 0; padding: 0; }
}