/* VassilenaRankova.com — one-page scroll · SBCConception
   Zone A (work): rose/bordeaux — Zone B (concept lab): night/coral */

:root{
  --rose-pale:#FCE9E9; --rose:#F6BFC8; --rose-deep:#EFA3B0;
  --bordeaux:#7C1220; --bordeaux-deep:#55090F;
  --creme:#F6F1E7; --ink:#241C1C;
  --noir:#1B1918; --noir-2:#242120; --coral:#E8503A; --coral-soft:#F2937F;
  --paper:#EFEAE0; --gold:#C9964B;
  --f-display:'Anton',sans-serif;
  --f-body:'Poppins',sans-serif;
  --f-script:'Mrs Saint Delafield',cursive;
  --maxw:1120px; --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:16px;line-height:1.65;color:var(--ink);
  background:var(--rose-pale);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}
::selection{background:var(--bordeaux);color:var(--rose-pale)}
.zone-dark ::selection{background:var(--coral);color:var(--noir)}

/* ---------- Scrollbar ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--bordeaux) var(--rose-pale)}
html:has(body.dark-nav){scrollbar-color:var(--coral) var(--noir)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--rose-pale)}
::-webkit-scrollbar-thumb{background:var(--bordeaux);border-radius:8px;border:2px solid var(--rose-pale)}
::-webkit-scrollbar-thumb:hover{background:var(--bordeaux-deep)}
body.dark-nav ::-webkit-scrollbar-track{background:var(--noir)}
body.dark-nav ::-webkit-scrollbar-thumb{background:var(--coral);border-color:var(--noir)}
body.dark-nav ::-webkit-scrollbar-thumb:hover{background:var(--coral-soft)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

.display{font-family:var(--f-display);text-transform:uppercase;line-height:.92;letter-spacing:.01em}
.script{font-family:var(--f-script);font-weight:400;text-transform:none;line-height:1}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--bordeaux)}
.zone-dark .eyebrow{color:var(--coral)}

/* ---------- Progress + nav ---------- */
#progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:90;background:var(--bordeaux);transition:background .4s}
body.dark-nav #progress{background:var(--coral)}
.nav{position:fixed;top:4px;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;transition:background .45s var(--ease),color .45s,border-color .45s;
  background:rgba(252,233,233,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,18,32,.25);color:var(--ink)}
body.dark-nav .nav{background:rgba(27,25,24,.82);border-bottom:1px solid rgba(239,234,224,.2);color:var(--paper)}
.nav-logo{font-family:var(--f-display);font-size:1.3rem;text-decoration:none;color:var(--bordeaux);transition:color .45s}
body.dark-nav .nav-logo{color:var(--coral)}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--bordeaux)}
body.dark-nav .nav-links a.active{color:var(--coral)}
@media(max-width:640px){.nav{padding:11px 16px}.nav-links{gap:13px}.nav-links a{font-size:.68rem}}

/* ---------- Zones ---------- */
.zone{position:relative}
.zone-rose{background:var(--rose-pale);color:var(--ink)}
.zone-dark{background:var(--noir);color:var(--paper)}
section{padding:110px 0}
@media(max-width:640px){section{padding:70px 0}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-r{opacity:0;transform:translateX(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
[data-stagger].in > *{animation:rise .7s var(--ease) both}
[data-stagger].in > *:nth-child(2){animation-delay:.08s}
[data-stagger].in > *:nth-child(3){animation-delay:.16s}
[data-stagger].in > *:nth-child(4){animation-delay:.24s}
[data-stagger].in > *:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-l,.reveal-r{opacity:1!important;transform:none!important;transition:none!important}
  [data-stagger].in > *{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 80px;overflow:hidden}
.hero-name{color:var(--bordeaux);font-size:clamp(3rem,11.5vw,9rem);margin:14px 0 6px}
.hero-name .l2{display:block;color:transparent;-webkit-text-stroke:2px var(--bordeaux);text-stroke:2px var(--bordeaux);padding-left:.06em}
@supports not ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .hero-name .l2{color:var(--bordeaux);opacity:.42}
}
.hero-script{font-family:var(--f-script);font-size:clamp(2rem,5.5vw,3.6rem);color:var(--ink);opacity:.9;margin:2px 0 30px}
.hero-lede{max-width:56ch;font-size:1.05rem;margin-bottom:34px}
.hero-tags{display:flex;gap:28px;flex-wrap:wrap;margin-top:6px;font-size:.95rem;font-weight:500}
.hero-tags span::before{content:"◆";color:var(--bordeaux);margin-right:10px;font-size:.66rem;vertical-align:2px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.hero-status{display:inline-flex;align-items:center;gap:10px;line-height:1.35;background:var(--bordeaux);color:var(--rose-pale);
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none;transition:transform .2s,background .2s}
.hero-status:hover{background:var(--bordeaux-deep);transform:translateY(-2px)}
.hero-status .pulse{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#7ee08a;box-shadow:0 0 0 0 rgba(126,224,138,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(126,224,138,0)}100%{box-shadow:0 0 0 0 rgba(126,224,138,0)}}
.btn-line{display:inline-block;text-decoration:none;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
  padding:12px 22px;border-radius:999px;border:2px solid var(--bordeaux);color:var(--bordeaux);transition:background .2s,color .2s,transform .2s}
.btn-line:hover{background:var(--bordeaux);color:var(--rose-pale);transform:translateY(-2px)}
.scroll-hint{margin-top:60px;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:12px}
.scroll-hint::after{content:"";width:1px;height:44px;background:currentColor;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Project cover slides ---------- */
.cover{position:relative;min-height:66svh;display:flex;flex-direction:column;justify-content:center;
  padding:90px 0 70px;overflow:hidden;isolation:isolate}
.cover .wrap{width:100%;position:relative;z-index:1}
.cover-word{font-family:var(--f-display);text-transform:uppercase;line-height:.9;
  font-size:clamp(2.8rem,11vw,8.6rem);letter-spacing:.005em}
.cover-script{font-family:var(--f-script);font-size:clamp(2rem,6vw,4.4rem);line-height:1;margin-top:-.12em}
.cover-kicker{font-size:.76rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px;opacity:.85}
.cover-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:52px;
  font-size:.9rem;letter-spacing:.04em;opacity:.85;border-top:1px solid currentColor;padding-top:18px}
@media(max-width:640px){.cover{min-height:52svh;padding:64px 0 50px}.cover-foot{gap:10px;font-size:.8rem}}

.cover-boyar{background:linear-gradient(160deg,#F9DDD8 0%,#EFA98F 100%);color:#7C2A1E}
.cover-samsung{background:var(--bordeaux);color:var(--rose-pale)}
.cover-degusta{background:#F1F5E6;color:#4C6B14}
.cover-sandro{background:#141312;color:#E9E6E1}
.cover-sandro .cover-word{color:transparent;-webkit-text-stroke:2px #9a9591;text-stroke:2px #9a9591}
.cover-sandro .cover-script{color:#fff}
.cover-glossier{background:#F7F1F0;color:#111}
.cover-glossier .cover-script{color:#E8467F}
.cover-mugler{background:#0E1F45;color:#EDF1FA}
.cover-mugler .cover-script{color:#fff}
.cover-media{position:absolute;inset:0;z-index:-1;opacity:.22;object-fit:cover;width:100%;height:100%}
.cover-obj{position:absolute;right:5%;top:50%;transform:translateY(-52%);height:62%;width:auto;z-index:-1;opacity:.95;pointer-events:none}
@media(max-width:760px){.cover-obj{opacity:.22;right:-6%;height:48%}}

/* ---------- Sandro portraits + garment cut-outs ---------- */
.looks{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:34px 0}
@media(max-width:900px){.looks{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.looks{grid-template-columns:1fr}}
.look{position:relative;margin:0}
.look img.portrait{width:100%;border-radius:12px;aspect-ratio:3/4;object-fit:cover;
  border:1px solid rgba(239,234,224,.16);transition:transform .6s var(--ease)}
.look:hover img.portrait{transform:scale(1.02)}
.look img.garment{position:absolute;top:-16px;right:-14px;width:46%;max-height:58%;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));transition:transform .5s var(--ease)}
.look:hover img.garment{transform:translateY(-6px) rotate(-2deg)}
.look figcaption{font-size:.78rem;opacity:.72;margin-top:10px;letter-spacing:.06em}

/* ---------- Section headers ---------- */
.sec-head{margin-bottom:56px}
.sec-head h2{font-size:clamp(2.4rem,7vw,4.8rem);color:var(--bordeaux)}
.zone-dark .sec-head h2{color:var(--paper)}
.sec-head p{max-width:62ch;margin-top:16px}

/* ---------- Finder chrome ---------- */
.finder-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#E7E3DD;border-radius:12px 12px 0 0}
.zone-dark .finder-bar{background:#2E2B29}
.dots{display:flex;gap:7px}
.dots i{width:12px;height:12px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#E4574B}.dots i:nth-child(2){background:#E0A93E}.dots i:nth-child(3){background:#61B457}
.finder-title{font-weight:700;font-size:.92rem;color:#33302d}
.zone-dark .finder-title{color:var(--paper)}
.finder-title em{font-style:italic;font-weight:400;font-size:.72rem;opacity:.6;margin-left:10px}

/* ---------- About card ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-card{background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(60,10,18,.12);overflow:hidden}
.about-portrait{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;object-position:50% 26%;background:#E9E5DF}
.about-facts{padding:26px 28px;display:grid;gap:16px}
.about-facts div{border-left:3px solid var(--rose-deep);padding-left:14px}
.about-facts b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordeaux)}
.about-facts span{font-size:.94rem}

/* ---------- Project blocks ---------- */
.project{padding:64px 0 90px;border-top:0}

.project-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.project-head h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.9rem,5vw,3.4rem);line-height:1;color:var(--bordeaux)}
.zone-dark .project-head h3{color:var(--paper)}
.project-head .script{font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--ink);opacity:.85}
.zone-dark .project-head .script{color:var(--coral)}
.file-label{font-size:.76rem;font-weight:600;letter-spacing:.1em;opacity:.6;margin-bottom:18px}
.case-meta{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.chip{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;
  background:#fff;color:var(--bordeaux);border:1px solid var(--rose-deep)}
.zone-dark .chip{background:transparent;color:var(--paper);border:1px solid rgba(239,234,224,.4)}

.case-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}
@media(max-width:820px){.case-cols{grid-template-columns:1fr}}
.panel{border-radius:12px;padding:26px 28px;background:#fff;box-shadow:0 10px 30px rgba(60,10,18,.08)}
.zone-dark .panel{background:var(--noir-2);border:1px solid rgba(239,234,224,.12);box-shadow:none}
.panel h4{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;color:var(--bordeaux)}
.zone-dark .panel h4{color:var(--coral)}
.panel p,.panel li{font-size:.95rem}
.panel ul{padding-left:18px;display:grid;gap:6px}

.insight{margin:36px 0;padding:30px 36px;border-radius:12px;font-size:1.12rem;line-height:1.5;font-weight:500;
  background:var(--bordeaux);color:var(--rose-pale)}
.zone-dark .insight{background:var(--coral);color:var(--noir)}
.insight b{display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px;opacity:.8}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:34px 0}
.stat{border-radius:12px;padding:20px;text-align:center;background:#fff;box-shadow:0 8px 24px rgba(60,10,18,.08)}
.zone-dark .stat{background:var(--noir-2);border:1px solid rgba(239,234,224,.12);box-shadow:none}
.stat b{display:block;font-family:var(--f-display);font-size:1.85rem;line-height:1.1;color:var(--bordeaux)}
.zone-dark .stat b{color:var(--coral)}
.stat span{font-size:.78rem;opacity:.75}

.gallery{display:grid;gap:20px;margin:34px 0}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g-3,.g-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g-3,.g-2,.g-4{grid-template-columns:1fr}}
.gallery figure{border-radius:12px;overflow:hidden;margin:0;background:#fff;box-shadow:0 12px 32px rgba(60,10,18,.12)}
.zone-dark .gallery figure{background:var(--noir-2);border:1px solid rgba(239,234,224,.14);box-shadow:none}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.035)}
.gallery figcaption{font-size:.76rem;padding:10px 14px;opacity:.75}
.slide{border-radius:12px;overflow:hidden;width:fit-content;max-width:100%;margin:26px auto;box-shadow:0 12px 32px rgba(60,10,18,.12)}
.slide img{margin:0 auto}
.zone-dark .slide{border:1px solid rgba(239,234,224,.14);box-shadow:none}

/* ---------- Lab gate (transition rose → nuit) ---------- */
.lab-gate{padding:130px 0;text-align:center;background:linear-gradient(180deg,var(--rose-pale) 0%,#3a2426 55%,var(--noir) 100%);color:var(--paper)}
.lab-gate .script{font-size:clamp(2.2rem,6vw,4rem);color:var(--coral-soft)}
.lab-gate h2{font-size:clamp(2.6rem,8vw,5.6rem);color:var(--paper);margin-top:6px}
.lab-gate p{max-width:60ch;margin:22px auto 0}
.disclaimer{max-width:760px;margin:34px auto 0;display:flex;gap:12px;text-align:left;padding:16px 20px;border-radius:10px;
  background:rgba(232,80,58,.14);border:1px solid rgba(232,80,58,.55);font-size:.85rem;line-height:1.5}
.disclaimer strong{color:var(--coral);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;display:block;margin-bottom:4px}

/* ---------- CTA + footer ---------- */
.cta{text-align:center}
.cta h2{font-size:clamp(2.3rem,8vw,5rem);color:var(--paper);margin:6px 0 18px}
.cta .script{font-size:clamp(1.9rem,5vw,3rem);color:var(--coral-soft)}
.cta p{max-width:56ch;margin:0 auto 30px}
.btn{display:inline-block;text-decoration:none;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.85rem;padding:15px 30px;border-radius:999px;background:var(--coral);color:var(--noir);transition:transform .2s,background .2s}
.btn:hover{background:var(--coral-soft);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid var(--paper);color:var(--paper)}
.btn.ghost:hover{background:rgba(239,234,224,.12)}

footer{padding:64px 0 40px;background:#141212;color:var(--paper);border-top:1px solid rgba(239,234,224,.15)}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.foot-name{font-family:var(--f-display);font-size:clamp(2rem,6vw,3.4rem);text-transform:uppercase;line-height:.95}
.foot-links{display:grid;gap:8px;font-size:.95rem}
.foot-links a{text-decoration:none;opacity:.9}
.foot-links a:hover{opacity:1;text-decoration:underline}
.foot-note{margin-top:34px;font-size:.74rem;opacity:.6}
.foot-credit{margin-top:14px;text-align:right;font-size:.74rem;opacity:.6}
.foot-credit a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.foot-credit a:hover{opacity:1}

/* ---------- Pillars (Sandro positioning) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 6px}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{border-radius:12px;padding:20px 22px;background:#fff;box-shadow:0 10px 30px rgba(60,10,18,.08)}
.zone-dark .pillar{background:var(--noir-2);border:1px solid rgba(239,234,224,.12);box-shadow:none}
.pillar b{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bordeaux);margin-bottom:8px}
.zone-dark .pillar b{color:var(--coral)}
.pillar span{font-size:.92rem;line-height:1.5}

/* ---------- Phased plan ---------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.phases{grid-template-columns:1fr;gap:14px}}
.phases div{border-top:1px solid rgba(124,18,32,.25);padding-top:12px}
.zone-dark .phases div{border-top-color:rgba(239,234,224,.2)}
.phases b{display:block;font-weight:700;margin-bottom:4px}
.phases span{font-size:.9rem;opacity:.85}

/* ---------- KPI table ---------- */
.kpi{margin:34px 0 6px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(60,10,18,.08)}
.zone-dark .kpi{background:var(--noir-2);border:1px solid rgba(239,234,224,.12);box-shadow:none}
.kpi-head{padding:22px 24px 6px}
.kpi-head h4{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bordeaux);margin-bottom:8px}
.zone-dark .kpi-head h4{color:var(--coral)}
.kpi-head p{font-size:.9rem;opacity:.75;max-width:62ch}
.kpi table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem}
.kpi th{text-align:left;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;
  padding:10px 24px;border-bottom:1px solid rgba(124,18,32,.2);font-weight:600}
.zone-dark .kpi th{border-bottom-color:rgba(239,234,224,.2)}
.kpi td{padding:14px 24px;border-bottom:1px solid rgba(124,18,32,.12);vertical-align:top}
.zone-dark .kpi td{border-bottom-color:rgba(239,234,224,.1)}
.kpi tr:last-child td{border-bottom:0}
.kpi td b{display:block;font-weight:600}
.kpi td em{display:block;font-style:normal;font-size:.8rem;opacity:.62;margin-top:3px;max-width:42ch}
.kpi td:nth-child(2),.kpi td:nth-child(3){font-weight:700;white-space:nowrap}
.kpi td:nth-child(3){color:var(--bordeaux)}
.zone-dark .kpi td:nth-child(3){color:var(--coral)}
.kpi td:nth-child(4){font-size:.82rem;opacity:.7}
.kpi-note{padding:14px 24px 20px;font-size:.75rem;opacity:.55}
@media(max-width:780px){
  .kpi thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kpi tr{display:block;border-bottom:1px solid rgba(124,18,32,.16);padding:6px 0}
  .zone-dark .kpi tr{border-bottom-color:rgba(239,234,224,.14)}
  .kpi tr:last-child{border-bottom:0}
  .kpi td{display:grid;grid-template-columns:104px 1fr;gap:12px;border:0;padding:6px 20px}
  .kpi td::before{content:attr(data-l);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;padding-top:3px}
  .kpi td:first-child{grid-template-columns:1fr;padding-top:14px}
  .kpi td:first-child::before{display:none}
  .kpi td em{max-width:none}
}

/* ---------- KPI progress bars ---------- */
.kpi table{table-layout:fixed}
.kpi th:nth-child(1),.kpi td:nth-child(1){width:42%}
.kpi th:nth-child(2),.kpi td:nth-child(2){width:12%}
.kpi th:nth-child(3),.kpi td:nth-child(3){width:14%}
.kpi th:nth-child(4),.kpi td:nth-child(4){width:32%}
.kpi td.prog{padding-top:22px}
.kpi .track{position:relative;display:block;height:7px;border-radius:99px;
  background:rgba(124,18,32,.14);overflow:visible}
.zone-dark .kpi .track{background:rgba(239,234,224,.14)}
.kpi .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--bordeaux),var(--rose-deep));
  transition:width 1.4s cubic-bezier(.22,.8,.24,1) .15s}
.zone-dark .kpi .fill{background:linear-gradient(90deg,#8C2418,var(--coral))}
.kpi.in .fill{width:100%}
.kpi .mark{position:absolute;top:-5px;bottom:-5px;left:var(--b);width:2px;
  background:currentColor;opacity:.55;border-radius:2px}
.kpi .mark::after{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65;white-space:nowrap}
.kpi tbody tr:first-child .mark::after{content:"today"}
@media(max-width:780px){
  .kpi table{table-layout:auto}
  .kpi th,.kpi td{width:auto!important}
  .kpi td.prog{grid-template-columns:104px 1fr;align-items:center;padding-top:16px;padding-bottom:18px}
  .kpi td.prog .track{width:100%}
  .kpi .mark::after{display:none}
}