:root{
  --ink:#071a3f;
  --muted:#58708f;
  --line:rgba(9,27,63,.14);
  --paper:#f7fbff;
  --card:rgba(255,255,255,.74);
  --teal:#0e7c86;
  --blue:#114ea8;
  --gold:#e5972a;
  --green:#2b8066;
  --shadow:0 24px 80px rgba(6, 22, 50, .12);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(17,78,168,.12), transparent 34rem),
    radial-gradient(circle at 80% 8%, rgba(14,124,134,.14), transparent 32rem),
    linear-gradient(180deg,#f8fbff 0%,#eef6f9 46%,#f7fbff 100%);
}
a{color:inherit}
.progress{
  position:fixed; top:0; left:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--teal),var(--gold));
  width:0; z-index:20;
}
.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(16px);
  background:rgba(248,251,255,.74);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:14px 24px;
}
.brand{font-weight:800; letter-spacing:-.03em}
.navlinks{display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--blue)}
.hero{
  max-width:1180px; margin:0 auto; padding:78px 24px 44px;
  display:grid; grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr); gap:42px; align-items:center;
}
.kicker{color:var(--teal); font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase}
h1{
  margin:18px 0 18px; font-size:clamp(48px,8vw,104px); line-height:.9; letter-spacing:-.075em;
}
.lede{font-size:clamp(20px,2.2vw,28px); line-height:1.35; color:#26415f; max-width:760px}
.hero-card{
  position:relative; padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.58);
  box-shadow:var(--shadow); border-radius:32px;
}
.hero-card img{display:block; width:100%; border-radius:22px; border:1px solid rgba(6,22,50,.1); background:white}
.hero-note{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;
}
.note{
  border:1px solid var(--line); border-radius:18px; padding:14px; background:white;
}
.note strong{display:block; font-size:13px; color:var(--teal); text-transform:uppercase; letter-spacing:.08em}
.note span{display:block; margin-top:6px; color:#314967; font-size:14px; line-height:1.35}
.section{max-width:1180px; margin:0 auto; padding:56px 24px}
.panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  box-shadow:var(--shadow); overflow:hidden;
}
.concept{display:grid; grid-template-columns:1.05fr .95fr; gap:0}
.concept-copy{padding:34px}
.eyebrow{color:var(--teal); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px}
h2{font-size:clamp(34px,4.8vw,64px); line-height:.96; letter-spacing:-.055em; margin:12px 0 18px}
h3{font-size:24px; margin:0 0 10px; letter-spacing:-.025em}
p{line-height:1.65; color:#304967; margin:0 0 16px}
.loop{
  padding:32px; border-left:1px solid var(--line); background:
    linear-gradient(180deg,rgba(14,124,134,.08),rgba(255,255,255,.35));
  display:flex; align-items:center; justify-content:center;
}
.loop svg{width:100%; max-width:520px}
.path-label{font-size:13px; font-weight:800; fill:#071a3f}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
.mini{
  padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.72)
}
.mini b{display:block; margin-bottom:7px}
.mini p{font-size:14px; margin:0}
.timeline-wrap{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; align-items:start;
}
.side{
  position:sticky; top:78px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.68); padding:20px;
}
.side a{
  display:block; text-decoration:none; padding:10px 12px; border-radius:14px; color:#334d6b; font-size:14px; margin:2px 0;
}
.side a:hover{background:rgba(17,78,168,.08); color:var(--blue)}
.timeline{
  position:relative; padding-left:22px;
}
.timeline:before{
  content:""; position:absolute; top:12px; bottom:12px; left:10px; width:2px;
  background:linear-gradient(var(--blue),var(--teal),var(--gold));
}
.item{
  position:relative; margin:0 0 18px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.78);
  box-shadow:0 16px 50px rgba(6,22,50,.07); overflow:hidden;
}
.item:before{
  content:""; position:absolute; left:-18px; top:26px; width:16px; height:16px; border-radius:999px;
  background:var(--teal); border:4px solid #f7fbff; box-shadow:0 0 0 1px var(--line);
}
.item-head{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:20px 22px;
  cursor:pointer;
}
.icon{
  width:54px; height:54px; border-radius:18px; display:grid; place-items:center; font-size:26px;
  background:linear-gradient(135deg,rgba(17,78,168,.11),rgba(14,124,134,.13));
  border:1px solid var(--line);
}
.meta time{display:block; color:var(--teal); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.meta h3{margin:3px 0 4px}
.tag{color:var(--muted); font-size:15px}
.chev{font-size:24px; color:var(--muted); transition:.25s}
.item.open .chev{transform:rotate(45deg); color:var(--teal)}
.item-body{display:none; padding:0 22px 24px 92px}
.item.open .item-body{display:block}
.mapping{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0;
}
.mapbox{
  padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(248,251,255,.86);
}
.mapbox strong{display:block; color:var(--teal); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px}
.mapbox span{font-size:14px; color:#334d6b; line-height:1.4}
.source-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; color:var(--blue);
  border-bottom:1px solid rgba(17,78,168,.35)
}
.matrix{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;
}
.matrix .mini{min-height:170px}
.footer{
  margin-top:36px; padding:32px 24px 56px; text-align:center; color:var(--muted);
}
.footer strong{color:var(--ink)}
button.reset{
  appearance:none; border:0; background:linear-gradient(135deg,var(--blue),var(--teal)); color:white; border-radius:999px;
  padding:12px 18px; font-weight:800; cursor:pointer; box-shadow:0 12px 30px rgba(17,78,168,.22);
}
.searchbar{
  display:flex; gap:12px; align-items:center; margin:22px 0 18px;
}
.searchbar input{
  width:100%; padding:15px 16px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.78);
  font:inherit; color:var(--ink); outline:none;
}
.searchbar input:focus{border-color:rgba(14,124,134,.5); box-shadow:0 0 0 4px rgba(14,124,134,.08)}
@media (max-width:900px){
  .hero,.concept,.timeline-wrap{grid-template-columns:1fr}
  .hero{padding-top:46px}
  .side{position:relative; top:auto}
  .timeline-wrap{gap:18px}
  .mapping,.grid3,.matrix{grid-template-columns:1fr}
  .item-body{padding-left:22px}
  .nav-inner{align-items:flex-start; flex-direction:column}
}
@media print{
  .nav,.progress,.searchbar,.side,button.reset{display:none}
  body{background:white}
  .hero,.section{max-width:none}
  .item-body{display:block}
}