/* ============================================================
   LBL Case Study — shared layout + components
   Pairs with colors_and_type.css (brand tokens). Edit once,
   all case studies inherit. Brand: eggplant + flame, Inter.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--grad-hero-soft); background-attachment: fixed; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar (co-brand: LBL × client) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 940px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
}
.cobrand { display: flex; align-items: center; gap: 14px; }
.cobrand img.lbl { height: 32px; }
.cobrand img.client { height: 30px; border-radius: 6px; }
.cobrand .x { color: var(--fg-subtle); font-weight: 700; font-size: 18px; }
.cobrand .wordmark {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: 19px; letter-spacing: 0.12em; color: var(--eggplant-600);
}
.topbar .kicker {
  margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--orange-600);
}

/* ---------- Hero ---------- */
.hero { padding: 64px 0 32px; text-align: center; }
.hero .eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--orange-500); margin-bottom: 16px;
}
.hero h1 { font-size: var(--fs-4xl); line-height: 1.08; margin-bottom: 18px; color: var(--eggplant-700, #2c1339); }
.hero h1 .grad {
  background: var(--grad-brand-warm); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.lede {
  font-size: var(--fs-md); color: var(--slate-700);
  max-width: 660px; margin: 0 auto;
}

/* ---------- Metric chips (hero stat row) ---------- */
.statrow {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 36px;
}
.stat {
  flex: 1 1 0; min-width: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 22px;
  box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
@media (max-width: 640px){ .statrow { flex-wrap: wrap; } .stat { flex-basis: 100%; } }
.stat::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--grad-divider);
}
.stat .num {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-3xl, 34px); line-height: 1;
  background: var(--grad-brand-warm); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.stat .lbl { display:block; margin-top:8px; font-size: var(--fs-sm); color: var(--slate-700); font-weight: var(--fw-semibold); }

/* ---------- Section scaffolding ---------- */
section.block { padding: 34px 0; }
.section-head { margin-bottom: 22px; }
.section-head .eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--orange-500); margin-bottom: 8px;
}
.section-head h2 { color: var(--eggplant-600); font-size: var(--fs-2xl); }
.section-head p { color: var(--slate-700); margin-top: 8px; max-width: 700px; }

.prose p { color: var(--slate-700); font-size: var(--fs-md); margin-bottom: 14px; line-height: 1.6; }
.prose p:last-child { margin-bottom: 0; }
.prose b { color: var(--eggplant-600); }

/* ---------- At a glance ---------- */
.glance {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.glance .cell { padding: 22px 24px; border-right: 1px solid var(--border); }
.glance .cell:last-child { border-right: none; }
.glance dt {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--orange-500); margin-bottom: 6px;
}
.glance dd { color: var(--eggplant-600); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
@media (max-width: 720px){ .glance { grid-template-columns: 1fr 1fr; } .glance .cell:nth-child(2){border-right:none;} }

/* ---------- Phased approach (numbered rows) ---------- */
.steps { display: flex; flex-direction: column; gap: 12px; }
.steprow {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--shadow-xs);
}
.steprow .idx {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); line-height: 1; min-width: 52px;
  background: var(--grad-brand-warm); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.steprow h4 { color: var(--eggplant-600); margin-bottom: 4px; font-size: var(--fs-lg); }
.steprow p { color: var(--slate-700); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Results: big stat cards + outcomes ---------- */
.bigstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 22px; }
@media (max-width: 720px){ .bigstats { grid-template-columns: 1fr; } }
.bigstat {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.bigstat::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background: var(--grad-divider); }
.bigstat .num {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 40px; line-height: 1;
  background: var(--grad-brand-warm); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.bigstat .lbl { display:block; margin-top: 10px; color: var(--slate-700); font-size: var(--fs-sm); }
.outcomes { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 28px; box-shadow: var(--shadow-xs); }
.outcomes ul { list-style: none; }
.outcomes li { color: var(--slate-700); font-size: var(--fs-md); padding: 9px 0 9px 30px; position: relative; line-height: 1.5; border-bottom: 1px solid var(--border); }
.outcomes li:last-child { border-bottom: none; }
.outcomes li::before { content:"→"; position:absolute; left:0; color: var(--orange-500); font-weight: var(--fw-black); }
.outcomes li b { color: var(--eggplant-600); }

/* ---------- Quote ---------- */
.quote {
  background: var(--eggplant-night); color: var(--white);
  border-radius: var(--r-xl, 20px); padding: 44px 48px; position: relative; overflow: hidden;
}
.quote::before {
  content:"\201C"; position:absolute; top:-10px; left:24px;
  font-family: var(--font-display); font-size: 140px; line-height: 1;
  color: var(--orange-500); opacity: 0.35;
}
.quote p { font-size: var(--fs-xl, 22px); line-height: 1.5; font-weight: var(--fw-medium, 500); position: relative; }
.quote .attr { margin-top: 22px; font-size: var(--fs-sm); color: var(--orange-200, #ffd9b0); font-weight: var(--fw-semibold); }
.quote .attr b { color: var(--white); display:block; font-size: var(--fs-md); }
.quotegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px){ .quotegrid { grid-template-columns: 1fr; } }
.quote.sm { padding: 30px 34px; }
.quote.sm::before { font-size: 100px; top:-4px; }
.quote.sm p { font-size: var(--fs-md); }

/* ---------- CTA band ---------- */
.cta {
  background: var(--grad-brand-warm); border-radius: var(--r-xl, 20px);
  padding: 48px; text-align: center; color: var(--white); margin: 20px 0 56px;
}
.cta h2 { color: var(--white); font-size: var(--fs-2xl); margin-bottom: 12px; }
.cta p { color: rgba(255,255,255,0.92); max-width: 560px; margin: 0 auto 24px; font-size: var(--fs-md); }
.cta a.btn {
  display: inline-block; background: var(--white); color: var(--eggplant-600);
  font-weight: var(--fw-bold); padding: 14px 32px; border-radius: var(--r-pill);
  text-decoration: none; box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,0.15));
}

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 28px 0 48px; color: var(--fg-subtle); font-size: var(--fs-sm); }
.foot img { height: 26px; vertical-align: middle; margin-bottom: 6px; }
.foot a { color: var(--eggplant-600); font-weight: var(--fw-semibold); }

.flame-divider { display:block; height: 34px; margin: 4px auto 0; }