/* ---------------------------------------------------------------------------
   Meridian — shared base layer.

   The page markup carries its own inline styling (that is the design, straight
   off the canvas), so this file deliberately stays small: reset, typography
   defaults, and the few components the build introduces — the mobile menu and
   the dropdown behaviour that used to be a JS component.
   --------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  background: #07090c;
  /* Reserve the scrollbar gutter so the viewport width — and with it the
     centred header — never shifts when a page or overlay changes whether the
     document scrolls. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: #07090c;
  color: #f2f4f6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

/* The build stamps intrinsic width/height on every local image so it reserves
   its space and the page does not reflow as images load. Those attributes only
   act as an aspect ratio while the used height stays automatic — without this,
   any CSS that sets a width (and most of the logo rules do) would let the
   attribute height through and stretch the image. */
img[width][height] { height: auto; }

/* Two-layer focus ring: the light accent ring carries ≥3:1 on the dark bands,
   and the dark halo behind it carries ≥3:1 on the white/warm-paper bands, so
   keyboard focus is visible on every surface without per-band overrides. */
:focus-visible {
  outline: 2px solid #8fb8cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(7, 16, 24, 0.55);
  border-radius: 3px;
}

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

/* --- Design annotations -----------------------------------------------------
   The `showNotes` blocks from the canvas. Visible by default; ?notes=off (or
   showPlaceholderNotes:false in site.config.mjs) takes them out.             */

html[data-notes='off'] [data-note] { display: none !important; }

/* --- Header dropdowns -------------------------------------------------------
   Previously a React component; now plain markup toggled by site.js. The
   panels keep their authored inline styling — this only handles visibility. */

[data-menu-panel][hidden] { display: none; }

[data-menu-toggle] { transition: background 140ms ease, color 140ms ease; }

[data-menu-toggle][aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
}

/* Chevron in the header buttons flips when its menu is open. */
[data-menu-toggle] > span { transition: transform 160ms ease; }
[data-menu-toggle][aria-expanded='true'] > span {
  transform: translateY(1px) rotate(-135deg);
}

/* Links the design left dangling — no destination page exists yet. */
[data-link-pending] { cursor: default; }

/* --- Current page ------------------------------------------------------------
   Set by the build on any nav or footer link that resolves to the page you are
   already on. The hand-authored pages hardcoded this on one link each; driving
   it from the routing table gives every page the same treatment. */

[aria-current='page'] { color: #fff; }

nav [aria-current='page'],
.nav [aria-current='page'] { background: rgba(255, 255, 255, 0.06); }

.nav-mobile__link[aria-current='page'] {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* --- Mobile navigation ------------------------------------------------------
   Generated by build.mjs from the desktop menus. Hidden above the breakpoint;
   responsive.css switches it on.                                            */

.nav-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.nav-burger > span {
  display: block;
  height: 1.5px;
  background: #dbe2e8;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 140ms ease;
}

.nav-burger[aria-expanded='true'] > span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded='true'] > span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded='true'] > span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(5, 7, 10, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.nav-mobile[hidden] { display: none; }

.nav-mobile__group {
  margin: 12px 12px 4px;
  color: #71808d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav-mobile__group:first-child { margin-top: 4px; }

.nav-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 6px;
  color: #dfe5ea;
  font-size: 15px;
}

.nav-mobile__link:hover,
.nav-mobile__link:focus-visible { background: rgba(255, 255, 255, 0.06); }

.nav-mobile__meta {
  color: #8794a0;
  font-size: 11px;
  white-space: nowrap;
}

/* The demo call to action carries the page's product colour, same as the
   header button it stands in for. `--accent` is set on <body> by the build. */
.nav-mobile__link--cta {
  margin-top: 8px;
  justify-content: center;
  background: var(--accent, #f3f1ec);
  color: var(--accent-ink, #151a1f);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nav-mobile__link--cta:hover,
.nav-mobile__link--cta:focus-visible { background: var(--accent-hover, #fff); }

/* ---------------------------------------------------------------------------
   Module names.

   EVALUATE, STAGE and CAPITAL always carry their module colour, in
   every context — headings, body copy, eyebrows, captions, nav, footer. The
   build wraps every occurrence in this component (see moduleNames() in
   build.mjs), so a module name written as plain text in a source file still
   arrives on the page in its accent. This block is the single definition of
   what those colours are.

   Each module has two values. The accents are tuned for the dark canvas and
   drop to roughly 2:1 on warm paper, so light bands use the -ink variant,
   which is the same hue carried down to AA contrast (5.2-6.5:1 on #f3f1ec).
   The build decides which by resolving the surface the name sits on.
   --------------------------------------------------------------------------- */

:root {
  --mod-evaluate: #8fb8cc;
  --mod-stage:    #c58d43;
  --mod-capital:  #8a78c7;

  --mod-evaluate-ink: #396980;
  --mod-stage-ink:    #8a5b23;
  --mod-capital-ink:  #5b4b96;
}

/* The colour is !important on purpose. Thirteen pages of authored CSS carry
   descendant selectors that outrank a single class — `.fact span`, `.service
   small`, and so on — and any one of them silently turns a module name back
   into plain ink. The rule is meant to be structural, so it wins outright. */
.mod {
  font-weight: 800;
  font-style: normal;
  letter-spacing: .035em;
  color: var(--mod-colour) !important;
}

.mod--evaluate { --mod-colour: var(--mod-evaluate); }
.mod--stage    { --mod-colour: var(--mod-stage); }
.mod--capital  { --mod-colour: var(--mod-capital); }

.mod--ink.mod--evaluate { --mod-colour: var(--mod-evaluate-ink); }
.mod--ink.mod--stage    { --mod-colour: var(--mod-stage-ink); }
.mod--ink.mod--capital  { --mod-colour: var(--mod-capital-ink); }

/* Display type sets its own weight and tracking; the colour is the whole
   signal there, and 800 inside a 64px 600-weight headline reads as a mistake. */
h1 .mod, h2 .mod { font-weight: inherit; letter-spacing: inherit; }

/* ---------------------------------------------------------------------------
   Display headline wrapping.

   Several two-line headlines drop a single short word onto the second line —
   "…already have." breaking after "already", and the like. Most of them are
   protected copy, so the fix has to be typographic rather than editorial.
   text-wrap: balance evens the line lengths without touching a word, and
   browsers that do not support it simply wrap as they did before.

   Scoped to display headings only: it is capped at a handful of lines and is
   the wrong tool for body copy.
   --------------------------------------------------------------------------- */

main h1, main h2, main h3,
main h1 > span, main h2 > span, main h3 > span,
main h1 > em, main h2 > em, main h3 > em {
  text-wrap: balance;
}