/* Emergnt Media — case-study pages (work/<slug>/).
   Port of design-handoff/claude-design/CaseStudy.dc.html. The prototype's
   breakpoint for this page is w < 760 (mob). Hidden "not yet seen" states
   only apply under html.cs-ready (added by case.js), so no-JS and
   reduced-motion visitors get the finished page. */

.case{--ph:#111111; --cs-ease:cubic-bezier(.16,1,.3,1); --cs-sec:clamp(120px, 20vh, 200px); --cs-h2:clamp(32px, 4.2vw, 64px); --cs-body:17px}
[data-theme="light"] .case{--ph:#F1F1EF}
@media (max-width:759px){ .case{--small:11px; --cs-sec:96px; --cs-body:16px} }

.cs{padding-top:calc(var(--hdr-h) + 8px)}
.o7{opacity:.7}
.cs-k{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.01em;color:var(--sm)}

/* ---------- opening ---------- */
.cs-crumb{padding:0 var(--m);display:flex;gap:8px;font-size:var(--small);line-height:16px;letter-spacing:.01em}
.cs-open{padding:0 var(--m);margin-top:12vh}
.cs-open__label{font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm);margin-bottom:28px;font-variant-numeric:tabular-nums}
.cs-tmask{overflow:hidden;padding-bottom:.08em}
.cs-tmask--h{margin-bottom:-.08em}
.cs-title{margin:0;font-size:clamp(52px, 9vw, 150px);font-weight:400;line-height:.95;letter-spacing:-.055em;text-wrap:balance}
.cs-title--tag{color:var(--sm);text-wrap:wrap}
.cs-open__lede{margin:40px 0 0;max-width:52ch;font-size:clamp(18px, 1.6vw, 24px);line-height:1.45;letter-spacing:-.015em;text-wrap:pretty}
.cs-meta{margin:10vh 0 0;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));column-gap:24px;row-gap:28px}
.cs-meta > div{border-top:1px solid var(--rule);padding-top:14px}
.cs-meta dt{font-size:12px;line-height:16px;letter-spacing:.01em;color:var(--sm)}
.cs-meta dd{margin:8px 0 0;font-size:15px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}

/* arrival (prototype: transitions that start on mount) */
@keyframes cs-rise{from{transform:translateY(105%)}}
@keyframes cs-fo{from{opacity:0}}
@keyframes cs-fy{from{transform:translateY(16px)}}
@keyframes cs-clip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0% 0 0 0)}}
.js .cs-title{animation:cs-rise 1.1s var(--cs-ease) both}
.js .cs-title--tag{animation-delay:.08s}
.js .cs-open__lede{animation:cs-fo .9s ease .35s both, cs-fy 1s var(--cs-ease) .35s both}
.js .cs-meta > div{animation:cs-fo .9s ease .35s both}
.js .cs-hero__clip{animation:cs-clip 1.3s cubic-bezier(.87,0,.13,1) .25s both}

/* ---------- hero ---------- */
.cs-hero{margin:80px var(--m) 0}
.cs-hero__clip{position:relative;overflow:hidden;border-radius:2px;background-color:var(--ph)}
.cs-hero__par{position:absolute;left:0;right:0;top:-6%;height:112%}
.cs-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top}
.cs-cap{margin-top:12px;font-size:var(--small);line-height:1.4;letter-spacing:.01em;color:var(--sm);text-wrap:pretty}
.cs-hero .cs-cap{line-height:16px;text-wrap:wrap}

/* ---------- chapters ---------- */
.cs-sec{margin-top:var(--cs-sec)}
.cs-text{padding:0 var(--m);margin-top:var(--mt, 0px);display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:24px}
.cs-lab{grid-column:1 / 4;grid-row:1 / span 2}
.cs-lab__in{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;gap:12px;padding:14px 0 0;font-size:var(--small);line-height:16px;letter-spacing:.01em}
.cs-lab__in .tnum{color:var(--fg)}
.cs-body{grid-column:4 / 13;min-width:0}
.cs-h2mask{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cs-h2{margin:0;max-width:22ch;font-size:var(--cs-h2);font-weight:400;line-height:1.04;letter-spacing:-.045em;text-wrap:balance;transition:transform 1.1s var(--cs-ease)}
.cs-lede{margin:28px 0 0;max-width:52ch;font-size:clamp(20px, 1.6vw, 24px);line-height:1.45;letter-spacing:-.015em;text-wrap:pretty}
.cs-lede--imp{margin-top:40px;max-width:28ch;font-size:clamp(26px, 3.2vw, 48px);line-height:1.18;letter-spacing:-.035em}
.cs-blk{margin-top:var(--mt, 0px)}

/* reveal: shared */
.cs-fade{transition:opacity .8s ease .1s, transform .9s var(--cs-ease) .1s}
.cs-stag{transition:opacity .7s ease calc(.1s + var(--i) * .07s), transform .8s var(--cs-ease) calc(.1s + var(--i) * .07s)}
.cs-ready .cs-h2mask:not(.is-in) .cs-h2{transform:translateY(108%)}
.cs-ready .cs-blk:not(.is-in) .cs-fade{opacity:0;transform:translateY(16px)}
.cs-ready .cs-blk:not(.is-in) .cs-stag{opacity:0;transform:translateY(14px)}

/* p */
.cs-p{margin:0;max-width:62ch;font-size:var(--cs-body);line-height:1.6;letter-spacing:-.005em;text-wrap:pretty;opacity:.7}

/* list */
.cs-list{list-style:none;margin:0;padding:0;max-width:880px}
.cs-list li{position:relative;padding:18px 0 20px;font-size:18px;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.cs-list li::before,.cs-qa__i::before,.cs-sub::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:var(--rule)}

/* steps */
.cs-step{position:relative;padding:28px 0 40px;transition:opacity .6s ease}
.cs-step.is-dim{opacity:.35}
.cs-step__line{position:absolute;top:0;left:0;right:0;height:1px;background-color:var(--rule);transform-origin:left center;transition:transform 1.1s cubic-bezier(.87,0,.13,1)}
.cs-step__grid{display:grid;grid-template-columns:40px minmax(0,4fr) minmax(0,5fr);column-gap:32px;row-gap:16px;align-items:start}
.cs-step__n{font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm);padding-top:8px;font-variant-numeric:tabular-nums}
.cs-step__mask{overflow:hidden;padding-bottom:.1em}
.cs-step__t{margin:0;font-size:clamp(22px, 2.4vw, 34px);font-weight:400;line-height:1.12;letter-spacing:-.035em;text-wrap:balance;transition:transform .9s var(--cs-ease) .3s}
.cs-step__ps{display:flex;flex-direction:column;gap:14px;transition:opacity .7s ease .5s, transform .8s var(--cs-ease) .5s}
.cs-step__ps p{margin:0;max-width:62ch;font-size:var(--cs-body);line-height:1.6;text-wrap:pretty;opacity:.7}
.cs-ready .cs-step:not(.is-in) .cs-step__line{transform:scaleX(0)}
.cs-ready .cs-step:not(.is-in) .cs-step__t{transform:translateY(108%)}
.cs-ready .cs-step:not(.is-in) .cs-step__ps{opacity:0;transform:translateY(14px)}

/* metrics */
.cs-metrics{--mfs:clamp(40px, 6vw, 96px);display:grid;grid-template-columns:repeat(var(--n), minmax(0,1fr));row-gap:32px}
.cs-metrics--4{--mfs:clamp(40px, 4.8vw, 72px)}
.cs-mx{padding:0 24px;border-left:1px solid var(--rule)}
.cs-mx:first-child{padding:0 24px 0 0;border-left:0}
.cs-mx__mask{overflow:hidden;padding-bottom:.08em}
.cs-mx__v{font-family:"Manrope", sans-serif;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.22em;font-size:var(--mfs);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .9s var(--cs-ease) calc(.1s + var(--i) * .08s)}
.cs-mx__u{font-size:.32em;letter-spacing:-.01em}
.cs-mx__l{margin-top:14px;max-width:28ch;font-size:var(--small);line-height:1.5;letter-spacing:.01em;color:var(--sm);text-wrap:pretty;transition:opacity .7s ease calc(.4s + var(--i) * .08s)}
.cs-ready .cs-blk:not(.is-in) .cs-mx__v{transform:translateY(108%)}
.cs-ready .cs-blk:not(.is-in) .cs-mx__l{opacity:0}

/* stack */
.cs-stack{display:grid;grid-template-columns:repeat(var(--n), minmax(0,1fr));column-gap:24px;row-gap:40px}
.cs-stack__g{border-top:1px solid var(--rule);padding-top:14px}
.cs-stack ul{list-style:none;margin:14px 0 0;padding:0;font-size:15px;line-height:1.75;letter-spacing:-.005em}

/* q & a */
.cs-qa__i{position:relative;padding:24px 0 30px;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:32px;row-gap:12px}
.cs-qa__q{margin:0;font-size:22px;font-weight:400;line-height:1.3;letter-spacing:-.025em;text-wrap:balance}
.cs-qa__a{margin:0;max-width:62ch;font-size:16px;line-height:1.6;text-wrap:pretty;opacity:.7}

/* table */
.cs-trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2.4fr);column-gap:24px;row-gap:6px;padding:16px 0 18px;border-top:1px solid var(--rule);font-size:15px;line-height:1.5;transition:opacity .6s ease calc(var(--i) * .05s)}
.cs-trow--h{row-gap:0;padding:0 0 12px;border-top:0;font-size:12px;line-height:16px;letter-spacing:.01em;color:var(--sm)}
.cs-trow .o7{text-wrap:pretty}
.cs-ready .cs-blk:not(.is-in) .cs-trow:not(.cs-trow--h){opacity:0}

/* sub-chapter */
.cs-sub{position:relative;padding:24px 0 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:32px;row-gap:14px}
.cs-sub > .cs-k{padding-top:4px}
.cs-sub__in{display:flex;flex-direction:column;gap:14px}
.cs-sub__p{margin:0;max-width:62ch;font-size:var(--cs-body);line-height:1.6;text-wrap:pretty;opacity:.85}
.cs-sub__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px}
.cs-sub__list--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.cs-sub__list li{border-top:1px solid var(--rule);padding:10px 0;font-size:15px;line-height:1.45;letter-spacing:-.005em}

/* diagram */
.cs-diag{margin:0}
.cs-diag > figcaption{margin-bottom:18px}
.cs-diag__g{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);column-gap:20px;row-gap:8px;align-items:center}
.cs-diag__arrow{font-size:20px;color:var(--sm);text-align:center}
.cs-diag__arrow .m{display:none}
.cs-diag__col{display:flex;flex-direction:column}
.cs-diag__n{border-top:1px solid var(--rule);padding:12px 0 16px}
.cs-diag__v{margin-top:6px;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.cs-diag__d{margin-top:6px;font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--sm);text-wrap:pretty}

/* impact */
.cs-impact{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:32px;row-gap:48px}
.cs-impact .cs-k{margin:0 0 14px}
.cs-impact ul{list-style:none;margin:0;padding:0}
.cs-impact li{border-top:1px solid var(--rule);padding:16px 0 18px;font-size:16px;line-height:1.55;text-wrap:pretty}

/* definitions */
.cs-defs > .cs-k{margin:0 0 14px}
.cs-defs dl{margin:0}
.cs-defs__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:32px;row-gap:6px;border-top:1px solid var(--rule);padding:16px 0 18px;transition:opacity .6s ease calc(var(--i) * .06s)}
.cs-defs dt{font-size:18px;line-height:1.35;letter-spacing:-.02em}
.cs-defs dd{margin:0;font-size:16px;line-height:1.55;opacity:.7;text-wrap:pretty}
.cs-ready .cs-blk:not(.is-in) .cs-defs__r{opacity:0}

/* ---------- media ---------- */
.cs-media{margin-top:72px;padding:0 var(--m)}
.cs-mlabel{margin-bottom:18px;font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm)}
.cs-rows,.cs-phones{display:flex;flex-direction:column;gap:56px}
.cs-grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:start}
.cs-fig{margin:0;min-width:0}
.cs-clip{position:relative;overflow:hidden;border-radius:2px;background-color:var(--ph);clip-path:inset(0% 0 0 0);transition:clip-path 1.1s cubic-bezier(.87,0,.13,1)}
.cs-scale{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.65,0,.35,1)}
.cs-ready [data-rv]:not(.is-in) > .cs-clip{clip-path:inset(100% 0 0 0)}
.cs-ready [data-rv]:not(.is-in) > .cs-clip > .cs-scale{transform:scale(1.08)}
.cs-phrow{display:flex;justify-content:space-evenly;gap:24px;padding:4vh 0}
.cs-phone{margin:0;flex:none;width:min(22vw, 340px);scroll-snap-align:start}
.cs-phones::-webkit-scrollbar{display:none}

/* ---------- previous / next ---------- */
.cs-pn{margin-top:var(--cs-sec);display:grid;grid-template-columns:repeat(2, minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cs-pn--1{grid-template-columns:minmax(0,1fr)}
.cs-pn__a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;gap:14px;min-height:40vh;padding:var(--m)}
.cs-pn__a--next{align-items:flex-end;text-align:right}
.cs-pn__a + .cs-pn__a{border-left:1px solid var(--rule)}
.cs-pn__label{position:relative;font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm)}
.cs-pn__name{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-start;font-size:clamp(28px, 4vw, 60px);line-height:1.04;letter-spacing:-.045em}
.cs-pn__a--next .cs-pn__name{justify-content:flex-end}

/* rolling letters (prev/next + more work) */
.cs-word{display:flex}
.cs-l{position:relative;display:block;overflow:hidden;white-space:pre;margin-bottom:-.14em}
.cs-l__in{display:block;padding-bottom:.14em;transition:transform .55s cubic-bezier(.45,0,.55,1)}
.cs-l__dup{position:absolute;left:0;top:100%}
.cs-pn__a:hover .cs-l__in,.cs-pn__a:focus-visible .cs-l__in,.cs-mrow.is-hover .cs-l__in{transform:translateY(-100%)}

/* ---------- brief ---------- */
.cs-brief{margin-top:var(--cs-sec);padding:0 var(--m);display:flex;flex-direction:column;align-items:center;text-align:center}
.cs-brief__mask{overflow:hidden;padding-bottom:.1em}
.cs-brief__h2{margin:0;font-size:clamp(44px, 7vw, 120px);font-weight:400;line-height:1;letter-spacing:-.055em;transition:transform 1.1s var(--cs-ease)}
.cs-brief__p{margin:28px 0 0;max-width:52ch;font-size:clamp(18px, 1.6vw, 24px);line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.cs-brief__p,.cs-cta{transition:opacity .9s ease .35s, transform 1s var(--cs-ease) .35s}
.cs-cta{position:relative;margin-top:32px;padding-bottom:5px;font-size:15px;line-height:1.3}
.cs-cta::before,.cs-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.cs-cta::before{background-color:var(--rule)}
.cs-cta::after{background-color:var(--fg);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.cs-cta:hover::after,.cs-cta:focus-visible::after{transform:scaleX(1)}
.cs-ready .cs-brief:not(.is-in) .cs-brief__h2{transform:translateY(108%)}
.cs-ready .cs-brief:not(.is-in) .cs-brief__p,.cs-ready .cs-brief:not(.is-in) .cs-cta{opacity:0}

/* ---------- more work ---------- */
.cs-more{position:relative;margin-top:var(--cs-sec);padding:0 var(--m)}
.cs-more__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:28px}
.cs-more__h2{margin:0;font-size:var(--cs-h2);font-weight:400;line-height:1.04;letter-spacing:-.045em}
.cs-more__eb,.cs-mrow__disc{font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm)}
.cs-mrow{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:8px;align-items:baseline;padding:20px 0 24px;border-top:1px solid var(--rule);transition:opacity .4s ease}
.cs-mrow__name{display:flex;flex-wrap:wrap;font-size:clamp(28px, 4vw, 60px);line-height:1.06;letter-spacing:-.045em}
.cs-more.has-hover .cs-mrow:not(.is-hover){opacity:.22}
.cs-more__rule{height:1px;background-color:var(--rule)}

/* ---------- footer ---------- */
.case .foot{border-top:0;margin-top:20vh;row-gap:12px}
.case .foot__mid{display:flex;gap:6px}

/* ---------- mobile (prototype: w < 760) ---------- */
@media (max-width:759px){
  .cs-open{margin-top:8vh}
  .cs-open__label,.cs-more__head{margin-bottom:20px}
  .cs-open__lede{margin-top:28px}
  .cs-meta{margin-top:7vh;grid-template-columns:repeat(2, minmax(0,1fr))}
  .cs-hero{margin-top:48px}

  .cs-text{grid-template-columns:minmax(0,1fr);margin-top:var(--mtm, 0px)}
  .cs-lab,.cs-body{grid-column:1 / -1}
  .cs-lab__in{position:relative;top:auto;padding:0 0 20px}
  .cs-lede{margin-top:20px;font-size:19px}
  .cs-lede--imp{margin-top:28px;font-size:clamp(26px, 3.2vw, 48px)}
  .cs-blk{margin-top:var(--mtm, 0px)}
  .cs-list li{font-size:17px}
  .cs-step{padding:22px 0 30px}
  .cs-step__grid{grid-template-columns:minmax(0,1fr)}
  .cs-metrics{--mfs:52px;grid-template-columns:minmax(0,1fr)}
  .cs-metrics--4{--mfs:40px;grid-template-columns:repeat(2, minmax(0,1fr))}
  .cs-mx,.cs-mx:first-child{padding:0;border-left:0}
  .cs-metrics--4 .cs-mx:nth-child(odd){padding:0 12px 0 0;border-left:0}
  .cs-metrics--4 .cs-mx:nth-child(even){padding:0 0 0 16px;border-left:1px solid var(--rule)}
  .cs-stack{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cs-qa__i,.cs-impact,.cs-trow,.cs-sub,.cs-defs__r,.cs-diag__g,.cs-sub__list--2{grid-template-columns:minmax(0,1fr)}
  .cs-qa__q{font-size:19px}
  .cs-diag__arrow .d{display:none}
  .cs-diag__arrow .m{display:inline}

  .cs-media{margin-top:48px}
  .cs-rows{gap:36px}
  .cs-grid{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .cs-fig{grid-column:1 / -1 !important}
  .cs-phones{flex-direction:row;justify-content:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--m) * -1);padding:0 var(--m) 4px}
  .cs-phrow{display:contents}
  .cs-phone{width:64vw}

  .cs-pn{grid-template-columns:minmax(0,1fr)}
  .cs-pn__a{min-height:200px}
  .cs-pn__a + .cs-pn__a{border-left:0;border-top:1px solid var(--rule)}

  .case .foot{grid-template-columns:minmax(0,1fr) auto}
}

@media (prefers-reduced-motion:reduce){
  .js .cs-title,.js .cs-open__lede,.js .cs-meta > div,.js .cs-hero__clip{animation:none}
}