/* =========================================================
   WeWave — service detail pages
   Self-contained: these are ordinary scrolling pages, so they
   deliberately don't share the fixed-stage stylesheet.
   ========================================================= */

:root{
  --primary:#1F6B45;
  --dark:#123C2A;
  --accent:#2E8B57;
  --light-green:#DDEFE5;
  --mint:#F1F8F4;
  --warm:#FAF8F2;
  --text:#17231D;
  --text-2:#66736B;
  --white:#FFFFFF;
  --deep:#0C2A1C;

  --display:'Bebas Neue',Impact,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(22px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--warm);}
body{
  font-family:var(--sans);background:var(--warm);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
li{list-style:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad);}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,242,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(23,35,29,.08);
}
.top-in{
  max-width:1080px;margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:32px;height:24px;flex:none;background-color:var(--primary);
  -webkit-mask:url(../assets/wewave-mark.png) center/contain no-repeat;
  mask:url(../assets/wewave-mark.png) center/contain no-repeat;
}
.brand-word{font-family:var(--display);font-size:21px;letter-spacing:.04em;}
.back{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);transition:color .3s;
}
.back:hover{color:var(--primary);}
.back::before{content:'← ';}

/* ---------- hero ---------- */
.hero{
  background:var(--deep);color:var(--white);
  padding:clamp(56px,9vw,110px) 0 clamp(44px,7vw,86px);
  position:relative;overflow:hidden;
}
.hero .wrap{position:relative;z-index:1;}
.hero-art{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(340px,40vw);height:auto;color:var(--accent);opacity:.12;pointer-events:none;
}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(38px,7vw,84px);line-height:.95;margin-bottom:20px;text-wrap:balance;
}
.lead{font-size:clamp(16px,1.6vw,20px);line-height:1.62;max-width:60ch;color:rgba(255,255,255,.82);}

/* ---------- sections ---------- */
section{padding:clamp(48px,7vw,92px) 0;}
.sec-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--primary);margin-bottom:22px;
}
h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(27px,4vw,46px);line-height:1;margin-bottom:26px;
}

.includes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;}
.includes li{
  position:relative;padding-left:24px;
  font-size:15.5px;line-height:1.55;
}
.includes li::before{
  content:'';position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--primary);
}

/* ---------- case study ---------- */
.case{background:var(--mint);}
.case-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.case-client{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--primary);border:1px solid rgba(31,107,69,.3);border-radius:999px;padding:5px 13px;
}
.case-window{font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.06em;}
.case-note{font-size:15.5px;line-height:1.65;max-width:62ch;margin-bottom:clamp(24px,3.5vw,38px);color:var(--text);}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:clamp(22px,3vw,34px);}
.stat{
  background:var(--white);border:1px solid rgba(23,35,29,.08);border-radius:14px;
  padding:clamp(16px,2vw,24px);
}
.stat-v{
  font-family:var(--display);font-size:clamp(28px,3.6vw,44px);line-height:1;
  color:var(--primary);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.stat-k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);margin-top:9px;
}
.stat-sub{font-size:11.5px;color:var(--text-2);margin-top:5px;}

/* screenshot slot — shows a labelled placeholder until an image is dropped in */
.shot{
  border:1px dashed rgba(31,107,69,.4);border-radius:16px;
  background:var(--white);
  min-height:190px;display:flex;align-items:center;justify-content:center;
  padding:22px;text-align:center;overflow:hidden;
}
.shot img{border-radius:10px;}
.shot-hint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);line-height:1.9;
}

/* ---------- portfolio (web development) ---------- */
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.folio a{
  display:flex;flex-direction:column;gap:12px;
  background:var(--white);border:1px solid rgba(23,35,29,.09);border-radius:16px;
  padding:clamp(18px,2vw,26px);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease);
}
.folio a:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 18px 36px rgba(23,35,29,.1);}
.folio-name{font-family:var(--display);font-size:clamp(20px,2.2vw,27px);line-height:1;letter-spacing:.02em;}
.folio-kind{font-size:13px;color:var(--text-2);line-height:1.5;}
.folio-url{
  margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--primary);word-break:break-all;
}
.folio-url::after{content:' ↗';}

/* ---------- cta + footer ---------- */
.cta{background:var(--deep);color:var(--white);text-align:center;}
.cta h2{margin-bottom:16px;}
.cta p{color:rgba(255,255,255,.75);max-width:48ch;margin:0 auto 30px;line-height:1.6;}
.btn{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 34px;border-radius:999px;
  background:var(--accent);color:var(--white);border:1px solid var(--accent);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(46,139,87,.34);}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25);margin-left:10px;}
.btn.ghost:hover{border-color:var(--white);box-shadow:none;}

.foot{background:#0a2318;color:rgba(255,255,255,.55);padding:26px 0;}
.foot-in{
  max-width:1080px;margin:0 auto;padding:0 var(--pad);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.foot a:hover{color:var(--white);}

/* ---------- other services ---------- */
.more-services{display:flex;flex-wrap:wrap;gap:9px;}
.more-services a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  border:1px solid rgba(23,35,29,.16);border-radius:999px;padding:9px 16px;
  color:var(--text-2);transition:border-color .3s,color .3s,background-color .3s;
}
.more-services a:hover{border-color:var(--primary);color:var(--white);background:var(--primary);}

@media (max-width:820px){
  .includes{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .folio{grid-template-columns:1fr;}
  .hero-art{opacity:.08;right:-70px;}
  .btn.ghost{margin-left:0;margin-top:10px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .folio a,.btn{transition:none;}
}

/* =========================================================
   Circular work showcase  (js/showcase.js)

   The wheel sits on a dark band of its own. That is not decoration:
   luminous separators, glass segments and a glow on the active wedge
   all need darkness to read against, and the page already ends on a
   deep-green .cta, so a dark band here belongs to the design rather
   than fighting it.

   Every colour below is scoped to .showcase-sec. Nothing here changes
   the palette of any other section.
   ========================================================= */

.showcase-sec{
  --sc-stage:#0A2318;          /* a shade under --deep, so the band has depth */
  --sc-emerald:#2E8B57;
  --sc-bright:#3FD18B;         /* the highlight, used sparingly */
  --sc-mint:#9FE6C4;
  --sc-teal:#2BB39A;
  --sc-line:rgba(159,230,196,.17);

  position:relative;overflow:hidden;
  background:var(--sc-stage);color:var(--white);
}
/* two soft lights behind the wheel, so the band is never flat */
.showcase-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 22% 18%,rgba(46,139,87,.30),transparent 70%),
    radial-gradient(46% 46% at 86% 88%,rgba(43,179,154,.18),transparent 72%);
}
.showcase-sec > .wrap{position:relative;}
.showcase-sec .sec-label{color:var(--sc-mint);}
.showcase-sec h2{color:var(--white);}
.showcase-intro{
  color:rgba(255,255,255,.68);line-height:1.65;max-width:56ch;
  margin-bottom:clamp(26px,3.4vw,44px);
}

/* `hidden` only wins if nothing else sets display — the same guard the
   booking modal and the analytics gate both needed. */
.showcase-sec[hidden],.showcase[hidden],.sc-panel[hidden],.sc-ph[hidden],
.sc-frame[hidden],.sc-load[hidden],.sc-kind[hidden]{display:none!important;}

/* The plain card grid is the no-JavaScript fallback. Once the wheel is
   known to have built, the whole section goes — hiding only the grid left
   the section's padding behind as an empty band. */
.is-replaced{display:none;}

.showcase{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:clamp(24px,3.6vw,52px);align-items:center;
}

/* ---------- the wheel ---------- */
.sc-wheel{
  position:relative;width:100%;max-width:490px;margin-inline:auto;
  aspect-ratio:1;              /* space reserved before paint — no layout shift */
}
.sc-svg{width:100%;height:100%;display:block;overflow:visible;}

/* rings: the depth comes from these, not from a shadow on every wedge */
.sc-ring{fill:none;}
.sc-ring-halo{stroke:rgba(63,209,139,.10);stroke-width:16;}
.sc-ring-out{stroke:var(--sc-line);stroke-width:1;}
.sc-ring-edge{stroke:rgba(255,255,255,.07);stroke-width:1;}
.sc-ring-in{stroke:rgba(159,230,196,.22);stroke-width:1;}

/* the slow light that travels the outer ring */
.sc-sweep{
  fill:none;stroke:url(#scSweep);stroke-width:2.5;stroke-linecap:round;
  transform-box:view-box;transform-origin:200px 200px;
  animation:sc-orbit 16s linear infinite;
}
@keyframes sc-orbit{to{transform:rotate(360deg);}}

.sc-seg{
  transform-box:view-box;transform-origin:200px 200px;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
/* Armed by the script before first paint, lifted when the section scrolls
   into view. Default is visible, so a failure here can never hide the work. */
.showcase.is-armed .sc-seg{opacity:0;transform:scale(.9);}
.showcase.is-armed.in-view .sc-seg{
  opacity:1;transform:scale(1);
  transition-delay:calc(var(--d) * 70ms);
}

.sc-wedge{
  fill:url(#scFace);stroke:var(--sc-line);stroke-width:1;cursor:pointer;
  transition:fill .3s var(--ease),stroke .3s var(--ease);
}
.sc-seg:hover .sc-wedge{fill:url(#scFaceHot);stroke:rgba(159,230,196,.42);}
.sc-seg.is-on .sc-wedge{fill:url(#scFaceOn);stroke:var(--sc-bright);stroke-width:1.4;}
/* the glow rides a wrapper so the wedge's own fill transition stays cheap */
.sc-seg.is-on{filter:drop-shadow(0 0 13px rgba(63,209,139,.38));}
.sc-wedge:focus-visible{outline:none;stroke:var(--white);stroke-width:2.4;}

.sc-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;fill:rgba(255,255,255,.72);pointer-events:none;
  transition:fill .3s var(--ease);
}
.sc-seg:hover .sc-label{fill:var(--sc-mint);}
.sc-seg.is-on .sc-label{fill:var(--white);}

/* ---------- the hub ---------- */
.sc-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40%;aspect-ratio:1;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--white);border:1px solid rgba(159,230,196,.30);
  background:
    radial-gradient(circle at 50% 24%,rgba(63,209,139,.34),transparent 62%),
    linear-gradient(165deg,#15422D 0%,#0C2A1C 58%,#081C12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 26px rgba(0,0,0,.42),
    0 16px 38px rgba(0,0,0,.42),
    0 0 0 7px rgba(63,209,139,.05);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.sc-hub:hover{
  transform:translate(-50%,-50%) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 26px rgba(0,0,0,.4),
    0 20px 46px rgba(0,0,0,.46),
    0 0 0 9px rgba(63,209,139,.09);
}
/* one slow breath of light, nothing that competes with the content */
.sc-hub::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,rgba(63,209,139,.22),transparent 58%);
  opacity:.55;animation:sc-breathe 5.5s ease-in-out infinite;
}
@keyframes sc-breathe{0%,100%{opacity:.4;}50%{opacity:.85;}}
.sc-hub svg{width:21px;height:21px;position:relative;z-index:1;}
.sc-hub-t{
  position:relative;z-index:1;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sc-mint);
}

/* ---------- the preview ---------- */
.sc-panel{
  position:relative;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(159,230,196,.20);border-radius:20px;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  overflow:hidden;backdrop-filter:blur(6px);
  opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sc-panel.is-in{opacity:1;transform:none;}
/* the thread back to the active wedge */
.sc-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--sc-bright),var(--sc-teal),transparent);
  opacity:.85;
}

.sc-bar{
  display:flex;align-items:center;gap:11px;padding:11px 15px;
  background:rgba(0,0,0,.26);border-bottom:1px solid rgba(159,230,196,.15);
}
.sc-dots{display:flex;gap:5px;flex:none;}
.sc-dots i{width:8px;height:8px;border-radius:50%;background:rgba(159,230,196,.28);}
.sc-dots i:first-child{background:rgba(63,209,139,.55);}
.sc-addr{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.sc-view{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:#071710;
}
/* Rendered at desktop width and scaled down, so the preview shows the site's
   desktop layout. --sc-scale is written by the script from the measured
   width: CSS cannot fit a fixed 1280px frame to a fluid box on its own. */
.sc-frame{
  position:absolute;top:0;left:0;border:0;
  width:1280px;height:800px;
  transform:scale(var(--sc-scale,.33));transform-origin:0 0;
  pointer-events:none;                 /* the panel handles hover, not the site */
  opacity:0;transition:opacity .35s var(--ease);
}
.sc-frame.is-on{opacity:1;}

.sc-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sc-ph img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.sc-ph.is-plain{
  flex-direction:column;gap:8px;text-align:center;padding:18px;
  background:linear-gradient(160deg,rgba(46,139,87,.16),rgba(0,0,0,.2));
}
.sc-ph-host{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sc-mint);}
.sc-ph-why{font-size:11.5px;color:rgba(255,255,255,.55);max-width:26ch;line-height:1.5;}

.sc-load{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(7,23,16,.55);backdrop-filter:blur(2px);
}
.sc-spin{
  width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(159,230,196,.2);border-top-color:var(--sc-bright);
  animation:sc-turn .7s linear infinite;
}
@keyframes sc-turn{to{transform:rotate(360deg);}}

.sc-meta{padding:clamp(16px,1.9vw,22px);display:flex;flex-direction:column;gap:6px;}
.sc-name{
  font-family:var(--display);font-size:clamp(22px,2.4vw,29px);
  line-height:1;letter-spacing:.02em;color:var(--white);
}
.sc-kind{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;}
.sc-go{
  margin-top:9px;align-self:flex-start;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc-bright);border-bottom:1px solid rgba(63,209,139,.45);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.sc-go::after{content:' ↗';}
.sc-go:hover{color:var(--white);border-color:var(--white);}

.sc-x{
  position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(0,0,0,.4);border:1px solid rgba(159,230,196,.22);color:rgba(255,255,255,.8);
  transition:background-color .3s,color .3s,border-color .3s;
}
.sc-x:hover{background:var(--sc-bright);border-color:var(--sc-bright);color:#07251A;}
.sc-x svg{width:13px;height:13px;}

/* ---------- narrow ---------- */
@media (max-width:880px){
  .showcase{grid-template-columns:1fr;gap:24px;}
  .sc-wheel{max-width:min(92vw,400px);}
  .sc-panel{max-width:460px;margin-inline:auto;width:100%;}
  .sc-label{font-size:8.5px;letter-spacing:.1em;}
  .sc-hub{width:43%;}
  .sc-hub svg{width:18px;height:18px;}
  .sc-hub-t{font-size:7.5px;letter-spacing:.18em;}
  /* the blur is the most expensive thing here and the least missed */
  .sc-panel,.sc-load{backdrop-filter:none;}
  .sc-ring-halo{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .sc-seg,.sc-panel,.sc-hub,.sc-wedge,.sc-frame,.sc-label{
    transition:none!important;transition-delay:0ms!important;
  }
  .showcase.is-armed .sc-seg{opacity:1;transform:none;}
  .sc-sweep,.sc-hub::after{animation:none;}
  .sc-hub::after{opacity:.5;}
  /* the spinner still turns: it reports state rather than decorating */
  .sc-spin{animation-duration:1.4s;}
}

/* =========================================================
   Case study dashboard  (js/casestudy.js, data in tools/case_data.py)
   Same dark language as the work showcase, so the two read as
   one system rather than two experiments.
   ========================================================= */

.cs{
  --cs-stage:#0A2318;
  --cs-bright:#3FD18B;
  --cs-mint:#9FE6C4;
  position:relative;overflow:hidden;
  background:var(--cs-stage);color:var(--white);
}
.cs::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 50% at 78% 10%,rgba(46,139,87,.28),transparent 70%),
    radial-gradient(45% 45% at 10% 92%,rgba(43,179,154,.16),transparent 72%);
}
.cs > .wrap{position:relative;}
.cs .sec-label{color:var(--cs-mint);}

.cs-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px);}
.cs-head h2{color:var(--white);margin-bottom:0;}
.cs-when{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--cs-mint);border:1px solid rgba(159,230,196,.3);
  border-radius:999px;padding:5px 13px;white-space:nowrap;
}

/* the picker only exists when there is more than one case to pick */
/* One panel per case study, stacked. Each carries its own brand and period,
   so no head can ever caption the wrong figures, and the rule between them is
   what stops three dashboards reading as one very long one. */
/* The gap to the next case study comes from the panel, not from whatever
   happens to end this one -- a panel finishing on the ratio bar used to sit
   36px looser than one finishing on a note. */
.cs-panel > :last-child{margin-bottom:0;}
.cs-panel + .cs-panel{
  margin-top:clamp(44px,5.6vw,78px);
  padding-top:clamp(40px,5vw,68px);
  border-top:1px solid rgba(159,230,196,.17);
}

/* ---------- figures ---------- */
.cs-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin-bottom:clamp(24px,3.2vw,38px);
}
.cs-kpi{
  position:relative;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(159,230,196,.18);border-radius:16px;
  padding:clamp(16px,2vw,23px);
}
/* the figure's mark, top right — present but never competing with the number */
.cs-i{
  position:absolute;top:clamp(14px,1.7vw,19px);right:clamp(14px,1.7vw,19px);
  width:19px;height:19px;color:var(--cs-mint);opacity:.45;
}
.cs-kpi.is-hero .cs-i{width:24px;height:24px;color:var(--cs-bright);opacity:.6;}
/* the headline figure earns more room and more light than the rest */
.cs-kpi.is-hero{
  grid-column:span 2;
  background:linear-gradient(165deg,rgba(63,209,139,.20),rgba(46,139,87,.07));
  border-color:rgba(63,209,139,.42);
}
.cs-kpi.is-derived{background:rgba(255,255,255,.028);border-style:dashed;}
/* a derived figure can still be the headline: Royal Watch's ROAS is divided
   out of the spend and revenue beside it, and without this it would inherit
   the dim derived card and stop reading as the number the panel is about.
   It keeps the hero's light and the derived dashed edge, so it reads as both. */
.cs-kpi.is-derived.is-hero{
  background:linear-gradient(165deg,rgba(63,209,139,.20),rgba(46,139,87,.07));
  border-color:rgba(63,209,139,.42);border-style:dashed;
}

.cs-v{
  font-family:var(--display);font-size:clamp(26px,3.2vw,44px);line-height:1;
  letter-spacing:.01em;color:var(--white);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cs-kpi.is-hero .cs-v{color:var(--cs-bright);font-size:clamp(40px,6vw,76px);}
.cs-u{font-size:.42em;margin-left:.1em;color:var(--cs-mint);letter-spacing:.03em;}
.cs-k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:11px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
/* keep the first line clear of the icon sitting above it */
.cs-kpi .cs-v{padding-right:26px;}
.cs-kpi.is-hero .cs-v{padding-right:34px;}
.cs-tag{
  font-size:8px;letter-spacing:.14em;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(159,230,196,.3);color:var(--cs-mint);
}
.cs-s{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:6px;line-height:1.5;}

/* ---------- spend against return ---------- */
.cs-ratio{
  border:1px solid rgba(159,230,196,.16);border-radius:16px;
  padding:clamp(18px,2.2vw,26px);margin-bottom:clamp(24px,3.2vw,36px);
  background:rgba(0,0,0,.16);
}
.cs-row{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;margin-bottom:12px;}
.cs-rl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.cs-track{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;}
.cs-fill{display:block;height:100%;border-radius:999px;}
.cs-fill.is-spend{background:rgba(159,230,196,.42);}
.cs-fill.is-rev{background:linear-gradient(90deg,var(--cs-bright),#2BB39A);}
.cs-rv{font-family:var(--mono);font-size:12px;color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums;}
.cs-rn{font-size:11px;color:rgba(255,255,255,.45);margin-top:4px;}


/* ---------- where the numbers came from ---------- */

@media (max-width:620px){
  .cs-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cs-kpi.is-hero{grid-column:span 2;}
  .cs-i{width:16px;height:16px;}
  .cs-kpi .cs-v{padding-right:22px;}
  .cs-row{grid-template-columns:62px 1fr;row-gap:6px;}
  .cs-rv{grid-column:2;justify-self:end;}
}