/* ============================================================
   Case study pages · built on site.css tokens
   Each page sets --acc / --accT (accent + tint) on <main class="case">
   ============================================================ */
.cs-page{ --acc:#420F1B; --accT:#F5EDEF; }
p,li,h1,h2,h3{ text-wrap:pretty; }
.cs-page h1,.cs-page h2,.cs-page h3{ text-wrap:balance; }

/* header */
.case-head{ padding-top:calc(var(--nav-top) + var(--nav-h) + 72px); padding-bottom:40px; }
.case-head__split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }

.case-head__lead{ max-width:420px; color:var(--body); }
.case-head .section-label > span:first-child,.c-sec .section-label > span:first-child{ color:var(--acc); }
.case-head .section-label i,.c-sec .section-label i{ background:var(--acc); }
.cs-page .back{ margin-bottom:24px; }

/* body: sticky side + content */
.case-body{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; padding-top:24px; border-top:1px solid var(--g2); }
.case-side{ position:sticky; top:calc(var(--nav-top-stuck) + var(--nav-h) + 24px); align-self:start; display:flex; flex-direction:column; gap:28px; }
.case-meta{ margin:0; }
.case-meta > div{ padding:14px 0; border-bottom:1px solid var(--g2); }
.case-meta dt{ color:var(--g4); margin-bottom:4px; }
.case-meta dd{ margin:0; }
.case-index{ display:flex; flex-direction:column; gap:4px; }
.case-index > .t-label{ color:var(--g4); margin-bottom:8px; }
.case-index ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.case-index a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius); text-decoration:none; color:var(--body); font-size:14px; font-weight:500; transition:background-color .15s, color .15s; }
.case-index a::before{ content:""; width:2px; height:16px; background:var(--g2); flex:none; transition:background-color .15s; }
.case-index a .n{ font-size:12px; letter-spacing:.14em; color:var(--g4); }
.case-index a:hover{ background:var(--g1); color:var(--ink); }
.case-index a[aria-current="true"]{ background:var(--accT); color:var(--ink); }
.case-index a[aria-current="true"]::before{ background:var(--acc); }
.case-index a[aria-current="true"] .n{ color:var(--acc); }
.case-main{ min-width:0; }

/* crop (keeps Figma crops exactly: img sized/positioned in % of the box) */
.crop{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:var(--ar); }
.crop > img{ position:absolute; max-width:none; width:var(--w); height:var(--h); left:var(--l); top:var(--t); }
@media (max-width:600px){
  .crop{ aspect-ratio:var(--mar,var(--ar)); }
  .crop > img{ width:var(--mw,var(--w)); height:var(--mh,var(--h)); left:var(--ml,var(--l)); top:var(--mt,var(--t)); }
}
.case-cover .crop,.c-figure .crop{ background:var(--g1); }

/* sections */
.c-sec{ padding-top:96px; scroll-margin-top:110px; }
.c-sec > .t-h3{ margin:24px 0; max-width:760px; }
.c-row{ display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.c-box{ background:#fff; border:1px solid var(--g2); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:16px; }
.c-box--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.c-box--tint{ background:var(--accT); border-color:var(--accT); }
.c-box .t-label{ color:var(--g4); }
.c-box--dark .t-label{ color:var(--g3); }
.c-box .t-label.acc{ color:var(--acc); }
.c-box p{ color:var(--body); }
.c-box--dark p,.c-box--dark li{ color:#fff; }
.c-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.c-list li{ position:relative; padding-left:16px; }
.c-list li::before{ content:"·"; position:absolute; left:2px; }
.c-list--muted li{ color:var(--g4); }
.c-roles{ display:grid; grid-template-columns:repeat(var(--rc,2),minmax(0,1fr)); gap:32px; margin-top:16px; }
.c-role{ display:flex; flex-direction:column; gap:10px; }
.c-role.is-mine li,.c-role.is-mine p.t-body-m{ color:var(--ink); }
.c-rule .t-body-l{ color:var(--ink); }
.c-figure{ margin:0; display:flex; flex-direction:column; gap:12px; }
.c-figure figcaption{ color:var(--body); }
.c-figure .crop{ border:1px solid var(--g2); }
.c-note{ color:var(--g4); margin-top:8px; }

/* bento */
.c-bento{ display:flex; flex-direction:column; gap:16px; }
.c-bento .c-row{ margin:0; }
.c-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--g2); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .15s; }
.c-card .crop{ border-radius:0; }
.c-card__t{ padding:24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.c-card__top{ display:flex; align-items:center; gap:10px; }
.c-letter{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; border-radius:var(--pill); background:var(--acc); color:#fff; font-size:12px; font-weight:500; }
.c-card p{ color:var(--g4); }
.c-card .more{ margin-top:auto; color:var(--acc); font-size:14px; font-weight:500; }
.c-card--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.c-card--dark .c-letter{ background:#fff; color:var(--acc); }
.c-card--dark p{ color:var(--g3); }
.c-card--dark .more{ color:#fff; }
@media (hover:hover){ .c-card:hover{ border-color:var(--acc); } .c-card .crop img{ transition:transform .3s ease; } .c-card:hover .crop img{ transform:scale(1.03); } }

/* decision */
.c-eyebrow{ color:var(--acc); }
.c-pdw{ margin:0 0 24px; }
.c-dec > .t-h3{ margin:12px 0 24px; }
.case-head__title h1{ margin:16px 0 0; }
.c-pdw > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; padding:14px 0; border-top:1px solid var(--g2); }
.c-pdw dt{ color:var(--g4); padding-top:5px; }
.c-pdw dd{ margin:0; color:var(--body); }
.c-pdw .is-decision dt{ color:var(--acc); }
.c-pdw .is-decision dd{ color:var(--ink); }
.c-shot{ position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--radius); }
.c-shot img{ width:100%; height:auto; border-radius:var(--radius); }
.c-pin{ position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; border-radius:var(--pill); background:var(--acc); color:#fff; border:2px solid #fff; font-size:12px; font-weight:500; pointer-events:none; }
.c-notes{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.c-notes li{ display:flex; align-items:flex-start; gap:10px; color:var(--body); }
.c-notes .n{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 8px; border-radius:var(--pill); background:var(--accT); color:var(--acc); font-size:12px; font-weight:500; }
.c-screens{ display:flex; justify-content:center; align-items:center; gap:20px; padding:32px; border-radius:var(--radius); background:var(--g1); }
.c-screens.flat{ background:#fff; border:1px solid var(--g2); }
.c-screens .c-shot{ width:auto; flex:var(--fg,1) 1 0; min-width:0; }
.c-screens.phones .c-shot{ flex:0 1 256px; }
.c-screens .c-shot img{ border-radius:6px; box-shadow:0 6px 18px rgba(16,21,26,.10); }
.c-screens.flat .c-shot img{ border-radius:0; box-shadow:none; }
@media (hover:hover){ .c-shot img{ transition:transform .3s ease; } .c-shot:hover img{ transform:scale(1.01); } }
.c-shot:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

/* dark feature box (Lovable / across the flow) */
.c-feature{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:32px; align-items:center; margin-top:56px; padding:32px; border-radius:var(--radius); background:var(--ink); color:#fff; }
.c-feature .crop,.c-next .crop,.c-card .crop{ width:100%; }
.c-feature .t-label{ color:var(--g3); }
.c-feature p{ color:var(--g3); }
.c-feature__t{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

/* process */
.c-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.c-steps li{ display:flex; flex-direction:column; gap:10px; padding:20px 20px 24px; background:#fff; border:1px solid var(--g2); border-radius:var(--radius); }
.c-steps .n{ align-self:flex-start; padding:3px 9px; border-radius:var(--pill); background:var(--accT); color:var(--acc); font-size:12px; font-weight:500; }
.c-steps p{ color:var(--g4); }

/* outcome */
.c-out{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.c-out__big{ justify-content:space-between; }
.c-out__big .t-display-l{ font-size:min(var(--fs-display-l), 88px); margin-bottom:8px; }
.c-out__col{ display:flex; flex-direction:column; gap:16px; }
.c-out .t-display-l,.c-out .t-h2{ color:inherit; }
.c-measure{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; margin-top:16px; padding:28px; border-radius:var(--radius); background:var(--accT); }
.c-measure .t-label{ color:var(--acc); }
.c-learn{ list-style:none; margin:16px 0 0; padding:0; }
.c-learn li{ padding:16px 0; border-top:1px solid var(--g2); color:var(--body); }

/* prototype + next */
.c-proto{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; padding:28px; background:#fff; border:1px solid var(--g2); border-radius:var(--radius); }
.c-proto p{ color:var(--g4); margin-top:6px; }
.c-next{ display:grid; grid-template-columns:minmax(0,1fr) 420px; margin-top:96px; background:#fff; border:1px solid var(--g2); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); }
.c-next__t{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:32px; }
.c-next__t .t-label{ color:var(--g4); }
.c-next .crop{ border-radius:0; }
@media (hover:hover){ .c-next .crop img{ transition:transform .3s ease; } .c-next:hover .crop img{ transform:scale(1.03); } }

/* chips (mobile index) */
.case-chips{ display:none; }

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .case-body{ grid-template-columns:240px minmax(0,1fr); gap:32px; }
  .c-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .c-feature{ grid-template-columns:1fr; }
  .c-next{ grid-template-columns:1fr; } .c-next .crop{ order:-1; }
}
@media (max-width:860px){
  .case-head__split{ flex-direction:column; align-items:flex-start; gap:20px; }
  .case-body{ grid-template-columns:1fr; border-top:0; padding-top:0; }
  .case-side{ position:static; }
  .case-side .case-index,.case-side .tags{ display:none; }
  .case-meta{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; padding:4px 20px; background:#fff; border:1px solid var(--g2); border-radius:var(--radius); }
  .case-meta > div:nth-last-child(-n+2){ border-bottom:0; }
  .case-meta > div:last-child:nth-child(odd){ grid-column:1 / -1; border-top:1px solid var(--g2); }
  .case-chips{ display:block; position:sticky; top:calc(var(--nav-top-stuck) + var(--nav-h) + 8px); z-index:20; margin:16px calc(var(--page-pad) * -1) 0; padding:8px var(--page-pad); background:linear-gradient(var(--paper) 80%, rgba(249,250,251,0)); }
  .case-chips ol{ list-style:none; margin:0; padding:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
  .case-chips ol::-webkit-scrollbar{ display:none; }
  .case-chips a{ flex:none; display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:var(--pill); border:1px solid var(--g2); background:#fff; text-decoration:none; color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap; }
  .case-chips a[aria-current="true"]{ background:var(--acc); border-color:var(--acc); color:#fff; }
  .case-cover{ margin-top:16px; }
}
@media (max-width:600px){
  .case-head{ padding-top:calc(var(--nav-top) + var(--nav-h) + 40px); padding-bottom:24px; }
  .case-head__title .t-display-l{ font-size:clamp(44px, 14vw, var(--fs-display-l)); }
  .c-sec{ padding-top:64px; }
  .c-sec > .t-h3{ margin:16px 0; }
  .c-row,.c-roles,.c-out{ grid-template-columns:1fr; gap:12px; }
  .c-box{ padding:24px; gap:12px; }
  .c-pdw > div{ grid-template-columns:1fr; gap:6px; padding:12px 0; }
  .c-pdw dt{ padding-top:0; }
  .c-screens{ padding:14px; gap:10px; }
  .c-feature{ padding:24px; gap:16px; margin-top:40px; }
  .c-steps{ grid-template-columns:1fr; gap:0; }
  .c-steps li{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:4px 14px; padding:16px 0; background:none; border:0; border-top:1px solid var(--g2); border-radius:0; }
  .c-steps li > div{ flex:1; display:flex; flex-direction:column; gap:4px; }
  .c-measure{ grid-template-columns:1fr; gap:8px; padding:20px; }
  .c-proto{ flex-direction:column; align-items:flex-start; padding:22px; }
  .c-next{ margin-top:64px; } .c-next__t{ padding:24px; }
  .c-pin{ min-width:20px; height:20px; padding:0 6px; font-size:10px; border-width:1.5px; }
  .c-out__col{ gap:12px; }
  .c-out .t-display-l{ font-size:var(--fs-h2); }
}
.case-chips a .n{ margin-right:8px; opacity:.6; }