/* ============================================================
   Национальный рейтинг 2026 — Сахалинская область
   Refined institutional / arctic editorial
   ============================================================ */

:root{
  /* navy family */
  --navy-900:#06204c;
  --navy-800:#0a2c66;
  --navy-700:#0e3a85;
  --navy-600:#1450a8;
  --blue-500:#2f6fd6;
  --blue-400:#5a90e0;
  --blue-300:#9cc1f0;
  --ice-200:#cfe2fb;
  --ice-100:#e8f1fd;
  --ice-50:#f4f8ff;

  /* accents */
  --gold:#f4b400;
  --gold-deep:#cf9400;

  /* group colors */
  --gA:#2e9e5b;
  --gB:#d99a2b;
  --gC:#e2772a;
  --gD:#d64a45;
  --gE:#a02631;

  /* ink */
  --ink:#13233d;
  --ink-soft:#33445e;
  --muted:#6a7b94;
  --line:#dde6f2;
  --line-soft:#eef3fa;

  --paper:#ffffff;
  --paper-2:#f6f9ff;

  --maxw:1280px;
  --shadow-sm:0 1px 3px rgba(13,40,90,.06), 0 1px 2px rgba(13,40,90,.04);
  --shadow-md:0 10px 30px rgba(11,40,100,.10), 0 2px 8px rgba(11,40,100,.06);
  --shadow-lg:0 30px 70px rgba(8,30,80,.18);

  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Golos Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0;
  line-height:1.5;
}
::selection{background:var(--blue-300); color:var(--navy-900)}

/* ---------- scroll-snap deck ---------- */
.deck{
  height:100vh; overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-padding-top:0;
}
.slide{
  scroll-snap-align:start;
  height:100vh; min-height:100vh;
  position:relative;
  display:flex; flex-direction:column;
  padding:74px 48px 56px;
  overflow:hidden;
}
.slide-inner{
  width:100%; max-width:none; margin:0 auto;
  flex:1; display:flex; flex-direction:column;
  min-height:0;
}

/* ---------- top chrome ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:58px; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:0 22px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:opacity .4s, transform .4s;
}
.topbar.hide{opacity:0; transform:translateY(-100%); pointer-events:none}
.topbar .tb-gerb{height:34px; width:auto; display:block}
.topbar .tb-min{display:flex; flex-direction:column; line-height:1.08}
.topbar .tb-min b{font-size:11.5px; letter-spacing:.04em; color:var(--gold-deep); font-weight:700; text-transform:uppercase}
.topbar .tb-min span{font-size:11px; letter-spacing:.03em; color:var(--navy-700); font-weight:600; text-transform:uppercase}
.topbar .tb-spacer{flex:1}
.topbar .tb-logo{height:32px; width:auto; opacity:.92}
.topbar .tb-title{
  font-family:var(--serif); font-weight:600; font-size:14px; color:var(--navy-800);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw;
}

/* progress line */
.progress{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); z-index:70; width:0; transition:width .25s ease}

/* ---------- side dot nav ---------- */
.nav{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:9px; align-items:flex-end;
}
.nav button{
  --d:9px;
  width:var(--d); height:var(--d); border-radius:50%;
  border:1.6px solid var(--blue-400); background:transparent; cursor:pointer;
  padding:0; position:relative; transition:all .25s;
}
.nav button:hover{background:var(--blue-300)}
.nav button.active{background:var(--gold); border-color:var(--gold-deep); width:11px; height:11px}
.nav button .lbl{
  position:absolute; right:20px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy-800); color:#fff; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:all .2s; box-shadow:var(--shadow-md);
}
.nav button:hover .lbl{opacity:1; transform:translateY(-50%) translateX(0)}
.nav button .lbl::after{content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; background:var(--navy-800)}

/* ---------- arrows hint ---------- */
.hint{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:55;
  display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px;
  background:rgba(255,255,255,.8); padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:opacity .5s;
}
.hint kbd{font-family:var(--sans); font-size:11px; background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--ink-soft)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(47,111,214,.28), transparent 60%),
    linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 60%, #04183a 100%);
  color:#fff; padding:0;
}
.hero .slide-inner{max-width:none; padding:0}
.hero-grid{display:grid; grid-template-columns:300px 1fr; flex:1; min-height:0}
.hero-side{position:relative; overflow:hidden; border-right:1px solid rgba(255,255,255,.10)}
.hero-side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.95}
.hero-side::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%, var(--navy-900))}
.hero-main{position:relative; padding:44px 70px 40px; display:flex; flex-direction:column; justify-content:center}
.tri{position:absolute; width:0; height:0; opacity:.10; pointer-events:none}
.hero-main .tri1{right:8%; top:46%; border-left:120px solid transparent; border-bottom:200px solid var(--blue-400)}
.hero-main .tri2{right:2%; bottom:6%; border-left:70px solid transparent; border-bottom:120px solid var(--blue-300); opacity:.08}

.hero-top{display:flex; align-items:center; gap:22px; position:absolute; top:40px; left:70px; right:70px}
.hero-gerb{height:76px; width:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero-min{line-height:1.18}
.hero-min b{display:block; font-size:14px; letter-spacing:.06em; color:var(--gold); font-weight:700; text-transform:uppercase}
.hero-min span{display:block; font-size:13px; letter-spacing:.04em; color:var(--ice-200); font-weight:600; text-transform:uppercase}
.hero-logos{
  margin-left:auto; display:flex; align-items:center; gap:24px;
  background:rgba(255,255,255,.95); border-radius:14px; padding:10px 20px;
  box-shadow:0 8px 26px rgba(4,16,42,.28);
}
.hero-logos img{width:auto}
.hero-logos .lg-nr{height:50px}
.hero-logos .lg-asi{height:38px}
.hero-logos .lg-shield{height:50px}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:var(--navy-900); font-weight:800; letter-spacing:.04em;
  font-size:13px; text-transform:uppercase; padding:9px 18px; border-radius:30px;
  margin-bottom:22px; box-shadow:0 8px 24px rgba(244,180,0,.35);
  animation:rise .8s .15s both;
}
.hero-badge b{font-size:15px}
.hero h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(28px,3.1vw,46px);
  line-height:1.16; letter-spacing:-.01em; max-width:34ch;
  animation:rise .9s .25s both;
}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero-rule{height:3px; width:104px; background:var(--gold); margin:26px 0; border-radius:2px; animation:grow .9s .5s both; transform-origin:left}
.hero-speaker{animation:rise .9s .4s both}
.hero-speaker .nm{font-family:var(--serif); font-size:23px; font-weight:600; color:#fff}
.hero-speaker .rl{font-size:16px; color:var(--ice-200); margin-top:5px; max-width:46ch}
.hero-foot{position:absolute; left:70px; right:70px; bottom:38px; display:flex; align-items:flex-end; justify-content:space-between; color:var(--ice-200); font-size:15px; animation:rise .9s .6s both}
.hero-foot .yr{font-family:var(--serif); font-size:27px; color:#fff; font-weight:600}

/* ============================================================
   SECTION HEADERS (content slides)
   ============================================================ */
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; flex:0 0 auto}
.shead .eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); margin-bottom:6px}
.shead h2{font-family:var(--serif); font-weight:700; font-size:clamp(24px,2.6vw,36px); color:var(--navy-800); line-height:1.12; letter-spacing:-.01em}
.shead .sh-side{display:flex; align-items:center; gap:14px}

/* decorative faint triangles bottom-right of content slides */
.slide-bg-tri{position:absolute; right:0; bottom:0; width:46%; height:60%; pointer-events:none; opacity:.5; z-index:0}
.slide-bg-tri svg{width:100%; height:100%}
.slide > .slide-inner{position:relative; z-index:1}

/* ============================================================
   SLIDE 2 — breakthrough
   ============================================================ */
.brk-grid{display:grid; grid-template-columns:0.78fr 1.22fr; gap:34px; flex:1; min-height:0; align-items:stretch}
.top3{display:flex; flex-direction:column; gap:0}
.top3 .t3-cap{font-family:var(--serif); font-size:21px; font-weight:700; color:var(--navy-800); margin-bottom:2px}
.top3 .t3-sub{font-size:13px; color:var(--muted); margin-bottom:18px}
.t3-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.t3-row:last-child{border-bottom:1px solid var(--line)}
.t3-place{
  flex:0 0 auto; width:54px; height:54px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; line-height:1;
  background:var(--ice-100); color:var(--navy-700); border:1px solid var(--ice-200);
}
.t3-place b{font-size:24px}
.t3-place span{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.t3-row.is-sakh .t3-place{background:linear-gradient(135deg,var(--navy-700),var(--navy-800)); color:#fff; border:none; box-shadow:var(--shadow-md)}
.t3-row.is-sakh .t3-place span{color:rgba(255,255,255,.92)}
.t3-regions{display:flex; flex-direction:column; gap:1px}
.t3-regions .reg{font-size:15px; color:var(--ink-soft)}
.t3-regions .reg.sakh{font-weight:700; color:var(--navy-800); font-size:16.5px}
.t3-regions .reg.sakh::after{content:'★'; color:var(--gold); margin-left:7px; font-size:13px}

.brk-right{display:flex; flex-direction:column; gap:18px; min-height:0}
.stat-row{display:flex; gap:16px}
.stat{
  flex:1; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:13px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.stat::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue-500)}
.stat.green::before{background:var(--gA)}
.stat .lab{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.01em}
.stat .val{font-family:var(--serif); font-weight:700; font-size:33px; color:var(--navy-800); line-height:1.05; margin-top:4px; font-feature-settings:"tnum"}
.stat.green .val{color:var(--gA)}
.stat .val small{font-size:16px; color:var(--muted); font-weight:600; font-family:var(--sans)}
.chart-card{
  flex:2.2; background:linear-gradient(180deg,#fff,#fbfdff); border:1.5px solid var(--ice-200); border-radius:18px;
  padding:18px 22px 14px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; min-height:0;
}
.chart-card .cc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.chart-card .cc-head h4{font-size:15px; font-weight:700; color:var(--navy-800)}
.chart-card .legend{display:flex; gap:16px; font-size:12px; color:var(--muted)}
.chart-card .legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.chart-card svg{flex:1; width:100%; min-height:0}

/* ============================================================
   SLIDE 3 — overview
   ============================================================ */
.ov-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:36px; flex:1; min-height:0}
/* slide 3: headline stat band + enriched direction grid filling the slide */
.ov-center{flex:1; display:flex; flex-direction:column; width:100%; max-width:none; margin:0 auto; min-height:0; padding-top:6px}
.ov-statband{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; flex:0 0 auto}
.ovs{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:15px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.ovs::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue-500)}
.ovs.gold::before{background:var(--gold)}
.ovs.green::before{background:var(--gA)}
.ovs-v{font-family:var(--serif); font-weight:700; font-size:31px; color:var(--navy-800); line-height:1; font-feature-settings:"tnum"}
.ovs.gold .ovs-v{color:var(--gold-deep)}
.ovs.green .ovs-v{color:var(--gA)}
.ovs-v small{font-size:14px; color:var(--muted); font-weight:600; font-family:var(--sans)}
.ovs-l{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.25; max-width:22ch}
.ov-cap{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--navy-800); margin:18px 0 10px; flex:0 0 auto}
.ov-cap b{color:var(--blue-500)}
.ov-meta{font-weight:600; color:var(--muted)}
.dir-list{display:flex; flex-direction:column; gap:7px}
.dir-list.ov-2col{display:grid; grid-template-columns:1fr 1fr; gap:13px; flex:1; min-height:0; grid-auto-rows:1fr}
.dir-item{
  display:flex; align-items:center; gap:18px; padding:20px 26px;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--blue-400);
  border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; cursor:pointer;
}
.dir-item.top{border-left-color:var(--gold)}
.dir-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--blue-300); border-left-color:var(--blue-500)}
.dir-item.top:hover{border-left-color:var(--gold)}
.dir-body{flex:1; min-width:0}
.dir-body .dn{font-size:17px; font-weight:700; color:var(--navy-800); line-height:1.18}
.dir-body .df{font-size:12.5px; color:var(--muted); margin-top:4px}
.dir-rank{flex:0 0 auto; font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px; white-space:nowrap}
.dir-rank.r-top3{background:rgba(244,180,0,.18); color:var(--gold-deep)}
.dir-rank.r-top10{background:var(--ice-100); color:var(--blue-500)}

.leader-card{
  background:linear-gradient(160deg, var(--navy-700), var(--navy-800));
  color:#fff; border-radius:18px; padding:26px 28px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden; align-self:start;
}
.leader-card::after{content:''; position:absolute; right:-30px; top:-30px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(244,180,0,.18),transparent 70%)}
.leader-card .lc-title{font-family:var(--serif); font-size:22px; font-weight:700; margin-bottom:4px}
.leader-card .lc-title b{color:var(--gold)}
.leader-card .lc-sub{font-size:13px; color:var(--ice-200); margin-bottom:20px}
.lc-block{margin-bottom:20px}
.lc-block:last-child{margin-bottom:0}
.lc-block .lc-h{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:8px}
.lc-block .lc-h::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.18)}
.lc-row{display:flex; align-items:baseline; gap:12px; padding:5px 0}
.lc-row .pl{font-family:var(--serif); font-weight:700; font-size:19px; color:#fff; flex:0 0 86px}
.lc-row .pl small{font-size:11px; color:var(--ice-200); font-weight:400; font-family:var(--sans); margin-left:3px}
.lc-row .nm{font-size:13.5px; color:var(--ice-100); font-weight:600; letter-spacing:.01em}

/* ============================================================
   DIRECTION slides — data tables
   ============================================================ */
.dir-slide{padding-bottom:34px}
.dir-slide .slide-inner{gap:10px}
.dir-slide .shead{margin-bottom:0; align-items:flex-start}
.dir-slide .shead h2{font-size:clamp(20px,2.1vw,30px)}
.dir-slide .eyebrow{margin-bottom:4px}
.dir-head{display:flex; align-items:center; gap:16px}
.dir-no{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:24px; color:#fff;
  background:linear-gradient(140deg, var(--navy-700), var(--navy-800)); box-shadow:var(--shadow-md);
}
.dir-head h2{margin:0}
.dir-callouts{display:flex; gap:12px; flex:0 0 auto; flex-wrap:wrap}
.callout{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:7px 13px; box-shadow:var(--shadow-sm);
}
.callout .co-ic{width:31px; height:31px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; font-family:var(--serif)}
.callout .co-b{line-height:1.12}
.callout .co-b b{font-size:13.5px; color:var(--navy-800); font-weight:700; display:block}
.callout .co-b span{font-size:11px; color:var(--muted)}
.callout.rank .co-ic{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--navy-900)}
.callout.a .co-ic{background:var(--gA)}
.callout.imp .co-ic{background:var(--blue-500)}

.table-wrap{
  flex:1; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); box-shadow:var(--shadow-sm); position:relative;
}
/* font-size is set per slide via --tfs so the whole direction fits one screen */
table.data{width:100%; border-collapse:collapse; font-size:var(--tfs,11px); table-layout:fixed}
table.data col.c-num{width:4%}
table.data col.c-name{width:30%}
table.data col.c-org{width:18%}
table.data col.c-yr{width:8%}
table.data col.c-dyn{width:10%}
table.data col.c-ref{width:7.3%}
/* responsible body cell (merged across its rows) */
table.data td.org{
  text-align:left; vertical-align:middle; color:var(--ink-soft);
  font-size:.92em; line-height:1.15; border-left:1px solid var(--line);
  background:var(--paper-2);
}
table.data thead th{
  position:sticky; top:0; z-index:3; background:var(--navy-800); color:#fff;
  font-weight:600; font-size:.88em; letter-spacing:.02em; text-transform:uppercase;
  padding:.6em .8em; text-align:center; border-right:1px solid rgba(255,255,255,.08);
  line-height:1.08;
}
table.data thead th.l{text-align:left}
table.data thead th:first-child{border-top-left-radius:0}
table.data tbody td{padding:.4em .8em; border-bottom:1px solid var(--line-soft); text-align:center; vertical-align:middle; color:var(--ink-soft)}
table.data tbody td.l{text-align:left}
/* numeric reference columns right-aligned (no float) */
table.data th.r, table.data td.r{text-align:right; padding-right:1.5em; font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:var(--ice-50)}
.sub-row td{
  background:var(--ice-100); color:var(--navy-700); font-weight:700; font-size:.92em;
  text-transform:uppercase; letter-spacing:.03em; padding:.32em .8em; text-align:left;
}
/* indicator name on a single line where possible (unit inline, org in tooltip) */
.cell-name{display:block; max-width:none; line-height:1.14}
.cell-name .cn-t{color:var(--ink); font-weight:500}
.cell-name .cn-m{color:var(--muted); white-space:nowrap}
.cell-code{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.95em; font-weight:600}
.num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}

/* group badge */
.gb{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.75em; height:1.75em; border-radius:.42em; color:#fff; font-weight:700; font-size:.92em;
  font-family:var(--sans); box-shadow:var(--shadow-sm);
}
.gb.A{background:var(--gA)} .gb.B{background:var(--gB)} .gb.C{background:var(--gC)}
.gb.D{background:var(--gD)} .gb.E{background:var(--gE)}
.val-grp{display:grid; grid-template-columns:1fr 1.75em; align-items:center; gap:.5em; width:6.4em; margin:0 auto}
.val-grp .num{text-align:right; white-space:nowrap; overflow:visible}
.val-grp .gb{justify-self:start}

/* dynamics */
.dyn{display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.95em; font-variant-numeric:tabular-nums; white-space:nowrap}
.dyn.up{color:var(--gA)} .dyn.down{color:var(--gD)} .dyn.flat{color:var(--muted)}
.dyn .ar{font-size:1em}

/* ============================================================
   CONCLUSION
   ============================================================ */
.fin{
  background:
    radial-gradient(110% 120% at 80% 12%, rgba(47,111,214,.26), transparent 55%),
    linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 68%, #03142f 100%);
  color:#fff; padding:0; overflow:hidden;
}
.fin-contour{
  position:absolute; top:50%; right:-2%; height:118%; width:auto; transform:translateY(-50%);
  opacity:.42; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 42%, #000 88%, transparent 100%);
  mask-image:linear-gradient(100deg, transparent 0%, #000 42%, #000 88%, transparent 100%);
}
.fin-inner{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:56px 76px 46px}
.fin-center{flex:1; display:flex; flex-direction:column; justify-content:center}
.fin .f-eyebrow{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; animation:rise .8s .1s both}
.fin h2{font-family:var(--serif); font-weight:700; font-size:clamp(30px,3.8vw,54px); line-height:1.14; max-width:24ch; margin-bottom:46px; animation:rise .9s .2s both}
.fin h2 em{font-style:normal; color:var(--gold)}
.fin-stats{display:flex; gap:0; width:100%; animation:rise .9s .35s both}
.fin-stat{flex:1; padding-right:32px; position:relative}
.fin-stat + .fin-stat{padding-left:32px; border-left:1px solid rgba(255,255,255,.14)}
.fin-stat .v{font-family:var(--serif); font-size:clamp(36px,4.4vw,62px); font-weight:700; color:#fff; line-height:1; font-feature-settings:"tnum"}
.fin-stat .v em{color:var(--gold); font-style:normal}
.fin-stat .l{font-size:13.5px; color:var(--ice-200); margin-top:12px; max-width:20ch; line-height:1.3}
.fin-foot{display:flex; align-items:center; gap:18px; color:var(--ice-200); font-size:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; animation:rise .9s .5s both}
.fin-gerb{height:46px; opacity:.95}
.fin-foot span:not(.chip){flex:1}
.fin-foot .chip{background:#fff; border-radius:10px; padding:7px}
.fin-foot .chip img{height:40px}

/* animations */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.reveal{opacity:0}
.reveal.in{animation:rise .7s var(--d,0s) both}

/* chart entrance */
.cbar{transform-box:fill-box; transform-origin:bottom; animation:barUp .7s var(--d,0s) both cubic-bezier(.2,.7,.3,1)}
@keyframes barUp{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.cline{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.1s .5s forwards ease-out}
@keyframes draw{to{stroke-dashoffset:0}}

/* legend for groups (content slides footer) */
.grp-legend{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:10.5px; color:var(--muted); flex:0 0 auto; margin-top:2px}
.grp-legend .gi{display:inline-flex; align-items:center; gap:5px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .slide{padding:70px 24px 48px; height:auto; min-height:100vh}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{display:none}
  .hero-main{padding:80px 30px 40px; justify-content:flex-start}
  .fin{padding:0}
  .fin-inner{padding:64px 30px 36px}
  .fin-contour{opacity:.32}
  .brk-grid,.ov-grid{grid-template-columns:1fr; overflow-y:auto}
  .ov-statband{grid-template-columns:1fr 1fr}
  .dir-list.ov-2col{grid-auto-rows:auto}
  .fin-stats{flex-wrap:wrap; gap:24px}
  .fin-stat{flex:1 1 40%}
  .fin-stat + .fin-stat{border-left:none; padding-left:0}
  .nav{display:none}
}
@media (max-width:680px){
  .topbar .tb-min{display:none}
  .hint{display:none}
  .stat-row{flex-direction:column}
  .ov-statband{grid-template-columns:1fr}
  .dir-list.ov-2col{grid-template-columns:1fr}
  .dir-callouts{flex-direction:column}
  .hero-main{padding:74px 22px 30px}
  .hero h1{font-size:24px}
  .hero-top{left:22px; right:22px; top:24px}
  .hero-gerb{height:54px}
  .hero-logos{display:none}
  .hero-badge{font-size:11.5px; padding:7px 12px; flex-wrap:wrap}
  .hero-foot{left:22px; right:22px; bottom:22px; font-size:12px; flex-direction:column; align-items:flex-start; gap:3px}
  .hero-foot .yr{font-size:20px; white-space:nowrap; order:-1}
  .fin-stat{flex:1 1 100%}
  .fin-foot{flex-wrap:wrap; font-size:12px}
  .shead h2{font-size:21px}
  .table-wrap{
    overflow:auto;
    background:
      radial-gradient(farthest-side at 100% 50%, rgba(11,40,100,.12), rgba(11,40,100,0)) right center,
      var(--paper);
    background-repeat:no-repeat; background-size:14px 100%, auto; background-attachment:scroll, local;
  }
  table.data{font-size:11.5px; min-width:680px}
  .scroll-note{display:inline-flex !important}
}
.scroll-note{display:none; align-items:center; gap:5px; color:var(--blue-500); font-weight:600}