/* ==========================================================================
   home.css
   Homepage-only: the pinned hero stage, the services ticker, and the shared
   scroll-reveal primitives. Loaded exclusively on the front page.

   The hero used to be a 260vh pinned stage driven by a scrolled custom property.
   That is gone: it is now a plain full-height photograph with static type, so it
   renders identically with JS, without JS and under reduced motion. What remains
   scripted on this page is the scroll-reveal of the sections below.
   ========================================================================== */

.home {
	/* Tunables. Change these, not the rules below. */
	--reveal-y: 26px;
	--reveal-dur: .9s;
	--reveal-ease: cubic-bezier(.22, .61, .36, 1);
	--word-ease: cubic-bezier(.16, .84, .28, 1);
}

/* ─── HERO SHELL ────────────────────────────────────────────────────────── */
/* Every value here exists to override the legacy `.home .hero` block in
   sections.css, which sets its own overflow, grid and padding. */
.home .hero--photo {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 100vh;   /* iOS < 15.4 drops the svh line below entirely */
	min-height: 100svh;
	padding: 0;
	margin: 0;
	background: var(--bone);
	color: var(--navy-deep);
	isolation: isolate;
}

/* ─── LAYERS ────────────────────────────────────────────────────────────── */
.home .stage-layers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.home .stage-sky,
.home .cloud {
	position: absolute;
	background-repeat: no-repeat;
	will-change: transform;
}

/* Skyline: bottom-anchored, oversized so parallax never exposes an edge. */
.home .stage-sky {
	left: -4%; right: -4%; bottom: -6%;
	height: 108%;
	background-position: center bottom;
	background-size: cover;
}

/* Grade for a daylight photograph.
   1. an ivory sweep from the left, which is what makes navy type readable over
      both the open sky and the busy city below
   2. a soft ivory band at the very top so the fixed header has something to sit
      on, and a navy band at the very bottom to hand off to the next section
   The right third is left almost untouched, so the Burj and the sky stay clean. */
.home .hero--photo .stage-grade {
	position: absolute; inset: 0;
	background:
		linear-gradient(97deg,
			rgba(245,242,236,.97) 0%,
			rgba(245,242,236,.93) 26%,
			rgba(245,242,236,.62) 46%,
			rgba(245,242,236,.16) 62%,
			rgba(245,242,236,0) 74%),
		linear-gradient(180deg, rgba(245,242,236,.86) 0%, rgba(245,242,236,0) 16%),
		linear-gradient(0deg, rgba(15,36,56,.55) 0%, rgba(15,36,56,0) 18%);
}
.home .hero--photo .stage-grade::after {
	content: "";
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(15,36,56,.022) 0 1px, transparent 1px 13px);
}

/* ─── COPY ──────────────────────────────────────────────────────────────── */
.home .stage-inner {
	position: relative; z-index: 3;
	flex: 1 1 auto;
	width: 100%;
	display: flex; align-items: center;
	padding: 118px var(--pad) 104px;
}
.home .hero-copy {
	max-width: var(--max);
	width: 100%;
	margin: 0 auto;
}

/* The two hero buttons are different shapes: a pill with 14px vertical padding
   and a ghost link with 12px and no border. Left as inline-flex siblings they
   aligned on the text baseline, so the boxes did not agree and the ghost's
   underline landed at a different height from the pill's centre. Explicit flex
   container plus matched vertical padding puts both on one line. */
.home .hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px clamp(18px, 2vw, 28px);
	margin-top: clamp(26px, 3vw, 38px);
}
.home .hero-actions .btn { flex: 0 0 auto; }
.home .hero-actions .btn--ghost { padding-top: 14px; padding-bottom: 14px; }

/* Every hero entrance below is a CSS animation with `both` fill, so the copy
   arrives with or without JS. Nothing in the hero is left at opacity:0
   waiting for a script to release it. */
@keyframes najahaEyebrowIn { from { opacity: 0; } to { opacity: .95; } }
@keyframes najahaRuleIn    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes najahaLedeIn    { from { opacity: 0; } to { opacity: .82; } }
@keyframes najahaRiseIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.home .hero-eyebrow {
	font-family: var(--f-mono);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold);
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 28px;
	animation: najahaEyebrowIn .8s ease .15s both;
}
.home .hero-eyebrow::before {
	content: ""; width: 40px; height: 1px; background: var(--gold); opacity: .8;
	transform-origin: left; display: block;
	animation: najahaRuleIn 1s var(--reveal-ease) .2s both;
}

.home .hero-headline {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(42px, 7.4vw, 132px);
	line-height: .96;
	letter-spacing: -.038em;
	max-width: 20ch;
	margin: 0;
}
.home .hero-headline em {
	font-family: var(--f-edit);
	font-style: italic; font-weight: 400;
	color: var(--gold);
	letter-spacing: -.01em;
}
.home .hl-line { display: block; }

/* ─── STAGE FOOT ────────────────────────────────────────────────────────── */
.home .stage-foot {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
	padding: 0 var(--pad) 28px;
	font-family: var(--f-mono);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	opacity: .72;
}
.home .stage-foot .lbl { opacity: .5; margin-right: 10px; }

/* ─── SCROLL REVEALS ────────────────────────────────────────────────────── */
/* JS tags elements with [data-reveal] and a --i index, then flips .is-in.
   Nothing is hidden until JS confirms it can reveal it again, so a JS failure
   can never leave the page blank. */
.home [data-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--reveal-y), 0);
}
/* Tabbing into a block that has not revealed yet must not hide the focus ring
   for the length of the transition. */
.home [data-reveal]:focus-within {
	opacity: 1;
	transform: none;
	transition-duration: .001s;
}
.home [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--reveal-dur) ease calc(var(--i, 0) * .085s),
		transform var(--reveal-dur) var(--reveal-ease) calc(var(--i, 0) * .085s);
}
.home [data-reveal].is-in.rv-done { will-change: auto; }

/* Pillar and case imagery gets a slow counter-parallax inside its frame. */
.home [data-parallax] > img {
	transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1.12);
	will-change: transform;
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.home .stage-inner { padding-top: 150px; padding-bottom: 60px; }
	.home .hero-copy { opacity: 1 !important; transform: none !important; }
	.home .stage-sky,
	.home .cloud { animation: none !important; transform: none !important; }
	.home .stage-foot { opacity: .72; }
	.home .hero-headline .w > i,
	.home .hero-eyebrow,
	.home .hero-eyebrow::before,
	.home .hero-lede,
	.home .hero-actions {
		opacity: 1 !important; transform: none !important;
		animation: none !important; transition: none !important;
	}
	.home .ticker-track { animation: none; }
	.home [data-reveal] { opacity: 1 !important; transform: none !important; }
	.home [data-parallax] > img { transform: none; }
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.home .hero-headline { max-width: 16ch; }
}
@media (max-width: 900px) {
	.home .stage-inner { padding-top: 116px; align-items: flex-end; padding-bottom: 8px; }
	.home .hero-headline { font-size: clamp(38px, 10.5vw, 66px); max-width: 14ch; }
	.home .hero-lede { font-size: 16px; max-width: 40ch; }
	.home .cloud--a { top: 6%; height: 26%; }
	.home .cloud--b { top: 22%; height: 22%; }
	.home .cloud--c { display: none; }
	.home .stage-foot { font-size: 10px; padding-bottom: 22px; }
	.home .ticker-item { font-size: clamp(17px, 5.4vw, 26px); padding: 0 18px; }
}
@media (max-width: 600px) {
	.home .stage-foot .sf-place { display: none; }
}

/* ─── APPROACH PILLAR IMAGERY ───────────────────────────────────────────── */
/* sections.css desaturates these for the original placeholder art. The new
   pillar plates carry brand colour, so most of that filter comes off. */
.home .approach .pillar .img > img {
	filter: saturate(1.02) contrast(1.02);
	transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.home .approach .pillar:hover .img > img { filter: saturate(1.12) contrast(1.05); }
.home .approach .pillar .img {
	border-color: rgba(200,163,92,.22);
	box-shadow: 0 24px 60px rgba(6,16,28,.45);
}

/* ==========================================================================
   HERO ON A PHOTOGRAPH  —  .hero--photo
   The plate is bright daylight, so the type inverts to navy and the wordmark
   beat goes dark-on-light instead of light-on-dark.
   ========================================================================== */
.home .hero--photo .stage { color: var(--navy-deep); background: var(--bone); }
.home .hero--photo .stage-sky { filter: saturate(1.02); }

.home .hero--photo .hero-eyebrow { color: #8a6f2f; }
.home .hero--photo .hero-eyebrow::before { background: #8a6f2f; }
.home .hero--photo .hero-headline { color: var(--navy-deep); }
.home .hero--photo .hero-headline em { color: #9a7526; }
.home .hero--photo .hero-lede { color: var(--ink); }
@keyframes najahaLedeInDark { from { opacity: 0; } to { opacity: .9; } }
.home .hero--photo .hero-lede { animation-name: najahaLedeInDark; }

/* Ghost button needs dark ink on a light plate. */
.home .hero--photo .hero-actions .btn--ghost {
	color: var(--navy-deep);
	border-color: rgba(15,36,56,.4);
}
.home .hero--photo .hero-actions .btn--ghost:hover {
	color: #8a6f2f;
	border-color: #8a6f2f;
}

/* Wordmark: navy outline that fills navy, sitting over the sky. */
/* Colour is set with the plate further down, so the two cannot drift apart. */

.home .hero--photo .stage-foot { color: var(--ink); }
.home .hero--photo .stage-foot .line-v { background: var(--navy-deep); }

/* Copy sits in the left half, where the ivory sweep is strongest. */
.home .hero--photo .hero-copy { max-width: min(var(--max), 100%); }
.home .hero--photo .hero-headline { max-width: 15ch; }
.home .hero--photo .hero-lede { max-width: 42ch; }

@media (max-width: 900px) {
	/* On a narrow screen the sweep becomes vertical: the photo reads at the
	   bottom, the copy on near-solid ivory above it. */
	.home .hero--photo .stage-grade {
		/* The ivory has to reach the bottom of the copy, not stop at 82%. The lede
		   and the buttons sit around 60-80% of the frame, which is exactly where
		   the old ramp had already faded out, so that copy was sitting on bare
		   city photograph. */
		background:
			linear-gradient(180deg,
				rgba(245,242,236,.97) 0%,
				rgba(245,242,236,.95) 46%,
				rgba(245,242,236,.88) 66%,
				rgba(245,242,236,.7) 80%,
				rgba(245,242,236,.18) 93%,
				rgba(245,242,236,0) 100%),
			linear-gradient(0deg, rgba(15,36,56,.5) 0%, rgba(15,36,56,0) 18%);
	}
	/* Was 122px of top padding on a centred block, which left a large void above
	   the eyebrow and pushed the buttons into the busy part of the photo. */
	.home .hero--photo .stage-inner { align-items: flex-start; padding: 96px var(--pad) 72px; }
	.home .hero--photo .hero-headline { max-width: 13ch; }
	.home .hero--photo .hero-lede { max-width: 38ch; }
}

/* Below this width the pill and the ghost link no longer sit side by side
   without crowding the right edge, so they stack. Full-width primary is also the
   easier thumb target. */
@media (max-width: 560px) {
	.home .hero-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.home .hero-actions .btn { justify-content: center; }
	.home .hero-actions .btn--ghost {
		justify-content: flex-start;
		padding-top: 10px; padding-bottom: 10px;
	}
	.home .hero--photo .hero-lede { font-size: 15px; line-height: 1.6; }

	/* 13ch was too narrow for "We build the brand" at the 42px clamp floor, so it
	   broke after "the" and left "brand" alone on its own line. Drop the width cap
	   and let the authored line breaks do the work at a size that fits. */
	.home .hero--photo .hero-headline {
		max-width: none;
		font-size: clamp(27px, 8.8vw, 44px);
	}

	/* A full 100svh of hero on a phone left roughly 240px of empty ivory above the
	   eyebrow once the copy was centred in it. Slightly shorter, so the same block
	   sits closer to the middle. */
	.home .hero--photo {
		min-height: 84vh;
		min-height: 84svh;
	}
}

/* ==========================================================================
   01 WHAT WE DO  —  .svcb  (the service board)
   Two bands, one per family. Each band is a three-track grid whose first card
   is a double-width feature, and that is what makes the counts work: five items
   fill exactly six tracks, eight items fill exactly nine, so both bands come
   out as complete rectangles with no orphan cell.

   Cards are bone at rest and fill navy from the bottom on hover. The first card
   of each band is navy already, so every band has a visual anchor and the grid
   never reads as an undifferentiated wall.

   Nothing is hover-gated: the name and the summary are always present, so the
   board is fully readable with no pointer, no JS and no motion.
   ========================================================================== */
.home .svcb { background: var(--ivory); color: var(--charcoal); padding: clamp(56px, 7vw, 104px) var(--pad); }
.home .svcb-inner { max-width: var(--max); margin: 0 auto; }

/* ─── section head ──────────────────────────────────────────────────────── */
.home .svcb-head {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 72px);
	align-items: end; margin-bottom: clamp(30px, 3.4vw, 52px);
}
@media (max-width: 1000px) { .home .svcb-head { grid-template-columns: 1fr; align-items: start; } }
.home .svcb-title-block .eyebrow { margin-bottom: 0; }
.home .svcb-head h2 {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(32px, 4.2vw, 66px); line-height: .97;
	letter-spacing: -.035em; max-width: 17ch; margin-top: 16px;
}
.home .svcb-head h2 em { font-family: var(--f-edit); font-style: italic; font-weight: 400; color: #9a7526; }
.home .svcb-lede { font-size: 16.5px; line-height: 1.65; color: var(--ink); opacity: .82; max-width: 42ch; }

/* ─── band rail ─────────────────────────────────────────────────────────── */
.home .svcb-band + .svcb-band { margin-top: clamp(26px, 3vw, 44px); }
.home .svcb-rail {
	position: relative;
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px;
	padding-bottom: 13px; margin-bottom: clamp(14px, 1.5vw, 22px);
	border-bottom: 1px solid var(--stone);
}
/* Gold rule that draws itself across as the band enters. Drawn by default and
   only retracted once JS has tagged the rail as revealable, so with no JS the
   rule is simply present rather than permanently at zero width. */
.home .svcb-rail::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
	background: #9a7526; transform-origin: left;
}
.home .svcb-rail[data-reveal]::after { transform: scaleX(0); }
.home .svcb-rail.is-in::after {
	transform: scaleX(1);
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1) .12s;
}
.home .svcb-rail__label {
	font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--charcoal);
}
.home .svcb-rail__note { font-family: var(--f-edit); font-style: italic; font-size: 15px; color: var(--ink); opacity: .58; }
.home .svcb-rail__count { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: #9a7526; }
@media (max-width: 620px) {
	.home .svcb-rail { grid-template-columns: 1fr auto; row-gap: 6px; }
	.home .svcb-rail__note { grid-column: 1 / -1; order: 3; }
}

/* ─── the grid ──────────────────────────────────────────────────────────── */
.home .svcb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1vw, 16px); }
.home .svcb-card--feature { grid-column: span 2; }
@media (max-width: 1000px) { .home .svcb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
	.home .svcb-grid { grid-template-columns: 1fr; }
	.home .svcb-card--feature { grid-column: auto; }
}

/* ─── the card ──────────────────────────────────────────────────────────── */
/* The two figure colours are custom properties, so one set of glyph markup
   works on a bone card and on a navy one without duplicated rules. */
.home .svcb-card {
	--fg-line: rgba(27,58,92,.3);
	--fg-accent: #9a7526;
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-rows: auto 1fr auto; gap: clamp(13px, 1.4vw, 20px);
	min-height: clamp(172px, 14.2vw, 218px);
	padding: clamp(16px, 1.5vw, 22px);
	background: var(--bone); border: 1px solid var(--stone);
	color: var(--charcoal);
	transition: color .3s ease .06s, border-color .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.home .svcb-card::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 82%);
	transform: scaleY(0); transform-origin: bottom;
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.home .svcb-card:hover,
.home .svcb-card:focus-visible {
	--fg-line: rgba(245,242,236,.42);
	--fg-accent: var(--gold);
	color: var(--ivory); border-color: rgba(200,163,92,.42);
	transform: translateY(-3px);
}
.home .svcb-card:hover::before,
.home .svcb-card:focus-visible::before { transform: scaleY(1); }

/* Feature card: already navy, so it anchors the band. */
.home .svcb-card--feature {
	--fg-line: rgba(245,242,236,.4);
	--fg-accent: var(--gold);
	color: var(--ivory); border-color: rgba(200,163,92,.26);
	min-height: clamp(204px, 16.8vw, 258px);
}
.home .svcb-card--feature::before { transform: scaleY(1); }
.home .svcb-card--feature::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(120% 100% at 100% 0%, rgba(200,163,92,.22), transparent 62%);
	opacity: 0; transition: opacity .55s ease;
}
.home .svcb-card--feature:hover,
.home .svcb-card--feature:focus-visible { border-color: rgba(200,163,92,.62); }
.home .svcb-card--feature:hover::after,
.home .svcb-card--feature:focus-visible::after { opacity: 1; }

.home .svcb-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home .svcb-card__n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; opacity: .5; }
.home .svcb-card__body { align-self: end; display: grid; gap: 7px; }
.home .svcb-card__t {
	font-family: var(--f-display); font-weight: 600;
	font-size: clamp(17.5px, 1.45vw, 21px); letter-spacing: -.02em; line-height: 1.16;
}
.home .svcb-card--feature .svcb-card__t {
	font-weight: 700; font-size: clamp(22px, 2vw, 31px); letter-spacing: -.032em; line-height: 1.05;
}
.home .svcb-card__d { display: block; font-size: 13.5px; line-height: 1.55; opacity: .72; max-width: 34ch; }
.home .svcb-card--feature .svcb-card__d { font-size: 15px; line-height: 1.6; max-width: 40ch; }

.home .svcb-card__foot { display: flex; align-items: center; gap: 10px; }
.home .svcb-card__cue {
	font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	opacity: 0; transform: translateY(4px);
	transition: opacity .35s ease, transform .35s ease;
}
.home .svcb-card--feature .svcb-card__cue { opacity: .5; transform: none; }
.home .svcb-card:hover .svcb-card__cue,
.home .svcb-card:focus-visible .svcb-card__cue { opacity: .7; transform: none; }
.home .svcb-card__arr {
	font-family: var(--f-mono); font-size: 15px; margin-left: auto;
	opacity: .45; transform: translateX(-4px);
	transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.home .svcb-card:hover .svcb-card__arr,
.home .svcb-card:focus-visible .svcb-card__arr { opacity: 1; transform: translateX(0); }

/* ─── card motion graphics ──────────────────────────────────────────────── */
/* One size for every glyph so the orbit and scan distances are single-sourced.
   The feature card scales the whole container instead of resizing the parts. */
.home .svcb-fig { position: relative; flex: none; width: 56px; height: 56px; display: block; }
.home .svcb-card--feature .svcb-fig { scale: 1.2; transform-origin: 100% 0; }

/* Brand: concentric rings with an orbiting dot. */
.home .bf-ring { position: absolute; border-radius: 50%; border: 1px solid var(--fg-line); }
.home .bf-ring--1 { inset: 0; border-top-color: var(--fg-accent); border-right-color: var(--fg-accent); animation: najahaSpin 6s linear infinite; }
.home .bf-ring--2 { inset: 11px; border-bottom-color: var(--fg-accent); animation: najahaSpin 9s linear infinite reverse; }
.home .bf-dot {
	position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px;
	border-radius: 50%; background: var(--fg-accent);
	transform-origin: 2.5px 2.5px; animation: najahaBfOrbit 6s linear infinite;
}
@keyframes najahaBfOrbit { from { transform: rotate(0) translateX(28px); } to { transform: rotate(360deg) translateX(28px); } }

/* Build: a stack of bars that load in sequence. */
.home .svcb-fig--stack { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.home .bf-bar { height: 6px; background: var(--fg-line); position: relative; overflow: hidden; }
.home .bf-bar:nth-child(1) { width: 100%; }
.home .bf-bar:nth-child(2) { width: 66%; }
.home .bf-bar:nth-child(3) { width: 86%; }
.home .bf-bar::after {
	content: ""; position: absolute; inset: 0; background: var(--fg-accent);
	transform: scaleX(0); transform-origin: left;
	animation: najahaLoad 3.4s cubic-bezier(.5,0,.2,1) infinite;
}
.home .bf-bar:nth-child(2)::after { animation-delay: .28s; }
.home .bf-bar:nth-child(3)::after { animation-delay: .56s; }

/* Performance: an equaliser. */
.home .svcb-fig--bars { display: flex; align-items: flex-end; gap: 5px; }
.home .bf-eq {
	flex: 1 1 0; height: 34%; background: var(--fg-accent); transform-origin: bottom;
	animation: najahaBfEq 1.6s ease-in-out infinite;
}
.home .bf-eq:nth-child(2n) { background: var(--fg-line); }
.home .bf-eq:nth-child(2) { animation-delay: .19s; }
.home .bf-eq:nth-child(3) { animation-delay: .38s; }
.home .bf-eq:nth-child(4) { animation-delay: .57s; }
.home .bf-eq:nth-child(5) { animation-delay: .76s; }
@keyframes najahaBfEq { 0%, 100% { transform: scaleY(.36); } 50% { transform: scaleY(2.5); } }

/* Reach: a broadcast pulse. */
.home .svcb-fig--pulse { display: grid; place-items: center; }
.home .bf-wave {
	position: absolute; inset: 0; border: 1px solid var(--fg-accent); border-radius: 50%;
	opacity: 0; animation: najahaBfPulse 3.2s ease-out infinite;
}
.home .bf-wave:nth-child(2) { animation-delay: 1.07s; }
.home .bf-wave:nth-child(3) { animation-delay: 2.14s; }
.home .bf-core { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-accent); }
@keyframes najahaBfPulse { 0% { transform: scale(.26); opacity: .85; } 100% { transform: scale(1); opacity: 0; } }

/* Infrastructure: a mesh with cells that light in sequence. */
.home .svcb-fig--mesh { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; }
.home .bf-cell { border: 1px solid var(--fg-line); animation: najahaBfCell 4.6s ease-in-out infinite; }
.home .bf-cell:nth-child(2) { animation-delay: .14s; }
.home .bf-cell:nth-child(3) { animation-delay: .28s; }
.home .bf-cell:nth-child(4) { animation-delay: .42s; }
.home .bf-cell:nth-child(5) { animation-delay: .56s; }
.home .bf-cell:nth-child(6) { animation-delay: .7s; }
.home .bf-cell:nth-child(7) { animation-delay: .84s; }
.home .bf-cell:nth-child(8) { animation-delay: .98s; }
.home .bf-cell:nth-child(9) { animation-delay: 1.12s; }
@keyframes najahaBfCell {
	0%, 70%, 100% { background: transparent; border-color: var(--fg-line); }
	12%           { background: var(--fg-accent); border-color: var(--fg-accent); }
}

/* Connectivity: two nodes and a wire with a travelling pulse. */
.home .bf-node {
	position: absolute; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
	border-radius: 50%; border: 1px solid var(--fg-accent);
}
.home .bf-node--a { left: 0; }
.home .bf-node--b { right: 0; }
.home .bf-wire {
	position: absolute; left: 13px; right: 13px; top: 50%; height: 1px;
	background: var(--fg-line); overflow: hidden;
}
.home .bf-wire::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
	background: var(--fg-accent);
	animation: najahaBfWire 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes najahaBfWire { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

/* Continuity: an enclosure with a scan line. */
.home .bf-shell { position: absolute; inset: 4px 7px; border: 1px solid var(--fg-line); border-radius: 3px 3px 42% 42%; }
.home .bf-scan {
	position: absolute; left: 7px; right: 7px; top: 8px; height: 1px; background: var(--fg-accent);
	animation: najahaBfScan 2.9s ease-in-out infinite;
}
@keyframes najahaBfScan {
	0%, 100% { transform: translateY(0); opacity: .35; }
	50%      { transform: translateY(36px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.home .svcb-rail::after { transform: scaleX(1) !important; transition: none !important; }
	.home .svcb-card,
	.home .svcb-card::before,
	.home .svcb-card__cue,
	.home .svcb-card__arr { transition: none !important; }
	.home .bf-ring, .home .bf-dot, .home .bf-bar::after, .home .bf-eq,
	.home .bf-wave, .home .bf-cell, .home .bf-wire::after, .home .bf-scan {
		animation: none !important;
	}
	/* Frozen but still legible, rather than blank. */
	.home .bf-bar::after { transform: scaleX(.62); }
	.home .bf-eq { transform: scaleY(1.5); }
	.home .bf-wave { opacity: .3; transform: scale(.72); }
	.home .bf-wire::after { transform: translateX(80%); }
}

/* ==========================================================================
   02 WHO WE ARE  —  .story
   Statement and argument in the left column, the pull quote in the right as a
   navy card, then the factual markers as a full-width strip.

   The previous version set the quote across the left half and left the right
   half empty, which read as an unfinished page. The card fills that column with
   the line most worth reading, gives the bone band an anchor the way the feature
   cards anchor the board above, and previews the navy of the pillars below.
   ========================================================================== */
.home .story { background: var(--bone); color: var(--charcoal); padding: clamp(52px, 6.4vw, 96px) var(--pad); }
.home .story-inner { max-width: var(--max); margin: 0 auto; }

.home .story-grid {
	display: grid; grid-template-columns: 1.12fr .88fr;
	gap: clamp(28px, 4vw, 76px);
	/* `stretch`, not `start`: the quote card grows to the height of the text
	   column, so the right side has no leftover gap under it. `min-height` below
	   is only a floor for the case where the copy is unusually short. */
	align-items: stretch;
}
@media (max-width: 1000px) {
	.home .story-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ─── statement and argument ────────────────────────────────────────────── */
.home .story-head .eyebrow { margin-bottom: 0; }
.home .story-head h2 {
	font-family: var(--f-display); font-weight: 700;
	/* Was up to 104px, which dwarfed everything beside it and forced the empty
	   space this section was rebuilt to remove. */
	font-size: clamp(34px, 4.6vw, 74px); line-height: .95;
	letter-spacing: -.038em; max-width: 15ch; margin-top: 16px;
}
.home .story-head h2 em { font-family: var(--f-edit); font-style: italic; font-weight: 400; color: #9a7526; }

.home .story-body { margin-top: clamp(24px, 2.6vw, 40px); }
.home .story-body p {
	font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.7;
	color: var(--ink); max-width: 56ch;
}
.home .story-body p + p { margin-top: 20px; }
/* Gold rule leading the first paragraph, in place of the old dropcap. */
.home .story-body p:first-child { position: relative; padding-left: 24px; }
.home .story-body p:first-child::before {
	content: ""; position: absolute; left: 0; top: .45em; bottom: .3em;
	width: 2px; background: #9a7526; opacity: .75;
}
.home .story-body .dropcap { font: inherit; float: none; margin: 0; color: inherit; }

/* ─── the quote card ────────────────────────────────────────────────────── */
.home .story-quote {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-rows: auto 1fr auto;
	gap: clamp(18px, 2vw, 28px);
	min-height: clamp(280px, 22vw, 340px);
	margin: 0;
	padding: clamp(24px, 2.4vw, 38px);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(200,163,92,.18), transparent 62%),
		linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 80%);
	border: 1px solid rgba(200,163,92,.26);
	color: var(--ivory);
}
.home .story-quote__mark {
	font-family: var(--f-edit); font-style: italic; font-weight: 400;
	font-size: clamp(64px, 6vw, 104px); line-height: .5;
	color: var(--gold); opacity: .42;
	display: block; height: .4em;
	user-select: none;
}
.home .story-quote blockquote {
	align-self: center;
	font-family: var(--f-edit); font-style: italic; font-weight: 400;
	font-size: clamp(21px, 2.15vw, 32px); line-height: 1.3;
	letter-spacing: -.012em; color: var(--ivory);
	margin: 0; padding: 0; border: 0;
	text-wrap: pretty;
}
.home .story-quote figcaption {
	position: relative; align-self: end; padding-top: 20px;
	font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(245,242,236,.55);
}
/* Rule above the citation, drawn on reveal. Present by default so it is not
   permanently at zero width when JS is unavailable. */
.home .story-quote figcaption::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
	background: rgba(200,163,92,.5); transform-origin: left;
}
.home .story-quote[data-reveal] figcaption::before { transform: scaleX(0); }
.home .story-quote.is-in figcaption::before {
	transform: scaleX(1);
	transition: transform 1.2s cubic-bezier(.22,.61,.36,1) .18s;
}
/* Stacked, there is no sibling column to match, so the card hugs its content
   instead of holding a fixed height open. Declared after the base rule rather
   than up beside the grid, otherwise source order would override it. */
@media (max-width: 1000px) {
	.home .story-quote { min-height: 0; }
	.home .story-quote blockquote { align-self: start; }
}

/* ─── the marker strip ──────────────────────────────────────────────────── */
.home .story-facts {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(30px, 3.4vw, 54px) 0 0;
	border-top: 1px solid var(--stone);
}
.home .story-fact { position: relative; padding: clamp(20px, 2vw, 28px) 0 0; }
.home .story-fact + .story-fact { padding-left: clamp(20px, 3vw, 48px); }
/* Hairline between cells, drawn downward as the strip enters. */
.home .story-fact + .story-fact::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 10%;
	width: 1px; background: var(--stone); transform-origin: top;
}
.home .story-fact[data-reveal] + .story-fact::before,
.home .story-fact + .story-fact[data-reveal]::before { transform: scaleY(0); }
.home .story-fact + .story-fact.is-in::before {
	transform: scaleY(1);
	transition: transform 1s cubic-bezier(.22,.61,.36,1) calc(.1s + var(--i, 0) * .1s);
}
@media (max-width: 720px) {
	.home .story-facts { grid-template-columns: 1fr; }
	.home .story-fact { border-bottom: 1px solid var(--stone); padding: 18px 0; }
	.home .story-fact + .story-fact { padding-left: 0; }
	.home .story-fact + .story-fact::before { display: none; }
}
.home .story-fact dt {
	font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink); opacity: .55; margin-bottom: 10px;
}
.home .story-fact dd {
	font-family: var(--f-display); font-weight: 600;
	font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.022em; margin: 0;
	line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
	.home .story-quote figcaption::before { transform: scaleX(1) !important; transition: none !important; }
	.home .story-fact + .story-fact::before { transform: scaleY(1) !important; transition: none !important; }
}


/* ==========================================================================
   03 HOW WE WORK  —  .hww
   Four discipline cards, 2x2. No photography: each card carries a small CSS
   motion graphic instead, which says "this is alive" without a download.
   ========================================================================== */
.home .hww {
	background: var(--navy);
	background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
	color: var(--ivory);
	padding: clamp(56px, 7vw, 108px) var(--pad);
	position: relative;
}
.home .hww-inner { max-width: var(--max); margin: 0 auto; }

.home .hww-head {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 72px);
	align-items: end; margin-bottom: clamp(32px, 3.6vw, 56px);
}
@media (max-width: 1000px) { .home .hww-head { grid-template-columns: 1fr; align-items: start; } }
.home .hww-title .eyebrow { margin-bottom: 0; color: var(--gold); opacity: .9; }
.home .hww-head h2 {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(32px, 4.4vw, 72px); line-height: .97;
	letter-spacing: -.035em; max-width: 17ch; margin-top: 16px;
}
.home .hww-head h2 em { font-family: var(--f-edit); font-style: italic; font-weight: 400; color: var(--gold); }
.home .hww-lede { font-size: 16.5px; line-height: 1.65; opacity: .74; max-width: 42ch; }

.home .hww-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(245,242,236,.16);   /* the gap becomes the hairline grid */
	border: 1px solid rgba(245,242,236,.16);
}
@media (max-width: 820px) { .home .hww-grid { grid-template-columns: 1fr; } }

.home .hww-card {
	background: linear-gradient(160deg, rgba(20,44,68,.92), rgba(15,36,56,.96));
	padding: clamp(24px, 2.6vw, 40px);
	display: grid; align-content: start; gap: 14px;
	transition: background .5s ease;
}
.home .hww-card:hover { background: linear-gradient(160deg, rgba(27,58,92,.98), rgba(17,41,63,.98)); }
.home .hww-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.home .hww-n {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(40px, 4.4vw, 66px); line-height: .82;
	letter-spacing: -.04em; color: var(--ivory); opacity: .2;
}
.home .hww-card h3 {
	font-family: var(--f-display); font-weight: 600;
	font-size: clamp(23px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.04;
	margin-top: 2px;
}
.home .hww-card p { font-size: 15.5px; line-height: 1.6; opacity: .74; max-width: 42ch; }
.home .hww-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.home .hww-tags .pill { color: var(--ivory); border-color: rgba(245,242,236,.32); }

/* ─── the motion graphics ────────────────────────────────────────────────── */
.home .hww-fig {
	position: relative; flex: none;
	width: 66px; height: 66px;
	display: block;
}

/* 01 Brand: concentric rings, one counter-rotating, with an orbiting dot. */
.home .fg-ring {
	position: absolute; border-radius: 50%;
	border: 1px solid rgba(245,242,236,.4);
}
.home .fg-ring--1 { inset: 0; border-top-color: var(--gold); border-right-color: var(--gold); animation: najahaSpin 5.5s linear infinite; }
.home .fg-ring--2 { inset: 13px; border-bottom-color: var(--gold); animation: najahaSpin 8s linear infinite reverse; }
.home .fg-dot {
	position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px;
	border-radius: 50%; background: var(--gold);
	transform-origin: 3px 3px;
	animation: najahaOrbit 5.5s linear infinite;
}
@keyframes najahaSpin { to { transform: rotate(360deg); } }
@keyframes najahaOrbit { from { transform: rotate(0) translateX(33px); } to { transform: rotate(360deg) translateX(33px); } }

/* 02 Web: a stack of lines that load in sequence. */
.home .hww-fig--stack { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.home .fg-bar {
	height: 7px; background: rgba(245,242,236,.26); position: relative; overflow: hidden;
}
.home .fg-bar:nth-child(1) { width: 100%; }
.home .fg-bar:nth-child(2) { width: 68%; }
.home .fg-bar:nth-child(3) { width: 86%; }
.home .fg-bar::after {
	content: ""; position: absolute; inset: 0; background: var(--gold);
	transform: scaleX(0); transform-origin: left;
	animation: najahaLoad 3.4s cubic-bezier(.5,0,.2,1) infinite;
}
.home .fg-bar:nth-child(1)::after { animation-delay: 0s; }
.home .fg-bar:nth-child(2)::after { animation-delay: .28s; }
.home .fg-bar:nth-child(3)::after { animation-delay: .56s; }
@keyframes najahaLoad {
	0%   { transform: scaleX(0); }
	42%  { transform: scaleX(1); }
	72%  { transform: scaleX(1); }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* 03 Digital: an equaliser. */
.home .hww-fig--bars { display: flex; align-items: flex-end; gap: 5px; }
.home .fg-eq {
	flex: 1; background: var(--gold); opacity: .85;
	transform-origin: bottom;
	animation: najahaEq 1.9s ease-in-out infinite;
}
.home .fg-eq:nth-child(1) { height: 40%; animation-delay: 0s; }
.home .fg-eq:nth-child(2) { height: 68%; animation-delay: .18s; }
.home .fg-eq:nth-child(3) { height: 30%; animation-delay: .36s; }
.home .fg-eq:nth-child(4) { height: 84%; animation-delay: .1s; }
.home .fg-eq:nth-child(5) { height: 54%; animation-delay: .48s; }
@keyframes najahaEq {
	0%, 100% { transform: scaleY(.35); }
	50%      { transform: scaleY(1); }
}

/* 04 PR & Training: a broadcast pulse. */
.home .hww-fig--pulse { display: grid; place-items: center; }
.home .fg-core { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); grid-area: 1/1; }
.home .fg-wave {
	grid-area: 1/1;
	width: 66px; height: 66px; border-radius: 50%;
	border: 1px solid var(--gold);
	transform: scale(.2); opacity: 0;
	animation: najahaPulse 3.2s ease-out infinite;
}
.home .fg-wave:nth-child(2) { animation-delay: 1.05s; }
.home .fg-wave:nth-child(3) { animation-delay: 2.1s; }
@keyframes najahaPulse {
	0%   { transform: scale(.18); opacity: .85; }
	70%  { opacity: .18; }
	100% { transform: scale(1); opacity: 0; }
}

/* Tighten the homepage CTA: its 240px of padding is what created the void
   between this section and the closing headline. */
.home .cta { padding: clamp(60px, 7vw, 112px) var(--pad); }

@media (prefers-reduced-motion: reduce) {
	.home .fg-ring, .home .fg-dot, .home .fg-bar::after,
	.home .fg-eq, .home .fg-wave { animation: none !important; }
	.home .fg-bar::after { transform: scaleX(.65); }
	.home .fg-wave { opacity: .3; transform: scale(.7); }
}

/* ─── MORE MOTION: rules that draw themselves on reveal ─────────────────── */
/* The service board carries its own version of this on `.svcb-rail`, up in the
   01 block. What follows is the same gesture on the two sections below it. */

/* The quote card carries its own citation rule, up in the 02 block. */

/* And on each card's top edge as the grid reveals. */
.home .hww-card { position: relative; }
.home .hww-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: var(--gold);
	transform-origin: left;
}
.home .hww-card[data-reveal]::before { transform: scaleX(0); }
.home .hww-card.is-in::before {
	transform: scaleX(1);
	transition: transform 1s cubic-bezier(.22,.61,.36,1) calc(.15s + var(--i, 0) * .09s);
}

@media (prefers-reduced-motion: reduce) {
	.home .hww-card::before { transform: scaleX(1) !important; transition: none !important; }
}