/* ==========================================================================
   HOME — front-page.php · template-parts/home/*
   One continuous cinematic scroll. Every class is prefixed home- ; colours come from the tone variables
   (--bg --fg --accent …) so each section simply declares its tone class in the markup.

   01 hero · 02 credibility · 03 who we are · 04 pillars · 05 Seva across India · 06 Rath Yatra ·
   07 Seva grid · 08 events · 09 guiding spirit · 10 join · 11 stories · 12 gallery · 13 final CTA
   Mobile-first; breakpoints 560 · 768 · 1024 · 1440. Motion is layered on by effects.css / animations.js;
   everything here reads fine with JS off and with prefers-reduced-motion.
   ========================================================================== */


/* ==========================================================================
   Shared
   ========================================================================== */

/* Empty media slots inside designed layouts keep only a small corner badge (the full labelled placeholder is for
   big editorial photos). The content team can still see which slot belongs where. */
:is(.home-hero__media, .home-hero__obj, .home-spirit__bg, .home-map__stage, .home-rath__wheel, .home-sevacard .card__media, .home-gallery__tile--ph, .home-pillar__art) .media-slot__meta {
	position: absolute;
	inset: auto auto 0.7rem 0.7rem;
	max-width: none;
	padding: 0;
	background: none;
	align-items: flex-start;
}

:is(.home-hero__media, .home-hero__obj, .home-spirit__bg, .home-map__stage, .home-rath__wheel, .home-sevacard .card__media, .home-gallery__tile--ph, .home-pillar__art) :is(.media-slot__label, .media-slot__desc, .media-slot__spec) {
	display: none;
}

:is(.home-hero__media, .home-hero__obj, .home-spirit__bg, .home-map__stage, .home-rath__wheel, .home-sevacard .card__media, .home-gallery__tile--ph, .home-pillar__art) .media-slot__badge {
	padding: 0.2rem 0.55rem;
	font-size: 0.6rem;
	opacity: 0.7;
	white-space: nowrap;
}

/* small slots show just the ID (the "Image / Video / 3D model" suffix would not fit) */
:is(.home-hero__dhwaj, .home-gallery__tile--ph, .home-sevacard--compact) .media-slot__badge i {
	display: none;
}

/* gold lotus divider sitting on the seam between a dark and an ivory surface (zero height, centred on the boundary) */
.home-seam {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	height: 0;
	pointer-events: none;
}

.home-seam > svg {
	position: absolute;
	top: 0;
	width: min(360px, 62vw);
	translate: 0 -50%;
	color: var(--antique-gold);
}

/* text links with an arrow: a 44px tap target (the shared component is ~27px tall) */
:is(.home-who, .home-pillars, .home-seva, .home-sevagrid, .home-events, .home-stories, .home-gallery) .link-arrow {
	min-height: 44px;
}

/* Floating decorative objects: no panel behind them */
:is(.home-hero__obj, .home-rath__wheel .media-slot, .home-pillar__art) {
	background: transparent;
}

:is(.home-hero__obj, .home-rath__wheel, .home-map__stage, .home-pillar__art) .media-slot__placeholder {
	background: none;
	box-shadow: none;
}

/* the hero objects glow (drop-shadow): the glow must not be cut off at the slot's box (that shows as a faint rectangle) */
.home-hero__obj,
.home-hero__obj .media-slot__inner,
.home-hero__obj .media-slot__placeholder {
	overflow: visible;
}

:is(.home-hero__obj, .home-rath__wheel, .home-pillar__art) .media-slot__pattern {
	display: none;
}

.home-pillar__art {
	position: absolute;
	inset: 0;
}


/* ==========================================================================
   01 · Hero
   Reuses .page-hero (full height, media / veil / horizon / inner grid) and adds the home-only layers.
   ========================================================================== */
.home-hero {
	/* +40px so the credibility strip can overlap the bottom edge without covering the scroll cue */
	padding-bottom: calc(clamp(3rem, 9vh, 6.5rem) + 40px);
	background-color: var(--sanctum-black);
}

/* warm dawn behind the video / poster (also the whole look while the media slot is still empty) */
.home-hero__media::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 56% at 88% 32%, rgba(244, 122, 31, 0.13), transparent 62%),
		radial-gradient(60% 50% at 8% 96%, rgba(217, 164, 65, 0.08), transparent 70%),
		linear-gradient(180deg, #15100c 0%, #0b0907 100%);
}

.home-hero__media .media-slot__placeholder {
	background: none;
	box-shadow: none;
}

.home-hero__media .media-slot__pattern {
	opacity: 0.4;
}

/*
 * Veil: dark on the copy side, light on the scene side, melting into the next section at the bottom.
 * It is painted as ::after INSIDE the media slot (z-index 5), so the slot's pause button (z-index 6) stays above it
 * and clickable — an overlay element outside the slot would sit on top of the button (WCAG 2.2.2).
 */
.home-hero__media .media-slot::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		radial-gradient(52% 66% at 90% 40%, rgba(244, 122, 31, 0.14), rgba(244, 122, 31, 0.03) 50%, transparent 72%),
		linear-gradient(90deg, rgba(11, 9, 7, 0.9) 0%, rgba(11, 9, 7, 0.6) 46%, rgba(11, 9, 7, 0.22) 100%),
		linear-gradient(180deg, rgba(11, 9, 7, 0.6) 0%, transparent 26%, transparent 60%, var(--sanctum-black) 100%);
}

/* the pause button clears the credibility strip that overlaps the hero's bottom 40px */
.home-hero__media .media-slot__toggle {
	right: 1rem;
	bottom: calc(40px + 1rem);
}

/*
 * Video background: the wrapper is 14% taller than the hero (the parallax travel never shows an edge) and the slow
 * Ken Burns scale runs on the <video> element itself, so it never touches the pause button inside .media-slot__inner.
 * Phones get a plain crop (animations.js runs parallax from tablet up).
 */
.home-hero__media--video {
	inset: -7% 0;
}

.home-hero__media--video .media-slot__toggle {
	/* 7% of the wrapper hangs below the hero's bottom edge (6.14% of its own height); +3.5rem keeps the button clear of the
	   credibility strip even at the full +5% parallax drift */
	bottom: calc(6.14% + 40px + 4.5rem);
}

@media (max-width: 767px) {
	.home-hero__media--video {
		inset: 0;
	}

	.home-hero__media--video .media-slot__toggle {
		bottom: calc(40px + 1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home-hero__media video.media-slot__media,
	.home-spirit__bg--video video.media-slot__media {
		transform-origin: 50% 55%;
		animation: hs-kenburns 24s ease-in-out infinite alternate;
	}
}

/* decorative layers never swallow pointer events: only the copy, the scene and the controls are interactive */
.home-hero__inner {
	pointer-events: none;
}

.home-hero__inner > * {
	pointer-events: auto;
}

/* saffron rim light from the right edge: a narrow, bright edge that falls off quickly (light, not a colour fill) */
.home-hero__rim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: min(30vw, 460px);
	pointer-events: none;
	background:
		radial-gradient(ellipse 100% 44% at 100% 44%, rgba(255, 154, 77, 0.34), rgba(244, 122, 31, 0.07) 46%, transparent 74%),
		linear-gradient(270deg, rgba(255, 170, 100, 0.12), transparent 24%);
	mix-blend-mode: screen;
	opacity: 0.8;
}

/* cursor glow: JS sets --mx / --my on the hero (data-spotlight) */
.home-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 36%), rgba(255, 154, 77, 0.16), transparent 62%);
	opacity: 0.35;
	transition: opacity 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
	.home-hero:hover .home-hero__glow {
		opacity: 1;
	}
}

.home-hero__horizon {
	z-index: 0;
}

.home-hero__inner {
	gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 1024px) {
	.home-hero__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}
}

/*
 * H1 = "Hanuman Sena –" (display size) + the Hindi tagline (smaller). The heading itself is set at the TAGLINE size and
 * the English name is scaled up with em: the line splitter wraps each line in a block whose strut is the heading's own
 * font-size, so this keeps Hindi lines tight instead of inheriting the 100px English line height.
 */
.home-hero__title {
	--home-tag-ratio: 0.56;
	margin: 0 0 1.5rem;
	font-size: calc(var(--fs-hero) * var(--home-tag-ratio));
	line-height: 1.3;
}

@media (min-width: 1024px) {
	.home-hero__title {
		--home-tag-ratio: 0.5;
	}
}

/* the copy column is a size container: the name never outgrows it (6.9em ≈ "Hanuman Sena –") whatever the viewport */
.home-hero__copy {
	container-type: inline-size;
}

.home-hero__name {
	font-size: min(calc(1em / var(--home-tag-ratio)), 14cqi);
	line-height: 1.02;
	letter-spacing: var(--tracking-display);
}

/* the trailing dash is saffron: a hard colour stop placed in the gap before it (the name is a single word) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.home-hero__name {
		background: linear-gradient(90deg, var(--heading) 0 92.4%, var(--accent) 92.4%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* Hindi tagline: never negative-tracked (the [lang=hi] rule in style.css also guarantees it) */
.home-hero__tag {
	display: inline;
	color: var(--saffron-bright);
	font-family: var(--font-hi-display);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
}

.home-hero__lead {
	max-width: 34rem;
	font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
}

.home-hero__actions {
	align-items: center;
}

@media (min-width: 1024px) {
	/* keep Join · Donate · View Our Work on one row in the 6-column copy block */
	.home-hero__actions .btn--lg {
		padding-inline: 1.7rem;
	}
}

@media (max-width: 767px) {
	.home-hero__actions {
		gap: 0.75rem;
	}

	.home-hero__actions .btn--lg {
		min-height: 52px;
	}
}

/* scene: gada + dhwaj with pointer depth */
.home-hero__scene {
	position: relative;
	width: min(78vw, 360px);
	aspect-ratio: 1;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.home-hero__scene {
		width: min(100%, 520px);
	}
}

@media (min-width: 1024px) {
	.home-hero__scene {
		width: min(100%, 580px);
		margin-inline: auto 0;
	}
}

.home-hero__halo {
	position: absolute;
	inset: 4%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, rgba(244, 122, 31, 0.22), rgba(244, 122, 31, 0.05) 55%, transparent 72%);
	box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.2);
}

.home-hero__halo::before,
.home-hero__halo::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.home-hero__halo::before {
	inset: 9%;
	border: 1px solid rgba(217, 164, 65, 0.16);
}

.home-hero__halo::after {
	inset: -5%;
	border: 1px dashed rgba(217, 164, 65, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
	.home-hero__halo::after {
		animation: hs-spin 160s linear infinite;
	}
}

.home-hero__gada,
.home-hero__dhwaj {
	position: absolute;
}

.home-hero__gada {
	inset: 2% 14% 2% 14%;
}

.home-hero__dhwaj {
	top: -4%;
	right: -2%;
	width: 42%;
	z-index: 2;
}

.home-hero__float {
	position: relative;
	height: 100%;
}

.home-hero__gada .media-slot {
	height: 100%;
	aspect-ratio: auto;
}

.home-hero__gada .media-slot__art {
	inset: 0;
	filter: drop-shadow(0 0 40px rgba(244, 122, 31, 0.45));
}

.home-hero__dhwaj .media-slot__art {
	inset: 0;
	color: var(--saffron);
	filter: drop-shadow(0 0 26px rgba(244, 122, 31, 0.5));
}

/* the flag pole fills the left of the dhwaj frame: keep its slot badge on the free side */
.home-hero__dhwaj .media-slot__meta {
	inset: auto 0.4rem 0.4rem auto;
}

/* scroll cue */
.home-hero__cue {
	position: absolute;
	right: 0;
	bottom: calc(40px + 1.4rem);
	left: 0;
	z-index: 3;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	width: max-content;
	margin-inline: auto;
	color: var(--fg-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.home-hero__cue:hover {
	color: var(--fg);
}

.home-hero__cue-line {
	width: 1px;
	height: 46px;
	background: linear-gradient(to bottom, var(--saffron), transparent);
	transform-origin: top;
}

@media (min-width: 1024px) and (min-height: 640px) {
	.home-hero__cue {
		display: flex;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home-hero__cue-line {
		animation: home-cue 2.6s var(--ease-in-out) infinite;
	}
}

@keyframes home-cue {
	0% { transform: scaleY(0); opacity: 0; }
	35% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}


/* ==========================================================================
   02 · Credibility strip — overlaps the hero edge by 40px
   ========================================================================== */
.home-cred {
	position: relative;
	z-index: 3;
	margin-top: -40px;
	border-top: 1px solid var(--antique-gold);
	border-bottom: 1px solid rgba(217, 164, 65, 0.3);
	background: var(--bg);
	box-shadow: 0 -28px 60px -24px rgba(0, 0, 0, 0.65);
}

.home-marquee {
	--marquee-gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-block: clamp(1.05rem, 0.8rem + 1vw, 1.55rem);
	color: var(--fg-soft);
}

.home-marquee__item {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
}

.home-marquee__item--hi {
	font-family: var(--font-hi-display);
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	letter-spacing: 0;
	text-transform: none;
}

.home-marquee__sep {
	flex: none;
	width: 7px;
	height: 7px;
	margin-inline-start: var(--marquee-gap);
	background: var(--antique-gold);
	opacity: 0.85;
	transform: rotate(45deg);
}

.home-stats-wrap {
	border-top: 1px solid var(--line);
}

.home-stats {
	border-top: 0;
}

.home-stats .stat__num {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
	white-space: nowrap;
}

/* each cell sizes its own number: "12,50,000+" must fit the cell, whatever the grid does at this width */
@supports (width: 1cqi) {
	.home-stats .stat {
		container-type: inline-size;
	}

	.home-stats .stat__num {
		font-size: clamp(1.625rem, 17.5cqi, 3.25rem);
	}
}

.home-stats--1 { --stat-cols: 1; }
.home-stats--2 { --stat-cols: 2; }
.home-stats--3 { --stat-cols: 3; }
.home-stats--4 { --stat-cols: 4; }
.home-stats--5 { --stat-cols: 5; }

/* no orphan cell in the 2-up mobile grid */
@media (max-width: 767px) {
	.home-stats .stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	/* five figures: 3 + 2 across tablet, 5 across desktop */
	.home-stats--5 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.home-stats--5 .stat:nth-child(-n + 3) {
		grid-column: span 2;
	}

	.home-stats--5 .stat:nth-child(n + 4) {
		grid-column: span 3;
	}
}

@media (min-width: 1024px) {
	.home-stats--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.home-stats--5 .stat:nth-child(n) {
		grid-column: auto;
	}
}

.home-cred__hint {
	padding-block: 0 1.25rem;
}


/* ==========================================================================
   03 · Who We Are (ivory)
   ========================================================================== */
.home-who__grid {
	align-items: center;
	row-gap: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.home-who__head {
	margin-bottom: 1.25rem;
}

.home-who__body .lead {
	margin-bottom: 1.1rem;
	color: var(--fg-soft);
}

.home-who__text {
	max-width: 34rem;
	margin-bottom: 1.5rem;
	color: var(--fg-muted);
}

.home-who__motto {
	margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.home-who__motto-rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	background: linear-gradient(90deg, var(--saffron-mid), var(--antique-gold));
}

.home-who__motto-hi {
	margin: 1rem 0 0.35rem;
	color: var(--accent);
	font-family: var(--font-hi-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.45;
	letter-spacing: 0;
}

.home-who__motto-en {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.home-who__visual {
	position: relative;
	padding-bottom: 1.5rem;
}

.home-who__frame {
	position: relative;
	isolation: isolate;
}

/* offset gold keyline: the "frame" the photograph sits in */
.home-who__frame::before {
	content: '';
	position: absolute;
	inset: 16px -16px -16px 16px;
	z-index: -1;
	border: 1px solid rgba(125, 90, 18, 0.5);
	border-radius: var(--r-lg);
}

.home-who__photo {
	--media-radius: var(--r-lg);
	box-shadow: var(--shadow-ivory);
}

.home-who__seal {
	position: absolute;
	bottom: -0.25rem;
	left: 0.75rem;
	z-index: 3;
	width: clamp(92px, 24vw, 128px);
	aspect-ratio: 1;
	filter: drop-shadow(0 14px 22px rgba(11, 9, 7, 0.3));
}

@media (min-width: 1024px) {
	/* the photograph stands a little taller than the copy: it fills the row and reaches 1.75rem beyond the text block
	   at both ends, so it is never shorter than the words beside it (the 3/2 ratio is the minimum, not a fixed crop) */
	.home-who__grid {
		align-items: stretch;
	}

	.home-who__copy {
		align-self: center;
	}

	.home-who__visual {
		display: flex;
		margin-block: -1.75rem;
		padding-bottom: 0;
	}

	.home-who__visual .home-who__frame {
		display: flex;
		flex: 1;
	}

	.home-who__visual .home-who__frame .media-slot {
		flex: 1;
		aspect-ratio: auto;
		min-height: 26rem;
	}

	.home-who__seal {
		bottom: -1.5rem;
		left: -1.5rem;
		width: clamp(116px, 10vw, 148px);
	}
}

@media (min-width: 1280px) {
	.home-who__seal {
		left: -2.5rem;
	}
}

.home-who__seal .media-slot {
	background: transparent;
	border-radius: 50%;
}

.home-seal {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.home-seal__disc {
	fill: var(--sanctum-black);
}

.home-seal__ring {
	fill: none;
	stroke: var(--antique-gold);
	stroke-width: 1;
}

.home-seal__ring--in {
	opacity: 0.55;
}

.home-seal__text {
	fill: var(--gold-soft);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.home-seal__turn {
	transform-origin: 100px 100px;
}

@media (prefers-reduced-motion: no-preference) {
	.home-seal__turn {
		animation: hs-spin 70s linear infinite;
	}
}

.home-seal__core {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--saffron);
}


/* ==========================================================================
   04 · Four Pillars (dark)
   ========================================================================== */
/* sections with corner glows clip them (overflow:clip keeps position:sticky working inside) */
.home-pillars,
.home-seva,
.home-stories {
	overflow: clip;
}

.home-pillars__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.1;
	pointer-events: none;
}

.home-pillars__rail {
	--rail-cols: 2;
	--rail-cols-lg: 4;
	align-items: stretch;
}

.home-pillar {
	min-height: 28rem;
	padding: 0;
	background: linear-gradient(180deg, rgba(38, 28, 22, 0.7), var(--surface) 58%);
}

.home-pillar__index {
	position: absolute;
	top: 1.35rem;
	left: 1.6rem;
	z-index: 2;
	color: var(--accent-2);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.2em;
}

.home-pillar__relief {
	display: grid;
	place-items: center;
	padding: clamp(2.75rem, 2.2rem + 2vw, 3.75rem) 1.5rem 0.5rem;
}

/* the medallion: a cast, lit disc with a gold rim — the 3D relief slots in here */
.home-pillar__disc {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(8.5rem, 7rem + 4vw, 10.75rem);
	aspect-ratio: 1;
	border-radius: 50%;
	color: var(--accent-2);
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 190, 120, 0.3), rgba(217, 164, 65, 0.1) 36%, transparent 64%),
		linear-gradient(150deg, #2b2019, #130e0b 72%);
	box-shadow:
		inset 0 0 0 1px rgba(217, 164, 65, 0.5),
		inset 0 0 0 9px rgba(11, 9, 7, 0.55),
		inset 0 0 0 10px rgba(217, 164, 65, 0.2),
		0 22px 50px -22px rgba(244, 122, 31, 0.6);
	transition: box-shadow var(--dur-slow) var(--ease-out);
}

.home-pillar:hover .home-pillar__disc,
.home-pillar:focus-within .home-pillar__disc {
	box-shadow:
		inset 0 0 0 1px rgba(255, 170, 95, 0.75),
		inset 0 0 0 9px rgba(11, 9, 7, 0.5),
		inset 0 0 0 10px rgba(244, 122, 31, 0.35),
		0 26px 60px -20px rgba(244, 122, 31, 0.8);
}

.home-pillar__disc > .icon {
	width: 46%;
	height: 46%;
	filter: drop-shadow(0 0 14px rgba(244, 122, 31, 0.5));
}

/* labels and titles line up across the four cards; the "Our mission" links are pinned to the card bottoms */
.home-pillar__body {
	flex: 1;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 0.5rem;
	padding-top: 1.25rem;
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.home-pillar__body {
		padding-inline: 1rem;
	}

	.home-pillar__title {
		font-size: 1.5rem;
	}
}

.home-pillar__hi {
	margin: 0;
	color: var(--accent-2);
	font-family: var(--font-hi-display);
	font-size: 1.15rem;
	line-height: 1.4;
	letter-spacing: 0;
}

.home-pillar__title {
	font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem);
}

.home-pillar__text {
	max-width: 22ch;
	margin-inline: auto;
}

.home-pillar__cta {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ==========================================================================
   05 · Seva Across India (charcoal + radial saffron glow)
   ========================================================================== */
.home-seva__glow {
	position: absolute;
	top: 12%;
	left: -14%;
	z-index: -1;
	width: min(90vw, 1000px);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(244, 122, 31, 0.28), rgba(244, 122, 31, 0.09) 52%, transparent 74%);
}

.home-seva .scrolly__sticky {
	display: block;
	margin-bottom: 2rem;
}

@media (min-width: 1024px) {
	.home-seva .scrolly__sticky {
		margin-bottom: 0;
	}
}

.home-map {
	--home-map-size: min(100%, 460px);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	height: 100%;
}

@media (min-width: 1024px) {
	.home-map {
		/* the sticky box is min(72vh, 100svh − header − 3rem) tall: keep the square map (+ legend) inside it */
		--home-map-size: min(100%, calc(min(72vh, 100svh - var(--header-h) - 48px) - 3.4rem));
	}
}

/* warm halo behind the map — it sticks with the map */
.home-map::before {
	content: '';
	position: absolute;
	inset: -14% -10%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(244, 122, 31, 0.2), transparent 72%);
	pointer-events: none;
}

.home-map__stage {
	position: relative;
	width: var(--home-map-size);
	aspect-ratio: 1;
	margin-inline: auto;
	border: 1px solid rgba(217, 164, 65, 0.3);
	border-radius: var(--r-lg);
	overflow: hidden;
	background:
		radial-gradient(90% 80% at 30% 20%, rgba(244, 122, 31, 0.16), transparent 62%),
		linear-gradient(160deg, #1d1510, #0e0a08);
	box-shadow: inset 0 0 0 1px rgba(11, 9, 7, 0.6), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

.home-map__grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: rgba(217, 164, 65, 0.13);
	pointer-events: none;
}

/* the placeholder network is atmosphere only — real locations are the larger glowing saffron nodes drawn on top */
.home-map__media .media-slot__art {
	inset: 12%;
	opacity: 0.24;
}

/* degree labels along the edges: the frame the nodes are projected into */
.home-map__ticks {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.home-map__tick {
	position: absolute;
	color: rgba(217, 164, 65, 0.55);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.home-map__tick--lat {
	top: calc(var(--p) * 1%);
	left: 0.7rem;
	translate: 0 -135%;
}

.home-map__tick--lng {
	top: 0.65rem;
	left: calc(var(--p) * 1%);
	translate: -50% 0;
}

.home-map__nodes {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.home-map__node {
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	width: 0;
	height: 0;
}

.home-map__dot {
	position: absolute;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffd9ad, var(--saffron) 52%, var(--deep-saffron));
	box-shadow: 0 0 0 3px rgba(244, 122, 31, 0.28), 0 0 18px 4px rgba(244, 122, 31, 0.6);
	opacity: 0.9;
	transition: transform 0.7s var(--ease-out), opacity 0.5s ease, box-shadow 0.7s var(--ease-out);
}

.home-map__dot::after {
	content: '';
	position: absolute;
	inset: -9px;
	border: 1px solid rgba(255, 154, 77, 0.75);
	border-radius: 50%;
	opacity: 0;
}

.home-map__tag {
	position: absolute;
	top: -13px;
	left: 17px;
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(217, 164, 65, 0.55);
	border-radius: var(--r-pill);
	background: rgba(11, 9, 7, 0.88);
	color: var(--warm-ivory);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.5s ease, transform 0.7s var(--ease-out);
}

.home-map__node.is-flip .home-map__tag {
	right: 17px;
	left: auto;
	transform: translateX(6px);
}

/* desktop + motion layer: dim until the matching step is active */
@media (min-width: 1024px) {
	html.hs-motion .home-map__dot {
		opacity: 0.55;
	}
}

.home-map__node.is-on .home-map__dot {
	opacity: 1;
	transform: scale(1.4);
	box-shadow: 0 0 0 4px rgba(244, 122, 31, 0.3), 0 0 30px 8px rgba(244, 122, 31, 0.7);
}

.home-map__node.is-on .home-map__tag {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.home-map__node.is-on .home-map__dot::after {
		animation: home-ping 2.2s ease-out infinite;
	}
}

@keyframes home-ping {
	0% { transform: scale(0.5); opacity: 0.9; }
	100% { transform: scale(2.1); opacity: 0; }
}

.home-map__legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-align: center;
}

.home-map__legend-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--saffron);
	box-shadow: 0 0 10px 2px rgba(244, 122, 31, 0.6);
}

/* feed */
.home-seva__steps {
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.home-seva__steps {
		gap: 0;
	}

	.home-seva__step {
		min-height: min(78vh, 46rem);
	}
}

.home-seva-card {
	width: 100%;
	transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), scale 0.7s var(--ease-out);
}

.home-seva-card .card__media {
	position: relative;
}

.home-seva-card__count {
	position: absolute;
	right: 0.9rem;
	bottom: 0.8rem;
	z-index: 3;
	padding: 0.3rem 0.65rem;
	border: 1px solid rgba(217, 164, 65, 0.45);
	border-radius: var(--r-pill);
	background: rgba(11, 9, 7, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--gold-soft);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
}

.home-seva-card .card__title {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.home-seva-card__more {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.7s var(--ease-out), opacity 0.5s ease;
}

.home-seva-card__more-in {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-height: 0;
	overflow: hidden;
}

.home-seva-card__more-in > :first-child {
	margin-top: 0.1rem;
}

.home-seva__step.is-active .home-seva-card {
	border-color: rgba(244, 122, 31, 0.6);
	box-shadow: var(--card-hover-shadow);
}

/* desktop + motion layer: only the active card is open; the rest are compact and slightly receded */
@media (min-width: 1024px) {
	html.hs-motion .home-seva__step:not(.is-active) .home-seva-card {
		scale: 0.97;
	}

	html.hs-motion .home-seva__step:not(.is-active) .home-seva-card__more {
		grid-template-rows: 0fr;
		opacity: 0;
	}
}

.home-seva__more {
	display: flex;
	justify-content: flex-start;
	padding-top: 0.5rem;
}

@media (min-width: 1024px) {
	.home-seva__more {
		padding-block: 1rem 2rem;
	}
}

.home-seva__empty {
	padding-block: clamp(2rem, 1rem + 4vw, 4rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: rgba(11, 9, 7, 0.35);
}

@media (min-width: 1024px) {
	.home-seva__empty {
		align-self: center;
		margin-block: auto;
	}
}


/* ==========================================================================
   06 · Signature Legacy — National Rath Yatra (near-black)
   Default = vertical timeline (mobile, tablet, reduced motion).
   ≥ 1024px with motion = pinned horizontal story (see the media query at the end of this block).
   ========================================================================== */
.home-rath {
	--bg: #070504;
	background-color: #070504;
	overflow: clip;
}

.home-rath__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.home-rath__wheel {
	position: absolute;
	top: -6%;
	right: -22%;
	width: min(88vw, 760px);
	aspect-ratio: 1;
	color: var(--antique-gold);
	opacity: 0.13;
}

@media (min-width: 1024px) {
	.home-rath__wheel {
		right: -8%;
	}
}

/* the wheel is pure decoration (its slot badge would turn with it): no labels on it */
.home-rath__wheel .media-slot__meta {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.home-rath__wheel .media-slot {
		animation: hs-spin 260s linear infinite;
	}
}

.home-rath__intro {
	display: grid;
	gap: 1.5rem 3rem;
	align-items: end;
}

@media (min-width: 1024px) {
	.home-rath__intro {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.home-rath__head {
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.home-rath__figure {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-left: 1.25rem;
	border-left: 2px solid var(--saffron);
}

.home-rath__figure-num {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: clamp(3rem, 2rem + 5vw, 6.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.home-rath__figure-num small {
	margin-left: 0.3em;
	color: var(--accent-2);
	font-size: 0.34em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-rath__figure-label {
	color: var(--fg-soft);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- stacked (timeline) layout ---- */
.home-rath__hscroll {
	position: relative;
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.home-rath__track {
	position: relative;
	gap: clamp(2.75rem, 2rem + 4vw, 5rem);
	padding-left: 2.5rem;
}

/* route line of the timeline: a vertical SVG stroke (pathLength is normalised by the data-draw engine) */
.home-rath__rail {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 7px;
	width: 2px;
}

.home-rath__rail svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.home-rath__rail path {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.home-rath__rail-base {
	stroke: var(--line-strong);
}

.home-rath__rail-draw {
	stroke: var(--saffron);
	filter: drop-shadow(0 0 5px rgba(244, 122, 31, 0.7));
}

.home-rath__panel {
	position: relative;
	display: grid;
	gap: 1.4rem;
}

.home-rath__panel::before {
	content: '';
	position: absolute;
	top: 0.35rem;
	left: calc(-2.5rem + 1px);
	width: 14px;
	height: 14px;
	border: 3px solid #070504;
	border-radius: 50%;
	background: var(--saffron);
	box-shadow: 0 0 0 1px var(--saffron), 0 0 18px rgba(244, 122, 31, 0.6);
}

.home-rath__media .media-slot {
	--media-radius: var(--r-md);
	border: 1px solid var(--line);
}

/* empty photo / video slots: just a corner badge — the copy owns the middle of the panel */
.home-rath__media .media-slot__meta {
	position: absolute;
	inset: 0.9rem auto auto 0.9rem;
	max-width: none;
	padding: 0;
	background: none;
	align-items: flex-start;
}

.home-rath__media :is(.media-slot__label, .media-slot__desc, .media-slot__spec) {
	display: none;
}

.home-rath__media .media-slot__badge {
	padding: 0.2rem 0.55rem;
	font-size: 0.6rem;
	opacity: 0.7;
}

.home-rath__copy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.home-rath__num {
	margin: 0;
	color: transparent;
	font-family: var(--font-display);
	font-size: clamp(3.25rem, 2.5rem + 3vw, 5rem);
	line-height: 1;
	-webkit-text-stroke: 1px rgba(217, 164, 65, 0.55);
}

.home-rath__title {
	margin: 0 0 0.55rem;
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

.home-rath__text {
	max-width: 34rem;
	margin: 0;
	color: var(--fg-soft);
	font-size: var(--fs-lg);
}

.home-rath__cta {
	margin: 1.5rem 0 0;
}

@media (min-width: 768px) {
	.home-rath__panel {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(1.5rem, 3vw, 3rem);
	}
}

/* the horizontal route bar only exists in the pinned story */
.home-rath__route {
	display: none;
}

/* ---- pinned horizontal story ---- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	html.hs-js:not(.hs-reduced) .home-rath {
		padding-bottom: 0;
	}

	html.hs-js:not(.hs-reduced) .home-rath__hscroll {
		width: 100%;
		margin-top: clamp(0.5rem, 2vw, 2rem);
	}

	html.hs-js:not(.hs-reduced) .home-rath__viewport {
		position: relative;
		display: flex;
		align-items: center;
		height: 100svh;
		min-height: 36rem;
		padding-top: 4.5rem;
		padding-bottom: 8.5rem;
	}

	html.hs-js:not(.hs-reduced) .home-rath__track {
		padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
		padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	html.hs-js:not(.hs-reduced) .home-rath__rail {
		display: none;
	}

	html.hs-js:not(.hs-reduced) .home-rath__panel {
		display: block;
		flex-basis: min(76vw, 1000px);
		height: min(66svh, 38rem);
		overflow: hidden;
		isolation: isolate;
		border: 1px solid rgba(217, 164, 65, 0.28);
		border-radius: var(--r-lg);
		background: #0d0a08;
	}

	html.hs-js:not(.hs-reduced) .home-rath__panel::before {
		display: none;
	}

	html.hs-js:not(.hs-reduced) .home-rath__media {
		position: absolute;
		inset: 0;
	}

	html.hs-js:not(.hs-reduced) .home-rath__media .media-slot {
		height: 100%;
		aspect-ratio: auto;
		border: 0;
		border-radius: 0;
	}

	/* text sits on a warm-black gradient so it always reads, whatever the photograph (inside the slot, below the pause button) */
	html.hs-js:not(.hs-reduced) .home-rath__media .media-slot::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 5;
		pointer-events: none;
		background:
			linear-gradient(to top, rgba(7, 5, 4, 0.94) 0%, rgba(7, 5, 4, 0.55) 42%, rgba(7, 5, 4, 0.08) 100%),
			linear-gradient(90deg, rgba(7, 5, 4, 0.5), transparent 60%);
	}

	html.hs-js:not(.hs-reduced) .home-rath__copy {
		position: absolute;
		inset: 0;
		z-index: 2;
		justify-content: flex-end;
		padding: clamp(1.75rem, 3vw, 3.25rem);
		pointer-events: none; /* the copy fills the panel: let clicks reach the video's pause button underneath */
	}

	html.hs-js:not(.hs-reduced) .home-rath__copy > * {
		pointer-events: auto;
	}

	html.hs-js:not(.hs-reduced) .home-rath__copy > :not(.home-rath__num) {
		max-width: 32rem;
	}

	html.hs-js:not(.hs-reduced) .home-rath__num {
		position: absolute;
		top: clamp(1.25rem, 2.5vw, 2.25rem);
		left: clamp(1.75rem, 3vw, 3.25rem);
		font-size: clamp(4.5rem, 9vw, 9rem);
		-webkit-text-stroke-color: rgba(217, 164, 65, 0.6);
	}

	/* until a photograph is supplied, the placeholder illustration sits on the right half so it never fights the copy,
	   and its slot badge moves to the top-right corner (the stage numeral owns the top-left) */
	html.hs-js:not(.hs-reduced) .home-rath__media .media-slot__art {
		inset: 9% 4% 9% 55%;
	}

	html.hs-js:not(.hs-reduced) .home-rath__media .media-slot__meta {
		inset: 0.9rem 0.9rem auto auto;
	}

	/* route line: fills with the story (--hscroll-progress is written on [data-hscroll]) */
	html.hs-js:not(.hs-reduced) .home-rath__route {
		position: absolute;
		right: max(var(--gutter), calc((100% - var(--container)) / 2));
		bottom: clamp(4.25rem, 9vh, 6rem); /* clears the back-to-top button */
		left: max(var(--gutter), calc((100% - var(--container)) / 2));
		z-index: 4;
		display: block;
		height: 3.25rem;
		pointer-events: none;
	}

	.home-rath__route-line {
		position: absolute;
		top: 0.4rem;
		right: 2.5rem;
		left: 2.5rem;
		height: 2px;
		border-radius: 2px;
		background: repeating-linear-gradient(90deg, rgba(155, 138, 125, 0.5) 0 6px, transparent 6px 12px);
	}

	.home-rath__route-line > i {
		position: absolute;
		inset: 0;
		display: block;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--saffron), var(--saffron-bright));
		box-shadow: 0 0 14px rgba(244, 122, 31, 0.85);
		transform: scaleX(var(--hscroll-progress, 0));
		transform-origin: left;
	}

	/* the "rath" — a glowing bead riding the tip of the line */
	.home-rath__route-line > i::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -7px;
		width: 14px;
		height: 14px;
		margin-top: -7px;
		border-radius: 50%;
		background: radial-gradient(circle at 35% 30%, #ffe2bd, var(--saffron) 55%, var(--deep-saffron));
		box-shadow: 0 0 0 4px rgba(244, 122, 31, 0.25), 0 0 22px 6px rgba(244, 122, 31, 0.7);
	}

	.home-rath__stops {
		position: absolute;
		inset: 0;
		right: 2.5rem;
		left: 2.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.home-rath__stop {
		--at: 0;
		position: absolute;
		top: 0;
		left: calc(var(--at) * 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.7rem;
		margin: 0;
		translate: -50% 0;
		/* --lit: 0 → 1 as the line passes this stop (a ~2.5% ramp); the dot dims more than the label so the label keeps AA contrast */
		--lit: clamp(0, calc((var(--hscroll-progress, 0) - var(--at) + 0.02) * 40), 1);
	}

	.home-rath__stop:nth-child(1) { --at: 0; }
	.home-rath__stop:nth-child(2) { --at: 0.3333; }
	.home-rath__stop:nth-child(3) { --at: 0.6667; }
	.home-rath__stop:nth-child(4) { --at: 1; }

	.home-rath__stop::before {
		content: '';
		width: 12px;
		height: 12px;
		margin-top: -5px;
		border: 2px solid var(--saffron);
		border-radius: 50%;
		background: #070504;
		opacity: calc(0.4 + var(--lit) * 0.6);
	}

	.home-rath__stop > span {
		color: var(--fg-soft);
		opacity: calc(0.72 + var(--lit) * 0.28);
		font-size: 0.68rem;
		font-weight: 800;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		white-space: nowrap;
	}
}


/* ==========================================================================
   07 · Seva Activities Grid (ivory)
   ========================================================================== */
.home-sevagrid__featured,
.home-sevagrid__compact {
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

.home-sevagrid__compact {
	margin-top: var(--gap);
}

@media (min-width: 560px) {
	.home-sevagrid__compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.home-sevagrid__featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.home-sevagrid__compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* mobile: the first six categories, then "View all Seva" */
@media (max-width: 767px) {
	.home-sevagrid__compact > :nth-child(n + 5) {
		display: none;
	}

	.home-sevagrid__head .link-arrow {
		display: none;
	}
}

.home-sevagrid__all {
	margin: 1.75rem 0 0;
}

@media (min-width: 768px) {
	.home-sevagrid__all {
		display: none;
	}
}

.home-sevacard {
	background: var(--surface);
}

/* hover: photograph zooms 1.03, arrow slides */
.home-sevacard:hover .media-slot--image .media-slot__media {
	transform: scale(1.03);
}

.home-sevacard__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(168, 66, 12, 0.1);
	color: var(--accent);
}

.home-sevacard__ghost {
	position: absolute;
	top: 14%;
	right: 10%;
	width: 46%;
	aspect-ratio: 1;
	color: var(--accent);
	opacity: 0.2;
	pointer-events: none;
}

/* large featured tiles (card--tile pins its content to the bottom; .card__body's flex:1 would stretch it to the top) */
.home-sevacard--feature {
	min-height: 20rem;
	border-color: transparent;
}

.home-sevacard--feature .card__body {
	flex: 0 0 auto;
	margin-top: auto;
}

/* until a photograph is supplied the tile is a dark, warm panel (the section is ivory, the text is ivory) */
.tone-ivory .home-sevacard--feature .media-slot__placeholder {
	background:
		radial-gradient(90% 70% at 80% 12%, rgba(244, 122, 31, 0.38), transparent 62%),
		linear-gradient(160deg, #2b1f17, #130d0a);
}

.home-sevacard--feature .card__media .media-slot__meta {
	inset: 0.9rem 0.9rem auto auto;
}

@media (min-width: 768px) {
	.home-sevacard--feature {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

.home-sevacard--feature .card__media .media-slot {
	background: #1a120d;
}

/* a steadier scrim under the title: bright photographs (white goat, sky) must never fight the type */
.home-sevacard--feature .card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(11, 9, 7, 0.78) 0%, rgba(11, 9, 7, 0.4) 42%, transparent 72%);
}

.home-sevacard--feature .home-sevacard__icon {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 3;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(244, 122, 31, 0.5);
	background: rgba(11, 9, 7, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--saffron);
}

.home-sevacard--feature .home-sevacard__ghost {
	color: var(--saffron);
	opacity: 0.22;
}

.home-sevacard--feature .card__title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.home-sevacard--feature .card__excerpt {
	max-width: 34rem;
}

.home-sevacard--feature .card__cta {
	margin-top: 0.4rem;
	color: var(--saffron-bright);
}

/* compact cards */
.home-sevacard--compact .card__body {
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
}

.home-sevacard--compact .card__title {
	flex: 1;
	min-width: 0;
	font-size: 1.1rem;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.home-sevacard--compact .card__cta {
	flex: none;
	margin-left: auto;
}

/* four narrow columns (1024–1279): a little tighter so the longest names ("Environmental Protection") never touch the arrow */
@media (min-width: 1024px) and (max-width: 1279px) {
	.home-sevacard--compact .card__body {
		gap: 0.6rem;
		padding: 0.9rem 0.85rem;
	}

	.home-sevacard--compact .home-sevacard__icon {
		width: 2.1rem;
		height: 2.1rem;
	}

	.home-sevacard--compact .card__title {
		font-size: 1rem;
	}
}

/* small phones: horizontal compact cards (photo left, title right) keep the list short */
@media (max-width: 559px) {
	.home-sevacard--compact .media-slot__badge i {
		display: none;
	}

	.home-sevacard--compact .media-slot__badge {
		white-space: nowrap;
	}

	.home-sevacard--compact {
		flex-direction: row;
		align-items: stretch;
	}

	.home-sevacard--compact .card__media {
		flex: 0 0 38%;
		max-width: 38%;
	}

	.home-sevacard--compact .card__media .media-slot {
		height: 100%;
		aspect-ratio: auto;
		min-height: 6.25rem;
	}

	.home-sevacard--compact .card__body {
		flex: 1;
		min-width: 0;
		padding: 0.75rem 0.9rem;
	}

	.home-sevacard--compact .home-sevacard__icon {
		width: 2rem;
		height: 2rem;
	}
}


/* ==========================================================================
   08 · Upcoming Events (charcoal + faint topographic texture)
   ========================================================================== */
.home-events {
	overflow: clip;
}

.home-events__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* contour lines: concentric rings from two origins, faded toward the edges */
.home-events__topo {
	position: absolute;
	inset: 0;
	background-image:
		repeating-radial-gradient(ellipse 70% 52% at 14% 22%, transparent 0 25px, rgba(217, 164, 65, 0.075) 25px 26px),
		repeating-radial-gradient(ellipse 58% 70% at 88% 82%, transparent 0 29px, rgba(217, 164, 65, 0.065) 29px 30px);
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 25%, transparent 88%);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 25%, transparent 88%);
}

.home-events__grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.home-events__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: stretch;
	}

	.home-events__grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* exactly two events: equal columns and equal weight (a single compact card stretched beside a lead looks sparse) */
@media (min-width: 768px) {
	.home-events__grid--duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

.home-events__feature {
	display: flex;
}

.home-events__feature > .card {
	flex: 1;
}

.home-events__feature .card__media {
	display: flex;
	flex: 1 1 auto;
}

.home-events__feature .card__media .media-slot {
	height: 100%;
	min-height: 15rem;
	aspect-ratio: auto;
}

@media (min-width: 1024px) {
	.home-events__feature .card__media .media-slot {
		min-height: 24rem;
	}
}

.home-events__list {
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--gap);
}

/* date badge locks into place when the card is revealed */
@media (prefers-reduced-motion: no-preference) {
	html.hs-js .home-events .card.is-revealed .date-badge {
		animation: home-lock 0.95s var(--ease-out) 0.35s backwards;
	}
}

@keyframes home-lock {
	0% { opacity: 0; transform: translateY(-22px) scale(1.3); }
	55% { opacity: 1; transform: translateY(3px) scale(0.96); }
	100% { opacity: 1; transform: none; }
}

.home-events__empty {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: rgba(11, 9, 7, 0.4);
}

/* compact cards sit in a flex row on small screens: let their text column shrink and wrap instead of being clipped */
.home-events__card .card__body,
.home-stories .card--compact .card__body {
	min-width: 0;
}

.home-events__card .card__meta,
.home-events__card .card__meta li,
.home-events__card .card__meta li > span {
	min-width: 0;
}

.home-events__card .card__foot {
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}


/* ==========================================================================
   09 · Guiding Spirit (dark, light rising from the bottom)
   ========================================================================== */
.home-spirit {
	--bg: #080605;
	display: grid;
	align-items: center;
	min-height: min(100svh, 52rem);
	overflow: clip;
}

.home-spirit__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}

.home-spirit__media .media-slot__placeholder {
	background: none;
}

/* veil inside the media slot (below its pause button), same reasoning as the hero */
.home-spirit__media .media-slot::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		radial-gradient(80% 70% at 50% 46%, rgba(8, 6, 5, 0.25), rgba(8, 6, 5, 0.76)),
		linear-gradient(180deg, rgba(8, 6, 5, 0.94) 0%, rgba(8, 6, 5, 0.42) 38%, rgba(8, 6, 5, 0.55) 72%, rgba(8, 6, 5, 0.96) 100%);
}

.home-spirit__media .media-slot__toggle {
	right: 1rem;
}

.home-spirit__bg--video {
	inset: -5% 0;
}

.home-spirit__bg--video .media-slot__toggle {
	bottom: calc(4.55% + 1rem); /* 5% of the background hangs below the section */
}

@media (max-width: 767px) {
	.home-spirit__bg--video {
		inset: 0;
	}

	.home-spirit__bg--video .media-slot__toggle {
		bottom: 1rem;
	}
}

.home-spirit__light {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(72% 54% at 50% 114%, rgba(244, 122, 31, 0.58), rgba(217, 164, 65, 0.22) 38%, transparent 70%),
		radial-gradient(40% 30% at 50% 100%, rgba(255, 190, 120, 0.3), transparent 70%);
}

/* until the loop is supplied: a faint diya rising from the bottom light (kept well clear of the text) */
.home-spirit__deco {
	position: absolute;
	bottom: -22%;
	left: 50%;
	z-index: -1;
	width: min(24rem, 58vw);
	color: var(--antique-gold);
	opacity: 0.2;
	translate: -50% 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
	mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}

.home-spirit__inner {
	position: relative;
	width: min(100% - 2 * var(--gutter), 1000px);
	margin-inline: auto;
	text-align: center;
}

.home-spirit__block .eyebrow {
	margin-bottom: 1.75rem;
}

.home-spirit__quote .quote__mark {
	width: clamp(2.75rem, 2rem + 2vw, 3.75rem);
	height: clamp(2.75rem, 2rem + 2vw, 3.75rem);
	margin-bottom: 1.5rem;
}

.home-spirit__quote .quote__text {
	font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.75rem);
	line-height: 1.1;
}

.home-spirit__commit {
	max-width: 42rem;
	margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0;
	color: var(--fg-soft);
	font-size: var(--fs-lg);
}

.home-spirit__sign {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	margin: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0 0;
	color: var(--accent-2);
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem);
	letter-spacing: 0.12em;
}

.home-spirit__sign::before,
.home-spirit__sign::after {
	content: '';
	flex: 0 1 3.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.8));
}

.home-spirit__sign::after {
	transform: scaleX(-1);
}

/* phones: the sign-off stays on one line (no flanking rules, tighter tracking) */
@media (max-width: 559px) {
	.home-spirit__sign {
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	.home-spirit__sign::before,
	.home-spirit__sign::after {
		display: none;
	}
}


/* ==========================================================================
   10 · Join the Sena (ivory)
   ========================================================================== */
.home-join {
	overflow: clip;
}

.home-join__nodes {
	position: absolute;
	top: 4%;
	right: -6%;
	z-index: -1;
	width: min(52vw, 560px);
	color: var(--accent-2);
	opacity: 0.16;
	pointer-events: none;
}

.home-join__grid {
	row-gap: clamp(2.5rem, 2rem + 3vw, 4rem);
}

/* (.col-start-N would replace the span that .col-N keeps in grid-column-start, so the placement is explicit) */
@media (min-width: 1024px) {
	.home-join__copy {
		grid-column: 7 / span 6;
	}
}

.home-join__visual {
	max-width: 30rem;
	margin-inline: auto;
	width: 100%;
}

.home-join__frame {
	position: relative;
	isolation: isolate;
}

.home-join__frame::before {
	content: '';
	position: absolute;
	inset: -14px 14px 14px -14px;
	z-index: -1;
	border: 1px solid rgba(125, 90, 18, 0.5);
	border-radius: var(--r-lg);
}

.home-join__photo {
	--media-radius: var(--r-lg);
	box-shadow: var(--shadow-ivory);
}

.home-join__head {
	margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.home-join__flow {
	position: relative;
	margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

.home-join__line {
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 33px;
	width: 2px;
	border-radius: 2px;
	background: var(--line-strong);
}

/* (scaleY is driven by the [data-progress-line] engine via --progress; without the motion layer the line simply shows full) */
.home-join__line > i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, var(--saffron-mid), var(--antique-gold));
}

/* vertical steps inside the narrow column (the .steps component lays out horizontally from 900px) */
.home-join .home-join__steps {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.9rem;
}

.home-join .step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1.25rem;
	align-items: start;
	text-align: left;
}

.home-join .step__num {
	width: 68px;
	height: 68px;
	margin: 0;
	background: var(--bg);
	color: var(--accent);
}

.home-join .step__body {
	padding-top: 0.45rem;
}

.home-join .step__title {
	margin: 0 0 0.3rem;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

.home-join .step__text {
	max-width: 30rem;
	color: var(--fg-soft);
	font-size: var(--fs-body);
}

.home-join__cta {
	align-items: center;
}

/* one pulse, once, after the CTA is revealed */
@media (prefers-reduced-motion: no-preference) {
	html.hs-js .home-join__cta.is-revealed .btn--primary {
		animation: home-pulse 1.9s ease-out 0.7s 1;
	}
}

@keyframes home-pulse {
	0% {
		box-shadow: 0 0 0 1px rgba(255, 170, 95, 0.45) inset, 0 10px 34px -12px rgba(244, 122, 31, 0.7), 0 0 0 0 rgba(244, 122, 31, 0.5);
	}
	100% {
		box-shadow: 0 0 0 1px rgba(255, 170, 95, 0.45) inset, 0 10px 34px -12px rgba(244, 122, 31, 0.7), 0 0 0 26px rgba(244, 122, 31, 0);
	}
}


/* ==========================================================================
   11 · Latest Stories (dark)
   ========================================================================== */
.home-stories__chips {
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.home-stories__grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.home-stories__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: stretch;
	}

	.home-stories__grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* exactly two stories: equal columns and equal weight */
@media (min-width: 768px) {
	.home-stories__grid--duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

.home-stories__feature {
	display: flex;
}

.home-stories__feature > .card {
	flex: 1;
}

/* a wide, editorial crop for the lead story (beats the card's inline ratio); a lone story uses the horizontal card instead */
.home-stories__grid:not(.home-stories__grid--solo) .home-stories__feature .card__media .media-slot:not(.media-slot--fill) {
	aspect-ratio: 16 / 10;
}

.home-stories__list {
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--gap);
}


/* ==========================================================================
   12 · Gallery / social proof (black, edge to edge)
   ========================================================================== */
.home-gallery {
	--bg: #000;
	overflow: clip;
	padding-top: clamp(4rem, 3rem + 5vw, 7rem);
	background-color: #000;
	border-top: 1px solid rgba(217, 164, 65, 0.22);
}

.home-gallery__head {
	margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);
	text-align: center;
}

.home-gallery__head .eyebrow {
	margin-bottom: 1.25rem;
}

.home-gallery__title {
	margin: 0 0 1.4rem;
	font-size: clamp(2rem, 1rem + 4.6vw, 4.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.home-gallery__title > span {
	display: block;
}

@media (min-width: 900px) {
	.home-gallery__title > span {
		display: inline;
	}
}

.home-gallery__head p {
	margin: 0;
}

/* mobile: 2-column masonry — tall / short tiles alternate so both columns end together */
.home-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(84px, 24vw, 130px);
	grid-auto-flow: dense;
	gap: 2px;
}

.home-gallery__tile {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	background: #120d0a;
	grid-row: span 2;
}

.home-gallery__tile:nth-child(odd) {
	grid-row: span 3;
}

.home-gallery__img {
	position: absolute;
	inset: -4px;
	display: block;
}

.home-gallery__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease-out), filter 0.6s ease;
	filter: saturate(0.95) brightness(0.92);
}

a.home-gallery__tile:hover .home-gallery__img img,
a.home-gallery__tile:focus-visible .home-gallery__img img {
	transform: scale(1.05);
	filter: saturate(1.05) brightness(1);
}

a.home-gallery__tile:focus-visible {
	outline-offset: -4px;
}

/* YouTube's hqdefault frame has ~12.5% black bars top and bottom: scale them out of view */
.home-gallery__tile.is-letterboxed .home-gallery__img img {
	scale: 1.36;
}

.home-gallery__tile--video .play-badge__btn {
	width: 56px;
	height: 56px;
}

.home-gallery__tile--video .play-badge .icon {
	width: 22px;
	height: 22px;
}

.home-gallery__duration {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	z-index: 3;
	padding: 0.2rem 0.55rem;
	border-radius: var(--r-pill);
	background: rgba(11, 9, 7, 0.78);
	color: var(--warm-ivory);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.home-gallery__novideo {
	position: absolute;
	inset: 18%;
	color: var(--antique-gold);
	opacity: 0.4;
}

/* placeholder tiles (no albums yet) */
.home-gallery__tile--ph {
	background: #100b09;
}

.home-gallery__tile--ph .media-slot__art {
	inset: 16%;
	opacity: 0.55;
}

/* tablet + desktop: a designed mosaic on a 6-column grid. 8 tiles = 2 rows, 12 tiles = 3 rows; tile 4 (video) is tall */
@media (min-width: 768px) {
	.home-gallery__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(120px, 17vw, 270px);
	}

	.home-gallery__tile,
	.home-gallery__tile:nth-child(odd) {
		grid-row: auto;
		grid-column: auto;
	}

	.home-gallery__grid--8 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
	.home-gallery__grid--8 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
	.home-gallery__grid--8 > :nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
	.home-gallery__grid--8 > :nth-child(4) { grid-area: 1 / 4 / 3 / 5; }
	.home-gallery__grid--8 > :nth-child(5) { grid-area: 1 / 5 / 2 / 6; }
	.home-gallery__grid--8 > :nth-child(6) { grid-area: 2 / 5 / 3 / 6; }
	.home-gallery__grid--8 > :nth-child(7) { grid-area: 1 / 6 / 2 / 7; }
	.home-gallery__grid--8 > :nth-child(8) { grid-area: 2 / 6 / 3 / 7; }

	.home-gallery__grid--12 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
	.home-gallery__grid--12 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
	.home-gallery__grid--12 > :nth-child(3) { grid-area: 1 / 4 / 2 / 6; }
	.home-gallery__grid--12 > :nth-child(4) { grid-area: 1 / 6 / 3 / 7; }
	.home-gallery__grid--12 > :nth-child(5) { grid-area: 2 / 3 / 3 / 4; }
	.home-gallery__grid--12 > :nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
	.home-gallery__grid--12 > :nth-child(7) { grid-area: 2 / 5 / 3 / 6; }
	.home-gallery__grid--12 > :nth-child(8) { grid-area: 3 / 1 / 4 / 2; }
	.home-gallery__grid--12 > :nth-child(9) { grid-area: 3 / 2 / 4 / 3; }
	.home-gallery__grid--12 > :nth-child(10) { grid-area: 3 / 3 / 4 / 5; }
	.home-gallery__grid--12 > :nth-child(11) { grid-area: 3 / 5 / 4 / 6; }
	.home-gallery__grid--12 > :nth-child(12) { grid-area: 3 / 6 / 4 / 7; }
}


/* ==========================================================================
   13 · Final CTA (saffron band)
   ========================================================================== */
.home-cta .cta-band__title {
	max-width: 15ch;
	margin-inline: auto;
}

.home-cta .cta-band__inner {
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* the gada is a tall, narrow illustration: size it by height so it stands in the band instead of towering past it.
   Its strokes use the ornament accent colours (ink on saffron), so the whole layer is faded with opacity. */
.home-cta .cta-band__art {
	right: -12%;
	width: auto;
	height: 125%;
	opacity: 0.14;
}

@media (min-width: 900px) {
	.home-cta .cta-band__art {
		right: clamp(0.5rem, 3vw, 4rem);
	}
}

@media (max-width: 899px) {
	.home-cta .cta-band__art {
		right: -22%;
		opacity: 0.1;
	}
}

.home-cta .cta-band__art svg {
	width: auto;
	height: 100%;
}

.home-cta__contact {
	--btn-fg: var(--sanctum-black);
}

.home-cta__contact:hover {
	--btn-fg: var(--sanctum-black);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 767px) {
	.home-cta .cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.home-cta .cta-band__actions .btn {
		width: 100%;
	}
}


/* ==========================================================================
   Print / reduced motion: nothing here relies on motion to be readable. These only silence idle loops.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.home-hero__cue-line,
	.home-seal__turn,
	.home-rath__wheel .media-slot,
	.home-hero__halo::after,
	.home-map__node.is-on .home-map__dot::after {
		animation: none !important;
	}

	/* state changes (active map node / open card) still happen, but instantly */
	.home-seva-card,
	.home-seva-card__more,
	.home-map__dot,
	.home-map__tag,
	.home-pillar__disc,
	.home-gallery__img img {
		transition-duration: 0.01ms !important;
	}
}