/* ==========================================================================
   Investment Readiness Protocol 360° — Aggelakakis & Associates · Global Group
   Locked palette (Production Spec v3.0 §A4): #024263 petrol · #B63626 brick
   ========================================================================== */

/* --------------------------------------------------------------- theme ----
   Two palettes over one set of semantic tokens.

   The petrol #024263 plays two roles in this design: it is the text colour AND
   the colour of the dark panels. Those roles have to diverge in dark mode — the
   text must go light while the panels stay dark — so they are separate tokens:

     --navy   text, headings, icons        (light in dark mode)
     --brand  filled surfaces and panels   (dark in both modes)

   Same for the brick: --brick is the fill (white text sits on it in both modes,
   so it must stay dark), --brick-ink is the accent text colour.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* text role */
  --navy: #024263;
  /* surface role */
  --brand: #024263;
  --brand-hover: rgba(2, 66, 99, 0.9);
  --brand-deep: #012c3f;
  /* The filled button's hover is a genuine hue shift (navy → sky), not a
     darkened navy. In dark mode --blue turns pale for legibility on the dark
     page background, which would fail white-on-hover text on a button — so
     this indirects to the existing dark-safe --brand-hover there instead. */
  --brand-hover-sky: var(--blue);

  /* The "main" CTA on a dark panel (.btn--on-dark, .btn--tonal) is filled with
     this explicit blue rather than --navy/--brand, per client direction —
     it is a distinct swatch, not a rename of the site's primary navy. */
  --btn-main: #064264;
  --btn-main-hover: #0a5a7d;
  --btn-secondary-dark: #000000;
  --btn-secondary-dark-hover: #1a1a1a;

  --brick: #b63626;          /* fill; carries white text */
  --brick-ink: #b63626;      /* accent text on light surfaces */
  --brick-light: #ff9a85;    /* accent text on dark surfaces */

  --white: #ffffff;          /* page background */
  --elevated: #ffffff;       /* a card sitting on a panel */

  /* The quiet surfaces carry more of the page than anything else, so they are
     where the page gets its colour — or fails to. They used to be near-neutral,
     and --neutral was frankly warm (#d0cfcd): a warm grey beside a cold petrol
     does not read as neutral, it reads as dust, and it covered the two panels
     that matter most (the exclusions and the boundaries). All three are now
     mixed from the petrol itself. No new hue enters the palette; the page
     simply stops being three-quarters colourless.

     They are also a shade deeper than before, which is the part that costs
     something: every ratio below drops by up to 0.5. The tiers that carry text
     stay clear of AA — ink-muted reads 5.38 on surface and 4.92 on tint — and
     the full sweep is run on every template, light and dark, before release. */
  --surface: #eef4f8;        /* was #f8f9fa */
  --neutral: #c2d2da;        /* was #d0cfcd — warm, and outside the palette */
  --tint: #d9e6ef;           /* was #e1e8ed */
  --tint-hover: #c9dae6;
  --blue: #0067c8;
  --teal: #00617f;

  /* Muted tiers are alpha derivations of the text colour. Levels chosen so each
     clears WCAG AA (4.5:1) at 13–15px on --white and --surface. */
  --ink: var(--navy);
  --ink-soft: rgba(2, 66, 99, 0.86);
  --ink-muted: rgba(2, 66, 99, 0.78);
  --ink-quiet: rgba(2, 66, 99, 0.76);
  --ink-faint: rgba(2, 66, 99, 0.72);

  --hairline: rgba(2, 66, 99, 0.18);
  --hairline-strong: rgba(2, 66, 99, 0.45);
  --wash: rgba(2, 66, 99, 0.1);

  --badge-bg: var(--brand);
  --badge-fg: #ffffff;

  /* A filled accent that survives both themes. --teal is a text/line colour and
     flips light in the dark palette, so filling a shape with it and writing
     white on top fails there; this pair carries its own foreground. */
  --accent-fill: #00617f;
  --accent-on-fill: #ffffff;

  /* The ten pillar nodes, petrol → teal. Tokens rather than literals so the
     dark palette can restate the ramp instead of inheriting a fill that its
     foreground cannot sit on. */
  --node-fg: #ffffff;
  --node-1: #024263;
  --node-2: #024666;
  --node-3: #024a6a;
  --node-4: #014e6e;
  --node-5: #015271;
  --node-6: #015574;
  --node-7: #005978;
  --node-8: #005d7c;
  --node-9: #00617f;

  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.82);
  --on-dark-faint: rgba(255, 255, 255, 0.7);

  --shell: 108rem;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Spacing scale.
     Every surface on the page draws its inset from one of these four values,
     and every gap from one of the two below them. That is the whole point: a
     component no longer picks its own padding, so the page cannot drift into
     four different rhythms — and a narrow screen is corrected in one place
     rather than component by component.

     They matter most where surfaces nest. The Engine section is a card inside
     a panel inside the page gutter; with each of the three choosing its own
     comfortable desktop inset, a 390px phone was left 198px of content — half
     the screen was margin. The breakpoint blocks below are the only place
     these change. */
  --gutter: 24px;                        /* page edge */
  --pad-panel: clamp(40px, 5vw, 72px);   /* the largest wrappers */
  --pad-surface: clamp(28px, 4vw, 48px); /* mid-size panels and bands */
  --pad-card: 32px;                      /* a single card */
  --pad-tight: 24px;                     /* a list item or small tile */
  --gap-grid: 28px;                      /* between cards in a grid */
  --gap-header: 56px;                    /* a section header to its content */

  /* One flat 16px everywhere a surface is meant to look rounded. --r-pill used
     to be 9999px — a true capsule — which is also how every perfect circle on
     the site got its shape (avatars, numbered nodes, icon buttons all set
     border-radius to this same token, since 9999px round a square box exactly
     as well as it rounds a pill). Flattening it to 16px would have squared
     those circles off with it, so circular elements were moved onto the new
     --r-circle token below and this one is now free to serve only the shapes
     it was visually doing anyway — buttons, chips, pills. */
  --r-shell: 16px;
  --r-panel: 16px;
  --r-card-lg: 16px;
  --r-card: 16px;
  --r-inner: 16px;
  --r-pill: 16px;
  --r-circle: 50%;
  /* .btn (the CTA component) now runs its own, tighter radius — chips and
     pill-shaped nav links stay on --r-pill above. */
  --r-btn: 6px;

  /* A soft black ambient shadow, layered under the existing shadows rather
     than replacing them, on every surface that already carries one. */
  --sh-glow: 0px 6px 20px -6px rgba(0, 0, 0, 0.2);
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.08), var(--sh-glow);
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.14), var(--sh-glow);
  --sh-hover: 0 8px 20px rgba(0, 0, 0, 0.12), var(--sh-glow);
  --sh-hover-dark: 0 10px 24px rgba(0, 0, 0, 0.2), var(--sh-glow);
}

/* The spacing scale narrows in three steps. Nothing else needs a media query
   for inset: every surface already reads these. */
@media (max-width: 1000px) {
  :root {
    --pad-panel: 40px;
    --pad-surface: 32px;
    --pad-card: 28px;
    --pad-tight: 22px;
    --gap-grid: 24px;
    --gap-header: 44px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
    --pad-panel: 22px;
    --pad-surface: 20px;
    --pad-card: 22px;
    --pad-tight: 18px;
    --gap-grid: 18px;
    --gap-header: 32px;
  }
}

/* A phone. The nested surfaces stop being a second and third gutter and become
   what they are meant to be — a frame — so the words get the width. */
@media (max-width: 430px) {
  :root {
    --gutter: 16px;
    --pad-panel: 16px;
    --pad-surface: 16px;
    --pad-card: 20px;
    --pad-tight: 16px;
    --gap-grid: 16px;
    --gap-header: 28px;
  }
}

/* Dark. Applied either by the visitor's stored choice (data-theme on <html>,
   set by a blocking script before first paint) or, absent a choice, by the
   operating system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"],
:root:not([data-theme]) {
  --dark-navy: #cfe6f2;
  --dark-brand: #0d3b4f;
  --dark-brand-hover: #14536d;
  --dark-brand-deep: #05202c;
  --dark-white: #06202b;
  --dark-elevated: #103548;
  --dark-surface: #0b2a38;
  --dark-neutral: #17394a;
  --dark-tint: #123c50;
  --dark-tint-hover: #17495f;
  --dark-blue: #7cc3e6;
  --dark-teal: #4aa3c0;

  --dark-ink-soft: rgba(207, 230, 242, 0.9);
  --dark-ink-muted: rgba(207, 230, 242, 0.82);
  --dark-ink-quiet: rgba(207, 230, 242, 0.78);
  --dark-ink-faint: rgba(207, 230, 242, 0.72);
  --dark-hairline: rgba(207, 230, 242, 0.2);
  --dark-hairline-strong: rgba(207, 230, 242, 0.5);
  --dark-wash: rgba(207, 230, 242, 0.1);

  /* The same ramp restated for the dark palette: it starts on the dark badge
     colour and runs to a light teal, with a dark foreground. Inheriting the
     light ramp would have put near-black numerals on deep petrol. */
  --dark-accent-fill: #9ad7e9;
  --dark-node-1: #cfe6f2;
  --dark-node-2: #c8e4f1;
  --dark-node-3: #c2e2f0;
  --dark-node-4: #bbe0ef;
  --dark-node-5: #b4deee;
  --dark-node-6: #aeddec;
  --dark-node-7: #a7dbeb;
  --dark-node-8: #a1d9ea;
  --dark-node-9: #9ad7e9;
}

/* One assignment block, reached two ways, so the two triggers can never drift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --badge-bg: var(--dark-navy);
    --badge-fg: #05202c;
    --accent-fill: var(--dark-accent-fill);
    --accent-on-fill: #05202c;
    --node-fg: #05202c;
    --node-1: var(--dark-node-1);
    --node-2: var(--dark-node-2);
    --node-3: var(--dark-node-3);
    --node-4: var(--dark-node-4);
    --node-5: var(--dark-node-5);
    --node-6: var(--dark-node-6);
    --node-7: var(--dark-node-7);
    --node-8: var(--dark-node-8);
    --node-9: var(--dark-node-9);
    --navy: var(--dark-navy);
    --brand: var(--dark-brand);
    --brand-hover: var(--dark-brand-hover);
    --brand-hover-sky: var(--dark-brand-hover);
    --brand-deep: var(--dark-brand-deep);
    --brick-ink: var(--brick-light);
    --white: var(--dark-white);
    --elevated: var(--dark-elevated);
    --surface: var(--dark-surface);
    --neutral: var(--dark-neutral);
    --tint: var(--dark-tint);
    --tint-hover: var(--dark-tint-hover);
    --blue: var(--dark-blue);
    --teal: var(--dark-teal);
    --ink-soft: var(--dark-ink-soft);
    --ink-muted: var(--dark-ink-muted);
    --ink-quiet: var(--dark-ink-quiet);
    --ink-faint: var(--dark-ink-faint);
    --hairline: var(--dark-hairline);
    --hairline-strong: var(--dark-hairline-strong);
    --wash: var(--dark-wash);
    --sh-1: 0 1px 3px rgba(0, 0, 0, 0.4), var(--sh-glow);
    --sh-2: 0 4px 12px rgba(0, 0, 0, 0.5), var(--sh-glow);
    --sh-hover: 0 8px 20px rgba(0, 0, 0, 0.5), var(--sh-glow);
    --sh-hover-dark: 0 10px 24px rgba(0, 0, 0, 0.6), var(--sh-glow);
  }
}

:root[data-theme="dark"] {
  --badge-bg: var(--dark-navy);
  --badge-fg: #05202c;
  --accent-fill: var(--dark-accent-fill);
  --accent-on-fill: #05202c;
  --node-fg: #05202c;
  --node-1: var(--dark-node-1);
  --node-2: var(--dark-node-2);
  --node-3: var(--dark-node-3);
  --node-4: var(--dark-node-4);
  --node-5: var(--dark-node-5);
  --node-6: var(--dark-node-6);
  --node-7: var(--dark-node-7);
  --node-8: var(--dark-node-8);
  --node-9: var(--dark-node-9);
  --navy: var(--dark-navy);
  --brand: var(--dark-brand);
  --brand-hover: var(--dark-brand-hover);
  --brand-hover-sky: var(--dark-brand-hover);
  --brand-deep: var(--dark-brand-deep);
  --brick-ink: var(--brick-light);
  --white: var(--dark-white);
  --elevated: var(--dark-elevated);
  --surface: var(--dark-surface);
  --neutral: var(--dark-neutral);
  --tint: var(--dark-tint);
  --tint-hover: var(--dark-tint-hover);
  --blue: var(--dark-blue);
  --teal: var(--dark-teal);
  --ink-soft: var(--dark-ink-soft);
  --ink-muted: var(--dark-ink-muted);
  --ink-quiet: var(--dark-ink-quiet);
  --ink-faint: var(--dark-ink-faint);
  --hairline: var(--dark-hairline);
  --hairline-strong: var(--dark-hairline-strong);
  --wash: var(--dark-wash);
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.4), var(--sh-glow);
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.5), var(--sh-glow);
  --sh-hover: 0 8px 20px rgba(0, 0, 0, 0.5), var(--sh-glow);
  --sh-hover-dark: 0 10px 24px rgba(0, 0, 0, 0.6), var(--sh-glow);
}

/* An explicit light choice must beat the OS preference. */
:root[data-theme="light"] { color-scheme: light; }

/* --------------------------------------------------------------- base ---- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Ubuntu, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }

/* theme.json's global styles set a LITERAL petrol on every heading via an
   element selector. It beats inheritance and cannot follow the palette, so in
   dark mode headings came out #024263 on a dark card — 1.4:1. Reclaim them for
   the token; :root h1 is (0,1,1) and outranks theme.json's (0,0,1) whichever
   stylesheet the browser sees last. */
:root h1, :root h2, :root h3,
:root h4, :root h5, :root h6 { color: var(--navy); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ layout ---- */

.page { position: relative; display: flex; flex-direction: column; width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; }

/* Anchor targets must clear the sticky header. */
section[id] { scroll-margin-top: 124px; }
#hero { scroll-margin-top: 0; }

/* Section rhythm: the gap between two sections is one section's bottom pad. */
/* Vertical rhythm. The lower bound of each clamp governs phones and is left
   alone; the vw term and the cap were raised so a desktop gets noticeably more
   air between sections without the page growing on small screens. Values stay
   on the 8px grid. */
.section { padding: 0 var(--gutter) clamp(96px, 11.5vw, 184px); }
.section--first { padding-top: clamp(88px, 10vw, 160px); }
/* After the interior hero. --first opens a section that carries its own
   heading, which is right on the About and Invest pages; on the utility
   templates what follows the hero is the payload itself — a search box, a list
   of results, the body of an article — and 160px of nothing above it reads as a
   fault rather than as room to breathe. */
.section--after-hero { padding-top: clamp(40px, 4.5vw, 64px); }
.section--tight { padding-bottom: clamp(72px, 8.5vw, 136px); }
.section--slim { padding-bottom: clamp(72px, 8.5vw, 128px); }

@media (min-width: 1000px) {
  /* rem, not em: WordPress global styles set a body font-size, and an em here
     would silently rescale the page gutters. 4rem renders identically. */
  .edge-pad { padding-left: 4rem; padding-right: 4rem; }
}

.eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--brick-ink);
  margin-bottom: 12px;
}
.eyebrow--quiet { color: var(--ink-muted); }
.eyebrow--on-dark { color: var(--brick-light); }

.h2 {
  color: var(--navy);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.h2--sm { font-size: clamp(28px, 3vw, 40px); }
.h2--on-dark { color: var(--on-dark); }

.lede {
  color: var(--ink-muted);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
}

.note {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-header);
  align-items: start;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-grid); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-grid); }

/* The sentence beside the hub marquee. The first column used to be
   minmax(200px, 1fr) against a 3fr marquee, so on anything under a wide desktop
   the text collapsed to its 200px minimum and broke every three words. It now
   claims a larger share, and drops below the marquee before it gets that
   narrow again. */
.nodes-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(0, 2fr);
  gap: 32px;
  align-items: center;
}

/* ----------------------------------------------------------- buttons ---- */

/* A call to action carries a full label and a short one — see a360_cta(). The
   full label is what assistive technology announces at every width, because the
   accessible name comes from aria-label; these rules only decide which of the
   two the eye sees. */
.btn__label { display: inline; }
.btn__short { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 29px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px var(--wash);
  overflow-wrap: break-word;
  /* A label that has to wrap should break into even lines rather than leaving
     one word alone on the last one. */
  text-wrap: balance;
  /* Height is a floor, never a ceiling: a fixed height with a label that wraps
     puts the text outside the button. */
  min-height: 48px;
  transition: background 300ms var(--ease), color 300ms var(--ease),
              box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
.btn:active { transform: scale(0.95); }
.btn .icon { width: 18px; height: 18px; flex: none; }

.btn--filled { background: var(--brand); color: var(--on-dark); }
.btn--filled:hover {
  background: var(--brand-hover-sky);
  color: var(--on-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.btn--tonal { background: var(--btn-main); color: var(--on-dark); }
.btn--tonal:hover {
  background: var(--btn-main-hover);
  color: var(--on-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

/* The secondary button reads by context, not by a single fixed colour: solid
   navy text and border on a light surface (this variant), filled black on a
   dark one (.btn--ghost-on-dark below) — never a translucent tint. */
.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--wash); color: var(--navy); }

.btn--on-dark { background: var(--btn-main); color: var(--on-dark); }
.btn--on-dark:hover {
  background: var(--btn-main-hover);
  color: var(--on-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.btn--ghost-on-dark {
  background: var(--btn-secondary-dark);
  border-color: var(--btn-secondary-dark);
  color: var(--on-dark);
}
.btn--ghost-on-dark:hover {
  background: var(--btn-secondary-dark-hover);
  border-color: var(--btn-secondary-dark-hover);
  color: var(--on-dark);
}

.btn--lg { min-height: 56px; padding: 14px 36px; font-size: 16px; }
/* WCAG 2.2 Target Size (Minimum) is 24x24; 44px is the comfortable floor for
   a thumb, and this variant only appears in the header where space is tight. */
.btn--sm { min-height: 44px; padding: 10px 22px; font-size: 14px; }

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 200ms var(--ease);
}
.link-cta:hover { color: var(--brick-ink); }
.link-cta .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------ header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; flex-direction: column; align-items: stretch; width: fit-content; gap: 8px; }
.brand__logo { height: 38px; width: auto; }
.brand__sub {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--brick-ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.brand--footer .brand__logo { height: 40px; }
.brand--footer .brand__sub { font-size: 17px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.nav-links a:hover { background: var(--wash); color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.header-contact {
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 300ms var(--ease);
}
.header-contact:hover { background: var(--wash); color: var(--navy); }
@media (min-width: 1240px) { .header-contact { display: inline-flex; } }

.header-cta { flex: none; white-space: nowrap; }

.nav-mobile { display: none; }

/* The toggle is a finger target first: 48×48 minimum, which is the smallest
   comfortable tap area on a phone (WCAG 2.5.5 AAA / Apple HIG). */
.nav-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--r-circle);
  background: var(--tint);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary:hover { background: var(--tint-hover); }
.nav-mobile > summary:active { background: var(--neutral); }

/* Three bars that fold into a cross while the drawer is open. */
.nav-mobile__burger {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
  flex: none;
}
.nav-mobile__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 160ms var(--ease), top 260ms var(--ease);
}
.nav-mobile__burger span:nth-child(1) { top: 0; }
.nav-mobile__burger span:nth-child(2) { top: 6px; }
.nav-mobile__burger span:nth-child(3) { top: 12px; }
.nav-mobile[open] .nav-mobile__burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-mobile[open] .nav-mobile__burger span:nth-child(2) { opacity: 0; }
.nav-mobile[open] .nav-mobile__burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* The UA hides non-summary children of a closed <details>; overriding that is
   what lets the drawer slide rather than snap. Without JS the panel still opens
   and closes from the toggle alone. */
.nav-mobile > .nav-mobile__panel { display: flex; }
.nav-mobile > .nav-mobile__backdrop { display: block; }

.nav-mobile__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(2, 20, 30, 0.55);
  opacity: 1;
  transition: opacity 280ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile:not([open]) > .nav-mobile__backdrop { opacity: 0; pointer-events: none; }

.nav-mobile__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(86vw, 22rem);
  flex-direction: column;
  background: var(--white);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
  transform: translateX(0);
  transition: transform 300ms var(--ease), visibility 300ms var(--ease);
  overscroll-behavior: contain;
  /* dvh so the drawer is not cut off by mobile browser chrome. */
  height: 100dvh;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 0;
  gap: 0;
  min-width: 0;
}
.nav-mobile:not([open]) > .nav-mobile__panel {
  transform: translateX(101%);
  visibility: hidden;
}
/* Set by the swipe handler while a finger is dragging. */
.nav-mobile__panel.is-dragging { transition: none; }

.nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 14px 12px 14px 24px;
  border-bottom: 1px solid var(--tint);
}
.nav-mobile__title {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-mobile__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: var(--r-circle);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms var(--ease);
}
.nav-mobile__close:hover { background: var(--surface); }
.nav-mobile__close:active { background: var(--tint); }

.nav-mobile__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-mobile__panel .nav-links__list {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.nav-mobile__panel a {
  display: flex;
  align-items: center;
  min-height: 56px;          /* generous row height for thumbs */
  padding: 14px 16px;
  border-radius: var(--r-inner);
  color: var(--navy);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms var(--ease);
}
.nav-mobile__panel a:hover { background: var(--surface); color: var(--navy); }
.nav-mobile__panel a:active { background: var(--tint); }

.nav-mobile__panel .nav-mobile__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 12px;
  background: var(--brand);
  color: var(--on-dark);
  font-weight: 500;
  text-align: center;
}
.nav-mobile__panel .nav-mobile__cta:hover,
.nav-mobile__panel .nav-mobile__cta:active { background: var(--brand-hover); color: var(--on-dark); }

/* Drag handle: signals that the panel can be swiped away. */
.nav-mobile__grip {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 4px;
  height: 46px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: var(--neutral);
  pointer-events: none;
}

/* The page must not scroll behind an open drawer. */
body.a360-menu-open { overflow: hidden; touch-action: none; }

@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-mobile { display: block; }
}

/* On mobile the header carries the brand and the menu, nothing else. Both calls
   to action live inside the Sections panel instead, so the bar cannot crowd or
   clip at narrow widths. */
@media (max-width: 860px) {
  .header-cta,
  .header-contact { display: none !important; }
  .site-header__inner { gap: 12px; }

  /* Icon-only toggle: the word would only compete with the brand for width. */
  .nav-mobile__toggle-label { display: none; }
  .nav-mobile > summary { width: 48px; padding: 0; }
}

/* -------------------------------------------------------------- hero ---- */

.hero { padding: 24px var(--gutter) 0; }

.hero__shell {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  border-radius: var(--r-shell);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  overflow: hidden;
  padding: clamp(64px, 9vw, 136px) var(--pad-panel) clamp(56px, 7vw, 96px);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__media .photo,
.hero__media .photo img { position: absolute; inset: -6%; width: 112%; height: 112%; }
.hero__media .photo img { transform: scale(1.02); object-fit: cover; }
/* The prototype's scrim ran dark-at-the-bottom (0.75) → light-at-the-top (0.15),
   which suited the earlier two-column hero. Once the 360° wheel was dropped the
   hero became single-column with every line of text at the TOP-LEFT — i.e. over
   the weakest part of the scrim, measuring 2.56:1 for the H1 (AA needs 3:1).
   The scrim is now weighted toward the text column instead, so the photo stays
   clearly visible on the open right-hand side where nothing overlaps it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(2, 20, 30, 0.80) 0%,
      rgba(2, 20, 30, 0.76) 45%,
      rgba(2, 20, 30, 0.68) 67%,
      rgba(2, 20, 30, 0.30) 86%,
      rgba(2, 20, 30, 0.16) 100%),
    linear-gradient(to top,
      rgba(2, 20, 30, 0.45) 0%,
      rgba(2, 20, 30, 0.10) 40%,
      rgba(2, 20, 30, 0.00) 100%);
}

/* Below the split, text spans the full width — the scrim must too. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(2, 20, 30, 0.78) 0%, rgba(2, 20, 30, 0.70) 100%),
      linear-gradient(to top, rgba(2, 20, 30, 0.35) 0%, rgba(2, 20, 30, 0.10) 60%, rgba(2, 20, 30, 0) 100%);
  }
}

.hero__body { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 40px; }

/* The copy column spans two thirds of the hero; the open third on the right is
   where the photograph reads. Children fill the column rather than carrying
   their own narrower caps. */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 66.6667%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 32px;
}
.badge__dot { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--brick); }

.hero h1 {
  color: var(--on-dark);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 100%;
  margin-bottom: 24px;
}
.hero__lede {
  color: var(--on-dark-muted);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.55;
  max-width: 100%;
  margin-bottom: 24px;
}
.hero__claims {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 40px;
}
.hero__claims .sep { color: rgba(255, 255, 255, 0.4); }
.hero__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero__caveat {
  color: var(--on-dark-faint);
  font-size: 13px;
  line-height: 1.6;
  max-width: 44rem;
}
.hero__actions .btn--ghost-on-dark { margin-top: 6px; }

.hero__marquee {
  width: 100%;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

/* ----------------------------------------------------------- marquee ---- */

.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }

.marquee-city {
  margin: 0 10px;
  flex: none;
  white-space: nowrap;
  color: var(--on-dark-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.marquee-city .sep { margin-left: 20px; color: rgba(255, 255, 255, 0.35); }

.marquee-chip {
  margin: 0 24px;
  flex: none;
  white-space: nowrap;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}

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

/* ------------------------------------------------------------- cards ---- */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
.card:hover { box-shadow: var(--sh-hover); transform: scale(1.02); }

.card--navy { background: var(--brand); color: var(--on-dark); box-shadow: var(--sh-2); }
.card--brick { background: var(--brick); color: var(--on-dark); box-shadow: var(--sh-2); }
.card--tint { background: var(--tint); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.card--navy:hover,
.card--brick:hover,
.card--tint:hover { box-shadow: var(--sh-hover-dark); transform: scale(1.02); }

.card--white { background: var(--elevated); border-radius: var(--r-card-lg); }

.card__title { color: var(--navy); font-size: 24px; font-weight: 500; line-height: 1.3; }
.card__title--sm { font-size: 22px; }
.card__text { color: var(--ink-muted); font-size: 16px; line-height: 1.6; }

.card--navy .card__title,
.card--brick .card__title { color: var(--on-dark); }
.card--navy .card__text,
.card--brick .card__text { color: rgba(255, 255, 255, 0.88); }
.card--tint .card__text { color: var(--navy); }

.numeral {
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--tint);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
}
.card--navy .numeral { background: rgba(255, 255, 255, 0.18); color: var(--on-dark); }

/* 02 — Exposure */
.exposure-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.exposure-card__label { font-size: 24px; font-weight: 500; line-height: 1.3; margin-bottom: 16px; }
.exposure-card__figure { font-size: 28px; font-weight: 500; line-height: 1.25; margin-bottom: 10px; }
.exposure-card__note { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.card--navy .exposure-card__note { color: rgba(255, 255, 255, 0.86); }

/* 03 — Engine */
.panel {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  border-radius: var(--r-shell);
  overflow: hidden;
  padding: var(--pad-panel);
}
.panel--surface { background: var(--surface); }
.panel--navy { background: var(--brand); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.panel__content { position: relative; z-index: 10; }

.engine-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.engine-card .photo { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-inner); }

/* 04 — Distinction */
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 24px 32px;
}
.cmp-head { padding: 0 8px 16px; }
.cmp-head__cell { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--navy); }
.cmp-head__cell--muted { color: var(--ink-muted); }

.cmp-rows { display: flex; flex-direction: column; gap: 16px; }
.cmp-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  transition: box-shadow 300ms var(--ease);
}
.cmp-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.cmp-card__label { color: var(--navy); font-size: 24px; font-weight: 500; line-height: 1.3; }
.cmp-card__market { color: var(--ink-muted); font-size: 16px; line-height: 1.65; }
.cmp-card__ours {
  background: var(--tint);
  border-radius: var(--r-inner);
  padding: 20px 24px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.65;
}
.cmp-mobile-label {
  display: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.cmp-card__market .cmp-mobile-label { color: var(--ink-muted); }
.cmp-card__ours .cmp-mobile-label { color: var(--navy); }

/* 04b — Pull quote */
.pullquote {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--brick);
  border-radius: var(--r-panel);
  padding: clamp(40px, 5vw, 64px) var(--pad-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pullquote__eyebrow { color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.pullquote__text {
  color: var(--on-dark);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  max-width: 46ch;
}

/* 05 — Process */
.step-card { min-height: 320px; display: flex; flex-direction: column; gap: 20px; }
.step-card__num {
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--r-inner);
  background: var(--brand);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
}
/* Intake in petrol, the analytical middle in teal, the decision in brick. The
   four numerals were one colour and said nothing; now they say which part of
   the method you are looking at. */
.step-card:nth-child(2) .step-card__num,
.step-card:nth-child(3) .step-card__num { background: var(--accent-fill); color: var(--accent-on-fill); }
.step-card__num--brick { background: var(--brick); }

/* 05b — Mid-page CTA */
.cta-band {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--tint);
  border-radius: var(--r-panel);
  padding: var(--pad-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-band__text {
  color: var(--navy);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  max-width: 34rem;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Inside the Method panel. A translucent white surface rather than a second
   colour: it has to read as part of the panel it sits in, not as a card that
   happens to be resting on it. */
.cta-band--inset {
  max-width: none;
  margin-top: var(--gap-grid);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-card-lg);
  padding: var(--pad-card);
}
.cta-band--inset .cta-band__text { color: var(--on-dark); }

/* 06 — Pillars.
   One ordered list, read top to bottom, with a rail through the numbers.

   The section used to be a three-column grid of ten cards with two photo tiles
   set into it. The order was correct but invisible: the eye had to jump a
   column, skip a photo, come back — so only the numerals said which pillar
   followed which. Here the reading direction, the numerals and the rail all
   carry the same sequence, and the photographs move to the column beside it
   where they cannot break the run.

   The rail is drawn per row rather than once down the list, because a row's
   height depends on how long its title and question are. Every row carries a
   full-height segment; the first starts at its node and the last stops at its
   own, so the line begins and ends on a node whatever the rows in between
   turn out to measure. */
.pillar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: stretch;
}

.pillar-flow {
  /* Where a node's centre sits inside its row: --rail across, --rail-top down.
     Both are the row's padding plus half the node, so any breakpoint that
     changes the padding changes these with it — and the rail keeps meeting the
     nodes exactly. */
  --rail: 36px;
  --rail-top: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The rows are read, not operated: nothing here is a control, so there is no
   hover state, no pointer and nothing to tab to. */
.pillar-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: 8px 20px;
  padding: 16px;
}
.pillar-step::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}
.pillar-step:first-child::before { top: var(--rail-top); }
.pillar-step--last::before { bottom: auto; height: var(--rail-top); }

/* The node sits on the rail, so it is opaque and painted over it. */
.pillar-step__num {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circle);
  background: var(--badge-bg);
  color: var(--badge-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* The nodes advance with the sequence: petrol at the first, the teal that the
   Index and the screening already use by the ninth, brick at the tenth — the
   one that stops. A single hue down ten nodes said "ten of the same thing";
   the ramp says the reader is getting somewhere. */
.pillar-step .pillar-step__num { color: var(--node-fg); }
.pillar-step:nth-child(1) .pillar-step__num { background: var(--node-1); }
.pillar-step:nth-child(2) .pillar-step__num { background: var(--node-2); }
.pillar-step:nth-child(3) .pillar-step__num { background: var(--node-3); }
.pillar-step:nth-child(4) .pillar-step__num { background: var(--node-4); }
.pillar-step:nth-child(5) .pillar-step__num { background: var(--node-5); }
.pillar-step:nth-child(6) .pillar-step__num { background: var(--node-6); }
.pillar-step:nth-child(7) .pillar-step__num { background: var(--node-7); }
.pillar-step:nth-child(8) .pillar-step__num { background: var(--node-8); }
.pillar-step:nth-child(9) .pillar-step__num { background: var(--node-9); }
.pillar-step--last .pillar-step__num { background: var(--brick); color: #ffffff; }

/* Eight pixels drop the first line of text into the middle of the node beside
   it: the node is 40px tall, a title line is 23. */
.pillar-step__title {
  margin: 0;
  padding-top: 8px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.pillar-step__q {
  margin: 0;
  padding-top: 8px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The photographs and the call to action share the column beside the rail and
   stretch to its height, so the section keeps its imagery without a photo ever
   landing between two consecutive pillars. */
.pillar-aside { display: flex; flex-direction: column; gap: var(--gap-grid); }
.pillar-photo { flex: 1 1 0; min-height: 200px; border-radius: var(--r-card); }

/* ---- pillars: the call to action that closes the column ----
   It sits under the two photographs, filled in brick so it reads as an action
   and not as an eleventh pillar. */
.pillar-cta {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 22px 24px;
  border-radius: var(--r-card);
  background: var(--brick);
  color: #ffffff;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease), background 300ms var(--ease);
}

.pillar-cta:hover,
.pillar-cta:focus-visible {
  background: #9c2d20;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.pillar-cta__text {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.32;
  color: #ffffff;
}

.pillar-cta__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.pillar-cta__go svg { width: 18px; height: 18px; }


/* 07 — Index */
.index-card { background: var(--elevated); border-radius: var(--r-card-lg); padding: var(--pad-surface); }

.iri-grades,
.iri-bar { display: grid; grid-template-columns: 45fr 15fr 15fr 15fr 10fr; }
.iri-grades { gap: 4px; margin-bottom: 12px; }
.iri-grades span { font-size: 22px; font-weight: 500; color: var(--navy); text-align: center; }
.iri-grades span.is-low { color: var(--brick-ink); }

.iri-bar { gap: 3px; height: 14px; }
.iri-bar span { border-radius: var(--r-pill); }
.iri-bar span:nth-child(1) { background: var(--neutral); }
.iri-bar span:nth-child(2) { background: #b9c6cf; }
.iri-bar span:nth-child(3) { background: #7fa2b4; }
.iri-bar span:nth-child(4) { background: var(--teal); }
.iri-bar span:nth-child(5) { background: var(--brand); }

.iri-scale { position: relative; height: 28px; margin-top: 12px; }
.iri-scale span {
  position: absolute;
  top: 0;
  font-size: 13px;
  color: var(--ink-muted);
  transform: translateX(-50%);
}
.iri-scale span:first-child { left: 0; transform: none; }
.iri-scale span:last-child { left: auto; right: 0; transform: none; }

.iri-legend { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--neutral); gap: 20px; }
.iri-legend > div { display: flex; flex-direction: column; gap: 10px; }
.iri-chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--neutral);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}
.iri-chip--tint { background: var(--tint); }
.iri-chip--navy { background: var(--brand); color: var(--on-dark); }
/* must not use a bare `.iri-legend p` — it would out-specify the chip colours */
.iri-legend .iri-desc { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }

.index-note {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 24px;
  max-width: none;   /* runs the full width of the panel */
}

/* 08 — Audience */
/* ---- 08: the bento ----
   The photograph is a tall block on the left and the four audiences sit beside
   it as a 2x2. Four across a single row gave each card a column narrower than
   its own title — "Family Offices & Boards" broke onto two lines in every one
   of them — while the photo row above was half empty. */

.audience-bento {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--gap-grid);
  align-items: stretch;
}

.audience-bento__photo { display: flex; }
.audience-bento__photo .photo {
  flex: 1;
  min-height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
}
.audience-bento__photo .photo img { width: 100%; height: 100%; object-fit: cover; }

.audience-bento__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
}
.audience-aside {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.audience-aside p { color: var(--navy); font-size: 18px; line-height: 1.55; }

/* No arbitrary minimum height. It was there to keep four cards level on one
   row; in the bento the grid already stretches them to their row, and on a
   phone, where each card is its own row, 260px was empty space below three
   lines of text. */
.audience-card { display: flex; flex-direction: column; gap: 16px; }

.not-for {
  margin-top: var(--gap-grid);
  /* Full brick rather than a neutral panel with a brick edge: the exclusions
     are the one place on the page where the answer is no, and a filled red
     box says that on its own — the left accent that used to carry that
     signal would now sit brick-on-brick and disappear, so it comes off with
     the neutral fill it was drawn against. */
  background: var(--brick);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--gap-grid) clamp(24px, 4vw, 56px);
  align-items: start;
}

.not-for__title {
  margin: 0;
  color: var(--on-dark);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.not-for__lede {
  margin: 10px 0 0;
  /* Body-weight white on brick: full white measures 5.92:1 here, comfortably
     past the 4.5 that text this size needs, but reserving pure white for the
     title keeps a visible hierarchy between heading and copy. */
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.65;
  max-width: 40ch;
}

.not-for__label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* One exclusion, one line. They used to run together as a single paragraph
   separated by middots, which meant an item could break across two lines while
   the next one started on the same line as the previous one ended — nothing in
   the shape of the text told you where one condition stopped. */
.not-for__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: none;
}
.not-for__list li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.55;
  /* Keeps a two-line item from leaving one word alone on the second line. */
  text-wrap: pretty;
}
.not-for__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 10px;
  height: 2px;
  /* Was brick on the neutral panel; brick on a brick fill would be invisible. */
  background: var(--on-dark);
}
.not-for .eyebrow--quiet,
.boundaries .eyebrow--quiet { color: var(--on-dark); }

/* 09 — Proof */
.stat-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--brand);
}
.stat-tile .photo,
.stat-tile .photo img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  border-radius: 0;
}
.stat-tile .photo img { transform: scale(1.02); object-fit: cover; }
/* A petrol veil rather than a near-black one. Denser at the foot than the
   near-black it replaces (0.88 against 0.78), so the white numerals read at
   9.7:1 over a white photograph where they read 9.5:1 before — the hue changes,
   the legibility does not. */
.stat-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(2, 48, 72, 0.88) 0%, rgba(2, 48, 72, 0.28) 48%, rgba(2, 66, 99, 0.04) 74%);
  pointer-events: none;
}
.stat-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.stat-num {
  color: var(--on-dark);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.stat-label { color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.4; }

.hubs-row { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); }
.hubs-row__text { color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.hubs-row__marquee { overflow: hidden; }

.disclaimer { color: var(--ink-quiet); font-size: 13px; line-height: 1.7; max-width: 52rem; }

/* 11 — Boundaries */
.boundaries {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--brick);
  border-radius: var(--r-card-lg);
  padding: var(--pad-surface);
}
.boundaries__text { color: rgba(255, 255, 255, 0.88); font-size: 16px; line-height: 1.8; }

/* 12 — Final CTA */
.final-cta {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--brand);
  border-radius: var(--r-shell);
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) var(--pad-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.final-cta__body { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; }
.final-cta h2 {
  color: var(--on-dark);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  max-width: 24ch;
}
.final-cta__caveat {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 28px;
  max-width: 38rem;
}
.final-cta .btn--ghost-on-dark { margin-top: 20px; height: 46px; padding: 0 28px; }

/* ------------------------------------------------------------ footer ---- */

.site-footer { padding: 48px 24px 40px; background: var(--white); }
.site-footer__inner { max-width: var(--shell); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: flex-end;
}
.site-footer__hubs { color: var(--ink-muted); font-size: 14px; }
/* Three Executive Brief controls are buttons rather than links, because they
   open a dialog: a browser shows an anchor's destination in the status bar, and
   these have none to show. A button carries the user agent's own font, border
   and background, so each of them undoes that here rather than being restyled
   from scratch. */
.pillar-cta,
.site-footer__link,
.nav-mobile__panel .nav-mobile__cta {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.pillar-cta { width: 100%; text-align: left; }
.site-footer__link { background: none; }

.site-footer__link {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  transition: background 200ms var(--ease);
}
.site-footer__link:hover { background: var(--wash); color: var(--navy); }
.site-footer__link--filled { background: var(--brand); color: var(--on-dark); }
.site-footer__link--filled:hover { background: var(--ink-soft); color: var(--on-dark); }

.site-footer__seo { color: var(--ink-faint); font-size: 14px; line-height: 1.7; max-width: 62rem; }

.site-footer__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.site-footer__group-label {
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.site-footer__group-list { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.site-footer__group-list a {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 200ms var(--ease);
}
.site-footer__group-list a:hover { color: var(--navy); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tint);
  padding-top: 20px;
}
.site-footer__copyright { color: var(--ink-faint); font-size: 13px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-links button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.legal-links button:hover { color: var(--navy); }

/* ------------------------------------------------- image placeholders ---- */

.photo { position: relative; overflow: hidden; border-radius: var(--r-inner); background: var(--tint); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border: 1px dashed var(--hairline-strong);
}
.photo--empty::after {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  max-width: 22rem;
}
/* On dark tiles the frame is the tile itself — drop the dashed box and let the
   caption centre on the full tile rather than on the -6% bleed box. */
.stat-tile .photo--empty,
.hero__media .photo--empty { border: 0; background: transparent; inset: 0; width: 100%; height: 100%; }
.stat-tile .photo--empty::after,
.hero__media .photo--empty::after { color: rgba(255, 255, 255, 0.45); }

/* A certification mark: square, small, never cropped. */
.photo--badge { width: 84px; height: 84px; flex: none; border-radius: var(--r-card); }
.photo--badge img { object-fit: contain; }
.photo--badge.photo--empty { padding: 6px; }
.photo--badge.photo--empty::after { font-size: 10px; line-height: 1.25; }
/* Once a real mark is uploaded it sits on its own — no tinted box behind it,
   only the placeholder frame keeps a visible background. */
.photo--badge:not(.photo--empty) { background: transparent; }

.hero__cert { position: absolute; right: 0; bottom: 0; z-index: 10; display: flex; }
.hero__cert .photo--empty { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.hero__cert .photo--empty::after { color: rgba(255, 255, 255, 0.6); }

.site-footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.site-footer__cert { display: flex; justify-content: flex-end; }

/* -------------------------------------------------- decorative blobs ---- */

.blob { position: absolute; pointer-events: none; }
.blob--hero-teal {
  top: -12%; right: -8%;
  width: 42rem; height: 26rem;
  border-radius: 100px;
  border-top-right-radius: 20px;
  background: var(--teal);
  filter: blur(64px);
  opacity: 0.45;
}
.blob--hero-brick {
  bottom: -30%; left: -10%;
  width: 34rem; height: 34rem;
  border-radius: var(--r-pill);
  background: var(--brick);
  filter: blur(72px);
  opacity: 0.35;
}
.blob--engine {
  top: -20%; left: -6%;
  width: 30rem; height: 30rem;
  border-radius: var(--r-pill);
  background: var(--tint);
  filter: blur(64px);
  opacity: 0.9;
  mix-blend-mode: multiply;
}
.blob--index {
  bottom: -32%; right: -6%;
  width: 32rem; height: 32rem;
  border-radius: var(--r-pill);
  background: var(--brick);
  filter: blur(72px);
  opacity: 0.4;
}
/* The Index panel carries the same glow on the right; this one sits left so the
   two dark panels are recognisably the same object without looking copied. */
.blob--process {
  bottom: -34%; left: -8%;
  width: 30rem; height: 30rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  filter: blur(80px);
  opacity: 0.34;
}
.blob--cta-brick {
  top: -30%; right: -8%;
  width: 36rem; height: 36rem;
  border-radius: var(--r-pill);
  background: var(--brick);
  filter: blur(64px);
  opacity: 0.55;
}
.blob--cta-tint {
  bottom: -40%; left: -10%;
  width: 32rem; height: 32rem;
  border-radius: 100px;
  border-top-right-radius: 20px;
  background: var(--tint);
  filter: blur(64px);
  opacity: 0.3;
}

.glow { position: absolute; inset: 0; pointer-events: none; }
.glow--hero { background: radial-gradient(circle at 78% 18%, rgba(0, 103, 200, 0.2) 0%, transparent 42%); }
.glow--engine { background: radial-gradient(circle at 88% 12%, rgba(2, 66, 99, 0.16) 0%, transparent 44%); }

@keyframes floatSlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
.blob--float { animation: floatSlow 22s ease-in-out infinite; will-change: transform; }
.blob--float-alt { animation: floatSlow 30s ease-in-out infinite reverse; will-change: transform; }

/* ------------------------------------------------------ scroll reveal ---- */

.om-pre { opacity: 0; transform: translate3d(0, 28px, 0); }
.om-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.om-bar { transform: scaleX(0); transform-origin: left center; }
.om-bar-in { transform: scaleX(1); transition: transform 1100ms var(--ease); }

/* ----------------------------------------------------- side timeline ---- */

.side-timeline {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Two thirds of the previous 80vh: the rail reads as a quiet position
     indicator rather than a second navigation running the window's height. */
  height: 54vh;
}
.side-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
  transform: translateX(-50%);
  z-index: -1;
}
/* The dots carry no numbers. The element stays 24×24 as an invisible hit
   target — WCAG 2.2 Target Size (Minimum) is 24×24 — while the visible mark is
   the small circle drawn by ::after. */
.timeline-dot {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin: 2px 0;
  flex: none;
  background: none;
  border: none;
  position: relative;
}

.timeline-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--hairline-strong);
  transition: transform 250ms var(--ease), background 250ms var(--ease), border-color 250ms var(--ease);
}

.timeline-dot:hover::after,
.timeline-dot:focus-visible::after {
  border-color: var(--navy);
  transform: scale(1.25);
}

/* Active is brick, not petrol: on a page whose furniture is almost entirely
   petrol, only a different hue reads as "you are here" at 9px. */
.timeline-dot.is-active::after {
  background: var(--brick);
  border-color: var(--brick);
  transform: scale(1.45);
}
.timeline-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  background: var(--brand);
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: all 200ms var(--ease);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.timeline-dot:hover .timeline-tip,
.timeline-dot:focus-visible .timeline-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (min-width: 1300px) { .side-timeline { display: flex; } }

/* ------------------------------------------------------------ modals ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 20, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }

.modal__dialog {
  width: 90vw;
  max-width: 1100px;
  height: 90vh;
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.modal__dialog--sm { max-width: 720px; height: auto; max-height: 90vh; }

/* ---- the Executive Brief dialog ----
   The form itself is the contact page's .field markup, so nothing here restyles
   an input; these rules only place the dialog's own furniture. */

.modal--form .modal__dialog { max-width: 640px; height: auto; max-height: min(92vh, 900px); }
.modal--form .modal__head { align-items: flex-start; }
.modal--form .modal__body { padding: var(--pad-card); }

.brief-form__lede {
  margin: 0 0 22px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 68ch;
}
.brief-form__alert { margin: 0 0 20px; }

.brief-form__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.brief-form__actions .note { margin: 0; }

.brief-form__done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.brief-form__done .btn { margin-top: 8px; }

@media (max-width: 640px) {
  /* A dialog on a phone is the screen: full height, no floating card, and the
     close control stays reachable at the top. */
  .modal--form { padding: 0; align-items: stretch; }
  .modal--form .modal__dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .modal--form .modal__head { padding: 18px var(--pad-card); }
  .brief-form__actions { flex-direction: column; align-items: stretch; }

  /* The optional note is the least important field in the dialog; at full
     height it pushed the send button two screens down on a phone. */
  .modal--form textarea.field__control { min-height: 92px; height: 92px; }
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--tint);
  flex: none;
}
.modal__title { font-size: 20px; font-weight: 500; color: var(--navy); }
.modal__kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--brick-ink); }
.modal__close {
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--surface);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.modal__close:hover { background: var(--tint); }

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}
.modal__body p + p { margin-top: 1em; }
.modal__body [hidden] { display: none; }


/* ---------------------------------------------------- cookie banner ---- */

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--brand);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.cookie-banner[hidden] { display: none; }
/* Reserve room so the fixed banner never covers the footer's legal links. */
.cookie-banner-open .site-footer { padding-bottom: calc(40px + var(--cookie-h, 96px)); }
.cookie-banner p { color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.6; max-width: 68ch; }
.cookie-banner a { color: var(--on-dark); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex: none; }
.cookie-banner__btn {
  height: 42px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.cookie-banner__btn:hover { background: rgba(255, 255, 255, 0.88); }
.cookie-banner__btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}
.cookie-banner__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------- sticky CTA ---- */

.sticky-cta { display: none; }

/* ------------------------------------------------------------- measure ----
   Line length. A reader loses the start of the next line somewhere past 80
   characters, and on a 1440px screen this page had small print running to 167:
   the note under the Index, the "not for" list, the footer paragraph and the
   disclaimers all spanned the full column because nothing capped them.

   `ch` is the correct unit: it is defined against the font's own zero-advance,
   so the cap tracks the type size instead of guessing in pixels, and it holds
   when the site is translated into a wider language. These only ever narrow a
   block — a column already inside a card is untouched. */

.lede,
.card__text,
.cmp-card__market,
.cmp-card__ours,
.audience-aside p { max-width: 68ch; }

.hero__lede { max-width: 62ch; }

.note,
.disclaimer,
.hero__caveat,
.final-cta__caveat,
.index-note,
.not-for__list,
.site-footer__seo,
.hubs-row__text { max-width: 68ch; }

/* ------------------------------------------------------- responsive ---- */

/* The five- and six-across rows break earlier than they used to.
   Measured at 1024px — an iPad in landscape, and a common laptop width — six
   stat tiles across were 126px wide each, narrower than the same tile on a
   390px phone, where it gets 171px. The tiles are designed around ~190px, so
   anything under 1200px belongs in three columns. */
@media (max-width: 1200px) {
  /* The photograph goes above the cards and the 2x2 stays, at the same width
     the other wide rows break. Measured at 1024px, the side-by-side bento left
     each card 222px — "The Private Investor & The Entrepreneur" took four
     lines of title — and the exclusions column was too narrow to hold an item
     on one line, which is the whole point of listing them. */
  .audience-bento { grid-template-columns: 1fr; }
  .audience-bento__photo .photo { min-height: 260px; }
  .not-for { grid-template-columns: 1fr; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The rail wants the width: below this the aside stops being a column beside
   it and becomes a two-up band under it, with the call to action across the
   full width — at the end of the sequence, where the reader has just arrived. */
@media (max-width: 1100px) {
  .pillar-layout { grid-template-columns: 1fr; gap: 36px; }
  .pillar-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-grid);
  }
  .pillar-photo { aspect-ratio: 16 / 9; min-height: 0; }
  /* Across the full width the stacked card leaves the arrow marooned under the
     text, so the two sit on one line with the width between them. */
  .pillar-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}

/* Two columns of text no longer fit beside the node, so the question drops
   under its title. The node spans both lines and stays centred on them, which
   keeps it on the rail. */
@media (max-width: 760px) {
  .pillar-flow { --rail: 32px; --rail-top: 34px; }
  .pillar-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 14px 12px;
  }
  .pillar-step__num { grid-row: 1 / span 2; }
  .pillar-step__title { grid-column: 2; grid-row: 1; }
  .pillar-step__q { grid-column: 2; grid-row: 2; padding-top: 0; font-size: 14px; }
}

@media (max-width: 640px) {
  .pillar-aside { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .nodes-row { grid-template-columns: 1fr; gap: 20px; }
}

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

  .split { grid-template-columns: 1fr; gap: 32px; }
  .cmp-row { grid-template-columns: 1fr; gap: 16px; }
  .cmp-head { display: none; }
  .cmp-mobile-label { display: block; }
  .hero__shell { border-radius: var(--r-card); }
  .hero__copy { max-width: 100%; }
}

@media (max-width: 720px) {
  .audience-photo-row { grid-template-columns: 1fr; }
}

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

  /* Two stat tiles across a phone are ~171px wide. A 20px inset on each side of
     the overlaid caption left 131px for the words; the caption is on a
     photograph, not in a card, so it does not need a card's breathing room. */
  .stat-copy { padding: 14px; }
  .stat-num { font-size: clamp(24px, 6vw, 30px); }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .btn {
    width: 100%;
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* The full-width buttons above would run straight under the badge's fixed
     bottom-right corner otherwise — back into the column flow instead. */
  .hero__cert { position: static; align-self: flex-end; }
  .btn--auto,
  .header-cta { width: auto; }

  /* The short label takes over. The full one is still what a screen reader
     announces — it is the aria-label on the control, not this text — so the
     contractual wording is never lost, only the visual weight of nine words on
     a 390px screen. */
  .btn__long { display: none; }
  .btn__short { display: inline; }

  .audience-bento__cards { grid-template-columns: 1fr; }
  .hero__actions,
  .final-cta__body { align-self: stretch; width: 100%; }
  .cta-band__actions { width: 100%; }
}

@media (max-width: 430px) {
  section[id] { scroll-margin-top: 84px; }
  .brand__sub { display: none; }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--neutral);
  }
  .page { padding-bottom: 82px; }
  .cookie-banner { bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-mobile__panel,
  .nav-mobile__backdrop,
  .nav-mobile__burger span { transition: none !important; }
  .om-pre, .om-bar { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .side-timeline, .cookie-banner, .sticky-cta, .site-header { display: none !important; }
  .om-pre { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   WordPress layer
   Everything below is theme-integration only: the utility classes that replaced
   the prototype's inline styles, plus the interior templates (blog, archives,
   search, comments) and the core markup WordPress emits.
   ========================================================================== */

/* ------------------------------------------- utilities from inline styles -- */

.split--header { margin-bottom: var(--gap-header); }
.h2--section { margin-bottom: var(--gap-header); }
.h2--spaced { margin-bottom: 32px; }
.lede--lg { font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
.lede--on-dark { color: var(--on-dark-muted); }
.note--after-grid { margin-top: 24px; max-width: 68ch; }
.eyebrow--flush { margin-bottom: 0; }
.engine-card--lead { border-radius: var(--r-card-lg); }
.step-list { list-style: none; margin: 0; padding: 0; }
.proof-grid { margin-bottom: var(--gap-header); }
.section--final { padding: 0 var(--gutter) 24px; }
/* The hero sits tight under the header; everything after it gets the new rhythm. */
.hero { padding-bottom: clamp(24px, 3vw, 40px); }

/* --------------------------------------------------------- navigation ---- */

.nav-links__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mobile__panel .nav-links__list { flex-direction: column; align-items: stretch; gap: 2px; }
.site-footer__nav .nav-links__list { gap: 8px; }
.site-footer__nav a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  transition: background 200ms var(--ease);
}
.site-footer__nav a:hover { background: var(--wash); color: var(--navy); }

/* ------------------------------------------------------ accessibility ---- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  z-index: 100000;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
  transition: top 200ms var(--ease);
}
/* Core's .screen-reader-text:focus (block-library) sets background/padding at
   (0,2,0) and would otherwise repaint this as the default grey box — every
   property it touches has to be restated here at matching specificity. */
.skip-link:focus {
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px 24px;
  background: var(--brand);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}

/* -------------------------------------------------------------- logo ---- */

/* theme.json emits a global heading colour on the ELEMENT selector
   (h1..h6 { color: navy }). An element selector still beats inheritance, so any
   heading on a dark surface that relied on inheriting --on-dark renders
   navy-on-navy — invisible. Restate it for every dark container. */
.card--navy :is(h1, h2, h3, h4, h5, h6),
.card--brick :is(h1, h2, h3, h4, h5, h6),
.panel--navy :is(h1, h2, h3, h4, h5, h6),
.final-cta :is(h1, h2, h3, h4, h5, h6),
.hero :is(h1, h2, h3, h4, h5, h6),
.boundaries :is(h1, h2, h3, h4, h5, h6),
.not-for :is(h1, h2, h3, h4, h5, h6),
.pullquote :is(h1, h2, h3, h4, h5, h6) { color: var(--on-dark); }

/* …but a light card inside a dark panel keeps its own ink. The rule above beats
   .card__title on specificity, so the four step cards in the Method panel came
   out white on near-white — legible only as a shape. */
.panel--navy .card:not(.card--navy):not(.card--brick) :is(h1, h2, h3, h4, h5, h6),
.panel--navy .index-card :is(h1, h2, h3, h4, h5, h6),
.hero .card:not(.card--navy):not(.card--brick) :is(h1, h2, h3, h4, h5, h6) { color: var(--navy); }

.custom-logo { height: 38px; width: auto; }
.brand--footer .custom-logo { height: 40px; }

/* --------------------------------------------------- interior layout ---- */

.shell--reading { max-width: 62rem; }

/* Every template now opens with the shared hero, so the plain header this
   replaced is gone; only the row of actions under the 404's search box is left. */
.page-header__actions { margin-top: 24px; }
.archive-description { color: var(--ink-muted); font-size: 16px; line-height: 1.7; max-width: 46rem; }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--ink-faint);
  font-size: 14px;
}
.entry-meta .sep { color: var(--ink-faint); }

.entry-media {
  margin: 0 0 40px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.entry-media img { width: 100%; height: auto; }

/* ------------------------------------------------------ entry content ---- */

.entry-content { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.5em; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--navy);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2em;
}
.entry-content h2 { font-size: clamp(26px, 2.6vw, 32px); }
.entry-content h3 { font-size: clamp(21px, 2vw, 24px); }
.entry-content h4 { font-size: 19px; }

.entry-content a { text-decoration: underline; text-underline-offset: 0.15em; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.5em; }

.entry-content blockquote {
  margin: 2em 0;
  padding: 24px 32px;
  border-left: 3px solid var(--brick);
  background: var(--surface);
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.6;
}
.entry-content blockquote cite { display: block; margin-top: 12px; font-size: 14px; color: var(--ink-muted); font-style: normal; }

.entry-content code,
.entry-content kbd {
  background: var(--tint);
  border-radius: 6px;
  padding: 0.15em 0.45em;
  font-size: 0.9em;
}
.entry-content pre {
  background: var(--brand);
  color: var(--on-dark);
  border-radius: var(--r-inner);
  padding: 24px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }

.entry-content img,
.entry-content figure img { border-radius: var(--r-inner); height: auto; }
.entry-content figcaption,
.wp-caption-text {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.entry-content th,
.entry-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tint);
  text-align: left;
}
.entry-content th { color: var(--navy); font-weight: 500; }

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--tint);
  margin: 3em 0;
}

/* Tables and wide code must scroll inside themselves, never the page. */
.entry-content .wp-block-table { overflow-x: auto; }

/* ------------------------------------------------ core alignment API ---- */

.alignleft  { float: left;  margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignwide { width: min(68rem, 100%); margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.entry-content .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.entry-content .alignfull img { border-radius: 0; }

@media (max-width: 782px) {
  .alignleft, .alignright { float: none; margin: 0 0 1em; }
}

.sticky .card__title::before { content: "★ "; color: var(--brick-ink); }
.bypostauthor > .comment-body { border-left: 2px solid var(--tint); padding-left: 16px; }

/* ---------------------------------------------------------- post list ---- */

.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .post-list { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; gap: 20px; padding: 0; overflow: hidden; }
.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; padding: 0 32px 32px; }
.post-card:not(:has(.post-card__media)) .post-card__body { padding-top: 32px; }
.post-card .card__title a { color: var(--navy); }
.post-card .card__title a:hover { color: var(--brick-ink); }

.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.entry-tags a {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
}
.entry-tags a:hover { background: var(--tint-hover); color: var(--navy); }

.no-results { display: flex; flex-direction: column; gap: 16px; }

/* -------------------------------------------------------- navigation ---- */

.post-navigation,
.comment-navigation,
.pagination {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--tint);
}
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 640px) { .post-navigation .nav-links { grid-template-columns: 1fr; } }
.post-navigation .nav-next { text-align: right; }
.nav-label { display: block; color: var(--ink-faint); font-size: 13px; margin-bottom: 4px; }
.nav-title { color: var(--navy); font-size: 17px; font-weight: 500; line-height: 1.35; }
.post-navigation a:hover .nav-title { color: var(--brick-ink); }

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  transition: background 200ms var(--ease);
}
.pagination .page-numbers:hover { background: var(--tint); color: var(--navy); }
.pagination .page-numbers.current { background: var(--brand); color: var(--on-dark); }
.pagination .dots:hover { background: none; }

.page-links { margin-top: 2em; display: flex; gap: 8px; align-items: center; font-size: 14px; }

/* ------------------------------------------------------- search form ---- */

.search-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
/* The form used to sit inside the page header, which supplied the space under
   it. It now stands on its own above the results, so it carries that space. */
.search-form + * { margin-top: 32px; }
.search-form__field {
  flex: 1 1 16rem;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 15px;
}
.search-form__field::placeholder { color: var(--ink-faint); }
.search-form__field:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: transparent; }
.search-form__submit { flex: none; }

/* ---------------------------------------------------------- comments ---- */

.comments-area { margin-top: 8px; }
.comments-title, .comment-reply-title { margin-bottom: 32px; }

.comment-list { list-style: none; margin: 0 0 48px; padding: 0; }
.comment-list ol.children { list-style: none; margin: 24px 0 0 32px; padding: 0; }
@media (max-width: 640px) { .comment-list ol.children { margin-left: 16px; } }

.comment-body {
  padding: 24px 0;
  border-bottom: 1px solid var(--tint);
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
}
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.comment-author img { border-radius: var(--r-circle); }
.comment-author .fn { color: var(--navy); font-weight: 500; font-style: normal; }
.comment-metadata a { color: var(--ink-faint); font-size: 13px; }
.reply a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}
.reply a:hover { color: var(--brick-ink); }

.comment-form { display: flex; flex-direction: column; gap: 16px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; margin-bottom: 6px; color: var(--navy); font-size: 14px; font-weight: 500; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 15px;
}
.comment-form textarea { min-height: 9rem; resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: transparent; }
.comment-form .comment-notes,
.comment-form .form-submit { margin: 0; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--ink-muted); }


/* ------------------------------------------------------ legal documents -- */

/* These are long-form documents inside a scrolling dialog. Measure and rhythm
   matter more here than anywhere else on the page. */
.legal-doc { max-width: 46rem; }

.legal-doc__updated {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tint);
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.legal-doc__intro {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.7;
}
.legal-doc__intro + .legal-doc__intro { margin-top: 1em; }

.legal-doc__section { margin-top: 32px; }

.legal-doc__heading {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.legal-doc__section p { color: var(--ink-soft); }
.legal-doc__section p + p { margin-top: 0.85em; }

.legal-doc__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.legal-doc__list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.legal-doc__list li + li { margin-top: 10px; }
.legal-doc__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--brick);
}

/* A long document needs a little breathing room at the end of the scroll. */
.modal__body .legal-doc:last-child { padding-bottom: 8px; }

@media (max-width: 640px) {
  .legal-doc__section { margin-top: 26px; }
  .modal__body { padding: 24px 20px; }
  .modal__head { padding: 18px 20px; }
}

/* --------------------------------------------------------- mode toggle -- */

.mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-circle);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.mode-toggle:hover { background: var(--wash); border-color: var(--hairline-strong); }

.mode-toggle__icon { display: none; line-height: 0; }
/* Show the icon for the mode the button will switch TO, which is the
   convention people expect: a moon means "go dark". */
:root[data-theme="dark"] .mode-toggle__icon--sun { display: block; }
:root[data-theme="light"] .mode-toggle__icon--moon { display: block; }
:root:not([data-theme]) .mode-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mode-toggle__icon--moon { display: none; }
  :root:not([data-theme]) .mode-toggle__icon--sun { display: block; }
}

.mode-toggle--drawer { margin-left: auto; margin-right: 4px; }

@media (max-width: 860px) {
  .mode-toggle--header { display: none; }   /* it lives in the drawer instead */
}

/* ------------------------------------------------------------- contact -- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 980px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; } }

.contact-form-panel {
  background: var(--surface);
  border-radius: var(--r-card-lg);
  padding: var(--pad-surface);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.field--full { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .contact-form__grid { grid-template-columns: 1fr; }
  .field--half { grid-column: auto; }
}

.field { display: flex; flex-direction: column; min-width: 0; }
/* A hint under one label pushes its control down and leaves the field beside it
   floating half a row higher — visible on both the screening's Step 1 and the
   Executive Brief dialog, where only the email field explains itself. The
   control sits at the foot of its cell instead, so a row lines up whether or
   not one of its fields has something to say. */
.field__control { margin-top: auto; }
.field__label {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.field__required { color: var(--brick-ink); margin-left: 2px; }
.field__hint { margin-bottom: 8px; color: var(--ink-faint); font-size: 13px; line-height: 1.5; }

.field__control {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field__control::placeholder { color: var(--ink-faint); }
.field__control:hover { border-color: var(--hairline-strong); }
.field__control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--wash);
}
textarea.field__control { resize: vertical; min-height: 9rem; }

/* Native select needs its own arrow once the border is restyled. */
select.field__control {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field--error .field__control { border-color: var(--brick); }
.field--error .field__control:focus { box-shadow: 0 0 0 3px rgba(182, 54, 38, 0.18); }
.field__error {
  margin-top: 6px;
  color: var(--brick-ink);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.field--consent { margin-top: 24px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent__link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.consent__link:hover { color: var(--navy); }

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 28px;
}
.contact-form__actions .note { margin: 0; }

/* The honeypot must be reachable by a bot but never by a person: taken out of
   the flow rather than display:none, which some bots skip. */
.contact-form__trap {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  border-radius: var(--r-card);
  padding: 24px 28px;
  margin-bottom: 8px;
}
.form-notice:focus { outline: 2px solid var(--brand); outline-offset: 3px; }
.form-notice--ok {
  background: var(--tint);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-notice--error {
  background: rgba(182, 54, 38, 0.1);
  border: 1px solid rgba(182, 54, 38, 0.35);
  margin-bottom: 24px;
}
.form-notice__title { color: var(--brick-ink); font-weight: 500; margin-bottom: 8px; }
.form-notice--error ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.form-notice--error a { color: var(--brick-ink); }

.contact-aside { display: flex; flex-direction: column; gap: 20px; }
.contact-card { display: flex; flex-direction: column; gap: 12px; }
.contact-card:hover { transform: none; }

.contact-list { margin: 0; }
.contact-list dt {
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-top: 12px;
}
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: 2px 0 0; font-size: 16px; }

.contact-hubs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-hubs li {
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 500;
}

/* ==========================================================================
   10 — Google reviews
   Tinted cards in the Pillars idiom, so the section reads as part of the same
   system rather than a bolted-on testimonial widget.
   ========================================================================== */

.reviews__head {
  max-width: 62ch;
  margin-bottom: 28px;
}

.reviews__intro {
  margin-top: 10px;
  color: var(--ink-soft);
}

/* ---- aggregate ---- */

.reviews__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 18px 22px;
  margin-bottom: 28px;
  border-radius: var(--r-card);
  background: var(--tint);
}

.reviews__average {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.reviews__number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

.reviews__count {
  margin: 0;
  color: var(--ink-soft);
}

.reviews__all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--brick-ink);
  text-decoration: none;
}

.reviews__all:hover,
.reviews__all:focus-visible {
  text-decoration: underline;
}

/* The arrow is a shared inline SVG; keep it optically aligned with the text. */
.reviews__all svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---- stars ----
   Drawn as two stacked glyphs so a fractional rating (4.7) shows a partial
   star rather than being rounded — the number and the picture must agree. */

.stars {
  display: inline-flex;
  gap: 2px;
}

/* The empty-star tone is an alpha background, NOT opacity: opacity on the
   parent also dims the gold fill inside it, which turned every rating into a
   pale smudge. */
.star {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background: var(--star-empty);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
  mask: var(--star-mask) center / contain no-repeat;
}

/* The fill sits inside the masked parent, so it inherits the star silhouette
   and a percentage width clips it cleanly at any fraction. */
.star__fill {
  position: absolute;
  inset: 0;
  background: var(--star-gold);
}

:root {
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
  --star-gold: #e8930c;
  --star-empty: rgba(2, 66, 99, 0.24);
}

/* On the dark palette the empty star has to lift off the panel rather than
   sink into it, and the gold is brightened so it stays legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --star-gold: #ffb020;
    --star-empty: rgba(255, 255, 255, 0.26);
  }
}

:root[data-theme="dark"] {
  --star-gold: #ffb020;
  --star-empty: rgba(255, 255, 255, 0.26);
}

/* ---- cards ---- */

.reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}

.review__quote {
  margin: 0;
  flex: 1;
}

.review__quote p {
  margin: 0;
  color: var(--ink);
}

.review__quote p::before { content: "\201C"; }
.review__quote p::after  { content: "\201D"; }

.review__by {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.review__avatar--initial {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-dark);
  font-weight: 600;
}

.review__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.review__author {
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
}

.review__role {
  font-size: 13px;
  color: var(--ink-soft);
}

/* The per-review link is for verification, not decoration: keep it reachable
   by keyboard and readable, but out of the way of the quote itself. */
.review__link {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--brick-ink);
}

.reviews__attribution {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* A single card left over on the final row reads as a mistake stranded at the
   left edge. Centre it instead. */
.reviews__grid > :last-child:nth-child(3n + 1) {
  grid-column: 2;
}

@media (max-width: 1000px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid > :last-child:nth-child(3n + 1) { grid-column: auto; }
}

@media (max-width: 680px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__all { margin-left: 0; flex-basis: 100%; }
}

/* A reviews plugin's widget brings its own markup and CSS. Give it room and
   keep it from running wide; do not restyle its internals, because the next
   plugin update would change the selectors underneath us. */
.reviews__widget {
  margin-top: 24px;
}

.reviews__grid + .reviews__widget {
  margin-top: 28px;
}

.reviews__widget > * {
  max-width: 100%;
}

/* ==========================================================================
   Interior pages — About us, Invest in Greece
   These reuse the landing page's objects wherever one exists (.hero,
   .hero__shell, .badge, .eyebrow, .h2--section, .btn). What is defined here is
   only what the landing page has no equivalent for, and it is built from the
   same tokens — --tint surfaces, --r-card corners, --sh-1 — so the two read as
   one system.
   ========================================================================== */

/* The landing hero keeps its right third open for the photograph; an interior
   hero has no photograph, so the copy runs the full width. */
.hero--page .hero__copy { max-width: 100%; }
.hero--page .hero__body { gap: 0; }
.hero--page .hero__lede { max-width: 62ch; margin-bottom: 0; }

/* ---- shared furniture ---- */

.section-head { max-width: 70ch; }
.section-head__lead { margin-top: 12px; color: var(--ink-soft); }
.prose-narrow { max-width: 70ch; color: var(--ink-soft); }

/* The standard card surface: tint, card radius, one-pixel shadow. */
.pg-card {
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}

.accent-panel {
  max-width: 74ch;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}
.accent-panel p { margin-top: 12px; color: var(--ink-soft); }

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.pg-panel {
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}
.pg-panel p { margin-top: 10px; color: var(--ink-soft); }

/* ---- differentiators ---- */

.strengths {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

.strength {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--pad-tight);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
  color: var(--ink);
}

/* A brick chevron, the same accent role the hero badge's dot plays. */
.strength__mark {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  flex: none;
  border-right: 2px solid var(--brick);
  border-bottom: 2px solid var(--brick);
  transform: rotate(-45deg);
}

/* ---- invest: reasons ---- */

.reasons {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.reason {
  padding: var(--pad-tight);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}

.reason__num {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brick-ink);
}

.reason__title { font-size: 18px; font-weight: 600; color: var(--navy); }
.reason p { margin-top: 8px; color: var(--ink-soft); }

/* ---- invest: instruments ---- */

.instruments {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.instrument {
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}

.instrument__title { font-size: 20px; font-weight: 700; color: var(--navy); }
.instrument__lede { margin-top: 10px; color: var(--ink-soft); }

.instrument__points {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.instrument__points li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: 15px;
}

.instrument__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brick);
}

/* ---- invest: sectors ---- */

.sectors {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sector {
  padding: var(--pad-tight);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}
.sector__title { font-size: 18px; font-weight: 600; color: var(--navy); }
.sector p { margin-top: 8px; color: var(--ink-soft); }

/* ---- invest: figures ----
   The same object as the landing page's stat tiles: dark panel, brick figure. */

.figures {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.figure {
  padding: var(--pad-tight);
  border-radius: var(--r-card);
  background: var(--brand);
  color: var(--on-dark);
}

.figure__num {
  display: block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brick-light);
}

.figure__label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- invest: FAQ ---- */

.faq { margin-top: 22px; display: grid; gap: 10px; }

.faq__item {
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
  padding: 4px 22px;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__q::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--brick);
  border-bottom: 2px solid var(--brick);
  transform: rotate(-45deg);
  transition: transform 200ms var(--ease);
}
.faq__item[open] .faq__q::before { transform: rotate(45deg); }

.faq__a { padding: 0 0 18px 21px; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .reasons, .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .strengths, .pair, .instruments,
  .reasons, .sectors { grid-template-columns: 1fr; }
  .hero--page .hero__copy { max-width: 100%; }
}

/* ---- interior page photography ----
   The same .photo / .photo--empty objects the landing page uses; this only
   gives them a place to sit and a consistent height. */
.media-figure {
  margin: 26px 0 4px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.media-figure .photo,
.media-figure .photo img {
  width: 100%;
  display: block;
}
.media-figure .photo { aspect-ratio: 21 / 9; }
.media-figure .photo img { height: 100%; object-fit: cover; }
.media-figure--wide .photo { aspect-ratio: 21 / 7; }

@media (max-width: 760px) {
  .media-figure .photo,
  .media-figure--wide .photo { aspect-ratio: 3 / 2; }
}

/* ---- about: offices and partners ---- */

.offices,
.partners {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.office {
  padding: var(--pad-tight);
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
}
.office__city { font-size: 17px; font-weight: 700; color: var(--navy); }
.office p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }

.partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.partner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--tint);
  box-shadow: var(--sh-1);
  color: var(--ink);
}
.partner strong { display: block; color: var(--navy); }
.partner__note { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .offices, .partners { grid-template-columns: 1fr; }
}

/* ---- header dropdown ----
   One parent item holding the interior pages, so the bar's width does not grow
   with the number of pages. */

.nav-links .has-sub { position: relative; }

.nav-links .sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-links .sub-toggle:hover,
.nav-links .has-sub.is-open .sub-toggle { background: var(--wash); color: var(--navy); }

.sub-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease);
}
.has-sub.is-open .sub-caret { transform: rotate(-135deg) translateY(-2px); }

.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  border: 1px solid var(--hairline);
  display: none;
  z-index: 80;
}
.nav-links .has-sub.is-open .sub-menu { display: block; }

/* Hover is a mouse convenience only, and lives here rather than in JS so it
   cannot fight the button's own open/closed state. Touch and keyboard use the
   button, which is the authoritative control. */
@media (hover: hover) and (pointer: fine) {
  .nav-links .has-sub:hover .sub-menu { display: block; }
}

.nav-links .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

/* A labelled group inside the mobile drawer, not a nested dropdown. */
.nav-group { padding: 14px 16px 4px; }
.nav-group__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick-ink);
}


/* ==========================================================================
   07 — Index™ on a phone
   Three paddings stack here: the section's, the navy panel's and the white
   card's. At 390px that left 92px of inset on each side and only 206px for the
   content — the grade letters, the scale numbers and the legend chips were all
   competing for a third of the screen. These reduce the two inner paddings and
   give the legend a column of its own.
   ========================================================================== */

@media (max-width: 640px) {
  /* The three padding overrides that used to live here are gone: the spacing
     scale now gives the Index the same room as every other nested surface. */

  /* Five grades across a narrow card: smaller letters, tighter gaps. */
  .iri-grades span { font-size: 18px; }
  .iri-grades { gap: 2px; }
  .iri-bar { gap: 2px; height: 12px; }

  .iri-scale { height: 24px; }
  .iri-scale span { font-size: 12px; }

  /* One legend item per row. Two columns gave each chip 93px, which is not
     enough for "S (90–100)" and forced it to wrap mid-label. */
  .iri-legend {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 22px;
    padding-top: 22px;
  }
  .iri-legend > div { gap: 6px; }
  .iri-chip { font-size: 13px; padding: 5px 12px; }
  .iri-legend .iri-desc { font-size: 14px; }
}

/* Scale labels: 0, 45, 60, 75, 90, 100. The last two are the problem — "90"
   sits at 90% and "100" is pinned to the right edge, so only a tenth of the
   width separates them. Measured, that gap is 2px at 390px and 6px at 430px:
   they touch. Below 520px the "90" steps aside; the coloured band still shows
   where the top grade begins. */
@media (max-width: 520px) {
  .iri-scale span:nth-child(5) { display: none; }
}

/* Narrower still, and even 45/60/75 crowd, so "60" goes too. */
@media (max-width: 380px) {
  .iri-scale span:nth-child(3) { display: none; }
}

/* ============================================================================
   Preliminary Readiness Screening
   ----------------------------------------------------------------------------
   The tool is assembled from the objects the rest of the site already uses —
   .panel, .index-card, .field, .numeral, .btn — so the only rules here are for
   the parts that have no equivalent elsewhere: the step rail, the answer cards,
   the evaluator log and the result band. Everything is expressed in the design
   tokens, so the dark palette follows without a second set of rules.
   ========================================================================== */

/* Three figures rather than the invest page's four. */
.figures--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The trailing note under a pull quote. */
.pullquote__note { color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.65; }

/* A numeral that recedes: used for the locked pillars, which are listed rather
   than offered. */
.numeral--quiet { background: transparent; border: 1px solid var(--hairline); color: var(--ink-faint); }

.scr-trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.scr-trust li {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}

/* ---- the tool shell ---- */

.scr { max-width: var(--shell); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.scr [hidden] { display: none; }

/* clip, not hidden, so a rounded corner clips the panel cleanly rather than
   turning it into a scroll container. */
.scr-step { overflow: clip; }
.scr-step .index-card { display: flex; flex-direction: column; align-items: flex-start; }
.scr-step .h2 { margin-bottom: 14px; }
.scr-alert { width: 100%; margin: 18px 0 0; }
.scr-grid { margin-top: 26px; width: 100%; }
.scr-step .field--consent { width: 100%; }
.scr-step .contact-form__actions { margin-top: 28px; width: 100%; }

.scr-confirm { width: 100%; margin-top: 20px; }

/* ---- narrower viewports ---- */

@media (max-width: 900px) {
  .figures--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two figures across a phone leave 169px each, which a 34px numeral and its
   label cannot share. Below this they stack, matching the three-figure row on
   the screening page rather than behaving differently from it. */
@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .scr { gap: 20px; }
  .scr-step.panel { padding: 20px 14px; border-radius: var(--r-card-lg); }
  .scr-step .index-card { padding: 22px 16px; }
}