/* HLC Analytics mockups — shared design system */
:root{
  --cobalt:#123A9E;
  --cobalt-deep:#0D2B77;
  --accent:#123A9E;            /* per-page accent — set by shared.js */
  --gold:#F4C21C;
  --peri:#B9C4EA;
  --peri-tint:#E7EAF7;
  --ink:#16181D;
  --muted:#5A6172;
  --ground:#FFFFFF;
  --ground-soft:#F7F8FC;
  --rule:#DDE2F0;
  --radius:10px;
  --serif:"Spectral",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:var(--ground);
  font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,p,a{overflow-wrap:break-word}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}

/* ---------- top bar (sticky on every page) ---------- */
.tb{border-top:4px solid var(--accent);border-bottom:1px solid var(--rule);background:var(--ground);position:sticky;top:0;z-index:20}
.tb-in{display:flex;align-items:center;gap:16px;min-height:72px;flex-wrap:wrap;padding-block:10px}
.tb-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.tb-brand:hover{text-decoration:none}
/* on the landing page the wordmark itself is the "you are here" marker */
.tb-brand.is-home .tb-word{border-bottom:4px solid var(--gold);padding-bottom:3px}
.tb-mark{width:38px;height:38px;flex:none}
.tb-word{font-size:2.25rem;letter-spacing:-.015em;line-height:1}
.tb-word b{font-weight:600;color:var(--cobalt)}
.tb-word span{font-weight:400;color:var(--cobalt)}
.tb-nav{display:flex;gap:6px;margin-left:6px;flex-wrap:wrap;align-items:center}
/* nav items are buttons in the page colour (same as the figure) */
.tb-nav a{color:var(--accent);font-size:.82rem;font-weight:500;
  border:1px solid color-mix(in srgb,var(--accent) 40%,#fff);border-radius:99px;padding:6px 10px}
.tb-nav a:hover{background:color-mix(in srgb,var(--accent) 10%,#fff);text-decoration:none}
.tb-nav a[aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}
.tb-cta{background:var(--cobalt);color:#fff !important;border-radius:8px;padding:9px 16px;font-size:.875rem}
.tb-cta:hover{background:var(--cobalt-deep);text-decoration:none !important}
/* language switcher — compact dropdown */
.lang-switch{display:inline-flex;align-items:center;margin-left:auto;flex:none}
.lang-select{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--accent);
  background:#fff;border:1px solid color-mix(in srgb,var(--accent) 40%,#fff);border-radius:8px;
  padding:6px 22px 6px 9px;cursor:pointer;line-height:1;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23123A9E' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.lang-select:hover{border-color:var(--accent)}
.lang-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang-switch button{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:6px;line-height:1}
.lang-switch button:not(:disabled):hover{color:var(--accent)}
.lang-switch button:disabled{opacity:.35;cursor:not-allowed;color:var(--muted)}
.lang-switch button[aria-pressed="true"]{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 12%,#fff)}
/* mobile menu toggle — hidden on desktop, shown below the nav breakpoint */
.tb-burger{display:none;margin-left:8px;align-items:center;justify-content:center;
  width:44px;height:38px;flex:none;background:none;cursor:pointer;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,#fff);border-radius:8px}
.tb-burger svg{width:22px;height:22px;display:block}
.tb-burger .ic-close{display:none}

/* ---------- page header (per-page hero) — centered ---------- */
.ph{padding-block:clamp(36px,6vh,56px) clamp(26px,4vh,40px);text-align:center}
.ph h1{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.18;margin-top:16px}
.ph-sub{max-width:62ch;margin-top:20px;font-size:1.125rem;color:var(--muted);margin-inline:auto}
.ph-sub strong{color:var(--ink);font-weight:500}
.ph-mat{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);margin-top:22px}
.ph-mat::before{content:"—";color:var(--gold);margin-right:9px;font-weight:700}

/* ---------- bands + primitives ---------- */
.band{padding-block:clamp(40px,6vh,64px)}
.band--soft{background:var(--ground-soft);border-block:1px solid var(--rule)}
.band-head{margin-bottom:28px}
.band-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.25;margin-top:14px}
.band-head p{color:var(--muted);margin-top:12px;max-width:66ch}

.btn{display:inline-block;background:var(--cobalt);color:#fff;border-radius:8px;
  padding:12px 24px;font-weight:500;font-size:.9688rem;border:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--cobalt-deep);text-decoration:none}
.btn--ghost{background:transparent;color:var(--cobalt);border:1px solid var(--peri)}
.btn--ghost:hover{background:var(--peri-tint)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground);
  padding:24px;display:flex;flex-direction:column;gap:10px}
.card h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.3}
.card p{font-size:.9375rem;color:var(--muted);flex:1}
.card .eyebrow{font-size:.68rem;color:var(--muted)}
/* placeholder card — content pending */
.card--pending{align-items:center;justify-content:center;text-align:center;min-height:132px;border-style:dashed}
.card--pending .pending{flex:none;margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trio article{border-top:2px solid var(--cobalt);padding-top:18px}
.trio h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.3}
.trio p{font-size:.9375rem;color:var(--muted);margin-top:8px}

.rolelist{list-style:none;display:grid;gap:9px;max-width:60ch}
.rolelist li{padding-left:22px;position:relative;font-size:.9688rem}
.rolelist li::before{content:"—";position:absolute;left:0;color:var(--gold);font-weight:700}

.indep{background:var(--peri-tint);border:1px solid var(--peri);border-radius:var(--radius);
  padding:16px 18px;font-size:.8438rem;color:var(--ink);max-width:58ch}
.indep b{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--cobalt);
  display:block;margin-bottom:6px;text-transform:uppercase;font-weight:500}

/* CTA band */
.cta-band{background:var(--cobalt);color:#fff}
.cta-band > .wrap{text-align:center}
.cta-band .band-head h2{color:#fff}
.cta-band .band-head p{color:var(--peri-tint)}
.cta-band .eyebrow{color:var(--peri)}
.cta-band .btn{background:var(--gold);color:var(--ink);font-weight:600}
.cta-band .btn:hover{background:#e3b414}

/* ---------- footer ---------- */
footer{background:var(--cobalt-deep);color:var(--peri-tint)}
.ft-in{padding-block:52px;display:grid;gap:34px;grid-template-columns:1.4fr 1fr}
.ft-disc{font-size:.8438rem;line-height:1.7;color:var(--peri);max-width:58ch}
.ft-disc strong{color:#fff;font-weight:500}
.ft-meta{display:flex;flex-direction:column;gap:8px;font-size:.875rem}
.ft-meta a{color:#fff;overflow-wrap:anywhere}
.ft-bottom{border-top:1px solid rgba(185,196,234,.25);padding-block:18px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--peri);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cards,.cards--4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cards,.cards--2,.cards--4,.trio{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .tb-word{font-size:1.6rem}
}
/* collapse the nav into a hamburger once the 8-item row no longer fits */
@media (max-width:1080px){
  .tb-in{gap:14px}
  .tb-burger{display:inline-flex}
  .lang-switch{margin-left:auto}
  .tb-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:8px;margin:0;background:var(--ground);
    border-bottom:1px solid var(--rule);box-shadow:0 12px 24px rgba(15,23,42,.10);
    padding:12px clamp(20px,4vw,40px) 18px;z-index:21}
  .tb.nav-open .tb-nav{display:flex}
  .tb.nav-open .tb-burger .ic-menu{display:none}
  .tb.nav-open .tb-burger .ic-close{display:block}
  .tb-nav a{width:100%;text-align:center;padding:11px 14px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- shared lifecycle figure (injected by shared.js on every page) ---------- */
.dia{margin-top:clamp(28px,5vh,52px)}
.dia svg{width:100%;height:auto;display:block}
.dia-caption{font-family:var(--mono);font-size:.71rem;color:var(--muted);
  letter-spacing:.08em;margin-top:10px;text-transform:uppercase}
/* colours all derive from the page accent (+ gold constant for the loads) */
.dia .ln{stroke:var(--accent);fill:none}
.dia .lnf{fill:var(--accent)}
.dia .num{fill:var(--accent)}
.dia .word{fill:var(--ink)}
.dia .load{stroke:var(--gold);fill:none}
.dia .loadf{fill:var(--gold)}
.dia .tint{stroke:color-mix(in srgb,var(--accent) 34%,#fff);fill:none}
.dia .tintf{fill:color-mix(in srgb,var(--accent) 34%,#fff)}
.dia .arrowfill{fill:color-mix(in srgb,var(--accent) 12%,#fff);stroke:color-mix(in srgb,var(--accent) 34%,#fff)}
.dia .txt{fill:var(--ink)}
.dia .dim{fill:var(--muted)}
/* late-life ECG: a red dot travels the trace like a heartbeat; the bright line
   is drawn behind it (in sync) so the trace lights up behind the dot and stays
   dim ahead of it — like a cardiac monitor sweep */
.dia .ecg-dim{stroke:color-mix(in srgb,var(--accent) 28%,#fff);fill:none}
.dia .ecg-bright{stroke:var(--accent);fill:none;stroke-dasharray:100;stroke-dashoffset:100;animation:ecgDraw 3.4s linear infinite}
@keyframes ecgDraw{to{stroke-dashoffset:0}}
.dia .ecg-dot{fill:#e5484d;offset-path:path("M732 52 L754 52 L762 34 L770 68 L778 42 L786 60 L794 47 L802 56 L810 50 L818 53 L830 52 L958 52");offset-rotate:0deg;
  animation:ecgDot 3.4s linear infinite, ecgPulse 1.1s ease-in-out infinite}
@keyframes ecgDot{to{offset-distance:100%}}
/* the dot pulses like a heartbeat as it sweeps the trace */
@keyframes ecgPulse{0%,100%{r:3px;filter:drop-shadow(0 0 1px rgba(229,72,77,.5))}12%{r:6.4px;filter:drop-shadow(0 0 5px rgba(229,72,77,.9))}26%{r:3px}}
@media (prefers-reduced-motion:reduce){
  .dia .ecg-bright{animation:none;stroke-dashoffset:0}
  .dia .ecg-dot{animation:none}
}
/* the two-vehicle convoy drives left-to-right across the in-service span and
   loops; the clipPath makes it emerge/exit at the span boundaries */
.dia .convoy-move{animation:convoyCross 7.5s linear infinite}
@keyframes convoyCross{from{transform:translateX(-360px)}to{transform:translateX(740px)}}
@media (prefers-reduced-motion:reduce){
  .dia .convoy-move{animation:none}
}
/* figure sits directly under the eyebrow label (a consistent one-liner) so it
   lands in the same spot on every page; the title + body follow below it */
.hero > .wrap > .dia, .ph > .wrap > .dia{margin-top:20px;margin-bottom:8px}
/* the scene grows left-to-right on every load; gated behind .go (added by JS) */
.dia.go svg{animation:bridgeGrow 2.1s cubic-bezier(.25,.6,.3,1) both}
@keyframes bridgeGrow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dia .plabel{opacity:1}
.dia.go .plabel{opacity:0;animation:plabelIn .55s ease-out both}
.dia.go .plabel:nth-of-type(1){animation-delay:.35s}
.dia.go .plabel:nth-of-type(2){animation-delay:.9s}
.dia.go .plabel:nth-of-type(3){animation-delay:1.5s}
@keyframes plabelIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .dia.go svg{animation:none;clip-path:none}
  .dia.go .plabel{opacity:1;animation:none;transform:none}
}

/* ---------- centered layout (every page except About) ---------- */
.pg-center .band-head{text-align:center}
.pg-center .band-head p{margin-inline:auto}
.pg-center .card{text-align:center;align-items:center}
.pg-center .area--alma h3{justify-content:center}
.pg-center .flagtag--wl{align-self:center}
.pg-center .trio article{text-align:center}
.pg-center .rolelist,.pg-center .outlist{width:fit-content;max-width:100%;margin-inline:auto}
.pg-center .phase-label{text-align:center}
.pg-center .duo-card{text-align:center}
.pg-center .duo-card p{margin-inline:auto}
.pg-center .steps .step{text-align:center}
.pg-center .steps .step h3{justify-content:center}
.pg-center .indep{margin-inline:auto}