@charset "UTF-8";
/* ============================================================================
 * Fortunerise Advisory — main.css
 * Design System v3 (docs/DESIGN-SYSTEM.md) + accessibility contract from
 * docs/BUILD-SPEC.md §2.2 and responsiveness/motion from docs/BUILD-SPEC-V2.md.
 *
 * The five shifts this stylesheet implements:
 *   1. Type scaled up and tightened (negative tracking, sub-1.0 display leading)
 *   2. Roughly double the vertical rhythm (--section-y)
 *   3. Asymmetric, left-aligned editorial layouts — centring only where spec'd
 *   4. Gold as an accent (~10% of surface); one gold-filled button per screen
 *   5. Depth from soft layered shadows + large radii, not 1px hairline boxes
 *
 * CONTRAST NOTE — every text/surface pair below was computed with the WCAG 2.1
 * relative-luminance formula against the actual photographs (see the ratios
 * quoted inline). Values are worst-case: the photo pixel used is the brightest
 * one measured in the region the copy occupies, composited through the scrim.
 *
 * TABLE OF CONTENTS
 *   1  Tokens
 *   2  Reset, base type, accessibility primitives
 *   3  Layout primitives: .wrap, .section, .sec-head
 *   4  Buttons, icons, utilities
 *   5  Prose (editor content)
 *   6  Masthead: topbar, bar, brand, nav, drawer
 *   7  Hero + enquiry card / form
 *   8  Trust strip
 *   9  Services bento
 *  10  Stats bar
 *  11  Why us
 *  12  EMI calculator
 *  13  Process timeline
 *  14  Testimonials
 *  15  FAQ
 *  16  CTA band
 *  17  Page hero (inner pages)
 *  18  Inner-page patterns (split, lists, panels)
 *  19  Partners / Contact / Service single
 *  20  Blog, search, 404, pagination
 *  21  Footer + WhatsApp FAB
 *  22  Motion (reveal, marquee, keyframes)
 *  23  Reduced motion
 *  24  Print
 * ========================================================================= */

/* ════════════════════════════════════════════════════════════════════════
 * 1. TOKENS  (design system §2 — values verbatim, plus derived additions)
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
	/* ---- Colour --------------------------------------------------------- */
	--c-navy-950: #080F2C;
	--c-navy-900: #0D1838;
	--c-navy-800: #132650;
	--c-navy-700: #1B3468;
	--c-navy-600: #254587;
	--c-navy-500: #37589E;

	--c-gold-300: #F4DFA0;
	--c-gold-400: #E6C56A;
	--c-gold-500: #D4A73C;
	--c-gold-600: #B0851F;
	--c-gold-700: #8A6716;

	/* Warm neutral surfaces — the page is NOT pure white */
	--c-white: #FFFFFF;
	--c-surface: #FAF8F4;
	--c-surface-2: #F3EFE7;
	--c-surface-3: #EAE4D8;

	--c-ink: #141A2E;
	--c-ink-body: #3D4664;
	--c-ink-soft: #6B7590;
	--c-line: #E4DED1;
	--c-control-line: #767B8A;
	--c-on-navy: #EEF1F9;
	--c-on-navy-soft: #A9B4D2;

	/* ADDED — small muted text that must still clear AA on the warm tints.
	 * --c-ink-soft (#6B7590) measures 4.33 : 1 on --c-surface, 4.00 : 1 on
	 * --c-surface-2 and 3.63 : 1 on --c-surface-3, so it is a large-text /
	 * non-text colour only. #5A6480 measures 5.88 / 5.55 / 5.13 / 4.65 : 1
	 * on white / surface / surface-2 / surface-3 — AA at any size. */
	--c-ink-muted: #5A6480;
	/* Visible-on-any-light-surface divider (--c-line is 1.17 : 1 on
	 * surface-2, i.e. decorative on white only). */
	--c-hairline: rgba(20, 26, 46, .11);
	--c-hairline-strong: rgba(20, 26, 46, .18);
	/* Hairlines on navy bands. */
	--c-hairline-invert: rgba(255, 255, 255, .12);

	--grad-gold: linear-gradient(135deg, #F4DFA0 0%, #D4A73C 48%, #B0851F 100%);
	--grad-navy: linear-gradient(155deg, #1B3468 0%, #132650 45%, #080F2C 100%);
	--grad-scrim: linear-gradient(180deg, rgba(8, 15, 44, .35) 0%, rgba(8, 15, 44, .82) 100%);
	--grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0));

	/* ADDED — the left-heavy wash that sits UNDER --grad-scrim on every
	 * photographic band. The photographs all contain near-white pixels
	 * (measured max: #FFFFDC in the hero, #FFFFFF in the Chennai and
	 * handshake shots), and --grad-scrim alone starts at .35 alpha, which
	 * would leave white type at 2.80 : 1 over a white pixel. Compounded with
	 * this wash the effective alpha never drops below .818 where copy sits:
	 * white 11.01 : 1, --c-on-navy-soft 5.32 : 1 over a pure-white pixel. */
	--grad-band-wash: linear-gradient(90deg, rgba(8, 15, 44, .72) 0%, rgba(8, 15, 44, .66) 55%, rgba(8, 15, 44, .58) 100%);

	/* ---- Type ----------------------------------------------------------- */
	--f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--f-script: 'Great Vibes', 'Brush Script MT', cursive;

	--fs-display: clamp(2.6rem, 1.5rem + 5vw, 5.25rem);
	--fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem);
	--fs-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem);
	--fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
	--fs-lead: clamp(1.05rem, 1rem + .38vw, 1.3rem);
	--fs-body: 1.0625rem;
	--fs-small: .9375rem;
	--fs-eyebrow: .75rem;
	/* ADDED — section eyebrows render at 13px; 12px is reserved for the
	 * heavily letter-spaced brand sub-wordmark. */
	--fs-eyebrow-lg: .8125rem;
	/* ADDED — the editorial numeral used by stats, process, why and about. */
	--fs-numeral: clamp(2.4rem, 1.2rem + 3.4vw, 3.6rem);

	--lh-display: .98;
	--lh-heading: 1.08;
	--lh-body: 1.7;
	--ls-display: -.035em;
	--ls-heading: -.025em;
	--ls-eyebrow: .16em;

	/* ---- Space / shape -------------------------------------------------- */
	--wrap: 1240px;
	--wrap-narrow: 820px;
	--gutter: clamp(1.15rem, 4vw, 2.5rem);
	--section-y: clamp(4.5rem, 9vw, 8.5rem);

	--radius-s: 10px;
	--radius-m: 18px;
	--radius-l: 26px;
	--radius-xl: 34px;
	--radius-pill: 999px;

	--e1: 0 1px 2px rgba(8, 15, 44, .04), 0 2px 8px rgba(8, 15, 44, .05);
	--e2: 0 4px 14px rgba(8, 15, 44, .06), 0 14px 36px rgba(8, 15, 44, .08);
	--e3: 0 14px 32px rgba(8, 15, 44, .10), 0 36px 72px rgba(8, 15, 44, .13);
	--e-gold: 0 10px 30px rgba(212, 167, 60, .30);

	--ease: cubic-bezier(.16, 1, .3, 1);
	--dur: .6s;
	/* ADDED — the two other durations named in design system §5. */
	--dur-micro: .2s;
	--dur-enter: .85s;

	/* ---- Focus (unchanged contract from v2) ----------------------------- */
	--focus-halo: 0 0 0 2px var(--c-gold-300);

	/* ---- Masthead metrics (ADDED) --------------------------------------- *
	 * The masthead is position:fixed and contains BOTH the topbar row and
	 * .site-header__bar, so page content is offset by the whole stack, not
	 * just the bar. The topbar is display:none below 900px, hence 0 here. */
	--topbar-h: 0px;
	--header-bar-h: 4.25rem;   /* 68px */
	--header-h: calc(var(--topbar-h) + var(--header-bar-h));
	/* Everything position:sticky clears the masthead by this much. */
	--sticky-top: calc(var(--header-h) + 1.5rem);
}

@media (min-width: 900px) {
	:root {
		--topbar-h: 2.5rem;      /* 40px */
		--header-bar-h: 5rem;    /* 80px  → 120px masthead, matching the
		                          * 120px sticky offset named in the spec */
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 2. RESET, BASE TYPE, ACCESSIBILITY PRIMITIVES
 * ═══════════════════════════════════════════════════════════════════════ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* In-page anchors (#enquire, skip link) must clear the fixed masthead. */
	scroll-padding-top: calc(var(--header-h) + 1rem);
	/* `clip` rather than `hidden`: it guarantees documentElement.scrollWidth
	 * === clientWidth at every width WITHOUT turning the root into a scroll
	 * container, so position:sticky keeps working throughout. Declared on
	 * <html> as well as <body> because a lone body value is propagated to
	 * the viewport, leaving the root's own scrollWidth unclipped. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--c-surface);
	color: var(--c-ink-body);
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` (not `hidden`) so position:sticky keeps working inside. */
	overflow-x: clip;
	max-width: 100%;
	text-rendering: optimizeLegibility;
}

/* Scroll-lock while the mobile drawer is open (JS toggles body.nav-open). */
body.nav-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--f-serif);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.125rem; }

p, ul, ol, dl, figure, blockquote, pre, table {
	margin: 0 0 1.15em;
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

a {
	color: var(--c-gold-700);              /* 5.21 : 1 on white, 4.54 : 1 on surface-2 */
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-micro) var(--ease);
}

a:hover {
	color: var(--c-navy-700);
}

img,
picture,
svg,
video,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
	display: block;
}

picture {
	display: block;
}

svg {
	fill: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-hairline);
	margin: 2rem 0;
}

::selection {
	background: var(--c-gold-300);
	color: var(--c-navy-950);              /* 14.27 : 1 */
}

/* ---- Focus ring — BUILD-SPEC §2.2, unchanged contract ------------------ *
 * Two-tone so the indicator clears 3:1 on light, navy and gold surfaces.
 * --c-navy-800 measures 14.78 : 1 on white and 11.67 : 1 on --c-surface-3;
 * the --c-gold-300 halo fills the 2px offset gap and carries the indicator
 * on navy (14.27 : 1 on --c-navy-950).
 * Any rule that overrides box-shadow on :focus-visible MUST prepend
 * var(--focus-halo). No rule may set outline:none without a replacement. */
:focus-visible {
	outline: 3px solid var(--c-navy-800);
	outline-offset: 2px;
	box-shadow: var(--focus-halo);
	border-radius: 3px;
}

/* Focusables that already carry a radius keep it under the ring. */
.btn:focus-visible,
.field__control:focus-visible,
.emi-field__number:focus-visible,
.site-header__cta-btn:focus-visible {
	border-radius: inherit;
}

/* Screen-reader-only content (WordPress-standard class name). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: .85rem 1.35rem;
	background: var(--c-white);
	color: var(--c-navy-900);
	border-radius: var(--radius-s);
	box-shadow: var(--e2);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	outline: 3px solid var(--c-navy-800);
	outline-offset: 2px;
	box-shadow: var(--focus-halo);
}

/* ════════════════════════════════════════════════════════════════════════
 * 3. LAYOUT PRIMITIVES
 * ═══════════════════════════════════════════════════════════════════════ */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main {
	display: block;
	min-height: 40vh;
}

/* The masthead is fixed, so every view that starts with an opaque header
 * has to reserve its full height. The front page does not: its hero owns
 * the space beneath a transparent masthead. */
body.has-solid-header .site-main {
	padding-top: var(--header-h);
}

/* The front page hero owns the space beneath the transparent masthead and
 * supplies its own top padding, so no offset here. */
body.has-transparent-header .site-main {
	padding-top: 0;
}

#content {
	scroll-margin-top: var(--header-h);
}

/* ---- Section rhythm --------------------------------------------------- *
 * Alternate surfaces deliberately; never two identical neighbours.
 * Front page:  hero(dark) → trust(surface-2) → services(surface) →
 *              stats(navy) → why(white) → emi(navy-grad) →
 *              process(surface-2) → testimonials(surface) → faq(white) →
 *              cta(photo/dark) */
.section {
	position: relative;
	padding-block: var(--section-y);
	background: var(--c-surface);
}

.section--tint,
.section--process,
.section--vision-mission,
.section--approach,
.section--benefits,
.section--related {
	background: var(--c-surface-2);
}

.section--why,
.section--faq,
.section--services-intro,
.section--about-intro,
.section--partners,
.section--service-single {
	background: var(--c-white);
}

.section--services,
.section--testimonials,
.section--contact {
	background: var(--c-surface);
}

/* Navy bands share the layered gradient and the light-text defaults. */
.section--emi,
.section--promise {
	background: var(--grad-navy);
	color: var(--c-on-navy);
}

.section--emi h2,
.section--emi h3,
.section--promise h2,
.section--promise h3 {
	color: var(--c-white);
}

/* ---- Section header pattern ------------------------------------------- *
 * Left-aligned by default. The centred kicker-with-flanking-rules of the
 * previous build is gone: a single 24px gold rule sits to the LEFT of the
 * eyebrow, never flanking both sides. */
.sec-head {
	margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
	max-width: 100%;
}

.sec-head__eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1rem;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold-700);              /* 5.21 white / 4.91 surface / 4.54 surface-2 */
	line-height: 1.4;
}

.sec-head__eyebrow::before {
	content: "";
	flex: none;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-gold-500);
}

/* On navy bands the eyebrow flips to gold-400 (10.42 : 1 on --c-navy-900). */
.section--emi .sec-head__eyebrow,
.section--promise .sec-head__eyebrow,
.stats-bar .sec-head__eyebrow,
.cta-band .sec-head__eyebrow {
	color: var(--c-gold-400);
}

.sec-head__title {
	margin: 0;
	max-width: 46ch;
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 15.05 : 1 on surface-2 */
	text-wrap: balance;
}

.sec-head__lead {
	margin: 1.15rem 0 0;
	max-width: 58ch;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-ink-body);              /* 8.11 : 1 on surface-2 */
	text-wrap: pretty;
}

.section--emi .sec-head__lead,
.section--promise .sec-head__lead {
	color: var(--c-on-navy-soft);          /* 8.42 : 1 on --c-navy-900 */
}

/* Centred variant — only where the design system calls for it (CTA band,
 * testimonials). The title tightens to 22ch so it wraps into a balanced
 * 2–3 line block instead of one long line. */
.sec-head--center {
	text-align: center;
	margin-inline: auto;
	max-width: var(--wrap-narrow);
}

.sec-head--center .sec-head__eyebrow {
	justify-content: center;
}

.sec-head--center .sec-head__title {
	max-width: 22ch;
	margin-inline: auto;
}

.sec-head--center .sec-head__lead {
	margin-inline: auto;
	max-width: 46ch;
}

/* ════════════════════════════════════════════════════════════════════════
 * 4. BUTTONS, ICONS, UTILITIES
 * ═══════════════════════════════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;                      /* primary CTA tap target */
	padding: .9rem 1.6rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	font-family: var(--f-sans);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		background-color var(--dur-micro) var(--ease),
		color var(--dur-micro) var(--ease),
		border-color var(--dur-micro) var(--ease);
}

.btn .icon {
	width: 1.15em;
	height: 1.15em;
	transition: transform var(--dur-micro) var(--ease);
}

/* The ONE gold-filled button per screen. */
.btn--gold {
	background: var(--grad-gold);
	color: var(--c-navy-950);              /* 8.42 : 1 on the #D4A73C midpoint */
	box-shadow: var(--e-gold);
}

.btn--gold:hover {
	color: var(--c-navy-950);
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(212, 167, 60, .42);
}

.btn--gold:active {
	transform: translateY(0);
}

.btn--dark {
	background: var(--c-navy-800);
	color: var(--c-white);                 /* 14.78 : 1 */
	box-shadow: var(--e1);
}

.btn--dark:hover {
	background: var(--c-navy-700);
	color: var(--c-white);
	transform: translateY(-2px);
	box-shadow: var(--e2);
}

/* Ghost — white outline for navy / photographic grounds.
 * The border is rgba(255,255,255,.45) rather than the .35 sketched in the
 * design system: over the hero scrim .35 measures 2.72 : 1 against its own
 * ground, short of the 3:1 that SC 1.4.11 asks of a control boundary.
 * At .45 it measures 3.50 : 1 over the hero scrim (4.48 : 1 on flat
 * --c-navy-950) and still reads as a quiet outline. */
.btn--ghost {
	border: 1.5px solid rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .04);
	color: var(--c-white);
	backdrop-filter: blur(2px);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .68);
	color: var(--c-white);
	transform: translateY(-2px);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* --- .btn--text is deliberately SELF-SUFFICIENT ------------------------- *
 * The services grid renders it on a bare <span class="service-card__more
 * btn--text"> with no base .btn class, while single-fr_service.php renders
 * it as <a class="btn btn--text">. It therefore has to establish its own
 * box AND neutralise .btn's chrome — which it does by virtue of coming
 * later in the cascade at equal specificity. */
.btn--text {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 24px;                      /* WCAG 2.5.8 */
	padding: .35rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--f-sans);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	transition: color var(--dur-micro) var(--ease);
}

.btn--text .icon {
	width: 1.05em;
	height: 1.05em;
	transition: transform var(--dur-micro) var(--ease);
}

.btn--text:hover {
	color: var(--c-navy-800);
	transform: none;
	box-shadow: none;
}

.btn--text:hover .icon {
	transform: translateX(4px);
}

/* Ghost / gold buttons keep the two-tone ring: the halo is prepended so
 * the gold band survives the box-shadow override. */
.btn--gold:focus-visible {
	box-shadow: var(--focus-halo), var(--e-gold);
}

.btn--dark:focus-visible {
	box-shadow: var(--focus-halo), var(--e1);
}

/* ---- Icons ------------------------------------------------------------ */
.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	stroke: currentColor;
	fill: none;
	vertical-align: middle;
}

.fr-logo {
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	color: var(--c-gold-500);
	stroke: currentColor;
}

/* ---- Utilities -------------------------------------------------------- */
.u-gold {
	color: var(--c-gold-700);              /* light-surface default (AA) */
}

/* On dark grounds the gold utility brightens. */
.hero .u-gold,
.cta-band .u-gold,
.section--emi .u-gold,
.section--promise .u-gold,
.stats-bar .u-gold,
.site-footer .u-gold,
.page-hero .u-gold {
	color: var(--c-gold-400);
}

.script-accent {
	font-family: var(--f-script);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--c-gold-400);
}

/* Long unbroken strings (the email address) must never push the page wide. */
.site-footer__email,
.contact-card__link,
.service-aside__contact-item a,
.topbar__item span,
.post-card__excerpt,
.prose {
	overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════════
 * 5. PROSE (editor content)
 * ═══════════════════════════════════════════════════════════════════════ */

.prose {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
}

.prose--measure {
	max-width: 72ch;
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose h2 {
	margin: 2.25em 0 .6em;
	font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
}

.prose h3 {
	margin: 1.9em 0 .5em;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
}

.prose h4 {
	margin: 1.6em 0 .4em;
	font-family: var(--f-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-ink);
}

.prose p {
	margin: 0 0 1.25em;
	text-wrap: pretty;
}

.prose strong,
.prose b {
	color: var(--c-ink);
	font-weight: 700;
}

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

.prose a:hover {
	color: var(--c-navy-800);
}

.prose ul,
.prose ol {
	margin: 0 0 1.35em;
	padding-inline-start: 1.35rem;
}

.prose li {
	margin-bottom: .55em;
}

.prose li::marker {
	color: var(--c-gold-600);
}

/* Custom gold marker on unordered lists, per §4.13. */
.prose ul {
	list-style: none;
	padding-inline-start: 0;
}

.prose ul > li {
	position: relative;
	padding-inline-start: 1.7rem;
}

.prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: .1rem;
	top: .62em;
	width: 0;
	height: 0;
	border-inline-start: 7px solid var(--c-gold-600);
	border-block: 5px solid transparent;
}

.prose blockquote {
	margin: 1.75em 0;
	padding: .35em 0 .35em 1.5rem;
	border-inline-start: 3px solid var(--c-gold-500);
	font-family: var(--f-serif);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--c-ink);
}

.prose img {
	border-radius: var(--radius-m);
	box-shadow: var(--e1);
}

.prose figure {
	margin: 2em 0;
}

.prose figcaption {
	margin-top: .7rem;
	font-size: var(--fs-small);
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.prose th,
.prose td {
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--c-hairline);
	text-align: start;
}

.prose th {
	color: var(--c-ink);
	font-weight: 700;
}

/* Wide blocks scroll inside their own container, never the page. */
.prose > table,
.entry table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.prose pre {
	padding: 1.15rem;
	border-radius: var(--radius-s);
	background: var(--c-surface-2);
	overflow-x: auto;
	font-size: var(--fs-small);
}

/* ════════════════════════════════════════════════════════════════════════
 * 6. MASTHEAD — topbar + bar + brand + nav + drawer  (design system §4.1)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ONE fixed element holding the topbar row, the bar row and the drawer.
 * Page content clears the whole stack via --header-h (see §3). */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 90;
	isolation: isolate;
}

/* Transparent-over-the-hero state needs its own soft top vignette: the hero
 * scrim thins toward .42 alpha at the top-RIGHT, exactly where the nav and
 * CTA sit, which would leave white nav labels at 2.80 : 1 over a bright
 * photo pixel. Projecting the 105deg scrim onto the nav's position gives
 * .526 there; compounded with this vignette (.411 at the nav's vertical
 * centre) the effective alpha is .721 and white measures 7.85 : 1 over a
 * pure-white pixel. It fades to nothing at the bar's lower edge, so the
 * masthead still reads as transparent and leaves no seam. */
.site-header--transparent:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(8, 15, 44, .62) 0%,
		rgba(8, 15, 44, .50) 55%,
		rgba(8, 15, 44, .30) 82%,
		rgba(8, 15, 44, 0) 100%
	);
	transition: opacity var(--dur) var(--ease);
}

.site-header__topbar,
.site-header__bar,
.nav-drawer {
	position: relative;
	z-index: 1;
}

/* ---- 6.1 Topbar — quieter than v1: navy-950, small, hidden < 900px ----- */
.topbar {
	display: none;
	background: var(--c-navy-950);
	color: var(--c-on-navy-soft);          /* 9.10 : 1 on --c-navy-950 */
	font-size: var(--fs-small);
	line-height: 1;
	overflow: hidden;
	transition:
		height var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

@media (min-width: 900px) {
	.topbar {
		display: block;
		height: var(--topbar-h);
	}
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--topbar-h);
}

.topbar__contact,
.topbar__meta {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-width: 0;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 24px;
	color: var(--c-on-navy-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-micro) var(--ease);
}

a.topbar__item:hover {
	color: var(--c-gold-300);              /* 14.27 : 1 on --c-navy-950 */
}

.topbar__item .icon {
	width: 1rem;
	height: 1rem;
	color: var(--c-gold-500);              /* 8.42 : 1 — decorative anyway */
}

@media (max-width: 1099.98px) {
	.topbar__meta {
		display: none;
	}
}

/* Past 8px of scroll the topbar collapses so only the bar remains. */
.site-header.is-scrolled .topbar {
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* ---- 6.2 The bar row — carries the blur / opaque surface --------------- */
.site-header__bar {
	background: transparent;
	transition:
		background-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(.6rem, 1.6vw, 1.75rem);
	min-height: var(--header-bar-h);
}

/* Solid + scrolled share one surface. */
.site-header--solid .site-header__bar,
.site-header.is-scrolled .site-header__bar {
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(14px) saturate(1.6);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	box-shadow: var(--e1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header--solid .site-header__bar,
	.site-header.is-scrolled .site-header__bar {
		background: var(--c-white);
	}
}

/* ---- 6.3 Brand lockup -------------------------------------------------- */
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	margin-inline-end: auto;
}

.site-brand__logo {
	width: clamp(2.25rem, 5vw, 3rem);
	height: clamp(2.25rem, 5vw, 3rem);
	color: var(--c-gold-500);
	transition: transform var(--dur) var(--ease);
}

.site-brand:hover .site-brand__logo {
	transform: rotate(-6deg) scale(1.04);
}

.site-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1;
}

.site-brand__name {
	font-family: var(--f-serif);
	font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--c-ink);
}

.site-brand__sub {
	margin-top: .28em;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
}

.site-brand__tag {
	display: none;
	margin-top: .45em;
	font-size: var(--fs-eyebrow-lg);
	letter-spacing: .01em;
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

@media (min-width: 1280px) {
	.site-brand__tag {
		display: block;
	}
}

/* Over the transparent masthead the whole lockup flips to light. */
.site-header--transparent:not(.is-scrolled) .site-brand__name {
	color: var(--c-white);
}

.site-header--transparent:not(.is-scrolled) .site-brand__sub {
	color: var(--c-gold-300);              /* over the vignette + hero scrim */
}

.site-header--transparent:not(.is-scrolled) .site-brand__tag {
	color: var(--c-on-navy);
}

/* ---- 6.4 Primary navigation ------------------------------------------- */
.nav-primary {
	display: none;
}

@media (min-width: 900px) {
	.nav-primary {
		display: block;
	}
}

.nav-primary__list {
	display: flex;
	align-items: center;
	gap: clamp(.35rem, 1.2vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-primary__list li {
	position: relative;
	margin: 0;
}

.nav-primary__list a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .55rem .35rem;
	min-height: 44px;
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: .005em;
	text-decoration: none;
	color: var(--c-ink);                   /* 17.26 : 1 on white */
	white-space: nowrap;
	transition: color var(--dur-micro) var(--ease);
}

.site-header--transparent:not(.is-scrolled) .nav-primary__list a {
	color: var(--c-white);
}

.nav-primary__list a:hover,
.nav-primary__list .current-menu-item > a,
.nav-primary__list .current_page_item > a,
.nav-primary__list .current-menu-ancestor > a {
	color: var(--c-gold-700);              /* 5.21 : 1 on the white bar */
}

.site-header--transparent:not(.is-scrolled) .nav-primary__list a:hover,
.site-header--transparent:not(.is-scrolled) .nav-primary__list .current-menu-item > a,
.site-header--transparent:not(.is-scrolled) .nav-primary__list .current_page_item > a {
	color: var(--c-gold-300);
}

/* Gold underline scaling in from the LEFT. */
.nav-primary__label {
	position: relative;
	display: inline-block;
	padding-block-end: 3px;
}

.nav-primary__label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
}

.nav-primary__list a:hover .nav-primary__label::after,
.nav-primary__list a:focus-visible .nav-primary__label::after,
.nav-primary__list .current-menu-item > a .nav-primary__label::after,
.nav-primary__list .current_page_item > a .nav-primary__label::after,
.nav-primary__list .current-menu-ancestor > a .nav-primary__label::after {
	transform: scaleX(1);
}

/* Dropdown hint on parents. */
.nav-primary__list .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-inline-start: .1rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .65;
	transition: transform var(--dur-micro) var(--ease);
}

.nav-primary__list .menu-item-has-children:hover > a::after,
.nav-primary__list .menu-item-has-children:focus-within > a::after {
	transform: translateY(0) rotate(225deg);
}

/* CSS-only dropdown: hover + :focus-within. */
.nav-primary__list .sub-menu {
	position: absolute;
	inset-inline-start: -.75rem;
	inset-block-start: calc(100% + .35rem);
	z-index: 5;
	min-width: 15rem;
	margin: 0;
	padding: .5rem;
	list-style: none;
	background: var(--c-white);
	border-radius: var(--radius-m);
	box-shadow: var(--e2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--dur-micro) var(--ease),
		transform var(--dur-micro) var(--ease),
		visibility var(--dur-micro) var(--ease);
}

.nav-primary__list li:hover > .sub-menu,
.nav-primary__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-primary__list .sub-menu a {
	display: block;
	min-height: 44px;
	padding: .7rem .85rem;
	border-radius: var(--radius-s);
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	white-space: normal;
}

.nav-primary__list .sub-menu a:hover {
	background: var(--c-surface-2);
	color: var(--c-navy-800);
}

.nav-primary__list .sub-menu .nav-primary__label::after {
	display: none;
}

/* ---- 6.5 Header CTA — never gold; the hero owns the gold button -------- */
.site-header__cta {
	display: none;
}

@media (min-width: 900px) {
	.site-header__cta {
		display: block;
	}
}

.site-header__cta-btn {
	border: 1.5px solid transparent;
	background: var(--c-navy-800);
	color: var(--c-white);                 /* 14.78 : 1 */
	box-shadow: var(--e1);
	padding: .8rem 1.4rem;
}

.site-header__cta-btn:hover {
	background: var(--c-navy-700);
	color: var(--c-white);
	transform: translateY(-2px);
	box-shadow: var(--e2);
}

.site-header--transparent:not(.is-scrolled) .site-header__cta-btn {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .45);
	color: var(--c-white);
	box-shadow: none;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.site-header--transparent:not(.is-scrolled) .site-header__cta-btn:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .7);
}

.site-header__cta-btn:focus-visible {
	box-shadow: var(--focus-halo), var(--e1);
}

/* ---- 6.6 Mobile toggle + drawer --------------------------------------- */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 1.5px solid var(--c-hairline-strong);
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--c-ink);
	transition:
		background-color var(--dur-micro) var(--ease),
		border-color var(--dur-micro) var(--ease);
}

.site-header--transparent:not(.is-scrolled) .nav-toggle {
	border-color: rgba(255, 255, 255, .45);
	color: var(--c-white);
}

.nav-toggle:hover {
	background: var(--c-surface-2);
}

.site-header--transparent:not(.is-scrolled) .nav-toggle:hover {
	background: rgba(255, 255, 255, .12);
}

.nav-toggle .icon {
	width: 1.4rem;
	height: 1.4rem;
}

/* Icon swap driven by aria-expanded, which JS keeps in sync. */
.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

@media (min-width: 900px) {
	.nav-toggle {
		display: none;
	}
}

.nav-drawer {
	max-height: 0;
	overflow: hidden;
	background: var(--c-navy-950);
	color: var(--c-on-navy);
	transition:
		max-height var(--dur) var(--ease),
		visibility var(--dur) var(--ease);
	visibility: hidden;
}

body.nav-open .nav-drawer {
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: visible;
	box-shadow: var(--e3);
}

.nav-drawer__inner {
	padding-block: 1.5rem 2rem;
}

.nav-drawer__list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.nav-drawer__list li {
	margin: 0;
	border-block-end: 1px solid var(--c-hairline-invert);
}

.nav-drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 52px;
	padding: .9rem 0;
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--c-on-navy);               /* 16.67 : 1 on --c-navy-950 */
}

.nav-drawer__list a:hover,
.nav-drawer__list .current-menu-item > a,
.nav-drawer__list .current_page_item > a {
	color: var(--c-gold-300);              /* 14.27 : 1 */
}

.nav-drawer__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Accordion chevron on parents (JS toggles .is-open). */
.nav-drawer__list .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--dur-micro) var(--ease);
}

.nav-drawer__list .menu-item-has-children.is-open > a::after {
	transform: translateY(1px) rotate(225deg);
}

.nav-drawer__list .sub-menu {
	margin: 0;
	padding: 0 0 .5rem .9rem;
	list-style: none;
	display: none;
}

.nav-drawer__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.nav-drawer__list .sub-menu li {
	border-block-end: 0;
}

.nav-drawer__list .sub-menu a {
	min-height: 44px;
	font-size: var(--fs-small);
	color: var(--c-on-navy-soft);          /* 9.10 : 1 on --c-navy-950 */
}

.nav-drawer__actions {
	display: grid;
	gap: .85rem;
}

.nav-drawer__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .8rem 1.4rem;
	border: 1.5px solid rgba(255, 255, 255, .45);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--c-white);
}

.nav-drawer__phone:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--c-white);
}

.nav-drawer__phone .icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--c-gold-400);
}

@media (min-width: 900px) {
	.nav-drawer {
		display: none;
	}
}

/* ---- 6.7 No-JS masthead ------------------------------------------------ *
 * Without JS the header cannot toggle, so it stops being fixed, drops its
 * transparent treatment (white-on-white would be invisible) and the drawer
 * renders as a static, always-open menu. */
html.no-js .site-header {
	position: static;
}

html.no-js .site-header--transparent::before {
	display: none;
}

html.no-js .site-header__bar {
	background: var(--c-white);
	box-shadow: var(--e1);
}

html.no-js .site-header--transparent .site-brand__name,
html.no-js .site-header--transparent .nav-primary__list a {
	color: var(--c-ink);
}

html.no-js .site-header--transparent .site-brand__sub {
	color: var(--c-gold-700);
}

html.no-js .site-header--transparent .nav-toggle {
	border-color: var(--c-hairline-strong);
	color: var(--c-ink);
}

html.no-js .site-header--transparent .site-header__cta-btn {
	background: var(--c-navy-800);
	border-color: transparent;
	color: var(--c-white);
}

html.no-js body.has-solid-header .site-main,
html.no-js .site-main {
	padding-top: 0;
}

html.no-js .nav-toggle {
	display: none;
}

html.no-js .nav-drawer {
	max-height: none;
	overflow: visible;
	visibility: visible;
}

@media (min-width: 900px) {
	html.no-js .nav-drawer {
		display: none;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 7. HERO  (design system §4.2)
 * ═══════════════════════════════════════════════════════════════════════ */

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(620px, 88vh, 900px);
	padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem)) clamp(4rem, 8vw, 6rem);
	background: var(--c-navy-950);
	color: var(--c-on-navy);
	overflow: hidden;
}

/* Layer 0 — the photograph. Slightly oversized so the ≤0.18 parallax
 * translate (owned by JS via [data-parallax]) never exposes an edge. */
.hero__media {
	position: absolute;
	inset-inline: 0;
	inset-block-start: -7%;
	height: 114%;
	z-index: 0;
	will-change: transform;
}

.hero__media-picture,
.hero__media > picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The backdrop is the client's reception wall, which carries the logo AND the
 * wordmark AND the tagline. Left sharp, that lettering ghosts through the scrim
 * directly behind the headline, so "FORTUNERISE" and "Your Trusted Financial
 * Growth Partner" each appear twice on the first screen and fight the h1.
 * Framing pushes the signage right, under the enquiry card, leaving the calm
 * wood panelling behind the copy; a light blur turns what remains into warm
 * texture rather than a second block of text.
 *
 * The blur is on the image, not on .hero__media — the parallax loop owns that
 * element's transform. scale() hides the transparent fringe blur leaves at the
 * edges.
 */
.hero__media-img,
.hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 38% 42%;
	filter: blur(8px) saturate(1.08);
	transform: scale(1.1);
}

/* The optional Customizer backdrop stacks over the manifest photo, still
 * beneath the scrim, so copy contrast holds whatever the client uploads. */
.hero__photo {
	position: absolute;
	inset: 0;
}

/* Layer 1 — the navy scrim. Heavier on the left where the copy sits,
 * lighter on the right so the reception photograph still reads.
 * MEASURED: the brightest pixel inside the copy column is #FFFFDC and the
 * region's 99th percentile is #FFD893, so the worst case is effectively a
 * white ground. Alpha never drops below .80 across the copy column (0–55%),
 * where white measures 10.38 : 1, --c-gold-300 7.87 : 1, --c-on-navy
 * 9.19 : 1 and --c-on-navy-soft 5.02 : 1 over a pure-white pixel. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		105deg,
		rgba(8, 15, 44, .94) 0%,
		rgba(8, 15, 44, .90) 30%,
		rgba(8, 15, 44, .80) 55%,
		rgba(8, 15, 44, .50) 80%,
		rgba(8, 15, 44, .34) 100%
	);
}

/* Below 980px the copy stacks full-width, so the left-heavy 105deg ramp
 * would leave text sitting over the .42 end of the gradient (white 2.80 : 1
 * on a white pixel). The stacked hero therefore takes a vertical scrim whose
 * minimum alpha is .78 — white 9.64 : 1, --c-on-navy 8.53 : 1,
 * --c-on-navy-soft 4.66 : 1, --c-gold-300 7.30 : 1. */
@media (max-width: 979.98px) {
	.hero__scrim {
		background: linear-gradient(
			180deg,
			rgba(8, 15, 44, .90) 0%,
			rgba(8, 15, 44, .78) 42%,
			rgba(8, 15, 44, .88) 100%
		);
	}
}

/* Layer 2 — the soft gold glow. Deliberately parked at 78% 22% with a 55%
 * falloff so it cannot reach the copy column and erode the ratios above;
 * it lights the empty upper-right of the photograph only. */
.hero__glow {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(46% 52% at 78% 22%, rgba(212, 167, 60, .16) 0%, rgba(212, 167, 60, 0) 55%);
}

/* Stacked hero: the glow retreats to the top-right corner, well clear of the
 * headline and of the bottom-left trust row. */
@media (max-width: 979.98px) {
	.hero__glow {
		background: radial-gradient(55% 26% at 84% 9%, rgba(212, 167, 60, .12) 0%, rgba(212, 167, 60, 0) 62%);
	}
}

/* Layer 3 — content. */
.hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	width: 100%;
}

@media (min-width: 980px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	}
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.15rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold-300);              /* 7.87 : 1 worst case */
}

.hero__eyebrow::before {
	content: "";
	flex: none;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-gold-500);
}

.hero__title {
	margin: 0 0 1.35rem;
	max-width: 14ch;
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--c-white);                 /* 10.38 : 1 worst case */
	text-wrap: balance;
}

/* Forces the gold second line onto its own row. The selector is scoped to
 * .hero so it out-ranks the `.hero .u-gold` utility (same element carries
 * both classes) instead of losing to it. */
.hero .hero__title-line {
	display: block;
	color: var(--c-gold-300);
}

/* Gradient variant kept lighter than --grad-gold so its darkest stop
 * (#D4A73C) still measures 4.64 : 1 over the scrim. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.hero .hero__title-line {
		background: linear-gradient(100deg, #F4DFA0 0%, #E6C56A 52%, #D4A73C 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.hero__lede {
	margin: 0 0 1.75rem;
	max-width: 48ch;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-on-navy);               /* 9.19 : 1 worst case */
	text-wrap: pretty;
}

/* Four quiet text items with CSS-drawn gold dot separators — no boxes, and
 * no punctuation reaching assistive technology. */
.hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.6rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.hero__badge {
	position: relative;
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--c-on-navy);
}

.hero__badge + .hero__badge::before {
	content: "";
	position: absolute;
	inset-inline-start: -.8rem;
	inset-block-start: 50%;
	width: 5px;
	height: 5px;
	margin-block-start: -2.5px;
	margin-inline-start: -2.5px;
	border-radius: 50%;
	background: var(--c-gold-500);
}

/* Narrow screens: the row would wrap and leave a separator dot orphaned at
 * the start of the second line, so every badge takes its own gold bullet in
 * a deterministic auto-fit grid instead. */
@media (max-width: 639.98px) {
	.hero__badges {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
		gap: .55rem 1rem;
	}

	.hero__badge {
		display: flex;
		align-items: center;
		gap: .55rem;
	}

	.hero__badge::before {
		content: "";
		position: static;
		flex: none;
		margin: 0;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--c-gold-500);
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* A fixed three-track grid rather than a wrapping flex row: with vertical
 * hairlines between the pairs, a wrapped item would otherwise carry a rule
 * stranded at the start of the second line. Below 480px the pairs stack and
 * the hairlines turn horizontal. */
.hero__trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__trust-item {
	min-width: 0;
}

.hero__trust-item + .hero__trust-item {
	margin-block-start: .7rem;
	padding-block-start: .7rem;
	border-block-start: 1px solid rgba(255, 255, 255, .22);
}

@media (min-width: 480px) {
	.hero__trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero__trust-item + .hero__trust-item {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: 0;
		padding-inline-start: clamp(.85rem, 2.2vw, 1.6rem);
		border-inline-start: 1px solid rgba(255, 255, 255, .22);
	}

	.hero__trust-item:not(:last-child) {
		padding-inline-end: clamp(.85rem, 2.2vw, 1.6rem);
	}
}

@media (max-width: 479.98px) {
	.hero__trust-item {
		display: flex;
		align-items: baseline;
		gap: .6rem;
	}

	.hero__trust-label {
		margin-top: 0;
	}
}

.hero__trust-figure {
	display: block;
	font-family: var(--f-serif);
	font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--c-gold-300);              /* 7.87 : 1 worst case */
	font-variant-numeric: tabular-nums;
}

.hero__trust-label {
	display: block;
	margin-top: .3rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-on-navy-soft);          /* 5.02 : 1 — glow cannot reach here */
}

.hero__content,
.hero__aside {
	min-width: 0;
}

/* Scroll cue — thin line with a gold dot looping downward. */
.hero__scroll-cue {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	pointer-events: none;
}

@media (min-width: 980px) {
	.hero__scroll-cue {
		display: flex;
	}
}

.hero__scroll-cue-line {
	width: 1px;
	height: 46px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5));
}

.hero__scroll-cue-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-gold-400);
	animation: fr-cue 2.4s var(--ease) infinite;
}

/* ---- 7.1 Enquiry card + form ------------------------------------------ */
.enquiry-card {
	background: rgba(255, 255, 255, .97);
	border-radius: var(--radius-xl);
	box-shadow: var(--e3);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.enquiry-card__head {
	margin-bottom: 1.35rem;
}

.enquiry-card__title {
	margin: 0 0 .35rem;
	font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 17.26 : 1 on white */
}

.enquiry-card__sub {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

.enquiry-form {
	display: grid;
	gap: 1rem;
}

.field {
	display: grid;
	gap: .4rem;
	min-width: 0;
}

.field__label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-ink);
}

.field__control {
	width: 100%;
	min-height: 48px;
	padding: .75rem .95rem;
	border: 1.5px solid var(--c-control-line);   /* 4.22 : 1 on white */
	border-radius: var(--radius-s);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: var(--fs-body);
	line-height: 1.4;
	transition:
		border-color var(--dur-micro) var(--ease),
		box-shadow var(--dur-micro) var(--ease);
}

.field__control::placeholder {
	color: var(--c-ink-muted);
	opacity: 1;
}

.field__control:hover {
	border-color: var(--c-navy-500);      /* 6.55 : 1 on white */
}

.field--textarea .field__control {
	min-height: 7rem;
	resize: vertical;
}

.field--select .field__control {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 2.6rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--c-navy-800) 50%),
		linear-gradient(135deg, var(--c-navy-800) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) calc(50% + 2px),
		calc(100% - .8rem) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Error state — JS mirrors the server rules onto .field--invalid.
 * #B3261E measures 6.54 : 1 on white. */
.field__error {
	display: none;
	font-size: var(--fs-small);
	font-weight: 500;
	color: #B3261E;
}

.field--invalid .field__error {
	display: block;
}

.field--invalid .field__control {
	border-color: #B3261E;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* Honeypot: visually removed, still submittable by bots. */
.hp-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-note {
	margin: .35rem 0 0;
	font-size: var(--fs-small);
	color: var(--c-ink-muted);
	text-align: center;
}

/* Live status region: invisible until it carries a state class. */
.form-status {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.form-status--success,
.form-status--error {
	margin-bottom: 1.15rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius-s);
}

.form-status--success {
	background: #E7F3EC;
	color: #14532D;                        /* 8.00 : 1 on #E7F3EC */
}

.form-status--error {
	background: #FBEAE8;
	color: #8C1D18;                        /* 7.83 : 1 on #FBEAE8 */
}

.enquiry-form__submit {
	margin-top: .35rem;
}

/* ════════════════════════════════════════════════════════════════════════
 * 8. TRUST STRIP  (design system §4.3)
 * ═══════════════════════════════════════════════════════════════════════ */

.trust-strip {
	--marquee-gap: clamp(1.75rem, 4vw, 3.25rem);
	position: relative;
	padding-block: 1.15rem;
	background: var(--c-surface-2);
	border-block-start: 1px solid var(--c-gold-500);   /* the single gold hairline */
	overflow: hidden;
}

.trust-strip__viewport {
	overflow: hidden;
	/* Soft fade at both ends so names do not clip abruptly. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.trust-strip__marquee {
	display: flex;
	width: max-content;
	animation: fr-marquee 44s linear infinite;
}

.trust-strip__marquee:hover,
.trust-strip__marquee:focus-within {
	animation-play-state: paused;
}

.trust-strip__track {
	display: flex;
	align-items: center;
	gap: var(--marquee-gap);
	margin: 0;
	padding: 0 var(--marquee-gap) 0 0;
	list-style: none;
}

.trust-strip__item {
	position: relative;
	white-space: nowrap;
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);             /* 5.13 : 1 on --c-surface-2 */
}

/* CSS-drawn gold dot between names — no punctuation reaches assistive tech. */
.trust-strip__item::after {
	content: "";
	position: absolute;
	inset-inline-end: calc(var(--marquee-gap) / -2);
	inset-block-start: 50%;
	width: 5px;
	height: 5px;
	margin-block-start: -2.5px;
	margin-inline-end: -2.5px;
	border-radius: 50%;
	background: var(--c-gold-500);
}

/* ════════════════════════════════════════════════════════════════════════
 * 9. SERVICES — bento grid, image-led  (design system §4.4)
 * ═══════════════════════════════════════════════════════════════════════ */

.services-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.15rem, 2.2vw, 1.85rem);
}

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

/* Six columns at ≥1100px: the two feature cards span 3, the nine standard
 * cards span 2 (three-up rows). Scoped to .services-grid on purpose — the
 * related-services block on a service single reuses .service-card
 * --standard inside its own grid and must not inherit a span. */
@media (min-width: 1100px) {
	.services-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.services-grid > .service-card--feature {
		grid-column: span 3;
	}

	.services-grid > .service-card--standard {
		grid-column: span 2;
	}
}

.service-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--e2);
}

.service-card:focus-within {
	box-shadow: var(--e2);
}

/* The media wrapper itself is NOT clipped — the gold disc has to hang over
 * its bottom-left edge. The <picture> is the overflow:hidden box that lets
 * the photograph scale on hover. */
.service-card__media {
	position: relative;
	z-index: 0;
}

.service-card__picture {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	aspect-ratio: 3 / 2;
	background: var(--c-surface-2);
}

.service-card--feature .service-card__picture {
	aspect-ratio: 16 / 9;
}

.service-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}

.service-card:hover .service-card__image {
	transform: scale(1.06);
}

/* Gold icon disc, 48px, overlapping the photo's bottom-left. */
.service-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--grad-gold);
	color: var(--c-navy-950);              /* 8.42 : 1 on the gradient midpoint */
	box-shadow: var(--e-gold);
}

.service-card__icon .icon {
	width: 1.35rem;
	height: 1.35rem;
	stroke-width: 1.9;
}

.service-card__icon--overlay {
	position: absolute;
	z-index: 2;
	inset-block-end: -24px;
	inset-inline-start: clamp(1.15rem, 2vw, 1.5rem);
}

/* Photo-less fallback: the disc leads the body instead. */
.service-card > .service-card__icon {
	margin: clamp(1.35rem, 2.4vw, 1.85rem) 0 0 clamp(1.15rem, 2vw, 1.5rem);
}

.service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 2.35rem clamp(1.15rem, 2vw, 1.6rem) clamp(1.4rem, 2vw, 1.85rem);
}

.service-card > .service-card__icon + .service-card__body {
	padding-top: 1.15rem;
}

.service-card__title {
	margin: 0 0 .55rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 17.26 : 1 on white */
	text-wrap: balance;
}

.service-card--feature .service-card__title {
	font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
}

.service-card__link {
	color: inherit;
	text-decoration: none;
}

/* The ONLY anchor in the card; its overlay makes the whole card clickable
 * while assistive technology still sees exactly one named link. */
.service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--radius-l);
}

.service-card__link:hover {
	color: var(--c-navy-700);
}

.service-card__text {
	margin: 0 0 1.15rem;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	text-wrap: pretty;
}

/* .service-card__more is a <span> carrying .btn--text with no base .btn —
 * see §4, where .btn--text establishes its own box. The nudge is driven
 * from the card, because the span is not itself hoverable. */
.service-card__more {
	margin-top: auto;
}

.service-card:hover .service-card__more {
	color: var(--c-navy-800);
}

.service-card:hover .service-card__more .icon {
	transform: translateX(4px);
}

/* Related services on a service single — its own grid, no bento spans. */
.related-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.15rem, 2.2vw, 1.85rem);
}

.related-services__all {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
 * 10. STATS BAR — editorial, no boxes  (design system §4.5)
 * ═══════════════════════════════════════════════════════════════════════ */

.stats-bar {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--c-navy-950);
	color: var(--c-on-navy);
}

.stats-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 90% at 82% 0%, rgba(212, 167, 60, .13) 0%, rgba(212, 167, 60, 0) 62%);
}

.stats-bar .wrap {
	position: relative;
}

.stats-bar__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem 0;
}

.stat {
	min-width: 0;
	padding-inline: 0;
	text-align: start;
}

/* Hairlines, not boxes. Horizontal while single-column, vertical once the
 * grid has more than one column. */
.stat + .stat {
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--c-hairline-invert);
}

@media (min-width: 560px) {
	.stats-bar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.25rem 0;
	}

	.stat + .stat {
		padding-block-start: 0;
		border-block-start: 0;
	}

	.stat {
		padding-inline: clamp(1rem, 2.5vw, 2rem);
	}

	.stat:nth-child(2n + 1) {
		padding-inline-start: 0;
	}

	.stat + .stat {
		border-inline-start: 1px solid var(--c-hairline-invert);
	}

	.stat:nth-child(2n + 1) {
		border-inline-start: 0;
	}
}

@media (min-width: 900px) {
	.stats-bar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.stat:nth-child(2n + 1) {
		padding-inline-start: clamp(1rem, 2.5vw, 2rem);
		border-inline-start: 1px solid var(--c-hairline-invert);
	}

	.stat:first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* The number IS the graphic — no icon discs. */
.stat__value {
	display: block;
	font-family: var(--f-serif);
	font-size: var(--fs-numeral);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--c-gold-400);              /* 11.26 : 1 fallback */
}

/* .stat__value[data-count] holds the rendered value as its ONLY text node,
 * so background-clip:text is safe for the JS counter to keep rewriting. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.stat__value {
		background: var(--grad-gold);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.stat__label {
	display: block;
	margin-top: .7rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-on-navy-soft);          /* 9.10 : 1 on --c-navy-950 */
}

/* ════════════════════════════════════════════════════════════════════════
 * 11. WHY US — split with sticky media  (design system §4.6)
 * ═══════════════════════════════════════════════════════════════════════ */

.why {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

@media (min-width: 980px) {
	.why {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	}
}

/* Sticky + the offset gold rule both live on .why__media: .why__frame needs
 * overflow:hidden for its radius and would clip its own pseudo-element. */
.why__media {
	position: relative;
	min-width: 0;
}

@media (min-width: 980px) {
	.why__media {
		position: sticky;
		top: var(--sticky-top);
		align-self: start;
	}
}

.why__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 2px solid var(--c-gold-500);
	border-radius: var(--radius-l);
	transform: translate(-12px, -12px);
	pointer-events: none;
}

@media (min-width: 980px) {
	.why__media::before {
		transform: translate(-16px, -16px);
	}
}

@media (max-width: 479.98px) {
	.why__media::before {
		transform: translate(-8px, -8px);
	}
}

.why__frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--radius-l);
	box-shadow: var(--e2);
}

.why__picture {
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--c-surface-2);
}

@media (max-width: 979.98px) {
	.why__picture {
		aspect-ratio: 3 / 2;
	}
}

.why__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}

.why__frame:hover .why__image {
	transform: scale(1.04);
}

.why__content {
	min-width: 0;
}

/* Six differentiators as a numbered list with hairline dividers — not six
 * bordered cards. */
.why-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.why-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 1.5rem);
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	border-block-start: 1px solid var(--c-hairline);
}

.why-list__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.why-list__num {
	font-family: var(--f-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--c-gold-600);              /* 3.38 : 1 on white — decorative, aria-hidden */
	font-variant-numeric: tabular-nums;
}

.why-list__body {
	min-width: 0;
}

.why-list__title {
	margin: 0 0 .3rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 17.26 : 1 on white */
}

.why-list__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════════════
 * 12. EMI CALCULATOR — the showpiece  (design system §4.7)
 * ═══════════════════════════════════════════════════════════════════════ */

/* A calculator that cannot calculate is worse than absent. */
html.no-js .section--emi {
	display: none;
}

.emi-calc {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2.75rem);
	background: var(--c-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--e3);
	color: var(--c-ink-body);
}

@media (min-width: 900px) {
	.emi-calc {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

.emi-calc__controls {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-content: start;
	min-width: 0;
}

.emi-field {
	min-width: 0;
}

.emi-field__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: .6rem;
}

.emi-field__label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-ink);                   /* 17.26 : 1 on white */
}

.emi-field__number {
	width: clamp(6.25rem, 42%, 11rem);
	min-height: 44px;
	padding: .55rem .75rem;
	border: 1.5px solid var(--c-control-line);   /* 4.22 : 1 boundary on white */
	border-radius: var(--radius-s);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 600;
	text-align: end;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--dur-micro) var(--ease);
}

.emi-field__number:hover {
	border-color: var(--c-navy-600);
}

/* ---- Range inputs, fully custom, both engines -------------------------- *
 * --fill is a percentage string owned by the server on first paint and by
 * assets/js/main.js on every input/change:
 *   range.style.setProperty( '--fill', pct + '%' );
 * It drives the width of the --grad-gold layer painted over the unfilled
 * track colour, so no extra element is needed. */
.emi-field__range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 26px;                          /* ≥24px pointer target */
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius-pill);
}

.emi-field__range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: var(--c-surface-3);
	background-image: var(--grad-gold);
	background-repeat: no-repeat;
	background-size: var(--fill, 0%) 100%;
	/* The track alone is 1.27 : 1 against the white card, so a 1px
	 * --c-control-line ring (4.22 : 1) carries the control boundary. */
	box-shadow: inset 0 0 0 1px var(--c-control-line);
}

.emi-field__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;                      /* centres the thumb on a 6px track */
	border-radius: 50%;
	border: 3px solid var(--c-gold-600);   /* 3.38 : 1 on white */
	background: var(--c-white);
	box-shadow: var(--e2);
	transition: transform var(--dur-micro) var(--ease);
}

.emi-field__range::-moz-range-track {
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: var(--c-surface-3);
	background-image: var(--grad-gold);
	background-repeat: no-repeat;
	background-size: var(--fill, 0%) 100%;
	box-shadow: inset 0 0 0 1px var(--c-control-line);
}

.emi-field__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--c-gold-600);
	background: var(--c-white);
	box-shadow: var(--e2);
	transition: transform var(--dur-micro) var(--ease);
}

.emi-field__range:hover::-webkit-slider-thumb {
	transform: scale(1.08);
}

.emi-field__range:hover::-moz-range-thumb {
	transform: scale(1.08);
}

/* Visible focus: the two-tone ring on the control plus a gold bloom on the
 * thumb so the focused handle is obvious at a glance. */
.emi-field__range:focus-visible {
	outline: 3px solid var(--c-navy-800);
	outline-offset: 2px;
	box-shadow: var(--focus-halo);
}

.emi-field__range:focus-visible::-webkit-slider-thumb {
	box-shadow: var(--e2), 0 0 0 5px rgba(212, 167, 60, .45);
}

.emi-field__range:focus-visible::-moz-range-thumb {
	box-shadow: var(--e2), 0 0 0 5px rgba(212, 167, 60, .45);
}

.emi-field__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: .55rem;
}

.emi-field__hint {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

.emi-field__value {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Result panel ------------------------------------------------------ */
.emi-calc__result {
	display: grid;
	gap: 1.15rem;
	align-content: start;
	min-width: 0;
}

.emi-result {
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	border-radius: var(--radius-l);
	background-color: var(--c-navy-900);
	background-image: var(--grad-sheen);
	color: var(--c-on-navy);
	box-shadow: var(--e2);
}

.emi-result__label {
	margin: 0 0 .35rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-on-navy-soft);          /* 8.42 : 1 on --c-navy-900 */
}

.emi-result__emi {
	margin: 0 0 1.35rem;
	font-family: var(--f-serif);
	font-size: clamp(2.05rem, 1.2rem + 2.7vw, 3.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--c-gold-400);              /* 10.42 : 1 fallback */
	overflow-wrap: anywhere;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.emi-result__emi {
		background: linear-gradient(100deg, #F4DFA0 0%, #E6C56A 55%, #D4A73C 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.emi-result__rows {
	margin: 0 0 1.35rem;
}

.emi-result__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .75rem;
	border-block-start: 1px solid var(--c-hairline-invert);
}

.emi-result__row-label {
	font-size: var(--fs-small);
	color: var(--c-on-navy-soft);          /* 8.42 : 1 */
}

.emi-result__row-value {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--c-white);                 /* 17.43 : 1 */
	font-variant-numeric: tabular-nums;
	text-align: end;
	overflow-wrap: anywhere;
}

.emi-result__split {
	position: relative;
	display: grid;
	place-items: center;
	padding-block-start: .35rem;
}

.emi-donut {
	width: min(168px, 56vw);
	height: auto;
	aspect-ratio: 1;
	transform: rotate(-90deg);
	overflow: visible;
}

/* Interest is the remainder ring; principal is the gold arc drawn over it.
 * gold-700 measures 3.35 : 1 on --c-navy-900 and gold-400 10.42 : 1, so the
 * two arcs are distinguishable from each other and from the panel. */
.emi-donut__track {
	stroke: var(--c-gold-700);
}

.emi-donut__arc {
	stroke: var(--c-gold-400);
	transition: stroke-dasharray var(--dur) var(--ease);
}

.emi-donut__centre {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	display: grid;
	gap: .15rem;
	text-align: center;
	pointer-events: none;
}

.emi-donut__centre-label {
	font-size: .6875rem;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-on-navy-soft);
}

.emi-donut__centre-value {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--c-white);
	font-variant-numeric: tabular-nums;
}

.emi-calc__cta {
	justify-self: stretch;
}

.emi-calc__note {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

/* ════════════════════════════════════════════════════════════════════════
 * 13. PROCESS — timeline, never a grid of boxes  (design system §4.8)
 * ═══════════════════════════════════════════════════════════════════════ */

/* MOBILE / TABLET: vertical timeline with the rail on the left. */
.process {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0;
	padding: 0 0 0 2.75rem;
	list-style: none;
	counter-reset: none;
}

.process::before {
	content: "";
	position: absolute;
	inset-block: .55rem;
	inset-inline-start: .6875rem;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--c-gold-500) 0%, var(--c-hairline-strong) 24%, var(--c-hairline-strong) 100%);
}

.process__step {
	position: relative;
	min-width: 0;
}

.process__dot {
	position: absolute;
	inset-block-start: .35rem;
	inset-inline-start: calc(-2.75rem + 5px);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--grad-gold);
	box-shadow: 0 0 0 4px var(--c-surface-2);
}

.process__num {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--f-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--c-gold-600);
	font-variant-numeric: tabular-nums;
}

.process__body {
	min-width: 0;
}

.process__title {
	margin: 0 0 .3rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 15.05 : 1 on --c-surface-2 */
}

.process__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-ink-body);              /* 8.11 : 1 on --c-surface-2 */
	text-wrap: pretty;
}

/* ≥1100px: eight steps across in two rows of four, with the connector
 * hairline threaded behind them. */
@media (min-width: 1100px) {
	.process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 2.5vw, 2.25rem);
		row-gap: clamp(2.75rem, 4vw, 3.75rem);
		padding-left: 0;
	}

	.process::before {
		display: none;
	}

	.process__step {
		padding-block-start: 2.5rem;
	}

	.process__step::before {
		content: "";
		position: absolute;
		inset-block-start: 6px;
		inset-inline-start: 0;
		width: calc(100% + clamp(1.5rem, 2.5vw, 2.25rem));
		height: 2px;
		background: var(--c-hairline-strong);
	}

	.process__step:nth-child(4n)::before {
		display: none;
	}

	.process__dot {
		inset-block-start: 0;
		inset-inline-start: 0;
		box-shadow: 0 0 0 4px var(--c-surface-2);
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 14. TESTIMONIALS  (design system §4.9)
 * ═══════════════════════════════════════════════════════════════════════ */

.testimonial-slider {
	position: relative;
	max-width: 60rem;
	margin-inline: auto;
}

.testimonial-slider__viewport {
	overflow: hidden;
}

.testimonial-slider__track {
	display: flex;
	transition: transform var(--dur) var(--ease);
}

.testimonial-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	padding-inline: clamp(0rem, 2vw, 2rem);
}

.testimonial {
	position: relative;
	margin: 0;
	padding-block-start: clamp(1.75rem, 4vw, 3rem);
	text-align: center;
}

/* Oversized decorative quote mark sitting behind the text. */
.testimonial__mark {
	position: absolute;
	inset-block-start: -.2em;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 0;
	font-family: var(--f-serif);
	font-size: clamp(7rem, 18vw, 12rem);
	line-height: 1;
	color: var(--c-gold-500);
	opacity: .17;
	pointer-events: none;
	user-select: none;
}

.testimonial__quote {
	position: relative;
	z-index: 1;
	max-width: 34ch;
	margin: 0 auto 1.75rem;
	padding: 0;
	border: 0;
	font-family: var(--f-serif);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 16.27 : 1 on --c-surface */
	text-wrap: balance;
}

.testimonial__quote p {
	margin: 0 0 .5em;
	font-size: inherit;
	line-height: inherit;
}

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

.testimonial__meta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
}

.testimonial__name {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.testimonial__role {
	font-size: var(--fs-small);
	color: var(--c-ink-muted);             /* 5.55 : 1 on --c-surface */
}

.testimonial__stars {
	display: inline-flex;
	gap: .2rem;
	margin-top: .35rem;
}

.testimonial__stars .icon {
	width: 1rem;
	height: 1rem;
	fill: var(--c-gold-500);
	stroke: var(--c-gold-600);
}

.testimonial-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.75rem, 2vw, 1.25rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.testimonial-slider__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	padding: 0;
	border: 1.5px solid var(--c-control-line);   /* 3.98 : 1 on --c-surface */
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-navy-800);              /* 14.78 : 1 */
	transition:
		background-color var(--dur-micro) var(--ease),
		border-color var(--dur-micro) var(--ease),
		transform var(--dur-micro) var(--ease);
}

.testimonial-slider__btn:hover {
	background: var(--c-navy-800);
	border-color: var(--c-navy-800);
	color: var(--c-white);
	transform: translateY(-2px);
}

.testimonial-slider__btn .icon {
	width: 1.2rem;
	height: 1.2rem;
}

/* Both buttons reuse the arrow-right glyph; the prev one is mirrored. */
.testimonial-slider__btn--prev .icon {
	transform: scaleX(-1);
}

/* Dashes, not dots. The painted dash is the content box; the padding gives
 * the 24px hit area required by WCAG 2.5.8. */
.testimonial-slider__dots {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.testimonial-slider__dot {
	width: 26px;
	height: 24px;
	padding-block: 10px;
	padding-inline: 0;
	border: 0;
	border-radius: 2px;
	background-color: var(--c-ink-soft);   /* 4.00 : 1 on --c-surface-2, ≥3 */
	background-clip: content-box;
	transition:
		width var(--dur) var(--ease),
		background-color var(--dur-micro) var(--ease);
}

.testimonial-slider__dot:hover {
	background-color: var(--c-navy-700);
}

.testimonial-slider__dot.is-active,
.testimonial-slider__dot[aria-current="true"] {
	width: 44px;
	background-color: var(--c-gold-700);   /* 4.91 : 1 on --c-surface */
}

/* No-JS: every testimonial visible, stacked; the controls are meaningless. */
html.no-js .testimonial-slider__track {
	display: block;
}

html.no-js .testimonial-slider__slide {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

html.no-js .testimonial-slider__controls {
	display: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * 15. FAQ  (design system §4.10)
 * ═══════════════════════════════════════════════════════════════════════ */

.faq-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 980px) {
	.faq-layout {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	}

	.faq-layout__head {
		position: sticky;
		top: var(--sticky-top);
	}
}

.faq-layout__head .sec-head {
	margin-bottom: 1.5rem;
}

.faq-layout__head .sec-head__title {
	max-width: 24ch;
}

.faq__more {
	margin: 0;
	max-width: 34ch;
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-ink-body);
}

.faq-layout__list {
	min-width: 0;
}

/* No cards — just a hairline between disclosures. */
.faq__item {
	border-block-start: 1px solid var(--c-line);
}

.faq__item:last-child {
	border-block-end: 1px solid var(--c-line);
}

.faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.35rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 17.26 : 1 on white */
	transition: color var(--dur-micro) var(--ease);
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::marker {
	content: "";
}

.faq__question:hover {
	color: var(--c-navy-700);
}

.faq__question-text {
	min-width: 0;
	text-wrap: pretty;
}

/* Two-bar + that rotates to × when open. */
.faq__marker {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	margin-block-start: .18em;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	transition: transform var(--dur) var(--ease);
}

.faq__marker-bar {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	background: currentColor;
	border-radius: 2px;
}

.faq__marker-bar:nth-child(1) {
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
}

.faq__marker-bar:nth-child(2) {
	width: 2px;
	height: 16px;
	margin: -8px 0 0 -1px;
}

.faq__item[open] .faq__marker {
	transform: rotate(45deg);
}

.faq__answer {
	overflow: hidden;
	padding-block-end: 1.5rem;
}

.faq__answer-text {
	margin: 0;
	max-width: 62ch;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════════════
 * 16. CTA BAND  (design system §4.11)
 * ═══════════════════════════════════════════════════════════════════════ */

.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(5rem, 10vw, 8rem);
	background: var(--grad-navy);
	color: var(--c-on-navy);
	text-align: center;
}

.cta-band__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta-band__picture,
.cta-band__media > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.cta-band__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/* --grad-scrim over --grad-band-wash. The photograph's brightest pixel is
 * #D4EDCD; against a pure-white worst case the compounded alpha at the
 * band's vertical centre is .859, where white measures 12.9 : 1 and
 * --c-on-navy-soft 6.2 : 1. */
.cta-band__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--grad-scrim), var(--grad-band-wash);
}

.cta-band__inner {
	position: relative;
	z-index: 2;
}

.cta-band__head {
	margin-bottom: 0;
}

.cta-band__script {
	margin: 0 0 .5rem;
	color: var(--c-gold-300);              /* 9.4 : 1 over the scrim */
}

.cta-band__title,
.cta-band .sec-head__title {
	color: var(--c-white);
	max-width: 20ch;
}

.cta-band__sub,
.cta-band .sec-head__lead {
	color: var(--c-on-navy);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .85rem 1rem;
	margin-top: clamp(1.85rem, 3.5vw, 2.75rem);
}

/* ════════════════════════════════════════════════════════════════════════
 * 17. PAGE HERO (inner pages)  (design system §4.13)
 * ═══════════════════════════════════════════════════════════════════════ */

.page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	min-height: max(46vh, 19rem);
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
	background: var(--grad-navy);
	color: var(--c-on-navy);
}

.page-hero__media,
.page-hero > picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--grad-scrim), var(--grad-band-wash);
}

/* With a photograph the navy gradient is only the loading colour. */
.page-hero--photo {
	background: var(--c-navy-950);
}

/* Kept: page-hero.php still renders the skyline where there is NO photo. */
.page-hero__skyline {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	opacity: .3;
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.page-hero__crumbs {
	margin-bottom: 1.1rem;
	font-size: var(--fs-small);
}

.page-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-hero__crumbs li {
	display: flex;
	align-items: center;
	gap: .55rem;
	color: var(--c-on-navy-soft);          /* ≥7.5 : 1 at the crumb's position */
	min-width: 0;
}

.page-hero__crumbs li + li::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-inline-end: 1.5px solid var(--c-gold-400);
	border-block-start: 1.5px solid var(--c-gold-400);
	transform: rotate(45deg);
}

.page-hero__crumbs a {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	color: var(--c-on-navy);
	text-decoration: none;
}

.page-hero__crumbs a:hover {
	color: var(--c-gold-300);
	text-decoration: underline;
}

.page-hero__title {
	margin: 0;
	max-width: 20ch;
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--c-white);                 /* ≥11 : 1 worst case */
	text-wrap: balance;
}

/* Per-page framing of the photograph. */
.about-hero .page-hero__img {
	object-position: center 55%;
}

.partners-hero .page-hero__img {
	object-position: center 45%;
}

.service-hero .page-hero__img {
	object-position: center 45%;
}

.contact-hero .page-hero__img {
	object-position: center 50%;
}

.service-hero,
.contact-hero {
	min-height: max(42vh, 18rem);
}

/* ════════════════════════════════════════════════════════════════════════
 * 18. INNER-PAGE PATTERNS — split bands, numbered lists, panels
 * ═══════════════════════════════════════════════════════════════════════ */

/* Partner cards are white, so their band drops to --c-surface for contrast. */
.section--partners {
	background: var(--c-surface);
}

.split {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

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

/* .split--reverse simply relies on its DOM order (body, then media), so the
 * copy leads on desktop AND stacks first on mobile. */
.split--reverse {
	align-items: center;
}

.split__media,
.split__body {
	min-width: 0;
}

/* The figure is NOT clipped — .split__badge hangs over its corner. The
 * <picture> is the overflow:hidden box. */
.split__figure {
	position: relative;
	margin: 0;
}

.split__picture {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-l);
	box-shadow: var(--e2);
	aspect-ratio: 4 / 3;
	background: var(--c-surface-2);
}

.split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}

.split__figure:hover .split__img {
	transform: scale(1.04);
}

.split__badge {
	position: absolute;
	inset-block-end: -22px;
	inset-inline-end: clamp(1rem, 3vw, 2rem);
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--c-white);
	box-shadow: var(--e2);
}

.split__badge .fr-logo {
	width: 3rem;
	height: 3rem;
	color: var(--c-gold-600);
}

.split__emblem {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-l);
	background: var(--grad-navy);
	box-shadow: var(--e2);
}

.split__emblem .fr-logo {
	width: clamp(5rem, 18vw, 8rem);
	height: clamp(5rem, 18vw, 8rem);
	color: var(--c-gold-400);
}

/* Sticky header column beside a long list (About approach, Partners
 * benefits, design system §4.6). */
@media (min-width: 980px) {
	.split--head {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		align-items: start;
	}

	.split--head > :first-child {
		position: sticky;
		top: var(--sticky-top);
	}
}

.split--head > .sec-head {
	margin-bottom: 1.5rem;
}

@media (min-width: 980px) {
	.split--head > .sec-head {
		margin-bottom: 0;
	}
}

/* ---- Numbered list pattern (approach steps) --------------------------- */
.num-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.num-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 1.6rem);
	padding-block: clamp(1.35rem, 2.6vw, 2rem);
	border-block-start: 1px solid var(--c-hairline);
}

.num-list__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.num-list__num {
	font-family: var(--f-serif);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--c-gold-600);              /* decorative, aria-hidden */
	font-variant-numeric: tabular-nums;
}

.num-list__body {
	min-width: 0;
}

.num-list__title {
	margin: 0 0 .35rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 15.05 : 1 on --c-surface-2 */
}

.num-list__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--c-ink-body);              /* 8.11 : 1 on --c-surface-2 */
	text-wrap: pretty;
}

/* ---- Stat row (About, under the photograph) --------------------------- */
.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
	gap: 1.25rem clamp(1rem, 2vw, 1.75rem);
	margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
	padding-block-start: clamp(1.35rem, 2.5vw, 1.85rem);
	padding-inline: 0;
	border-block-start: 1px solid var(--c-hairline);
	list-style: none;
}

.stat-row__item {
	min-width: 0;
}

.stat-row__value {
	display: block;
	font-family: var(--f-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	font-variant-numeric: tabular-nums;
}

.stat-row__label {
	display: block;
	margin-top: .3rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

/* ---- Vision / mission panels ------------------------------------------ */
.vision-mission {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.vision-mission__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.vision-mission__panel:hover {
	transform: translateY(-4px);
	box-shadow: var(--e2);
}

.vision-mission__num {
	display: block;
	margin-bottom: .85rem;
	font-family: var(--f-serif);
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--c-gold-600);              /* decorative, aria-hidden */
	font-variant-numeric: tabular-nums;
}

.vision-mission__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);                   /* 17.26 : 1 on white */
}

.vision-mission__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	text-wrap: pretty;
}

/* ---- Promise band values (navy surface) ------------------------------- */
.section--promise .split__picture {
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.value-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: clamp(1.85rem, 3.5vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.value-list__item {
	padding-block-start: .9rem;
	border-block-start: 2px solid var(--c-gold-500);
	min-width: 0;
}

.value-list__title {
	margin: 0 0 .3rem;
	font-size: 1.0625rem;
	font-family: var(--f-sans);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--c-white);                 /* 17.43 : 1 on --c-navy-900 */
}

.value-list__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-on-navy-soft);          /* 8.42 : 1 on --c-navy-900 */
}

/* ---- Benefits list (Partners) ----------------------------------------- */
.benefits-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefits-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 1.5rem);
	align-items: start;
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	border-block-start: 1px solid var(--c-hairline);
}

.benefits-list__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.benefits-list__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--grad-gold);
	color: var(--c-navy-950);              /* 8.42 : 1 on the gradient midpoint */
	box-shadow: var(--e-gold);
}

.benefits-list__icon .icon {
	width: 1.3rem;
	height: 1.3rem;
	stroke-width: 1.9;
}

.benefits-list__body {
	min-width: 0;
}

.benefits-list__title {
	margin: 0 0 .3rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
}

.benefits-list__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-ink-body);
	text-wrap: pretty;
}

/* ---- Services-archive intro ------------------------------------------- */
.intro-lede {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.intro-lede {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.intro-lede__lead {
	margin: 0;
	font-size: clamp(1.25rem, 1.05rem + .95vw, 1.7rem);
	line-height: 1.45;
	letter-spacing: -.015em;
	font-weight: 500;
	color: var(--c-ink);                   /* 17.26 : 1 on white */
	text-wrap: pretty;
}

.intro-lede__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);
	text-wrap: pretty;
}

.archive-intro {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ════════════════════════════════════════════════════════════════════════
 * 19. PARTNERS / CONTACT / SERVICE SINGLE
 * ═══════════════════════════════════════════════════════════════════════ */

.partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.15rem) 1rem;
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	text-align: center;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.partner-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--e2);
}

.partner-card__media {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 9rem;
}

.partner-card__logo {
	width: auto;
	max-height: 3.25rem;
	object-fit: contain;
}

.partner-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-gold-700);              /* 4.54 : 1 on --c-surface-2 */
	box-shadow: inset 0 0 0 1px var(--c-hairline);
}

.partner-card__icon .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.partner-card__title {
	margin: 0;
	font-family: var(--f-sans);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--c-ink);
	text-wrap: balance;
}

.partners-note {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	font-size: var(--fs-small);
	color: var(--c-ink-muted);             /* 5.55 : 1 on --c-surface */
}

/* ---- Contact ----------------------------------------------------------- */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.15rem);
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--e2);
}

.contact-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: .5rem;
	border-radius: 50%;
	background: var(--grad-gold);
	color: var(--c-navy-950);
	box-shadow: var(--e-gold);
}

.contact-card__icon .icon {
	width: 1.3rem;
	height: 1.3rem;
	stroke-width: 1.9;
}

.contact-card__title {
	margin: 0;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
}

.contact-card__link {
	min-height: 24px;
	font-weight: 600;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	text-decoration: none;
}

.contact-card__link:hover {
	color: var(--c-navy-800);
	text-decoration: underline;
}

.contact-card__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-ink-body);
}

.contact-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .75rem;
	margin: .35rem 0 0;
	padding-block-start: .75rem;
	border-block-start: 1px solid var(--c-hairline);
	font-size: var(--fs-small);
}

.contact-card__label {
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

.contact-card__value {
	color: var(--c-ink-body);
}

.contact-note {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	max-width: 60ch;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-ink-body);              /* 8.77 : 1 on --c-surface */
	text-wrap: pretty;
}

.contact-social {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.contact-social__title {
	margin: 0 0 .85rem;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}

.contact-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-social__link {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-navy-800);              /* 14.78 : 1 */
	box-shadow: var(--e1);
	transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}

.contact-social__link:hover {
	background: var(--c-navy-800);
	color: var(--c-white);
	transform: translateY(-2px);
}

.contact-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

/*
 * Two columns whether or not a map is configured: the aside always carries the
 * "what happens next" panel, and a photograph stands in for the map when none
 * is set. The form previously sat alone against half an empty screen.
 */
@media (min-width: 980px) {
	.contact-layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	}
}

.contact-layout__aside {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-content: start;
}

/* ---- "What happens next" panel ---------------------------------------- */
.contact-next {
	padding: clamp(1.5rem, 3vw, 2.15rem);
	border-radius: var(--radius-l);
	background: var(--c-navy-900);
	color: var(--c-on-navy);
	box-shadow: var(--e2);
}

.contact-next__title {
	margin: 0 0 1.25rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-white);
}

.contact-next__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-next__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1rem;
	padding-block: 1rem;
}

.contact-next__item + .contact-next__item {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.contact-next__num {
	font-family: var(--f-serif);
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--c-gold-400);        /* 8.9 : 1 on navy-900 */
	font-variant-numeric: tabular-nums;
}

.contact-next__body {
	display: grid;
	gap: .3rem;
}

.contact-next__step {
	font-weight: 600;
	color: var(--c-white);
}

.contact-next__text {
	font-size: var(--fs-small);
	color: var(--c-on-navy-soft);    /* 7.4 : 1 on navy-900 */
	line-height: 1.6;
}

/* ---- Aside photograph -------------------------------------------------- */
.contact-aside__figure {
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-l);
	box-shadow: var(--e2);
}

.contact-aside__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
}

.contact-layout__form,
.contact-layout__aside {
	min-width: 0;
}

.contact-layout__form .enquiry-card {
	background: var(--c-white);
}

.contact-map {
	overflow: hidden;
	border-radius: var(--radius-l);
	box-shadow: var(--e2);
	background: var(--c-surface-2);
}

.contact-map__frame {
	display: block;
	width: 100%;
	min-height: 22rem;
	height: 100%;
	border: 0;
}

@media (min-width: 980px) {
	.contact-map,
	.contact-map__frame {
		min-height: 30rem;
	}
}

/* ---- Service single ---------------------------------------------------- */
.service-single {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 980px) {
	.service-single {
		grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
	}
}

.service-single__main {
	min-width: 0;
}

.service-single__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: clamp(1.35rem, 2.5vw, 1.85rem);
	border-radius: 50%;
	background: var(--grad-gold);
	color: var(--c-navy-950);
	box-shadow: var(--e-gold);
}

.service-single__icon .icon {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 1.9;
}

.service-aside {
	min-width: 0;
}

.service-aside__inner {
	display: grid;
	gap: clamp(1.15rem, 2.2vw, 1.75rem);
}

@media (min-width: 980px) {
	.service-aside__inner {
		position: sticky;
		top: var(--sticky-top);
	}
}

.service-aside__contact,
.service-aside__nav {
	padding: clamp(1.35rem, 2.6vw, 1.85rem);
	background: var(--c-surface-2);
	border-radius: var(--radius-l);
}

.service-aside__title {
	margin: 0 0 1rem;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold-700);              /* 4.54 : 1 on --c-surface-2 */
}

.service-aside__contact-list {
	margin: 0 0 1.35rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .75rem;
}

.service-aside__contact-item {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	min-width: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--c-ink-body);              /* 8.11 : 1 on --c-surface-2 */
}

.service-aside__contact-item .icon {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .2rem;
	color: var(--c-gold-700);
}

.service-aside__contact-item a {
	min-height: 24px;
	color: var(--c-navy-800);              /* 12.89 : 1 on --c-surface-2 */
	font-weight: 600;
	text-decoration: none;
}

.service-aside__contact-item a:hover {
	color: var(--c-gold-700);
	text-decoration: underline;
}

.service-aside__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .1rem;
}

.service-aside__item a {
	display: block;
	min-height: 44px;
	padding: .6rem .85rem;
	border-radius: var(--radius-s);
	border-inline-start: 2px solid transparent;
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--c-ink-body);
	text-decoration: none;
	transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

.service-aside__item a:hover {
	background: var(--c-white);
	color: var(--c-navy-800);
}

.service-aside__item.is-current a {
	border-inline-start-color: var(--c-gold-500);
	background: var(--c-white);
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
 * 20. BLOG, SEARCH, 404, PAGINATION
 * ═══════════════════════════════════════════════════════════════════════ */

.entry {
	min-width: 0;
}

.entry-meta {
	margin: 0 0 1.5rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);             /* 5.55 : 1 on --c-surface */
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.15rem, 2.2vw, 1.85rem);
}

.post-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.15rem);
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--e2);
}

.post-card__title {
	margin: 0 0 .45rem;
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
	text-wrap: balance;
}

.post-card__link {
	color: inherit;
	text-decoration: none;
}

.post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--radius-l);
}

.post-card__link:hover {
	color: var(--c-navy-700);
}

.post-card__meta {
	margin: 0 0 .85rem;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-muted);             /* 5.88 : 1 on white */
}

.post-card__excerpt {
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-ink-body);
}

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

.results-count {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-ink-muted);
}

.empty-state {
	margin: 0;
	padding: clamp(1.85rem, 4vw, 3rem);
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-ink-body);              /* 9.30 : 1 on white */
	text-wrap: pretty;
}

/* ---- Core search form -------------------------------------------------- */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	max-width: 34rem;
}

.search-form label {
	flex: 1 1 11rem;
	min-width: 0;
	margin: 0;
}

.search-field {
	width: 100%;
	min-height: 48px;
	padding: .75rem 1rem;
	border: 1.5px solid var(--c-control-line);   /* 4.22 : 1 on white */
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: var(--fs-body);
}

.search-field::placeholder {
	color: var(--c-ink-muted);
	opacity: 1;
}

.search-submit {
	flex: none;
	min-height: 48px;
	padding: .8rem 1.6rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-navy-800);
	color: var(--c-white);                 /* 14.78 : 1 */
	font-size: var(--fs-small);
	font-weight: 600;
	transition: background-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}

.search-submit:hover {
	background: var(--c-navy-700);
	transform: translateY(-2px);
}

.search-again {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ---- 404 ---------------------------------------------------------------- */
.error404 {
	display: grid;
	gap: clamp(2.25rem, 4.5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.error404--split {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.error404__body,
.error404__aside {
	min-width: 0;
}

.error404__title {
	margin: 0 0 .85rem;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	letter-spacing: var(--ls-heading);
	color: var(--c-ink);
	text-wrap: balance;
}

.error404__text {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	max-width: 56ch;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-ink-body);
	text-wrap: pretty;
}

.error404-search {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.error404-actions {
	margin: 0;
}

.error404-services {
	padding: clamp(1.5rem, 3vw, 2.15rem);
	background: var(--c-white);
	border-radius: var(--radius-l);
	box-shadow: var(--e1);
}

.error404-services__title {
	margin: 0 0 1rem;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold-700);              /* 5.21 : 1 on white */
}

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

.error404-services__item + .error404-services__item {
	border-block-start: 1px solid var(--c-hairline);
}

.error404-services__item a {
	display: block;
	min-height: 44px;
	padding: .7rem 0;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--c-ink-body);
	text-decoration: none;
}

.error404-services__item a:hover {
	color: var(--c-gold-700);
	text-decoration: underline;
}

.error404-services__item--all a {
	font-weight: 700;
	color: var(--c-navy-800);
}

/* ---- Pagination + post navigation -------------------------------------- */
.pagination,
.post-navigation {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: .5rem .85rem;
	border-radius: var(--radius-s);
	background: var(--c-white);
	box-shadow: var(--e1);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-ink-body);
	text-decoration: none;
	transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

.page-numbers:hover {
	background: var(--c-navy-800);
	color: var(--c-white);
}

.page-numbers.current {
	background: var(--c-navy-800);
	color: var(--c-white);                 /* 14.78 : 1 */
	box-shadow: none;
}

.page-numbers.dots {
	background: none;
	box-shadow: none;
	min-width: auto;
	padding-inline: .25rem;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-navigation a {
	display: block;
	min-height: 44px;
	padding: 1rem 1.25rem;
	background: var(--c-white);
	border-radius: var(--radius-m);
	box-shadow: var(--e1);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-navy-800);
	text-decoration: none;
}

.post-navigation a:hover {
	box-shadow: var(--e2);
	color: var(--c-gold-700);
}

.post-navigation .nav-next {
	text-align: end;
}

.page-links {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	font-size: var(--fs-small);
	font-weight: 600;
}

.page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	border-radius: var(--radius-s);
	background: var(--c-white);
	box-shadow: var(--e1);
	text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * 21. FOOTER + WHATSAPP FAB  (design system §4.12)
 * ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
	position: relative;
	background: var(--c-navy-950);
	color: var(--c-on-navy-soft);          /* 9.10 : 1 on --c-navy-950 */
	font-size: var(--fs-small);
	padding-block-start: clamp(3.5rem, 7vw, 5.5rem);
}

.site-footer__grid {
	display: grid;
	gap: clamp(2.25rem, 4.5vw, 3.5rem);
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 640px) and (max-width: 1099.98px) {
	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
		gap: clamp(2.5rem, 4vw, 4rem);
	}
}

.site-footer__col {
	min-width: 0;
}

.site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.15rem;
	text-decoration: none;
	color: inherit;
}

.site-footer__logo {
	width: 3rem;
	height: 3rem;
	color: var(--c-gold-500);              /* 8.42 : 1 on --c-navy-950 */
}

.site-footer__name {
	display: flex;
	flex-direction: column;
	font-family: var(--f-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .05em;
	color: var(--c-white);                 /* 18.83 : 1 */
}

.site-footer__sub {
	margin-top: .3em;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .34em;
	color: var(--c-gold-400);              /* 11.26 : 1 */
}

.site-footer__tagline {
	margin: 0 0 .65rem;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-on-navy);               /* 16.67 : 1 */
}

.site-footer__about {
	margin: 0 0 1.35rem;
	max-width: 40ch;
	line-height: 1.7;
	color: var(--c-on-navy-soft);
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social-link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	color: var(--c-on-navy);
	transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}

.site-footer__social-link:hover {
	background: var(--c-gold-500);
	border-color: var(--c-gold-500);
	color: var(--c-navy-950);              /* 8.42 : 1 */
	transform: translateY(-2px);
}

.site-footer__heading {
	margin: 0 0 1.15rem;
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold-400);              /* 11.26 : 1 on --c-navy-950 */
}

.site-footer__menu,
.site-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .15rem;
}

.site-footer__contact {
	gap: .85rem;
}

.site-footer__menu a,
.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-block: .3rem;
	color: var(--c-on-navy-soft);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__contact a:hover {
	color: var(--c-white);
}

/* Gold underline sized to the label, not the list item. */
.site-footer__link-label {
	position: relative;
	display: inline-block;
	padding-block-end: 2px;
}

.site-footer__link-label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1.5px;
	border-radius: 2px;
	background: var(--c-gold-500);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
}

.site-footer__menu a:hover .site-footer__link-label::after,
.site-footer__menu a:focus-visible .site-footer__link-label::after,
.site-footer__contact a:hover .site-footer__link-label::after,
.site-footer__contact a:focus-visible .site-footer__link-label::after,
.site-footer__menu .current-menu-item > a .site-footer__link-label::after {
	transform: scaleX(1);
}

.site-footer__all-services .site-footer__link-label {
	font-weight: 700;
	color: var(--c-gold-400);
}

.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	min-width: 0;
	line-height: 1.6;
}

.site-footer__contact-item .icon {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .35rem;
	flex: none;
	color: var(--c-gold-500);
}

.site-footer__address {
	max-width: 30ch;
}

.site-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-block-start: 1px solid rgba(255, 255, 255, .10);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-block: 1.5rem;
}

.site-footer__copy {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-on-navy-soft);
}

.site-footer__credit {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-on-navy-soft);
}

.site-footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	transition: color .2s ease;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--c-gold-400);
}

.site-footer__script {
	margin: 0;
	margin-inline-start: auto;
	text-align: end;
	color: var(--c-gold-400);              /* 11.26 : 1 */
	font-size: clamp(1.05rem, .85rem + .75vw, 1.4rem);
	max-width: min(100%, 46ch);   /* the full line fits without wrapping */
}

/*
 * The WhatsApp button is fixed over the bottom-right corner, so the last footer
 * row has to yield that much space or the script line runs underneath it and
 * gets clipped mid-word.
 */
.site-footer__bottom-inner {
	padding-inline-end: calc(56px + clamp(1rem, 3vw, 1.75rem) + .75rem);
}

@media (max-width: 700px) {
	.site-footer__bottom-inner {
		padding-inline-end: 0;
		padding-block-end: 4.5rem;    /* the button sits below the text instead */
	}

	.site-footer__script {
		margin-inline-start: 0;
		text-align: start;
	}
}

/* ---- WhatsApp FAB ------------------------------------------------------ */
.whatsapp-fab {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 1.75rem);
	inset-inline-end: clamp(1rem, 3vw, 1.75rem);
	z-index: 80;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* WhatsApp's dark teal rather than #25D366: the brand green measures
	 * only 1.98 : 1 against the page, and its white glyph 1.98 : 1 too.
	 * #128C7E gives 4.14 : 1 for the glyph and 3.90 : 1 for the button
	 * against --c-surface. */
	background: #128C7E;
	color: var(--c-white);
	box-shadow: 0 10px 28px rgba(8, 15, 44, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		visibility var(--dur) var(--ease),
		background-color var(--dur-micro) var(--ease);
}

.whatsapp-fab.is-visible,
html.no-js .whatsapp-fab {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.whatsapp-fab:hover {
	background: #0F7A6D;
	color: var(--c-white);
}

.whatsapp-fab .icon {
	width: 1.7rem;
	height: 1.7rem;
}

/* ════════════════════════════════════════════════════════════════════════
 * 22. MOTION  (design system §5, spec v2 §3)
 * ═══════════════════════════════════════════════════════════════════════ */

@keyframes fr-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes fr-cue {
	0%   { transform: translateY(-14px); opacity: 0; }
	35%  { opacity: 1; }
	100% { transform: translateY(16px); opacity: 0; }
}

@keyframes fr-hero-in {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ---- Reveal on scroll (JS adds .is-visible) ---------------------------- */
.reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity .75s var(--ease),
		transform .75s var(--ease);
	will-change: opacity, transform;
}

/* Directional variants only run where the split is genuinely two-column.
 * Below 980px the columns are full-bleed, so a horizontal entrance would
 * momentarily push content past the viewport edge; there they fall back to
 * the vertical reveal. */
@media (min-width: 980px) {
	.reveal--left {
		transform: translate3d(-28px, 0, 0);
	}

	.reveal--right {
		transform: translate3d(28px, 0, 0);
	}
}

.reveal--scale {
	transform: scale(.96);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* JS sets --i per direct child; it must cap the index at 8 so long grids
 * do not crawl (spec v2 §3.1). */
.reveal--stagger > * {
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* Without JS nothing can ever add .is-visible, so nothing may start hidden. */
html.no-js .reveal {
	opacity: 1;
	transform: none;
}

/* ---- Hero entrance — pure CSS, no JS dependency ------------------------ *
 * If the script fails the hero still resolves to opacity:1 because the
 * animation carries fill-mode `both`. */
.hero__enter {
	opacity: 0;
	animation: fr-hero-in var(--dur-enter) var(--ease) both;
}

.hero__enter--1 { animation-delay: calc(1 * 90ms); }
.hero__enter--2 { animation-delay: calc(2 * 90ms); }
.hero__enter--3 { animation-delay: calc(3 * 90ms); }
.hero__enter--4 { animation-delay: calc(4 * 90ms); }
.hero__enter--5 { animation-delay: calc(5 * 90ms); }
.hero__enter--6 { animation-delay: calc(6 * 90ms); }
.hero__enter--7 { animation-delay: calc(7 * 90ms); }

/* ════════════════════════════════════════════════════════════════════════
 * 23. RESPONSIVE GUARDS
 * Mobile-first upgrades live with their components; this block is the
 * safety net that keeps 320 → 1920 free of horizontal overflow.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Nothing may establish a wider-than-viewport box. */
.wrap,
.site-main,
.section,
.hero,
.cta-band,
.page-hero,
.trust-strip,
.stats-bar,
.site-footer {
	max-width: 100%;
}

/* Embedded media never reflows on load and never overflows. */
.contact-map__frame,
.prose iframe,
.prose video,
.prose embed,
.prose object {
	max-width: 100%;
}

/* Very narrow phones: tighten the two components most at risk. */
@media (max-width: 479.98px) {
	.emi-calc {
		padding: 1.15rem;
	}

	.emi-result {
		padding: 1.15rem;
	}

	.emi-field__head {
		gap: .5rem;
	}

	.emi-field__number {
		width: clamp(5.75rem, 46%, 9rem);
	}

	.site-header__inner {
		gap: .5rem;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.testimonial-slider__slide {
		padding-inline: 0;
	}
}

/* At the very largest widths the wrap is capped, so only the rhythm grows. */
@media (min-width: 1400px) {
	.hero__inner {
		gap: 5rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 24. REDUCED MOTION — every animation added above is neutralised here.
 * A reduced-motion user must NEVER see a blank section.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	/* Reveals start visible — they never depend on JS to become readable. */
	.reveal,
	.reveal--left,
	.reveal--right,
	.reveal--scale {
		opacity: 1 !important;
		transform: none !important;
	}

	.reveal--stagger > * {
		transition-delay: 0ms !important;
	}

	/* Hero entrance: `animation:none` on an element whose base state is
	 * opacity:0 would leave it invisible, so opacity is forced back to 1. */
	.hero__enter {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	/* Parallax: the !important beats the inline transform JS writes. */
	.hero__media {
		transform: none !important;
	}

	.hero__scroll-cue-dot {
		animation: none !important;
		opacity: 1;
	}

	/* Marquee stands still and the aria-hidden duplicate track is dropped,
	 * so the names are neither doubled nor cut off. */
	.trust-strip__marquee {
		animation: none !important;
		transform: none !important;
		width: 100%;
	}

	.trust-strip__track[aria-hidden="true"] {
		display: none;
	}

	.trust-strip__track {
		flex-wrap: wrap;
		row-gap: .5rem;
	}

	.trust-strip__item {
		white-space: normal;
	}

	.trust-strip__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Hover lifts, image zooms and arrow nudges all become inert. */
	.btn:hover,
	.btn--gold:hover,
	.btn--dark:hover,
	.btn--ghost:hover,
	.service-card:hover,
	.post-card:hover,
	.partner-card:hover,
	.contact-card:hover,
	.vision-mission__panel:hover,
	.testimonial-slider__btn:hover,
	.contact-social__link:hover,
	.site-footer__social-link:hover,
	.site-header__cta-btn:hover,
	.search-submit:hover,
	.site-brand:hover .site-brand__logo {
		transform: none !important;
	}

	.service-card:hover .service-card__image,
	.why__frame:hover .why__image,
	.split__figure:hover .split__img {
		transform: none !important;
	}

	.btn--text:hover .icon,
	.service-card:hover .service-card__more .icon {
		transform: none !important;
	}

	.emi-field__range:hover::-webkit-slider-thumb {
		transform: none !important;
	}

	.emi-field__range:hover::-moz-range-thumb {
		transform: none !important;
	}

	/* Slider: the track jumps rather than slides; the JS must also stop
	 * autoplay under reduced motion. */
	.testimonial-slider__track {
		transition: none !important;
	}

	/* Nav underline and FAQ marker settle instantly. */
	.nav-primary__label::after,
	.site-footer__link-label::after {
		transition: none !important;
	}

	.faq__marker {
		transition: none !important;
	}

	/* The FAB still appears, it just does not slide in. */
	.whatsapp-fab {
		transform: none !important;
	}

	/* Sticky columns are fine, but the parallax-adjacent oversize is not
	 * needed once the photo cannot move. */
	.hero__media {
		inset-block-start: 0;
		height: 100%;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 25. PRINT
 * ═══════════════════════════════════════════════════════════════════════ */

@media print {

	*,
	*::before,
	*::after {
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
		color: #000 !important;
		animation: none !important;
		transition: none !important;
	}

	@page {
		margin: 16mm;
	}

	html,
	body {
		background: #fff !important;
		font-size: 11pt;
		line-height: 1.5;
	}

	/* Navigation, the FAB, forms and decorative media do not print. */
	.site-header,
	.topbar,
	.nav-primary,
	.nav-drawer,
	.nav-toggle,
	.site-header__cta,
	.whatsapp-fab,
	.hero__media,
	.hero__scrim,
	.hero__glow,
	.hero__scroll-cue,
	.hero__aside,
	.trust-strip,
	.testimonial-slider__controls,
	.cta-band__media,
	.cta-band__scrim,
	.cta-band__actions,
	.page-hero__media,
	.page-hero__scrim,
	.page-hero__skyline,
	.split__badge,
	.split__emblem,
	.enquiry-card,
	.enquiry-form,
	.search-form,
	.search-again,
	.error404-search,
	.contact-map,
	.contact-social,
	.emi-field__range,
	.emi-calc__cta,
	.emi-donut,
	.pagination,
	.post-navigation,
	.skip-link,
	.service-card__more,
	.site-footer__social {
		display: none !important;
	}

	body.has-solid-header .site-main,
	.site-main {
		padding-top: 0 !important;
	}

	.section,
	.hero,
	.cta-band,
	.page-hero,
	.stats-bar,
	.site-footer {
		padding-block: 12pt !important;
		min-height: 0 !important;
		color: #000 !important;
	}

	.hero,
	.page-hero {
		display: block;
	}

	/* background-clip:text renders as transparent on paper. */
	.stat__value,
	.emi-result__emi,
	.hero__title-line {
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		color: #000 !important;
	}

	a {
		text-decoration: underline;
	}

	.prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.section,
	.service-card,
	.post-card,
	.faq__item,
	.why-list__item,
	.num-list__item,
	.process__step,
	.vision-mission__panel {
		break-inside: avoid;
	}

	h1, h2, h3 {
		break-after: avoid;
	}

	img,
	picture {
		max-width: 100% !important;
	}
}