/* =============================================================================
   Legacy Wellness Center — main stylesheet
   Tokens sourced from design-tokens.json (W3C DTCG) / design.md
   Breakpoints: 690px phone / 999px tablet / 1300px laptop→desktop
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Brand core */
	--c-primary: #8A6A3B;
	--c-gold-link: #A3773C;
	--c-gold-card: #A6783F;
	--c-gold-dark: #6F542F;
	--c-accent-soft: #EFE7DC;
	--c-background: #F7F4EF;
	--c-surface: #FFFFFF;
	--c-surface-2: #F1ECE4;
	--c-header-bg: #F4ECE2;
	--c-text-primary: #1F1F1F;
	--c-text-heading: #191614;
	--c-text-muted: #6F6A63;
	--c-text-inverse: #F5EFE6;
	--c-border: #DDD4C8;
	--c-footer-black: #000000;

	/* Heritage hues */
	--c-plum: #56244A;
	--c-plum-deep: #3A1730;
	--c-plum-card: #5B2346;
	--c-ink-navy: #131B2B;
	--c-slate-navy: #2F3E5C;
	--c-slate-navy-2: #263754;
	--c-hunter: #2A7B57;
	--c-hunter-mid: #25624A;
	--c-hunter-deep: #153529;
	--c-forest: #123F2D;

	/* Section tints */
	--c-tint-mint: #EFF4F2;
	--c-tint-slate: #EEF2F3;
	--c-tint-plum: #F4EDF2;

	/* Texture-sampled band fallbacks (flat fills used when no texture image) */
	--c-plum-cloth: #30162C;
	--c-navy-cloth: #101623;
	--c-green-cloth: #172A22;
	--c-plum-engraving: #3A1833;
	--c-hero-plum: #5F1950;

	/* Typography */
	--font-display: 'Belleza', 'Trebuchet MS', sans-serif;
	--font-serif: 'Cormorant', Georgia, serif;
	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--font-utility: 'League Spartan', sans-serif;

	--fs-display: 80px;
	--lh-display: 0.94;
	--ls-display: -0.04em;
	--fs-h2: 48px;
	--lh-h2: 58px;
	--fs-h3: 38px;
	--lh-h3: 50px;
	--fs-h4: 26px;
	--lh-h4: 40px;
	--fs-body: 16px;
	--lh-body: 28px;
	--ls-heading: -0.03em;
	--ls-caps: 0.1em;

	/* Radii */
	--r-button: 5px;
	--r-card-md: 20px;
	--r-card-mobile: 24px;
	--r-card-lg: 34px;

	/* Motion */
	--ease-brand: cubic-bezier(0.25, 1, 0.33, 1);
	--dur-button: 450ms;
	--dur-arrow: 280ms;
	--dur-reveal: 800ms;

	/* Layout */
	--container-max: 1650px;
	--container-pad: 100px;
	--card-pad: 42px;
}

@media (max-width: 999px) {
	:root {
		--fs-display: 56px;
		--fs-h2: 40px;
		--lh-h2: 50px;
		--fs-h3: 32px;
		--lh-h3: 42px;
		--container-pad: 40px;
	}
}

@media (min-width: 1000px) and (max-width: 1300px) {
	:root {
		--fs-display: 60px;
	}
}

@media (max-width: 690px) {
	:root {
		--fs-display: 44px;
		--fs-h2: 34px;
		--lh-h2: 42px;
		--fs-h4: 23px;
		--lh-h4: 34px;
		--fs-body: 15px;
		--lh-body: 26px;
		--container-pad: 24px;
		--card-pad: 28px;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	color: var(--c-text-primary);
	background-color: var(--c-surface);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
	margin: 0 0 1em;
}

a {
	color: var(--c-gold-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--c-gold-dark);
}

b, strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.section {
	padding-top: 5%;
	padding-bottom: 5%;
}

.section--white {
	background-color: var(--c-surface);
}

.section--tint-plum {
	background-color: var(--c-tint-plum);
}

.section--tint-mint {
	background-color: var(--c-tint-mint);
}

.section--tint-slate {
	background-color: var(--c-tint-slate);
}

.section--band {
	padding-top: 90px;
	padding-bottom: 90px;
}

/* Full-bleed heritage bands: each band ships with its bundled texture from
   assets/img/content/ as the default (token color behind it as a loading /
   failure fallback). Rendered cover / center-bottom (page-title bands
   re-crop to center — see .page-band — because the texture exports carry
   a white bottom strip). */
.band {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}

.band--hero-plum {
	background-color: var(--c-hero-plum);
	background-image: url("../img/content/Legacy-Wellness-Center-Home-Page-bg-2.png");
}

.band--plum {
	background-color: var(--c-plum-cloth);
	background-image: url("../img/content/Purple-BG-1-scaled.jpg");
}

.band--ink {
	background-color: var(--c-navy-cloth);
	background-image: url("../img/content/Blue-BG-1-scaled.png");
}

.band--hunter {
	background-color: var(--c-green-cloth);
	background-image: url("../img/content/Green-BG-2-scaled.png");
}

.band--green-cloth {
	background-color: var(--c-green-cloth);
	background-image: url("../img/content/Green-BG-2-scaled.png");
}

.band--plum-engraving {
	background-color: var(--c-plum-engraving);
	background-image: url("../img/content/Legacy-Background-DP-1-scaled.jpg");
}

/* -------------------------------------------------------------------------
   4. Typography scale
   ------------------------------------------------------------------------- */
.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	font-weight: 400;
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--c-text-heading);
	margin: 0 0 0.35em;
}

.display--inverse {
	color: #FFFFFF;
}

.h2-serif {
	font-family: var(--font-serif);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: var(--c-text-heading);
	margin: 0 0 0.5em;
}

.h2-serif--inverse {
	color: #FFFFFF;
}

.h3-serif {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: var(--c-text-heading);
	margin: 0 0 0.5em;
}

.lede-belleza {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--c-text-heading);
	margin: 0 0 1.2em;
}

.eyebrow {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 23px;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	margin: 0 0 18px;
}

.eyebrow--inverse { color: #FFFFFF; }
.eyebrow--ink { color: var(--c-text-heading); }
.eyebrow--plum { color: var(--c-plum); }
.eyebrow--gold { color: var(--c-gold-link); }

.label {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 25px;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-text-heading);
	margin: 1.8em 0 0.4em;
}

/* -------------------------------------------------------------------------
   5. Buttons — Inter 14/600 caps, 5px radius, flat, no shadow
   ------------------------------------------------------------------------- */
.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 15px 35px;
	border: 0;
	border-radius: var(--r-button);
	cursor: pointer;
	transition: background-color var(--dur-button) var(--ease-brand), color var(--dur-button) var(--ease-brand);
}

/* design-a11y.md: white on #A3773C is 3.99:1 (fails AA at 14px/600);
   use --c-primary #8A6A3B (4.99:1) per the rebuild guidance. */
.btn--gold { background-color: var(--c-primary); color: #FFFFFF; }
.btn--gold:hover, .btn--gold:focus-visible { background-color: var(--c-gold-dark); color: #FFFFFF; }

.btn--white { background-color: #FFFFFF; color: #000000; }
.btn--white:hover, .btn--white:focus-visible { background-color: var(--c-accent-soft); color: #000000; }

.btn--plum { background-color: var(--c-plum); color: #FFFFFF; }
.btn--plum:hover, .btn--plum:focus-visible { background-color: var(--c-plum-deep); color: #FFFFFF; }

.btn--ink { background-color: var(--c-ink-navy); color: #FFFFFF; }
.btn--ink:hover, .btn--ink:focus-visible { background-color: var(--c-gold-dark); color: #FFFFFF; }

.btn--hunter { background-color: var(--c-hunter-deep); color: #FFFFFF; }
.btn--hunter:hover, .btn--hunter:focus-visible { background-color: var(--c-gold-dark); color: #FFFFFF; }

.btn:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 3px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 34px;
}

/* -------------------------------------------------------------------------
   6. Accessibility helpers
   ------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	background: var(--c-surface);
	color: var(--c-text-primary);
	padding: 12px 20px;
	border-radius: var(--r-button);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   7. Header — transparent, logo-only, floats over each page's band
   ------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.site-header__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 14px 50px;
}

.site-header__logo .custom-logo-link {
	display: inline-block;
}

.site-header__logo img {
	display: block;
	width: clamp(170px, 24vw, 348px);
	height: auto;
}

.site-header__nav ul {
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
}

.site-header__nav a {
	font-family: var(--font-utility);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
}

.site-header__nav a:hover {
	color: var(--c-accent-soft);
}

@media (max-width: 690px) {
	.site-header__inner {
		padding: 12px 24px;
	}
}

/* -------------------------------------------------------------------------
   8. Page-title band — oversized Belleza title cropping at the band edge
   ------------------------------------------------------------------------- */
.page-band {
	display: flex;
	align-items: flex-end;
	min-height: 352px;
	overflow: hidden;
	padding-top: 140px;
	/* Source texture exports carry a white strip along their bottom edge;
	   centering the cover-crop discards it so the title stays legible against
	   the cloth texture, matching the live site's visible band. */
	background-position: center;
}

.page-band--compact {
	min-height: 280px;
}

.page-band__title {
	margin: 0 0 -0.07em;
	font-size: calc(var(--fs-display) * 1.3);
}

@media (max-width: 999px) {
	.page-band {
		min-height: 260px;
		padding-top: 120px;
	}
}

@media (max-width: 690px) {
	.page-band {
		min-height: 200px;
		padding-top: 100px;
	}

	.page-band__title {
		font-size: calc(var(--fs-display) * 1.1);
	}
}

/* -------------------------------------------------------------------------
   9. Media / photo-collage treatments
   ------------------------------------------------------------------------- */
.media {
	margin: 0;
}

.media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media--problem {
	aspect-ratio: 590 / 496;
	background-color: var(--c-surface-2);
	overflow: hidden;
}

/* Collages are transparent PNG composites — contain, no crop, no bg. */
.media--collage {
	background: none;
}

.media--collage img {
	object-fit: contain;
}

.media--collage-culture { aspect-ratio: 1202 / 900; }
.media--collage-conference { aspect-ratio: 927 / 1020; max-width: 480px; }
.media--collage-services { aspect-ratio: 1201 / 900; }

/* -------------------------------------------------------------------------
   10. Home: hero
   ------------------------------------------------------------------------- */
.hero {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 180px 0 90px;
}

.hero__content {
	max-width: 920px;
}

.hero__text {
	max-width: 840px;
	color: #FFFFFF;
	margin-bottom: 0;
}

.hero .display {
	margin-bottom: 0.45em;
}

@media (max-width: 690px) {
	.hero {
		padding-top: 150px;
	}

	.btn-row {
		flex-direction: column;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
   11. Home: problem-statement split
   ------------------------------------------------------------------------- */
.split-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 85px;
	align-items: center;
}

.split-section__body .btn {
	margin-top: 12px;
}

@media (max-width: 999px) {
	.split-section__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
}

/* -------------------------------------------------------------------------
   12. Home: culture band + pillar cards
   ------------------------------------------------------------------------- */
.band--photo {
	position: relative;
	background-color: var(--c-ink-navy);
	background-image: url("../img/content/Screenshot-2025-12-18-at-11.38.48-PM-scaled.jpg");
	background-position: center center;
}

.band--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(16, 22, 35, 0.82);
}

.band--photo > .container {
	position: relative;
}

.band__intro {
	max-width: 900px;
	margin: 0 auto 54px;
	text-align: center;
}

.band__lede {
	color: var(--c-text-inverse);
	margin-bottom: 0;
}

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.pillar-card {
	position: relative;
	background-color: var(--c-surface);
	text-align: center;
	padding: 45px 26px 60px;
	min-height: 250px;
}

.pillar-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--c-text-heading);
	margin-bottom: 14px;
}

.pillar-card__text {
	margin-bottom: 0;
}

.pillar-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
}

.pillar-card__bar--hunter-deep { background-color: var(--c-hunter-deep); }
.pillar-card__bar--hunter { background-color: var(--c-hunter); }
.pillar-card__bar--plum { background-color: var(--c-plum); }
.pillar-card__bar--gold { background-color: var(--c-gold-card); }
.pillar-card__bar--slate { background-color: var(--c-slate-navy); }
.pillar-card__bar--forest { background-color: var(--c-forest); }

@media (max-width: 999px) {
	.pillar-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 690px) {
	.pillar-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   13. Home: services overview — offset columns + rotating badge
   ------------------------------------------------------------------------- */
.services-overview {
	overflow: hidden;
}

.services-overview__container {
	position: relative;
}

.services-overview__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	align-items: start;
}

.services-overview__col {
	display: grid;
	gap: 34px;
	align-content: start;
}

.services-overview__col:first-child {
	padding-top: 78px;
}

.services-overview__col--last {
	padding-top: 34px;
}

.services-overview__heading {
	margin-bottom: 12px;
}

/* Rotating badge — SVG text-on-path, hangs off the top-right edge */
.rotating-badge {
	position: absolute;
	top: -46px;
	right: -64px;
	width: 214px;
	height: 214px;
	pointer-events: none;
	z-index: 2;
}

.rotating-badge svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: lwc-rotate 20s linear infinite;
	transform-origin: 50% 50%;
}

.rotating-badge__text {
	font-family: var(--font-serif);
	font-size: 21px;
	letter-spacing: 0.08em;
	fill: var(--c-text-heading);
}

@keyframes lwc-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (max-width: 999px) {
	.services-overview__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px;
	}

	.services-overview__col:first-child,
	.services-overview__col--last {
		padding-top: 0;
	}

	.rotating-badge {
		top: -30px;
		right: -40px;
		width: 150px;
		height: 150px;
	}
}

@media (max-width: 690px) {
	.services-overview__cols {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   14. Service category cards (color-coded, 34px radius, arrow hover)
   ------------------------------------------------------------------------- */
.service-card {
	position: relative;
	display: block;
	width: 100%;
	min-height: 320px;
	background-color: var(--c-slate-navy);
	border-radius: var(--r-card-lg);
	padding: var(--card-pad) var(--card-pad) 60px;
	overflow: hidden;
	text-decoration: none;
}

.service-card--slate { background-color: var(--c-slate-navy); }
.service-card--hunter { background-color: var(--c-hunter); border-radius: var(--r-card-md); }
.service-card--plum { background-color: var(--c-plum-card); }
.service-card--gold { background-color: var(--c-gold-card); }
.service-card--forest { background-color: var(--c-forest); }

.service-card__content {
	display: block;
	max-width: 90%;
}

.service-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--c-text-inverse);
	margin: 0 0 26px;
}

.service-card__item {
	display: block;
	color: var(--c-text-inverse);
	margin: 0 0 10px;
}

.service-card__item:last-child {
	margin-bottom: 0;
}

.service-card__arrow {
	position: absolute;
	right: 34px;
	bottom: 28px;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-inverse);
	transition: transform var(--dur-arrow) ease;
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
	transform: translateX(8px);
}

.service-card:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.75);
	outline-offset: 4px;
}

@media (max-width: 690px) {
	.service-card {
		border-radius: var(--r-card-mobile);
		min-height: 0;
		padding-bottom: 90px;
	}

	.service-card__arrow {
		width: 44px;
		height: 44px;
	}
}

/* -------------------------------------------------------------------------
   15. Home: About Us band
   ------------------------------------------------------------------------- */
.about-band__title {
	margin-bottom: 0.4em;
}

.about-band__text {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: -0.02em;
	color: var(--c-text-inverse);
	max-width: 1180px;
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   16. Inner pages: intro (About / Meeting Space)
   ------------------------------------------------------------------------- */
.page-intro__body {
	max-width: 1120px;
	margin-left: 4.5%;
	padding-top: 48px;
}

.page-intro__body .btn {
	margin-top: 8px;
}

@media (max-width: 690px) {
	.page-intro__body {
		margin-left: 0;
		padding-top: 20px;
	}
}

/* -------------------------------------------------------------------------
   17. About: Care Without Barriers
   ------------------------------------------------------------------------- */
.care-barriers__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 70px;
	align-items: start;
}

.care-barriers__title {
	font-size: calc(var(--fs-display) * 0.82);
}

.care-barriers__body .btn {
	margin-top: 16px;
}

.care-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.care-list__row {
	background-color: var(--c-surface);
	padding: 22px 28px;
	margin-bottom: 18px;
}

.care-list__row:last-child {
	margin-bottom: 0;
}

@media (max-width: 999px) {
	.care-barriers__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
}

/* -------------------------------------------------------------------------
   18. About: Rooted in Culture / Community Powered
   ------------------------------------------------------------------------- */
.rooted__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 70px;
	align-items: start;
}

.rooted__title {
	font-size: calc(var(--fs-display) * 0.82);
}

.rooted__body p:last-child {
	margin-bottom: 0;
}

.community__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 90px;
	align-items: center;
}

.community__lede {
	font-family: var(--font-serif);
	font-size: calc(var(--fs-h2) * 0.92);
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: #A8A29A;
	margin-bottom: 0;
}

.community__lede strong {
	font-weight: 600;
	color: var(--c-text-heading);
}

@media (max-width: 999px) {
	.rooted__grid,
	.community__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
}

/* -------------------------------------------------------------------------
   19. Services: intro + inline color-coded links
   ------------------------------------------------------------------------- */
.services-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1.55fr;
	gap: 90px;
	align-items: start;
	padding-top: 48px;
}

.services-intro__lede {
	margin-bottom: 0;
}

.service-links {
	margin: 6px 0 0;
	font-weight: 700;
}

.service-link {
	font-family: var(--font-sans);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

.service-links__sep {
	color: var(--c-text-primary);
	font-weight: 400;
}

.service-link--hunter-deep { color: var(--c-hunter-deep); }
.service-link--hunter-mid { color: var(--c-hunter-mid); }
.service-link--hunter { color: var(--c-hunter-mid); }
.service-link--plum { color: var(--c-plum); }
.service-link--gold { color: var(--c-gold-link); }
.service-link--slate { color: var(--c-slate-navy-2); }
.service-link--forest { color: var(--c-forest); }

.service-link:hover {
	color: var(--c-gold-dark);
}

@media (max-width: 999px) {
	.services-intro__grid {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-top: 12px;
	}
}

/* -------------------------------------------------------------------------
   20. Services: detail cards + CTA card
   ------------------------------------------------------------------------- */
.service-details__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px 40px;
	align-items: stretch;
}

.service-detail-card {
	position: relative;
	background-color: var(--c-surface);
	padding: 90px 100px 110px;
	scroll-margin-top: 40px;
}

.service-detail-card__icon {
	display: block;
	margin-bottom: 40px;
}

.service-detail-card--hunter .service-detail-card__icon { color: var(--c-hunter-deep); }
.service-detail-card--forest .service-detail-card__icon { color: var(--c-forest); }
.service-detail-card--plum .service-detail-card__icon { color: var(--c-plum); }
.service-detail-card--gold .service-detail-card__icon { color: var(--c-gold-link); }
.service-detail-card--slate .service-detail-card__icon { color: var(--c-slate-navy-2); }

.service-detail-card__title {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: var(--c-text-heading);
	margin-bottom: 20px;
}

.service-detail-card__list {
	padding-left: 1.9em;
	margin-bottom: 1.4em;
}

.service-detail-card__list li {
	margin-bottom: 4px;
}

.service-detail-card__outro {
	margin-bottom: 0;
}

.service-detail-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14px;
}

.service-detail-card--hunter .service-detail-card__bar { background-color: var(--c-hunter); }
.service-detail-card--forest .service-detail-card__bar { background-color: var(--c-forest); }
.service-detail-card--plum .service-detail-card__bar { background-color: var(--c-plum); }
.service-detail-card--gold .service-detail-card__bar { background-color: var(--c-gold-card); }
.service-detail-card--slate .service-detail-card__bar { background-color: var(--c-slate-navy); }

.service-cta-card {
	color: var(--c-text-inverse);
	padding: 90px 100px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.service-cta-card__title {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: #FFFFFF;
	margin-bottom: 20px;
}

.service-cta-card p {
	color: var(--c-text-inverse);
}

.service-cta-card .btn {
	margin-top: 12px;
}

@media (max-width: 1300px) {
	.service-detail-card,
	.service-cta-card {
		padding: 60px 54px 80px;
	}
}

@media (max-width: 999px) {
	.service-details__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 690px) {
	.service-detail-card,
	.service-cta-card {
		padding: 42px 28px 70px;
	}
}

/* -------------------------------------------------------------------------
   21. Services / Meeting Space / Contact: split closers
   ------------------------------------------------------------------------- */
.services-closer__grid,
.rentals-split__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 90px;
	align-items: center;
}

.rentals-split__grid {
	grid-template-columns: 1fr 1.3fr;
}

.services-closer__grid {
	grid-template-columns: 1.05fr 1.2fr;
}

.services-closer__title,
.rentals-split__title {
	font-size: calc(var(--fs-display) * 0.82);
}

.rentals-split__body .btn,
.services-closer__body .btn {
	margin-top: 12px;
}

@media (max-width: 999px) {
	.services-closer__grid,
	.rentals-split__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
}

/* -------------------------------------------------------------------------
   22. Meeting Space: booking embed
   ------------------------------------------------------------------------- */
.booking__title {
	text-align: center;
	margin-bottom: 60px;
}

.booking__embed iframe {
	display: block;
	width: 100%;
	min-height: 920px;
	border: 1px solid var(--c-border);
	background-color: var(--c-surface);
}

@media (max-width: 690px) {
	.booking__embed iframe {
		min-height: 1100px;
	}
}

/* -------------------------------------------------------------------------
   23. Contact
   ------------------------------------------------------------------------- */
.contact-details__grid {
	display: grid;
	/* Source site: text column ~700px, map ~375px at 1440 (roughly 65/35). */
	grid-template-columns: 1.8fr 1fr;
	gap: 100px;
	align-items: start;
	padding-top: 40px;
}

.contact-details__body .lede-belleza {
	margin-top: 0.6em;
}

.contact-details__big {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: -0.02em;
	color: var(--c-text-heading);
	margin-bottom: 0.4em;
}

.contact-details__big a {
	color: inherit;
	text-decoration: none;
}

.contact-details__big a:hover {
	color: var(--c-gold-dark);
}

.contact-details__map #lwc-map {
	width: 100%;
	height: 640px;
	background-color: var(--c-tint-slate);
	z-index: 1;
}

@media (max-width: 999px) {
	.contact-details__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.contact-details__map #lwc-map {
		height: 440px;
	}
}

/* -------------------------------------------------------------------------
   24. Prose (legal pages, fallback content)
   ------------------------------------------------------------------------- */
.prose {
	max-width: 880px;
	padding-top: 40px;
}

.prose h2,
.prose h3 {
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: var(--ls-heading);
	color: var(--c-text-heading);
	margin: 1.6em 0 0.6em;
}

.prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.prose h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

.prose ul,
.prose ol {
	padding-left: 1.6em;
}

.prose a {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   25. Footer — flat black anchor
   ------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--c-footer-black);
	color: #FFFFFF;
	padding: 90px 0 54px;
}

.site-footer a {
	color: #FFFFFF;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--c-accent-soft);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 0.7fr 0.9fr;
	gap: 50px;
	align-items: start;
}

.site-footer__brand img {
	display: block;
	width: min(360px, 80%);
	height: auto;
}

.site-footer__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin-bottom: 14px;
}

.site-footer__menu,
.site-footer__connect,
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li,
.site-footer__connect li {
	margin-bottom: 4px;
}

.site-footer__social {
	margin-top: 20px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 100px;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal-links a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 999px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 60px;
	}
}

/* -------------------------------------------------------------------------
   26. Scroll-reveal (IntersectionObserver adds .is-revealed)
   Salient parity: 45px translateY fade, ~800ms brand ease, 0/150/300ms stagger
   ------------------------------------------------------------------------- */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(45px);
	transition:
		opacity var(--dur-reveal) var(--ease-brand),
		transform var(--dur-reveal) var(--ease-brand);
	will-change: opacity, transform;
}

html.js [data-reveal][data-reveal-delay="150"] {
	transition-delay: 150ms;
}

html.js [data-reveal][data-reveal-delay="300"] {
	transition-delay: 300ms;
}

html.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   27. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rotating-badge svg {
		animation: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Tenant card "learn more" links (tenants page) */
.service-detail-card__more {
	margin-top: 18px;
	font-weight: 600;
}

/* Tenant detail: logo left, stacked lede + copy right */
.tenant-logo {
	margin: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.tenant-logo img {
	width: 100%;
	max-width: 340px;
	height: auto;
}

.services-intro__lede--stacked {
	margin-bottom: 24px;
}

@media (max-width: 999px) {
	.tenant-logo img {
		max-width: 260px;
	}
}

/* Wide horizontal tenant logos (e.g. Morehouse School of Medicine) */
.tenant-logo--wide img {
	max-width: 460px;
}

@media (max-width: 999px) {
	.tenant-logo--wide img {
		max-width: 360px;
	}
}