:root{
  --paper:#FBFAF8; --paper-2:#F3F1EC; --card:#FFFFFF;
  --navy:#0B1628;
  --ink:#0B1628; --mid:#4A5C70; --soft:#7A8A9B;
  --line:#E3E0D9; --line-d:#22384F;
  --teal:#00A67E; --teal-lt:#E3F5EF; --teal-br:#00C49A;
  --amber:#B87514; --amber-lt:#FBF0DC;
  --red:#B5462F; --red-lt:#FBEAE5;
  --w:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0;font-family:"Plus Jakarta Sans","Inter",sans-serif}
h1{font-size:clamp(36px,4.8vw,60px);letter-spacing:-.035em;line-height:1.05}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
h4{font-size:16px;font-weight:700;letter-spacing:-.005em}
.num{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.in{max-width:var(--w);margin:0 auto;padding:0 32px}
.band{padding:80px 0}
.band.tight{padding:48px 0}
.band.dark{background:var(--navy);color:#EAF0F6}
.band.tint{background:var(--paper-2)}
.kick{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:22px;line-height:1.4}
.dark .kick{color:var(--teal-br)}
.lede{font-size:19px;color:var(--mid);line-height:1.55;max-width:44em}
.dark .lede{color:#9DB2C6}

/* Buttons — match /shared header */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:16px;padding:15px 28px;border-radius:6px;
  text-decoration:none;border:0;cursor:pointer;transition:.16s ease;font-family:inherit;line-height:1.4;white-space:nowrap}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:#008D6B}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-g:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dark .btn-g{color:#EAF0F6;box-shadow:inset 0 0 0 1.5px var(--line-d)}
.dark .btn-g:hover{box-shadow:inset 0 0 0 1.5px #EAF0F6}

/* HERO */
.hero{padding:64px 0 40px;background:
    radial-gradient(900px 380px at 90% -10%, rgba(0,166,126,.08), transparent 60%),
    radial-gradient(700px 320px at 0% 0%, rgba(0,166,126,.05), transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:64px;align-items:center}
.hero h1{margin:0 0 24px;max-width:16ch}
.hero .lede{margin-bottom:0;font-size:18px}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* Snapshot — 2x2 grid on hero right */
.snap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;position:relative;overflow:hidden;text-align:center;
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);opacity:.9}
.stat.warn::before{background:var(--amber)}
.stat.neg::before{background:var(--red)}
.stat .n{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:32px;
  letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.stat .l{font-size:13px;color:var(--mid);margin-top:10px;line-height:1.4}

/* Section head (full width above spreads) */
.shead{margin-bottom:36px}
.shead h2{margin-bottom:16px}
.shead .lede{margin:0;max-width:none}

/* Two-col spread (used under a shead) */
.spread{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:64px;align-items:start}
.spread.reverse{grid-template-columns:1fr minmax(280px,380px);align-items:center}

/* Pull-quote box (used in a spread's right col) */
.pullbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05);position:relative}
.pullbox::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;background:var(--teal);border-radius:0 0 3px 3px}
.pullbox .pullbox-kick{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);font-weight:800;margin-bottom:14px}
.pullbox p{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:19px;line-height:1.4;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);margin:0}
.pullbox .pullbox-tag{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;color:var(--mid);font-style:italic}
.mini-metrics{display:grid;gap:0}
.mm{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--line);gap:12px}
.mm:first-child{border-top:1px solid var(--line)}
.mm .k{font-size:14px;color:var(--mid);line-height:1.35}
.mm .v{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:700;color:var(--navy);
  font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mm.neg .v{color:var(--red)}
/* .spread.reverse must be listed explicitly: it is more specific than .spread,
   so a bare `.spread{grid-template-columns:1fr}` here loses to it and the
   two-column layout survives into small viewports, overflowing the page. */
@media (max-width:820px){.spread,.spread.reverse{grid-template-columns:1fr;gap:28px}}

/* Two-column cards — with icon header */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.card{border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;background:var(--card);
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.card .card-hd{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.card .card-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.card.bad .card-ic{background:var(--red-lt);color:var(--red)}
.card.good .card-ic{background:var(--teal-lt);color:var(--teal)}
.card .card-hd h3{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin-top:4px}
.card .card-hd .sub{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);display:block;font-weight:800}
.card.bad .card-hd .sub{color:var(--red)}
.card.good .card-hd .sub{color:var(--teal)}
.list{list-style:none;margin:0;padding:0}
.list li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--mid)}
.list li:first-child{border-top:0}
.list li b{color:var(--ink);font-weight:700}
.list li::before{content:"";position:absolute;left:6px;top:20px;width:16px;height:16px;border-radius:50%;
  background-position:center;background-repeat:no-repeat;background-size:11px 11px}
.card.bad .list li::before{background-color:var(--red-lt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5462F' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6L18 18M18 6L6 18'/%3E%3C/svg%3E")}
.card.good .list li::before{background-color:var(--teal-lt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A67E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.list li.muted{color:var(--soft)}
.list li.muted b{color:var(--mid)}

/* Findings card — for "What we found" */
.findings{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.findings .fhd{display:flex;align-items:center;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#F7FBF9,#FFFFFF)}
.findings .fhd .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal-lt);color:var(--teal);flex:none}
.findings .fhd h3{font-size:18px;font-weight:800;letter-spacing:-.015em;margin-top:4px}
.findings .fhd .sub{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);font-weight:800;display:block}
.findings ol{list-style:none;margin:0;padding:0;counter-reset:f}
.findings li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 26px;border-top:1px solid var(--line);align-items:start}
.findings li:first-child{border-top:0}
.findings li .idx{counter-increment:f;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:14px;
  color:var(--teal);padding-top:2px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.findings li .idx::before{content:"0" counter(f)}
.findings li .body{font-size:15.5px;line-height:1.55;color:var(--mid)}
.findings li .body b{color:var(--ink);font-weight:700;display:block;margin-bottom:2px;font-size:15.5px;letter-spacing:-.005em}

/* Prose */
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}

/* Steps */
.steps{margin-top:8px;counter-reset:step}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .num{counter-increment:step;width:44px;height:44px;border-radius:50%;
  background:var(--teal-lt);color:var(--teal);font-family:"Plus Jakarta Sans";font-weight:800;
  display:grid;place-items:center;font-size:16px}
.step .num::before{content:counter(step)}
.step h3{margin:6px 0 6px;font-size:20px}
.step p{color:var(--mid);font-size:15.5px}
.tag{display:inline-block;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  margin-left:10px;vertical-align:middle;line-height:1.5;border:1px solid transparent}
.tag.deal{background:#EEF0FF;color:#3A4CB8;border-color:#DBDFF7}      /* Renegotiate — indigo */
.tag.fix{background:#FDE7E3;color:#B5462F;border-color:#F7CDC4}       /* Fix — red */
.tag.grow{background:var(--teal-lt);color:#007A5C;border-color:#B7E4D2} /* Grow — teal */
.tag.hyg{background:#F0EEE7;color:#6E6553;border-color:#DED9CB}       /* Hygiene — warm gray */

/* Content-pub callout */
.callout{margin-top:36px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:12px;padding:24px 26px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.callout .big{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:56px;
  line-height:1;color:var(--teal);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.callout .body{flex:1;min-width:240px;font-size:15.5px;line-height:1.55}
.callout .body b{font-weight:700}

/* Projection (dark) */
.proj-card{background:linear-gradient(180deg,#121F36,#0B1628);border:1px solid #1E2C47;border-radius:16px;padding:36px}
.proj-card .kick{color:var(--teal-br)}
.proj-card h3{color:#fff;font-size:26px;margin:6px 0 10px}
.proj-card p{color:#9DB2C6;font-size:16px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 6px}
.pstat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:22px;text-align:center}
.pstat .n{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:30px;color:#fff;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pstat .l{font-size:13px;color:#9DB2C6;margin-top:8px;line-height:1.45}
.proj-fine{font-size:12.5px;color:#7A8B9E;margin-top:20px;line-height:1.55;max-width:60em}

/* Turning point card */
.tp{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:28px 30px}
.tp p{font-size:17px;line-height:1.6}
.tp p + p{margin-top:12px;color:var(--mid)}

/* Pull quote */
.pq{font-size:clamp(22px,2.6vw,30px);line-height:1.35;font-weight:600;color:var(--ink);
  border-left:3px solid var(--teal);padding:6px 0 6px 24px;margin:0 0 20px;letter-spacing:-.015em;font-family:"Plus Jakarta Sans"}
.pq-sub{color:var(--mid);font-size:16px}

/* Final CTA */
.fcta{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:44px 40px;text-align:center}
.fcta h2{max-width:22em;margin:0 auto 14px}
.fcta p{max-width:36em;margin:0 auto 24px;color:var(--mid);font-size:17px}
.fcta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fcta .sub{margin:18px auto 0;font-size:13px;color:var(--soft);max-width:none}

/* Footer disclaimer */
.disc{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 22px;
  color:var(--mid);font-size:13.5px;line-height:1.6}
.disc b{color:var(--ink)}

/* Site footer (matches audits/index) */
footer.site{background:#070c16;color:#8b95a6;padding:56px 0 34px;font-size:14px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
footer.site .in{max-width:var(--w)}
footer.site a{color:#8b95a6;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:32px}
footer.site .foot-logo{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-weight:800;font-size:18px;color:#fff;text-decoration:none;margin-bottom:12px;letter-spacing:-.01em}
footer.site .foot-logo .mark{width:30px;height:30px;border-radius:9px;background:var(--teal);
  display:grid;place-items:center;color:#fff;flex:none}
footer.site .foot-tag{color:#8b95a6;font-size:14px;max-width:34em;line-height:1.55;margin:0}
footer.site .foot-links{display:flex;gap:46px;flex-wrap:wrap}
footer.site .foot-col h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 14px;font-weight:700;font-family:"Inter",sans-serif}
footer.site .foot-col a{display:block;margin-bottom:9px}
footer.site .foot-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
footer.site .foot-bottom{border-top:1px solid #161f30;padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}

/* Responsive */
@media (max-width:900px){
  .snap{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .step{grid-template-columns:40px 1fr;gap:14px}
  .step .num{width:36px;height:36px;font-size:14px}
  .band{padding:56px 0}
  .in{padding:0 20px}
  .fcta{padding:32px 22px}
}

/* ==========================================================================
   Case-study family additions
   Modules the converted case studies need that the first (Fine Jewellery)
   page did not. Built from the same tokens, radii, borders, shadows and
   type scale as everything above — nothing here restyles an existing rule.
   ========================================================================== */

/* KPI band — same .stat card, 3-up, with a supporting sub-line */
.stats6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stats6 .stat{text-align:left;padding:24px 24px 22px}
/* Scoped to .stats6 on purpose: the hero .snap cards keep their original
   sentence-case 13px labels. A bare `.stat .l` here would restyle them too. */
.stats6 .stat .s{font-size:12.5px;color:var(--soft);margin-top:6px;line-height:1.45}
.stats6 .stat.alt::before{background:var(--navy)}
.stats6 .stat .l{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800;color:var(--mid)}
.stats6 .stat .n{font-size:30px}
@media (max-width:900px){.stats6{grid-template-columns:1fr}}

/* Monthly revenue chart */
.chart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 20px;
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.chart .chd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.chart .chd h3{font-size:18px;font-weight:800;letter-spacing:-.015em}
.chart .chd .r{font-size:14px;color:var(--soft);line-height:1.45}
.plot{display:flex;align-items:flex-end;gap:10px;height:190px;border-bottom:1px solid var(--line);padding-bottom:0}
.plot .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.plot .v{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:700;font-size:13px;color:var(--navy);
  margin-bottom:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
/* Bars are absolutely positioned inside .bw so a 100% bar can never push the
   value label out of the plot area. */
.plot .bw{flex:1;position:relative;width:100%}
.plot .bar{position:absolute;left:0;right:0;bottom:0;background:var(--teal);border-radius:4px 4px 0 0;min-height:3px}
.plot .bar.ramp{background:#A9C2C0}
.plot .bar.down{background:#7FBFA9}
.xaxis{display:flex;gap:10px;margin-top:8px}
.xaxis span{flex:1;text-align:center;font-size:13px;color:var(--soft);min-width:0}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--mid)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:0}
.cfacts{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--mid)}
.cfacts b{color:#007A5C;font-weight:800}
.note-fine{font-size:13px;color:var(--soft);margin-top:16px;line-height:1.6;max-width:60em}
@media (max-width:760px){
  .plot{height:150px;gap:5px}
  .plot .v{font-size:10.5px}
  .xaxis{gap:5px}
  .xaxis span{font-size:11px}
}

/* Reading the curve — phase / commentary rows */
.curve{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.curve .chd{padding:18px 26px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F7FBF9,#FFFFFF)}
.curve .chd .sub{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);font-weight:800}
.curve .row{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:18px 26px;border-top:1px solid var(--line)}
.curve .row:first-of-type{border-top:0}
.curve .row .m{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:15px;color:#007A5C;
  letter-spacing:-.01em}
.curve .row .t{font-size:15.5px;line-height:1.55;color:var(--mid)}
@media (max-width:760px){.curve .row{grid-template-columns:1fr;gap:6px;padding:16px 20px}}

/* Chips */
.chips-l{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);margin:22px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--mid)}

/* Keyed metric rows (figure + explanation) */
.keyed{margin-top:24px}
.keyed .kr{display:grid;grid-template-columns:minmax(78px,auto) 1fr;gap:16px;padding:14px 0;
  border-top:1px solid var(--line);align-items:baseline}
.keyed .kr:first-child{border-top:0}
.keyed .kr .k{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:17px;color:#007A5C;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.keyed .kr .t{font-size:15.5px;line-height:1.55;color:var(--mid)}

/* Revenue mix bars */
.mix .mrow{display:grid;grid-template-columns:minmax(140px,220px) 1fr 52px;gap:16px;align-items:center;padding:9px 0}
.mix .lab{font-size:15px;color:var(--mid);line-height:1.35}
.mix .track{height:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.mix .fill{height:100%;background:var(--teal);border-radius:999px}
.mix .pc{text-align:right;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:16px;
  color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:600px){
  .mix .mrow{grid-template-columns:1fr 44px;gap:6px 12px}
  .mix .lab{grid-column:1/-1}
}

/* Numbered outcome cards — 3-up variant of .cols */
.cols.trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cols.trio{grid-template-columns:1fr}}
.card .card-no{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:15px;color:var(--teal);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-bottom:8px}
.card > h4{font-size:18px;font-weight:800;letter-spacing:-.015em;margin-bottom:10px}
.card > p{font-size:15.5px;line-height:1.55;color:var(--mid)}

/* Case-study cross-navigation — static, works without JS */
.csx{border-top:1px solid var(--line);padding-top:32px}
.csx h2{font-size:22px;margin-bottom:6px}
.csx .lede{font-size:16px;margin-bottom:26px}
.csx-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.csx-group h3{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:12px}
.csx-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--card);max-width:760px}
.csx-list li + li{border-top:1px solid var(--line)}
.csx-list a{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;
  color:var(--ink);transition:background .15s}
.csx-list a:hover{background:var(--paper-2)}
.csx-list a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.csx-list .t{flex:1;min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.csx-list .meta{display:block;font-size:13px;font-weight:500;color:var(--soft);margin-top:3px;letter-spacing:0}
.csx-list .chev{flex:none;color:var(--soft)}
.csx-list a[aria-current="page"]{background:var(--teal-lt)}
.csx-list a[aria-current="page"] .t{color:#007A5C}
.csx-list a[aria-current="page"] .chev{display:none}
.csx-list .now{flex:none;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#007A5C}
@media (max-width:820px){.csx-groups{grid-template-columns:1fr}}

/* ==========================================================================
   Case Studies hub (/case-study)
   Five peer niches, no groups, no accordion. Same tokens, radii, borders,
   shadows and hover language as the case-study cards above.
   ========================================================================== */
.band.hub{padding:72px 0 96px}
.hub-head{max-width:22em;margin-bottom:34px}
.hub-head h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.1}

.hubsel{list-style:none;margin:0;padding:0;max-width:760px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px rgba(11,22,40,.05)}
.hubsel li + li{border-top:1px solid var(--line)}
.hubsel a{display:flex;align-items:center;gap:18px;padding:20px 24px;text-decoration:none;
  color:var(--ink);transition:background .15s}
.hubsel a:hover{background:var(--paper-2)}
.hubsel a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

.hubsel-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--teal-lt);color:var(--teal);transition:background .15s,color .15s}
.hubsel a:hover .hubsel-ic{background:var(--teal);color:#fff}

.hubsel-t{flex:1;min-width:0;font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.hubsel-meta{display:block;font-size:13.5px;font-weight:500;color:var(--soft);
  margin-top:3px;letter-spacing:0}
.hubsel-chev{flex:none;color:#B4BDC7;transition:color .15s,transform .18s ease}
.hubsel a:hover .hubsel-chev{color:var(--teal);transform:translateX(3px)}

@media (max-width:600px){
  .band.hub{padding:44px 0 64px}
  .hubsel a{gap:14px;padding:16px 16px}
  .hubsel-ic{width:40px;height:40px;border-radius:11px}
  .hubsel-t{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .hubsel-chev{transition:color .15s}
  .hubsel a:hover .hubsel-chev{transform:none}
}