/* ============================================================
   case-study.css — shared case study design system (luciagoode.com)
   The clean, reusable version of the Maxwell system.
   Lavender page, dark cards. See _private/CASE-STUDY-DESIGN-SYSTEM.md.
   ============================================================ */

:root{
  /* dark panels */
  --bg-night:#0A0714;
  --bg-night-2:#110B22;
  --bg-navy:#1A0F3C;
  --el-strategy:#3D1C8F;
  --text-light:#F3EEFB;
  --text-on-dark:rgba(232,226,245,.86);
  --dim-on-dark:rgba(232,226,245,.72);
  --coral:#D9604A;
  --ember:#F0A36B;
  --border:rgba(155,127,212,.18);
  /* light page */
  --page:#D8CDEF;
  --ink:#1A0F3C;
  --body:#2E2550;
  --muted:#5E4E8A;
  --rust:#A8402A;
  --hair:rgba(155,127,212,.22);
  --rule:rgba(26,15,60,.5);
  /* system */
  --inset:56px;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'Source Code Pro', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); background:var(--page); color:var(--body);
  line-height:1.65; font-size:15px; -webkit-font-smoothing:antialiased; }
.page{ max-width:1440px; margin:0 auto; padding:60px 40px 80px; position:relative; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 1.1s ease, transform 1.1s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── HERO ── */
.case-header{ position:relative; overflow:hidden; color:#fff; border-radius:12px;
  padding:72px var(--inset) 64px; margin-bottom:20px; border:1px solid rgba(255,255,255,.05);
  background:radial-gradient(120% 90% at 85% 120%, rgba(217,96,74,.22) 0%, rgba(217,96,74,0) 55%),
    linear-gradient(160deg,#05030B 0%,#120A26 60%,#080510 100%);
  box-shadow:0 24px 60px -24px rgba(26,15,60,.45); }
.case-header__kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--coral); font-weight:700; margin-bottom:26px; }
.case-header__title{ font-family:var(--font-body); font-size:64px; line-height:1; font-weight:300;
  letter-spacing:-.035em; margin-bottom:28px; color:#fff; }
.case-header__lede{ font-size:17px; line-height:1.65; color:rgba(232,226,245,.8); max-width:640px; }
.case-header__lede + .case-header__lede{ margin-top:14px; }
.case-header__lede strong{ color:#fff; font-weight:500; }
.case-header__rule{ height:1px; background:rgba(255,255,255,.12); margin:40px 0 28px; }
.case-header__passport{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px; }
.case-header__outcome{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; }
.case-header__outcome .passport-item__label{ flex-shrink:0; }
.case-header__outcome p{ font-size:19px; line-height:1.5; color:#fff; font-weight:300; letter-spacing:-.01em; max-width:820px; }
.passport-item__label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); margin-bottom:8px; font-weight:700; }
.passport-item__value{ font-size:14px; line-height:1.5; color:rgba(232,226,245,.92); }

/* ── TOOLKIT ── */
.toolkit{ background:var(--bg-night-2); color:#fff; border-radius:12px; padding:40px 48px 44px;
  margin-bottom:56px; border:1px solid rgba(255,255,255,.05); }
.toolkit__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.68); margin-bottom:20px; font-weight:700; }
.toolkit__row{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
.toolkit__divider{ width:1px; align-self:stretch; background:rgba(255,255,255,.15); margin:0 4px; flex-shrink:0; }
.toolkit__supporting-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.68); font-weight:700; writing-mode:vertical-rl; transform:rotate(180deg);
  align-self:center; padding:8px 0; flex-shrink:0; }
.el{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px;
  padding:14px 16px; min-width:88px; text-decoration:none; color:#fff; background:var(--el-color,#3D1C8F);
  text-align:center; flex-shrink:0; transition:transform .15s ease, box-shadow .15s ease; }
.el:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.5); }
.el__code{ font-family:var(--font-mono); font-size:26px; font-weight:700; line-height:1; letter-spacing:-.01em; color:#fff; margin-bottom:6px; }
.el__name{ font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.85); line-height:1.25; white-space:nowrap; }
.el--dominant{ padding:20px 24px; min-width:140px; border-radius:14px; border:2px solid var(--coral); box-shadow:0 8px 28px rgba(217,96,74,.45); }
.el--dominant .el__code{ font-size:40px; margin-bottom:8px; }
.el--dominant .el__name{ font-size:10.5px; letter-spacing:.1em; }
.el--dominant:hover{ box-shadow:0 12px 34px rgba(217,96,74,.6); }

/* ── SECTIONS (open, on lavender) ── */
.section{ margin-bottom:96px; }
.section-header{ display:flex; align-items:baseline; gap:12px; margin-bottom:28px; padding-bottom:14px;
  border-bottom:1px solid var(--hair); flex-wrap:wrap; font-family:var(--font-mono); font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; }
.section-header__label{ color:var(--rust); font-weight:700; }

/* Lead pattern: headline left, paragraph right */
.loop-lead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:56px; align-items:start; margin-bottom:44px; }
.loop-lead__head{ font-size:clamp(24px,2.4vw,30px); line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.loop-lead__body{ font-size:17px; line-height:1.75; color:var(--body); }
.loop-lead__body strong{ color:var(--ink); font-weight:600; }
@media (max-width:900px){ .loop-lead{ grid-template-columns:1fr; gap:16px; } }

.problem-body{ font-size:17px; line-height:1.78; color:var(--body); max-width:820px; }
.problem-body p + p{ margin-top:20px; }
.problem-body strong{ color:var(--ink); font-weight:600; }
.problem-body em{ font-style:italic; color:var(--ink); }

/* Figure ledger */
.brief-ledger{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:36px; border-top:1px solid var(--hair); }
.ledger-cell{ padding:26px 24px 0 0; border-right:1px solid var(--hair); }
.ledger-cell:last-child{ border-right:none; padding-right:0; }
.ledger-cell:not(:first-child){ padding-left:24px; }
.ledger-cell__fig{ font-family:var(--font-body); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink); margin-bottom:12px; }
.ledger-cell:first-child .ledger-cell__fig{ color:var(--rust); }
.ledger-cell__cap{ font-size:14px; line-height:1.5; color:var(--muted); }
@media (max-width:520px){ .brief-ledger{ grid-template-columns:1fr 1fr; } .ledger-cell{ border-right:none; border-bottom:1px solid var(--hair); padding:22px 0; } }

/* ── INSIGHT (dark feature, lights up) ── */
.lights{ position:relative; border-radius:16px; padding:96px var(--inset); margin:64px 0 96px; overflow:hidden;
  background:var(--bg-night); border:1px solid rgba(255,255,255,.04);
  box-shadow:0 0 0 rgba(217,96,74,0); transition:box-shadow 2.4s ease; }
.lights::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 2.4s ease;
  background:radial-gradient(90% 120% at 50% 0%, rgba(200,182,245,.34) 0%, rgba(155,127,212,.16) 38%, rgba(10,7,20,0) 72%); }
.lights.is-up::before{ opacity:1; }
.lights.is-up{ box-shadow:0 28px 70px -28px rgba(26,15,60,.55); }
.lights__inner{ position:relative; max-width:900px; margin:0 auto; text-align:center; }
.pull-quote__label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--coral); font-weight:700; margin-bottom:24px; }
.pull-quote__text{ font-family:var(--font-body); font-size:clamp(28px,3.4vw,44px); line-height:1.22; font-weight:300; color:var(--dim-on-dark); letter-spacing:-.02em; margin-bottom:26px; transition:color 2.4s ease; }
.pull-quote__text strong{ font-weight:700; }
.lights.is-up .pull-quote__text{ color:#fff; }
.pull-quote__support{ font-size:16px; line-height:1.7; color:var(--text-on-dark); max-width:680px; margin:0 auto; }

/* ── KEY DECISIONS (2-column cards) ── */
.moves{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.move{ background:var(--bg-night-2); border:1px solid var(--border); border-radius:12px; padding:36px 36px 34px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.move:hover{ border-color:rgba(217,96,74,.55); transform:translateY(-2px); box-shadow:0 18px 40px -18px rgba(26,15,60,.5); }
.move__header{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.move__number{ color:var(--coral); font-weight:700; }
.move__discipline{ color:var(--text-light); font-weight:700; }
.move__title{ font-size:22px; line-height:1.3; font-weight:700; color:#fff; letter-spacing:-.015em; margin-bottom:12px; }
.move__body{ font-size:15.5px; line-height:1.72; color:var(--text-on-dark); }
.move__body strong{ color:var(--text-light); font-weight:600; }
@media (max-width:900px){ .moves{ grid-template-columns:1fr; } }

/* ── RESULT (dark) ── */
.result-section{ position:relative; overflow:hidden; background:linear-gradient(180deg,#1A0F3C 0%,#120A28 100%);
  border-radius:14px; padding:52px 44px 44px; color:#fff; margin-bottom:40px; box-shadow:0 24px 60px -24px rgba(26,15,60,.45); }
.result-section::before{ content:''; position:absolute; left:50%; top:-220px; width:700px; height:440px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(240,163,107,.16) 0%, rgba(240,163,107,0) 65%); pointer-events:none; }
.result-section .section-header{ position:relative; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:28px; padding-bottom:14px; }
.result-section .section-header__label{ color:var(--coral); }
.result-headline{ position:relative; font-family:var(--font-body); font-size:36px; line-height:1.2; font-weight:700; color:#fff; letter-spacing:-.02em; margin:0 auto 40px; text-align:center; max-width:760px; }
.result-headline em{ color:var(--coral); font-style:normal; }
.result-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.result-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:28px 18px; text-align:center; }
.result-card__value{ font-family:var(--font-body); font-size:42px; font-weight:700; color:#fff; line-height:1; letter-spacing:-.03em; margin-bottom:14px; }
.result-card__label{ font-size:13px; line-height:1.5; color:rgba(232,226,245,.85); }

/* ── CLOSING ── */
.closing{ padding-top:32px; border-top:1px solid var(--hair); display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.closing__name{ font-family:var(--font-body); font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.closing__meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:8px; }
.closing__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.closing__btn{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:14px 22px; border-radius:8px; transition:background .2s ease, box-shadow .2s ease, color .2s ease; }
.closing__btn--ghost{ color:#fff; background:var(--el-strategy); }
.closing__btn--ghost:hover{ background:#2E1570; box-shadow:0 8px 26px rgba(61,28,143,.4); }
.closing__btn--solid{ color:#fff; background:var(--coral); }
.closing__btn--solid:hover{ background:#e46f59; box-shadow:0 8px 26px rgba(217,96,74,.45); }

.case-header__title em{ color:var(--coral); font-style:normal; }

/* ── BUILD / proof ── */
.tech-line{ font-size:16.5px; line-height:1.72; color:var(--body); max-width:820px; margin:0 0 24px; }
.tech-line strong{ color:var(--ink); font-weight:600; }
.shot{ border-radius:12px; overflow:hidden; border:1px solid var(--hair); box-shadow:0 24px 60px -24px rgba(26,15,60,.5); margin-bottom:24px; }
.shot__bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:#1a1917; }
.shot__dots{ display:flex; gap:6px; flex-shrink:0; }
.shot__dots span{ width:12px; height:12px; border-radius:50%; }
.shot__dots span:nth-child(1){ background:#ff5f57; }
.shot__dots span:nth-child(2){ background:#ffbd2e; }
.shot__dots span:nth-child(3){ background:#28c840; }
.shot__url{ flex:1; background:rgba(255,255,255,.08); border-radius:6px; padding:5px 12px; font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot__url::before{ content:'\1F512  '; font-size:10px; }
.shot__view{ background:#fff; overflow-y:scroll; max-height:640px; line-height:0; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent; }
.shot__view::-webkit-scrollbar{ width:7px; }
.shot__view::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:4px; }
.shot__view img{ width:100%; height:auto; display:block; }
@media (max-width:860px){ .shot__view{ max-height:440px; } }

/* desktop browser frame + scrollable phone mockup, side by side */
.shots{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; margin-bottom:24px; }
.shots .shot{ margin-bottom:0; }
.phone{ position:relative; justify-self:center; width:300px; max-width:100%; background:#14111d; border-radius:42px; padding:12px;
  box-shadow:0 30px 70px -28px rgba(26,15,60,.6), inset 0 0 0 1px rgba(255,255,255,.05); }
.phone::after{ content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:2px; background:rgba(255,255,255,.2); }
.phone__screen{ border-radius:30px; overflow:hidden; overflow-y:scroll; max-height:600px; background:#fff; line-height:0; scrollbar-width:none; }
.phone__screen::-webkit-scrollbar{ display:none; }
.phone__screen img{ width:100%; height:auto; display:block; }
@media (max-width:980px){ .shots{ grid-template-columns:1fr; gap:24px; } .phone{ width:280px; margin:0 auto; } .phone__screen{ max-height:480px; } }
.tech-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tech-tag{ font-family:var(--font-mono); font-size:11px; padding:8px 14px; background:rgba(255,255,255,.5); color:var(--ink); border:1px solid var(--hair); border-radius:999px; font-weight:500; }

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .toolkit__row{ flex-wrap:wrap; }
  .toolkit__divider{ display:none; }
  .toolkit__supporting-label{ writing-mode:horizontal-tb; transform:none; padding:0; width:100%; }
  .case-header__passport{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  :root{ --inset:24px; }
  .page{ padding:32px 20px 60px; }
  .section{ margin-bottom:72px; }
  .case-header{ padding:48px var(--inset) 44px; }
  .case-header__title{ font-size:44px; }
  .toolkit{ padding:32px 28px; }
  .lights{ padding:64px var(--inset); margin-bottom:72px; }
  .result-section{ padding:32px 24px; }
  .result-headline{ font-size:24px; }
  .result-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .result-card{ padding:22px 14px; }
  .result-card__value{ font-size:34px; }
  .move{ padding:28px 22px; }
  .closing__btn{ flex:1 1 auto; text-align:center; }
}