/* AWEN · reusable case-study performance infographics */
.viz-section{padding-top:clamp(48px,6vw,76px)}
.viz-board{
  --viz-a:var(--blue);--viz-b:var(--green);
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  border:1px solid rgba(143,214,255,.18);border-radius:28px;
  padding:clamp(28px,4.5vw,56px);
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--viz-a) 28%,transparent),transparent 32%),
    radial-gradient(circle at 2% 110%,color-mix(in srgb,var(--viz-b) 22%,transparent),transparent 34%),
    linear-gradient(145deg,#080d1a 0%,#0b1426 55%,#081421 100%);
  box-shadow:0 42px 90px -44px rgba(8,13,26,.72),0 18px 40px -26px color-mix(in srgb,var(--viz-a) 65%,transparent)
}
.viz-board::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 72%);mask-image:linear-gradient(135deg,#000,transparent 72%)}
.viz-board::after{content:"";position:absolute;z-index:-1;width:420px;aspect-ratio:1;border-radius:50%;right:-210px;bottom:-270px;background:radial-gradient(circle,color-mix(in srgb,var(--viz-b) 34%,transparent),transparent 66%);filter:blur(14px)}
.viz-scan{position:absolute;z-index:-1;top:-30%;bottom:-30%;left:-16%;width:18%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(143,214,255,.07),transparent);animation:vizScan 9s linear infinite;pointer-events:none}
@keyframes vizScan{to{transform:translateX(760%) skewX(-18deg)}}
.viz-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:32px}
.viz-kicker{display:flex;align-items:center;gap:10px;color:var(--sky);font-size:10px;line-height:1;letter-spacing:.22em;text-transform:uppercase;font-weight:800;margin-bottom:13px}
.viz-kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--viz-a),var(--viz-b));box-shadow:0 0 18px color-mix(in srgb,var(--viz-a) 80%,transparent)}
.viz-title{font-family:var(--display2);font-size:clamp(25px,3.5vw,43px);line-height:1.02;text-transform:uppercase;letter-spacing:-.025em;max-width:19ch}
.viz-intro{max-width:62ch;margin-top:12px;color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.62}
.viz-stamp{min-width:124px;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 15px;background:rgba(255,255,255,.045);backdrop-filter:blur(10px);text-align:right}
.viz-stamp strong{display:block;font-family:var(--display2);font-size:19px;line-height:1;color:#fff}
.viz-stamp span{display:block;margin-top:7px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.viz-panel{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.05)}
.viz-panel--spaced{margin-top:20px}
.viz-panel-label{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;color:rgba(255,255,255,.48);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:800}
.viz-panel-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(143,214,255,.25),transparent)}
.viz-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:20px;align-items:stretch}

/* Signal chain */
.viz-chain{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.viz-chain::before,.viz-chain::after{content:"";position:absolute;left:12.5%;right:12.5%;top:14px;height:2px;border-radius:2px}
.viz-chain::before{background:rgba(255,255,255,.1)}
.viz-chain::after{background:linear-gradient(90deg,var(--viz-a),var(--viz-b),var(--teal));box-shadow:0 0 16px color-mix(in srgb,var(--viz-a) 55%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.25s .2s var(--ease)}
.viz-board.in .viz-chain::after{transform:scaleX(1)}
.viz-node{position:relative;z-index:1;min-width:0;text-align:center}
.viz-node__dot{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 13px;border-radius:50%;border:1px solid rgba(143,214,255,.42);background:#0b1426;box-shadow:0 0 0 5px rgba(53,168,223,.07),0 0 22px rgba(53,168,223,.12)}
.viz-node__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--viz-a),var(--viz-b));transform:scale(.4);opacity:.5;transition:transform .45s var(--ease),opacity .45s ease,box-shadow .45s ease}
.viz-board.in .viz-node__dot::after{transform:scale(1);opacity:1;box-shadow:0 0 14px var(--viz-b)}
.viz-node:nth-child(2) .viz-node__dot::after{transition-delay:.25s}.viz-node:nth-child(3) .viz-node__dot::after{transition-delay:.5s}.viz-node:nth-child(4) .viz-node__dot::after{transition-delay:.75s}
.viz-node b{display:block;color:#fff;font-size:12px;line-height:1.3}
.viz-node small{display:block;margin-top:6px;color:rgba(255,255,255,.42);font-size:9.5px;line-height:1.35}

/* Exact-value KPI cells; bars are decorative signal pulses, not a shared scale. */
.viz-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.viz-kpis--five{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px}
.viz-kpis--scale{grid-template-columns:repeat(2,minmax(0,1fr))}
.viz-kpis--scale .viz-kpi:last-child{grid-column:1/-1;min-height:112px}
.viz-kpis--scale .viz-kpi__value{font-size:clamp(22px,2.2vw,30px)}
.viz-kpi{position:relative;overflow:hidden;min-width:0;min-height:132px;border:1px solid rgba(255,255,255,.1);border-radius:17px;padding:17px;background:rgba(255,255,255,.045)}
.viz-kpi::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--viz-a),var(--viz-b),transparent)}
.viz-kpi__value{font-family:var(--display2);font-size:clamp(23px,2.7vw,35px);line-height:1;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.viz-kpi__value.is-up{color:var(--lime);text-shadow:0 0 26px rgba(101,201,129,.25)}
.viz-kpi__value.is-down{color:var(--sky);text-shadow:0 0 26px rgba(53,168,223,.25)}
.viz-kpi__label{display:block;margin-top:8px;color:rgba(255,255,255,.55);font-size:10px;line-height:1.35;font-weight:600}
.viz-spark{position:absolute;left:17px;right:17px;bottom:14px;height:18px;display:flex;align-items:flex-end;gap:4px;opacity:.8}
.viz-spark i{flex:1;height:var(--h);min-height:3px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--viz-b),color-mix(in srgb,var(--viz-a) 65%,transparent));transform:scaleY(.08);transform-origin:bottom;transition:transform .65s var(--ease)}
.viz-board.in .viz-spark i{transform:scaleY(1)}
.viz-spark i:nth-child(2){transition-delay:.08s}.viz-spark i:nth-child(3){transition-delay:.16s}.viz-spark i:nth-child(4){transition-delay:.24s}.viz-spark i:nth-child(5){transition-delay:.32s}

/* Diagnostic snapshot */
.viz-diagnostic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.viz-datum{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px;background:rgba(255,255,255,.045)}
.viz-datum::after{content:"";position:absolute;width:90px;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--tone,var(--viz-a)) 36%,transparent);border-radius:50%;right:-42px;top:-44px;box-shadow:0 0 38px color-mix(in srgb,var(--tone,var(--viz-a)) 20%,transparent)}
.viz-datum strong{display:block;font-family:var(--display2);font-size:clamp(28px,3.4vw,42px);line-height:1;color:var(--tone,var(--sky));letter-spacing:-.035em}
.viz-datum span{display:block;max-width:19ch;margin-top:9px;color:rgba(255,255,255,.58);font-size:10.5px;line-height:1.4;font-weight:600}
.viz-datum em{display:inline-block;margin-top:12px;color:rgba(255,255,255,.38);font-size:8.5px;line-height:1;letter-spacing:.13em;text-transform:uppercase;font-style:normal;font-weight:800}

/* Indexed before/after comparison */
.viz-index{display:flex;flex-direction:column;gap:15px}
.viz-index__row{display:grid;grid-template-columns:74px minmax(0,1fr) 72px;gap:12px;align-items:center}
.viz-index__name{color:rgba(255,255,255,.62);font-size:10px;font-weight:700}
.viz-index__track{position:relative;height:18px;border-radius:100px;background:rgba(255,255,255,.07);overflow:visible}
.viz-index__track::after{content:"";position:absolute;z-index:2;left:83.333%;top:-5px;bottom:-5px;width:1px;background:rgba(255,255,255,.4)}
.viz-index__bar{display:block;height:100%;width:var(--fill);border-radius:inherit;background:linear-gradient(90deg,var(--viz-a),var(--viz-b));box-shadow:0 0 20px color-mix(in srgb,var(--viz-a) 32%,transparent);transform:scaleX(.06);transform-origin:left;transition:transform 1s var(--ease)}
.viz-index__row:nth-child(2) .viz-index__bar{transition-delay:.18s}.viz-index__row:nth-child(3) .viz-index__bar{transition-delay:.36s}
.viz-board.in .viz-index__bar{transform:scaleX(1)}
.viz-index__value{font-family:var(--display2);font-size:16px;text-align:right;color:#fff;white-space:nowrap}
.viz-index__note{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.42);font-size:9.5px;line-height:1.45}

/* Readout strip */
.viz-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.1)}
.viz-proof__item{min-width:0;padding:19px 21px;background:rgba(8,13,26,.9)}
.viz-proof__item strong{display:block;font-family:var(--display2);font-size:clamp(20px,2.4vw,31px);line-height:1;color:var(--lime);letter-spacing:-.025em}
.viz-proof__item strong.is-blue{color:var(--sky)}
.viz-proof__item span{display:block;margin-top:7px;color:rgba(255,255,255,.48);font-size:9.5px;line-height:1.35;font-weight:650}
.viz-proof__item small{display:block;margin-top:5px;color:rgba(255,255,255,.3);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.viz-caption{margin-top:17px;color:rgba(255,255,255,.34);font-size:9px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.resband[data-rv],.viz-board[data-rv]{filter:none}

@media(max-width:920px){
  .viz-layout{grid-template-columns:1fr}
  .viz-kpis--five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){.viz-diagnostic{grid-template-columns:1fr}}
@media(max-width:640px){
  /* Shared mobile card system for all case-study pages. */
  .cta__in h2{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:clamp(29px,8.4vw,34px);line-height:1}
  .cta__in .hl{display:block;white-space:nowrap;line-height:1.05;padding:.1em .22em}
  .hero__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero__meta div{width:100%;min-width:0;padding:12px 13px;border-radius:16px;overflow:hidden}
  .hero__meta div:first-child{grid-column:1/-1}
  .hero__meta b{font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
  .hero__stats{gap:10px;margin-top:28px;padding-top:0;border-top:0}
  .hstat{display:flex;min-height:92px;flex-direction:column;justify-content:center;text-align:center;padding:14px 13px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(8,13,26,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(10px)}
  .hero__stats .hstat:last-child{grid-column:1/-1;min-height:82px}
  .hstat .l{font-size:10px}
  .grid3{gap:16px!important}
  .panel{padding:20px;border-radius:20px;overflow:hidden}
  .kv{display:grid;grid-template-columns:minmax(74px,.72fr) minmax(0,1.28fr);align-items:start;gap:12px}
  .kv b{min-width:0;line-height:1.35;overflow-wrap:anywhere}
  .proc{border-radius:20px}
  .proc__s{padding:20px;border-left:0;border-top:1px solid var(--line)}
  .proc__s:first-child{border-top:0}
  .cards{gap:14px}
  .ocard{padding:20px;border-radius:20px}
  .built,.impact,.scal,.scal.scal--h{border-radius:22px}
  .scal--h .scal__box{border-radius:16px}
  .viz-section{padding-top:42px}
  .viz-board{border-radius:24px;padding:24px 19px}
  .viz-head{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
  .viz-title{font-size:28px}
  .viz-stamp{min-width:0;width:max-content;text-align:left}
  .viz-panel{border-radius:18px;padding:20px 16px}
  .viz-kpis,.viz-kpis--five,.viz-kpis--scale,.viz-diagnostic,.viz-proof{grid-template-columns:1fr}
  .viz-kpis--scale .viz-kpi:last-child{grid-column:auto}
  .viz-kpi{min-height:116px}
  .viz-chain{grid-template-columns:1fr;gap:16px}
  .viz-chain::before,.viz-chain::after{left:13px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .viz-chain::after{transform:scaleY(0);transform-origin:top}
  .viz-board.in .viz-chain::after{transform:scaleY(1)}
  .viz-node{display:grid;grid-template-columns:28px 1fr;column-gap:13px;text-align:left;align-items:center}
  .viz-node__dot{grid-row:1 / span 2;margin:0}
  .viz-node small{margin-top:3px}
  .viz-index__row{grid-template-columns:58px minmax(0,1fr) 62px;gap:8px}
  .viz-index__value{font-size:14px}
}
@media(max-width:360px){
  .hero__meta{grid-template-columns:1fr}
  .hero__meta div:first-child{grid-column:auto}
  .panel,.ocard{padding:18px}
  .kv{grid-template-columns:1fr;gap:5px}
  .kv b{text-align:left}
}
@media(hover:none),(pointer:coarse){
  .panel:hover,.ocard:hover,.chip:hover,.btn--g:hover{transform:none}
  .panel:hover,.ocard:hover{box-shadow:var(--shadow)}
  .ocard:hover,.chip:hover{border-color:var(--line)}
  .panel:hover::after,.ocard:hover::after{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .viz-scan{display:none}
  .viz-chain::after,.viz-index__bar,.viz-node__dot::after,.viz-spark i{transition:none!important;transform:none!important}
}