/* ================================================================
   4PM — Case study ("lab") pages
   Extends css/style.css (tokens, cursor, loader, nav, progress).
================================================================ */

/* ---- nav: back link ---- */
.cp-nav{justify-content:space-between}
.cp-back{display:inline-flex;align-items:center;gap:0.6em;font-size:0.8rem;font-weight:500;
  letter-spacing:0.04em;color:#fff;opacity:0.82;transition:opacity .4s var(--ease)}
.cp-back:hover{opacity:1}
.cp-back__arrow{display:inline-block;transition:transform .4s var(--ease)}
.cp-back:hover .cp-back__arrow{transform:translateX(-5px)}

/* ---- HERO ---- */
.cp-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(118px,16vh,180px) var(--gutter) clamp(40px,7vh,84px);overflow:hidden}
.cp-hero__cover{position:absolute;inset:-10% 0;width:100%;height:120%;z-index:0;will-change:transform}
.cp-hero__cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,7,0.94),rgba(10,8,7,0.30) 46%,rgba(10,8,7,0.6))}
.cp-hero__inner{position:relative;z-index:2;max-width:1500px;margin:0 auto;width:100%}
.cp-hero__eyebrow{display:inline-block;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.22em;
  font-weight:500;color:var(--gold-lit);margin-bottom:clamp(18px,3vh,30px)}
.cp-hero__title{font-family:var(--display);font-weight:700;
  font-size:clamp(3.8rem,15vw,14rem);line-height:0.82;letter-spacing:-0.042em;color:var(--ink)}
.cp-hero__lede{margin-top:clamp(20px,3vh,32px);max-width:32ch;
  font-size:clamp(1.1rem,1.9vw,1.65rem);line-height:1.38;color:var(--ink-soft);font-weight:400}
.cp-hero__scroll{position:absolute;right:var(--gutter);bottom:clamp(40px,7vh,84px);z-index:2;
  font-size:0.66rem;text-transform:uppercase;letter-spacing:0.22em;color:var(--ink-mute);
  writing-mode:vertical-rl;text-orientation:mixed}
@media (max-width:680px){.cp-hero__scroll{display:none}}

/* ---- META ROW ---- */
.cp-meta{max-width:1500px;margin:0 auto;padding:clamp(38px,6vh,70px) var(--gutter)}
.cp-meta__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,60px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,4vh,40px) 0}
.cp-fact{display:flex;flex-direction:column;gap:9px}
.cp-fact__k{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--ink-mute)}
.cp-fact__v{font-family:var(--display);font-weight:500;font-size:clamp(0.95rem,1.4vw,1.25rem);
  letter-spacing:-0.01em;color:var(--ink)}
@media (max-width:680px){.cp-meta__row{grid-template-columns:1fr 1fr;gap:24px 20px}}

/* ---- OVERVIEW ---- */
.cp-overview{max-width:1500px;margin:0 auto;padding:clamp(66px,12vh,160px) var(--gutter)}
.cp-overview .kicker{margin-bottom:clamp(28px,5vh,54px)}
.cp-overview__text{max-width:26ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,4.8vw,4.2rem);line-height:1.1;letter-spacing:-0.024em;color:var(--ink)}

/* ---- TWO-COLUMN BLOCKS ---- */
.cp-block{max-width:1500px;margin:0 auto;padding:clamp(48px,9vh,116px) var(--gutter);
  display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(28px,6vw,90px);align-items:start}
.cp-block__head{position:sticky;top:clamp(110px,14vh,150px)}
.cp-block__head .kicker{margin-bottom:clamp(16px,3vh,28px)}
.cp-block__title{font-family:var(--display);font-weight:500;
  font-size:clamp(1.65rem,3.3vw,2.85rem);line-height:1.1;letter-spacing:-0.02em;color:var(--ink)}
.cp-block__body{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px);max-width:58ch}
.cp-block__body p{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.68;color:var(--ink-soft)}
.cp-block__body strong{color:var(--ink);font-weight:500}
.cp-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.cp-list li{display:flex;gap:0.8em;font-size:clamp(0.96rem,1.2vw,1.14rem);line-height:1.5;color:var(--ink-soft)}
.cp-list li::before{content:"—";color:var(--gold);flex:0 0 auto}
@media (max-width:820px){
  .cp-block{grid-template-columns:1fr;gap:clamp(20px,4vh,34px)}
  .cp-block__head{position:static}
}

/* ---- GALLERY / SHOTS ---- */
.cp-gallery{max-width:1500px;margin:0 auto;
  padding:clamp(16px,4vh,44px) var(--gutter) clamp(48px,9vh,116px);
  display:flex;flex-direction:column;gap:clamp(20px,3.4vw,40px)}
.cp-gallery__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,40px)}
.cp-shot{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.cp-shot--wide{aspect-ratio:21/9}
.cp-shot__bg{position:absolute;inset:-8% 0;width:100%;height:116%;will-change:transform;background:linear-gradient(155deg,rgba(168,116,58,0.24),rgba(10,8,7,0.72)),var(--img,linear-gradient(135deg,#23160c,#0d0a08)) var(--pos,center)/cover no-repeat;background-color:#0d0a08}
.cp-shot__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 95% at 28% 12%,transparent,rgba(10,8,7,0.5))}
.cp-shot__cap{position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(14px,2vw,22px);z-index:3;
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(236,228,214,0.6)}

/* abstract UI building blocks (suggest screens, no rasters) */
.cp-ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column}
.cp-ui__bar{display:flex;align-items:center;gap:8px;padding:clamp(15px,1.8vw,24px)}
.cp-ui__dot{width:9px;height:9px;border-radius:50%;background:rgba(236,228,214,0.32)}
.cp-ui__addr{flex:1;height:9px;border-radius:6px;background:rgba(236,228,214,0.1);margin-left:10px;max-width:56%}
.cp-ui__body{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.4vw,16px);padding:0 clamp(22px,5vw,72px)}
.cp-ui__line{height:clamp(10px,1.3vw,14px);border-radius:7px;background:rgba(236,228,214,0.15)}
.cp-ui__line.w1{width:72%}
.cp-ui__line.w2{width:46%;background:rgba(216,162,92,0.55)}
.cp-ui__line.w3{width:62%}
.cp-ui__line.w4{width:38%}
.cp-ui__word{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,6.5rem);
  letter-spacing:-0.03em;color:rgba(236,228,214,0.46);text-align:center;line-height:0.9}
.cp-ui--center{align-items:center;justify-content:center;text-align:center}
.cp-ui__chips{display:flex;gap:10px;flex-wrap:wrap}
.cp-ui__chip{height:clamp(26px,3vw,38px);width:clamp(58px,9vw,96px);border-radius:100px;
  border:1px solid rgba(236,228,214,0.18)}
.cp-ui__chip.on{background:rgba(216,162,92,0.5);border-color:transparent}
@media (max-width:680px){.cp-gallery__pair{grid-template-columns:1fr}}

/* ---- OUTCOME ---- */
.cp-outcome{max-width:1500px;margin:0 auto;padding:clamp(58px,11vh,150px) var(--gutter);text-align:center}
.cp-outcome .kicker{margin-bottom:clamp(38px,7vh,78px)}
.cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.cp-stat{display:flex;flex-direction:column;gap:13px;padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--line)}
.cp-stat__num{font-family:var(--display);font-weight:600;font-size:clamp(2.8rem,6.6vw,5.2rem);
  line-height:0.85;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums;
  display:inline-flex;justify-content:center;align-items:flex-start}
.cp-stat__suf{color:var(--gold);font-size:0.46em;transform:translateY(0.22em);font-weight:500}
.cp-stat__label{font-size:0.74rem;text-transform:uppercase;letter-spacing:0.15em;color:var(--ink-mute)}
@media (max-width:680px){.cp-stats{grid-template-columns:1fr;gap:24px}}

/* ---- PULL LINE ---- */
.cp-pull{position:relative;max-width:1100px;margin:0 auto;
  padding:clamp(58px,11vh,150px) var(--gutter);text-align:center;overflow:hidden}
.cp-pull__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90vw;height:50vh;background:radial-gradient(circle at center,rgba(216,162,92,0.12),transparent 64%);
  filter:blur(24px);pointer-events:none}
.cp-pull__text{position:relative;z-index:2;font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,3.9vw,3.1rem);line-height:1.2;letter-spacing:-0.02em;color:var(--ink)}
.cp-pull__text em{color:var(--gold-lit);font-style:italic}

/* ---- NEXT CASE ---- */
.cp-next{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,16px);
  padding:clamp(76px,15vh,200px) var(--gutter);text-align:center;overflow:hidden;
  border-top:1px solid var(--line)}
.cp-next__glow{position:absolute;left:50%;bottom:-30%;width:120vw;height:80vh;transform:translateX(-50%);
  background:radial-gradient(circle at center,rgba(216,162,92,0.13),transparent 60%);filter:blur(20px);pointer-events:none}
.cp-next>*{position:relative;z-index:2}
.cp-next__k{font-size:0.74rem;text-transform:uppercase;letter-spacing:0.24em;color:var(--ink-mute)}
.cp-next__name{font-family:var(--display);font-weight:600;font-size:clamp(3.4rem,12vw,11rem);
  line-height:0.85;letter-spacing:-0.04em;color:var(--ink);transition:color .5s var(--ease)}
.cp-next:hover .cp-next__name{color:var(--gold-lit)}
.cp-next__arrow{font-size:clamp(1.3rem,3vw,2.2rem);color:var(--gold);transition:transform .5s var(--ease)}
.cp-next:hover .cp-next__arrow{transform:translate(6px,-6px)}

/* ---- COMPACT FOOTER ---- */
.cp-foot{max-width:1500px;margin:0 auto;
  padding:clamp(28px,5vh,48px) var(--gutter) clamp(38px,6vh,64px);
  display:flex;justify-content:space-between;align-items:center;gap:18px 30px;flex-wrap:wrap;
  border-top:1px solid var(--line);font-size:0.82rem;color:var(--ink-mute)}
.cp-foot a{color:var(--ink-soft);transition:color .3s var(--ease)}
.cp-foot a:hover{color:var(--gold-lit)}
.cp-foot__home{display:inline-flex;align-items:center;gap:0.5em}

/* nav cta hides on very small screens */
@media (max-width:640px){.cp-nav .nav__cta{display:none}}

/* stat prefix (+ , \00d7 , \2212) matches the suffix styling */
.cp-stat__pre{color:var(--gold);font-size:0.46em;transform:translateY(0.22em);font-weight:500}

/* indicative-figures caption under outcome stats */
.cp-outcome__note{margin-top:clamp(28px,4vh,46px);font-size:0.72rem;letter-spacing:0.04em;
  color:var(--ink-faint);font-style:italic}

/* ================================================================
   ENHANCED CASE PAGE — hero number, nav index, "what we did"
================================================================ */
.cp-nav__idx{font-family:var(--display);font-weight:500;font-size:0.8rem;letter-spacing:0.18em;
  color:var(--ink-mute);font-variant-numeric:tabular-nums}

.cp-hero__no{position:absolute;z-index:1;top:clamp(60px,12vh,150px);right:var(--gutter);
  font-family:var(--display);font-weight:600;line-height:0.8;letter-spacing:-0.04em;
  font-size:clamp(8rem,33vw,27rem);color:transparent;
  -webkit-text-stroke:1px rgba(236,228,214,0.10);
  pointer-events:none;user-select:none;will-change:transform}
@media (max-width:680px){
  .cp-hero__no{top:clamp(40px,9vh,90px);right:auto;left:var(--gutter);font-size:46vw}
}

.cp-did{max-width:1500px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--gutter)}
.cp-did .kicker{margin-bottom:clamp(28px,5vh,54px)}
.cp-did__list{list-style:none;border-top:1px solid var(--line)}
.cp-did__item{display:flex;align-items:baseline;gap:clamp(16px,3vw,44px);
  padding:clamp(18px,2.7vh,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease)}
.cp-did__item:hover{padding-left:clamp(6px,1.4vw,20px)}
.cp-did__n{font-family:var(--display);font-weight:500;font-size:0.8rem;letter-spacing:0.16em;
  color:var(--gold);min-width:3ch;font-variant-numeric:tabular-nums}
.cp-did__t{font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-0.02em;color:var(--ink)}