/* palette variant "p2-orange-teal" (from the PI reference palette images, 2026-10-24) */
:root {
  --navy: #012538;
  --steel: #1B768E;
  --lavender: #9AA3A9;
  --sky: #CDE6EC;
  --blush: #FB9833;
  --mist: #FCEFEF;
}

/* clearer text (PI 2026-10-25): darker text tints only; weights unchanged (no bold) */
:root {
  --ink: color-mix(in srgb, var(--navy) 88%, #000);
  --ink-2: color-mix(in srgb, var(--navy) 92%, var(--white));
  --ink-3: color-mix(in srgb, var(--navy) 78%, var(--white));
  --ink-4: color-mix(in srgb, var(--navy) 62%, var(--white));
}
.nav a { color: var(--ink); }
.p-t, .a-t, .pr-t { color: var(--ink); }

/* logo colours are fixed (PI 2026-10-28): navy bars and gold stars, independent of the palette */
.logo .bars { fill: #1D3057; }
.logo .star { fill: #F6B45D; }
.site-footer .logo .bars { fill: #FFFFFF; }

/* hero (concept wave-bg, 2026-10-28): the wave propagation runs as a full-width background behind the text */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(560px, 46vw, 720px); display: flex; align-items: center; }
.hero > .wrap { position: static; width: 100%; pointer-events: none; }
.hero .hero-text { position: relative; z-index: 1; }
.hero > .wrap .hero-text, .hero > .wrap .hero-text * { pointer-events: auto; }
.hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.hero .hero-viz { position: absolute; inset: 0; z-index: 0; width: auto; max-width: none; margin: 0; transform: none; justify-self: auto; pointer-events: none; }
.hero .viz, .hero .viz[data-mode="wave"] { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: var(--white); overflow: hidden; }
.hero .viz canvas { display: block; width: 100%; height: 100%; }
/* soft white wash on the text side so the copy stays easy to read */
.hero .viz::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.5) 58%, rgba(255,255,255,0) 78%),
              linear-gradient(180deg, rgba(255,255,255,0) 78%, rgba(255,255,255,.9) 100%); }
.hero .viz-pp { position: absolute; right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); bottom: 18px; z-index: 2; pointer-events: auto; }
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero .viz::after { background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 60%, rgba(255,255,255,.95) 100%); }
}

/* the background animation is visible from the first paint; it does not wait for the scroll reveal (PI 2026-11-09) */
.rv-on .hero .hero-viz[data-rv] { opacity: 1; transform: none; transition: none; }