@charset "utf-8";
/*
Theme Name:   Montlior Group
Theme URI:    https://jcdigital.dev/themes/montlior-group/
Author:       Jhon Carl Ignoro
Author URI:   https://jcdigital.dev/
Description:  A corporate and investor-relations theme for heritage media holding companies. Built without a page builder: every section is a native, server-rendered block, so the markup stays lean, the DOM stays shallow and Core Web Vitals stay intact. Fluid from 280px to 3840px with no layout media queries, WCAG 2.2 AA verified, and shipped with Careers and Leadership content types, a global style panel and a one-click content importer.
Version:      1.3.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  montlior-group
Tags:         corporate, business, news, custom-colors, custom-logo, custom-menu, block-styles, wide-blocks, accessibility-ready, translation-ready, editor-style
*/

/* ==========================================================================
   The design system below is byte-for-byte the stylesheet from the approved
   static build. Nothing has been re-authored for WordPress: the theme emits
   the same markup, so it inherits the same verified layout and contrast.
   ========================================================================== */


/* ==========================================================================
   RESET
   ========================================================================== */
/* ===== reset ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* header height + a breath, so anchors never hide behind the sticky bar */
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }

body {
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  /* the single most important guard against horizontal overflow */
  overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.12; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Long unbreakable tokens — email addresses in particular — are the one thing
   that can still force a horizontal scrollbar at 280px. Break them. */
:where(p, li, dd, dt, address, figcaption, blockquote, caption, td, th,
       h1, h2, h3, h4, a, summary) {
  overflow-wrap: break-word;
}

a:not([class]) { text-decoration-skip-ink: auto; }

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-block-start: calc(var(--header-h) + var(--space-s)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   TOKENS
   ========================================================================== */
/* ===== tokens ======================================================== */
:root {
  /* ---- brand ---- */
  --navy-800: #0A1F3D;
  --navy-900: #081428;
  --navy-700: #123055;
  --accent: #1D6FE0;
  --accent-dark: #1559B8;   /* hover / AA on white at small sizes */
  --accent-on-dark: #8FBEF8; /* links on navy: ~7:1 */
  --champagne: #C9A857;      /* hairlines & flourishes ONLY */
  --champagne-deep: #A8863C; /* champagne that must sit on white */
  /* Champagne text over a photographic hero sits on a lighter, noisier
     backdrop than flat navy and measures only 3.9:1. This lifted tone holds
     AA (>=4.5:1) over the hero images while reading as the same accent. */
  --champagne-light: #E8CE8A;
  /* Champagne as *text* on light surfaces: --champagne-deep reaches only
     3.4:1 on white and 3.0:1 on tint. This darkened bronze clears AA on both
     (5.8:1 / 4.9:1) and is reserved for the small caps labels. */
  --champagne-text: #7D6222;
  --tint: #E8F1FC;
  --paper: #FFFFFF;
  --offwhite: #F7F9FC;
  --ink: #111827;
  --meta: #6B7280;           /* AA on --paper and --offwhite */
  --meta-strong: #4B5563;    /* AA on --tint and other filled panels */
  --line: #E3E8F0;
  --line-dark: rgba(201, 168, 87, 0.28);

  /* ---- fluid type: 320px → 1920px ---- */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.97rem + 0.17vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.15rem + 0.26vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.35rem + 0.43vw, 1.75rem);
  --step-3:  clamp(1.728rem, 1.58rem + 0.72vw, 2.25rem);
  --step-4:  clamp(2.074rem, 1.84rem + 1.16vw, 2.9rem);
  --step-5:  clamp(2.488rem, 1.94rem + 2.74vw, 4.5rem);

  /* ---- fluid space ----
     Tightened rhythm: the previous scale opened sections to 7.5rem of padding
     and 3.4rem gaps, which read as loose rather than generous. Every step now
     steps by roughly 1.4x so the vertical rhythm is consistent everywhere. */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.04vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.5625rem);
  --space-xs:  clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
  --space-s:   clamp(1rem, 0.96rem + 0.17vw, 1.125rem);
  --space-m:   clamp(1.375rem, 1.32rem + 0.26vw, 1.5625rem);
  --space-l:   clamp(1.75rem, 1.66rem + 0.43vw, 2rem);
  --space-xl:  clamp(2.25rem, 2.05rem + 1vw, 2.875rem);
  --space-2xl: clamp(3rem, 2.65rem + 1.74vw, 4rem);
  --space-3xl: clamp(3.75rem, 3.14rem + 3.04vw, 5.5rem);

  /* ---- typography ---- */
  --font-head: "Libre Franklin", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* ---- measure & structure ---- */
  --wrap: 78rem;
  --wrap-wide: 92rem;
  --measure: 68ch;
  --header-h: 5.75rem;
  --radius: 2px;   /* institutions do not have rounded corners */
  --radius-card: 4px;

  --shadow-sm: 0 1px 2px rgba(10, 31, 61, 0.06), 0 1px 3px rgba(10, 31, 61, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 31, 61, 0.08), 0 1px 3px rgba(10, 31, 61, 0.05);
  --shadow-lg: 0 18px 48px rgba(8, 20, 40, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper);
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}

/* Explicit base sizes reproducing the UA defaults exactly.
   Without these, any external stylesheet that styles a bare h2 or h3 —
   WordPress global styles, or a plugin — silently resizes every section
   heading on the site. Values are identical to the browser defaults, so
   rendering is unchanged; they exist purely to hold the cascade. */
body h1 { font-size: 2em; }
body h2 { font-size: 1.5em; }
body h3 { font-size: 1.17em; }
body h4 { font-size: 1em; }
body h5 { font-size: 0.83em; }
body h6 { font-size: 0.67em; }


/* ==========================================================================
   LAYOUT
   ========================================================================== */
/* ===== layout ======================================================== */
.wrap {
  width: min(100% - (var(--space-m) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - (var(--space-m) * 2), var(--wrap-wide)); }
.wrap--narrow { width: min(100% - (var(--space-m) * 2), 58rem); }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
/* --meta (#6B7280) measures 4.24:1 on --tint, just under AA. Any surface
   painted --tint promotes the muted tone to --meta-strong via this override,
   which every `color: var(--meta)` rule inherits automatically. */
.section--tint,
.callout,
.form__status { --meta: var(--meta-strong); }

.section--tint { background: var(--tint); }
.section--offwhite { background: var(--offwhite); }
.section--navy {
  background: var(--navy-800);
  color: #E9EEF6;
}
.section--navy h2,
.section--navy h3 { color: #fff; }

/* intrinsic auto-fit grid — the workhorse */
.grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.grid--tight { gap: var(--space-m); }
.grid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
/* The canonical card grid: a 22rem track against a 78rem wrap resolves to
   exactly three columns on desktop, two on tablet, one on mobile. Every
   icon-and-text list on the site uses this so the rhythm never varies. */
.grid--cards {
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* an asymmetric editorial split that collapses on its own */
.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
.split--lead { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.stack > * + * { margin-block-start: var(--flow, var(--space-s)); }
.stack-l > * + * { margin-block-start: var(--space-l); }

.flow > * + * { margin-block-start: var(--space-s); }
.flow > h2 + *, .flow > h3 + * { margin-block-start: var(--space-xs); }
.flow > * + h2, .flow > * + h3 { margin-block-start: var(--space-l); }


/* ==========================================================================
   COMPONENTS
   ========================================================================== */
/* ===== components ==================================================== */
/* ---- skip link ---------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 0.18s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- focus ---------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--navy :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--champagne); }

/* ---- header --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--line);
}
/* the champagne hairline — the whole "quiet luxury" budget, spent here */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--champagne) 18%, var(--champagne) 82%, transparent);
  opacity: 0.55;
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); }

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--header-h);
  padding-block: var(--space-2xs);
  flex-wrap: nowrap;
  /* a container, so the brand lockup responds to the bar's own width */
  container-type: inline-size;
  container-name: headerbar;
}
.header-bar > * { min-width: 0; }

.brand-link {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

/* The horizontal wordmark is the only mark used in the header. It is an
   11.2:1 lockup, so it is sized by HEIGHT — the dimension that governs how
   large the lettering actually reads — and that height is expressed in
   container-query units so it yields space to the navigation continuously
   rather than in jumps. 2.45cqi keeps logo + nav + utilities inside the bar
   at every width down to the collapse point, with ~30px to spare. */
.brand-wordmark {
  height: clamp(1.25rem, 2.45cqi, 2.5rem);
  width: auto;
  max-width: none;
  flex: 0 1 auto;
}

/* links that live in the header at desktop and in the drawer when collapsed */
.nav-drawer-only { display: none; }
.brand-link--icon img { width: clamp(2rem, 2.5vw, 2.5rem); }

/* The utilities live inside <nav>, so they travel into the drawer with the
   rest of the navigation when it collapses — no duplicated markup. */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-inline-start: auto;
  min-width: 0;
}
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.15vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: inline-block;
  padding-block: var(--space-2xs);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--navy-800);
  text-decoration: none;
  position: relative;
  /* a menu item must never break across two lines */
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--champagne-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--accent-dark); }
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--accent);
}

.header-utils {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex: 0 0 auto;
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--line-dark);
}
.header-utils a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--meta);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
}
.header-utils a:hover { color: var(--accent-dark); }

.lang-select {
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 0.15rem center / 0.6rem;
  border: 0;
  padding-inline-end: 1rem;
  font-size: var(--step--1);
  color: var(--meta);
  cursor: pointer;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
}
.nav-toggle svg { width: 1.15rem; height: 1.15rem; }
/* the word "Menu" appears only once the bar is wide enough to spare it */
.nav-toggle__label { display: none; }
@container headerbar (min-width: 26rem) {
  .nav-toggle__label { display: inline; }
}

/* ---------- THE one layout media query: nav collapse ----------
   Set at 77rem because that is where the measured single-line navigation
   (~570px) plus utilities (~240px) plus a legible wordmark stop fitting on
   one line. Above it the bar is always one clean row; below it the drawer
   takes over and the wordmark goes fluid to fill whatever remains. */
@media (max-width: 76.99rem) {
  .nav-toggle { display: inline-flex; }

  /* the wordmark now absorbs the free space instead of being fixed */
  .brand-link { flex: 1 1 auto; margin-inline-end: var(--space-s); }
  .brand-wordmark { height: auto; width: 100%; max-width: 19rem; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--space-m) 0 var(--space-l);
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-inline-start: 0;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .primary-nav[data-open="true"] { display: flex; }

  .primary-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - (var(--space-m) * 2), var(--wrap));
    margin-inline: auto;
  }
  .primary-nav > ul > li + li { border-block-start: 1px solid var(--line); }
  .primary-nav a {
    display: block;
    padding-block: var(--space-s);
    font-size: var(--step-0);
  }
  .primary-nav a::after { display: none; }

  /* utilities stack at the foot of the drawer */
  .header-utils {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-inline-start: 0;
    padding-inline-start: 0;
    width: min(100% - (var(--space-m) * 2), var(--wrap));
    margin: var(--space-m) auto 0;
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--line-dark);
  }
  .header-utils a {
    display: block;
    padding-block: var(--space-s);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--navy-800);
  }
  .lang-select {
    margin-block-start: var(--space-s);
    font-size: var(--step-0);
    align-self: flex-start;
  }
}

/* ---- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover { border-color: var(--champagne); background: rgba(255, 255, 255, 0.08); }
.btn--outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--navy-800);
}
.btn--outline:hover { background: var(--navy-800); color: #fff; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--light { color: var(--accent-on-dark); }

/* ---- eyebrow + rules ------------------------------------------------ */
.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta-strong);
  margin-block-end: var(--space-xs);
}
/* used over photographic heroes — needs the lifted tone for AA */
.eyebrow--light { color: var(--champagne-light); }
/* over flat navy the standard champagne already measures ~7:1 */
.section--navy .eyebrow--light,
.kpi-strip .eyebrow--light,
.share-panel .eyebrow--light { color: var(--champagne); }

.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--space-l);
}
.rule--champagne {
  background: linear-gradient(90deg, var(--champagne), rgba(201, 168, 87, 0));
  height: 1px;
  width: 5rem;
  margin-block: var(--space-s);
}
.rule--champagne-center { margin-inline: auto; }

.section-head {
  max-width: var(--measure);
  margin-block-end: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  color: var(--meta);
  font-size: var(--step-1);
  margin-block-start: var(--space-s);
}
.section--navy .section-head p { color: #B9C6D9; }

/* ---- hero ----------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
  display: grid;
  align-items: end;
  min-height: clamp(30rem, 22rem + 34vh, 46rem);
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two gradients: the vertical one seats the type, the horizontal one keeps
     the left column dark enough for AA while letting the photograph read on
     the right. Composite alpha behind the headline stays above 0.9. */
  background:
    linear-gradient(180deg, rgba(8, 20, 40, 0.74) 0%, rgba(8, 20, 40, 0.38) 45%, rgba(8, 20, 40, 0.90) 100%),
    linear-gradient(90deg, rgba(10, 31, 61, 0.86) 0%, rgba(10, 31, 61, 0.16) 66%);
}
.hero__inner { max-width: 46rem; }
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin-block-end: var(--space-m);
}
.hero__sub {
  font-size: var(--step-1);
  color: #C9D6E8;
  max-width: 38rem;
  margin-block-end: var(--space-l);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.hero__foot {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgba(201, 168, 87, 0.35);
  font-size: var(--step--1);
  color: #A9B8CD;
  letter-spacing: 0.04em;
}

/* page hero (inner pages) */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-800);
  color: #fff;
  padding-block: var(--space-2xl);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 20, 40, 0.94) 0%, rgba(8, 20, 40, 0.78) 55%, rgba(10, 31, 61, 0.6) 100%);
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-4);
  color: #fff;
  max-width: 24ch;
}
.page-hero p {
  margin-block-start: var(--space-s);
  color: #C1CFE2;
  font-size: var(--step-1);
  max-width: 52ch;
}

/* ---- breadcrumb ----------------------------------------------------- */
.breadcrumb { font-size: var(--step--1); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
}
.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.4rem;
  color: rgba(255, 255, 255, 0.4);
}
.breadcrumb a { color: #C1CFE2; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--champagne); }

/* ---- chairman strip -------------------------------------------------- */
.chairman {
  background: var(--offwhite);
  border-block: 1px solid var(--line);
}
/* Flex rather than an even 1fr/1fr grid: the portrait track used to be half
   the row while the image capped at 22rem, stranding a column of dead space
   beside it. Here the portrait hugs its image and the text takes the rest,
   and it still wraps intrinsically with no media query. */
/* align-items:stretch so the portrait column matches the height of the
   text beside it, rather than sitting short against a taller quote. */
.chairman__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: stretch;
}
.chairman__grid > * { min-width: 0; }
/* margin-inline:auto only bites once the portrait has wrapped to its own
   row — on wider screens flex-grow consumes the free space first. It keeps
   every capped image centred on mobile instead of hugging the left edge. */
.chairman__portrait {
  flex: 1 1 min(100%, 15rem);
  max-width: 21rem;
  margin-inline: auto;
  position: relative;
  display: flex;
}
.chairman__body {
  flex: 3 1 min(100%, 26rem);
  align-self: center;
}
/* height:100% fills the stretched column when the row has a definite height;
   when the portrait wraps to its own row the aspect-ratio supplies the
   intrinsic size instead, so mobile is unaffected. */
.chairman__portrait img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.chairman__portrait::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: calc(var(--space-s) * -1);
  width: 1px;
  height: 45%;
  background: linear-gradient(180deg, var(--champagne), transparent);
}
.chairman blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--navy-800);
  margin: 0;
}
.chairman blockquote p + p { margin-block-start: var(--space-s); }
.signature {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--navy-800);
  margin-block-start: var(--space-m);
  /* typeset signature: a slanted, generously tracked hand */
  letter-spacing: 0.01em;
}
.signature-meta {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-strong);
  margin-block-start: var(--space-2xs);
}

/* ---- KPI strip ------------------------------------------------------- */
.kpi-strip {
  background: var(--navy-800);
  color: #fff;
  position: relative;
}
.kpi-strip::before,
.kpi-strip::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0.5;
}
.kpi-strip::before { top: 0; }
.kpi-strip::after { bottom: 0; }

.kpi-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.kpi {
  padding-inline-start: var(--space-m);
  border-inline-start: 1px solid rgba(201, 168, 87, 0.35);
}
.kpi__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi__unit { color: var(--champagne); }
.kpi__label {
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: #B9C6D9;
  letter-spacing: 0.03em;
}
.kpi__note {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--step--2);
  color: #8194AC;
}

/* ---- ledger: the "at a glance" figures band -------------------------
   Replaces the animated counter strip. A counter tells you one number; this
   tells you the number, its movement, and where the revenue actually comes
   from — which is what an investor came for. Deliberately static. */
.ledger-band {
  background: var(--navy-800);
  color: #E9EEF6;
  position: relative;
}
.ledger-band::before,
.ledger-band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0.5;
}
.ledger-band::before { top: 0; }
.ledger-band::after { bottom: 0; }

.ledger-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-m);
  margin-block-end: var(--space-l);
  border-block-end: 1px solid rgba(201, 168, 87, 0.28);
}
.ledger-head h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  color: #fff;
  letter-spacing: -0.01em;
}
.ledger-head .period {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
}

.ledger {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.ledger__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-m);
  border-inline-start: 1px solid rgba(201, 168, 87, 0.32);
}
.ledger__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ledger__value .unit { color: var(--champagne); font-size: 0.62em; }
.ledger__label {
  font-size: var(--step--1);
  color: #C1CFE2;
  margin-block-start: var(--space-2xs);
}
.ledger__delta {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8194AC;
  font-variant-numeric: tabular-nums;
}
.ledger__delta[data-dir="up"]::before { content: "▲ "; color: #6EE7A8; }
.ledger__delta[data-dir="down"]::before { content: "▼ "; color: #F2A0A0; }
.ledger__delta[data-dir="up"] { color: #9FE3C0; }
.ledger__delta[data-dir="down"] { color: #F2C0C0; }

/* revenue split — a pure-CSS stacked bar, no chart library */
.split-bar {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid rgba(201, 168, 87, 0.28);
}
.split-bar__track {
  display: flex;
  height: 0.75rem;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin-block: var(--space-s) var(--space-m);
}
.split-bar__seg { height: 100%; }
.split-bar__seg--news { background: var(--accent); }
.split-bar__seg--media { background: #6BA4EC; }
.split-bar__seg--wire { background: var(--champagne); }

.split-bar__legend {
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.split-bar__legend li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: #C1CFE2;
}
.split-bar__legend .swatch {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  flex: 0 0 auto;
  border-radius: 1px;
  translate: 0 0.02rem;
}
.split-bar__legend .swatch--news { background: var(--accent); }
.split-bar__legend .swatch--media { background: #6BA4EC; }
.split-bar__legend .swatch--wire { background: var(--champagne); }
.split-bar__legend .amount {
  margin-inline-start: auto;
  font-family: var(--font-head);
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ---- cards (container-query driven) --------------------------------- */
.card {
  container-type: inline-size;
  container-name: card;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #CBD6E6;
}
.card__inner { display: grid; }
.card__media { position: relative; overflow: hidden; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }
.card__body {
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.card__title {
  font-size: var(--step-1);
  line-height: 1.25;
}
.card__title a {
  color: inherit;
  text-decoration: none;
}
/* whole-card click target without nesting interactive elements */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card { position: relative; }
.card__text { color: var(--meta); font-size: var(--step--1); }
.card__meta {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-strong);
}
.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

/* brand cards: square media */
.card--brand .card__media { aspect-ratio: 1 / 1; }
/* article cards: 16:9 media */
.card--article .card__media { aspect-ratio: 16 / 9; }

/* when the CARD ITSELF is wide enough, go horizontal — not the viewport */
@container card (min-width: 30rem) {
  .card__inner { grid-template-columns: 14rem 1fr; align-items: stretch; }
  .card--brand .card__media,
  .card--article .card__media { aspect-ratio: auto; height: 100%; min-height: 11rem; }
  .card__body { padding: var(--space-l); }
}

/* ---- brand card accent bar ------------------------------------------ */
.card--brand .card__body { border-block-start: 2px solid var(--champagne); }

/* ---- brand identity blocks -------------------------------------------- */
.brand-head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.brand-plate {
  width: clamp(3.5rem, 2.9rem + 2.4vw, 5rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: -0.01em;
  color: var(--navy-800);
  line-height: 1.05;
}
.brand-descriptor {
  display: block;
  margin-block-start: var(--space-3xs);
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne-text);
}
.section--navy .brand-name { color: #fff; }
.section--navy .brand-descriptor { color: var(--champagne); }

.positioning {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--navy-800);
  margin-block-start: var(--space-m);
  max-width: 34ch;
}
.section--navy .positioning { color: #E9EEF6; }

/* ---- stat row ---------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line-dark);
}
.stat__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.05;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-strong);
}
.section--navy .stat__value { color: #fff; }
.section--navy .stat__label { color: #A9B8CD; }

/* ---- milestone rail (home) -------------------------------------------
   A horizontal, snapping rail of milestones. Contained scrolling, so it
   never contributes to page overflow, and the scroller is focusable so it
   is reachable by keyboard. */
.rail {
  --node: 0.6rem;
  position: relative;
  margin-block-start: var(--space-xl);
}
.rail__track {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-3xs);
  padding-block: var(--space-l) var(--space-m);
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--champagne) transparent;
  overscroll-behavior-x: contain;
}
.rail__track::-webkit-scrollbar { height: 4px; }
.rail__track::-webkit-scrollbar-track { background: var(--line); border-radius: 2px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--champagne-deep); border-radius: 2px; }
.rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.rail__item {
  flex: 0 0 min(78%, 19rem);
  scroll-snap-align: start;
  position: relative;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}
/* the champagne node sitting on the rail line */
.rail__item::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--node) / -2);
  inset-inline-start: 0;
  inline-size: var(--node);
  block-size: var(--node);
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--champagne-deep);
}
.rail__item:first-child { border-block-start-color: var(--champagne); }
.rail__year {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--navy-800);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.rail__title {
  font-size: var(--step-1);
  margin-block-start: var(--space-2xs);
}
.rail__item p {
  color: var(--meta);
  font-size: var(--step--1);
  margin-block-start: var(--space-2xs);
}
.rail__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-head);
  font-weight: 600;
}

/* ---- chronology (about) ----------------------------------------------
   Large serif years on a champagne spine, content in raised cards. */
.chrono {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xl);
  position: relative;
}
.chrono::before {
  content: "";
  position: absolute;
  inset-block: 1rem 2rem;
  inset-inline-start: 0.5rem;
  inline-size: 1px;
  background: linear-gradient(180deg,
    var(--champagne) 0%, rgba(201, 168, 87, 0.35) 40%, var(--line) 100%);
}
.chrono__item {
  position: relative;
  padding-inline-start: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  display: grid;
  gap: var(--space-l) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: center;
}
/* ring node */
.chrono__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65rem;
  inset-inline-start: 0;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--champagne-deep);
  box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 3px var(--paper),
              inset 0 0 0 6px var(--champagne-deep);
}
.section--tint .chrono__item::before,
.section--offwhite .chrono__item::before { background: transparent; }

.chrono__year {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--navy-800);
}
.chrono__year::after {
  content: "";
  display: block;
  inline-size: 2.25rem;
  block-size: 1px;
  margin-block-start: var(--space-s);
  background: var(--champagne);
}
.chrono__title {
  font-size: var(--step-1);
  margin-block-start: var(--space-s);
}
.chrono__item p {
  color: var(--meta);
  margin-block-start: var(--space-2xs);
  max-width: 56ch;
}
.chrono__figure { margin: 0; overflow: hidden; border-radius: var(--radius-card); }
.chrono__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.chrono__item:hover .chrono__figure img { transform: scale(1.03); }

/* ---- timeline -------------------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--space-xl);
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.6rem 0;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--champagne), var(--line) 65%, transparent);
}
.timeline__item {
  position: relative;
  padding-inline-start: var(--space-l);
}
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -3.5px;
  inset-block-start: 0.55rem;
  width: 8px;
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--champagne-deep);
  border-radius: 50%;
}
.timeline__year {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--accent-dark);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.timeline__title {
  font-size: var(--step-1);
  margin-block-start: var(--space-3xs);
}
.timeline__item p {
  color: var(--meta);
  margin-block-start: var(--space-2xs);
  max-width: 60ch;
}

/* alternating variant for the full About timeline — intrinsic, no MQ.
   Uses a 2-col track that naturally becomes 1 col when there is no room. */
.timeline--alt { gap: var(--space-2xl); }
.timeline--alt .timeline__item {
  display: grid;
  gap: var(--space-s) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
}
.timeline--alt .timeline__figure { margin: 0; }
.timeline--alt .timeline__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---- value cards ------------------------------------------------------
   The icon set ships on an opaque white plate, so the card surface is white
   too and the plate disappears into it. A champagne top rule and an indexed
   numeral give the grid its ledger-like order. */
.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  padding-block-start: calc(var(--space-l) + 2px);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease),
              border-color 0.28s var(--ease);
}
.value-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--champagne), rgba(201, 168, 87, 0));
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #CBD6E6;
}
.value-card__index {
  position: absolute;
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--champagne-text);
  font-variant-numeric: tabular-nums;
}
.value-card__icon {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: var(--space-s);
}
.value-card h3 { font-size: var(--step-1); }
.value-card p { color: var(--meta); margin-block-start: var(--space-2xs); }

/* ---- editorial mosaic -------------------------------------------------
   An asymmetric photo wall: one feature tile carrying twice the weight of
   its neighbours, captions set over a navy scrim. Spans clamp themselves
   when the grid drops to fewer columns, so it collapses to a single
   stacked column with no media query. */
.mosaic {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  grid-auto-rows: clamp(8.5rem, 5.5rem + 9vw, 12.5rem);
  grid-auto-flow: dense;
}
.mosaic__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-900);
  isolation: isolate;
}
.mosaic__item--feature { grid-column: span 2; grid-row: span 2; }
.mosaic__item--wide { grid-column: span 2; }
.mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mosaic__item:hover img,
.mosaic__item:focus-within img { transform: scale(1.045); }

.mosaic__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-m);
  background: linear-gradient(0deg,
    rgba(8, 20, 40, 0.94) 0%, rgba(8, 20, 40, 0.72) 45%, rgba(8, 20, 40, 0) 100%);
  color: #fff;
}
.mosaic__place {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-light);
  margin-block-end: var(--space-3xs);
}
.mosaic__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  color: #fff;
}
.mosaic__item--feature .mosaic__title { font-size: var(--step-2); }
.mosaic__item--feature .mosaic__caption { padding: var(--space-l); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-group + .faq-group { margin-block-start: var(--space-2xl); }
.faq-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block-end: var(--space-s);
  margin-block-end: var(--space-xs);
  border-block-end: 1px solid var(--champagne);
}
.faq-group__head h2 {
  font-size: var(--step-2);
  scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
}
.faq-group__head h2::after { content: none; }
.faq-group__head .value-card__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin: 0;
  flex: 0 0 auto;
}
.faq-body .disclosure summary { font-size: var(--step-0); }
.faq-body .disclosure__body { max-width: none; }
.faq-body section + section { margin-block-start: var(--space-2xl); }

/* ---- error / legal pages ---------------------------------------------- */
.error-hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(24rem, 18rem + 26vh, 34rem);
  padding-block: var(--space-3xl);
  overflow: hidden;
}
.error-hero__media { position: absolute; inset: 0; z-index: -2; }
.error-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.error-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.88), rgba(8, 20, 40, 0.94));
}
.error-code {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  line-height: 0.9;
  color: var(--champagne-light);
  letter-spacing: -0.04em;
}
.error-hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-4);
  color: #fff;
  margin-block-start: var(--space-m);
}
.error-hero p {
  color: #C1CFE2;
  max-width: 46ch;
  margin: var(--space-s) auto 0;
}

/* legal document layout */
/* flex, so the contents column hugs and the body takes the remainder */
.legal-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  align-items: flex-start;
}
/* without this the default min-width:auto stops these tracks shrinking, and
   the wide policy table inside .table-scroll pushes the page sideways */
.legal-layout > * { min-width: 0; }
.legal-toc {
  flex: 1 1 min(100%, 12rem);
  max-width: 17rem;
  position: sticky;
  top: calc(var(--header-h) + var(--space-m));
  border-inline-start: 1px solid var(--champagne);
  padding-inline-start: var(--space-m);
}
.legal-toc h2 {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta-strong);
  margin-block-end: var(--space-s);
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  font-size: var(--step--1);
  color: var(--navy-800);
  text-decoration: none;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--champagne-deep);
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { color: var(--accent-dark); text-decoration: underline; }
.legal-body { flex: 3 1 min(100%, 28rem); max-width: var(--measure); }
.legal-body section + section { margin-block-start: var(--space-2xl); }
.legal-body h2 {
  font-size: var(--step-2);
  scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
}
.legal-body h2::after {
  content: "";
  display: block;
  inline-size: 2.25rem;
  block-size: 1px;
  background: var(--champagne);
  margin-block-start: var(--space-s);
}
.legal-body p, .legal-body li { color: var(--ink); }
/* every sibling gets rhythm, including a paragraph following a list */
.legal-body section > * + * { margin-block-start: var(--space-s); }
.legal-body ul, .legal-body ol { padding-inline-start: var(--space-m); }
.legal-body li + li { margin-block-start: var(--space-2xs); }
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding-block-end: var(--space-l);
  margin-block-end: var(--space-l);
  border-block-end: 1px solid var(--line-dark);
  font-size: var(--step--1);
  color: var(--meta);
}
.legal-meta strong { color: var(--navy-800); }

/* ---- values / icon grid ---------------------------------------------- */
.value {
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line-dark);
}
/* The approved icon set ships with an opaque white plate, so we frame it as
   a deliberate white tile with a champagne hairline rather than fight it. */
.value__icon {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.55rem;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  margin-block-end: var(--space-s);
}
.icon-inline {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  mix-blend-mode: multiply; /* drops the white plate onto light surfaces */
}
.value h3 { font-size: var(--step-1); }
.value p { color: var(--meta); margin-block-start: var(--space-2xs); }

/* ---- people ---------------------------------------------------------- */
.person {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.person:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.person__media { aspect-ratio: 4 / 5; background: var(--tint); }
/* these boxes stretch as grid items, so the 4:5 source can still be cropped —
   bias the window upward so the crop never takes the top of the head */
.person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.person__body { padding: var(--space-m); }
.person__name { font-size: var(--step-1); }
/* deliberately NOT a stretched link: each card carries an inline <details>
   that must stay clickable, so the name is an ordinary link */
.person__name a { color: inherit; text-decoration: none; }
.person__name a:hover { color: var(--accent-dark); text-decoration: underline; }
.person__role {
  font-size: var(--step--1);
  color: var(--accent-dark);
  font-weight: 500;
  margin-block-start: var(--space-3xs);
}
.person__tags {
  margin-block-start: var(--space-xs);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.04em;
}

/* featured chairman card */
.person--featured {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  background: var(--navy-800);
  color: #E9EEF6;
  border-color: var(--navy-800);
}
.person--featured .person__media { aspect-ratio: 4 / 5; }
.person--featured .person__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.person--featured .person__name { color: #fff; font-size: var(--step-3); }
.person--featured .person__role { color: var(--champagne); font-size: var(--step-0); }
.person--featured p { color: #C1CFE2; margin-block-start: var(--space-s); }

/* profile page header */
.profile {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
}
.profile__portrait img {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.profile__role {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--accent-dark);
  margin-block-start: var(--space-2xs);
}
.profile dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line-dark);
}
.profile dt {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-strong);
}
.profile dd { margin: var(--space-3xs) 0 0; font-size: var(--step--1); }

/* ---- details / accordion --------------------------------------------- */
.disclosure {
  border-block-end: 1px solid var(--line);
}
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-m);
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-inline-end: 1.5px solid var(--champagne-deep);
  border-block-end: 1.5px solid var(--champagne-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.disclosure[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.disclosure__body {
  padding-block-end: var(--space-m);
  max-width: var(--measure);
  color: var(--meta);
}
.disclosure__body > * + * { margin-block-start: var(--space-s); }

/* card-scale disclosure, for the leadership grid */
.disclosure--compact {
  border-block-end: 0;
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-s);
}
.disclosure--compact summary {
  padding-block: var(--space-s) var(--space-2xs);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.disclosure--compact .disclosure__body {
  padding-block-end: var(--space-2xs);
  font-size: var(--step--1);
}

/* ---- tables ---------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table { font-size: var(--step--1); }
.data-table caption {
  text-align: start;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--meta-strong);
  padding-block-end: var(--space-s);
}
.data-table th,
.data-table td {
  text-align: start;
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-block-end: 1px solid var(--line);
  vertical-align: baseline;
}
.data-table thead th {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-strong);
  border-block-end: 1px solid var(--champagne);
  white-space: nowrap;
}
.data-table tbody tr:hover { background: var(--offwhite); }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table a { color: var(--accent-dark); }

.file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-dark);
}
.file-link:hover { text-decoration: underline; }
.file-link img { width: 1rem; height: 1rem; }
.file-link .file-meta {
  color: var(--meta);
  font-size: var(--step--2);
  white-space: nowrap;
}

/* ---- share price panel ------------------------------------------------ */
.share-panel {
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-l);
  position: relative;
  overflow: hidden;
}
.share-panel::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
}
.share-panel__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-block: var(--space-xs) var(--space-2xs);
}
.share-panel__value {
  font-family: var(--font-head);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.share-panel__delta {
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.share-panel__delta[data-dir="up"] { color: #6EE7A8; }
.share-panel__delta[data-dir="down"] { color: #F2A0A0; }
.share-panel dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--space-s);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgba(201, 168, 87, 0.3);
}
.share-panel dt { font-size: var(--step--2); color: #A9B8CD; letter-spacing: 0.08em; text-transform: uppercase; }
.share-panel dd { margin: var(--space-3xs) 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.share-panel__note {
  margin-block-start: var(--space-m);
  font-size: var(--step--2);
  color: #8194AC;
}

/* ---- report feature card ---------------------------------------------- */
.report-feature {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  box-shadow: var(--shadow-sm);
}
.report-feature__cover {
  position: relative;
  max-width: 20rem;
  margin-inline: auto;
}
.report-feature__cover img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
.report-feature__cover::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--champagne), rgba(201, 168, 87, 0.1));
  border-start-start-radius: var(--radius-card);
  border-end-start-radius: var(--radius-card);
  z-index: 1;
}
.report-card__list {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.report-card__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--meta);
}
/* on navy the li rule would otherwise beat the inherited light colour */
.section--navy .report-card__list li,
.kpi-strip .report-card__list li { color: #C1CFE2; }
.report-card__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--champagne-deep);
  transform: rotate(45deg);
  translate: 0 -0.15rem;
}

/* ---- announcement list (container-query driven) ------------------------ */
.release-list {
  container-type: inline-size;
  container-name: releases;
  border-block-start: 1px solid var(--champagne);
}
.release {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-block-end: 1px solid var(--line);
  scroll-margin-block-start: calc(var(--header-h) + var(--space-l));
}
.release__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.release__date {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.release__tag {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne-text);
}
.release__source { font-size: var(--step--2); color: var(--meta); }
.release__title { font-size: var(--step-2); }
.release__body p { color: var(--meta); margin-block-start: var(--space-2xs); max-width: 68ch; }

/* the row goes two-column on its OWN width, not the viewport's */
@container releases (min-width: 44rem) {
  .release {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* ---- forms ------------------------------------------------------------ */
.form { display: grid; gap: var(--space-m); }
.field { display: grid; gap: var(--space-3xs); }
.field label {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-800);
}
.field .hint { font-size: var(--step--2); color: var(--meta); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  background: var(--paper);
  border: 1px solid #C6D0DF;
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 111, 224, 0.15);
  outline: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field [aria-invalid="true"] { border-color: #B42318; }
.field-error {
  font-size: var(--step--2);
  color: #B42318;
  font-weight: 500;
  min-height: 1em;
}
.form__status {
  padding: var(--space-s) var(--space-m);
  border-inline-start: 3px solid var(--accent);
  background: var(--tint);
  font-size: var(--step--1);
  color: var(--navy-800);
}
.form__status:empty { display: none; }
.required { color: #B42318; }

.fieldset-plain { border: 0; padding: 0; margin: 0; }
.fieldset-plain legend {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--navy-800);
  padding: 0;
  margin-block-end: var(--space-s);
}

/* ---- pull quote -------------------------------------------------------- */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--navy-800);
  margin: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: 2px solid var(--champagne);
  max-width: 44ch;
}
.pullquote cite {
  display: block;
  margin-block-start: var(--space-s);
  font-family: var(--font-head);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--meta-strong);
}

/* ---- office / contact cards --------------------------------------------- */
/* offices share the card language so contact reads like the rest of the site */
.office {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  padding-block-start: calc(var(--space-l) + 2px);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease),
              border-color 0.28s var(--ease);
}
.office::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--champagne), rgba(201, 168, 87, 0));
}
.office:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #CBD6E6;
}
.office h3 { font-size: var(--step-1); }
.office address {
  font-style: normal;
  color: var(--meta);
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.65;
}
.office .value-card__icon { margin-block-end: var(--space-s); }
.office__tag {
  display: inline-block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne-text);
}

/* ---- callout ------------------------------------------------------------ */
.callout {
  background: var(--tint);
  border-inline-start: 3px solid var(--accent);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius);
}
.callout h3 { font-size: var(--step-1); }
.callout p { color: var(--meta-strong); margin-block-start: var(--space-2xs); }

/* ---- prose --------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose > * + h2 { margin-block-start: var(--space-xl); }
.prose > * + h3 { margin-block-start: var(--space-l); }
.prose h2 { font-size: var(--step-3); }
.prose h3 { font-size: var(--step-1); }
.prose p { color: var(--ink); }
.prose .lead {
  font-size: var(--step-1);
  color: var(--meta-strong);
  line-height: 1.55;
}
.prose a { color: var(--accent-dark); }
.prose ul, .prose ol { padding-inline-start: var(--space-m); color: var(--ink); }
.prose li + li { margin-block-start: var(--space-2xs); }

/* ---- footer -------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: #A9B8CD;
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
}
.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne) 30%, var(--champagne) 70%, transparent);
  opacity: 0.5;
  margin-block-end: var(--space-2xl);
}
.footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.footer-brand { max-width: 22rem; }
.footer-brand img { width: 3rem; height: 3rem; }
.footer-brand p { margin-block-start: var(--space-s); color: #8194AC; }
.site-footer h2 {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-block-end: var(--space-s);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.site-footer a { color: #C1CFE2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgba(201, 168, 87, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  justify-content: space-between;
  align-items: baseline;
  color: #7A8CA5;
  font-size: var(--step--2);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.footer-note {
  margin-block-start: var(--space-m);
  color: #7B8FA8;
  font-size: var(--step--2);
  max-width: 70ch;
  line-height: 1.6;
}

/* ---- scroll reveal ------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* hero parallax — a few pixels of drift, nothing more */
.hero__media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media { transform: none !important; }
}
/* never let the reveal hide content if JS fails */
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   UTILITIES
   ========================================================================== */
/* ===== utilities ===================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: 46ch; }
.mt-0 { margin-block-start: 0; }
.mt-s { margin-block-start: var(--space-s); }
.mt-m { margin-block-start: var(--space-m); }
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }
.mb-l { margin-block-end: var(--space-l); }
.muted { color: var(--meta); }
.muted-light { color: #A9B8CD; }
.small { font-size: var(--step--1); }
.tabular { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
.cluster--between { justify-content: space-between; }
.full-bleed-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
}


/* ==========================================================================
   PRINT — tuned for investors.html (reports, filings, share data)
   ========================================================================== */
@media print {
  @page { margin: 18mm 14mm; }

  :root { --step-0: 10.5pt; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }

  .site-header,
  .primary-nav,
  .nav-toggle,
  .header-utils,
  .skip-link,
  .hero__cta,
  .site-footer ul,
  .btn,
  .form,
  .email-alerts,
  [data-print="hide"] { display: none !important; }

  .page-hero,
  .kpi-strip,
  .share-panel,
  .section--navy {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0.5cm !important;
  }
  .page-hero::before,
  .page-hero__media,
  .hero__media { display: none !important; }
  .page-hero h1,
  .page-hero p,
  .kpi__value,
  .kpi__label,
  .share-panel__value,
  .share-panel dt,
  .share-panel dd,
  .section--navy h2 { color: #000 !important; }

  .section { padding-block: 0.6cm !important; }

  .share-panel { border: 1pt solid #000; }
  .kpi { border-inline-start: 1pt solid #999; }

  a { color: #000 !important; text-decoration: none; }
  /* investors need the actual filing URLs on paper */
  .data-table a[href^="http"]::after,
  .data-table a[href$=".pdf"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
  }

  .data-table { font-size: 9.5pt; }
  .data-table thead { display: table-header-group; }
  .data-table tr { page-break-inside: avoid; }
  .data-table th, .data-table td { border-block-end: 0.5pt solid #999; }

  h1, h2, h3 { page-break-after: avoid; }
  .card, .report-feature, .disclosure { page-break-inside: avoid; }

  .reveal { opacity: 1 !important; transform: none !important; }

  .site-footer { border-block-start: 1pt solid #000; color: #000 !important; background: #fff !important; }
  .site-footer::before { display: none; }
  .disclaimer { color: #333 !important; }
}