/* ============================================================
   StoryFrame World — in-depth DETAIL PAGE framework
   Composable section blocks; each page mixes them in a unique order.
   These pages are normal responsive documents (not the fixed 1920 canvas),
   so type and layout are fluid via clamp() + grid.
   ============================================================ */

.dp-inner{ max-width:1240px; margin:0 auto; padding:148px 7vw 0; }
.dp-inner > section{ margin-bottom:clamp(64px,9vw,128px); }
.dp-inner > section:last-child{ margin-bottom:0; }

/* ---- shared type ---- */
.dp-eyebrow{ display:inline-block; color:var(--yellow); font-weight:700; font-size:15px;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 20px; }
.dp-h1{ font-weight:700; font-size:clamp(46px,6.4vw,96px); line-height:1.02; letter-spacing:-.02em; margin:0; }
.dp-h2{ font-weight:700; font-size:clamp(30px,3.6vw,52px); line-height:1.08; letter-spacing:-.015em; margin:0 0 22px; }
.dp-kicker{ display:block; color:var(--yellow); font-weight:700; font-size:14px; letter-spacing:.18em;
  text-transform:uppercase; margin:0 0 16px; }
.dp-lead{ font-size:clamp(19px,1.9vw,25px); line-height:1.5; color:rgba(255,255,255,.84); margin:24px 0 0; max-width:60ch; }
.dp-p{ font-size:clamp(16px,1.25vw,18px); line-height:1.65; color:rgba(255,255,255,.72); margin:0 0 18px; max-width:62ch; }
.dp-p:last-child{ margin-bottom:0; }
.dp-hi{ color:var(--yellow); }

/* ---- image slots: mark where imagery goes ---- */
image-slot{ display:block; width:100%; background:rgba(255,255,255,.045);
  border:1px dashed rgba(255,255,255,.22); }
/* real <img>s injected by the case-study renderer (js/case-studies.js) — they
   reuse the .hero-wide/.split-img/.cs-card-img sizing rules below for height
   and radius; here we just make them cover their box. */
img.hero-wide, img.split-img, img.cs-card-img, img.hero-img{ width:100%; object-fit:cover; display:block; }
.cs-card-img-empty,
.dp-split .split-img:not(img),
.hero-stack .hero-wide:not(img){ background:rgba(255,255,255,.06); }

/* ---- HERO: split (text + image side by side) ---- */
.hero-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,84px); align-items:center; }
.hero-split.flip > .dp-col-text{ order:2; }
.hero-split .hero-img{ height:clamp(360px,42vw,560px); border-radius:24px; }

/* ---- HERO: stacked (centered text, then wide image) ---- */
.hero-stack{ text-align:center; }
.hero-stack .dp-eyebrow{ margin-bottom:24px; }
.hero-stack .dp-lead{ margin-left:auto; margin-right:auto; }
.hero-stack .hero-wide{ height:clamp(320px,40vw,600px); border-radius:26px; margin-top:clamp(40px,5vw,72px); }

/* ---- SPLIT: text + image, alternating ---- */
.dp-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.dp-split.flip > .dp-col-text{ order:2; }
.dp-split .split-img{ height:clamp(320px,36vw,480px); border-radius:22px; }
.dp-split.tall .split-img{ height:clamp(420px,46vw,620px); }

/* ---- STATS row ---- */
.dp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(24px,4vw,56px); border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14); padding:clamp(34px,4vw,52px) 0; }
.dp-stat .fig{ font-weight:700; font-size:clamp(40px,4.6vw,68px); line-height:1; letter-spacing:-.02em; }
/* 4+ figures: the auto-fit columns get too narrow for long words like "businesses"
   and they overlap the next column, so use fewer/wider columns + a smaller figure. */
.dp-stats:has(.dp-stat:nth-child(4)){ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.dp-stats:has(.dp-stat:nth-child(4)) .fig{ font-size:clamp(30px,3.2vw,46px); }
.dp-stat .fig .dp-hi{ color:var(--yellow); }
.dp-stat .lbl{ margin-top:12px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.66); max-width:26ch; }

/* ---- QUOTE ---- */
.dp-quote{ max-width:1000px; }
.dp-quote blockquote{ margin:0; font-weight:500; font-size:clamp(26px,3.4vw,46px);
  line-height:1.22; letter-spacing:-.01em; }
.dp-quote blockquote .dp-hi{ color:var(--yellow); }
.dp-quote .by{ margin-top:24px; font-size:15px; letter-spacing:.04em; color:rgba(255,255,255,.6); }

/* ---- closing CTA band ---- */
.dp-cta{ position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(120deg,var(--p1),var(--p0)); padding:clamp(48px,6vw,84px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; }
.dp-cta h2{ font-weight:700; font-size:clamp(30px,4vw,56px); line-height:1.05; letter-spacing:-.015em; margin:0; max-width:18ch; }
.dp-cta .btn-yellow{ position:static; flex:0 0 auto; }

/* spacer before footer of page */
.dp-inner > .dp-end{ height:clamp(40px,6vw,90px); margin:0; }

/* ---- case-studies listing grid ---- */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:clamp(20px,2.4vw,32px); align-items:start; }
.cs-card{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:var(--p1); border:1px solid rgba(255,255,255,.08); border-radius:22px;
  padding:0; overflow:hidden; color:var(--white);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cs-card:hover{ transform:translateY(-4px); border-color:rgba(255,188,0,.5); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.cs-card .cs-card-img{ width:100%; height:clamp(200px,22vw,280px); border-radius:0; }
.cs-card-body{ padding:clamp(22px,2vw,30px); display:flex; flex-direction:column; gap:12px; }
.cs-card-tag{ font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.cs-card-title{ margin:0; font-weight:700; font-size:clamp(22px,2.2vw,30px); line-height:1.1; letter-spacing:-.01em; }
.cs-card-desc{ margin:0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.74); }
.cs-card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:700; font-size:16px; color:var(--yellow); }
.cs-card-link svg{ width:14px; height:10px; }
/* promotional "your turn" card at the end of the case-study grid */
.cs-next{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px;
  min-height:clamp(200px,22vw,280px); border-radius:22px; padding:clamp(26px,2.6vw,36px);
  background:linear-gradient(135deg, var(--p1) 0%, var(--p0) 100%);
  border:1px solid rgba(255,255,255,.1);
}
.cs-next-title{ margin:0; font-weight:700; font-size:clamp(22px,2.2vw,30px); line-height:1.14; letter-spacing:-.01em; color:var(--white); }
.cs-next-title .dp-hi{ color:var(--yellow); }

/* ---- responsive collapse ---- */
@media (max-width:880px){
  .hero-split, .dp-split{ grid-template-columns:1fr; }
  .hero-split.flip > .dp-col-text, .dp-split.flip > .dp-col-text{ order:0; }
  .cs-grid{ grid-template-columns:1fr; }
}