/* ============================================================
   LMG — Case Study system  ·  shared foundation
   Loaded after /assets/index-CHtOmKA0.css + design-theme.css
   ============================================================ */

:root{
  /* LMG */
  --teal:#003135;
  --teal-2:#073e40;
  --teal-3:#0d4a4c;
  --gold:#c88a3d;
  --gold-rgb:200 138 61;

  /* Client brand — Zelniker Dorfman */
  --zd-navy:#151f35;
  --zd-navy-2:#1d2a47;
  --zd-navy-deep:#0d1424;
  --zd-gold:#c19c4b;
  --zd-gold-soft:#d8bc7e;
  --zd-paper:#faf8f4;
  --zd-paper-2:#f2eee6;

  --ink:#0e1a1a;
  --ink-soft:#4c6b6b;
  --paper:#ffffff;

  --serif:"Cormorant Garamond Variable",Georgia,serif;
  --sans:"Montserrat Variable",Arial,sans-serif;

  --gut:clamp(22px,6vw,104px);
  --maxw:1680px;
  --hair:rgba(255,255,255,.14);
  --hair-dark:rgba(13,20,36,.14);

  --ease:cubic-bezier(.22,.7,.26,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.case-page{background:var(--teal);color:#f3f6f4;overflow-x:clip}
body.case-page main{display:block}
img{max-width:100%}

/* ---------- utility ---------- */
.gut{padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto}
.gut-wide{padding-inline:clamp(16px,3vw,56px);max-width:1920px;margin-inline:auto}
.eyebrow-c{font:700 11px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin:0 0 22px}
.eyebrow-c::before{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.8}
.eyebrow-c.is-zd{color:var(--zd-gold)}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.02}
.h-xl{font-size:clamp(44px,7.4vw,124px)}
.h-lg{font-size:clamp(34px,4.8vw,76px)}
.h-md{font-size:clamp(28px,3.2vw,50px)}
.it{font-style:italic;color:var(--gold)}
.it-zd{font-style:italic;color:var(--zd-gold)}
.lede{font:300 clamp(17px,1.35vw,21px)/1.65 var(--sans);color:#d6e2e0;max-width:62ch}
.body-c{font:300 clamp(15px,1.05vw,17px)/1.75 var(--sans);color:#c2d1cf;max-width:60ch}
.on-paper .lede,.on-paper .body-c{color:#41605e}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.05s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-32px)}
[data-rv="right"]{transform:translateX(32px)}
[data-rv="scale"]{transform:scale(.955)}
[data-rv].in{transform:none}
[data-rv-d="1"]{transition-delay:.09s}[data-rv-d="2"]{transition-delay:.18s}
[data-rv-d="3"]{transition-delay:.27s}[data-rv-d="4"]{transition-delay:.36s}
[data-rv-d="5"]{transition-delay:.45s}[data-rv-d="6"]{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important}}

/* line-by-line headline reveal */
.rvline{display:block;overflow:hidden}
.rvline > span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.in .rvline > span,.rvline.in > span{transform:none}
.rvline:nth-child(2) > span{transition-delay:.1s}
.rvline:nth-child(3) > span{transition-delay:.2s}

/* ============================================================
   MOCKUP LIBRARY — modern, high-fidelity, CSS-built
   ============================================================ */
.mk{position:relative;perspective:2200px;transform-style:preserve-3d}

/* --- shared screen: real screenshot that scrolls inside the frame --- */
.mk-screen{position:relative;overflow:hidden;background:#0b1220}
.mk-screen img{display:block;width:100%;height:auto;will-change:transform;
  transform:translate3d(0,calc(var(--sy,0) * -1%),0)}
.mk-screen.fill img{height:100%;object-fit:cover;object-position:var(--pos,50% 0%);transform:none}
.mk-screen::after{ /* glass glare */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 18%,transparent 38%,transparent 72%,rgba(255,255,255,.045) 100%);
  mix-blend-mode:screen;opacity:.75}

/* ---------- LAPTOP ---------- */
.mk-laptop{position:relative;width:100%;max-width:min(1080px,116vh);margin-inline:auto}
.mk-laptop .lid{
  position:relative;border-radius:16px 16px 6px 6px;padding:11px 11px 13px;
  background:linear-gradient(160deg,#3a4150,#1b2029 42%,#262c37);
  box-shadow:
    0 2px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 42px 70px -28px rgba(0,0,0,.72),
    0 120px 140px -70px rgba(0,0,0,.6);
}
.mk-laptop .cam{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:44px;height:4px;border-radius:3px;background:#12161d;display:flex;align-items:center;justify-content:center}
.mk-laptop .cam i{width:4px;height:4px;border-radius:50%;background:#2a3343;box-shadow:0 0 3px rgba(120,190,255,.5)}
.mk-laptop .mk-screen{border-radius:6px;aspect-ratio:16/10}
.mk-laptop .base{
  position:relative;height:13px;width:112%;margin-left:-6%;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#2a303b,#171b23 62%,#0e1117);
  box-shadow:0 22px 34px -16px rgba(0,0,0,.75)}
.mk-laptop .base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#0f131a,#1b212b)}
.mk-laptop .base::after{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:rgba(255,255,255,.22)}

/* ---------- PHONE ---------- */
.mk-phone{position:relative;width:clamp(148px,15vw,220px);aspect-ratio:9/19.5;
  border-radius:clamp(26px,2.6vw,40px);padding:7px;
  background:linear-gradient(150deg,#4b5464,#1a1f28 45%,#333a46);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 30px 60px -22px rgba(0,0,0,.75),
    0 80px 90px -60px rgba(0,0,0,.7)}
.mk-phone .mk-screen{height:100%;border-radius:inherit;background:#0e1626}
.mk-phone .island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:29%;height:22px;border-radius:14px;background:#080b11;z-index:3}
.mk-phone .mk-screen img{height:100%;width:100%;object-fit:cover;object-position:var(--pos,50% 0%)}

/* ---------- FLOATING BROWSER CARD ---------- */
.mk-browser{position:relative;border-radius:14px;overflow:hidden;background:#11161f;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 34px 60px -26px rgba(0,0,0,.7),0 90px 110px -70px rgba(0,0,0,.65)}
.mk-browser .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#232b38,#161c26);border-bottom:1px solid rgba(255,255,255,.07)}
.mk-browser .dots{display:flex;gap:6px}
.mk-browser .dots i{width:9px;height:9px;border-radius:50%;background:#3b4454}
.mk-browser .dots i:nth-child(1){background:#f0685a}.mk-browser .dots i:nth-child(2){background:#f4c04f}.mk-browser .dots i:nth-child(3){background:#5cc76d}
.mk-browser .url{flex:1;text-align:center;font:500 10.5px/1 var(--sans);letter-spacing:.06em;color:#8fa0b6;
  background:#0d1219;border-radius:20px;padding:6px 12px;max-width:340px;margin-inline:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-browser .mk-screen{aspect-ratio:16/9}

/* ---------- PRINT SHEET / STACK ---------- */
.mk-sheet{position:relative;border-radius:3px;overflow:hidden;background:#fff;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.55),0 70px 90px -60px rgba(0,0,0,.5)}
.mk-sheet img{display:block;width:100%}
.mk-stack{position:relative}
.mk-stack::before,.mk-stack::after{content:"";position:absolute;inset:0;border-radius:3px;background:#efeae1;z-index:-1}
.mk-stack::before{transform:translate(10px,10px) rotate(1.1deg);opacity:.55}
.mk-stack::after{transform:translate(20px,20px) rotate(2.2deg);opacity:.3}

/* ---------- FRAMED ART / ENVIRONMENT ---------- */
.mk-plate{position:relative;border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.65)}
.mk-plate img{display:block;width:100%}
.mk-plate .cap{position:absolute;left:0;bottom:0;right:0;padding:26px 24px 18px;
  background:linear-gradient(0deg,rgba(6,12,20,.86),transparent);
  font:600 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#e8dfcc}

/* device shadow puddle */
.mk-puddle{position:absolute;left:8%;right:8%;bottom:-6%;height:60px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 72%);filter:blur(18px);z-index:-1}

/* ============================================================
   SHARED PAGE PARTS
   ============================================================ */
.case-tag{display:inline-flex;align-items:center;gap:10px;font:600 10.5px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:#cfe0dd;
  border:1px solid var(--hair);border-radius:999px;padding:9px 16px}

.facts{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.facts > div{background:var(--teal);padding:clamp(22px,2.4vw,34px)}
.facts dt{font:600 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.facts dd{margin:0;font:300 15px/1.6 var(--sans);color:#dceae8}

.metrics{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.metric .num{font-family:var(--serif);font-size:clamp(48px,5.6vw,92px);line-height:1;color:#fff;display:block}
.metric .num small{font-size:.45em;color:var(--gold);margin-left:.1em;vertical-align:super}
.metric .lbl{display:block;margin-top:12px;font:600 10.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#9fbab7}

.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:999px;padding:10px 15px;color:#cfe0dd}

/* quote */
.quote{font-family:var(--serif);font-size:clamp(26px,3.3vw,52px);line-height:1.22;color:#fff;font-weight:300}
.quote .mark{color:var(--gold)}
.quote-by{margin-top:26px;font:600 10.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#9fbab7}

/* progress rail */
.rail{position:fixed;left:0;right:0;top:0;height:2px;z-index:40;background:transparent;pointer-events:none}
.rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--zd-gold-soft));
  box-shadow:0 0 18px rgba(200,138,61,.7)}

/* chapter nav (dots) */
.chapnav{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.chapnav a{display:flex;align-items:center;gap:9px;text-decoration:none;color:#e9f1ef;
  font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.chapnav a span{background:rgba(8,22,24,.62);backdrop-filter:blur(8px);padding:6px 9px;border-radius:999px}
.chapnav a span{opacity:0;transform:translateX(6px);transition:.35s var(--ease)}
.chapnav a i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(8,22,24,.45);transition:.35s var(--ease)}
.chapnav a:hover span,.chapnav a.on span{opacity:1;transform:none}
.chapnav a.on{color:var(--gold)}
.chapnav a.on i{background:var(--gold);box-shadow:0 0 0 4px rgba(200,138,61,.18)}
@media (max-width:900px){.chapnav{display:none}}

/* CTA */
.case-cta{position:relative;overflow:hidden;background:var(--teal);padding:clamp(70px,9vw,150px) 0}
.case-cta .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:.16;pointer-events:none}
.btn{display:inline-flex;align-items:center;gap:12px;font:600 11px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;padding:17px 26px;border-radius:2px;transition:.35s var(--ease)}
.btn-gold{background:var(--gold);color:#12211f}
.btn-gold:hover{background:#dda257;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hair);color:#eaf2f0}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* section paddings */
.sec{padding-block:clamp(72px,9vw,160px)}
.sec-tight{padding-block:clamp(48px,6vw,100px)}
.on-paper{background:var(--zd-paper);color:var(--ink)}
.on-paper .display{color:#1a2a2a}
.on-navy{background:var(--zd-navy);color:#eef2f8}
.on-deep{background:var(--zd-navy-deep);color:#eef2f8}

/* case header (breadcrumb strip under the fixed LMG header) */
.case-top{position:relative;z-index:5;padding-top:clamp(108px,10vw,140px)}
.crumb{display:flex;gap:10px;align-items:center;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8fada9}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* variant switcher shared across the 5 prototypes */
.vswitch{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:rgba(8,22,24,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.vswitch b{font:700 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7f9a97;padding:0 10px 0 12px}
.vswitch a{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#cfe0dd;
  text-decoration:none;padding:9px 10px;border-radius:999px;transition:.3s var(--ease);white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.vswitch a em{font-style:normal;letter-spacing:.14em}
.vswitch a.all{color:#8fada9}
.vswitch a:hover{background:rgba(255,255,255,.08);color:#fff}
.vswitch a.on{background:var(--gold);color:#12211f}
@media (max-width:860px){.vswitch b{display:none}.vswitch a{padding:8px 7px;font-size:9px;gap:5px}}
@media (max-width:560px){.vswitch{left:8px;right:8px;transform:none;justify-content:center;flex-wrap:wrap;border-radius:18px}
  .vswitch a em{display:none}}

/* footnote */

.site-footer{padding-bottom:86px}
.case-note{font:400 11px/1.7 var(--sans);color:#7f9a97;letter-spacing:.02em}