/* ==========================================================================
   Risk and Policy Institute — the research division of InsureTech.
   Enterprise static site, style-compatible with insure-tech.com.
   Dark obsidian/slate base, cyan/blue accents.
   ========================================================================== */

:root{
  --slate-950:#020617; --slate-900:#0f172a; --slate-850:#111c33; --slate-800:#1e293b;
  --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
  --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9;
  --cyan-300:#67e8f9; --cyan-400:#22d3ee; --cyan-500:#06b6d4;
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-800:#1e40af; --blue-950:#172554;
  --teal-400:#2dd4bf; --emerald-400:#34d399; --amber-400:#fbbf24; --purple-400:#c084fc; --pink-400:#f472b6;
  --maxw:1180px;
  --font:"Inter","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); background:var(--slate-950); color:var(--slate-100);
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--cyan-500); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.02em; }
p{ margin:0; }
svg{ display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mono-eyebrow{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--cyan-400); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:600;
  font-size:.95rem; border-radius:12px; padding:.85em 1.5em; cursor:pointer; border:1px solid transparent;
  transition:.18s ease; white-space:nowrap; }
.btn svg{ width:18px; height:18px; }
.btn-cyan{ background:linear-gradient(90deg,var(--cyan-500),var(--blue-600)); color:var(--slate-950);
  font-weight:700; box-shadow:0 10px 24px -8px rgba(6,182,212,.5); }
.btn-cyan:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-solid-cyan{ background:var(--cyan-500); color:var(--slate-950); font-weight:600;
  box-shadow:0 6px 16px -8px rgba(6,182,212,.5); }
.btn-solid-cyan:hover{ background:var(--cyan-400); }
.btn-ghost{ background:rgba(15,23,42,.5); color:var(--slate-200); border-color:var(--slate-700); }
.btn-ghost:hover{ border-color:var(--slate-500); background:var(--slate-900); }
.btn-slate{ background:var(--slate-800); color:var(--slate-100); border-color:var(--slate-700); }
.btn-slate:hover{ background:var(--slate-700); }

/* ---------- top notification bar ---------- */
.topbar{ border-bottom:1px solid var(--slate-800); background:rgba(15,23,42,.6);
  backdrop-filter:blur(8px); text-align:center; padding:9px 16px; font-size:.75rem;
  font-weight:500; color:var(--slate-400); }
.topbar .dot{ width:8px; height:8px; border-radius:50%; background:var(--emerald-400);
  display:inline-block; margin-right:.5em; box-shadow:0 0 0 0 rgba(52,211,153,.6);
  animation:pulse 2s infinite; vertical-align:middle; }
.topbar a{ color:var(--cyan-400); font-weight:600; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{ box-shadow:0 0 0 8px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(30,41,59,.8);
  background:rgba(2,6,23,.8); backdrop-filter:blur(12px); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(45deg,var(--cyan-500),var(--blue-600)); display:grid; place-items:center;
  box-shadow:0 8px 20px -8px rgba(6,182,212,.5); }
.brand .mark svg{ width:22px; height:22px; color:#fff; }
.brand .name{ font-size:1.18rem; font-weight:800; color:#fff; line-height:1.1; display:block; }
.brand .name .r{ color:var(--cyan-400); }
.brand .tag{ font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-400); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;
  font-size:.9rem; font-weight:500; color:var(--slate-300); }
.nav-links a:hover{ color:var(--cyan-400); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px; }
@media(max-width:940px){
  .nav-links{ display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--slate-950); border-bottom:1px solid var(--slate-800); }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 24px; }
  .nav-cta .btn{ padding:.7em 1.1em; font-size:.85rem; }
  .nav-cta .btn.hide-sm{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:80px 0 112px; overflow:hidden; }
.hero .blobs{ position:absolute; inset:0; z-index:-1; display:flex; align-items:center; justify-content:center; }
.hero .blob{ position:absolute; border-radius:50%; filter:blur(90px); }
.hero .blob.a{ width:600px; height:600px; background:rgba(6,182,212,.10); transform:translateY(-96px); }
.hero .blob.b{ width:500px; height:500px; background:rgba(37,99,235,.10); transform:translateX(190px); }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--slate-800); background:var(--slate-900); font-size:.75rem; color:var(--slate-300);
  font-weight:500; margin-bottom:24px; }
.badge svg{ width:14px; height:14px; color:var(--cyan-400); }
.hero h1{ font-size:clamp(2.3rem,5.2vw,3.75rem); font-weight:800; color:#fff; line-height:1.08;
  max-width:56rem; margin-bottom:24px; }
.grad-text{ background:linear-gradient(90deg,var(--cyan-400),var(--blue-400)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.hero .lede{ font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--slate-300); max-width:46rem; margin-bottom:32px; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:16px; }
.hero-metrics{ margin-top:64px; padding-top:40px; border-top:1px solid rgba(30,41,59,.8);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:720px){ .hero-metrics{ grid-template-columns:repeat(2,1fr); } }
.metric .n{ font-size:clamp(1.5rem,3vw,1.9rem); font-weight:800; color:#fff; letter-spacing:-.02em; }
.metric .n.cyan{ color:var(--cyan-400); } .metric .n.blue{ color:var(--blue-400); }
.metric .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-400); margin-top:4px; }

/* ---------- section scaffolding ---------- */
.section{ padding:96px 0; }
.section.tint{ background:rgba(15,23,42,.4); border-top:1px solid var(--slate-800); border-bottom:1px solid var(--slate-800); }
.sec-head{ max-width:44rem; margin-bottom:64px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h3{ font-size:clamp(1.7rem,3.4vw,2rem); font-weight:700; color:#fff; }
.sec-head p{ color:var(--slate-400); margin-top:12px; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .cards,.cards.two{ grid-template-columns:1fr; } }
.card{ background:rgba(15,23,42,.8); border:1px solid var(--slate-800); border-radius:16px; padding:32px;
  transition:.2s ease; }
.card:hover{ border-color:var(--slate-700); transform:translateY(-3px); }
.card .ico{ width:48px; height:48px; border-radius:10px; display:grid; place-items:center; margin-bottom:24px; transition:.2s; }
.card .ico svg{ width:24px; height:24px; }
.ico.blue{ background:rgba(59,130,246,.10); color:var(--blue-400); }
.ico.amber{ background:rgba(245,158,11,.10); color:var(--amber-400); }
.ico.cyan{ background:rgba(6,182,212,.10); color:var(--cyan-400); }
.ico.teal{ background:rgba(45,212,191,.10); color:var(--teal-400); }
.ico.emerald{ background:rgba(52,211,153,.10); color:var(--emerald-400); }
.ico.purple{ background:rgba(192,132,252,.10); color:var(--purple-400); }
.ico.pink{ background:rgba(244,114,182,.10); color:var(--pink-400); }
.card h4{ font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:12px; }
.card .desc{ font-size:.9rem; color:var(--slate-400); margin-bottom:16px; }
.card ul{ list-style:none; margin:0; padding:0; font-size:.8rem; color:var(--slate-300); }
.card li{ display:flex; align-items:flex-start; gap:8px; margin:8px 0; }
.card li svg{ width:16px; height:16px; color:var(--emerald-400); flex:none; margin-top:3px; }

/* ---------- disaster continuum strip ---------- */
.continuum{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:8px; }
@media(max-width:820px){ .continuum{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:460px){ .continuum{ grid-template-columns:repeat(2,1fr); } }
.phase{ position:relative; background:rgba(15,23,42,.7); border:1px solid var(--slate-800);
  border-radius:14px; padding:20px 16px; text-align:center; transition:.2s; }
.phase:hover{ border-color:var(--cyan-500); transform:translateY(-3px); }
.phase .num{ font-size:.72rem; font-weight:700; color:var(--cyan-400); letter-spacing:.1em; }
.phase .name{ font-size:.95rem; font-weight:700; color:#fff; margin-top:8px; }
.phase .sub{ font-size:.72rem; color:var(--slate-400); margin-top:6px; line-height:1.4; }

/* ---------- projects ---------- */
.proj{ display:flex; flex-direction:column; }
.proj .tagline{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--cyan-400); margin-bottom:12px; }
.proj h4{ font-size:1.12rem; }
.proj a.more{ margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:6px;
  color:var(--cyan-400); font-weight:600; font-size:.82rem; }
.proj a.more svg{ width:15px; height:15px; transition:transform .15s; }
.proj a.more:hover svg{ transform:translateX(4px); }

/* ---------- segment toggle ---------- */
.seg-tabs{ display:flex; justify-content:center; margin-bottom:32px; }
.seg-tabs .group{ display:inline-flex; gap:4px; background:var(--slate-900); padding:6px;
  border-radius:12px; border:1px solid var(--slate-800); flex-wrap:wrap; }
.seg-tabs button{ padding:10px 20px; border-radius:8px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.88rem; font-weight:600; color:var(--slate-400); transition:.15s; }
.seg-tabs button:hover{ color:#fff; }
.seg-tabs button.active{ background:var(--cyan-500); color:var(--slate-950); box-shadow:0 4px 10px -4px rgba(6,182,212,.5); }
.seg-panel{ background:linear-gradient(180deg,var(--slate-900),var(--slate-950));
  border:1px solid var(--slate-800); border-radius:24px; padding:48px; }
@media(max-width:620px){ .seg-panel{ padding:28px; } }
.seg-panel h4{ font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:16px; }
.seg-panel .desc{ color:var(--slate-300); max-width:48rem; margin-bottom:32px; }
.seg-bullets{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
@media(max-width:620px){ .seg-bullets{ grid-template-columns:1fr; } }
.seg-bullets div{ display:flex; align-items:flex-start; gap:12px; font-size:.88rem; color:var(--slate-300); font-weight:500; }
.seg-bullets svg{ width:20px; height:20px; color:var(--cyan-400); flex:none; margin-top:1px; }
.seg-link{ display:inline-flex; align-items:center; gap:8px; color:var(--cyan-400); font-weight:600; font-size:.95rem; text-decoration:none; }
.seg-link:hover{ color:var(--cyan-300); }
.seg-link svg{ width:18px; height:18px; transition:transform .15s; }
.seg-link:hover svg{ transform:translateX(4px); }

/* ---------- quotes ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:820px){ .quotes{ grid-template-columns:1fr; } }
.quote{ background:linear-gradient(180deg,rgba(15,23,42,.9),var(--slate-950));
  border:1px solid var(--slate-800); border-radius:20px; padding:32px; position:relative; }
.quote .qmark{ font-size:3rem; line-height:1; color:var(--cyan-500); opacity:.5; font-family:Georgia,serif; }
.quote p{ color:var(--slate-200); font-size:1rem; font-style:italic; margin:8px 0 16px; }
.quote .who{ font-size:.82rem; font-weight:600; color:var(--cyan-400); }

/* ---------- institute / people callout ---------- */
.institute{ background:linear-gradient(90deg,rgba(23,37,84,.6),var(--slate-900));
  border:1px solid rgba(30,64,175,.4); border-radius:24px; padding:48px;
  display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:40px; }
@media(max-width:820px){ .institute{ padding:32px; grid-template-columns:1fr; } }
.institute .pill{ display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(59,130,246,.10);
  color:var(--blue-400); border:1px solid rgba(59,130,246,.2); font-size:.72rem; font-weight:600; margin-bottom:16px; }
.institute h3{ font-size:clamp(1.5rem,3vw,1.9rem); font-weight:700; color:#fff; margin-bottom:12px; }
.institute p{ color:var(--slate-300); font-size:.95rem; margin-bottom:16px; }
.person-card{ background:rgba(2,6,23,.6); border:1px solid var(--slate-800); border-radius:18px; padding:28px; }
.person-card .avatar{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(45deg,var(--cyan-500),var(--blue-600)); color:#fff; font-weight:800; font-size:1.4rem;
  margin-bottom:16px; }
.person-card h4{ font-size:1.15rem; font-weight:700; color:#fff; }
.person-card .role{ font-size:.8rem; color:var(--cyan-400); font-weight:600; margin:4px 0 12px; text-transform:uppercase; letter-spacing:.06em; }
.person-card p{ font-size:.85rem; color:var(--slate-400); margin-bottom:12px; }
.person-card a{ font-size:.85rem; color:var(--cyan-400); font-weight:600; }

/* ---------- resource directory ---------- */
.res-groups{ display:grid; grid-template-columns:1fr; gap:32px; }
.res-block{ background:rgba(15,23,42,.6); border:1px solid var(--slate-800); border-radius:20px; padding:32px; }
.res-block-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.res-block-head .ico{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; flex:none; }
.res-block-head .ico svg{ width:22px; height:22px; }
.res-block-head h3{ font-size:1.35rem; color:#fff; font-weight:700; }
.res-block .lead{ color:var(--slate-400); font-size:.88rem; margin-bottom:24px; }
.res-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(max-width:760px){ .res-list{ grid-template-columns:1fr; } }
.res-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--slate-800); background:rgba(2,6,23,.5); color:var(--slate-200);
  font-size:.88rem; font-weight:500; transition:.15s; }
.res-item:hover{ border-color:var(--cyan-500); background:var(--slate-900); color:#fff; transform:translateY(-2px); }
.res-item svg{ width:15px; height:15px; color:var(--slate-500); flex:none; margin-left:auto; }
.res-item:hover svg{ color:var(--cyan-400); }

/* resource cards (title + description + external link) */
.res-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:760px){ .res-cards{ grid-template-columns:1fr; } }
.res-card{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--slate-800); background:rgba(2,6,23,.5); transition:.15s; }
.res-card:hover{ border-color:var(--cyan-500); background:var(--slate-900); transform:translateY(-2px); }
.res-card .rt{ display:flex; align-items:center; gap:8px; font-weight:600; color:#fff; font-size:.95rem; }
.res-card .rt svg{ width:14px; height:14px; color:var(--slate-500); flex:none; margin-left:auto; }
.res-card:hover .rt svg{ color:var(--cyan-400); }
.res-card .rd{ font-size:.8rem; color:var(--slate-400); line-height:1.5; }
.readings-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; }
@media(max-width:760px){ .readings-list{ grid-template-columns:1fr; } }
.readings-list a{ display:flex; gap:8px; padding:8px 0; font-size:.86rem; color:var(--slate-200);
  border-bottom:1px solid rgba(30,41,59,.6); }
.readings-list a:hover{ color:var(--cyan-400); }
.readings-list a svg{ width:14px; height:14px; color:var(--slate-500); flex:none; margin-left:auto; margin-top:3px; }

/* project detail article */
.proj-article{ max-width:52rem; margin:0 auto 64px; scroll-margin-top:90px; }
.proj-article .eyebrow{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan-400); }
.proj-article h2{ font-size:clamp(1.5rem,3vw,2rem); color:#fff; font-weight:700; margin:8px 0 20px; }
.proj-article p{ color:var(--slate-300); margin-bottom:16px; font-size:1rem; }
.proj-article ol,.proj-article ul{ color:var(--slate-300); margin:0 0 16px; padding-left:22px; }
.proj-article li{ margin-bottom:10px; }
.proj-article .links{ margin-top:24px; padding-top:20px; border-top:1px solid var(--slate-800);
  display:flex; flex-wrap:wrap; gap:10px; }
.proj-article .links a{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600;
  color:var(--cyan-400); border:1px solid var(--slate-800); border-radius:999px; padding:6px 14px; background:rgba(2,6,23,.5); }
.proj-article .links a:hover{ border-color:var(--cyan-500); }
.proj-article .links a svg{ width:13px; height:13px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:5fr 7fr; gap:48px; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:32px; } }
.contact-info h3{ font-size:clamp(1.7rem,3.4vw,2rem); font-weight:700; color:#fff; margin-bottom:16px; }
.contact-info>p{ color:var(--slate-400); font-size:.9rem; margin-bottom:32px; }
.info-item{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:.9rem; color:var(--slate-300); }
.info-item .ii{ width:36px; height:36px; border-radius:10px; background:var(--slate-900); border:1px solid var(--slate-800);
  display:grid; place-items:center; color:var(--cyan-400); flex:none; }
.info-item .ii svg{ width:16px; height:16px; }
.info-item b{ color:#fff; display:block; font-weight:600; }
.form-card{ background:rgba(15,23,42,.6); border:1px solid var(--slate-800); border-radius:24px; padding:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--slate-400); margin-bottom:8px; }
.field input,.field select,.field textarea{ width:100%; background:var(--slate-950); border:1px solid var(--slate-800);
  border-radius:12px; padding:12px 16px; font:inherit; font-size:.9rem; color:#fff; transition:border-color .15s; }
.field select{ color:var(--slate-300); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--slate-500); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--cyan-400); }
.field.full{ margin-bottom:20px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-submit{ width:100%; }
.form-note{ font-size:.78rem; margin-top:14px; text-align:center; }
.form-note.ok{ color:var(--emerald-400); } .form-note.err{ color:#f87171; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--slate-900); background:var(--slate-950); padding:56px 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media(max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:28px; } }
.footer-top h5{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--slate-400); margin:0 0 16px; font-weight:700; }
.footer-top a{ display:block; font-size:.86rem; color:var(--slate-400); margin-bottom:10px; }
.footer-top a:hover{ color:var(--cyan-400); }
.footer-top .about p{ font-size:.86rem; color:var(--slate-400); max-width:26rem; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-size:.78rem; color:var(--slate-500); padding-top:24px; border-top:1px solid var(--slate-900); }
.footer-inner .white{ color:#fff; font-weight:600; }
.footer-links{ display:flex; align-items:center; gap:20px; }
.footer-links a:hover{ color:var(--slate-300); }
.footer-links span{ color:var(--slate-700); }

/* ---------- utils ---------- */
.hidden{ display:none !important; }
.skip-link{ position:absolute; left:-999px; }
.skip-link:focus{ left:12px; top:8px; background:var(--slate-800); color:#fff; padding:.5em 1em; border-radius:8px; z-index:100; }
.page-hero{ padding:64px 0 32px; }
.page-hero h1{ font-size:clamp(2rem,4.5vw,3rem); color:#fff; font-weight:800; margin-bottom:16px; }
.page-hero p{ color:var(--slate-400); max-width:46rem; font-size:1.05rem; }

/* framework diagram (native on-brand SVG) */
.diagram-head{ max-width:46rem; margin:0 auto 36px; text-align:center; }
.diagram-head h3{ font-size:clamp(1.6rem,3.2vw,2rem); color:#fff; font-weight:700; margin:8px 0 14px; }
.diagram-head p{ color:var(--slate-300); margin:0 auto 14px; max-width:44rem; }
.diagram-head .steps{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.diagram-head .steps span{ font-size:.78rem; font-weight:600; color:var(--cyan-300); border:1px solid var(--slate-800);
  background:rgba(2,6,23,.5); border-radius:999px; padding:5px 14px; }
.diagram-card{ background:linear-gradient(180deg,rgba(15,23,42,.6),rgba(2,6,23,.4)); border:1px solid var(--slate-800);
  border-radius:20px; padding:20px; overflow-x:auto; }
.diagram-card svg{ width:100%; height:auto; min-width:720px; display:block; }
@media(max-width:780px){ .diagram-card{ overflow-x:hidden; } .diagram-card svg{ min-width:0; } }

/* interactive scenario explorer */
.explorer{ margin-top:28px; }
.explorer-head{ text-align:center; margin-bottom:20px; }
.explorer-sub{ color:var(--slate-400); font-size:.92rem; max-width:44rem; margin:8px auto 0; }
.explorer-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.explorer-tabs button{ padding:9px 18px; border-radius:999px; border:1px solid var(--slate-800);
  background:var(--slate-900); color:var(--slate-300); font:inherit; font-size:.86rem; font-weight:600;
  cursor:pointer; transition:.15s; }
.explorer-tabs button:hover{ color:#fff; border-color:var(--slate-600); }
.explorer-tabs button.active{ background:linear-gradient(90deg,var(--cyan-500),var(--blue-600)); color:var(--slate-950);
  border-color:transparent; box-shadow:0 6px 16px -8px rgba(6,182,212,.6); }
.explorer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .explorer-grid{ grid-template-columns:1fr; } }
.ecol{ background:rgba(15,23,42,.6); border:1px solid var(--slate-800); border-radius:16px; padding:22px 22px 24px; }
.ecol h5{ display:flex; align-items:center; gap:9px; margin:0 0 14px; font-size:1rem; color:#fff; font-weight:700; }
.ecol h5 em{ font-style:normal; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--slate-500); margin-left:auto; }
.ecol h5 .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.ecol.metrics{ border-top:2px solid var(--cyan-400); } .ecol.metrics .dot{ background:var(--cyan-400); }
.ecol.levers{ border-top:2px solid var(--blue-400); } .ecol.levers .dot{ background:var(--blue-400); }
.ecol.objectives{ border-top:2px solid var(--teal-400); } .ecol.objectives .dot{ background:var(--teal-400); }
.ecol ul{ list-style:none; margin:0; padding:0; }
.ecol li{ display:flex; gap:9px; align-items:flex-start; font-size:.87rem; color:var(--slate-300);
  padding:7px 0; border-bottom:1px solid rgba(30,41,59,.5); }
.ecol li:last-child{ border-bottom:0; }
.ecol li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--slate-600); flex:none; margin-top:7px; }
.ecol.metrics li::before{ background:var(--cyan-400); }
.ecol.levers li::before{ background:var(--blue-400); }
.ecol.objectives li::before{ background:var(--teal-400); }
@keyframes ecolfade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.ecol li{ animation:ecolfade .25s ease both; }