/* ==========================================================================
   Case-study pages
   - Listing page (case-studies.html) helpers
   - Detail pages (.cd-page): simple, editorial layout. Two colours only —
     ink + coral on paper/white. No lime anywhere on these pages.
   ========================================================================== */

.cs-intro{ font-size:16.5px; line-height:1.6; color:#3b3f36; }
.is-dark .cs-intro{ color:var(--muted-lt); }
.csd-kick{ font:500 11.5px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--coral-dim); display:block; margin-bottom:12px; }

/* ---------- Listing page (case-studies.html) ---------- */
.pb-cases .banner-title{ font-size:clamp(2rem,4vw,3.1rem); line-height:1.12; }
.pb-cases .banner-sub{ font-size:clamp(15px,1.2vw,17px); max-width:560px; }
.cs-timeline .cs-body{ gap:16px; }
.cs-timeline .cs-body h2{ font-size:clamp(19px,1.7vw,24px); line-height:1.28; letter-spacing:-.01em; font-weight:600; max-width:30ch; }
.cs-timeline .cs-intro{ font-size:15px; line-height:1.65; }
.cs-timeline .cs-body > .cs-ghost{ font-size:clamp(80px,9vw,130px); }
.cs-timeline .cs-link{ font-size:14px; }
.csd-take{ padding:24px 0 100px; }
.csd-take h2{ font-size:clamp(22px,2.3vw,30px); letter-spacing:-.02em; margin:10px 0 28px; }
.csd-take-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.csd-tk{ position:relative; display:flex; flex-direction:column; gap:12px; padding:78px 26px 24px; min-height:380px; border-radius:30px 30px 30px 6px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), opacity .7s var(--ease); }
.csd-tk:nth-child(even){ border-radius:30px 6px 30px 30px; }
.csd-tk:hover{ transform:translateY(-8px); box-shadow:0 28px 54px rgba(18,20,15,.2); }
.tk-coral{ background:var(--coral); color:#fff; }
.tk-cobalt{ background:var(--cobalt); color:#fff; }
.tk-amber{ background:var(--amber); color:var(--ink); }
.tk-ink{ background:var(--ink); color:var(--paper); }
.tk-node{ position:absolute; top:22px; left:24px; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink); font:700 15px var(--font-display); box-shadow:0 0 0 6px rgba(255,255,255,.28); }
.tk-ink .tk-node{ background:var(--coral); color:#fff; box-shadow:0 0 0 6px rgba(255,75,51,.22); }
.tk-ico{ position:absolute; top:18px; right:22px; font-size:56px; line-height:1; opacity:.22; transition:transform .5s var(--ease), opacity .4s; }
.csd-tk:hover .tk-ico{ transform:rotate(-8deg) scale(1.12); opacity:.4; }
.csd-tk h3{ font-size:clamp(18px,1.5vw,22px); line-height:1.25; letter-spacing:-.01em; margin:0; }
.csd-tk p{ font-size:14.5px; line-height:1.65; margin:0; opacity:.92; }
.tk-link{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid currentColor; border-top-color:rgba(255,255,255,.35); }
.tk-amber .tk-link{ border-top-color:rgba(18,20,15,.3); }
.tk-link small{ display:block; font:500 10.5px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-bottom:3px; }
.tk-link b{ font:700 14.5px/1.3 var(--font-display); }
.tk-link i{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); transition:transform .4s var(--ease), background .3s, color .3s; }
.tk-amber .tk-link i{ background:rgba(18,20,15,.12); }
.tk-link:hover i{ transform:rotate(45deg); background:#fff; color:var(--ink); }
.tk-ink .tk-link:hover i{ background:var(--coral); color:#fff; }
/* connector arrows between cards */
.csd-tk:not(:last-child)::after{ content:"\2192"; position:absolute; top:44px; right:-21px; z-index:3; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font:700 13px var(--font-body); border:2px solid var(--paper); }

/* ==========================================================================
   DETAIL PAGES
   ========================================================================== */

/* lime -> white / coral on the banner + header of detail pages */
.cd-page .eyebrow.on-dark{ color:#fff; }
.cd-page .eyebrow.on-dark::before{ background:var(--coral); }
.cd-page .crumbs a:hover,
.cd-page .crumbs [aria-current="page"]{ color:#fff; }
.cd-page .site-header.header-on-dark:not(.is-scrolled) .nav-link.active{ color:#fff; }
.cd-page .site-header.header-on-dark:not(.is-scrolled) .nav-link::after{ background:var(--coral); }

/* banner type — compact */
.pb-detail .banner-title{ font-size:clamp(1.8rem,3.3vw,2.7rem); line-height:1.12; }
.pb-detail .banner-sub{ font-size:clamp(14.5px,1.1vw,16.5px); max-width:620px; }

/* reading progress */
.cd-progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:1100; pointer-events:none; }
.cd-progress i{ display:block; height:100%; background:var(--coral); transform-origin:0 50%; transform:scaleX(0); }

/* shared heading style */
.cd-head{ max-width:760px; margin-bottom:40px; }
.cd-head h2, .cd-impl-head h2, .cd-ctx-card h2{ font-size:clamp(22px,2.2vw,32px); line-height:1.18; letter-spacing:-.02em; }

/* ---------- 1. Snapshot: one clean card, four facts ---------- */
.cd-snap{ position:relative; z-index:5; margin-top:-52px; padding-bottom:8px; }
.cd-snap-grid{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); border:1px solid rgba(18,20,15,.1); border-top:4px solid var(--coral); border-radius:var(--radius-md); box-shadow:0 24px 60px rgba(18,20,15,.14); overflow:hidden; }
.cd-snap-grid > div{ padding:22px 26px; border-right:1px solid rgba(18,20,15,.1); }
.cd-snap-grid > div:last-child{ border-right:0; }
.cd-snap-grid small{ display:block; font:500 11px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cd-snap-grid b{ font:700 clamp(16px,1.5vw,20px)/1.2 var(--font-display); color:var(--ink); }

/* ---------- 2. Sticky topic nav ---------- */
.cd-nav{ position:sticky; top:var(--hh,72px); z-index:40; padding:18px 0 0; }
.cd-nav-in{ display:flex; gap:4px; overflow-x:auto; padding:5px; width:max-content; max-width:100%; margin:0 auto; background:rgba(252,253,249,.92); backdrop-filter:blur(12px); border:1px solid rgba(18,20,15,.12); border-radius:100px; scrollbar-width:none; box-shadow:0 10px 30px rgba(18,20,15,.08); }
.cd-nav-in::-webkit-scrollbar{ display:none; }
.cd-nav a{ flex:none; padding:9px 16px; border-radius:100px; font-size:13.5px; font-weight:600; color:var(--muted); transition:background .3s, color .3s; }
.cd-nav a:hover{ color:var(--ink); }
.cd-nav a.on{ background:var(--coral); color:var(--on-accent,#fff); }
section.cd-sum, section.cd-ctx, section.cd-prob, section.cd-sol, section.cd-impl, section.cd-outs, section.cd-lesson{ scroll-margin-top:130px; }

/* ---------- 3. Summary ---------- */
.cd-sum{ padding:80px 0 32px; }
.cd-sum-grid{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
.cd-bignum{ display:block; font:700 clamp(90px,10vw,140px)/.85 var(--font-display); color:transparent; -webkit-text-stroke:1.5px var(--coral); letter-spacing:-.04em; }
.cd-lead{ font:600 clamp(18px,1.7vw,24px)/1.5 var(--font-display); letter-spacing:-.01em; color:var(--ink); margin:0; }
.cd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.cd-chips li{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:100px; background:var(--white); border:1px solid rgba(18,20,15,.14); }
.cd-chips li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); }

/* ---------- 4. Context: quote-style, one coral rule ---------- */
.cd-ctx{ padding:32px 0 88px; }
.cd-ctx-grid{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
.cd-ctx-card{ position:relative; padding:0; background:none; color:var(--ink); }
.cd-ctx-card > i{ display:block; font-size:54px; line-height:1; color:var(--coral); margin-bottom:6px; }
.cd-ctx-text{ margin:0; padding:6px 0 6px 28px; border-left:4px solid var(--coral); font-size:clamp(16px,1.25vw,19px); line-height:1.8; color:#3b3f36; }

/* ---------- 5. Problem -> Goal: the problem gets crossed out, the goal lights up ---------- */
.cd-prob{ padding:24px 0 88px; }
.cd-pairs{ display:grid; gap:14px; }
.cd-pair{ display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; }
.cd-p-c, .cd-p-o{ position:relative; padding:22px 26px; border-radius:var(--radius-md); }
.cd-pair b{ display:block; font:500 11px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.cd-pair p{ font-size:15px; line-height:1.6; margin:0; }

.cd-p-c{ background:var(--white); border:1px solid rgba(18,20,15,.14); transition:background .6s, border-color .6s; }
.cd-p-c b{ color:var(--coral-dim); }
.cd-p-c p{ display:inline; background:linear-gradient(currentColor,currentColor) 0 58%/0 2px no-repeat; transition:background-size .9s var(--ease) .15s, opacity .6s .15s; }
.cd-pair.is-on .cd-p-c{ background:var(--paper-dim); border-color:transparent; }
.cd-pair.is-on .cd-p-c p{ background-size:100% 2px; opacity:.5; }

.cd-p-o{ background:var(--white); color:var(--ink); border:1.5px dashed rgba(255,75,51,.55); transition:background .5s .35s, color .5s .35s, border-color .5s .35s, transform .7s var(--ease) .35s; transform:translateX(-12px); }
.cd-p-o b{ color:var(--coral-dim); transition:color .5s .35s; }
.cd-pair.is-on .cd-p-o{ background:var(--coral); color:var(--on-accent,#fff); border-color:var(--coral); border-style:solid; transform:none; }
.cd-pair.is-on .cd-p-o b{ color:inherit; opacity:.85; }

.cd-p-arrow{ display:grid; place-items:center; }
.cd-p-arrow i{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:15px; transition:transform .4s var(--ease), background .4s; }
.cd-pair.is-on .cd-p-arrow i{ background:var(--coral); color:var(--on-accent,#fff); transform:scale(1.08); }

/* ---------- 6. Solution: numbered list ---------- */
.cd-sol{ padding:0 0 88px; }
.cd-steps{ display:grid; border-top:1px solid rgba(18,20,15,.14); }
.cd-step{ position:relative; display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:center; padding:24px 8px; border-bottom:1px solid rgba(18,20,15,.14); transition:background .35s, padding .35s var(--ease); }
.cd-step:hover{ background:var(--white); padding-left:20px; }
.cd-step-n{ display:block; font:700 clamp(34px,3.4vw,46px)/1 var(--font-display); color:transparent; -webkit-text-stroke:1.5px var(--coral); margin:0; transition:color .35s; }
.cd-step:hover .cd-step-n{ color:var(--coral); }
.cd-step p{ margin:0; font-size:clamp(15.5px,1.2vw,18px); line-height:1.6; color:var(--ink); max-width:62ch; }

/* ---------- 7. Delivery: dark timeline ---------- */
.cd-impl{ background:var(--ink); color:var(--paper); padding:96px 0; }
.cd-impl .csd-kick{ color:var(--accent-lt,var(--coral)); }
.cd-impl-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start; }
.cd-impl-head{ position:sticky; top:calc(var(--hh,72px) + 90px); }
.cd-impl-head p{ margin-top:14px; color:var(--muted-lt); font-size:16px; line-height:1.6; }
.cd-tl{ position:relative; display:grid; gap:0; padding-left:40px; }
.cd-tl-rail{ position:absolute; left:11px; top:14px; bottom:14px; width:2px; background:var(--ink-line); }
.cd-tl-rail i{ display:block; width:100%; height:0; background:var(--accent-lt,var(--coral)); }
.cd-tl li{ position:relative; display:flex; gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--ink-line); color:var(--muted-lt); transition:color .4s, transform .4s var(--ease); }
.cd-tl li:last-child{ border-bottom:0; }
.cd-tl li::before{ content:''; position:absolute; left:-36px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--ink); border:2px solid var(--muted); transition:background .4s, border-color .4s, box-shadow .4s; }
.cd-tl li.is-on{ color:var(--paper); }
.cd-tl li.is-on::before{ background:var(--accent-lt,var(--coral)); border-color:var(--accent-lt,var(--coral)); box-shadow:0 0 0 6px rgba(255,255,255,.12); }
.cd-tl li:hover{ transform:translateX(6px); }
.cd-tl-n{ flex:none; font:700 20px var(--font-display); color:var(--accent-lt,var(--coral)); min-width:34px; }
.cd-tl small{ display:block; font:500 10.5px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-lt); margin-bottom:3px; }
.cd-tl b{ font:600 clamp(15px,1.2vw,17px)/1.4 var(--font-display); }

/* ---------- 8. Outcomes ---------- */
.cd-outs{ padding:96px 0 88px; }
.cd-out-grid{ counter-reset:o; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.cd-out{ counter-increment:o; position:relative; overflow:hidden; display:grid; grid-template-columns:48px 1fr; gap:18px; align-items:start; padding:28px; border-radius:var(--radius-md); background:var(--white); border:1px solid rgba(18,20,15,.12); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.cd-out::after{ content:"0" counter(o); position:absolute; right:16px; bottom:-12px; font:700 72px/1 var(--font-display); color:transparent; -webkit-text-stroke:1.5px var(--coral); opacity:.2; pointer-events:none; }
.cd-out:hover{ transform:translateY(-4px); border-color:var(--coral); box-shadow:0 18px 40px rgba(18,20,15,.1); }
.cd-out span{ width:48px; height:48px; border-radius:50%; background:var(--coral); color:var(--on-accent,#fff); display:grid; place-items:center; font-size:21px; }
.cd-out span i{ display:inline-block; transform:scale(.3); opacity:0; transition:transform .5s var(--ease) .2s, opacity .4s .2s; }
.cd-out.is-in span i{ transform:none; opacity:1; }
.cd-out p{ margin:0; font:600 clamp(15px,1.2vw,17px)/1.45 var(--font-display); position:relative; z-index:1; }

/* ---------- 9. Key lesson ---------- */
.cd-lesson{ padding:0 0 80px; }
.cd-lesson-box{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:clamp(36px,6vw,80px); }
.cd-lesson-box > i{ position:absolute; right:24px; top:-30px; font-size:min(300px,40vw); line-height:1; color:var(--accent-lt,var(--coral)); opacity:.2; }
.cd-lesson-box .csd-kick{ position:relative; color:var(--accent-lt,var(--coral)); }
.cd-lesson-box p{ position:relative; max-width:900px; margin:0; font:700 clamp(20px,2.4vw,32px)/1.3 var(--font-display); letter-spacing:-.015em; }
.cd-lesson-box p .w{ opacity:.25; transition:opacity .35s; }
.cd-lesson-box p .w.on{ opacity:1; }
.cd-back{ position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:32px; padding:12px 22px; border-radius:100px; background:var(--coral); color:var(--on-accent,#fff); font-weight:700; font-size:14px; transition:gap .3s, background .3s, color .3s; }
.cd-back:hover{ gap:16px; background:var(--white); color:var(--ink); }

/* ---------- 10. Previous / next ---------- */
.csd-pn{ padding:0 0 72px; }
.csd-pn .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:var(--container); margin:0 auto; padding:0 24px; }
.csd-pn a{ display:block; padding:24px 26px; border-radius:var(--radius-md); border:1px solid rgba(18,20,15,.15); transition:background .3s, color .3s, transform .4s var(--ease); }
.csd-pn a small{ display:block; font:500 11px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--coral-dim); margin-bottom:6px; transition:color .3s; }
.csd-pn a b{ font:700 16px/1.25 var(--font-display); }
.csd-pn a.nx{ text-align:right; }
.csd-pn a:hover{ background:var(--ink); color:var(--paper); transform:translateY(-3px); }
.csd-pn a:hover small{ color:var(--accent-lt,var(--coral)); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .csd-take-grid{ grid-template-columns:1fr 1fr; }
  .csd-tk{ min-height:340px; }
  .csd-tk:nth-child(2)::after, .csd-tk:nth-child(4)::after{ display:none; }
  .cd-snap-grid{ grid-template-columns:1fr 1fr; }
  .cd-snap-grid > div:nth-child(2){ border-right:0; }
  .cd-snap-grid > div:nth-child(-n+2){ border-bottom:1px solid rgba(18,20,15,.1); }
  .cd-sum-grid, .cd-ctx-grid, .cd-impl-grid{ grid-template-columns:1fr; gap:24px; }
  .cd-impl-head{ position:static; }
}
@media (max-width:640px){
  .csd-take-grid, .csd-pn .wrap, .cd-out-grid{ grid-template-columns:1fr; }
  .csd-tk{ min-height:0; }
  .csd-tk::after{ display:none; }
  .csd-pn a.nx{ text-align:left; }
  .cd-snap{ margin-top:-36px; }
  .cd-snap-grid > div{ padding:16px 18px; }
  .cd-nav-in{ border-radius:18px; }
  .cd-pair{ grid-template-columns:1fr; }
  .cd-p-arrow{ height:34px; }
  .cd-p-arrow i{ transform:rotate(90deg); }
  .cd-pair.is-on .cd-p-arrow i{ transform:rotate(90deg) scale(1.08); }
  .cd-p-o{ transform:translateY(-8px); }
  .cd-step{ grid-template-columns:56px 1fr; gap:14px; padding:20px 4px; }
  .cd-out{ padding:22px; grid-template-columns:42px 1fr; }
  .cd-out span{ width:42px; height:42px; }
  .cd-tl{ padding-left:34px; }
  .cd-tl li::before{ left:-30px; }
}
@media (prefers-reduced-motion:reduce){
  .cd-progress i{ transition:none; }
  .cd-p-c p{ background-size:100% 2px; transition:none; opacity:.5; }
  .cd-p-o{ transform:none; transition:none; }
  .cd-lesson-box p .w{ opacity:1; }
  .cd-out span i{ transform:none; opacity:1; transition:none; }
}