/* ==========================================================================
   Legacy Pillars — design system
   Source: Figma "Legacy Pillars (Copy)", 1366px frames, and the pen file pillars.pen (frames DS / 00 to DS / 32; DS / 04 Index maps them).
   DESIGN.md documents every token and component.
   Rule: components use tokens only. No raw hex, px font sizes or ad-hoc spacing below the token block.
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
	/* Brand color */
	--c-navy: #002e7f;          /* Headings on light, primary buttons, step band */
	--c-navy-deep: #003883;     /* Header, navy sections */
	--c-indigo: #1d2b83;        /* Active readiness circle */
	--c-periwinkle: #4858bc;    /* Hero pager, band icon */
	--c-gold: #e3b73f;          /* Eyebrows on navy, numbers, outline buttons */
	--c-gold-muted: #cead54;    /* Large decorative gold on light only (2:1 on white) */
	--c-gold-ink: #8a6a12;      /* Small gold text on white or surface (passes AA) */

	/* Neutrals */
	--c-ink: #273035;           /* Body text, footer */
	--c-slate: #6e7e97;         /* Inactive timeline dots and ticks. Not for small text on white. */
	--c-mist: #818ea1;          /* Rules on ink and navy */
	--c-mist-strong: #a9b4c4;   /* Footnotes and quiet text on navy (passes AA) */
	--c-line: #dedede;
	--c-stone: #a8a0a0;         /* Quiet links under the contact form */
	--c-placeholder: #ccc8c8;
	--c-disc: #efefef;          /* Icon discs */
	--c-surface: #f5f5f5;       /* Light sections */
	--c-white: #fff;

	/* Text on navy */
	--c-on-navy: var(--c-white);
	--c-on-navy-line: rgb(255 255 255 / 0.25);
	--c-header-glass: rgb(0 46 127 / 0.02);      /* header over the hero, with backdrop blur */
	--c-header-scrolled: rgb(0 56 131 / 0.88);   /* header once the hero has scrolled under it */
	--c-pager-bar: rgb(255 255 255 / 0.6);       /* hero pager bars */
	--overlay-photo: rgb(0 0 0 / 0.45);          /* dark scrim on photos under white text */
	--overlay-photo-soft: rgb(0 0 0 / 0.2);
	--overlay-navy: rgb(0 46 127 / 0.55);        /* navy tint on section photos */
	--overlay-navy-soft: rgb(0 46 127 / 0.2);

	/* Feedback and state */
	--c-success: #28704f;
	--c-success-bg: #e8f3ee;
	--c-error: #b3261e;
	--c-error-bg: #fbeaea;      /* Also the error color on navy and ink */
	--c-focus: var(--c-gold);   /* Focus ring: 2px, 2px outside */
	--c-overlay-navy: rgb(0 56 131 / 0.7);   /* navy-deep at 70%, image overlays */
	--c-veil: rgb(0 56 131 / 0.35);          /* navy-deep at 35%, card hover */

	/* Icons for CSS masks. Lucide paths, drawn in currentColor. Data URIs cost no request. */
	--i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
	--i-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");

	/* Type families. Adobe Fonts names first; fallbacks keep metrics close until the kit loads. */
	--f-display: "presti-text", "Presti Text", "Iowan Old Style", Georgia, serif;
	--f-body: "proxima-nova", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;

	/* Type scale — fluid from 375px to 1366px viewport. Comment = design px at 1366. */
	--fs-display: clamp(2.5rem, 1.75rem + 3.2vw, 3.875rem);   /* 62 hero */
	--fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3rem);           /* 48 section titles */
	--fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);         /* 40 quote */
	--fs-h3: clamp(1.625rem, 1.4rem + 1vw, 2rem);             /* 32 card titles */
	--fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);          /* 24 founder role */
	--fs-italic: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);    /* 42 hero italic */
	--fs-title: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);    /* 30 feature titles */
	--fs-lead-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);  /* 26 CTA band */
	--fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);       /* 22 feature text */
	--fs-md: 1.25rem;       /* 20 */
	--fs-base: 1.125rem;    /* 18 body */
	--fs-sm: 1rem;          /* 16 */
	--fs-xs: 0.875rem;      /* 14 nav, buttons */
	--fs-2xs: 0.75rem;      /* 12 footnotes */
	--fs-3xs: 0.625rem;     /* 10 timeline index */
	--fs-input: 1rem;       /* 16 field text. 16px stops iOS zoom on focus. */
	--lh-input: 1.375;      /* 16/22 */
	--ls-caps: 0.0625rem;   /* 1px tracking for new uppercase labels: tag, read more */

	--lh-tight: 1.08;
	--lh-heading: 1.2;
	--lh-snug: 1.3;
	--lh-body: 1.333;       /* 18/24 */

	/* Space — 4px base */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--s-20: 5rem;
	--s-30: 7.5rem;         /* 120 */
	--section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem);   /* ~120 at 1366 */

	/* Layout — 1176px content, 110px gutters, 72px column gap at 1366 */
	--container: 73.5rem;
	--gutter: clamp(1.25rem, 5vw, 6.875rem);
	--col-gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	--header-h: 7.375rem;   /* 118 */

	/* Shape and depth */
	--radius-sm: 4px;       /* Accordion, inputs, checkbox */
	--radius-full: 999px;   /* Radio, spinner, avatars */
	--border: 1px solid;
	--ring: 2px solid var(--c-focus);
	--ring-offset: 2px;
	--shadow-disc: 0 3px 6px rgb(0 0 0 / 0.16);
	--shadow-card: 0 2px 6px rgb(0 46 127 / 0.12);
	--shadow-card-hover: 0 4px 16px rgb(0 0 0 / 0.16);

	/* Motion. UI stays under 250ms; only marketing moments (hero, card photo) run longer.
	   ease: color and hover changes. ease-out: things that enter or respond to a press.
	   ease-in-out: things that move on screen. ease-drawer: the mobile menu. Never ease-in. */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--t-press: 140ms;       /* :active scale */
	--t-fast: 150ms;        /* color, small nudges, exits */
	--t-base: 200ms;        /* state changes */
	--t-drawer: 360ms;      /* mobile menu open */
	--t-slow: 700ms;        /* photo zoom on hover */
	--t-slide: 1200ms;      /* hero slide settle */
	--t-fill: 280ms;        /* button and arrow-tile fill rising on hover */
	--t-fill-ink: 260ms;    /* label color change under that fill */
	--press: 0.97;          /* :active scale for buttons and tiles */
}

@media (max-width: 64rem) {
	:root { --header-h: 5rem; }
}

/* 2. Base ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }   /* The fixed header covers the top */
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-ink);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--c-gold); color: var(--c-navy); }
/* One focus ring for links, buttons, summary, tabs, checkbox and radio. Keyboard focus only. */
:focus-visible, .is-focus { outline: var(--ring); outline-offset: var(--ring-offset); }

/* Reduced motion: keep fades and color changes, drop movement. Transforms and size changes snap. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-property: opacity, visibility, color, background-color, border-color, box-shadow, outline-color, text-decoration-color !important;
	}
}

/* Press feedback: pressable things scale down a little, so the page feels like it heard the click */
@media (prefers-reduced-motion: no-preference) {
	:is(.btn, .arrow-tile, .pager__bar, .site-header__toggle, .timeline__tab, .inline-form button, .team__social, .site-footer__social a):active { transform: scale(var(--press)); }
	/* Wide targets move less, or the scale reads as a jump */
	.accordion__item:has(> summary:active), .card:active { transform: scale(0.99); }
	.card:active .arrow-tile { transform: none; }
}

/* Keyboard-driven changes do not animate. main.js sets this class for one frame. */
.is-instant, .is-instant * { transition: none !important; }

/* 3. Layout primitives ===================================================== */

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); overflow: clip; }
.section--surface { background: var(--c-surface); }
.section--navy { background: var(--c-navy-deep); color: var(--c-on-navy); }
.section--navy-strong { background: var(--c-navy); color: var(--c-on-navy); }
.section__head { max-width: 46rem; margin-bottom: var(--s-12); }   /* Wide enough for the XD line breaks in the titles */
.section__head--center { margin-inline: auto; text-align: center; }
.section__head > * + * { margin-top: var(--s-4); }
.section__foot { margin-top: var(--s-12); text-align: center; }

.grid-2 { display: grid; gap: var(--s-12) var(--col-gap); }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stack > * + * { margin-top: var(--stack, var(--s-6)); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: var(--s-2); left: var(--s-2);
	z-index: 100;
	padding: var(--s-2) var(--s-4);
	background: var(--c-gold);
	color: var(--c-navy);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 4. Typography ============================================================ */

.display, .h1, .h2, .h3, .h4 { font-family: var(--f-display); font-weight: 700; color: var(--heading-color, var(--c-navy)); }
.display { font-size: var(--fs-display); font-weight: 600; line-height: 1.19; }   /* XD: Presti Text Semibold 62/74 */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); }
.display-italic { font-family: var(--f-display); font-size: var(--fs-italic); font-style: italic; font-weight: 400; line-height: var(--lh-snug); }
.section--navy, .section--navy-strong, .on-navy { --heading-color: var(--c-white); }

/* Accent text color. Gold-ink on light grounds; navy and photo grounds switch it to gold. */
:root { --accent: var(--c-gold-ink); }
.section--navy, .section--navy-strong, .section--image, .on-navy, .split, .steps, .hero, .page-hero, .band { --accent: var(--c-gold); }
.contact__panel { --accent: var(--c-gold-ink); }

.title { font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-heading); color: var(--c-navy); }
.title-sm { font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-body); }
.lead-lg { font-size: var(--fs-lead-lg); line-height: var(--lh-snug); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); }
.text-sm { font-size: var(--fs-sm); }
.footnote { font-size: var(--fs-2xs); }
.muted { color: var(--c-mist-strong); }   /* Quiet text on navy */
.tm { font-size: 0.55em; line-height: 0; vertical-align: 0.9em; }

.eyebrow { font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-body); text-transform: uppercase; }
.eyebrow--gold { color: var(--c-gold); }
.eyebrow--ink { color: var(--c-ink); }
.eyebrow--white { color: var(--c-white); }
.eyebrow--gold-ink { color: var(--c-gold-ink); }

.index { font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.index--ink { color: var(--c-ink); }
.index--lg { font-size: var(--fs-title); line-height: 1.1; }
.index--md { font-size: var(--fs-md); }
.index--sm { font-size: var(--fs-base); }

.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-6); }
.prose h1, .prose h2 { font-family: var(--f-display); color: var(--c-navy); line-height: var(--lh-heading); }
.prose h1 { font-size: var(--fs-h1); }
.prose h2 { font-size: var(--fs-h3); }

/* Links. Inline links sit in body text and are always underlined. On navy they are white and turn gold. */
.link, .prose a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.link:hover, .link.is-hover, .prose a:hover { color: var(--c-indigo); }
.link--on-navy, .on-navy .prose a { color: var(--c-white); }
.link--on-navy:hover, .link--on-navy.is-hover, .on-navy .prose a:hover { color: var(--c-gold); }

/* Read more — closes a card or teaser. Gold on navy. */
.read-more { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 700; line-height: 1.15; letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--c-navy); transition: color var(--t-fast) var(--ease); }
.read-more::after { content: "\2192"; transition: transform var(--t-fast) var(--ease-out); }
.read-more:hover, .read-more.is-hover { color: var(--c-indigo); }
.read-more.is-hover::after { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
	.read-more:hover::after { transform: translateX(3px); transition-duration: var(--t-base); }
}
.read-more--on-navy, .read-more--on-navy:hover, .read-more--on-navy.is-hover { color: var(--c-gold); }

/* 5. Components ============================================================ */

/* Button — square corners, uppercase, 50px tall */
.btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 3.125rem;
	padding: var(--s-3) var(--s-5);
	border: var(--border) transparent;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out);
}
/* Hover fill: the same move as the header Contact link. A layer in --btn-fill rises from the
   bottom edge. It is a clip, so the button never changes size. It rises over 280ms and drops
   back over 150ms: slow where the user is looking, fast where the user has moved on.
   inset: -1px covers the border, so no ring of the old color stays around the edge. */
.btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: var(--btn-fill, transparent);
	clip-path: inset(100% 0 0 0);
	transition: clip-path var(--t-fast) var(--ease-out);
}
.btn.is-hover, .btn:focus-visible { color: var(--btn-fill-ink, currentColor); transition-duration: var(--t-fill-ink), var(--t-fill-ink), var(--t-press); }
.btn.is-hover::before, .btn:focus-visible::before { clip-path: inset(0); transition-duration: var(--t-fill); }
/* Arrow nudge: in over 200ms, back over 150ms */
.btn__arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn.is-hover .btn__arrow { transform: translateX(3px); }
/* Touch screens keep hover after a tap, so the fill and the nudge only run with a real pointer */
@media (hover: hover) and (pointer: fine) {
	.btn:hover { color: var(--btn-fill-ink, currentColor); transition-duration: var(--t-fill-ink), var(--t-fill-ink), var(--t-press); }
	.btn:hover::before { clip-path: inset(0); transition-duration: var(--t-fill); }
	.btn:hover .btn__arrow { transform: translateX(3px); transition-duration: var(--t-base); }
}
.btn--primary { background: var(--c-navy); color: var(--c-white); --btn-fill: var(--c-gold); --btn-fill-ink: var(--c-navy-deep); }
.btn--outline-gold { border-color: var(--c-gold); color: var(--c-gold); --btn-fill: var(--c-gold); --btn-fill-ink: var(--c-navy-deep); }
.btn--outline-white { border-color: var(--c-white); color: var(--c-white); --btn-fill: var(--c-white); --btn-fill-ink: var(--c-navy); }
/* Ghost — quiet secondary action on light. No box; hover underlines. */
.btn--ghost { padding-inline: 0; color: var(--c-navy); text-underline-offset: 4px; --btn-fill-ink: var(--c-indigo); }
.btn--ghost::before { content: none; }
.btn--ghost:is(:hover, .is-hover) { text-decoration: underline; }
/* Sizes: small 40px (dense rows, header), default 50px, large 60px (hero, closing call to action) */
.btn--sm { min-height: 2.5rem; padding: var(--s-2) var(--s-4); font-size: var(--fs-2xs); }
.btn--lg { min-height: 3.75rem; padding-inline: var(--s-8); }
/* Icon-only — square. Give it an accessible name (screen-reader text or aria-label). */
.btn--icon { width: 3.125rem; padding: 0; }
.btn--icon.btn--sm { width: 2.5rem; }
.btn--icon.btn--lg { width: 3.75rem; }
.btn--icon svg { width: 1rem; height: 1rem; }
.btn--sm.btn--icon svg { width: 0.75rem; height: 0.75rem; }
/* Disabled — 40% and no hover. Works on <button disabled> and on links with aria-disabled. */
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* Arrow tile — square navy link used on image cards */
.arrow-tile {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 4rem;
	aspect-ratio: 1;
	background: var(--c-navy);
	color: var(--c-white);
	transition: color var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out);
}
/* Same gold fill as the buttons. The card hover also runs it (see Card). */
.arrow-tile::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-gold);
	clip-path: inset(100% 0 0 0); transition: clip-path var(--t-fast) var(--ease-out);
}
:is(.arrow-tile.is-hover, .arrow-tile:focus-visible, .card.is-hover .arrow-tile) { color: var(--c-navy-deep); transition-duration: var(--t-fill-ink), var(--t-press); }
:is(.arrow-tile.is-hover, .arrow-tile:focus-visible, .card.is-hover .arrow-tile)::before { clip-path: inset(0); transition-duration: var(--t-fill); }
@media (hover: hover) and (pointer: fine) {
	:is(.arrow-tile:hover, .card:hover .arrow-tile) { color: var(--c-navy-deep); transition-duration: var(--t-fill-ink), var(--t-press); }
	:is(.arrow-tile:hover, .card:hover .arrow-tile)::before { clip-path: inset(0); transition-duration: var(--t-fill); }
}
.arrow-tile svg { width: 1.125rem; }
.arrow-tile--sm { width: 2.375rem; }

/* Icon disc — 88px circle with soft shadow */
.disc {
	display: grid;
	place-items: center;
	width: 5.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-disc);
	color: var(--c-navy);
	box-shadow: var(--shadow-disc);
	transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.disc svg { width: 2.25rem; height: 2.25rem; }
.disc.is-active, .disc--active { background: var(--c-indigo); color: var(--c-white); }
.disc--outline { background: var(--c-navy); color: var(--c-white); border: 2px solid var(--c-white); box-shadow: none; width: 6.5rem; }
.disc--outline svg { width: 3rem; height: 3rem; }

/* Photo circle — round image with white ring */
.photo-circle { flex: none; align-self: flex-start; width: 6.25rem; height: 6.25rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--c-white); }
.photo-circle img { width: 100%; height: 100%; object-fit: cover; }

/* Watermark — horse silhouette */
.watermark {
	position: absolute;
	top: 0;
	left: 0;
	width: min(45vw, 38rem);
	aspect-ratio: 614 / 639;
	pointer-events: none;
	color: var(--c-navy);
	opacity: 0.06;
}
/* The tail is cut flat at the left edge. The 5% shift keeps that edge out of view while the horse rocks. */
.watermark svg { display: block; width: 100%; height: 100%; margin-left: -5%; overflow: visible; }
.watermark--on-navy { opacity: 0.6; }
.watermark ~ * { position: relative; }

/* Accordion — native details/summary, no JS */
.accordion { display: grid; gap: var(--s-4); }
.accordion__item {
	border: var(--border) color-mix(in srgb, var(--c-navy) 45%, transparent);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-press) var(--ease-out);
}
.accordion__item:hover, .accordion__item.is-hover { border-color: var(--c-indigo); box-shadow: var(--shadow-card-hover); }
.accordion__item:hover summary, .accordion__item.is-hover summary { color: var(--c-indigo); }
/* Focus draws the ring on the whole item, over its border */
.accordion__item summary:focus-visible { outline: none; }
.accordion__item:has(> summary:focus-visible), .accordion__item.is-focus { outline: var(--ring); outline-offset: -1px; }
.accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-8) var(--s-6);
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
	content: "";
	flex: none;
	border: 0.4rem solid transparent;
	border-top: 0.55rem solid var(--c-navy);
	border-bottom-width: 0;
	transition: transform var(--t-base) var(--ease-out);
}
.accordion__item[open] summary::after { transform: rotate(180deg); }
.accordion__item summary { transition: color var(--t-fast) var(--ease); }
/* Answer fades in and settles 4px. The fade runs on open and on close. */
.accordion__body {
	padding: 0 var(--s-6) var(--s-8);
	font-size: var(--fs-md);   /* XD: Proxima Nova Regular 20 */
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.accordion__item[open] .accordion__body {
	opacity: 1;
	transform: none;
	transition-duration: 250ms;
	transition-delay: 50ms;
}
@starting-style { .accordion__item[open] .accordion__body { opacity: 0; transform: translateY(-4px); } }
/* The panel opens and closes smoothly where the browser can transition to auto height.
   Other browsers open it at once and keep the fade. */
@supports selector(::details-content) {
	.accordion__item { interpolate-size: allow-keywords; }
	.accordion__item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--t-base) var(--ease-out), content-visibility var(--t-base) allow-discrete;
	}
	.accordion__item[open]::details-content { block-size: auto; transition-duration: 250ms; }
}

/* Form field — label above, underline input */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field label { font-size: var(--fs-base); font-weight: 700; color: var(--c-navy); }
.field input, .field textarea, .field select {
	width: 100%;
	padding: var(--s-2) 0 var(--s-3);
	border: 0;
	border-bottom: var(--border) var(--c-ink);
	border-radius: 0;
	background: transparent;
	font-size: var(--fs-input);
	line-height: var(--lh-input);
	transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.field textarea { min-height: 3rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-placeholder); }
/* Focus: 2px navy underline with a 2px gold accent line below. No ring on underline fields.
   The navy line is an inset shadow above a 2px gold border. The border takes 1px from the padding, so the field does not move. */
.field input:focus, .field textarea:focus, .field select:focus, .field .is-focus {
	outline: none;
	padding-bottom: calc(var(--s-3) - 1px);
	border-bottom: 2px solid var(--c-focus);
	box-shadow: inset 0 -2px 0 var(--c-navy);
}
/* Error: red 2px underline and a message with an icon, so the state never depends on color alone */
.field--error input, .field--error textarea, .field--error select,
.field [aria-invalid="true"] { padding-bottom: calc(var(--s-3) - 1px); border-bottom: 2px solid var(--c-error); }
.field [aria-invalid="true"]:focus { border-bottom-color: var(--c-focus); box-shadow: inset 0 -2px 0 var(--c-error); }
.field__error, .field__help { display: flex; gap: var(--s-2); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.field__error { color: var(--c-error); }
.field__error::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.1em; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }
.field__error[hidden] { display: none; }
/* Error message drops in 4px under its field */
.field__error:not([hidden]) {
	transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
@starting-style { .field__error:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.field__help { color: var(--c-ink); }
/* Disabled */
.field--disabled label, .field:has(:disabled) label { color: var(--c-stone); }
.field :disabled { border-bottom-color: var(--c-line); cursor: not-allowed; }
/* Select — native control, custom chevron on the wrapper */
.select { position: relative; }
.select select { appearance: none; padding-right: var(--s-8); cursor: pointer; }
.select select:invalid { color: var(--c-placeholder); }
.select::after { content: ""; position: absolute; right: 0; top: calc(50% - 0.75rem); width: 1.25rem; height: 1.25rem; background: var(--c-navy); pointer-events: none; -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat; }
/* On navy — label and underline turn white */
.field--on-navy label, .on-navy .field label { color: var(--c-white); }
.field--on-navy :is(input, textarea, select), .on-navy .field :is(input, textarea, select) { border-bottom-color: var(--c-white); color: var(--c-white); }
.field--on-navy ::placeholder, .on-navy .field ::placeholder { color: var(--c-mist-strong); }
.field--on-navy :is(input, textarea, select):is(:focus, .is-focus), .on-navy .field :is(input, textarea, select):is(:focus, .is-focus) { box-shadow: inset 0 -2px 0 var(--c-white); }
.field--on-navy.field--error :is(input, textarea), .on-navy .field [aria-invalid="true"] { border-bottom-color: var(--c-error-bg); }
.field--on-navy .field__error, .on-navy .field__error { color: var(--c-error-bg); }
.field--on-navy .select::after, .on-navy .select::after { background: var(--c-white); }

/* Checkbox and radio — 20px control, navy when checked. Wrap control and text in one label. */
.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.check input {
	appearance: none;
	display: grid;
	place-items: center;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	border: var(--border) var(--c-navy-deep);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
/* The mark grows from 60% with a fade, never from nothing */
.check input::before { content: ""; width: 0.875rem; height: 0.875rem; background: var(--c-white); opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.check input:checked { background: var(--c-navy); }
.check input:checked::before { opacity: 1; transform: none; }
.check input[type="radio"] { border-radius: var(--radius-full); }
.check input[type="radio"]::before { width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--c-navy); -webkit-mask: none; mask: none; }
.check input[type="radio"]:checked { background: var(--c-white); }
.check input[aria-invalid="true"], .check--error input { border: 2px solid var(--c-error); }
.check:has(:disabled) { opacity: 0.4; cursor: not-allowed; }
.check-group { display: grid; align-content: start; gap: var(--s-3); padding: 0; margin: 0; border: 0; }
.check-group legend { margin-bottom: var(--s-3); padding: 0; font-weight: 700; color: var(--c-navy); }
/* Consent row — once, above the submit button */
.consent { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.consent a { display: inline-block; margin-top: var(--s-1); font-weight: 700; color: var(--c-navy); }

.form-grid { display: grid; gap: var(--s-10) var(--s-8); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .field--full { grid-column: 1 / -1; } }

/* Inline email form — footer newsletter */
.inline-form { display: flex; max-width: 16.5rem; border: var(--border) var(--c-white); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.inline-form input { flex: 1; min-width: 0; padding: var(--s-3) var(--s-4); border: 0; background: transparent; color: var(--c-white); font-size: var(--fs-2xs); }
.inline-form input::placeholder { color: var(--c-white); }
.inline-form input:focus-visible { outline: none; }
.inline-form button { position: relative; isolation: isolate; padding-inline: var(--s-6); border: 0; background: var(--c-white); color: var(--c-navy-deep); font-size: var(--fs-3xs); font-weight: 500; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
/* Same gold fill as the buttons */
.inline-form button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-gold); clip-path: inset(100% 0 0 0); transition: clip-path var(--t-fast) var(--ease-out); }
.inline-form button:focus-visible::before { clip-path: inset(0); transition-duration: var(--t-fill); }
@media (hover: hover) and (pointer: fine) {
	.inline-form button:hover::before { clip-path: inset(0); transition-duration: var(--t-fill); }
}
.inline-form button:focus-visible { outline-offset: -4px; outline-color: var(--c-navy-deep); }
/* Focus and error draw a 2px border: the extra 1px is an inset shadow, so the row does not move */
.inline-form:focus-within, .inline-form.is-focus { border-color: var(--c-focus); box-shadow: inset 0 0 0 1px var(--c-focus); outline: none; }
.inline-form.is-error { border-color: var(--c-error-bg); box-shadow: inset 0 0 0 1px var(--c-error-bg); }
.inline-form + .field__error { margin-top: var(--s-2); color: var(--c-error-bg); }
.inline-success { display: flex; gap: var(--s-2); max-width: 16.5rem; font-size: var(--fs-xs); line-height: var(--lh-snug); }
.inline-success, .form-notice {
	transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
@starting-style { .inline-success, .form-notice { opacity: 0; transform: translateY(8px); } }
.inline-success::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--c-success-bg); -webkit-mask: var(--i-success) center / contain no-repeat; mask: var(--i-success) center / contain no-repeat; }

/* Notice — status after an action. Inline next to the content, or a banner across a form or page.
   The icon and the words carry the meaning; color only supports them. */
.notice {
	--notice: var(--c-navy);
	display: flex;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-left: 2px solid var(--notice);
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}
.notice::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--notice); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.notice--success { --notice: var(--c-success); background: var(--c-success-bg); }
.notice--success::before { -webkit-mask-image: var(--i-success); mask-image: var(--i-success); }
.notice--error { --notice: var(--c-error); background: var(--c-error-bg); }
.notice--error::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.notice > * + * { margin-top: var(--s-1); }
.notice__title { font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-body); color: var(--notice); }
.notice--info .notice__title { color: var(--c-navy); }
.notice--banner { gap: var(--s-4); padding: var(--s-4) var(--s-6); border-left: 0; }
.notice--banner::before { width: 1.5rem; height: 1.5rem; }
.form-notice { margin-bottom: var(--s-10); }

/* Loading — skeleton when the layout is known, spinner for short waits. Motion stops for reduced motion. */
.skeleton { display: block; height: var(--s-4); background: var(--c-disc); animation: lp-pulse 1.4s var(--ease) infinite alternate; }
.skeleton--title { height: var(--s-8); width: 70%; }
.skeleton--media { height: auto; aspect-ratio: 376 / 248; }
.spinner { display: inline-block; flex: none; width: 2rem; height: 2rem; border: 3px solid var(--c-line); border-top-color: var(--c-navy); border-radius: var(--radius-full); animation: lp-spin 0.8s linear infinite; }
.spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }
.loading { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); }
@keyframes lp-pulse { from { opacity: 1; } to { opacity: 0.45; } }
@keyframes lp-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .skeleton, .spinner { animation: none; } .timeline__progress { transition: none; } }

/* Timeline tabs — horizontal rail with dots; a panel below shows the active item */
.timeline { --dot: 0.75rem; }
.timeline__rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; list-style: none; }
.timeline__rail::before { content: ""; position: absolute; top: calc(var(--dot) + var(--s-4)); left: 0; right: 0; height: 1px; background: var(--c-on-navy-line); }
/* Gold line from the start of the rail to the active dot. main.js sets --p (0 to 1) on the line.
   It moves on transform only, with a slow ease-in-out, so it trails the dot like a pen stroke. */
.timeline__progress {
	position: absolute;
	top: calc(var(--dot) + var(--s-4));
	left: 0;
	right: 0;
	height: 1px;
	background: var(--c-gold);
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
	transition: transform 600ms var(--ease-in-out);
	pointer-events: none;
}
.timeline__tab {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: var(--s-2);
	width: 100%;
	padding: 0 var(--s-2);
	border: 0;
	background: none;
	border-radius: var(--radius-sm);
	color: var(--c-white);
	text-align: center;
	cursor: pointer;
	transition: transform var(--t-press) var(--ease-out);
}
.timeline__tab:focus-visible, .timeline__tab.is-focus { outline-offset: 0; }
.timeline__dot { width: var(--dot); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--c-slate); transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
/* The tick is always 32px tall and scales to half when inactive, so the change runs on transform, not height.
   The number and label of an inactive tab move up by the same 16px, so the layout matches the design. */
.timeline__tick { width: 1px; height: var(--s-8); background: var(--c-slate); transform: scaleY(0.5); transform-origin: top; transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease); }
.timeline__num { font-size: var(--fs-3xs); font-weight: 900; color: var(--c-mist-strong); transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); }
.timeline__label { transition: transform var(--t-base) var(--ease-out); }
.timeline__tab:not([aria-selected="true"]) :is(.timeline__num, .timeline__label) { transform: translateY(calc(-1 * var(--s-4))); }
.timeline__label { font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-snug); }
/* Hover on an inactive tab: dot, tick and number turn white */
.timeline__tab:is(:hover, .is-hover):not([aria-selected="true"]) .timeline__dot { border-color: var(--c-white); }
.timeline__tab:is(:hover, .is-hover):not([aria-selected="true"]) .timeline__tick { background: var(--c-white); }
.timeline__tab:is(:hover, .is-hover):not([aria-selected="true"]) .timeline__num { color: var(--c-white); }
.timeline__tab[aria-selected="true"] .timeline__dot { background: var(--c-gold); border-color: var(--c-gold); box-shadow: 0 0 0 2px var(--c-navy-deep), 0 0 0 3px var(--c-gold); }
.timeline__tab[aria-selected="true"] .timeline__tick { transform: none; background: var(--c-gold); }
.timeline__tab[aria-selected="true"] .timeline__num { color: var(--c-gold); }
/* All panels share one grid cell, so the block keeps the height of the tallest panel
   and the page below does not jump when a shorter step shows. */
.timeline { display: grid; grid-template-columns: minmax(0, 1fr); }
.timeline__rail { grid-row: 1; }
.timeline__panel { grid-area: 2 / 1; margin-top: var(--s-16); }
/* A hidden panel keeps its space. visibility: hidden also keeps it out of focus and the accessibility tree. */
.timeline__panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(20px); transition: none; }
/* main.js fades the old panel out and holds the space empty for a beat; then the new panel rises 20px from below.
   The rise uses a softer curve and runs longer than the fade, so the eye sees the text travel up while it appears.
   Keyboard changes skip both (main.js sets .is-instant). */
.timeline__panel { transition: opacity 360ms var(--ease), transform 560ms cubic-bezier(0.25, 1, 0.5, 1); }
.timeline__detail { display: grid; gap: var(--s-6) var(--col-gap); }
@media (min-width: 48rem) { .timeline__detail { grid-template-columns: 22rem 1fr; } }
.timeline__detail h3 { margin-top: var(--s-6); font-size: var(--fs-md); }
.timeline__detail .callout { margin-top: var(--s-8); }
@media (max-width: 48rem) {
	.timeline__rail { grid-auto-flow: row; gap: var(--s-4); }
	.timeline__rail::before { top: 0; bottom: 0; left: calc(var(--dot) / 2); right: auto; width: 1px; height: auto; }
	.timeline__tab { grid-template-columns: var(--dot) auto 1fr; justify-items: start; align-items: center; column-gap: var(--s-3); text-align: left; padding: 0; }
	.timeline__progress { top: 0; bottom: 0; left: calc(var(--dot) / 2); right: auto; width: 1px; height: auto; transform: scaleY(var(--p, 0)); transform-origin: center top; }
	.timeline__tick { display: none; }
	.timeline__tab:not([aria-selected="true"]) :is(.timeline__num, .timeline__label) { transform: none; }
}

/* Callout — gold rule, used for "What this means for you" */
.callout { padding-left: var(--s-5); border-left: 1px solid var(--c-on-navy-line); }
.callout__label { font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; color: var(--accent); }
.callout__text { margin-top: var(--s-2); font-style: italic; }

/* Tag — small uppercase label for a topic or audience. Outline or filled. */
.tag { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-2); border: var(--border) var(--c-navy); color: var(--c-navy); font-size: var(--fs-2xs); font-weight: 700; line-height: var(--lh-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; }
.tag--filled { background: var(--c-navy); color: var(--c-white); }
.on-navy .tag, .tag--on-navy { border-color: var(--c-white); color: var(--c-white); }

/* Divider — a 1px line, or a short gold accent under a heading or number */
.divider { display: block; width: 100%; height: 1px; margin: 0; border: 0; background: var(--c-line); }
.on-navy .divider { background: var(--c-on-navy-line); }
.divider--accent, .on-navy .divider--accent { width: var(--s-12); height: 2px; background: var(--c-gold); }

/* Breadcrumb — above the page title on inner pages */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0; list-style: none; font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: ""; width: 0.875rem; height: 0.875rem; background: var(--c-stone); -webkit-mask: var(--i-chevron-right) center / contain no-repeat; mask: var(--i-chevron-right) center / contain no-repeat; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { font-weight: 700; color: var(--c-navy); }
.breadcrumb--on-navy ol, .on-navy .breadcrumb ol { color: var(--c-mist-strong); }
.breadcrumb--on-navy li + li::before, .on-navy .breadcrumb li + li::before { background: var(--c-mist-strong); }
.breadcrumb--on-navy [aria-current], .on-navy .breadcrumb [aria-current] { color: var(--c-white); }

/* Pagination — styles the markup of paginate_links() and the_posts_pagination() */
.pagination .nav-links, .pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.pagination a.page-numbers, .pagination span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 3rem;
	height: 3rem;
	padding-inline: var(--s-2);
	border: var(--border) transparent;
	color: var(--c-ink);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pagination a.page-numbers:hover { border-color: var(--c-line); color: var(--c-navy); }
.pagination .page-numbers.current { background: var(--c-navy); color: var(--c-white); }
.pagination .page-numbers:is(.prev, .next) { border-color: var(--c-line); color: var(--c-navy); }
.pagination .page-numbers.next { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pagination .page-numbers.prev:hover { border-color: var(--c-navy); color: var(--c-navy); }
.pagination .page-numbers.next:hover { border-color: var(--c-indigo); background: var(--c-indigo); color: var(--c-white); }
.pagination .dots { color: var(--c-ink); }
.pagination svg { width: 1.125rem; height: 1.125rem; }

/* Stat block — proof in numbers. Three or four in a row, never one alone. */
.stats { display: grid; gap: var(--s-10) var(--s-6); padding: 0; margin: 0; list-style: none; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.stat { display: grid; gap: var(--s-4); align-content: start; }
.stat__num { font-family: var(--f-display); font-size: var(--fs-display); font-weight: 400; line-height: 1.13; color: var(--heading-color, var(--c-navy)); }
.stat__num::after { content: ""; display: block; width: var(--s-10); height: 2px; margin-top: var(--s-4); background: var(--c-gold); }
.stat__label { color: var(--c-ink); }
.on-navy .stat__label, .section--navy .stat__label, .stat--on-navy .stat__label { color: var(--c-mist-strong); }
.stat--on-navy .stat__num { color: var(--c-white); }

/* Three-up card grid — testimonial, insight and team cards (376px at 1366, 24px gap) */
.grid-3 { display: grid; gap: var(--s-10) var(--s-6); }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Testimonial card — 1px line border, never a shadow */
.testimonial { display: flex; flex-direction: column; gap: var(--s-6); margin: 0; padding: var(--s-10); border: var(--border) var(--c-line); background: var(--c-white); }
.testimonial::before { content: ""; width: var(--s-8); height: var(--s-8); background: var(--c-gold-ink); -webkit-mask: var(--i-quote) center / contain no-repeat; mask: var(--i-quote) center / contain no-repeat; }
.testimonial__quote { flex: 1; font-family: var(--f-display); font-size: var(--fs-h4); line-height: var(--lh-body); color: var(--c-navy); }
.testimonial__person { display: flex; align-items: center; gap: var(--s-4); padding-top: var(--s-6); border-top: var(--border) var(--c-line); }
.testimonial__avatar { flex: none; width: var(--s-12); height: var(--s-12); border-radius: var(--radius-full); object-fit: cover; }
.testimonial__name { display: block; font-weight: 700; color: var(--c-navy); }
.testimonial__role { display: block; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--c-ink); }

/* Insight card — article teaser for a future blog */
.insight { position: relative; display: grid; gap: var(--s-6); align-content: start; }
.insight__media { display: block; aspect-ratio: 376 / 248; overflow: hidden; background: var(--c-disc); }
.insight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.insight:hover .insight__media img { transform: scale(1.04); transition-duration: var(--t-slow); }
}
.insight__body { display: grid; gap: var(--s-3); justify-items: start; }
.insight__cat { font-size: var(--fs-xs); font-weight: 700; line-height: 1.15; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-gold-ink); }
.insight__title { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-body); color: var(--c-navy); }
.insight__title a { text-decoration: none; }
.insight__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.insight__meta { font-size: var(--fs-xs); color: var(--c-ink); }
.insight .read-more { margin-top: var(--s-2); }

/* Team member card — portrait, name, role, one social link */
.team { display: grid; gap: var(--s-6); align-content: start; }
.team__photo { aspect-ratio: 376 / 440; overflow: hidden; background: var(--c-disc); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__body { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.team__name { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-body); color: var(--c-navy); }
.team__role { margin-top: var(--s-1); color: var(--c-ink); }
.team__social { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: var(--border) var(--c-line); color: var(--c-navy); transition: border-color var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out); }
.team__social:hover { border-color: var(--c-navy); }
.team__social svg { width: 1rem; height: 1rem; }

/* 6. Site chrome =========================================================== */

/* Header (XD: "Base" 1366x118). It is fixed and floats over the page.
   On a page that opens with a hero (body.has-hero) it is a glass bar: navy at 2% with a 30px blur.
   Past the hero, main.js adds .is-scrolled and the bar turns navy, so white links stay readable on light sections.
   Pages without a hero get a solid navy bar and the main area starts below it. */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: var(--c-navy-deep); color: var(--c-white);
	transition: background-color var(--t-slow) var(--ease);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* The blur sits on a layer, not on the header: backdrop-filter on the header would trap the fixed mobile menu inside it. */
.has-hero .site-header { background: none; }
.has-hero .site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--c-header-glass); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
	transition: background-color var(--t-slow) var(--ease);
}
.has-hero .site-header.is-scrolled::before { background: var(--c-header-scrolled); }
.site-main { padding-top: var(--header-h); }
.has-hero .site-main { padding-top: 0; }
/* XD: logo 80px from the left edge, Contact 64px from the right, at 1366. The row stops growing at 1366. */
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
	max-width: 85.375rem; min-height: var(--header-h); margin-inline: auto;
	padding-inline: clamp(1.25rem, 5.86vw, 5rem) clamp(1.25rem, 4.69vw, 4rem);
}
.site-header__logo { display: block; width: 6.625rem; color: var(--c-white); }
.site-header__logo img { width: 100%; height: auto; }
@media (max-width: 64rem) { .site-header__logo { width: 4.75rem; } }

.site-nav__list { display: flex; align-items: center; gap: var(--s-8); padding: 0; list-style: none; }
.site-nav__list a { position: relative; font-size: var(--fs-xs); font-weight: 500; text-decoration: none; text-underline-offset: 4px; }
/* Active item (XD): white label, underlined */
.site-nav__list > li.current-menu-item > a { text-decoration: underline; }
.site-nav__list > li:last-child { margin-left: var(--s-2); }
.site-nav__list > li:last-child > a { display: inline-block; padding: var(--s-2) 1.375rem; border: var(--border) var(--c-white); isolation: isolate; transition: color var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out); }
/* Contact fill: a white layer rises from the bottom edge. It is a clip, so the border never moves. */
.site-nav__list > li:last-child > a::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-white);
	clip-path: inset(100% 0 0 0); transition: clip-path var(--t-base) var(--ease-out);
}
.site-nav__list > li:last-child > a:is(:hover, :focus-visible) { color: var(--c-navy); transition-duration: var(--t-fill-ink); }
.site-nav__list > li:last-child > a:is(:hover, :focus-visible)::before { clip-path: inset(0); transition-duration: var(--t-fill); }

/* Desktop hover. The underline draws in from the left and leaves to the right, so the eye
   follows one line through the menu. The other items step back, which keeps the one under the
   pointer clear. Mouse only: a touch tap must not leave a hover state behind. */
@media (min-width: 68.0625rem) {
	.site-nav__list > li:not(:last-child) > a { display: inline-block; transition: transform var(--t-press) var(--ease-out), opacity var(--t-base) var(--ease), color var(--t-fast) var(--ease); }
	.site-nav__list > li:not(:last-child, .current-menu-item) > a::after {
		content: ""; position: absolute; left: 0; right: 0; top: calc(100% + var(--s-1)); height: 1px;
		background: currentColor; transform: scaleX(0); transform-origin: right center;
		transition: transform var(--t-base) var(--ease-out);
	}
	.site-nav__list > li:not(:last-child, .current-menu-item) > a:focus-visible::after { transform: none; transform-origin: left center; }
}
@media (min-width: 68.0625rem) and (prefers-reduced-motion: no-preference) {
	.site-nav__list a:active { transform: scale(var(--press)); }
}
@media (min-width: 68.0625rem) and (hover: hover) and (pointer: fine) {
	.site-nav__list > li:not(:last-child, .current-menu-item) > a:hover::after { transform: none; transform-origin: left center; transition-duration: var(--t-fill); }
	.site-nav__list:has(> li:not(:last-child) > a:hover) > li:not(:last-child) > a:not(:hover) { opacity: 0.55; }
}

.site-header__toggle { display: none; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
/* Burger to X: the outer bars slide to the middle and turn; the middle bar fades */
.site-header__bars, .site-header__bars::before, .site-header__bars::after {
	display: block; width: 1.5rem; height: 2px; margin-inline: auto; background: currentColor;
	transition: transform 240ms var(--ease-in-out), background-color var(--t-fast) var(--ease);
}
.site-header__bars { position: relative; }
.site-header__bars::before, .site-header__bars::after { content: ""; position: absolute; left: 0; }
.site-header__bars::before { top: -7px; }
.site-header__bars::after { top: 7px; }
[aria-expanded="true"] .site-header__bars { background: transparent; }
[aria-expanded="true"] .site-header__bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .site-header__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 68rem) {
	.site-header__toggle { display: block; }
	.site-nav {
		position: fixed; inset: var(--header-h) 0 0;
		padding: var(--s-8) var(--gutter);
		background: var(--c-navy-deep);
		visibility: hidden; opacity: 0;
		transform: translateY(-0.75rem);
		/* Close: fast. Visibility flips after the fade so the menu stays readable while it goes. */
		transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s var(--t-base);
		overflow-y: auto;
	}
	/* Open: the drawer curve, a little slower, and the items follow 50ms apart */
	.site-nav.is-open {
		visibility: visible; opacity: 1; transform: none;
		transition: opacity var(--t-drawer) var(--ease-drawer), transform var(--t-drawer) var(--ease-drawer), visibility 0s;
	}
	.site-nav__list > li { opacity: 0; transform: translateY(0.5rem); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
	.site-nav.is-open .site-nav__list > li { opacity: 1; transform: none; transition-duration: 300ms; transition-timing-function: var(--ease-drawer); }
	.site-nav.is-open .site-nav__list > li:nth-child(1) { transition-delay: 60ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: 110ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: 160ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: 210ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: 260ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(n+6) { transition-delay: 310ms; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
	.site-nav__list a { font-size: var(--fs-md); }
	.site-nav__list > li:last-child { margin: var(--s-4) 0 0; }
}

.site-footer { padding-block: var(--s-16) var(--s-4); background: var(--c-ink); color: var(--c-surface); font-size: var(--fs-sm); }
.site-footer__grid { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .site-footer__grid { grid-template-columns: 13rem 1.1fr 0.9fr 0.8fr 1.4fr; gap: var(--s-8); } }
.site-footer__logo { display: block; width: 12.75rem; }
.site-footer__logo img { width: 100%; height: auto; }
.site-footer__list { display: grid; gap: var(--s-5); padding: 0; margin-top: var(--s-8); list-style: none; }
.site-footer__address { margin-top: var(--s-8); font-style: normal; line-height: 1.5; }
.site-footer a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer__social a { transition: color var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out); }
.site-footer a:hover { color: var(--c-gold); }
.site-footer__social a { display: inline-flex; align-items: center; gap: var(--s-6); }
.site-footer__social svg { width: 0.875rem; height: 0.875rem; }
.site-footer__news { margin-top: var(--s-8); }
.site-footer__news p { margin-block: var(--s-2) var(--s-4); }
.site-footer__legal { margin-top: var(--s-12); padding-top: var(--s-4); border-top: 1px solid var(--c-mist); text-align: center; font-size: var(--fs-2xs); }

/* 7. Sections ============================================================== */

/* Hero slider — full-bleed image, headline slides, pager */
/* XD: the hero fills the first screen (768 at 1366, 16:9) and the header floats over it */
.hero { --heading-color: var(--c-white); position: relative; display: grid; min-height: clamp(36rem, 100svh, 56.25vw); color: var(--c-white); overflow: hidden; background: var(--c-ink); }
.hero__media, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay-photo), transparent 60%); }
/* XD: headline top at 233 (115 below the header), pager 98 above the bottom edge */
.hero__inner { position: relative; display: grid; align-content: space-between; gap: var(--s-12); padding-block: calc(var(--header-h) + clamp(3rem, 8.4vw, 7.1875rem)) clamp(3rem, 7.2vw, 6.125rem); }
.hero__slides { display: grid; }
/* Slide change. The old slide lifts, blurs and fades in 350ms. The new one enters word by word:
   each word rises out of a soft blur, 45ms after the one before, and the italic line follows.
   main.js wraps the words and sets --i. Without it, the whole slide fades as one.
   Words reset only once their slide is hidden, so an interrupted change never jumps. */
.hero { --slide-interval: 6s; }
.hero__slide {
	grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); filter: blur(4px);
	transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out), filter 350ms var(--ease-out), visibility 0s 450ms;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition: none; }
.hero__slide:not(.is-split).is-active { transition: opacity 900ms var(--ease-out) 200ms; }
.hero__word { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(8px); transition: opacity 0s 450ms, transform 0s 450ms, filter 0s 450ms; }
.is-active .hero__word {
	opacity: 1; transform: none; filter: none;
	--delay: calc(250ms + var(--i) * 45ms);
	transition: opacity 700ms var(--ease-out) var(--delay), transform var(--t-slide) var(--ease-out) var(--delay), filter 800ms var(--ease-out) var(--delay);
}
.hero__slide .display-italic { margin-top: var(--s-8); }
.hero__controls { display: flex; align-items: center; justify-content: space-between; }
.pager { display: flex; align-items: center; gap: var(--s-4); }
.pager__num { min-width: 1.5rem; font-size: var(--fs-base); font-weight: 900; color: var(--c-periwinkle); }
.pager__bar { position: relative; width: 3rem; height: 2px; padding: 0; border: 0; background: var(--c-pager-bar); cursor: pointer; transition: background-color var(--t-base) var(--ease), transform var(--t-press) var(--ease-out); }
.pager__bar[aria-current="true"] { background: var(--c-periwinkle); }
.pager__bar::before { content: ""; display: block; height: 1.5rem; margin-top: -0.75rem; }
/* Autoplay progress: the current bar fills from the left over one interval (linear, like a clock).
   main.js moves to the next slide when the fill ends, and pauses it on hover, keyboard focus and hidden tabs. */
.pager__bar::after { content: ""; position: absolute; inset: 0; background: var(--c-periwinkle); transform: scaleX(0); transform-origin: left; }
.is-autoplay .pager__bar[aria-current="true"] { background: var(--c-pager-bar); }
.is-autoplay .pager__bar[aria-current="true"]::after { animation: lp-progress var(--slide-interval) linear both; }
.is-autoplay.is-paused .pager__bar::after { animation-play-state: paused; }
@keyframes lp-progress { to { transform: scaleX(1); } }
/* Sound toggle (XD: bottom right of the hero). The slash shows while the video is muted. */
.hero__sound { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; padding: 0; border: 0; background: none; color: var(--c-white); cursor: pointer; transition: opacity var(--t-fast) var(--ease), transform var(--t-press) var(--ease-out); }
.hero__sound svg { width: 1.65rem; height: auto; overflow: visible; }
.hero__sound svg path:first-child { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hero__sound[aria-pressed="true"] svg path:first-child { display: none; }
.hero__sound:hover { opacity: 0.75; }
.hero__sound:active { transform: scale(var(--press)); }

/* Readiness path — four icon discs on a rail */
.readiness-wrap { position: relative; }
.readiness { display: grid; gap: var(--s-10) var(--s-8); padding: 0; list-style: none; }
.readiness__rail { display: none; }
@media (min-width: 40rem) { .readiness { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
	.readiness { grid-template-columns: repeat(4, 1fr); }
	/* The rail runs from the centre of the first disc to the centre of the last.
	   Each disc sits var(--s-6) into its column; three columns plus three gaps lie between them. */
	.readiness__rail {
		display: block;
		position: absolute;
		top: calc(2.75rem - 1.5px);
		left: calc(var(--s-6) + 2.75rem);
		width: calc(75% + 0.75 * var(--s-8));
		height: 3px;
		background: var(--c-disc);
		transform-origin: left center;
	}
}
.readiness__fill,
.readiness__head { display: none; }
.readiness__item .disc { position: relative; z-index: 1; }
.readiness__item { position: relative; }
.readiness__item .disc { margin: 0 0 var(--s-8) var(--s-6); }
.readiness__item h3 { color: var(--c-navy); }
.readiness__item p { margin-top: var(--s-4); max-width: 14rem; }

/* Split — half navy text, half full-bleed image */
.split { display: grid; background: var(--c-navy-deep); color: var(--c-white); --heading-color: var(--c-white); }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; min-height: 40rem; } .split--wide-text { grid-template-columns: 732fr 634fr; } }
.split__body { position: relative; display: grid; align-content: center; padding: var(--section-y) var(--gutter); padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); overflow: clip; }
@media (min-width: 56rem) { .split__body { padding-right: var(--col-gap); } }
.split__body > .stack { max-width: 28rem; }
.split__media { position: relative; min-height: 22rem; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split--media-left .split__media { order: -1; }
@media (min-width: 56rem) { .split--media-left .split__body { padding-left: var(--col-gap); padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); } }

/* Step band — three numbered steps with photo circles */
.steps { background: var(--c-navy); color: var(--c-white); }
.steps__list { display: grid; padding: 0; list-style: none; }
@media (min-width: 56rem) { .steps__list { grid-template-columns: repeat(3, 1fr); } }
.steps__item { display: flex; gap: var(--s-6); padding: var(--s-5) var(--gutter); }
@media (min-width: 56rem) {
	.steps__item { padding: var(--s-5) var(--s-8) var(--s-8); }
	.steps__item + .steps__item { border-left: 1px solid var(--c-on-navy-line); }
	.steps__item:first-child { padding-left: max(var(--s-8), calc((100vw - var(--container)) / 2 - 2.5rem)); }
}
.steps__item h3 { margin-top: var(--s-4); font-size: var(--fs-base); }
.steps__item p { margin-top: var(--s-2); }

/* Image band — full-bleed photo with centered statement */
.band { position: relative; display: grid; place-items: center; min-height: clamp(30rem, 51vw, 43.5rem); padding-block: var(--section-y); color: var(--c-white); text-align: center; --heading-color: var(--c-white); }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after { content: ""; position: absolute; inset: 0; background: var(--overlay-photo-soft); }
.band__inner { position: relative; max-width: 52rem; }
.band__icon { width: 2.25rem; margin: 0 auto var(--s-8); color: var(--c-periwinkle); }
.band__inner .h1 { margin-top: var(--s-4); }
.band__inner p:last-child { max-width: 39rem; margin: var(--s-8) auto 0; }

/* Feature rows — alternating image and numbered text */
.features { display: grid; gap: var(--s-12); }
.feature { display: grid; gap: var(--s-6) var(--col-gap); align-items: start; }
@media (min-width: 48rem) {
	.feature { grid-template-columns: 1fr 1fr; }
	.feature:nth-child(even) .feature__media { order: 2; }
	.feature__body { padding-top: var(--s-20); }
}
.feature__media { aspect-ratio: 552 / 484; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body .title { margin-top: var(--s-2); }
.feature__body .lead { margin-top: var(--s-5); max-width: 26rem; }

/* Quote — large serif statement beside body copy */
.quote { display: grid; gap: var(--s-10) var(--col-gap); }
@media (min-width: 56rem) { .quote { grid-template-columns: 1fr 1fr; } }
.quote__mark { font-family: var(--f-body); font-size: 8.875rem; font-weight: 700; line-height: 0.6; height: 3.25rem; }
.quote__text { margin-top: var(--s-10); max-width: 26rem; }
.quote__body { padding-top: var(--s-6); }
.quote__body > * + * { margin-top: var(--s-6); }

/* Image card — photo, serif title, arrow tile */
.cards { display: grid; gap: var(--s-12) var(--col-gap); }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; display: block; aspect-ratio: 552 / 567; overflow: hidden; color: var(--c-white); text-decoration: none; }
.card { transition: transform var(--t-press) var(--ease-out); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, var(--overlay-photo)); }
.card__title { position: absolute; left: var(--s-10); bottom: var(--s-8); z-index: 1; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; }
.card .arrow-tile { position: absolute; right: 0; bottom: 0; z-index: 1; }
/* Hover: photo grows 4%, a navy veil appears, the title gets a gold rule, the tile fills gold.
   The base rules hold the exit timing (fast); the hover rules hold the enter timing (slower). */
.card::before { content: ""; position: absolute; inset: 0; background: var(--c-veil); opacity: 0; transition: opacity var(--t-base) var(--ease); }
.card__title::after { content: ""; position: absolute; left: 0; top: calc(100% + var(--s-2)); width: var(--s-12); height: 2px; background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease-out); }
.card.is-hover img { transform: scale(1.04); }
.card.is-hover::before { opacity: 1; }
.card.is-hover .card__title::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
	.card:hover img { transform: scale(1.04); transition-duration: var(--t-slow); }
	.card:hover::before { opacity: 1; transition-duration: 300ms; }
	.card:hover .card__title::after { transform: none; transition-duration: 350ms; transition-delay: 60ms; }
}

/* CTA band — grey pillar photo, centered */
.cta { position: relative; padding-block: var(--s-20); text-align: center; background: var(--c-surface); overflow: clip; }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__inner { position: relative; }
.cta__inner .lead-lg { max-width: 54rem; margin: var(--s-8) auto; }
.cta__inner .lead-lg:has(+ *) { margin-bottom: var(--s-8); }

/* Vertical icon steps — advisors Seek and Find */
.vsteps { display: grid; gap: var(--s-10); padding: 0; list-style: none; }
.vsteps__item { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-6); }
.vsteps__item:not(:last-child)::before { content: ""; position: absolute; top: 6.5rem; bottom: calc(-1 * var(--s-10)); left: 3.25rem; width: 1px; background: var(--c-white); }
.vsteps__item h3 { margin-top: var(--s-4); font-size: var(--fs-base); text-transform: uppercase; }
.vsteps__item p { margin-top: var(--s-4); max-width: 16rem; }

/* 8. Style guide page ====================================================== */

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-4); }
.sg-swatch { border: 1px solid var(--c-line); font-size: var(--fs-2xs); }
.sg-swatch span { display: block; height: 5rem; }
.sg-swatch p { padding: var(--s-2) var(--s-3); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.sg-block { padding: var(--s-10); border: 1px dashed var(--c-line); }
.sg-block + .sg-block { margin-top: var(--s-6); }
.sg-label { margin-bottom: var(--s-4); font: 700 var(--fs-2xs) / 1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink); }
.sg-block.on-navy .sg-label, .sg-dark .sg-label { color: var(--c-mist-strong); }
.sg-dark { background: var(--c-navy-deep); color: var(--c-white); }
.sg-ink { background: var(--c-ink); color: var(--c-white); }
.sg-grid { display: grid; align-items: start; gap: var(--s-8); }
.grid-2 > .sg-block + .sg-block { margin-top: 0; }
@media (min-width: 48rem) { .sg-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.sg-state > .sg-label { margin-bottom: var(--s-3); }

/* Audience detail — back tile sits top right of the text column */
.split--audience { min-height: calc(100svh - var(--header-h)); max-height: 48rem; }
.split--audience .split__media { min-height: 20rem; }
.split__back { position: absolute; top: var(--s-8); right: var(--gutter); background: var(--c-navy); }
.split__back:hover { background: var(--c-indigo); }
.split__back svg { width: 0.875rem; }

/* Page hero — inner pages. Full-bleed photo, text left */
.page-hero { position: relative; display: grid; align-items: center; min-height: clamp(36rem, 100svh, 56.25vw); color: var(--c-white); --heading-color: var(--c-white); background: var(--c-ink); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay-photo), transparent 70%); }
.page-hero__inner { position: relative; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-16); }
.page-hero__inner > p:not(.eyebrow) { max-width: 37rem; }

/* FAQ layout — heading left, accordion right */
.faq { display: grid; gap: var(--s-10) var(--col-gap); align-items: start; }
@media (min-width: 56rem) { .faq { grid-template-columns: 22rem 1fr; } }
.faq .h1 { font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.625rem); }   /* XD: Presti Text Bold 42, three lines */
.eyebrow--gold-muted { color: var(--c-gold-muted); }

/* Section with photo background tinted navy */
.section--image { color: var(--c-white); }
.section__bg { position: absolute; inset: 0; background: var(--c-navy); }
.section__bg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.55; }
.section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay-navy), var(--overlay-navy-soft)); }
.section--image .container { position: relative; align-items: center; }

/* Contact — navy intro left, white form panel right */
.contact { background: var(--c-navy-deep); }
.contact .split__body { align-content: start; }
.contact__intro { font-weight: 700; font-size: var(--fs-display); line-height: 1.1; }
.contact__panel { --heading-color: var(--c-navy); padding: var(--s-16) var(--gutter) var(--s-10); background: var(--c-white); }
@media (min-width: 56rem) { .contact__panel { padding-left: var(--col-gap); padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); } }
.contact__panel .h1 { margin-bottom: var(--s-12); }
.contact__submit { font-size: var(--fs-sm); }   /* Contact frame: 50px tall, 16px label */
/* Quiet links: ink, not stone or slate, so they pass AA on white */
.contact__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-10); margin-top: var(--s-16); padding: 0; list-style: none; color: var(--c-ink); font-size: var(--fs-base); }
.contact__links a { text-decoration: none; }
.contact__links a:hover { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }