/* ==========================================================================
   Anti-IFFs Policy Tracker — Design System
   Brand: Tax Justice Network Africa (brand.taxjusticeafrica.net)
   --------------------------------------------------------------------------
   Core palette (authentic TJNA brand tokens):
     Carrot Orange  #F39422   Free-Speech Red #D00000   Oxford Blue #052443
     Jet Grey       #2B2D2F   Davy's Grey     #333333    Isabelline  #F5F1F1
   Fonts: brand uses Arial (display) / Calibri (body). We elevate with
   Plus Jakarta Sans + Inter, keeping Arial/Calibri/Helvetica as fallbacks.
   ========================================================================== */

/* ----------------------------------------------------------- design tokens */
:root {
  /* brand core */
  --orange:        #F39422;
  --orange-600:    #E8821E;
  --orange-050:    #FFF4E6;
  --red:           #D00000;
  --red-050:       #FBE9E9;
  --navy:          #052443;   /* Oxford Blue */
  --navy-800:      #07305c;
  --navy-700:      #0a3c73;
  --jet:           #2B2D2F;
  --davy:          #333333;
  --isabelline:    #F5F1F1;

  /* data scale (semantic, brand-tuned) */
  --s-high:        #0E9F6E;   /* established  */
  --s-mid:         #F39422;   /* developing   */
  --s-low:         #E8821E;   /* emerging     */
  --s-crit:        #D00000;   /* nascent      */
  --s-high-050:    #E7F6EF;

  /* neutral surfaces */
  --bg:            #FBFAF8;
  --bg-warm:       #F5F1F1;
  --surface:       #FFFFFF;
  --line:          #ECE7E1;
  --line-strong:   #DfD8d0;
  --ink:           #1c2530;
  --ink-soft:      #51606f;
  --ink-faint:     #8a96a3;

  /* typography */
  --font-display: "Plus Jakarta Sans", "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", "Calibri", "Helvetica", "Arial", sans-serif;

  /* shape & depth */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(5,36,67,.06), 0 1px 3px rgba(5,36,67,.05);
  --sh-2: 0 6px 16px -6px rgba(5,36,67,.12), 0 2px 6px -2px rgba(5,36,67,.08);
  --sh-3: 0 24px 48px -16px rgba(5,36,67,.20), 0 8px 20px -8px rgba(5,36,67,.12);
  --sh-orange: 0 14px 34px -12px rgba(243,148,34,.55);

  --ring: 0 0 0 4px rgba(243,148,34,.28);
  --maxw: 1200px;
  --nav-h: 70px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: rgba(243,148,34,.28); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }

/* fluid type scale */
.h-display { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.7rem); letter-spacing: -0.035em; line-height: 1.02; }
.h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
.h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 800; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-600);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow.on-dark { color: var(--orange); }
.lede { font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-faint); }
.tnum { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- layout utils */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head .h2 { margin-top: .7rem; }
.section-head .lede { margin-top: .9rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .85rem 1.45rem; border-radius: var(--r-pill);
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--orange); color: #2a1602; box-shadow: var(--sh-orange); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(243,148,34,.7); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); transform: translateY(-2px); }
.btn--ondark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.btn--ondark:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn--sm { padding: .6rem 1.05rem; font-size: .85rem; }
.linkarrow { font-family: var(--font-display); font-weight: 700; color: var(--orange-600); display: inline-flex; align-items: center; gap: .4rem; }
.linkarrow svg { transition: transform .2s ease; }
.linkarrow:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600; padding: .32rem .7rem; border-radius: var(--r-pill);
  background: var(--isabelline); color: var(--ink-soft);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--high { background: var(--s-high-050); color: #0a7a54; }
.chip--mid  { background: var(--orange-050); color: var(--orange-600); }
.chip--crit { background: var(--red-050); color: var(--red); }
.trend { font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: .2rem; }
.trend--up { color: #0a7a54; } .trend--down { color: var(--red); } .trend--flat { color: var(--ink-faint); }

/* ===================================================================== NAV */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(251,250,248,.72); backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease, box-shadow .3s;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--sh-1); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-size: 1.02rem; }
.brand__name span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600); }
.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links a { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink-soft); padding: .5rem .8rem; border-radius: var(--r-pill); transition: color .2s, background .2s; }
.nav__links a:hover { color: var(--navy); background: rgba(5,36,67,.05); }
.nav__links a.active { color: var(--navy); background: rgba(243,148,34,.14); }
.nav__cta { display: flex; align-items: center; gap: .7rem; }
.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content:""; display:block; width:18px; height:2px; background: var(--navy); border-radius:2px; transition: transform .25s, opacity .2s; }
.nav__toggle span::before { transform: translateY(-6px); } .nav__toggle span::after { transform: translateY(4px); }
.nav.open .nav__toggle span { background: transparent; }
.nav.open .nav__toggle span::before { transform: rotate(45deg); }
.nav.open .nav__toggle span::after { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 920px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--surface); padding: 1rem 1.1rem 1.4rem; border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2); transform: translateY(-130%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .nav.open .nav__links { transform: translateY(0); }
  .nav__links a { padding: .8rem 1rem; font-size: 1rem; }
  .nav__cta .btn span.hide-sm { display: none; }
}

/* ==================================================================== HERO */
.hero {
  position: relative; color: #eaf0f7; overflow: clip;
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(243,148,34,.20), transparent 60%),
    radial-gradient(800px 500px at 8% 110%, rgba(0,184,212,.14), transparent 55%),
    linear-gradient(160deg, #041a33 0%, var(--navy) 46%, #07305c 100%);
}
.hero::after { /* fine grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 4px 4px; mask-image: linear-gradient(#000, transparent 75%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3.2rem, 7vw, 5.4rem); }
.hero h1 { color: #fff; margin-top: 1.1rem; }
.hero h1 .accent { color: var(--orange); }
.hero .lede { color: #c2d0e0; margin-top: 1.25rem; max-width: 36ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero__meta .k { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: #fff; letter-spacing: -.02em; }
.hero__meta .l { font-size: .8rem; color: #9fb2c6; letter-spacing: .02em; }

.hero__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.hero__disclaimer { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; color:#9fb2c6; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:.4rem .8rem; border-radius:var(--r-pill); }
.hero__disclaimer .dot { width:7px;height:7px;border-radius:50%;background:var(--orange); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__art { max-width: 420px; margin-inline: auto; order: -1; }
}

/* africa dotted map motif (built in JS) */
.africa-map { width: 100%; height: auto; }
.africa-map .land { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.10); stroke-width:1; }
.africa-dot { fill: rgba(255,255,255,.18); }
.africa-node { cursor: pointer; transition: r .2s ease; }
.africa-node:hover { filter: drop-shadow(0 0 8px rgba(243,148,34,.9)); }
.africa-node-label { font-family: var(--font-display); font-weight:700; font-size: 11px; fill: #fff; }

/* ================================================================ MARQUEE */
.partners { border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.partners .wrap { display: flex; align-items: center; gap: 1.2rem 2.5rem; flex-wrap: wrap; justify-content: center; padding-block: 1.1rem; }
.partners span { color: #9fb2c6; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.partners b { color: #e7eef6; font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; }

/* ================================================================== CARDS */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .25s ease, box-shadow .3s ease, border-color .3s; }
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent; }
.card__pad { padding: clamp(1.3rem, 2.4vw, 1.9rem); }

/* cluster cards */
.clusters { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px){ .clusters { grid-template-columns: 1fr; } }
.cluster { position: relative; overflow: hidden; }
.cluster::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background: var(--c, var(--orange)); }
.cluster__top { display:flex; align-items:center; gap:1rem; }
.cluster__ico { width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center; background: var(--c-soft, var(--orange-050)); color: var(--c, var(--orange-600)); }
.cluster__ico svg { width:26px; height:26px; }
.cluster__n { font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.14em; color: var(--ink-faint); text-transform:uppercase; }
.cluster h3 { margin-top:.15rem; font-size:1.18rem; }
.cluster p { color: var(--ink-soft); margin-top:.7rem; font-size:.95rem; }
.cluster__avg { margin-top:1.2rem; display:flex; align-items:center; gap:.7rem; }
.cluster__avg .bartrack { flex:1; height:8px; background: var(--isabelline); border-radius:var(--r-pill); overflow:hidden; }
.cluster__avg .barfill { height:100%; width:0; border-radius:var(--r-pill); background: var(--c, var(--orange)); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.cluster__avg .v { font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--ink); }

/* stat / feature bento */
.bento { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .bento { grid-template-columns: repeat(2,1fr);} }
.stat { padding: clamp(1.2rem,2vw,1.6rem); }
.stat .k { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,1.4rem+1.6vw,2.7rem); letter-spacing:-.03em; line-height:1; color: var(--navy); }
.stat .k em { font-style: normal; color: var(--orange); }
.stat .l { margin-top:.5rem; font-size:.9rem; color: var(--ink-soft); }

/* =============================================================== LEADERBOARD */
.board { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.board__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding: 1.1rem clamp(1rem,2vw,1.5rem); border-bottom:1px solid var(--line); }
.board__title { font-family:var(--font-display); font-weight:800; font-size:1.05rem; }
.segmented { display:inline-flex; background: var(--isabelline); padding:4px; border-radius:var(--r-pill); gap:2px; flex-wrap:wrap; }
.segmented button { font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--ink-soft); padding:.45rem .85rem; border-radius:var(--r-pill); transition: all .2s; white-space:nowrap; }
.segmented button.active { background: var(--surface); color: var(--navy); box-shadow: var(--sh-1); }

.row {
  display:grid; grid-template-columns: 34px 1.7fr 1fr 92px; align-items:center; gap:1rem;
  padding: .95rem clamp(1rem,2vw,1.5rem); border-bottom:1px solid var(--line);
  transition: background .2s; position:relative;
}
.row:last-child { border-bottom:0; }
.row:hover { background: #fbf7f1; }
.row__rank { font-family:var(--font-display); font-weight:800; color:var(--ink-faint); font-size:.95rem; text-align:center; }
.row__rank.top { color: var(--orange); }
.row__country { display:flex; align-items:center; gap:.7rem; min-width:0; }
.row__flag { font-size:1.5rem; line-height:1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
.row__name { font-family:var(--font-display); font-weight:700; font-size:1rem; }
.row__region { font-size:.78rem; color:var(--ink-faint); }
.row__bar { display:flex; align-items:center; gap:.7rem; }
.row__bar .bartrack { flex:1; height:10px; background: var(--isabelline); border-radius:var(--r-pill); overflow:hidden; }
.row__bar .barfill { height:100%; width:0; border-radius:var(--r-pill); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.row__score { display:flex; align-items:baseline; gap:.3rem; justify-content:flex-end; }
.row__score b { font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
.row__score small { font-size:.72rem; color:var(--ink-faint); }
.scorepill { font-family:var(--font-display); font-weight:800; font-size:.82rem; color:#fff; padding:.28rem .6rem; border-radius:var(--r-pill); min-width:42px; text-align:center; }
@media (max-width: 680px){
  .row { grid-template-columns: 26px 1.4fr 70px; }
  .row__bar { display:none; }
}

/* ============================================================= COHORT BARS */
.cluster-bars { display:grid; gap:1.25rem; }
.cbar__top { display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.cbar__ico { width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--c-soft); color:var(--c); }
.cbar__ico svg { width:18px; height:18px; }
.cbar__name { font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.cbar__v { margin-left:auto; font-family:var(--font-display); font-weight:800; font-size:1.1rem; }
.cbar .bartrack { height:9px; background:var(--isabelline); border-radius:var(--r-pill); overflow:hidden; }
.cbar .barfill { display:block; height:100%; width:0; border-radius:var(--r-pill); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }

/* ================================================================ HEATMAP */
.heatmap { display:flex; flex-direction:column; gap:6px; }
.hm__row { display:grid; grid-template-columns: 1.4fr repeat(4, 1fr) 1fr; gap:6px; align-items:center; }
.hm__row--head { margin-bottom:2px; }
.hm__corner, .hm__col { font-family:var(--font-display); font-weight:700; font-size:.74rem; color:var(--ink-faint); letter-spacing:.02em; text-transform:uppercase; padding:.2rem .2rem; }
.hm__col { text-align:center; }
.hm__col--overall { color:var(--navy); }
a.hm__row { padding:5px; border-radius:14px; transition: background .2s, transform .2s; }
a.hm__row:hover { background:#fbf7f1; transform: translateX(2px); }
.hm__name { display:flex; align-items:center; gap:.6rem; }
.hm__name b { font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.hm__cell { aspect-ratio: 16/9; min-height:46px; border-radius:11px; display:grid; place-items:center;
  background: var(--bg, #ccc); }
.hm__cell span { font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.22); }
.hm__cell--overall { box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
@media (max-width: 680px){
  .hm__row { grid-template-columns: 1.2fr repeat(4,1fr) ; }
  .hm__col--overall, .hm__cell--overall { display:none; }
  .hm__name b { font-size:.82rem; }
  .hm__cell { min-height:40px; }
  .hm__cell span { font-size:.9rem; }
}

/* ===================================================================== MAP */
.tier-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; }
.tier-legend li { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--ink-soft); }
.tier-legend .sw { width:14px; height:14px; border-radius:5px; }

/* =========================================================== COUNTRY PROFILE */
.profile-hero { background:
  radial-gradient(700px 360px at 90% -20%, rgba(243,148,34,.18), transparent 60%),
  linear-gradient(155deg, #041a33, var(--navy) 60%, #07305c); color:#eaf0f7; }
.profile-hero .wrap { padding-block: clamp(2.4rem,5vw,3.6rem); }
.crumbs { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:#9fb2c6; }
.crumbs a:hover { color:#fff; }
.profile-top { display:grid; grid-template-columns: 1fr auto; gap:2rem; align-items:center; margin-top:1.2rem; }
.profile-id { display:flex; align-items:center; gap:1.1rem; }
.profile-id .flag { font-size: clamp(3rem,2rem+3vw,4.6rem); line-height:1; }
.profile-id h1 { color:#fff; }
.profile-id .sub { color:#9fb2c6; margin-top:.3rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.gauge-wrap { display:grid; place-items:center; }
@media (max-width: 760px){ .profile-top { grid-template-columns:1fr; } }

.profile-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.2rem,2.5vw,2rem); align-items:start; }
@media (max-width: 900px){ .profile-grid { grid-template-columns:1fr; } }

.cluster-detail { }
.cluster-detail__head { display:flex; align-items:center; gap:.9rem; margin-bottom:.2rem; }
.cluster-detail__head .ico { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--c-soft,var(--orange-050));color:var(--c,var(--orange-600)); flex:none;}
.cluster-detail__head .ico svg{width:21px;height:21px;}
.cluster-detail__head h3 { font-size:1.08rem; }
.cluster-detail__head .pill { margin-left:auto; }
.ind { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line); }
.ind:first-of-type { border-top:0; }
.ind__label { flex:1; font-size:.92rem; color:var(--ink); }
.ind__status { display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.78rem; }
.ind__pips { display:flex; gap:3px; }
.ind__pips i { width:7px; height:14px; border-radius:3px; background: var(--isabelline); display:block; }

/* radar */
.radar-card { position: sticky; top: calc(var(--nav-h) + 16px); }
.radar svg { width:100%; height:auto; }
.radar .axis { stroke: var(--line-strong); stroke-width:1; }
.radar .ring { fill:none; stroke: var(--line); stroke-width:1; }
.radar .area { fill: rgba(243,148,34,.20); stroke: var(--orange); stroke-width:2.5; stroke-linejoin:round; }
.radar .pt { fill: var(--orange); stroke:#fff; stroke-width:2; }
.radar .lab { font-family:var(--font-display); font-weight:700; font-size:11px; fill: var(--ink-soft); }
.radar .labv { font-family:var(--font-display); font-weight:800; font-size:11px; fill: var(--navy); }

/* ============================================================ CTA / FOOTER */
.cta-band { position: relative; overflow:clip; color:#fff;
  background: radial-gradient(700px 400px at 85% 120%, rgba(243,148,34,.30), transparent 60%), linear-gradient(135deg,#07305c,var(--navy)); }
.cta-band .wrap { display:grid; grid-template-columns: 1.3fr .7fr; align-items:center; gap:2rem; padding-block: clamp(2.6rem,6vw,4.2rem); }
.cta-band h2 { color:#fff; }
.cta-band p { color:#c2d0e0; margin-top:.8rem; }
.cta-band .actions { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:760px){ .cta-band .wrap{ grid-template-columns:1fr;} .cta-band .actions{justify-content:flex-start;} }

.foot { background: var(--navy); color:#a9bacd; }
.foot .wrap { padding-block: clamp(2.6rem,5vw,3.6rem); }
.foot__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:2rem; }
.foot h4 { color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.foot a { display:block; padding:.32rem 0; color:#a9bacd; font-size:.92rem; transition:color .2s; }
.foot a:hover { color: var(--orange); }
.foot__brand p { font-size:.9rem; line-height:1.6; max-width:34ch; margin-top:1rem; }
.foot__bottom { margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
@media (max-width: 820px){ .foot__grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .foot__grid { grid-template-columns:1fr; } }

/* --------------------------------------------------------------- bar fills */
/* barfill is a <span>; without display:block its width/height are ignored. */
.barfill { display: block; height: 100%; }

/* ----------------------------------------------------------- flag images */
.flag-img { width:26px; height:19px; border-radius:3px; object-fit:cover; flex:none;
  box-shadow: 0 0 0 1px rgba(5,36,67,.10), 0 1px 2px rgba(5,36,67,.18); background:var(--isabelline); }
.flag-img--xs { width:20px; height:14px; border-radius:2px; }
.flag-img--lg { width:66px; height:48px; border-radius:9px; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 6px 18px -6px rgba(0,0,0,.5); }

/* =========================================================== reveal anim */
/* Progressive enhancement: only hide content once JS confirms it can reveal
   it. Without the .js class (script blocked/failed) everything stays visible. */
.js .reveal { opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal[data-d="1"]{transition-delay:.08s;} .js .reveal[data-d="2"]{transition-delay:.16s;}
.js .reveal[data-d="3"]{transition-delay:.24s;} .js .reveal[data-d="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .js .reveal .barfill{transform:none;transition:none;}
  *{scroll-behavior:auto !important;}
}

/* small helpers */
.divider { height:1px; background: var(--line); border:0; margin-block: 2rem; }
.note { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--ink-faint); background:var(--isabelline); padding:.4rem .8rem; border-radius:var(--r-pill); }
.note .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);}
.grid-2 { grid-template-columns:1fr 1fr; } @media(max-width:760px){ .grid-2{grid-template-columns:1fr;} }
.flex { display:flex; } .between{justify-content:space-between;} .items-center{align-items:center;} .gap{gap:1rem;} .wraps{flex-wrap:wrap;}
.mt-1{margin-top:.6rem;} .mt-2{margin-top:1.2rem;} .mt-3{margin-top:2rem;}