/* =====================================================================
   REAL FACILITY · ESG — SECTIONS
   ===================================================================== */

/* ---------------- HERO ---------------- */
#hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:140px; padding-bottom:80px; position:relative; overflow:hidden; }
#hero .h-inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
#hero .h-mark{ width:70px; height:70px; margin-bottom:30px; }
#hero .h-mark circle{ stroke:#fff; } #hero .h-mark path{ fill:var(--eco); }
.hero-tag{ font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim);
  display:flex; gap:16px; align-items:center; margin-bottom:30px; flex-wrap:wrap; }
.hero-tag b{ color:var(--eco); font-weight:600; }
#hero h1{ font-size:clamp(2.6rem, 8.2vw, 7.2rem); letter-spacing:-.035em; }
#hero h1 .grad{ background:linear-gradient(110deg, var(--eco), var(--social) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:clamp(1.1rem,1.9vw,1.5rem); color:var(--text-dim); max-width:54ch; margin-top:30px; }
.hero-sub .serif{ color:var(--text); font-style:italic; }
.hero-stats{ display:flex; gap:clamp(24px,5vw,72px); margin-top:60px; flex-wrap:wrap; }
.hero-stats .hs .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:-.03em; line-height:1; }
.hero-stats .hs:nth-child(1) .n{ color:var(--eco); }
.hero-stats .hs:nth-child(2) .n{ color:var(--social); }
.hero-stats .hs:nth-child(3) .n{ color:#fff; }
.hero-stats .hs .l{ font-size:14px; color:var(--text-dim); margin-top:10px; max-width:22ch; }
.scroll-hint{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--text-faint);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; }
.scroll-hint .mouse{ width:23px; height:38px; border:1.5px solid var(--border-2); border-radius:14px; position:relative; }
.scroll-hint .mouse::after{ content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:3px;
  background:var(--eco); transform:translateX(-50%); animation:wheel 1.6s infinite; }
@keyframes wheel{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,12px);} }

/* ---------------- EXECUTIVE SUMMARY ---------------- */
.exec-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:56px; }
.exec-card{ grid-column:span 4; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; }
.exec-card.wide{ grid-column:span 8; }
.exec-card.tall{ grid-column:span 4; }
.exec-card .ec-top{ display:flex; align-items:center; justify-content:space-between; }
.exec-card .ec-icn{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 14%, transparent); border:1px solid color-mix(in srgb,var(--accent) 30%, transparent); }
.exec-card .ec-icn svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.exec-card .ec-m{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,3.4vw,3rem); line-height:1; letter-spacing:-.03em; margin:18px 0 6px; }
.exec-card .ec-l{ color:var(--text-dim); font-size:15px; }
.exec-card .ec-q{ font-family:var(--font-serif); font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.32; font-style:italic; }
.exec-card .ec-cite{ color:var(--text-faint); font-size:14px; margin-top:18px; }
@media(max-width:860px){ .exec-card,.exec-card.wide,.exec-card.tall{ grid-column:span 12; } }

/* ---------------- SERVICES (horizontal pin) ---------------- */
#services{ padding-bottom:0; }
.h-track-outer{ position:relative; }
.h-track{ display:flex; gap:26px; padding:60px var(--pad); will-change:transform; }
.svc-card{ flex:0 0 min(360px,78vw); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:34px; min-height:340px; display:flex; flex-direction:column;
  transition:border-color .4s, background .4s; }
.svc-card:hover{ border-color:color-mix(in srgb,var(--eco) 45%, transparent); background:color-mix(in srgb,var(--eco) 6%, var(--surface)); }
.svc-card .sn{ font-family:var(--font-display); font-size:14px; color:var(--text-faint); letter-spacing:.1em; }
.svc-card h3{ font-size:1.5rem; margin:16px 0 14px; }
.svc-card p{ color:var(--text-dim); font-size:15.5px; }
.svc-card .sicn{ margin-top:auto; width:30px; height:30px; stroke:var(--eco); fill:none; stroke-width:1.6; }
.h-progress{ position:absolute; bottom:30px; left:var(--pad); right:var(--pad); height:2px; background:var(--border); }
.h-progress i{ display:block; height:100%; width:10%; background:var(--eco); }

/* ---------------- INTERVIEW ---------------- */
#interview{ background:linear-gradient(180deg, transparent, rgba(44,73,255,.05), transparent); }
.iv-head{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
@media(max-width:880px){ .iv-head{ grid-template-columns:1fr; gap:28px; } }
.iv-pull{ font-family:var(--font-serif); font-style:italic; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.18; }
.iv-pull .grad{ background:linear-gradient(110deg,var(--eco),var(--social)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.iv-meta .who{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; }
.iv-meta .role{ color:var(--accent); font-size:15px; letter-spacing:.04em; margin-top:4px; }
.iv-meta .lead{ color:var(--text-dim); margin-top:22px; font-size:17px; }
.iv-list{ margin-top:54px; border-top:1px solid var(--border); }
.iv-item{ border-bottom:1px solid var(--border); }
.iv-q{ all:unset; cursor:pointer; display:flex; gap:22px; align-items:flex-start; width:100%;
  padding:26px 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.35; transition:color .3s; }
.iv-q:hover{ color:var(--eco); }
.iv-q .qn{ color:var(--text-faint); font-size:14px; flex:0 0 auto; padding-top:6px; }
.iv-q .plus{ margin-left:auto; flex:0 0 auto; width:26px; height:26px; position:relative; transition:transform .4s var(--ease); }
.iv-q .plus::before,.iv-q .plus::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; }
.iv-q .plus::before{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.iv-q .plus::after{ left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); transition:opacity .3s; }
.iv-item.open .iv-q .plus{ transform:rotate(135deg); }
.iv-a{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.iv-a-inner{ padding:0 48px 30px 56px; color:var(--text-dim); font-size:17px; }
@media(max-width:600px){ .iv-a-inner{ padding-left:0; padding-right:0; } }

/* ---------------- STRATEGY + MATRIX ---------------- */
.strat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:50px; }
@media(max-width:900px){ .strat-grid{ grid-template-columns:1fr; } }
.strat-steps{ display:flex; flex-direction:column; gap:18px; }
.strat-step{ display:flex; gap:20px; padding:24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--border); }
.strat-step .sno{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--gov); flex:0 0 auto; }
.strat-step h4{ font-size:1.15rem; margin-bottom:8px; }
.strat-step p{ color:var(--text-dim); font-size:15px; }

.matrix-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; margin-top:30px; }
@media(max-width:980px){ .matrix-wrap{ grid-template-columns:1fr; } }
.matrix{ position:relative; aspect-ratio:1/1; border:1px solid var(--border); border-radius:var(--r-lg);
  background:radial-gradient(circle at 70% 25%, rgba(37,224,138,.06), transparent 55%), var(--bg-2); padding:14px; }
.matrix .axis{ position:absolute; background:var(--border-2); }
.matrix .axis.v{ top:8%; bottom:8%; left:50%; width:1px; }
.matrix .axis.h{ left:8%; right:8%; top:50%; height:1px; }
.matrix .axlabel{ position:absolute; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.matrix .ax-x{ bottom:10px; left:50%; transform:translateX(-50%); }
.matrix .ax-y{ top:50%; left:-4px; transform:rotate(-90deg) translateX(0); transform-origin:left; white-space:nowrap; }
.matrix .corner{ position:absolute; font-size:10px; color:var(--text-faint); letter-spacing:.1em; }
.bub{ position:absolute; transform:translate(-50%,50%); cursor:pointer; }
.bub .dot{ border-radius:50%; transition:transform .35s var(--ease), box-shadow .35s; }
.bub.e .dot{ background:var(--eco); } .bub.s .dot{ background:var(--social); } .bub.g .dot{ background:var(--gov); }
.bub:hover .dot{ transform:scale(1.18); }
.bub .bl{ position:absolute; left:50%; top:-6px; transform:translate(-50%,-100%); white-space:nowrap;
  font-size:11.5px; color:var(--text); background:rgba(10,15,28,.92); border:1px solid var(--border);
  padding:4px 9px; border-radius:7px; opacity:0; transition:opacity .25s; pointer-events:none; }
.bub:hover .bl{ opacity:1; }
.matrix-legend{ display:flex; flex-direction:column; gap:14px; }
.matrix-legend .li{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--text-dim); }
.matrix-legend .li .sw{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.matrix-list{ margin-top:14px; columns:2; column-gap:24px; }
.matrix-list .ml{ font-size:13.5px; color:var(--text-dim); padding:4px 0; break-inside:avoid; display:flex; gap:8px; align-items:center; }
.matrix-list .ml .sw{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }

/* ---------------- CHAPTER INTRO (E / S / G dividers) ---------------- */
.chapter{ min-height:74vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.chapter .ch-big{ position:absolute; right:-2vw; bottom:-6vh; font-family:var(--font-display); font-weight:700;
  font-size:34vw; line-height:.8; color:color-mix(in srgb,var(--accent) 12%, transparent); pointer-events:none; z-index:0; letter-spacing:-.04em; }
.chapter .ch-inner{ position:relative; z-index:1; }
.chapter .ch-no{ font-family:var(--font-display); color:var(--accent); letter-spacing:.2em; font-size:15px; }
.chapter h2{ font-size:clamp(3rem,9vw,7rem); margin:14px 0 0; }
.chapter h2 .accent{ color:var(--accent); }
.chapter .ch-lead{ font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--text-dim); max-width:58ch; margin-top:26px; }
.chapter .ch-std{ margin-top:30px; }

/* ---------------- DATA / KPI grids ---------------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:14px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 24px; position:relative; overflow:hidden; }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.8; }
.kpi .kv{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3.2vw,2.7rem); letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 60%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi .kl{ color:var(--text-dim); font-size:14px; margin-top:12px; line-height:1.45; }
.kpi.na .kv{ background:none; color:var(--text-faint); font-family:var(--font-body); font-weight:600; font-size:1rem; font-style:italic; }
.kpi.na::before{ background:var(--text-faint); opacity:.4; }

.layout-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:48px; }
@media(max-width:900px){ .layout-2{ grid-template-columns:1fr; gap:30px; } }
.prose h4{ font-size:1.25rem; margin:0 0 12px; }
.prose p{ color:var(--text-dim); margin-bottom:18px; }
.prose p strong{ color:var(--text); }

/* energy table */
.dtable{ width:100%; border-collapse:collapse; margin-top:8px; font-size:15px; }
.dtable caption{ text-align:left; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text); margin-bottom:14px; letter-spacing:.02em; }
.dtable th,.dtable td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--border); }
.dtable thead th{ color:var(--text-faint); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.dtable td.num{ text-align:right; font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.dtable tr.scope td{ color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding-top:22px; border-bottom:none; }
.dtable tr.total td{ font-weight:700; color:#fff; border-top:1px solid var(--border-2); border-bottom:none; }
.dtable tr.total td.num{ color:var(--eco); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:9px 16px; font-size:14px; color:var(--text-dim); }
.chip .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.chip.goal{ border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--text); }

/* donut / ring */
.ring-card{ display:flex; gap:30px; align-items:center; flex-wrap:wrap; }
.ring{ position:relative; width:188px; height:188px; flex:0 0 auto; }
.ring .center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring .center .rv{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:#fff; line-height:1; }
.ring .center .rl{ font-size:11px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:5px; }

/* big single figure block */
.figure-block{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.figure-block .fv{ font-family:var(--font-display); font-weight:700; font-size:clamp(3.4rem,9vw,7rem); letter-spacing:-.04em; line-height:.9;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 55%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.figure-block .fu{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,3vw,2.2rem); color:var(--accent); }
.figure-note{ color:var(--text-dim); margin-top:18px; max-width:48ch; }

/* climate risk split */
.rc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; }
@media(max-width:780px){ .rc-grid{ grid-template-columns:1fr; } }
.rc{ border-radius:var(--r-lg); padding:32px; border:1px solid var(--border); }
.rc.risk{ background:linear-gradient(160deg, rgba(255,120,80,.07), transparent); border-color:rgba(255,120,80,.2); }
.rc.chance{ background:linear-gradient(160deg, rgba(37,224,138,.08), transparent); border-color:rgba(37,224,138,.22); }
.rc h4{ display:flex; align-items:center; gap:10px; font-size:1.25rem; margin-bottom:14px; }
.rc.risk h4{ color:#ff9a78; } .rc.chance h4{ color:var(--eco); }
.rc p{ color:var(--text-dim); font-size:15.5px; }
.bereich-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

/* employee split bar */
.split-card{ margin-top:24px; }
.split-bar{ height:54px; border-radius:12px; overflow:hidden; display:flex; border:1px solid var(--border); }
.split-bar .seg{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#04121f; font-size:1.1rem; }
.split-bar .seg.m{ background:linear-gradient(90deg,var(--social),#6f9bff); }
.split-bar .seg.w{ background:linear-gradient(90deg,var(--eco),#7af0bd); color:#04140c; }
.split-legend{ display:flex; gap:24px; margin-top:16px; flex-wrap:wrap; color:var(--text-dim); font-size:14px; }
.split-legend .sl{ display:flex; align-items:center; gap:9px; }
.split-legend .sw{ width:12px; height:12px; border-radius:4px; }

/* value pillars */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:14px; }
.pillar{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:28px; }
.pillar .pn{ font-family:var(--font-display); color:var(--accent); font-weight:700; font-size:1.2rem; }
.pillar h4{ font-size:1.15rem; margin:14px 0 10px; }
.pillar p{ color:var(--text-dim); font-size:15px; }

/* governance compliance matrix */
.gov-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:30px; }
.gov-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; position:relative; }
.gov-card .gc{ font-family:var(--font-display); font-weight:700; color:var(--gov); font-size:13px; letter-spacing:.14em; }
.gov-card h4{ font-size:1.1rem; margin:10px 0 8px; }
.gov-card p{ color:var(--text-dim); font-size:14.5px; }
.gov-card .ok{ position:absolute; top:22px; right:22px; width:24px; height:24px; }
.two-cols{ columns:2; column-gap:40px; }
@media(max-width:680px){ .two-cols{ columns:1; } }
.lst{ list-style:none; }
.lst li{ position:relative; padding:11px 0 11px 32px; color:var(--text-dim); border-bottom:1px solid var(--border); break-inside:avoid; }
.lst li::before{ content:""; position:absolute; left:0; top:18px; width:14px; height:9px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* ---------------- DASHBOARD ---------------- */
#dashboard{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
.dash-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.dash-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.dfbtn{ all:unset; cursor:pointer; padding:10px 20px; border-radius:999px; border:1px solid var(--border-2);
  font-size:14px; font-weight:600; color:var(--text-dim); transition:all .3s; }
.dfbtn:hover{ color:var(--text); border-color:var(--text-dim); }
.dfbtn.active{ color:#04121f; background:var(--accent); border-color:var(--accent); }
.dash-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:40px; }
.dcell{ grid-column:span 3; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:26px; position:relative; overflow:hidden; transition:opacity .5s, transform .5s, filter .5s; }
.dcell .dc-top{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.dcell .dc-top .pin{ width:7px; height:7px; border-radius:50%; }
.dcell .dv{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,2.5vw,2.4rem); letter-spacing:-.03em; line-height:1; margin:16px 0 6px; }
.dcell .dl{ color:var(--text-dim); font-size:13.5px; line-height:1.4; }
.dcell.span4{ grid-column:span 4; } .dcell.span6{ grid-column:span 6; }
.dcell.dim{ opacity:.22; filter:saturate(.4); }
.pin.e{ background:var(--eco); } .pin.s{ background:var(--social); } .pin.g{ background:var(--gov); }
.dcell.e .dv{ color:var(--eco); } .dcell.s .dv{ color:var(--social); } .dcell.g .dv{ color:var(--gov); }
.dcell.na .dv{ font-size:1rem; font-style:italic; color:var(--text-faint); font-family:var(--font-body); }
@media(max-width:1000px){ .dcell{ grid-column:span 6; } .dcell.span4,.dcell.span6{ grid-column:span 6; } }
@media(max-width:600px){ .dcell,.dcell.span4,.dcell.span6{ grid-column:span 12; } }

/* mini bar chart inside dashboard */
.minibars{ display:flex; align-items:flex-end; gap:10px; height:70px; margin-top:16px; }
.minibars .mb{ flex:1; background:linear-gradient(180deg,var(--accent),transparent); border-radius:5px 5px 0 0; min-height:4px; opacity:.85; }

/* ---------------- ROADMAP ---------------- */
.road{ position:relative; margin-top:50px; padding-left:30px; }
.road::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--eco),var(--gov),var(--social)); }
.road-item{ position:relative; padding:0 0 44px 36px; }
.road-item::before{ content:""; position:absolute; left:-30px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
.road-item .rp{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:6px; }
.road-item .rgrp{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent); }
.road-item.future .rp{ color:var(--text); }
.road-item ul{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.road-item ul li{ position:relative; padding-left:24px; color:var(--text-dim); font-size:15.5px; }
.road-item ul li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:.7; }
.road-item.future ul li::before{ background:transparent; border:1.5px solid var(--accent); }

/* ---------------- SDGs ---------------- */
.sdg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:46px; }
.sdg{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; transition:transform .4s var(--ease), border-color .4s; }
.sdg:hover{ transform:translateY(-6px); border-color:var(--border-2); }
.sdg img{ width:74px; height:74px; border-radius:10px; }
.sdg h4{ font-size:1.1rem; margin:18px 0 10px; }
.sdg p{ color:var(--text-dim); font-size:14.5px; }

/* ---------------- INDEX ---------------- */
.idx{ margin-top:44px; border-top:1px solid var(--border); }
.idx-row{ display:grid; grid-template-columns:80px 1fr; gap:20px; padding:20px 6px; border-bottom:1px solid var(--border); transition:background .3s; }
.idx-row:hover{ background:var(--surface); }
.idx-row .ic{ font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:1.1rem; }
.idx-row .it{ font-weight:600; }
.idx-row .id{ color:var(--text-dim); font-size:14.5px; margin-top:6px; }
.idx-row .id.neg{ color:var(--eco); font-weight:600; }

/* ---------------- CLOSING ---------------- */
#closing{ min-height:88vh; display:flex; align-items:center; text-align:center; overflow:hidden; }
#closing .cl-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }
#closing .cl-q{ font-family:var(--font-serif); font-style:italic; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.16; }
#closing .cl-q .grad{ background:linear-gradient(110deg,var(--eco),var(--social)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#closing .cl-cite{ margin-top:34px; color:var(--text-dim); font-size:17px; }
#closing .cl-logo{ width:64px; height:64px; margin:0 auto 30px; }
#closing .cl-logo circle{ stroke:#fff; } #closing .cl-logo path{ fill:var(--eco); }

.note{ font-size:13px; color:var(--text-faint); border:1px dashed var(--border-2); border-radius:10px; padding:8px 14px; display:inline-flex; gap:8px; align-items:center; }
.note::before{ content:"i"; width:18px; height:18px; border-radius:50%; border:1px solid var(--text-faint); display:grid; place-items:center; font-size:11px; font-style:italic; }