/* ===== Общие для routes ===== */
.s-routenet, .s-deltaring, .s-kanaal{ padding: clamp(42px,6vw,72px) 0 }
figure img{ display:block; width:100%; height:auto; max-width:350px; } /* не шире 350px */

/* ===== S1 Routenet ===== */
.rn-inner{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px,3vw,32px); align-items:start;
}
.rn-copy h1{ font-family:"Merriweather", serif; margin:0 0 8px 0; line-height:1.2 }
.rn-copy p{ color: var(--muted); margin:0 0 10px 0 }
.rn-tags{ margin:10px 0 0 0; padding-left:1.1rem; color: var(--muted) }
.rn-tags li{ margin:4px 0 }
.rn-tags .on{ color:#fff }

.rn-grid{
  position:relative;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; align-items:start;
}
.rn-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px;
  padding:12px; box-shadow: var(--shadow); transition: transform .25s ease, filter .25s ease;
}
.rn-card:hover{ transform: translateY(-4px); filter: saturate(1.06) }
.rn-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.rn-card p{ margin:.45rem 0 0 0; color: var(--muted) }

.rn-bg{
  position:absolute; inset:-2%; border-radius:20px; z-index:-1;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(87,193,201,.06), transparent 60%),
    radial-gradient(900px 420px at 80% 80%, rgba(228,179,99,.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px);
}

@media (max-width: 980px){
  .rn-inner{ grid-template-columns: 1fr }
  .rn-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px){
  .rn-grid{ grid-template-columns: 1fr }
}

/* ===== S2 Delta-Ring ===== */
.dr-inner{
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(16px,3vw,32px); align-items:start;
}
.dr-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.dr-copy p{ color: var(--muted); margin:0 0 10px 0 }

.ring{
  --active: 1;
  position:relative; width: 180px; height:180px; border-radius:50%;
  margin-top: 6px;
  background:
    conic-gradient(from -90deg,
      rgba(87,193,201,.35) 0deg   60deg,
      rgba(228,179,99,.35) 60deg 120deg,
      rgba(255,255,255,.15) 120deg 180deg,
      rgba(87,193,201,.25) 180deg 240deg,
      rgba(228,179,99,.25) 240deg 300deg,
      rgba(255,255,255,.10) 300deg 360deg);
  border:1px solid var(--line); box-shadow: var(--shadow);
}
.ring .seg{
  position:absolute; inset:6px; border-radius:50%; border:3px solid transparent;
}
.ring .seg.on{ border-color: rgba(255,255,255,.6) }
.ring .s1{ clip-path: polygon(50% 50%, 50% 0, 83% 12%); }
.ring .s2{ clip-path: polygon(50% 50%, 83% 12%, 97% 50%); }
.ring .s3{ clip-path: polygon(50% 50%, 97% 50%, 83% 88%); }
.ring .s4{ clip-path: polygon(50% 50%, 83% 88%, 50% 100%); }
.ring .s5{ clip-path: polygon(50% 50%, 50% 100%, 17% 88%); }
.ring .s6{ clip-path: polygon(50% 50%, 17% 88%, 3% 50%); }

.ring .ring-label{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  font-size:14px; background: rgba(0,0,0,.4); border:1px solid var(--line);
  padding:4px 8px; border-radius:10px; color:#dfe8ef;
}

.dr-beeld{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.dr-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.dr-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){ .dr-inner{ grid-template-columns: 1fr } }
@media (max-width: 640px){ .dr-beeld{ grid-template-columns: 1fr } }

/* ===== S3 Kanaallint ===== */
.kn-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.kn-head p{ color: var(--muted); margin:0 0 12px 0 }

.kn-controls{
  display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px;
}
.kn-btn{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 10px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.kn-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07) }

.kn-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: min(92%, 680px);
  gap: 14px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  border-radius: 16px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
}
.kn-track:focus{ outline:2px solid rgba(87,193,201,.6) }
.kn-pane{
  scroll-snap-align: start;
  display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:start;
  padding:14px; background: rgba(0,0,0,.18); border-radius: 14px; margin:8px;
}
.kn-pane figure{ margin:0 }
.kn-pane figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.kn-pane p{ margin:.35rem 0 0 0; color: var(--muted) }

.kn-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin-top:10px }
.kn-progress i{ display:block; height:100%; width:12%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:inherit }

@media (max-width: 720px){
  .kn-pane{ grid-template-columns: 1fr }
}
/* ===== S4 Meandermeter ===== */
.s-meander{ padding: clamp(42px,6vw,72px) 0 }
.meander-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.mm-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.mm-copy p{ color: var(--muted); margin:0 0 10px 0 }
.mm-progress{ height:6px; background: rgba(255,255,255,.06); border-radius:6px; overflow:hidden }
.mm-progress i{ display:block; height:100%; width:12%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

.mm-lijst{ display:grid; gap:12px }
.mm-step{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.mm-step figure{ margin:0 }
.mm-step figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.mm-step p{ margin:.4rem 0 0 0; color: var(--muted) }

@media (max-width: 980px){ .meander-inner{ grid-template-columns: 1fr } }

/* ===== S5 Stadswip ===== */
.s-wip{ padding: clamp(42px,6vw,72px) 0 }
.wip-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.wip-diagram{
  position:relative; border:1px solid var(--line); border-radius:16px; padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
  min-height: 200px; box-shadow: var(--shadow);
}
.wip-diagram .as{
  position:absolute; left:22%; top:50%; width:6px; height:58%; background:#cbd6df;
  transform: translateY(-50%); border-radius:3px;
}
.wip-diagram .blad{
  position:absolute; left:22%; top:42%; width:40%; height:6px; background:#dfe8ef; border-radius:3px;
  transform-origin: left center; transition: transform .35s ease;
}
.wip-diagram .gewicht{
  position:absolute; left:54%; top:34%; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18); transform-origin:center;
  transition: transform .35s ease;
}
.s-wip.is-open .wip-diagram .blad{ transform: rotate(-62deg) }      /* подняли */
.s-wip.is-open .wip-diagram .gewicht{ transform: translate(38px, -28px) } /* имитация баланса */

.wip-toggle{
  position:absolute; right:12px; bottom:12px;
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.wip-toggle:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.wip-note{ margin: 8px 0 0 0 }

.wip-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.wip-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.wip-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){ .wip-inner{ grid-template-columns: 1fr } }
@media (max-width: 640px){ .wip-beeld{ grid-template-columns: 1fr } }

/* ===== S6 Duinpad ===== */
.s-duin{ padding: clamp(42px,6vw,72px) 0 }
.duin-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.duin-head p{ color: var(--muted); margin:0 0 12px 0 }

.duin-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }
.dp-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.dp-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background:
    radial-gradient(120px 40px at 20% 30%, #fff, transparent 70%),
    radial-gradient(120px 40px at 60% 70%, #fff, transparent 70%);
  filter: blur(10px);
}
.dp-card figure{ margin:0 }
.dp-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.dp-card p{ margin:.4rem 0 0 0; color: var(--muted) }

.dp-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin-top:10px; overflow:hidden }
.dp-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 1100px){ .duin-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){  .duin-grid{ grid-template-columns: 1fr } }
/* ===== S7 Veerkade ===== */
.s-veerkade{ padding: clamp(42px,6vw,72px) 0 }
.veer-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.vk-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.vk-copy p{ color: var(--muted); margin:0 }

.vk-lijn{
  position:relative; list-style:none; padding:0; margin:0; display:grid; gap:14px;
}
.vk-lijn::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);
}
.vk-item{
  display:grid; grid-template-columns: 64px 1fr; gap:12px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%);
  border:1px solid var(--line); border-radius:14px; padding:10px;
}
.vk-bubble{
  width:48px; height:48px; border-radius:50%; overflow:hidden; margin:0; box-shadow: var(--shadow);
}
.vk-strook h3{ margin:.1rem 0 .25rem 0; font-size: clamp(16px,1.8vw,18px) }
.vk-strook p{ margin:0; color: var(--muted) }
.vk-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin:6px 6px 0 6px; overflow:hidden }
.vk-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 980px){ .veer-inner{ grid-template-columns: 1fr } }

/* ===== S8 Bruggenmatrix ===== */
.s-matrix{ padding: clamp(42px,6vw,72px) 0 }
.bm-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.bm-head p{ color: var(--muted); margin:0 0 12px 0 }

.bm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px }
.bm-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  transition: transform .25s ease, filter .25s ease;
}
.bm-card:hover{ transform: translateY(-3px); filter:saturate(1.05) }
.bm-card figure{ margin:0 }
.bm-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.bm-card p{ margin:.4rem 0 0 0; color: var(--muted) }

.bm-meters{ list-style:none; padding:0; margin:8px 0; display:grid; gap:6px }
.bm-meters li{ display:grid; grid-template-columns: 110px 1fr; gap:8px; align-items:center }
.bm-meters span{ font-size:14px }
.bm-meters i{
  display:block; height:8px; border-radius:6px; background: rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.bm-meters i::after{
  content:""; position:absolute; inset:0; width:var(--w,60%); background: linear-gradient(90deg,var(--brand),var(--brand-2));
}
.bw-30{ --w:30% } .bw-60{ --w:60% } .bw-65{ --w:65% } .bw-75{ --w:75% } .bw-80{ --w:80% } .bw-90{ --w:90% }

@media (max-width: 640px){ .bm-grid{ grid-template-columns: 1fr } }

/* ===== S9 Stadsrand ===== */
.s-rand{ padding: clamp(42px,6vw,72px) 0 }
.rand-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.rand-head p{ color: var(--muted); margin:0 0 12px 0 }

.rand-route{
  position:relative; padding-left: 28px; border:1px solid var(--line);
  border-radius:16px; background: var(--card); padding-top: 12px; padding-bottom: 12px;
}
.rand-route::before{
  content:""; position:absolute; left:14px; top:12px; bottom:12px; width:3px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
  border-radius:3px;
}
.rd-step{ position:relative; margin: 0 10px 14px 0 }
.rd-dot{
  position:absolute; left:-19px; top:10px; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.rd-card{
  background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px;
  transition: transform .2s ease, background .2s ease;
}
.rd-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05) }
.rd-card figure{ margin:0 }
.rd-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.rd-card p{ margin:.35rem 0 0 0; color: var(--muted) }

.rand-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin: 6px 10px 4px 0; overflow:hidden }
.rand-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 640px){
  .rand-route{ padding-left: 22px }
  .rand-route::before{ left:10px }
  .rd-dot{ left:-22px }
}
/* ===== S10 Grachtenritme ===== */
.s-gracht{ padding: clamp(42px,6vw,72px) 0 }
.gracht-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.gr-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.gr-copy p{ color: var(--muted); margin:0 0 8px 0 }
.gr-progress{ height:6px; background: rgba(255,255,255,.06); border-radius:6px; overflow:hidden }
.gr-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

.gr-lijn{ position:relative; list-style:none; padding:0; margin:0; display:grid; gap:14px }
.gr-lijn::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);
}
.gr-item{
  display:grid; grid-template-columns: 64px 1fr; gap:12px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%);
  border:1px solid var(--line); border-radius:14px; padding:10px;
}
.gr-bubble{
  width:48px; height:48px; border-radius:50%; overflow:hidden; margin:0; box-shadow: var(--shadow);
}
.gr-strook h3{ margin:.1rem 0 .25rem 0; font-size: clamp(16px,1.8vw,18px) }
.gr-strook p{ margin:0; color: var(--muted) }

@media (max-width: 980px){ .gracht-inner{ grid-template-columns: 1fr } }

/* ===== S11 Kadewerk ===== */
.s-kade{ padding: clamp(42px,6vw,72px) 0 }
.kade-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.kade-head p{ color: var(--muted); margin:0 0 8px 0 }
.kade-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.k-chip{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.k-chip:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.k-chip.is-active{ background: rgba(255,255,255,.12) }
.kade-note{ margin:0 }

.kade-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.kade-grid figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.kade-grid figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 640px){ .kade-grid{ grid-template-columns: 1fr } }

/* ===== S12 Hoogtelijn ===== */
.s-hoogte{ padding: clamp(42px,6vw,72px) 0 }
.hoogte-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.hl-meter h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.hl-meter .meter{
  position:sticky; top:84px; height: 180px; border:1px solid var(--line); border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%); padding: 10px;
  display:grid; align-content:space-between;
}
.meter .mark{
  height: 8px; border-radius:6px; background: rgba(255,255,255,.1); position:relative; overflow:hidden;
}
.meter .mark.on::after{
  content:""; position:absolute; inset:0; width:100%;
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
}
.hl-note{ margin:8px 0 0 0 }

.hl-lijst{ display:grid; gap:12px }
.hl-item{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.hl-item figure{ margin:0 }
.hl-item figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.hl-item p{ margin:.4rem 0 0 0; color: var(--muted) }

@media (max-width: 980px){ .hoogte-inner{ grid-template-columns: 1fr } }
/* ===== S13 Drempelmeter ===== */
.s-drempel{ padding: clamp(42px,6vw,72px) 0 }
.drempel-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.dr-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.dr-copy p{ color: var(--muted); margin:0 0 8px 0 }

.dm-gauge{
  --p: 0; /* процент заполнения дуги */
  width: 160px; height: 100px; position:relative; margin: 4px 0 6px 0;
}
.dm-arc{
  width:100%; height:100%; border-radius: 160px 160px 0 0 / 100px 100px 0 0;
  background:
    radial-gradient(120px 60px at 50% 100%, rgba(0,0,0,.35), transparent 70%),
    conic-gradient(from 180deg, transparent calc(var(--p)*1deg), rgba(255,255,255,.12) 0);
  -webkit-mask:
    radial-gradient(120px 60px at 50% 100%, transparent 58%, #000 60%),
    linear-gradient(#000,#000);
  mask-composite: exclude;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background-blend-mode: screen;
}
.dm-arc i{
  position:absolute; left:50%; bottom:0; width:6px; height:52%;
  background: linear-gradient(180deg,var(--brand),var(--brand-2));
  transform-origin: bottom center;
  transform: rotate(calc(var(--p)/100 * 180deg)) translate(-50%,0);
  border-radius:4px;
}
.dm-label{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-10%);
  font-size:14px; background: rgba(0,0,0,.4); border:1px solid var(--line);
  padding:3px 8px; border-radius:10px; color:#dfe8ef;
}

.dr-beeld{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.dr-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){ .drempel-inner{ grid-template-columns: 1fr } }

/* ===== S14 Schaduwkaart ===== */
.s-schaduw{ padding: clamp(42px,6vw,72px) 0 }
.sch-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.sch-head p{ color: var(--muted); margin:0 0 12px 0 }

.shade-stage{
  position:relative; border:1px solid var(--line); border-radius:16px; padding:10px; background: var(--card);
}
.shade-card{ margin:0 }
.shade-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.sunray{
  --deg: 20deg;
  position:absolute; left:50%; top:12px; width:2px; height: calc(100% - 44px);
  background: linear-gradient(180deg, rgba(228,179,99,.85), rgba(87,193,201,.0));
  transform: rotate(var(--deg)) translateX(-50%);
  transform-origin: top center; pointer-events:none;
  filter: blur(.3px);
}
.shade-note{ margin:6px 0 0 0 }

/* ===== S15 Eindlus ===== */
.s-eindlus{ padding: clamp(42px,6vw,72px) 0 }
.eind-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.eind-head p{ color: var(--muted); margin:0 0 12px 0 }

.eind-card{ margin:0; background: var(--card); border-radius:16px; padding:10px; box-shadow: var(--shadow) }
.eind-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

.el-progress{ height:6px; background: rgba(255,255,255,.06); border-radius:6px; margin-top:10px; overflow:hidden }
.el-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }