/* Precious — case study page system (shared by every /work/* page) */
.cs-head{padding:168px 0 0}
.cs-kick{display:flex;gap:10px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
.cs-kick .k{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.cs-kick .t{font-size:13px;color:var(--ink-faint)}
.cs-title{font-size:clamp(40px,6vw,88px);line-height:.98;max-width:16ch}
.cs-sub{margin-top:24px;font-size:clamp(19px,1.9vw,26px);line-height:1.4;color:var(--ink-dim);max-width:44ch;font-weight:500}
.cs-hero-row{display:grid;grid-template-columns:1fr 300px;gap:40px;margin-top:52px;align-items:start}
.cs-media{border-radius:var(--r-card);overflow:hidden;background:var(--dark);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative}
.cs-media.teal{background:#2d4d57}.cs-media.tan{background:var(--tan-deep)}
.cs-media .mark{color:var(--bg);opacity:.6;font-size:clamp(30px,4vw,64px);font-weight:600;letter-spacing:-.03em;text-align:center;padding:0 20px}
.cs-media.tan .mark{color:var(--ink)}
.cs-media .ph{position:absolute;left:22px;bottom:20px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(248,240,227,.4)}
.cs-media.tan .ph{color:var(--ink-faint)}
.cs-meta{display:flex;flex-direction:column;gap:24px;padding-top:6px}
.cs-meta .row .lbl{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.cs-meta .row .val{font-size:16px;line-height:1.45;color:var(--ink)}
@media(max-width:900px){.cs-hero-row{grid-template-columns:1fr}.cs-meta{flex-direction:row;flex-wrap:wrap;gap:28px}.cs-meta .row{min-width:130px}}

section.cs{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.cs-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,6vw,90px);align-items:start}
.cs-grid .lead .kicker{margin-bottom:18px;display:block}
.cs-grid .lead h2{font-size:clamp(30px,3.6vw,50px);max-width:16ch}
.cs-grid .body p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-dim);margin-bottom:20px}
.cs-grid .body p:last-child{margin-bottom:0}
.cs-grid .body p strong{color:var(--ink);font-weight:500}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr;gap:24px}}

.probs{list-style:none;margin:8px 0 0;display:flex;flex-direction:column}
.probs li{padding:22px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink)}
.probs li:last-child{border-bottom:1px solid var(--line)}
.probs li b{color:var(--accent);font-weight:600;margin-right:12px}

.full-media{border-radius:var(--r-card);overflow:hidden;background:var(--tan-deep);aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;position:relative;margin:8px 0}
.full-media.dark{background:var(--dark)}
.full-media .mark{opacity:.5;font-size:clamp(22px,2.6vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--ink);text-align:center;padding:0 20px}
.full-media.dark .mark{color:var(--bg)}
.full-media .ph{position:absolute;left:22px;bottom:18px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.full-media.dark .ph{color:rgba(248,240,227,.4)}

.sol-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.sol-card{background:var(--tan);border-radius:28px;padding:32px 28px}
.sol-card .n{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.05em;margin-bottom:18px}
.sol-card h3{font-size:22px;letter-spacing:-.01em;margin-bottom:12px;line-height:1.15}
.sol-card p{font-size:15px;line-height:1.55;color:var(--ink-dim)}
@media(max-width:820px){.sol-cards{grid-template-columns:1fr}}

.impact{background:var(--dark);color:var(--bg);border-radius:var(--r-panel);padding:clamp(60px,8vw,110px) 0}
.impact .inner{padding:0 8%}
.impact .kicker{color:var(--accent)}
.impact h2{color:var(--bg);font-size:clamp(30px,3.6vw,50px);max-width:18ch;margin:16px 0 60px}
.impact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.istat .n{font-size:clamp(38px,5vw,72px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--bg)}
.istat .d{margin-top:14px;font-size:15px;line-height:1.5;color:rgba(248,240,227,.6);max-width:26ch}
@media(max-width:820px){.impact-stats{grid-template-columns:1fr 1fr;gap:36px 24px}}

.takeaways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tk{border-top:2px solid var(--accent);padding-top:20px}
.tk h3{font-size:19px;margin-bottom:10px;line-height:1.2}
.tk p{font-size:15px;line-height:1.55;color:var(--ink-dim)}
@media(max-width:820px){.takeaways{grid-template-columns:1fr}}

.cs-quote{text-align:center;padding:clamp(60px,9vw,120px) 8%}
.cs-quote blockquote{font-size:clamp(24px,3.2vw,44px);line-height:1.25;letter-spacing:-.02em;font-weight:500;max-width:20ch;margin:0 auto}
.cs-quote cite{display:block;margin-top:30px;font-style:normal;font-size:15px;color:var(--ink-dim)}
.cs-quote cite b{color:var(--ink);font-weight:600}

.nextcase{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:36px 0;flex-wrap:wrap}
.nextcase .lab{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.nextcase a{font-size:clamp(22px,2.6vw,36px);font-weight:500;letter-spacing:-.02em}
.nextcase a:hover{color:var(--accent)}

/* real media wired in from precious.studio */
.cs-media video{width:100%;height:100%;object-fit:cover;display:block}
.cs-gallery{column-count:2;column-gap:18px;margin:8px 0}
.cs-gallery>*{width:100%;height:auto;display:block;border-radius:22px;margin:0 0 18px;break-inside:avoid;background:var(--tan-deep)}
@media(max-width:700px){.cs-gallery{column-count:1}}

/* full-width hero video (proper aspect) + meta strip + contextual media sets */
/* hero is a showcase: wider than body content, centered on the page (margin-centered so the reveal transform can't fight it) */
.cs-hero-video{width:min(1560px,calc(100vw - 64px));margin-top:44px;margin-left:calc((100% - min(1560px,calc(100vw - 64px)))/2);border-radius:var(--r-card);overflow:hidden;background:var(--dark);line-height:0}
.cs-hero-video video{width:100%;height:auto;display:block}
.cs-meta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.cs-meta-strip .lbl{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.cs-meta-strip .val{font-size:15px;line-height:1.45;color:var(--ink)}
@media(max-width:820px){.cs-meta-strip{grid-template-columns:1fr 1fr;gap:22px}}
/* media set: wide clips full container width (natural ratio, no crop); small details pair in equal cells */
.mset{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.mset>img,.mset>video{width:100%;height:auto;display:block;border-radius:20px;background:var(--tan-deep)}
.mrow{display:grid;gap:18px}
.mrow.two{grid-template-columns:1fr 1fr}
.mrow.three{grid-template-columns:repeat(3,1fr)}
.mrow>img,.mrow>video{width:100%;height:100%;object-fit:cover;border-radius:20px;background:var(--tan-deep);aspect-ratio:1/1}
@media(max-width:760px){.mrow.two,.mrow.three{grid-template-columns:1fr}.mrow>img,.mrow>video{aspect-ratio:4/3}}

/* before / after labelled media */
.mfig{margin:30px 0 0}
.mframe{position:relative;border-radius:20px;overflow:hidden;line-height:0;background:var(--tan-deep)}
.mframe>img,.mframe>video{width:100%;height:auto;display:block}
.mtag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:rgba(13,2,3,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--bg);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:9px 15px;border-radius:100px}
.mtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mtag.after{background:var(--accent);color:#fff}
.mtag.after::before{background:#fff}
.mcap{margin-top:16px;font-size:14px;line-height:1.55;color:var(--ink-dim);max-width:60ch}

/* "case study on request" gate for real projects without a published write-up */
.req-gate{background:var(--dark);color:var(--bg);border-radius:var(--r-panel);padding:clamp(48px,7vw,96px) clamp(32px,6vw,80px);text-align:center;margin-top:20px;position:relative;overflow:hidden}
.req-gate::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(248,240,227,.06) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 80% at 20% 0%,#000,transparent 72%);mask-image:radial-gradient(70% 80% at 20% 0%,#000,transparent 72%);pointer-events:none}
.req-gate>*{position:relative}
.req-gate .kicker{color:var(--accent);display:block;margin-bottom:18px}
.req-gate h2{font-size:clamp(30px,4vw,54px);letter-spacing:-.02em;color:var(--bg);max-width:20ch;margin:0 auto}
.req-gate p{margin:20px auto 0;max-width:52ch;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:rgba(248,240,227,.66)}
.req-gate .cta-row{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.req-gate .btn.ghost{color:var(--bg);border-color:rgba(248,240,227,.28)}
.req-gate .btn.ghost:hover{color:var(--accent);border-color:var(--accent);background:transparent}