/* LedgerShore — site stylesheet
   Palette: Midnight Navy #101D35 · Deep Sapphire #123B63 · Muted Gold #C5A46D · Warm Ivory #F7F6F2 · Charcoal #292F38
   Type: Cormorant Garamond (display headings) · IBM Plex Sans (body, labels, tabular figures)
   The logo is always the white version, on navy. */

/* ---------- fonts (self-hosted: no third-party requests) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  /* palette: the five brand colours, each with one job */
  --navy: #101D35;        /* Midnight Navy (primary): header, hero, dark bands, footer, headings, primary buttons */
  --sapphire: #123B63;    /* Deep Sapphire (secondary): links, hover states, depth inside dark areas */
  --gold: #C5A46D;        /* Muted Gold (accent): buttons and text on dark, hairline rules everywhere */
  --ivory: #F7F6F2;       /* Warm Ivory (background): the page, and text on dark */
  --charcoal: #292F38;    /* Charcoal (body text) */

  /* shades of the same hues, tuned so text and icons keep their contrast */
  --gold-deep: #7D602F;   /* gold for small text and icons on light backgrounds: 5.4:1 on ivory */
  --gold-soft: #D9BF8F;   /* gold button hover */
  --ivory-deep: #EFECE4;  /* alternate section background */
  --surface: #FFFFFF;     /* cards and panels sitting on ivory */
  --muted: #5A606B;       /* secondary text: 5.8:1 on ivory */
  --line: #E3DED3;        /* hairlines */
  --line-dark: rgba(197, 164, 109, .22); /* hairlines on navy */
  --on-dark: #F7F6F2;
  --on-dark-muted: rgba(247, 246, 242, .78);
  --input-line: #8C8577;  /* form field borders: 3.7:1 on white */
  --line-strong: #DCD5C6; /* hairlines on the deeper ivory */
  --danger: #9B1C2C;      /* errors and negative figures */
  --white: #FFFFFF;
  --ph: #fff1b3;

  --font-head: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-h4: 1.0625rem;
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(2.125rem, 1.45rem + 2.1vw, 3.125rem);
  --fs-h1: clamp(2.625rem, 1.6rem + 3.3vw, 4.375rem);

  --container: 1200px;
  --gutter: clamp(22px, 5vw, 48px);
  --bleed: calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2)); /* from the content edge to the screen edge */
  --section: clamp(84px, 10.5vw, 152px);
  --radius: 2px;
  --header-h: 76px;
  --shadow: 0 1px 2px rgba(16, 29, 53, 0.05), 0 24px 48px -28px rgba(16, 29, 53, 0.32);

  /* motion: one curve and four speeds, used everywhere */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* strong ease-out: anything arriving or answering a pointer */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* for something travelling across the screen */
  --t-press: 120ms;   /* a button being pressed */
  --t-hover: 160ms;   /* hover and focus feedback */
  --t-ui: 220ms;      /* menus, tabs, answers opening */
  --t-enter: 1200ms;  /* the page-top entrance and sections arriving: slow and settled */

  /* letter-spacing for small capitals: one value for labels, one for the lines above headings */
  --track-label: 0.16em;
  --track-wide: 0.22em;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); font-synthesis: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--ivory);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
a { color: var(--sapphire); text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
a:hover { color: var(--navy); text-decoration-color: var(--navy); }
:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 3px; border-radius: 1px; }
.on-navy :focus-visible, .site-header :focus-visible, .hero :focus-visible, .cta-band :focus-visible, .banner :focus-visible, .section--navy :focus-visible, .site-footer :focus-visible, .aside-card--navy :focus-visible { outline-color: var(--gold); }
main:focus { outline: none; }

h1, h2, h3, h4 { color: var(--navy); margin: 0 0 0.6em; text-wrap: balance; }
h1, h2 { font-family: var(--font-head); font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; font-variant-numeric: lining-nums; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.005em; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }
h4 { font-size: var(--fs-h4); line-height: 1.4; }
h1 em, h2 em { font-style: italic; color: var(--gold-deep); }
p { margin: 0 0 1em; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
::selection { background: var(--gold); color: var(--navy); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
strong { font-weight: 600; }
small, .small { font-size: var(--fs-small); }
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); max-width: 36em; }
.muted { color: var(--muted); }
.measure { max-width: 42rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ivory); color: var(--navy); padding: 10px 16px; font-weight: 600; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }

/* Placeholder highlight — every [bracketed] value from config.json until you fill it in */
.ph { background: var(--ph); box-shadow: inset 0 -2px 0 #e2b200; color: inherit; border-radius: 2px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .ph, .cta-band .ph, .banner .ph, .on-navy .ph, .site-header .ph { background: rgba(255, 225, 90, 0.22); box-shadow: inset 0 -2px 0 #ffd84a; }

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

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: 1.2; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 1.15em 1.9em; border-radius: var(--radius); border: 1px solid var(--navy);
  background: var(--navy); color: var(--ivory); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-hover) var(--ease);
}
.btn:hover { background: var(--sapphire); border-color: var(--sapphire); color: var(--ivory); text-decoration: none; }
.btn--light { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn--light:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--ivory); }
.btn--outline-light { background: transparent; border-color: rgba(197,164,109,.75); color: var(--ivory); }
.btn--outline-light:hover { background: rgba(197,164,109,.12); border-color: var(--gold); color: var(--ivory); }
.btn--lg { font-size: 0.84375rem; padding: 1.3em 2.2em; }
.btn--small { font-size: 0.75rem; padding: 0.85em 1.3em; }
.btn[disabled] { opacity: .6; cursor: progress; }

.text-link { font-weight: 600; }
/* touch screens: stand-alone links get a taller tap area (at least 24px) without changing how they look */
@media (pointer: coarse) {
  .text-link, .hero__secondary, .cta-band__secondary, .breadcrumb a, .footer__col a, .footer__legal a, .feature h3 a, .contact-list a { position: relative; }
  .text-link::before, .hero__secondary::before, .cta-band__secondary::before, .breadcrumb a::before, .footer__col a::before, .footer__legal a::before, .feature h3 a::before, .contact-list a::before { content: ""; position: absolute; inset: -5px 0; }
}
.kicker, .hero__kicker { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.4rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 2.5rem; }

/* ---------- announcement banner ---------- */
.banner { background: var(--navy); color: var(--on-dark-muted); font-size: var(--fs-small); }
.banner__inner { padding-block: 9px; }
.banner p { margin: 0; text-align: center; }
.banner a { color: var(--gold); font-weight: 600; margin-left: .35em; }

/* ---------- header & navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--ivory); border-bottom: 1px solid var(--line-dark); }
.header__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.brand { display: block; flex: none; }
.brand img { width: 176px; height: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: block; color: var(--ivory); text-decoration: none; font-weight: 500; font-size: 0.90625rem; letter-spacing: 0.03em; padding: 10px 11px; border-radius: 1px; }
/* a gold hairline draws under the word on hover and stays under the current page */
.nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform var(--t-ui) var(--ease); }
.nav__link:hover { color: var(--gold); background: none; }
.nav__link[aria-current="page"], .has-sub:has([aria-current="page"]) > .nav__link { color: var(--gold); }
.nav__link[aria-current="page"]::after, .has-sub:has([aria-current="page"]) > .nav__link::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; margin-left: -6px; background: none; border: 0; color: var(--ivory); cursor: pointer; border-radius: 1px; }
.nav__sub-toggle .icon { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease); }
.nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; list-style: none; margin: 0; padding: 8px;
  background: var(--surface); border-radius: 2px; box-shadow: var(--shadow); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top left;
  transition: opacity var(--t-press) ease, transform var(--t-press) ease, visibility var(--t-press); /* closes quickly */
}
.nav__sub li { margin: 0; }
.nav__sub a { display: block; padding: 11px 14px; color: var(--charcoal); text-decoration: none; border-radius: 1px; font-size: 0.9375rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.nav__sub a:hover { background: var(--ivory-deep); color: var(--navy); }
.nav__sub a[aria-current="page"] { color: var(--navy); font-weight: 600; background: var(--ivory-deep); }
.has-sub.is-open > .nav__sub,
.has-sub:hover > .nav__sub,
.has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility var(--t-ui); }
.nav__cta { flex: none; }
.nav-toggle { display: none; align-items: center; gap: 8px; background: none; border: 1px solid rgba(197,164,109,.55); color: var(--ivory); font: 600 0.8125rem var(--font-body); letter-spacing: var(--track-label); text-transform: uppercase; padding: 9px 14px; border-radius: var(--radius); cursor: pointer; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 8px var(--gutter) 28px; border-top: 1px solid var(--line-dark);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line-dark); }
  .nav__link { flex: 1; padding: 14px 0; font-size: 1.0625rem; }
  .nav__link:hover { background: none; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"], .has-sub:has([aria-current="page"]) > .nav__link { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .nav__sub-toggle { display: none; }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 12px 14px; min-width: 0; width: 100%; }
  .nav__sub a { color: var(--on-dark-muted); padding: 8px 0; }
  .nav__sub a:hover, .nav__sub a[aria-current="page"] { background: none; color: var(--gold); }
  .nav__cta { margin-top: 20px; }
  .brand img { width: 160px; }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; background: radial-gradient(1100px 620px at 88% -12%, rgba(18,59,99,.95), rgba(18,59,99,0) 62%), radial-gradient(700px 500px at -10% 110%, rgba(18,59,99,.55), rgba(18,59,99,0) 60%), var(--navy); color: var(--on-dark-muted); padding: clamp(64px, 9vw, 128px) 0 clamp(120px, 13vw, 190px); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(197,164,109,.22); pointer-events: none; }
.hero::before { width: clamp(320px, 36vw, 560px); aspect-ratio: 1; right: -6vw; top: -14%; }
.hero::after { width: clamp(160px, 16vw, 260px); aspect-ratio: 1; left: -5vw; bottom: -6%; border-color: rgba(197,164,109,.16); }
.hero h1 { color: var(--ivory); max-width: 17em; }
.hero h1 em { color: var(--gold); }
.hero .lead { color: var(--on-dark-muted); }
.hero .kicker, .hero .hero__kicker { color: var(--gold); }
.hero a:not(.btn) { color: var(--ivory); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.hero__tagline { font-size: 0.9375rem; color: var(--gold); margin: 1.1rem 0 0; max-width: 40em; letter-spacing: .01em; }
.hero__secondary { font-weight: 500; font-size: 0.8125rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory); text-decoration-color: var(--gold); }
.hero__secondary:hover { color: var(--gold); text-decoration-color: var(--gold); }
.hero--page { padding-bottom: clamp(104px, 11vw, 150px); }
.hero--page h1 { max-width: 16em; }
.hero--page .lead { max-width: 34em; }
.breadcrumb { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "·"; margin-right: 8px; color: rgba(197,164,109,.7); }
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ivory); }

/* the letterhead swoosh: navy curve, white hairline, navy band */
.swoosh { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(56px, 8vw, 110px); color: var(--ivory); pointer-events: none; }
.swoosh--mist { color: var(--ivory-deep); }
.swoosh__band, .cta-band__curve .swoosh__band { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; }

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

/* ---------- home hero: a clean navy field behind a centred headline ---------- */
.hero--home {
  background:
    radial-gradient(1200px 700px at 92% -14%, rgba(24,66,108,.95), rgba(18,59,99,0) 64%),
    radial-gradient(800px 560px at -8% 112%, rgba(8,16,34,.6), rgba(8,16,34,0) 62%),
    var(--navy);
}
.hero--home::before, .hero--home::after { display: none; }

/* home hero: the headline leads, centred */
.hero--home { display: flex; align-items: center; padding-top: clamp(56px, 7vw, 96px); text-align: center; }
@media (min-width: 901px) { .hero--home { min-height: min(calc(100svh - var(--header-h)), 900px); } }
.hero--home > .container { width: 100%; }
.hero--home .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero--home .hero__copy { max-width: 60rem; margin-inline: auto; }
.hero--home .hero__kicker { margin-bottom: clamp(1.5rem, 2.6vw, 2.5rem); }
.hero--home h1 { font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.25rem); line-height: 1.04; letter-spacing: -0.012em; max-width: none; margin: 0 auto clamp(1.5rem, 2.6vw, 2.25rem); text-wrap: balance; }
.hero--home h1 em { white-space: nowrap; }
@media (min-width: 701px) {
  .hero--home h1 .h1-line, .hero--home h1 em { display: block; }
}
@media (max-width: 480px) { .hero--home h1 em { white-space: normal; } }
.hero--home .lead { font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); max-width: 31em; margin-inline: auto; }
.hero--home .hero__tagline { font-size: clamp(.9375rem, .88rem + .2vw, 1.0625rem); max-width: none; margin: 0 auto; }
.hero--home .hero__tagline::before { content: ""; display: block; width: 72px; height: 1px; margin: clamp(1.5rem, 2.4vw, 2rem) auto clamp(1.25rem, 2vw, 1.6rem); background: var(--gold); opacity: .8; }
.hero--home .actions { margin-top: clamp(2.25rem, 3.6vw, 3rem); justify-content: center; }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section--mist { background: var(--ivory-deep); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--navy { background: radial-gradient(900px 520px at 100% 0%, rgba(18,59,99,.85), rgba(18,59,99,0) 65%), var(--navy); color: var(--on-dark-muted); }
.section--navy h2, .section--navy h3 { color: var(--ivory); }
.section--navy h2 em { color: var(--gold); }
.section--navy .kicker { color: var(--gold); }
.section--navy a:not(.btn) { color: var(--ivory); }
.section-head { max-width: 44rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head::before { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin-bottom: clamp(22px, 2.6vw, 32px); }
.section-head p { color: var(--muted); font-size: 1.125rem; max-width: 38em; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.section-head--split > div { max-width: 46rem; }
.section-foot { margin-top: clamp(28px, 4vw, 44px); }

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--even { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: var(--ivory); }
.trust__list { list-style: none; margin: 0; padding: 26px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; }
.trust__list li { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--muted); max-width: 22rem; }
.trust__list .icon { color: var(--gold-deep); margin-top: 2px; }
.trust__list strong { color: var(--charcoal); }

/* ---------- audience router ---------- */
.router { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.router__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 40px 36px 40px 0; text-decoration: none; color: var(--charcoal); border-top: 1px solid var(--gold); margin-top: -1px; }
.router__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform 320ms var(--ease); }
.router__item:focus-visible::before { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .router__item:hover::before { transform: scaleX(1); transform-origin: left; } }
.router__item + .router__item { padding-left: 36px; border-left: 1px solid var(--line); }
.router__item .icon { width: 28px; height: 28px; color: var(--gold-deep); }
.router__item h3 { margin: 0; }
.router__item p { color: var(--muted); margin: 0; flex: 1; }
.router__go { transition: text-decoration-color var(--t-hover) ease; font-weight: 600; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sapphire); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .45em; }
.router__item:hover { color: var(--charcoal); }
.router__item:hover .router__go { text-decoration-color: var(--navy); }
@media (max-width: 860px) {
  .router { grid-template-columns: 1fr; border-top: 0; }
  .router__item, .router__item + .router__item { padding: 24px 0; border-left: 0; }
}

/* ---------- feature lists ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.feature { display: grid; grid-template-columns: 40px 1fr; gap: 0 18px; padding: 30px 0; border-top: 1px solid var(--line); }
.feature .icon { width: 26px; height: 26px; color: var(--gold-deep); margin-top: 3px; }
.feature h3 { margin-bottom: .35em; font-size: 1.0625rem; }
.feature p { color: var(--muted); margin: 0; }
.feature a { font-weight: 600; }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .features, .features--3 { grid-template-columns: 1fr; } }
.features--1 { grid-template-columns: 1fr; }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li + li { margin-top: .6em; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: currentColor; color: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 13.1c1.7 1 3.2 2.5 4.5 4.6C11.2 11.9 15.1 7.6 20.6 4.1' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 13.1c1.7 1 3.2 2.5 4.5 4.6C11.2 11.9 15.1 7.6 20.6 4.1' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.on-navy .ticks li::before, .section--navy .ticks li::before { color: var(--gold); }
.ticks--cols { columns: 2; column-gap: 40px; }
.ticks--cols li { break-inside: avoid; margin-bottom: .6em; }
.ticks--cols li + li { margin-top: 0; }
@media (max-width: 640px) { .ticks--cols { columns: 1; } }
.ticks--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin: 0; }
.ticks--row li + li { margin-top: 0; }
@media (max-width: 860px) { .ticks--row { grid-template-columns: 1fr; } }

/* panels: used where content groups sit side by side with different weights */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px); }
.section--mist .panel { border-color: var(--line); }
.panel h3 { margin-bottom: .75em; }
.panel--navy { background: var(--navy); color: var(--on-dark-muted); border-color: var(--navy); }
.panel--navy h3, .panel--navy h4 { color: var(--ivory); }
.panel--rule { border: 0; border-top: 1px solid var(--gold); border-radius: 0; padding-inline: 0; background: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table caption { text-align: left; font-size: var(--fs-small); color: var(--muted); padding-bottom: 10px; caption-side: top; }
.table th, .table td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.table thead th { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--navy); background: var(--ivory-deep); border-bottom: 1px solid var(--gold); }
.table tbody th { font-weight: 600; color: var(--charcoal); width: 22%; }
.table--compare td { width: 50%; }
.table--compare thead th.is-us { background: var(--navy); color: var(--gold); }
.table--compare td.is-us { background: rgba(197,164,109,.09); color: var(--charcoal); }
.table--compare td .cell { display: flex; gap: 12px; align-items: flex-start; }
.table--compare td .icon { width: 20px; height: 20px; margin-top: 3px; }
.table--compare td:not(.is-us) { color: var(--muted); }
.table--compare td:not(.is-us) .icon { color: var(--input-line); }
.table--compare td.is-us .icon { color: var(--gold-deep); }
@media (max-width: 720px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; overflow: hidden; }
  .table--stack tbody th { background: var(--ivory-deep); width: 100%; }
  .table--stack td { border-bottom: 1px solid var(--line); }
  .table--stack td:last-child { border-bottom: 0; }
  .table--stack td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
}

/* ---------- numbered steps (only for real sequences) ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); counter-reset: step; position: relative; }
.steps > li { position: relative; margin: 0; counter-increment: step; padding-top: 72px; }
.steps > li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); border: 1px solid var(--gold); color: var(--navy); font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; font-variant-numeric: lining-nums; z-index: 1; }
.section--mist .steps > li::before { background: var(--ivory-deep); }
.steps > li::after { content: ""; position: absolute; top: 24px; left: 60px; right: calc(-1 * clamp(24px, 3vw, 40px) + 12px); height: 1px; background: var(--gold); opacity: .6; transform-origin: left top; }
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: 1.125rem; margin-bottom: .4em; }
.steps p { color: var(--muted); margin: 0; }
.steps__time { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps > li { padding: 0 0 32px 72px; }
  .steps > li::after { top: 52px; bottom: 4px; left: 24px; right: auto; width: 1px; height: auto; }
  .steps > li:last-child { padding-bottom: 0; }
}

/* ---------- vertical timeline (India stages, onboarding) ---------- */
.timeline { list-style: none; padding: 0; margin: 0; counter-reset: stage; }
.timeline > li { counter-increment: stage; display: grid; grid-template-columns: 170px 44px minmax(0, 1fr); gap: 0 20px; margin: 0; position: relative; }
.timeline__when { font-weight: 600; color: var(--gold-deep); font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; padding-top: 14px; text-align: right; }
.timeline__dot { position: relative; display: flex; justify-content: center; }
.timeline__dot::before { content: counter(stage); width: 44px; height: 44px; border-radius: 50%; background: var(--ivory-deep); border: 1px solid var(--gold); color: var(--navy); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; font-variant-numeric: lining-nums; z-index: 1; }
.timeline__dot::after { content: ""; position: absolute; top: 44px; bottom: 0; left: calc(50% - .5px); width: 1px; background: var(--gold); opacity: .6; transform-origin: left top; }
.timeline > li:last-child .timeline__dot::after { display: none; }
.timeline__body { padding: 8px 0 36px; }
.timeline__body h3 { font-size: 1.125rem; margin-bottom: .35em; }
.timeline__body p { color: var(--muted); margin: 0; }
@media (max-width: 700px) {
  .timeline > li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
  .timeline__when { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
  .timeline__dot { grid-column: 1; grid-row: 1 / span 2; }
  .timeline__body { grid-column: 2; padding-top: 2px; }
}

/* ---------- month calendar (bookkeeping) ---------- */
.month { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.month__week { padding: 22px 20px 24px; border-left: 1px solid var(--line); position: relative; }
.month__week:first-child { border-left: 0; }
.month__label { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin: 0 0 .75em; font-size: 1.375rem; font-variant-numeric: lining-nums; }
.month__week ul { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; color: var(--muted); }
.month__week li + li { margin-top: .55em; }
.month__week--close { background: var(--navy); color: var(--on-dark-muted); }
.month__week--close .month__label { color: var(--gold); }
.month__week--close ul { color: var(--on-dark-muted); }
.month__flag { display: inline-block; margin-top: 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; color: var(--navy); background: var(--gold); border-radius: 1px; padding: 4px 9px; }
@media (max-width: 860px) { .month { grid-template-columns: repeat(2, minmax(0, 1fr)); } .month__week:nth-child(3) { border-left: 0; } .month__week:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .month { grid-template-columns: 1fr; } .month__week { border-left: 0; border-top: 1px solid var(--line); } .month__week:first-child { border-top: 0; } }

/* ---------- file flow (CPA tracker) ---------- */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: flow; }
.flow > li { margin: 0; position: relative; padding: 22px 28px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-right: 0; counter-increment: flow; }
.flow > li:first-child { border-radius: 2px 0 0 2px; }
.flow > li:last-child { border-right: 1px solid var(--line); border-radius: 0 2px 2px 0; background: var(--navy); color: var(--on-dark-muted); border-color: var(--navy); }
.flow > li:last-child .flow__name { color: var(--gold); }
.flow > li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 20px; height: 20px; background: var(--surface); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow__name { display: block; font-family: var(--font-body); font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.flow__name::before { content: counter(flow) ". "; }
.flow p { margin: 0; font-size: 0.9375rem; color: inherit; }
.flow > li:not(:last-child) p { color: var(--muted); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow > li, .flow > li:first-child, .flow > li:last-child { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
  .flow > li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -11px; transform: rotate(135deg); }
}

/* ---------- pod diagram ---------- */
.pod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.pod__node { position: relative; text-align: center; padding: 0 10px; }
.pod__node:not(:last-child)::after { content: ""; position: absolute; top: 34px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px; background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 11px); }
.pod__avatar { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--gold); color: var(--navy); }
.pod__node--client .pod__avatar { background: var(--navy); color: var(--gold); }
.pod__avatar .icon { width: 28px; height: 28px; }
.pod__role { font-family: var(--font-body); font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.pod__does { font-size: 0.9375rem; color: var(--muted); margin: 0 0 10px; }
.pod__backup { display: inline-block; font-size: 0.8125rem; font-weight: 600; color: var(--sapphire); border: 1px dashed var(--sapphire); border-radius: 999px; padding: 2px 10px; }
@media (max-width: 760px) {
  .pod { grid-template-columns: 1fr; gap: 28px; }
  .pod__node { text-align: left; display: grid; grid-template-columns: 68px 1fr; gap: 0 16px; padding: 0; }
  .pod__avatar { margin: 0; grid-row: span 3; }
  .pod__node:not(:last-child)::after { top: 72px; left: 33px; right: auto; width: 2px; height: 28px; background: repeating-linear-gradient(180deg, var(--navy) 0 6px, transparent 6px 11px); }
  .pod__backup { justify-self: start; }
}

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.quote { margin: 0; padding: 4px 0 0 26px; border-left: 1px solid var(--gold); display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; font-family: var(--font-head); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--navy); }
.quote figcaption { font-size: 0.9375rem; color: var(--muted); }
.quote figcaption strong { display: block; color: var(--charcoal); }
.proof-note { margin-top: 24px; font-size: var(--fs-small); color: var(--muted); }
.case { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 28px 32px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.section--mist .case { border-color: var(--line); }
.case .icon { width: 30px; height: 30px; color: var(--gold-deep); }
.case p { margin: 0; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.faq__intro p { color: var(--muted); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { transition: color var(--t-hover) ease; list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-weight: 500; font-size: 1.0625rem; color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-ui) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--sapphire); }
.faq__answer { padding: 0 40px 22px 0; color: var(--muted); }
@media (max-width: 860px) { .faq__wrap { grid-template-columns: 1fr; } }

/* ---------- security glance ---------- */
.controls { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.controls li { margin: 0; padding-top: 26px; border-top: 1px solid var(--gold); }
.controls .icon { width: 26px; height: 26px; color: var(--gold-deep); margin-bottom: 16px; }
.controls h3 { font-size: 1.0625rem; margin-bottom: .35em; }
.controls p { font-size: 0.9375rem; color: var(--muted); margin: 0; }
@media (max-width: 960px) { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.controls--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .controls--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .controls { grid-template-columns: 1fr; } }
.controls--stack { grid-template-columns: 1fr; gap: 0; }
.controls--stack li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding: 26px 0; border-top: 1px solid var(--line); }
.controls--stack li:first-child { border-top-color: var(--gold); }
.controls--stack .icon { grid-row: span 2; margin: 2px 0 0; }
.controls--stack h3 { margin-bottom: .25em; }
.statement { margin: clamp(40px, 5vw, 64px) 0 0; padding: 4px 0 4px clamp(24px, 3vw, 36px); background: none; border-left: 1px solid var(--gold); font-family: var(--font-head); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.4; color: var(--navy); max-width: 46rem; }
.statement strong { font-weight: 600; }
.statement .text-link { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; margin-left: .4em; white-space: nowrap; }

/* ---------- security page subsections ---------- */
.control-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 72px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line); }
.control-group:first-child { border-top: 0; padding-top: 0; }
.control-group__head { display: flex; gap: 14px; align-items: flex-start; }
.control-group__head .icon { width: 26px; height: 26px; color: var(--gold-deep); margin-top: 8px; }
.control-group__head h2 { font-size: 1.875rem; margin: 0; }
.control-group .ticks { margin: 0; }
@media (max-width: 860px) { .control-group { grid-template-columns: 1fr; } }

/* ---------- report pack mock-up ---------- */
.pack { background: var(--surface); border-radius: 3px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.pack__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--ivory-deep); overflow-x: auto; }
.pack__tab { flex: none; font: 600 0.9375rem var(--font-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 14px 20px; cursor: pointer; transition: color var(--t-hover) ease, border-color var(--t-hover) ease, background-color var(--t-hover) ease; }
.pack__tab:hover { color: var(--navy); }
.pack__tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); background: var(--surface); }
.pack__panel { padding: clamp(20px, 3vw, 36px); }
.pack__panel[hidden] { display: none; }
.pack__doc-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--gold); padding-bottom: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pack__doc-head h3 { margin: 0; font-size: 1.125rem; }
.pack__doc-head p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.fin { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fin th, .fin td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.fin th { text-align: left; font-weight: 400; }
.fin td { text-align: right; width: 18%; font-variant-numeric: tabular-nums; }
.fin thead th, .fin thead td { font-size: 0.8125rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.fin .sub th, .fin .sub td { font-weight: 600; border-top: 1px solid var(--charcoal); }
.fin .total th, .fin .total td { font-weight: 700; color: var(--navy); border-bottom: 3px double var(--navy); }
.fin .neg { color: var(--danger); }
.summary-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.summary-points li { margin: 0; padding: 14px 16px; background: var(--ivory-deep); border-left: 1px solid var(--gold); border-radius: 0; font-size: 0.9375rem; }
.summary-points strong { color: var(--navy); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi span { display: block; font-size: 0.8125rem; color: var(--muted); }
.kpi strong { font-family: var(--font-head); font-weight: 600; font-size: 1.625rem; color: var(--navy); font-variant-numeric: lining-nums; }
.pack__note { padding: 12px clamp(20px, 3vw, 36px); font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--ivory-deep); margin: 0; }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

/* ---------- engagement model cards ---------- */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.model { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 0 0 2px 2px; padding: clamp(28px, 3.5vw, 44px); background: var(--surface); }
.model h3 { margin-bottom: .4em; font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.model__for { color: var(--muted); margin-bottom: 18px; }
.model dl { margin: 0 0 20px; display: grid; gap: 12px; }
.model dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-deep); }
.model dd { margin: 2px 0 0; font-size: 0.9375rem; }
.model__price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.125rem; }
.model__price small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.models--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
@media (max-width: 960px) { .models { grid-template-columns: 1fr; } }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.person__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 2rem; letter-spacing: .04em; box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px var(--ivory-deep); }
.person h3 { margin: 0 0 4px; font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.person__title { margin: 0; font-weight: 600; color: var(--charcoal); }
.person__qual { margin: 0 0 10px; color: var(--muted); font-size: 0.9375rem; }
.person__bio { color: var(--muted); }
.person a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.person a .icon { width: 18px; height: 18px; }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }
.people > .person:only-child { grid-column: 1 / -1; max-width: 820px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--line); }
.facts div { padding: 32px 20px 32px 0; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--navy); font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); line-height: 1.05; order: -1; font-variant-numeric: lining-nums; }
.facts div { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts div:nth-child(3) { border-left: 0; padding-left: 0; } .facts div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.registry { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.registry dt { font-weight: 600; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-deep); padding-top: .3em; }
.registry dd { margin: 0; }
@media (max-width: 520px) { .registry { grid-template-columns: 1fr; gap: 2px; } .registry dd { margin-bottom: 10px; } }

/* ---------- two-column responsibilities ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.duo > div { padding: clamp(28px, 3.5vw, 48px); }
.duo > div + div { border-left: 1px solid var(--line); }
.duo > div:first-child { background: var(--navy); color: var(--on-dark-muted); }
.duo > div:first-child h3 { color: var(--gold); }
.duo > div:first-child .ticks li::before { color: var(--gold); }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } .duo > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- callout ---------- */
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; border-radius: var(--radius); background: var(--ivory-deep); border: 1px solid var(--line); font-size: 0.9375rem; color: var(--charcoal); }
.callout .icon { color: var(--gold-deep); width: 22px; height: 22px; margin-top: 1px; }
.callout p { margin: 0; }
.section--mist .callout { background: var(--surface); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; background: radial-gradient(900px 480px at 92% 120%, rgba(18,59,99,.9), rgba(18,59,99,0) 62%), var(--navy); color: var(--on-dark-muted); padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 120px); margin-top: clamp(40px, 5vw, 64px); }
.cta-band__curve { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(36px, 5vw, 72px); color: var(--navy); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.cta-band h2 { color: var(--ivory); margin-bottom: .4em; }
.cta-band p { font-size: 1.0625rem; margin: 0; max-width: 32em; }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-self: end; }
.cta-band__secondary { color: var(--ivory); font-weight: 500; font-size: 0.8125rem; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration-color: var(--gold); }
.cta-band__secondary:hover { color: var(--gold); text-decoration-color: var(--gold); }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } .cta-band__actions { justify-self: start; } }
main + .cta-band { margin-top: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-muted); font-size: 0.9375rem; padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-dark); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: 40px; padding-bottom: 48px; }
.footer__brand img { width: 176px; margin-bottom: 20px; }
.footer__brand p { max-width: 24rem; }
.footer__secure { display: flex; gap: 8px; align-items: center; color: var(--ivory); font-weight: 500; }
.footer__secure .icon { color: var(--gold); }
.footer__col h2 { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { color: var(--ivory); text-decoration: none; }
.footer__col a:hover { color: var(--gold); text-decoration: none; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact .icon { color: var(--gold); margin-top: 3px; width: 18px; height: 18px; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line-dark); padding-block: 22px 30px; font-size: var(--fs-small); }
.footer__legal p { margin: 0; }
.footer__legal ul { list-style: none; display: flex; gap: 22px; padding: 0; margin: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { color: var(--on-dark-muted); display: inline-flex; gap: 6px; align-items: center; text-decoration-color: rgba(197,164,109,.6); }
.footer__legal a:hover { color: var(--gold); }
.footer__legal .icon { width: 16px; height: 16px; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- contact page & form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: clamp(28px, 4.5vw, 56px); box-shadow: var(--shadow); }
.form-card h2 { font-size: 2.125rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend, fieldset legend { font-weight: 600; font-size: 0.9375rem; color: var(--charcoal); }
.req { color: var(--gold-deep); }
.opt { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: 400 1rem var(--font-body); color: var(--charcoal); background: var(--surface); border: 1px solid var(--input-line); border-radius: var(--radius);
  padding: 11px 12px; width: 100%; transition: border-color 140ms ease, box-shadow 140ms ease;
}
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23101D35' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sapphire); box-shadow: 0 0 0 3px rgba(197,164,109,.4); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 10px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .choices, .choices--3 { grid-template-columns: 1fr; } }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96875rem; cursor: pointer; padding: 6px 0; transition: color var(--t-hover) ease; }
.choice:hover, .choice:has(input:checked) { color: var(--navy); }
.choice input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--navy); flex: none; }
.form-note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--muted); background: var(--ivory-deep); border-radius: var(--radius); padding: 14px 16px; }
.form-note .icon { color: var(--gold-deep); width: 18px; height: 18px; margin-top: 2px; }
.field-error { color: var(--danger); font-size: 0.875rem; font-weight: 500; }
.field-error[hidden] { display: none; }
.is-invalid input, .is-invalid select, .is-invalid textarea, input.is-invalid, select.is-invalid { border-color: var(--danger); }
.form-status { font-weight: 600; }
.form-status[hidden] { display: none; }
.form-status--error { color: var(--danger); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }

.aside-stack { display: grid; gap: 24px; }
.aside-card { border-radius: var(--radius); padding: clamp(28px, 3vw, 36px); border: 1px solid var(--line); background: var(--surface); }
.aside-card h2 { font-size: 1.75rem; margin-bottom: .5em; }
.aside-card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-dark-muted); }
.aside-card--navy h2 { color: var(--ivory); }
.aside-card--navy a:not(.btn) { color: var(--ivory); }
.aside-card .btn { width: 100%; margin-top: 6px; }
.aside-card .btn + .btn { margin-top: 10px; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { margin: 0; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.contact-list .icon { color: var(--gold-deep); width: 20px; height: 20px; margin-top: 2px; }
.contact-list__label { display: block; font-size: 0.6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.booking-embed { width: 100%; min-height: 900px; border: 0; border-radius: var(--radius); margin-top: 16px; background: var(--surface); }

.next-steps { list-style: none; padding: 0; margin: 0; counter-reset: ns; display: grid; gap: 14px; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 30px 1fr; gap: 12px; margin: 0; }
.next-steps li::before { content: counter(ns); width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid var(--gold); color: var(--navy); display: grid; place-items: center; font: 600 1.0625rem var(--font-head); font-variant-numeric: lining-nums; }

/* ---------- prose (legal pages) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: 2rem; margin-top: 2em; }
.prose h3 { font-size: 1.0625rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose .callout { margin: 0 0 2rem; }

/* ---------- cookie consent ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; }
.consent[hidden] { display: none; }
.consent__inner { max-width: 720px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; display: flex; gap: 16px 24px; align-items: center; flex-wrap: wrap; font-size: 0.9375rem; }
.consent__inner p { margin: 0; flex: 1 1 320px; }
.consent__actions { display: flex; gap: 10px; }

/* ---------- 404 / thank-you ---------- */
.notice { min-height: 40vh; }
.notice .actions { margin-top: 1.5rem; }

/* ---------- photos and image placeholders ---------- */
.photo { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ivory-deep); aspect-ratio: 4 / 3; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--21x9 { aspect-ratio: 21 / 9; }
.photo--3x4 { aspect-ratio: 3 / 4; }
.photo--1x1 { aspect-ratio: 1 / 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Editorial blend: no frame. A photo runs off the screen edge on the side away from the text, fades towards
   the text and feathers softly where it meets the section above and below, so it emerges from the page instead
   of sitting in a rectangle. Three layers do this, all in CSS:
   1. a mask fades the photo to transparent, so whatever background is behind it shows through;
   2. ::before tints the fading edges towards that background colour first (--photo-bg), so a bright photo
      doesn't turn grey as it fades into navy, and a dark one doesn't turn grey on ivory;
   3. ::after adds a light blur in the fading edge only. The focal side stays sharp and fully opaque.
   --fade-dir: from the text side towards the focal side    --fade: how far in the fade reaches
   --cross-dir: the other axis    --edge-start / --edge-end: feather on that axis    --edge-far: the far edge (--far-end: transparent to fade it, #000 when it runs off screen) */
.photo:not(.photo--empty) {
  --photo-bg: var(--ivory);
  --fade-dir: to right; --cross-dir: to bottom; --fade: 46%; --edge-far: 0%; --far-end: #000; --edge-start: 12%; --edge-end: 12%;
  border-radius: 0; background: none; box-shadow: none;
  -webkit-mask-image:
    linear-gradient(var(--fade-dir), transparent 0%, rgba(0,0,0,.1) calc(var(--fade) * .16), rgba(0,0,0,.4) calc(var(--fade) * .36), rgba(0,0,0,.76) calc(var(--fade) * .6), rgba(0,0,0,.95) calc(var(--fade) * .82), #000 var(--fade), #000 calc(100% - var(--edge-far)), var(--far-end) 100%),
    linear-gradient(var(--cross-dir), transparent 0%, #000 var(--edge-start), #000 calc(100% - var(--edge-end)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(var(--fade-dir), transparent 0%, rgba(0,0,0,.1) calc(var(--fade) * .16), rgba(0,0,0,.4) calc(var(--fade) * .36), rgba(0,0,0,.76) calc(var(--fade) * .6), rgba(0,0,0,.95) calc(var(--fade) * .82), #000 var(--fade), #000 calc(100% - var(--edge-far)), var(--far-end) 100%),
    linear-gradient(var(--cross-dir), transparent 0%, #000 var(--edge-start), #000 calc(100% - var(--edge-end)), transparent 100%);
          mask-composite: intersect;
}
.photo:not(.photo--empty)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--fade-dir), var(--photo-bg) 0%, color-mix(in srgb, var(--photo-bg) 55%, transparent) calc(var(--fade) * .38), transparent calc(var(--fade) * .8)),
    linear-gradient(var(--cross-dir), var(--photo-bg) 0%, color-mix(in srgb, var(--photo-bg) 45%, transparent) calc(var(--edge-start) * .8), transparent calc(var(--edge-start) * 1.6), transparent calc(100% - var(--edge-end) * 1.6), color-mix(in srgb, var(--photo-bg) 45%, transparent) calc(100% - var(--edge-end) * .8), var(--photo-bg) 100%);
}
.photo:not(.photo--empty)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(var(--fade-dir), #000 0%, rgba(0,0,0,.6) calc(var(--fade) * .3), transparent calc(var(--fade) * .7));
          mask-image: linear-gradient(var(--fade-dir), #000 0%, rgba(0,0,0,.6) calc(var(--fade) * .3), transparent calc(var(--fade) * .7));
}
.section--mist .photo { --photo-bg: var(--ivory-deep); }
.hero .photo, .section--navy .photo { --photo-bg: var(--navy); }
/* a missing image shows a branded frame of the same size, with its alt text, until the real file is added */
.photo--empty { display: grid; place-items: center; background: radial-gradient(120% 90% at 85% 0%, rgba(197,164,109,.16), rgba(197,164,109,0) 55%), linear-gradient(150deg, var(--sapphire) 0%, var(--navy) 72%); }
.photo--empty::before { content: ""; position: absolute; inset: clamp(10px, 1.6vw, 16px); border: 1px solid rgba(197,164,109,.45); pointer-events: none; }
.photo__brief { position: relative; max-width: 26rem; padding: 28px; text-align: center; color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.55; }
.photo__brief .icon { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--gold); }
.photo__label { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); }
.photo__brief p { margin: 0 0 6px; }
.photo__alt { font-family: var(--font-head); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--ivory); }
.photo__file { font-size: 0.75rem; letter-spacing: .04em; color: rgba(247,246,242,.55); word-break: break-all; }

.hero--photo .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hero--photo h1 { max-width: 15em; }
.hero--photo .hero__grid:not(:has(.photo)) { grid-template-columns: 1fr; }
.hero--photo .hero__grid:not(:has(.photo)) h1 { max-width: 18em; }
@media (min-width: 901px) {
  /* the photo becomes the right-hand side of the hero itself: no top, right or bottom edge to see */
  .hero--photo:has(.photo:not(.photo--empty)) { display: flex; align-items: center; min-height: clamp(540px, 44vw, 680px); }
  .hero--photo:has(.photo:not(.photo--empty))::before, .hero--photo:has(.photo:not(.photo--empty))::after { display: none; }
  .hero--photo .hero__copy { position: relative; z-index: 1; }
  .hero--photo .photo:not(.photo--empty) {
    position: absolute; top: 0; right: 0; bottom: 0; width: 54%; aspect-ratio: auto; margin: 0;
    --fade: 54%; --edge-start: 16%; --edge-end: 28%;
  }
}
@media (max-width: 900px) {
  .hero--photo .hero__grid { grid-template-columns: 1fr; }
  /* full width under the copy, rising out of the navy and running under the curve at the bottom */
  .hero--photo .photo { aspect-ratio: 4 / 3; }
  .hero--photo .photo:not(.photo--empty) {
    margin-inline: calc(-1 * var(--gutter)); margin-bottom: calc(-1 * clamp(104px, 11vw, 150px));
    --fade-dir: to bottom; --cross-dir: to right; --fade: 42%; --edge-far: 14%; --far-end: transparent; --edge-start: 0%; --edge-end: 0%;
  }
}

/* home: the team band */
.team-band { padding-block: 0 calc(var(--section) + 24px); }
.team-band .photo--empty { place-items: start end; }
.team-band .photo--empty .photo__brief { text-align: right; padding: clamp(28px, 4vw, 56px); }
.team-band .photo--empty .photo__brief .icon { margin: 0 0 14px auto; }
.team-band__frame { position: relative; }
.team-band__caption { position: absolute; z-index: 1; left: clamp(20px, 4vw, 56px); bottom: clamp(-64px, -4.5vw, -36px); width: min(440px, 44%); background: var(--navy); color: var(--on-dark-muted); border-top: 1px solid var(--gold); padding: clamp(26px, 3.2vw, 40px); box-shadow: var(--shadow); }
.team-band__caption h2 { color: var(--ivory); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: .35em; }
.team-band__caption p { margin-bottom: .9em; }
.team-band__caption a { color: var(--gold); font-weight: 600; font-size: 0.75rem; letter-spacing: var(--track-label); text-transform: uppercase; }
@media (max-width: 860px) {
  .team-band .photo--21x9 { aspect-ratio: 4 / 3; }
  .team-band__caption { position: relative; left: auto; bottom: auto; width: auto; margin: -48px 16px 0; }
  .team-band { padding-bottom: var(--section); }
  .team-band .photo--empty { place-items: center; }
  .team-band .photo--empty .photo__brief { text-align: center; }
  .team-band .photo--empty .photo__brief .icon { margin: 0 auto 14px; }
}

/* split with a photo beside content */
.split--photo { align-items: center; }
.media-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.media-split--flip > :first-child { order: 2; }
.media-split--flip .photo { --fade-dir: to left; }
@media (min-width: 901px) {
  /* runs off the screen edge on the side away from the text, and reaches a little into the gap towards it */
  .split--photo > .photo:not(.photo--empty), .media-split > .photo:not(.photo--empty) {
    aspect-ratio: auto; height: clamp(380px, 34vw, 540px); align-self: center;
    margin-right: calc(-1 * var(--bleed));
  }
  .split--photo > .photo:not(.photo--empty) { margin-left: calc(-.6 * clamp(32px, 5vw, 80px)); }
  .media-split > .photo:not(.photo--empty) { margin-left: calc(-.6 * clamp(36px, 6vw, 96px)); }
  .media-split--flip > .photo:not(.photo--empty) { margin-left: calc(-1 * var(--bleed)); margin-right: calc(-.6 * clamp(36px, 6vw, 96px)); }
}
@media (max-width: 900px) {
  .media-split { grid-template-columns: 1fr; } .media-split--flip > :first-child { order: 0; } .media-split .photo--3x4 { aspect-ratio: 4 / 3; }
  /* stacked: full width below its text, fading in from the top */
  .split--photo .photo:not(.photo--empty), .media-split .photo:not(.photo--empty) {
    margin-inline: calc(-1 * var(--gutter));
    --fade-dir: to bottom; --cross-dir: to right; --fade: 34%; --edge-far: 14%; --far-end: transparent; --edge-start: 0%; --edge-end: 0%;
  }
}
/* the wide team photo on Home (shown once a real photo is added): its caption sits at the bottom left */
.team-band .photo { --fade-dir: to top; --cross-dir: to right; --fade: 30%; --edge-far: 8%; --far-end: transparent; --edge-start: 8%; --edge-end: 8%; }

/* ---------- small utilities (no inline styles, so the CSP can forbid them) ---------- */
.sprite { display: none; }
[data-cols="2"] { --cols: 2; }
[data-cols="4"] { --cols: 4; }
[data-mt="0"] { margin-top: 0; }
[data-mt="16"] { margin-top: 16px; }
[data-mt="20"] { margin-top: 20px; }
[data-mt="24"] { margin-top: 24px; }
[data-mt="28"] { margin-top: 28px; }
[data-mt="32"] { margin-top: 32px; }
[data-mt="48"] { margin-top: 48px; }
[data-mb="64"] { margin-bottom: clamp(40px, 5vw, 64px); }
.media-split .section-head { margin-bottom: 0; }
.media-split > div > .section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.section[data-pt="0"] { padding-top: clamp(8px, 2vw, 24px); }

/* ---------- motion ----------
   Three layers, and nothing else moves:
   1. the entrance at the top of each page, once, on load (about two seconds, unhurried);
   2. sections arriving as they are scrolled to (classes added by site.js): headings rise out of a mask, their
      gold rules draw, and the items in a group follow one after another. Four details are tied directly to the
      scroll position: the gold line under the header, the lines between numbered steps, photos drifting
      inside their frames, and the closing line of the navy band lighting up;
   3. feedback when you point at, focus or press something (set beside each component above).
   Only transform, opacity and clip-path are animated, so nothing shifts the layout. Everything here sits inside
   "no-preference", so visitors who ask for reduced motion get the finished page with colour changes only. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. page-top entrance, about a second in all: the headline rises out of a mask, then the rest follows */
  .hero .breadcrumb, .hero__kicker { animation: rise 1000ms var(--ease) 100ms backwards; }
  .hero h1 { animation: riseMask var(--t-enter) var(--ease) 200ms backwards; }
  .hero .lead { animation: rise 1000ms var(--ease) 700ms backwards; }
  .hero__tagline { animation: rise 1000ms var(--ease) 850ms backwards; }
  .hero .actions { animation: rise 1000ms var(--ease) 1000ms backwards; }
  .hero--home .hero__tagline::before { animation: drawX 1100ms var(--ease) 850ms backwards; }
  /* the photo is never hidden: it settles into place */
  .hero .photo img { animation: settle 2200ms var(--ease) backwards; }

  /* 3. pointer feedback that moves */
  .btn:active { transform: scale(.98); transition-duration: var(--t-press); }
  .faq__item[open] > .faq__answer { animation: answerIn var(--t-ui) var(--ease); }
  .pack__panel:not([hidden]) { animation: fadeIn var(--t-ui) ease; }
  .form-status:not([hidden]) { animation: fadeIn var(--t-ui) ease; }

  /* 2. sections arriving: each block fades up as it reaches the viewport */
  .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1000ms var(--ease), transform var(--t-enter) var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal:nth-child(2) { transition-delay: 100ms; }
  .reveal:nth-child(3) { transition-delay: 200ms; }
  .reveal:nth-child(n+4) { transition-delay: 300ms; }
  .photo.is-in img { animation: settle 2200ms var(--ease) backwards; }

  /* a section heading: its gold rule draws, the heading rises out of a mask, then the line under it follows */
  .section-head.reveal, .faq__intro.reveal, .cta-band__copy.reveal { opacity: 1; transform: none; }
  .section-head.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform var(--t-enter) var(--ease); }
  .section-head.reveal.is-in::before { transform: none; }
  :is(.section-head, .faq__intro, .cta-band__copy).reveal h2 { opacity: 0; transform: translate3d(0, .45em, 0); clip-path: inset(0 -.2em 100% -.2em); transition: opacity 900ms var(--ease) 150ms, transform var(--t-enter) var(--ease) 150ms, clip-path var(--t-enter) var(--ease) 150ms; }
  :is(.section-head, .faq__intro, .cta-band__copy).reveal.is-in h2 { opacity: 1; transform: none; clip-path: inset(-.3em -.2em -.35em -.2em); }
  :is(.section-head, .faq__intro, .cta-band__copy).reveal :is(p, .btn) { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1000ms var(--ease) 450ms, transform var(--t-enter) var(--ease) 450ms; }
  :is(.section-head, .faq__intro, .cta-band__copy).reveal.is-in :is(p, .btn) { opacity: 1; transform: none; }

  /* a group of items: they arrive one after another, left to right */
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal { opacity: 1; transform: none; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1000ms var(--ease), transform var(--t-enter) var(--ease); }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal.is-in > * { opacity: 1; transform: none; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > :nth-child(2) { transition-delay: 130ms; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > :nth-child(3) { transition-delay: 260ms; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > :nth-child(4) { transition-delay: 390ms; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > :nth-child(5) { transition-delay: 520ms; }
  :is(.router, .features, .controls, .steps, .timeline, .models, .flow, .facts, .people, .quotes).reveal > :nth-child(n+6) { transition-delay: 620ms; }
  /* the hairline above each item in a row draws from the left as the item arrives */
  .controls:not(.controls--stack).reveal > li, .router.reveal > .router__item { border-top-color: transparent; }
  .controls:not(.controls--stack).reveal > li::before, .router.reveal > .router__item::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease); transition-delay: inherit; }
  .section--navy .controls:not(.controls--stack).reveal > li::before { background: rgba(247,246,242,.35); }
  .controls:not(.controls--stack).reveal > li { position: relative; }
  .controls:not(.controls--stack).reveal.is-in > li::before, .router.reveal.is-in > .router__item::after { transform: none; }

  /* moving from page to page: a short cross-fade, with the header held still */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; }
  .site-header { view-transition-name: site-header; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  /* Home: the three lines of the headline rise one after another */
  .hero--home h1 { animation: none; }
  .hero--home h1 .h1-line, .hero--home h1 em { animation: riseMask var(--t-enter) var(--ease) backwards; }
  .hero--home h1 .h1-line:nth-child(1) { animation-delay: 200ms; }
  .hero--home h1 .h1-line:nth-child(2) { animation-delay: 360ms; }
  .hero--home h1 em { animation-delay: 520ms; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(.98); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1080px) {
  .nav.is-open { animation: answerIn var(--t-ui) var(--ease); }
}
/* scroll-linked details: only in browsers that can run them off the main thread; elsewhere the lines are simply there */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); pointer-events: none; transform-origin: left; animation: drawX linear both; animation-timeline: scroll(root block); }
    .steps > li::after { animation: drawX linear both; animation-timeline: view(); animation-range: entry 10% cover 38%; }
    .timeline__dot::after { animation: drawY linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    /* photos sit slightly enlarged in their frames and drift a few percent as the page moves past them */
    .photo:not(.photo--empty) img { scale: 1.1; animation: drift linear both; animation-timeline: view(); }
    .photo.is-in:not(.photo--empty) img, .hero .photo:not(.photo--empty) img { animation: settle 2200ms var(--ease) backwards, drift linear both; animation-timeline: auto, view(); }
    /* the closing line of the navy band lights up as it crosses the screen */
    .updates__note { animation: lightUp linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    .steps > li::after { animation-name: drawY; animation-range: entry 0% cover 45%; }
  }
}
main { overflow-x: clip; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 20px, 0); } }
@keyframes riseMask { from { opacity: 0; transform: translate3d(0, .45em, 0); clip-path: inset(0 -.2em 100% -.2em); } to { opacity: 1; transform: none; clip-path: inset(-.3em -.2em -.35em -.2em); } }
@keyframes settle { from { transform: scale(1.07); } }
@keyframes drift { from { translate: 0 -4%; } to { translate: 0 4%; } }
@keyframes lightUp { from { opacity: .25; } }
@keyframes drawX { from { transform: scaleX(0); } }
@keyframes drawY { from { transform: scaleY(0); } }
@keyframes answerIn { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- print ---------- */
@media print {
  .site-header, .banner, .cta-band, .site-footer, .consent, .swoosh, .nav-toggle { display: none !important; }
  .hero { background: none; color: var(--charcoal); padding: 0 0 24px; }
  .hero h1 { color: var(--navy); }
  .ph { background: none; box-shadow: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* reduced motion: nothing moves or animates; colours and outlines still change, briefly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, text-decoration-color, box-shadow !important; transition-duration: 120ms !important; transition-delay: 0s !important; }
}
/* ---------- "no chasing" band on the home page ---------- */
.section--navy .section-head p { color: var(--on-dark-muted); }
.section--navy .controls li { border-top-color: rgba(247,246,242,.35); }
.section--navy .controls .icon { color: var(--gold); }
.section--navy .controls p { color: var(--on-dark-muted); }
.updates__note { margin: clamp(36px, 4.5vw, 56px) 0 0; padding-top: 24px; border-top: 1px solid var(--line-dark); font-family: var(--font-head); font-style: italic; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); color: var(--gold); }