/* ==========================================================
   Drreall blocks — front-end styles.
   Institutional palette, but with tasteful, subtle motion —
   quiet hover feedback, not a flat 2000s page.
   ========================================================== */

/* ---- Hero Slider ---- */
.drreall-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	/* Solid fallback behind the crossfading slides — without this, the
	   brief moment where the outgoing slide has already hidden and the
	   incoming one is still near-transparent reveals the plain white page
	   background underneath, showing as a "flash of white". */
	background: var(--drreall-color-accent);
	/* Full-bleed: breaks out of the constrained page content wrapper
	   regardless of where it's placed, so it always spans edge-to-edge. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Covers the rest of the first viewport, below the header — a plain
	   100vh here would always be taller than the visible screen by exactly
	   the header's height (the header sits above it in normal flow), which
	   is what pushed the scroll cue/dots just past the first fold. main.js
	   measures the real header height into --drreall-header-h; 90px is only
	   a same-paint-frame fallback before that JS runs. `svh` (small
	   viewport height) additionally avoids the classic mobile-browser-UI
	   100vh overflow; falls back to `vh` where unsupported. */
	height: calc(100vh - var(--drreall-header-h, 90px));
	height: calc(100svh - var(--drreall-header-h, 90px));
	min-height: 480px;
}
body.admin-bar .drreall-hero { height: calc(100vh - var(--drreall-header-h, 90px) - 32px); }
body.admin-bar .drreall-hero { height: calc(100svh - var(--drreall-header-h, 90px) - 32px); }
@media (max-width: 782px) {
	body.admin-bar .drreall-hero { height: calc(100vh - var(--drreall-header-h, 90px) - 46px); }
	body.admin-bar .drreall-hero { height: calc(100svh - var(--drreall-header-h, 90px) - 46px); }
}
.drreall-hero__track { position: relative; width: 100%; height: 100%; }
.drreall-hero__slide {
	position: absolute; inset: 0;
	overflow: hidden;
	opacity: 0; visibility: hidden;
	display: flex; align-items: center; justify-content: center;
	/* Delay the visibility flip until AFTER the opacity fade-out finishes,
	   so the outgoing slide stays rendered (fading) instead of vanishing
	   the instant it loses .is-active — that instant disappearance was
	   what caused the flash of the plain background during a transition. */
	transition: opacity 1s var(--drreall-ease), visibility 0s 1s;
}
.drreall-hero__slide.is-active {
	/* Stay position:absolute (inherited) so inset:0 keeps stretching this
	   slide to fill .drreall-hero — switching to position:relative here
	   made inset:0 a no-op (only absolute/fixed elements stretch via inset),
	   collapsing the slide down to its content's natural height instead of
	   filling the full 100vh hero. */
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 1s var(--drreall-ease), visibility 0s 0s;
}
/* Ken Burns lives on its own layer, animated via `transform: scale()`
   (GPU-composited) instead of `background-size` (triggers layout/paint on
   every frame) — the latter is what caused the visible jitter/stutter. */
.drreall-hero__slide-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transform: scale(1.08);
	will-change: transform;
}
.drreall-hero__slide.is-active .drreall-hero__slide-bg {
	animation: drreall-hero-kenburns 9s var(--drreall-ease) forwards;
}
@keyframes drreall-hero-kenburns {
	from { transform: scale(1.08); }
	to { transform: scale(1.18); }
}
.drreall-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(24,30,74,0.55) 0%, rgba(24,30,74,0.35) 45%, rgba(24,30,74,0.6) 100%);
}
.drreall-hero__content {
	position: relative; z-index: 1; max-width: 760px; padding-block: 3rem;
	margin-inline: auto;
	text-align: center;
	animation: drreall-hero-content-in 0.9s var(--drreall-ease) both;
	animation-delay: 0.15s;
}
@keyframes drreall-hero-content-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
.drreall-hero__content h1 { color: #fff; font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: 1.05; }
.drreall-hero__content p { color: rgba(255,255,255,0.92); font-size: 1.35rem; max-width: 48ch; margin-inline: auto; }

.drreall-hero__scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	z-index: 2;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.08);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(6px);
	animation: drreall-hero-scroll-cue 2s ease-in-out infinite;
	transition: background var(--drreall-transition-fast);
}
.drreall-hero__scroll-cue:hover { background: rgba(255,255,255,0.2); }
@keyframes drreall-hero-scroll-cue {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.drreall-hero__scroll-cue { animation: none; }
}
.drreall-hero__dots { position: absolute; bottom: 5.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; }
.drreall-hero__dot {
	width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7);
	background: transparent; cursor: pointer; padding: 0;
	transition: background var(--drreall-transition-fast), width var(--drreall-transition-fast);
}
.drreall-hero__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }
.drreall-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4); color: #fff;
	border-radius: 50%; width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
	backdrop-filter: blur(6px);
	transition: background var(--drreall-transition-fast), transform var(--drreall-transition-fast);
}
.drreall-hero__arrow:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.06); }
.drreall-hero__arrow--prev { left: clamp(1rem, 4vw, 2.5rem); }
.drreall-hero__arrow--next { right: clamp(1rem, 4vw, 2.5rem); }
@media (max-width: 640px) {
	.drreall-hero__arrow { display: none; }
	.drreall-hero__content { padding-inline: 1.25rem; }
}

/* ---- Title & Description Section ---- */
/* No max-width/margin-inline/padding-inline of its own — every drreall/*
   section block used to redeclare the exact same container+gutter box,
   which meant a plain core block (Heading, Paragraph, Group…) dropped
   directly onto a page — with no such styling of its own — sat flush to
   the page's raw 1240px edge instead of inset by the gutter like every
   custom block. Removing the duplication and letting .drreall-page__content
   (page.php) / .drreall-container (single.php) be the one source of that
   box fixes both without double-padding these blocks. */
.drreall-expertise {
	padding-block: clamp(1.75rem, 3.5vw, 3.5rem);
	text-align: left;
}
.drreall-expertise__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.drreall-expertise__logos img { height: clamp(56px, 8vw, 96px); width: auto; }
.drreall-expertise__copy { width: 100%; }
.drreall-expertise__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 700; color: var(--drreall-color-accent); margin-bottom: 0.75rem; }
.drreall-expertise__title { margin-bottom: 1rem; }
.drreall-expertise__description { color: var(--drreall-color-muted); font-size: 1.05rem; }
.drreall-expertise__description p:last-child { margin-bottom: 0; }
.drreall-expertise .drreall-btn { margin-top: 1.5rem; }

/* ---- Reform Areas ---- */
.drreall-reform-areas { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-reform-areas__heading { text-align: left; margin-bottom: 0.5rem; }
.drreall-reform-areas__description { color: var(--drreall-color-muted); font-size: 1.05rem; margin: 0 0 2.5rem; }
.drreall-reform-areas__list { display: flex; flex-direction: column; gap: 1.5rem; }
.drreall-reform-areas__row {
	position: relative;
	display: flex;
	gap: 2rem;
	align-items: stretch;
	background: var(--drreall-color-surface-alt);
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-md);
	padding: 1.75rem;
	/* Arbitrary cap so a row never grows past this regardless of how much
	   text is in the short description — the image and content column
	   both fill this fixed height rather than driving it. */
	height: 280px;
	overflow: hidden;
	transition: border-color var(--drreall-transition), box-shadow var(--drreall-transition);
}
.drreall-reform-areas__row:hover { box-shadow: var(--drreall-shadow-sm); }
.drreall-reform-areas__row--right { flex-direction: row-reverse; }
.drreall-reform-areas__image { flex: 0 0 clamp(160px, 22vw, 240px); height: 100%; }
.drreall-reform-areas__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--drreall-radius-sm); }
.drreall-reform-areas__content { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.drreall-reform-areas__content h3 { font-size: 1.6rem; margin-bottom: 0.75rem; }

/* Fixed-height text area: the short and expanded descriptions occupy the
   exact same box and crossfade via opacity — this is what keeps the row's
   own size constant no matter which one is showing (no "expanding card"),
   with the expanded copy scrolling internally if it's longer than the box. */
.drreall-reform-areas__text { position: relative; height: 132px; margin-bottom: 1rem; }
.drreall-reform-areas__short,
.drreall-reform-areas__expanded {
	position: absolute;
	inset: 0;
	transition: opacity var(--drreall-transition), visibility var(--drreall-transition);
}
.drreall-reform-areas__short p,
.drreall-reform-areas__expanded-inner p {
	color: var(--drreall-color-muted);
	font-size: 0.98rem;
	overflow-wrap: break-word;
	margin: 0 0 0.85em;
}
.drreall-reform-areas__short p:last-child,
.drreall-reform-areas__expanded-inner p:last-child { margin-bottom: 0; }
.drreall-reform-areas__expanded {
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.drreall-reform-areas__expanded-inner a { color: var(--drreall-color-accent); text-decoration: underline; }
.drreall-reform-areas__row.is-expanded .drreall-reform-areas__short {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.drreall-reform-areas__row.is-expanded .drreall-reform-areas__expanded {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.drreall-reform-areas__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: none;
	color: var(--drreall-color-accent);
	font-weight: 700;
	font-size: 0.92rem;
	cursor: pointer;
	padding: 0;
}
.drreall-reform-areas__toggle .drreall-icon { width: 1em; height: 1em; transition: transform var(--drreall-transition-fast); }
.drreall-reform-areas__row.is-expanded .drreall-reform-areas__toggle .drreall-icon { transform: rotate(180deg); }

@media (max-width: 640px) {
	.drreall-reform-areas__row,
	.drreall-reform-areas__row--right {
		flex-direction: column;
		align-items: stretch;
		height: auto; /* the fixed desktop cap doesn't fit a stacked image+content layout */
		overflow: visible;
	}
	/* These RA images are tall portrait crops (~1:3). `height: auto` here
	   let the browser size the image from ITS OWN intrinsic aspect ratio
	   instead of the row — at a ~340px mobile width that computes to
	   roughly 1000px tall, which is what was swallowing the whole card and
	   hiding the text below it. Giving the image container an explicit
	   height (like the desktop 100%-of-280px does) and letting object-fit
	   crop into it fixes that the same way the desktop layout already works. */
	.drreall-reform-areas__image { flex-basis: auto; height: 200px; }
	.drreall-reform-areas__image img { height: 100%; }
	.drreall-reform-areas__content { height: auto; }
	.drreall-reform-areas__text { height: 168px; }
}

/* ---- Reform Areas v2 (cards with an in-place drawer, no modal) ---- */
.drreall-reform-v2 { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-reform-v2__heading { text-align: left; margin-bottom: 0.5rem; }
.drreall-reform-v2__description { color: var(--drreall-color-muted); font-size: 1.05rem; margin: 0 0 2.5rem; }
/* align-items left at its default (stretch) deliberately — cards must be
   uniform in size, so every card in a row is stretched to match the
   tallest one, with .drreall-reform-v2-card__body's flex:1 absorbing the
   extra height so the "Learn more" button still sits flush at the bottom. */
.drreall-reform-v2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 640px) { .drreall-reform-v2__grid { grid-template-columns: 1fr; } }
/* A lone card left over in the last row of a 2-column grid (an odd total,
   including the single-card case) — span both tracks and center it at
   one column's width instead of leaving it stuck in the left column. Only
   above the mobile breakpoint, where the grid is actually 2 columns. */
@media (min-width: 641px) {
	.drreall-reform-v2__grid > *:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: calc(50% - 0.75rem);
	}
}

.drreall-reform-v2-card {
	display: flex;
	flex-direction: column;
	background: var(--drreall-color-surface);
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-md);
	overflow: hidden;
	transition: box-shadow var(--drreall-transition-fast), border-color var(--drreall-transition-fast);
}
.drreall-reform-v2-card:hover { box-shadow: var(--drreall-shadow-sm); }

/* The "stage": a fixed-aspect-ratio box that never changes size — the
   image and the drawer both absolutely fill it and cross-fade/slide via
   opacity + transform, so toggling "Learn more" can never change the
   card's overall height (unlike animating max-height on separate boxes,
   where the vacated/gained space doesn't necessarily match up). */
.drreall-reform-v2-card__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--drreall-color-surface); }
.drreall-reform-v2-card__media {
	position: absolute; inset: 0;
	opacity: 1; transform: translateY(0);
	transition: opacity var(--drreall-transition), transform var(--drreall-transition);
}
/* position:absolute + inset:0 (rather than a plain height:100% on the img)
   is deliberate: a percentage height on a flex item's aspect-ratio-derived
   height is exactly the case where some browsers resolve it back to auto
   instead of the intended pixel height, which silently defeats the crop —
   sizing the img against the containing block's box has no such ambiguity. */
.drreall-reform-v2-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drreall-reform-v2-card.is-expanded .drreall-reform-v2-card__media { opacity: 0; transform: translateY(-16px); pointer-events: none; }

/* Drawer: fills the same stage, sliding up into place from below as the
   image slides away above it — reads as one drawer opening where the
   image used to be. Content taller than the stage scrolls internally
   (overflow-y:auto only once expanded) rather than growing the card. */
.drreall-reform-v2-card__drawer {
	position: absolute; inset: 0;
	opacity: 0; transform: translateY(16px); pointer-events: none;
	overflow: hidden;
	transition: opacity var(--drreall-transition), transform var(--drreall-transition);
}
.drreall-reform-v2-card.is-expanded .drreall-reform-v2-card__drawer {
	opacity: 1; transform: translateY(0); pointer-events: auto;
	overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
	.drreall-reform-v2-card__media,
	.drreall-reform-v2-card__drawer { transition: none; }
}
.drreall-reform-v2-card__drawer-inner { padding: 1rem; }
.drreall-reform-v2-card__drawer-inner p { color: var(--drreall-color-muted); line-height: 1.7; margin: 0 0 1rem; }
.drreall-reform-v2-card__drawer-inner p:last-child { margin-bottom: 0; }
.drreall-reform-v2-card__drawer-inner a { color: var(--drreall-color-accent); text-decoration: underline; }
.drreall-reform-v2-card__drawer-inner img { max-width: 100%; height: auto; border-radius: var(--drreall-radius-sm); }

.drreall-reform-v2-card__body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 1rem; }
.drreall-reform-v2-card__title { font-size: 1.15rem; margin: 0 0 0.35rem; }
.drreall-reform-v2-card__desc { color: var(--drreall-color-muted); font-size: 0.92rem; margin: 0 0 0.65rem; }

.drreall-reform-v2-card__more {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: none; border: none; padding: 0; cursor: pointer;
	font-weight: 600; font-size: 0.9rem; color: var(--drreall-color-accent);
	transition: gap var(--drreall-transition-fast), color var(--drreall-transition-fast);
}
.drreall-reform-v2-card__more .drreall-icon { width: 1em; height: 1em; transition: transform var(--drreall-transition-fast); }
.drreall-reform-v2-card__more:hover { gap: 0.6rem; }
.drreall-reform-v2-card.is-expanded .drreall-reform-v2-card__more .drreall-icon { transform: rotate(180deg); }

/* ---- Facebook Posts (vertical timeline) ---- */
.drreall-facebook { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-facebook__heading { text-align: left; margin-bottom: 0.5rem; }
.drreall-facebook__description { color: var(--drreall-color-muted); font-size: 1.05rem; margin: 0 0 2.5rem; }
.drreall-facebook__empty { color: var(--drreall-color-muted); }
.drreall-facebook__notice { color: var(--drreall-color-muted); font-size: 0.95rem; }
.drreall-facebook__error { color: var(--drreall-color-brick); font-size: 0.95rem; }
.drreall-facebook--setup { border: 1px dashed var(--drreall-color-border); border-radius: var(--drreall-radius-md); }

.drreall-facebook__list { position: relative; display: flex; flex-direction: column; gap: 2rem; max-width: 70ch; }
/* One continuous connecting line for the whole list (rather than a
   per-item line whose length would need to match that item's variable
   content height) — simplest way to get an even timeline regardless of
   how long each post's message/date/image block ends up being. */
.drreall-facebook__list::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--drreall-color-border);
}
.drreall-facebook__item { position: relative; padding-left: 2rem; }
.drreall-facebook__marker {
	position: absolute; left: 10px; top: 0.4rem;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--drreall-color-accent);
	border: 2px solid var(--drreall-color-surface);
}
.drreall-facebook__date { display: block; font-size: 0.85rem; color: var(--drreall-color-muted); margin-bottom: 0.4rem; }
.drreall-facebook__image { display: block; width: 100%; max-width: 420px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--drreall-radius-sm); margin-bottom: 0.65rem; }
.drreall-facebook__message { margin: 0 0 0.5rem; line-height: 1.6; }
.drreall-facebook__link {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 600; font-size: 0.9rem; color: var(--drreall-color-accent);
	transition: gap var(--drreall-transition-fast);
}
.drreall-facebook__link .drreall-icon { width: 1em; height: 1em; }
.drreall-facebook__link:hover { gap: 0.6rem; }
.drreall-facebook__cta { margin-top: 2rem; }

.drreall-bg-navy .drreall-facebook__list::before { background: rgba(255,255,255,0.25); }
.drreall-bg-navy .drreall-facebook__marker { background: var(--drreall-color-gold); }
.drreall-bg-navy .drreall-facebook__description,
.drreall-bg-navy .drreall-facebook__date,
.drreall-bg-navy .drreall-facebook__notice,
.drreall-bg-navy .drreall-facebook__empty { color: rgba(255,255,255,0.8); }
.drreall-bg-navy .drreall-facebook__link { color: var(--drreall-color-gold); }

/* ---- Posts Showcase ---- */
.drreall-showcase { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-showcase__heading { text-align: left; margin-bottom: 2.5rem; }
/* Scoped to the showcase block specifically — .drreall-post-card__title is
   shared with the archive/search/blog-index listings, which should keep
   showing the full title, uncapped. */
.drreall-showcase .drreall-post-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.drreall-showcase__empty { text-align: center; color: var(--drreall-color-muted); }
.drreall-showcase__scroll-wrap { position: relative; display: flex; align-items: stretch; gap: 1rem; }
.drreall-showcase__track {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 0;
	/* Vertical padding only, for hover-lift/shadow room — trailing
	   right padding is NOT used for end-of-scroll spacing: some browsers
	   don't include a flex scroll container's end padding in its
	   scrollable area, which is why the last card kept clipping despite
	   padding being set. .drreall-showcase__spacer (a real flex item) is
	   used for that instead — see below. */
	padding-block: 0.75rem 1rem;
	flex: 1;
	scrollbar-width: none;
}
.drreall-showcase__track::-webkit-scrollbar { display: none; }
.drreall-showcase__track-item { flex: 0 0 var(--drreall-showcase-item-w, clamp(260px, 30vw, 340px)); scroll-snap-align: start; scroll-snap-stop: always; display: flex; }
.drreall-showcase__track-item .drreall-post-card { width: 100%; }
.drreall-showcase__spacer { flex: 0 0 clamp(1.5rem, 4vw, 2.5rem); scroll-snap-align: none; }
.drreall-showcase__arrow {
	flex-shrink: 0; align-self: center; width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--drreall-color-border); background: var(--drreall-color-surface); color: var(--drreall-color-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background var(--drreall-transition-fast), color var(--drreall-transition-fast), border-color var(--drreall-transition-fast), transform var(--drreall-transition-fast);
}
.drreall-showcase__arrow:hover:not(:disabled) { background: var(--drreall-color-accent); color: #fff; border-color: var(--drreall-color-accent); transform: scale(1.06); }
.drreall-showcase__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 640px) { .drreall-showcase__arrow { display: none; } }

/* ---- Partners & Collaborators ---- */
.drreall-partners { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-partners__heading { text-align: left; margin-bottom: 2.5rem; }
/* Flexbox + justify-content:center (rather than grid's auto-fit/1fr,
   which stretches a short last row's items wider instead of centering
   them as a compact group) — same technique as Team Members v2's grid. */
.drreall-partners__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; }
.drreall-partners__item { position: relative; display: flex; flex: 0 1 140px; align-items: center; justify-content: center; padding: 1rem; }
/* Absolutely positioned so it never affects row height / other items —
   it only ever overlays into the gap already left by .drreall-partners__grid's
   gap, appearing on hover (or keyboard focus) with a small fade + rise. */
.drreall-partners__name {
	position: absolute; top: 100%; left: 50%;
	width: max-content;
	max-width: 220px;
	margin-top: 0.4rem;
	padding: 0.25em 0.75em;
	border-radius: var(--drreall-radius-sm);
	background: var(--drreall-color-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -4px);
	transition: opacity var(--drreall-transition-fast), transform var(--drreall-transition-fast);
	z-index: 1;
}
.drreall-partners__item:hover .drreall-partners__name,
.drreall-partners__item:focus-within .drreall-partners__name {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) { .drreall-partners__name { transition: none; } }
.drreall-partners__item img {
	max-height: 64px; width: auto;
	transition: transform var(--drreall-transition);
}
.drreall-partners__item:hover img { transform: scale(1.05); }


/* ---- Team Members v2 (cards + read more, same drawer pattern as Reform
   Areas v2) ---- */
.drreall-team-v2 { padding-block: clamp(1.75rem, 3.5vw, 3.5rem); }
.drreall-team-v2__heading { text-align: left; margin-bottom: 0.5rem; }
.drreall-team-v2__description { color: var(--drreall-color-muted); font-size: 1.05rem; margin: 0 0 2.5rem; }
/* Flexbox + justify-content:center (rather than CSS Grid) is deliberate:
   with an arbitrary total (not just even/odd), the last row can be short
   by either 1 or 2 cards — flex-wrap centers whichever it is for free,
   no nth-child math needed. */
.drreall-team-v2__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.drreall-team-v2-card {
	flex: 0 1 calc((100% - 3rem) / 3);
	max-width: calc((100% - 3rem) / 3);
	text-align: center;
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-md);
	padding: 2rem 1.25rem;
	transition: box-shadow var(--drreall-transition-fast), border-color var(--drreall-transition-fast);
}
.drreall-team-v2-card:hover { box-shadow: var(--drreall-shadow-sm); }
@media (max-width: 900px) { .drreall-team-v2-card { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } }
@media (max-width: 560px) { .drreall-team-v2-card { flex-basis: 100%; max-width: 100%; } }

/* Cards background — set independently from the section's own background
   (via the "Cards background" control), applied here to a grid modifier
   class rather than an attribute on the card itself: each card is
   rendered by the separate drreall/team-members-v2-item child block, with
   no direct way to read this parent's attribute.
   On a navy section, the generic `.drreall-bg-navy h1,h2,h3,h4{color:#fff}`
   rule would otherwise still turn a white/dirty card's name white too
   (it's a DOM descendant regardless of the card's own background) — the
   explicit color below wins on specificity (two classes vs. one) and
   keeps white/dirty cards readable regardless of what section they sit in. */
.drreall-team-v2__grid--cards-white .drreall-team-v2-card { background: var(--drreall-color-surface); }
.drreall-team-v2__grid--cards-white .drreall-team-v2-card__name,
.drreall-team-v2__grid--cards-dirty .drreall-team-v2-card__name { color: var(--drreall-color-ink); }
.drreall-team-v2__grid--cards-dirty .drreall-team-v2-card { background: var(--drreall-color-dirty-white); }
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card {
	background: var(--drreall-color-accent);
	border-color: rgba(255,255,255,0.18);
}
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__name { color: #fff; }
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__title,
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__more,
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__email { color: var(--drreall-color-gold); }
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__drawer-inner p { color: rgba(255,255,255,0.8); }
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__photo img { border-color: rgba(255,255,255,0.35); }
.drreall-team-v2__grid--cards-navy .drreall-team-v2-card__photo--placeholder { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }

/* Fixed-height stage, same cross-fade technique as Reform Areas v2: the
   circular photo and the drawer both absolutely fill it and swap via
   opacity + transform, so "Learn more" can never change the card's
   height (the drawer's content scrolls internally instead of growing). */
.drreall-team-v2-card__stage { position: relative; width: 100%; height: 300px; margin-bottom: 1.25rem; }
.drreall-team-v2-card__photo {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 1; transform: translateY(0);
	transition: opacity var(--drreall-transition), transform var(--drreall-transition);
}
.drreall-team-v2-card__photo img {
	width: 190px; height: 190px; border-radius: 50%; object-fit: cover;
	border: 4px solid var(--drreall-color-border);
}
.drreall-team-v2-card__photo--placeholder {
	width: 190px; height: 190px; border-radius: 50%;
	background: var(--drreall-color-surface-alt); border: 4px solid var(--drreall-color-border);
}
.drreall-team-v2-card.is-expanded .drreall-team-v2-card__photo { opacity: 0; transform: translateY(-16px); pointer-events: none; }

.drreall-team-v2-card__drawer {
	position: absolute; inset: 0;
	opacity: 0; transform: translateY(16px); pointer-events: none;
	overflow: hidden; text-align: left;
	transition: opacity var(--drreall-transition), transform var(--drreall-transition);
}
.drreall-team-v2-card.is-expanded .drreall-team-v2-card__drawer {
	opacity: 1; transform: translateY(0); pointer-events: auto;
	overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
	.drreall-team-v2-card__photo,
	.drreall-team-v2-card__drawer { transition: none; }
}
.drreall-team-v2-card__drawer-inner { padding: 0.5rem; }
.drreall-team-v2-card__drawer-inner p { color: var(--drreall-color-muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1rem; }
.drreall-team-v2-card__email {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem;
}
.drreall-team-v2-card__email .drreall-icon { width: 1em; height: 1em; flex-shrink: 0; }

.drreall-team-v2-card__name { margin: 0 0 0.15rem; font-size: 1.05rem; }
.drreall-team-v2-card__title { color: var(--drreall-color-accent); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.75rem; }
.drreall-team-v2-card__more {
	margin: 0 auto;
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: none; border: none; padding: 0; cursor: pointer;
	font-weight: 600; font-size: 0.9rem; color: var(--drreall-color-accent);
	transition: gap var(--drreall-transition-fast), color var(--drreall-transition-fast);
}
.drreall-team-v2-card__more .drreall-icon { width: 1em; height: 1em; transition: transform var(--drreall-transition-fast); }
.drreall-team-v2-card__more:hover { gap: 0.6rem; }
.drreall-team-v2-card.is-expanded .drreall-team-v2-card__more .drreall-icon { transform: rotate(180deg); }

/* ---- Zoomable Image ---- */
.drreall-zoomable { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.drreall-zoomable__viewport {
	position: relative; overflow: hidden; border-radius: var(--drreall-radius-md);
	border: 1px solid var(--drreall-color-border); background: var(--drreall-color-surface-alt);
	cursor: zoom-in; touch-action: none; user-select: none;
	box-shadow: var(--drreall-shadow-sm);
}
.drreall-zoomable__viewport.is-zoomed { cursor: grab; }
.drreall-zoomable__viewport:active.is-zoomed { cursor: grabbing; }
.drreall-zoomable__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.drreall-zoomable__controls { position: absolute; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.4rem; z-index: 2; }
.drreall-zoomable__btn {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--drreall-color-border);
	background: var(--drreall-color-surface); color: var(--drreall-color-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background var(--drreall-transition-fast), color var(--drreall-transition-fast), transform var(--drreall-transition-fast);
	box-shadow: var(--drreall-shadow-sm);
}
.drreall-zoomable__btn:hover { background: var(--drreall-color-accent); color: #fff; border-color: var(--drreall-color-accent); transform: scale(1.06); }
.drreall-zoomable__hint {
	position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.5em;
	background: rgba(17,17,17,0.65); color: #fff; font-size: 0.8rem; padding: 0.5em 0.85em; border-radius: 999px;
	z-index: 2; pointer-events: none; transition: opacity 0.3s ease;
}
.drreall-zoomable__viewport.is-zoomed .drreall-zoomable__hint { opacity: 0; }
.drreall-zoomable__hint .drreall-icon { width: 1em; height: 1em; }
.drreall-zoomable__caption { margin-top: 0.75rem; text-align: center; color: var(--drreall-color-muted); font-size: 0.9rem; }
@media (max-width: 640px) { .drreall-zoomable__hint span { display: none; } }

/* ==========================================================
   Background variants — every block supports "White" (default)
   or "Drreall Blue" (navy). Navy swaps body text to white and
   accents/buttons to gold for contrast, automatically.
   ========================================================== */
/* Every block root is `max-width` + `padding-inline` constrained (so its
   CONTENT lines up with the rest of the page), but when a background color
   is set it needs to bleed full viewport width regardless — a plain
   `background` on that same constrained box only paints within its own
   1240px-wide content box, leaving white gutters on either side. This
   pseudo-element bleeds edge-to-edge behind the constrained content,
   independent of whatever width/padding the block itself has. */
.drreall-bg-navy { position: relative; color: #fff; }
.drreall-bg-navy::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--drreall-color-accent);
	z-index: -1;
}

.drreall-bg-dirty { position: relative; }
.drreall-bg-dirty::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--drreall-color-dirty-white);
	z-index: -1;
}
.drreall-bg-dirty .drreall-reform-areas__row,
.drreall-bg-dirty .drreall-post-card,
.drreall-bg-dirty .drreall-zoomable__viewport { background: var(--drreall-color-surface); }

.drreall-bg-navy .drreall-expertise__eyebrow,
.drreall-bg-navy .drreall-reform-areas__heading,
.drreall-bg-navy .drreall-showcase__heading,
.drreall-bg-navy .drreall-partners__heading { color: var(--drreall-color-gold); }

.drreall-bg-navy .drreall-expertise__title,
.drreall-bg-navy h1, .drreall-bg-navy h2, .drreall-bg-navy h3, .drreall-bg-navy h4 { color: #fff; }

.drreall-bg-navy .drreall-expertise__description,
.drreall-bg-navy .drreall-reform-areas__description,
.drreall-bg-navy .drreall-reform-areas__short p,
.drreall-bg-navy .drreall-showcase__empty { color: rgba(255,255,255,0.8); }

.drreall-bg-navy .drreall-btn { background: var(--drreall-color-gold); color: #111; }
.drreall-bg-navy .drreall-btn:hover { background: color-mix(in srgb, var(--drreall-color-gold) 85%, black); }
.drreall-bg-navy .drreall-btn--outline { color: var(--drreall-color-gold); border-color: var(--drreall-color-gold); }
.drreall-bg-navy .drreall-btn--outline:hover { background: var(--drreall-color-gold); color: #111; }

.drreall-bg-navy .drreall-reform-areas__row {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.18);
}
.drreall-bg-navy .drreall-reform-areas__row:hover { border-color: var(--drreall-color-gold); }
.drreall-bg-navy .drreall-reform-areas__toggle { color: var(--drreall-color-gold); }
.drreall-bg-navy .drreall-reform-areas__expanded-inner p { color: rgba(255,255,255,0.85); }
.drreall-bg-navy .drreall-reform-areas__expanded-inner a { color: var(--drreall-color-gold); }

.drreall-bg-navy .drreall-showcase__arrow,
.drreall-bg-navy .drreall-zoomable__btn {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.25);
	color: #fff;
}
.drreall-bg-navy .drreall-showcase__arrow:hover:not(:disabled),
.drreall-bg-navy .drreall-zoomable__btn:hover {
	background: var(--drreall-color-gold);
	border-color: var(--drreall-color-gold);
	color: #111;
}

.drreall-bg-navy .drreall-zoomable__viewport { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.drreall-bg-navy .drreall-zoomable__caption { color: rgba(255,255,255,0.8); }


.drreall-bg-navy .drreall-post-card {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.18);
}
.drreall-bg-navy .drreall-post-card__title a { color: #fff; }
.drreall-bg-navy .drreall-post-card__excerpt { color: rgba(255,255,255,0.75); }
.drreall-bg-navy .drreall-post-card__cat { color: var(--drreall-color-gold); border-color: var(--drreall-color-gold); }

.drreall-bg-navy .drreall-reform-v2-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
/* The stage (image placeholder + expanded drawer background) is opaque,
   so on navy it needs its own navy-tinted fill — otherwise it keeps the
   light dirty-white background from the default rule, which reads as a
   stray off-brand patch instead of matching the rest of the card. */
.drreall-bg-navy .drreall-reform-v2-card__stage { background: rgba(255,255,255,0.08); }
.drreall-bg-navy .drreall-reform-v2-card__desc { color: rgba(255,255,255,0.8); }
.drreall-bg-navy .drreall-reform-v2-card__more { color: var(--drreall-color-gold); }
.drreall-bg-navy .drreall-reform-v2-card__drawer-inner p { color: rgba(255,255,255,0.8); }
.drreall-bg-navy .drreall-reform-v2-card__drawer-inner a { color: var(--drreall-color-gold); }

.drreall-bg-navy .drreall-team-v2__description { color: rgba(255,255,255,0.8); }

/* ---- Small Hero (page-header banner) ---- */
.drreall-small-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.drreall-small-hero--image {
	background-size: cover;
	background-position: center;
	color: #fff;
}
.drreall-small-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(24,30,74,0.7) 0%, rgba(24,30,74,0.45) 100%);
}
.drreall-small-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(320px, 38vw, 460px);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}
.drreall-small-hero__content h1 { margin-bottom: 0.5rem; }
.drreall-small-hero__content p { margin: 0 auto; max-width: 60ch; font-size: 1.1rem; opacity: 0.9; }
.drreall-small-hero--image .drreall-small-hero__content h1 { color: #fff; }
.drreall-small-hero.drreall-bg-navy .drreall-small-hero__content h1,
.drreall-small-hero.drreall-bg-navy .drreall-small-hero__content p { color: #fff; }