/* ============================================================
   Vodafoners App — Case Study
   Gabriel Radatovics · coded to match the Figma presentation
   ============================================================ */

:root{
  --red:#E60000;
  --ink:#1A1A1A;
  --grey:#5A5A5A;
  --light:#F6F6F6;
  --dark:#0D0D0D;
  --card-dark:#1A1A1A;
  --mute:#9E9E9E;          /* body text on dark */
  --light-text:#D9D9D9;    /* brighter body on dark */
  --gutter:max(24px, calc((100% - 1480px) / 2));
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Work Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--light);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--dark);
  border-bottom:3px solid var(--red);
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
}
.topbar .brand{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:#fff;}
.topbar nav{display:flex;gap:40px;}
.topbar nav a{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.65);transition:color .2s;position:relative;}
.topbar nav a:hover{color:#fff;}
.topbar nav a.active{color:#fff;}
.topbar nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:3px;background:var(--red);}

/* reading-progress bar — sits on the header's red underline */
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:0;background:#fff;transition:width .08s linear;z-index:101;}

/* hamburger (mobile only) */
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.navtoggle span{display:block;width:24px;height:2px;background:#fff;transition:transform .25s,opacity .2s;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Section shell ---------- */
.sec{
  padding:120px var(--gutter) 110px;
  background:var(--light);
  scroll-margin-top:72px;
}
.sec.dark{background:var(--dark);color:#fff;}

/* ---------- Section header ---------- */
.hdr{display:flex;gap:56px;align-items:flex-start;margin-bottom:64px;}
.hdr .num{
  font-family:'Roboto';font-weight:900;font-size:120px;line-height:120px;
  letter-spacing:-5px;color:var(--red);flex:none;
}
.sec.dark .hdr .num{color:#fff;}
.hdr .tblock{border-left:4px solid var(--red);padding-left:28px;}
.eyebrow{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:3px;color:var(--red);text-transform:uppercase;}
.hdr .title{font-weight:800;font-size:48px;line-height:54px;letter-spacing:-1px;color:var(--ink);margin:14px 0;}
.sec.dark .hdr .title{color:#fff;}
.hdr .sub{font-weight:400;font-size:17px;line-height:26px;color:var(--grey);max-width:840px;}
.sec.dark .hdr .sub{color:var(--mute);}

/* standalone red label */
.label{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:3px;color:var(--red);text-transform:uppercase;display:block;margin-bottom:18px;}

/* generic blocks spacing */
.block{margin-top:56px;}
.block:first-child{margin-top:0;}

/* ---------- Cards / rows ---------- */
.row{display:flex;gap:24px;align-items:stretch;}
.row.top{align-items:flex-start;}

.card{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:30px 32px;flex:1;}
.sec.dark .card{background:var(--card-dark);border:1px solid rgba(255,255,255,.08);}
.card.t-red{border-top:3px solid var(--red);box-shadow:0 6px 18px rgba(0,0,0,.05);}
.card.l-red{border-left:3px solid var(--red);}
.card h3{font-weight:600;font-size:20px;line-height:26px;color:var(--ink);}
.sec.dark .card h3{color:#fff;}
.card p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:16px;}
.sec.dark .card p{color:var(--mute);}

/* eyebrow label inside a card */
.card .clabel{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}

/* ---------- Hero ---------- */
.hero{display:flex;align-items:center;gap:40px;padding:0 0 0 0;}
.hero .left{flex:0 0 580px;max-width:580px;}
.hero .left .eyebrow{letter-spacing:2px;font-size:12px;}
.hero .left h1{font-weight:800;font-size:78px;line-height:80px;letter-spacing:-2px;color:var(--ink);margin:24px 0 28px;}
.hero .left .lede{font-weight:400;font-size:18px;line-height:29px;color:var(--grey);max-width:500px;}
.hero .meta{display:flex;gap:44px;margin-top:40px;flex-wrap:wrap;}
.hero .meta .mi span{display:block;}
.hero .meta .mi .k{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--grey);text-transform:uppercase;}
.hero .meta .mi .v{font-weight:600;font-size:15px;color:var(--ink);margin-top:6px;}
.hero .right{flex:1;}
.hero .right img{width:100%;}

/* ---------- two-column generic ---------- */
.cols2{display:flex;gap:48px;align-items:flex-start;}
.cols2 .grow{flex:1;}

/* facts panel (context) */
.facts{flex:0 0 440px;background:var(--dark);border-radius:14px;padding:12px 36px;}
.facts .frow{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);}
.facts .frow:first-child{border-top:none;}
.facts .frow .k{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.facts .frow .v{font-weight:600;font-size:16px;line-height:22px;color:#fff;margin-top:4px;}
.narr p{font-weight:400;font-size:18px;line-height:30px;color:var(--ink);}
.narr p+p{margin-top:20px;color:var(--grey);}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.chip{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:24px;padding:12px 20px;font-weight:500;font-size:15px;color:var(--ink);}

/* objective box */
.objective{display:flex;align-items:center;gap:48px;background:var(--red);border-radius:10px;padding:44px 56px;color:#fff;}
.objective .ol{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.65);text-transform:uppercase;flex:none;}
.objective .od{width:1px;height:52px;background:rgba(255,255,255,.3);flex:none;}
.objective p{font-weight:600;font-size:24px;line-height:34px;color:#fff;}

/* method cards (discovery) */
.metric{font-weight:800;font-size:44px;letter-spacing:-2px;color:var(--red);}
.card h4{font-weight:600;font-size:17px;line-height:23px;color:#fff;margin-top:10px;}
.sec.dark .card .cdesc{font-weight:400;font-size:14px;line-height:21px;color:var(--mute);margin-top:10px;}

/* insight cards */
.insight{display:flex;gap:32px;align-items:flex-start;}
.insight .q{flex:0 0 520px;}
.insight .q .il{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.insight .q p{font-weight:600;font-size:19px;line-height:27px;color:#fff;margin-top:8px;}
.insight .imp{flex:1;}
.insight .imp .il{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;}
.insight .imp p{font-weight:400;font-size:16px;line-height:24px;color:var(--mute);margin-top:8px;}

/* personas */
.persona{display:flex;flex-direction:column;gap:22px;}
.persona .phead{display:flex;align-items:center;gap:16px;}
.avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:24px;flex:none;background-size:cover;background-position:center;}
.persona .pname{font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--ink);}
.persona .prole{font-weight:500;font-size:13px;line-height:18px;color:var(--red);margin-top:4px;}
.pdiv{height:1px;background:rgba(0,0,0,.08);}
.plist .pl-label{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;display:block;}
.plist ul{list-style:none;}
.plist li{position:relative;padding-left:18px;font-weight:400;font-size:15px;line-height:22px;color:var(--grey);margin-bottom:8px;}
.plist li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;}
.plist.goals li::before{background:var(--red);}
.plist.frus li::before{background:#8a8a8a;}
.modchips{display:flex;flex-wrap:wrap;gap:8px;}
.modchips .mc{background:#FFF2F2;color:var(--red);border-radius:20px;padding:8px 14px;font-weight:600;font-size:13px;}

/* IA */
.navpills{display:flex;gap:16px;}
.navpill{flex:1;background:var(--red);border-radius:12px;padding:20px 22px;}
.navpill .t{font-weight:600;font-size:18px;line-height:24px;color:#fff;}
.navpill .d{font-weight:400;font-size:13px;line-height:18px;color:rgba(255,255,255,.85);margin-top:4px;}
.clusters{display:flex;gap:24px;align-items:flex-start;}
.cluster{flex:1;background:var(--card-dark);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px;}
.cluster .ch{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.cluster .ch .bar{width:4px;height:22px;border-radius:2px;background:var(--red);}
.cluster .ch .t{font-weight:600;font-size:18px;color:#fff;}
.cluster .mrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);}
.cluster .mrow .sq{width:6px;height:6px;border-radius:1px;background:var(--red);flex:none;}
.cluster .mrow .mn{font-weight:500;font-size:15px;color:#D9D9D9;}

/* images / flows */
.figure{width:100%;border-radius:0;}
.flow-img{width:100%;}
.artboard{width:100%;border-radius:12px;border:1px solid rgba(0,0,0,.12);box-shadow:0 8px 24px rgba(0,0,0,.06);overflow:hidden;}
.caption{font-weight:400;font-size:15px;line-height:22px;color:var(--grey);margin-top:16px;}
.legend{display:flex;gap:24px;align-items:center;margin-top:24px;}
.legend .li{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--grey);}
.legend .li .bar{width:24px;height:3px;border-radius:2px;}

/* pull quote (solution) */
.pull{display:flex;gap:32px;align-items:flex-start;}
.pull .bar{width:4px;flex:none;border-radius:2px;background:var(--red);align-self:stretch;min-height:150px;}
.pull p{font-weight:800;font-size:40px;line-height:52px;letter-spacing:-1px;color:#fff;}
.pillar .pn{font-family:'Roboto';font-weight:900;font-size:28px;letter-spacing:-1px;color:var(--red);}

/* design system tokens */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.swatch{width:auto;}
.swatch .blk{height:92px;border-radius:10px;}
.swatch .nm{font-weight:600;font-size:14px;line-height:18px;color:var(--ink);margin-top:8px;}
.swatch .hex{font-weight:400;font-size:13px;color:var(--grey);}
.typecard{border:1px solid rgba(0,0,0,.1);border-radius:14px;background:#fff;padding:8px 28px;}
.typecard .trow{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid rgba(0,0,0,.07);}
.typecard .trow:first-child{border-top:none;}
.typecard .trow .meta{text-align:right;}
.typecard .trow .meta .mn{font-weight:600;font-size:13px;color:var(--ink);}
.typecard .trow .meta .mm{font-weight:400;font-size:12px;color:var(--grey);}

/* service directory */
.statband{display:flex;align-items:center;justify-content:center;gap:64px;background:var(--red);border-radius:12px;padding:24px;color:#fff;}
.statband .s{text-align:center;}
.statband .s .n{font-weight:800;font-size:40px;letter-spacing:-1px;}
.statband .s .l{font-weight:500;font-size:14px;opacity:.9;}
.dirgrid{display:flex;flex-direction:column;gap:20px;flex:1;}
.dirgrid .drow{display:flex;gap:20px;align-items:stretch;}
.dgroup{flex:1;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:24px 26px;}
.dgroup .dh{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.dgroup .dh .gl{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.dgroup .dh .ct{background:#FFF2F2;color:var(--red);border-radius:10px;padding:3px 9px;font-family:'Roboto';font-weight:700;font-size:10px;}
.dgroup .items{font-weight:500;font-size:15px;line-height:24px;color:var(--ink);}
.dir-device{flex:0 0 300px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.dir-device img{width:300px;border-radius:24px;box-shadow:0 18px 40px rgba(13,5,5,.18);}
.dir-device .dl{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:var(--red);}

/* accessibility */
.callout{display:flex;align-items:center;gap:32px;background:var(--red);border-radius:12px;padding:36px 48px;color:#fff;}
.callout .big{font-weight:800;font-size:40px;letter-spacing:-1px;white-space:nowrap;}
.callout .od{width:1px;height:56px;background:rgba(255,255,255,.3);flex:none;}
.callout p{font-weight:600;font-size:22px;line-height:32px;}
.featgrid{display:flex;flex-direction:column;gap:24px;}
.featgrid .frow{display:flex;gap:24px;}
.feat{flex:1;background:var(--card-dark);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:30px;}
.feat .fh{display:flex;align-items:center;gap:12px;}
.feat .fh .dot{width:10px;height:10px;border-radius:50%;background:var(--red);}
.feat .fh .t{font-weight:600;font-size:18px;color:#fff;}
.feat p{font-weight:400;font-size:15px;line-height:23px;color:var(--mute);margin-top:12px;}

/* testing rows */
.trip{display:flex;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05);overflow:hidden;}
.trip .cell{flex:1;padding:30px 32px;}
.trip .cell+.cell{border-left:1px solid rgba(0,0,0,.08);}
.trip .cell .tl{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:10px;}
.trip .cell p{font-weight:400;font-size:16px;line-height:24px;color:var(--grey);}
.trip .cell.res p{font-weight:600;color:var(--ink);}

/* before / after */
.statline{display:flex;gap:24px;}
.statline .sc{flex:1;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:26px 28px;}
.statline .sc .l{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--grey);text-transform:uppercase;}
.statline .sc .v{display:flex;align-items:center;gap:10px;margin-top:10px;}
.statline .sc .v .a{font-weight:600;font-size:24px;color:var(--grey);letter-spacing:-.5px;}
.statline .sc .v .ar{font-weight:400;font-size:20px;color:var(--red);}
.statline .sc .v .b{font-weight:800;font-size:28px;color:var(--red);letter-spacing:-.5px;}
.panels{display:flex;gap:24px;align-items:stretch;}
.panel{flex:1;border-radius:14px;padding:38px 40px;}
.panel.before{background:#E6E6E6;}
.panel.after{background:var(--red);color:#fff;}
.panel .pl{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:3px;text-transform:uppercase;}
.panel.before .pl{color:var(--grey);}
.panel.after .pl{color:rgba(255,255,255,.8);}
.panel h3{font-weight:800;font-size:28px;line-height:34px;letter-spacing:-.5px;margin:14px 0 20px;}
.panel.before h3{color:var(--ink);}
.panel ul{list-style:none;}
.panel li{position:relative;padding-left:24px;font-size:16px;line-height:24px;margin-bottom:14px;}
.panel li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;}
.panel.before li{color:#4d4d4d;font-weight:400;}
.panel.before li::before{background:#8c8c8c;}
.panel.after li{color:#fff;font-weight:500;}
.panel.after li::before{background:#fff;border-radius:50%;}

/* impact */
.statbox{flex:1;background:#fff;border-top:3px solid var(--red);border-radius:12px;padding:36px 32px;box-shadow:0 6px 18px rgba(0,0,0,.05);}
.statbox .big{font-weight:800;font-size:54px;letter-spacing:-2px;color:var(--red);}
.statbox .lbl{font-weight:600;font-size:16px;line-height:22px;color:var(--ink);margin-top:14px;}
.statbox .d{font-weight:400;font-size:14px;line-height:20px;color:var(--grey);margin-top:2px;}
.outcome{flex:1;background:#FFF5F5;border-left:3px solid var(--red);border-radius:12px;padding:32px;}
.outcome h3{font-weight:600;font-size:20px;line-height:26px;color:var(--ink);}
.outcome p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:14px;}

/* reflection */
.learn{flex:1;background:var(--card-dark);border-left:3px solid var(--red);border-radius:12px;padding:32px;}
.learn h3{font-weight:600;font-size:21px;line-height:27px;color:#fff;}
.learn p{font-weight:400;font-size:16px;line-height:24px;color:var(--mute);margin-top:12px;}
.grid2{display:flex;flex-direction:column;gap:24px;}
.grid2 .gr{display:flex;gap:24px;align-items:stretch;}

/* next steps */
.road{flex:1;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:30px;box-shadow:0 6px 16px rgba(0,0,0,.05);}
.road .tag{display:inline-block;background:#FFF2F2;color:var(--red);border-radius:16px;padding:6px 12px;font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:1.5px;}
.road h3{font-weight:600;font-size:19px;line-height:25px;color:var(--ink);margin:14px 0 0;}
.road p{font-weight:400;font-size:15px;line-height:22px;color:var(--grey);margin-top:12px;}

/* footer */
.footer{position:relative;background:var(--dark);border-top:3px solid var(--red);padding:120px var(--gutter) 90px;overflow:hidden;}
.footer .watermark{position:absolute;left:var(--gutter);bottom:-40px;font-weight:800;font-size:300px;letter-spacing:-8px;color:rgba(255,255,255,.04);pointer-events:none;line-height:1;}
.footer .fcontent{position:relative;display:flex;justify-content:space-between;align-items:flex-start;}
.footer .role{font-family:'Roboto';font-weight:700;font-size:12px;letter-spacing:2px;color:var(--red);}
.footer .name{font-weight:800;font-size:46px;line-height:52px;letter-spacing:-1px;color:#fff;margin-top:8px;}
.footer .fmeta{font-weight:500;font-size:15px;color:#8c8c8c;margin-top:18px;}
.footer .fright{text-align:right;}
.footer .fright .c1{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5);}
.footer .fright .c2{font-weight:500;font-size:15px;color:#fff;margin-top:8px;}
.footer .fright .c3{font-weight:400;font-size:14px;color:#8c8c8c;margin-top:6px;}

/* ============================================================
   PROCESS DEEP-DIVE — components for the real-artifact sections
   ============================================================ */

/* --- survey method pills --- */
.method{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;}
.method .m{flex:1;min-width:240px;background:#fff;border:1px solid rgba(0,0,0,.1);border-top:3px solid var(--red);border-radius:12px;padding:26px 28px;}
.sec.dark .method .m{background:var(--card-dark);border-color:rgba(255,255,255,.08);border-top-color:var(--red);}
.method .m .tag{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.method .m .big{font-weight:800;font-size:40px;letter-spacing:-1px;color:var(--ink);margin:8px 0 4px;}
.sec.dark .method .m .big{color:#fff;}
.method .m p{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);}
.sec.dark .method .m p{color:var(--mute);}

/* --- horizontal bar charts (rebuilt from real survey data) --- */
.chart{display:flex;flex-direction:column;gap:10px;}
.chart .crow{display:flex;align-items:center;gap:16px;}
.chart .clab{flex:0 0 220px;font-weight:500;font-size:14px;line-height:18px;color:var(--ink);text-align:right;}
.sec.dark .chart .clab{color:#D9D9D9;}
.chart .ctrack{flex:1;height:26px;background:rgba(0,0,0,.05);border-radius:6px;overflow:hidden;position:relative;}
.sec.dark .chart .ctrack{background:rgba(255,255,255,.06);}
.chart .cbar{height:100%;background:var(--red);border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;min-width:30px;
  color:#fff;font-weight:700;font-size:12px;font-family:'Roboto';transition:width .9s cubic-bezier(.2,.7,.2,1);}
.chart .cbar.muted{background:#C9C9C9;color:#5A5A5A;}
.sec.dark .chart .cbar.muted{background:#4a4a4a;color:#cfcfcf;}
.chart .cbar.pos{background:#2E8554;}
.chartnote{font-weight:400;font-size:13px;color:var(--grey);margin-top:14px;}
.sec.dark .chartnote{color:var(--mute);}

/* compact 2-up chart grid */
.chartgrid{display:flex;gap:48px;flex-wrap:wrap;}
.chartgrid .cg{flex:1;min-width:320px;}
.chartgrid .cg .chart .clab{flex-basis:120px;}
.chartgrid .cg .cgt{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:4px;}
.sec.dark .chartgrid .cg .cgt{color:#fff;}
.chartgrid .cg .cgs{font-weight:400;font-size:13px;color:var(--grey);margin-bottom:18px;}
.sec.dark .chartgrid .cg .cgs{color:var(--mute);}

/* --- artifact frame (workshop deck pages, zoomable via lightbox) --- */
.artifact{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.07);}
.sec.dark .artifact{background:#0f0f0f;border-color:rgba(255,255,255,.1);}
/* all workshop-deck slides are exactly 16:9 — reserve space so lazy-load never shifts anchors */
.artifact img{width:100%;display:block;aspect-ratio:16/9;}
.artboard img{width:100%;aspect-ratio:4200/2415;}
/* reserve space for the remaining content images so anchors stay accurate under lazy-load */
img[src$="ds-components.png"]{aspect-ratio:2960/2426;}
img[src$="states.png"]{aspect-ratio:2960/1277;}
.artgrid{display:flex;gap:24px;flex-wrap:wrap;}
.artgrid .artifact{flex:1;min-width:300px;}
.artcap{display:flex;align-items:baseline;gap:12px;margin-top:14px;}
.artcap .n{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;color:var(--red);text-transform:uppercase;flex:none;}
.artcap p{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);}
.sec.dark .artcap p{color:var(--mute);}
.zoomtag{display:inline-flex;align-items:center;gap:6px;font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--red);text-transform:uppercase;margin-top:12px;}

/* --- step list (workflow walk-through) --- */
.steps{counter-reset:step;display:flex;flex-direction:column;gap:0;}
.steps .step{display:flex;gap:22px;padding:22px 0;border-top:1px solid rgba(0,0,0,.08);}
.sec.dark .steps .step{border-top-color:rgba(255,255,255,.08);}
.steps .step:first-child{border-top:none;}
.steps .step .si{counter-increment:step;flex:none;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;
  font-family:'Roboto';font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;}
.steps .step .si::before{content:counter(step,decimal-leading-zero);}
.steps .step .sb h4{font-weight:600;font-size:18px;color:var(--ink);}
.sec.dark .steps .step .sb h4{color:#fff;}
.steps .step .sb p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:6px;}
.sec.dark .steps .step .sb p{color:var(--mute);}

/* --- trade-off cards (decision / options / call) --- */
.tradeoff{background:#fff;border:1px solid rgba(0,0,0,.1);border-left:3px solid var(--red);border-radius:12px;padding:28px 30px;}
.sec.dark .tradeoff{background:var(--card-dark);border-color:rgba(255,255,255,.08);border-left-color:var(--red);}
.tradeoff .tq{font-weight:600;font-size:19px;line-height:26px;color:var(--ink);}
.sec.dark .tradeoff .tq{color:#fff;}
.tradeoff .opts{display:flex;gap:20px;margin:18px 0;flex-wrap:wrap;}
.tradeoff .opt{flex:1;min-width:200px;background:var(--light);border-radius:8px;padding:16px 18px;}
.sec.dark .tradeoff .opt{background:rgba(255,255,255,.04);}
.tradeoff .opt .ol{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--grey);text-transform:uppercase;}
.tradeoff .opt p{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:6px;}
.sec.dark .tradeoff .opt p{color:var(--mute);}
.tradeoff .call{font-weight:500;font-size:15px;line-height:23px;color:var(--ink);}
.sec.dark .tradeoff .call{color:#D9D9D9;}
.tradeoff .call b{color:var(--red);}

/* --- device frames for clean extracted app screens --- */
.phones{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.phones.center{justify-content:center;}
.device{flex:0 0 auto;width:230px;}
.device .scr{border-radius:26px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 18px 44px rgba(13,5,5,.16);}
.sec.dark .device .scr{border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(0,0,0,.5);}
.device .scr img{display:block;width:100%;}
.device.framed .scr{border:none;background:transparent;box-shadow:none;border-radius:0;}
.device.framed .scr img{filter:drop-shadow(0 16px 30px rgba(0,0,0,.22));}
.device .dcap{font-weight:500;font-size:13px;line-height:19px;color:var(--grey);margin-top:16px;}
.sec.dark .device .dcap{color:var(--mute);}
.device .dcap .dn{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--red);display:block;margin-bottom:5px;}

/* before / after pairs */
.ba{display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start;}
.ba .baside{flex:1;min-width:300px;}
.ba .balabel{font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.ba .balabel.before{color:var(--grey);}
.ba .balabel.after{color:var(--red);}
.ba .balabel::before{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;}
.ba .phones{justify-content:flex-start;}

/* --- open-question / honest-uncertainty callout --- */
.openq{background:#FFF5F5;border:1px dashed rgba(230,0,0,.4);border-radius:12px;padding:22px 26px;}
.sec.dark .openq{background:rgba(230,0,0,.08);border-color:rgba(230,0,0,.5);}
.openq .ql{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.openq p{font-weight:400;font-size:15px;line-height:23px;color:var(--ink);margin-top:8px;}
.sec.dark .openq p{color:#D9D9D9;}

/* ============================================================
   VISUAL POLISH — micro-interaction & craft specimens
   ============================================================ */

/* live component state matrix — the primary button, fully specified */
.statematrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.smcell{background:var(--card-dark);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:32px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:22px;}
.smbtn{font-family:'Work Sans';font-weight:600;font-size:14px;padding:12px 24px;border-radius:24px;border:none;background:var(--red);color:#fff;cursor:default;}
.smbtn.demo-hover{background:#ff1f1f;box-shadow:0 8px 22px rgba(230,0,0,.5);transform:translateY(-2px);}
.smbtn.demo-pressed{background:#b30000;transform:translateY(1px) scale(.97);}
.smbtn.demo-focus{outline:3px solid rgba(255,255,255,.6);outline-offset:3px;}
.smbtn.demo-disabled{background:#3a3a3a;color:#7a7a7a;}
.smcell .sml{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;}

/* pixel-level specimens — elevation, radius, spacing scales */
.specrow{display:flex;gap:24px;flex-wrap:wrap;}
.speccol{flex:1;min-width:280px;background:var(--card-dark);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px 30px;}
.speccol .sl{font-family:'Roboto';font-weight:700;font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;}
.speccol p{font-weight:400;font-size:14px;line-height:21px;color:var(--mute);margin-top:22px;}
.elevrow,.radrow,.spacerow{display:flex;gap:18px;align-items:flex-end;margin-top:24px;height:64px;}
.elev{width:56px;height:56px;border-radius:12px;background:#2a2a2a;}
.elev.e1{box-shadow:0 2px 6px rgba(0,0,0,.4);}
.elev.e2{box-shadow:0 8px 20px rgba(0,0,0,.5);}
.elev.e3{box-shadow:0 18px 40px rgba(0,0,0,.6);}
.rad{width:56px;height:56px;background:var(--red);}
.rad.r1{border-radius:8px;} .rad.r2{border-radius:12px;} .rad.r3{border-radius:26px;}
.spacerow .sp{align-self:flex-end;background:var(--red);border-radius:3px;width:22px;}
.sp.s4{height:8px;} .sp.s8{height:16px;} .sp.s16{height:32px;} .sp.s24{height:48px;}

/* spacing helpers */
.mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;} .mt48{margin-top:48px;} .mt56{margin-top:56px;} .mt64{margin-top:64px;}

/* ---------- Zoomable images + lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(8,5,5,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s;
  padding:40px;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:transform .15s ease-out;
  transform-origin:center center;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
.lightbox img.zoomed{max-width:none;max-height:none;}
.lb-close{
  position:absolute;top:24px;right:28px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.lb-close:hover{background:var(--red);border-color:var(--red);}
.lb-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:'Roboto';font-weight:700;font-size:11px;letter-spacing:2px;
  color:rgba(255,255,255,.55);text-transform:uppercase;pointer-events:none;
}

/* ---------- Scroll-reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
}

/* ============ Responsive ============ */
@media (max-width:1180px){
  .hero{flex-direction:column;align-items:flex-start;}
  .hero .left{flex:none;max-width:none;}
  .hero .right{width:100%;}
  .cols2{flex-direction:column;}
  .facts{flex:none;width:100%;}
  .row,.clusters,.navpills,.featgrid .frow,.statline,.panels,.grid2 .gr,.statband,.insight,.dirgrid .drow{flex-wrap:wrap;}
  .insight .q{flex:1 1 100%;}
  .dir-device{flex:none;width:100%;}
  .trip{flex-direction:column;}
  .trip .cell+.cell{border-left:none;border-top:1px solid rgba(0,0,0,.08);}
}
@media (max-width:760px){
  .sec{padding:72px 24px 64px;}
  .hdr{gap:20px;margin-bottom:40px;}
  .hdr .num{font-size:72px;line-height:72px;letter-spacing:-3px;}
  .hdr .title{font-size:34px;line-height:40px;}
  .hero .left h1{font-size:54px;line-height:58px;}
  .pull p{font-size:30px;line-height:40px;}
  .row,.clusters,.navpills,.statline,.panels,.statband{flex-direction:column;}
  .statband{gap:24px;}
  .objective{flex-direction:column;align-items:flex-start;gap:20px;}
  .objective .od{display:none;}
  .callout{flex-direction:column;align-items:flex-start;gap:16px;}
  .callout .od{display:none;}
  .footer .fcontent{flex-direction:column;gap:32px;}
  .footer .fright{text-align:left;}
  .footer .watermark{font-size:150px;}

  .navtoggle{display:flex;}
  .topbar nav{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--dark);border-bottom:3px solid var(--red);
    padding:8px var(--gutter) 20px;
    transform:translateY(-130%);transition:transform .3s ease;
    box-shadow:0 20px 40px rgba(0,0,0,.4);
  }
  .topbar nav.open{transform:translateY(0);}
  .topbar nav a{padding:16px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;}
  .topbar nav a.active::after{display:none;}
  .lb-hint{display:none;}
}

/* exact aspect-ratios per screen — reserve space so lazy-load never shifts anchors */
img[src$="hifi_p03_1.png"]{aspect-ratio:581/1184;}
img[src$="hifi_p03_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p03_3.png"]{aspect-ratio:581/1185;}
img[src$="hifi_p03_4.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p04_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p04_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p04_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p05_1.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p05_2.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p05_3.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p06_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p06_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p06_3.png"]{aspect-ratio:580/1468;}
img[src$="hifi_p07_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p07_2.png"]{aspect-ratio:581/1185;}
img[src$="hifi_p07_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p07_4.png"]{aspect-ratio:324/1590;}
img[src$="hifi_p08_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p08_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p08_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p09_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p09_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p09_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p09_4.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p10_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p10_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p10_3.png"]{aspect-ratio:452/1524;}
img[src$="hifi_p11_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p11_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p12_1.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p12_2.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p13_1.png"]{aspect-ratio:580/1184;}
img[src$="hifi_p14_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p14_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p14_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p15_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p15_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p15_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p16_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p17_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p17_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p17_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p18_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p18_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p19_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p20_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p20_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p20_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p21_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p22_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p22_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p22_3.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p23_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p24_1.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p24_2.png"]{aspect-ratio:580/1185;}
img[src$="hifi_p25_1.png"]{aspect-ratio:580/1185;}
img[src$="lofi_p03_1.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p03_2.png"]{aspect-ratio:420/1485;}
img[src$="lofi_p04_1.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p04_2.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p06_1.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p06_2.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p07_1.png"]{aspect-ratio:628/1229;}
img[src$="lofi_p08_1.png"]{aspect-ratio:628/1229;}
img[src$="uxui_p05_1.png"]{aspect-ratio:493/765;}
img[src$="uxui_p05_2.png"]{aspect-ratio:492/766;}
img[src$="uxui_p10_1.png"]{aspect-ratio:492/766;}
img[src$="uxui_p10_2.png"]{aspect-ratio:493/766;}
img[src$="uxui_p12_1.png"]{aspect-ratio:433/887;}
img[src$="uxui_p12_2.png"]{aspect-ratio:433/887;}
img[src$="uxui_p12_3.png"]{aspect-ratio:433/888;}
img[src$="uxui_p13_1.png"]{aspect-ratio:377/809;}
img[src$="uxui_p13_2.png"]{aspect-ratio:385/809;}
img[src$="uxui_p14_1.png"]{aspect-ratio:314/749;}
img[src$="uxui_p14_2.png"]{aspect-ratio:262/1518;}
img[src$="uxui_p15_1.png"]{aspect-ratio:432/888;}
img[src$="uxui_p15_2.png"]{aspect-ratio:438/809;}
img[src$="uxui_p15_3.png"]{aspect-ratio:437/809;}
img[src$="uxui_p20_1.png"]{aspect-ratio:433/887;}
img[src$="uxui_p20_2.png"]{aspect-ratio:433/887;}

/* aspect-ratios for composite renders — keep anchors accurate under lazy-load */
img[src$="app-screens.png"]{aspect-ratio:2960/3012;}
img[src$="communication.png"]{aspect-ratio:2960/1254;}
img[src$="ds-components.png"]{aspect-ratio:2960/2426;}
img[src$="flow-simplified.png"]{aspect-ratio:2960/1320;}
img[src$="hero-cluster.png"]{aspect-ratio:1800/1760;}
img[src$="installments.png"]{aspect-ratio:2960/1264;}
img[src$="menu-device.png"]{aspect-ratio:600/1498;}
img[src$="parking.png"]{aspect-ratio:2960/1272;}
img[src$="payslip.png"]{aspect-ratio:2960/1272;}
img[src$="solfa.png"]{aspect-ratio:2960/1288;}
img[src$="states.png"]{aspect-ratio:2960/1277;}
img[src$="user-flow.png"]{aspect-ratio:3400/1955;}
img[src$="vendors.png"]{aspect-ratio:2960/1288;}
img[src$="wellbeing.png"]{aspect-ratio:2960/1216;}
img[src$="user-flow-full.png"]{aspect-ratio:4200/2415;}

/* flow deep-dive screens — reserve aspect-ratio for anchor accuracy */
img[src$="flow/inst-1-browse.png"]{aspect-ratio:600/1200;}
img[src$="flow/inst-2-detail.png"]{aspect-ratio:436/896;}
img[src$="flow/inst-3-request.png"]{aspect-ratio:436/896;}
img[src$="flow/inst-4-history.png"]{aspect-ratio:436/896;}
img[src$="flow/park-1-entry.png"]{aspect-ratio:520/1080;}
img[src$="flow/park-2-type.png"]{aspect-ratio:440/904;}
img[src$="flow/park-3-levels.png"]{aspect-ratio:440/904;}
img[src$="flow/park-4-maps.png"]{aspect-ratio:440/904;}
img[src$="flow/park-5-booked.png"]{aspect-ratio:500/1028;}
img[src$="flow/inst-5-wishlist.png"]{aspect-ratio:500/1028;}
img[src$="dark/dk-dash.png"]{aspect-ratio:500/1028;}
img[src$="dark/dk-park.png"]{aspect-ratio:500/1028;}
img[src$="dark/dk-pay.png"]{aspect-ratio:500/1028;}
img[src$="dark/dk-mood.png"]{aspect-ratio:500/1028;}