/* =====================================================================================
   cs.css - case study pages (/work/<slug>/), Sell's Figma frames 694:260 ... 705:3554
   (template frame 694:511 Chloe E Vegan). Loaded AFTER sell.css; uses its tokens.
   Values are Figma px at the 1920 frame: calc(N * var(--u)).
   Column: Sell's frames use a 1520 column; Jesse's 17 Jul law caps ours at 1440 (--wrap),
   so every block below sits 40px further in at 1920 than the frame. Everything else is 1:1.
   Generated by hand, used by tools/case-studies/build.mjs (every case study page).
   ===================================================================================== */

/* ---------- hero (Header 694:514): image 1920 x 928 visible, 40px bottom radius ---------- */
.cs-hero{min-height:clamp(520px,calc(928*var(--u)),928px);--shade:.35}
.cs-hero .s-hero__bg img{object-position:var(--pos,50% 50%)}
.cs-hero .s-hero__bg--contain{background:var(--bgc,#0b2a33)}
.cs-hero .s-hero__bg--contain img{object-fit:contain}
.cs-hero .s-hero__in{padding-bottom:clamp(56px,calc(138*var(--u)),138px)}
.cs-hero__eyebrow{font-family:var(--f-text);font-weight:600;font-size:clamp(14px,calc(20*var(--u)),20px);line-height:1.05;text-transform:uppercase;letter-spacing:0;margin-bottom:clamp(12px,calc(21*var(--u)),21px)}
.cs-hero__title{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,calc(65*var(--u)),65px);line-height:1.077;letter-spacing:-.046em;max-width:calc(var(--tw,900) / 65 * .985em)}
.cs-hero__kicker{position:absolute;z-index:1;right:max(var(--gut),calc((100vw - var(--wrap)) / 2));bottom:clamp(20px,calc(52*var(--u)),52px);font-weight:600;font-size:clamp(12px,calc(14*var(--u)),14px);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
@media (max-width:760px){.cs-hero__kicker{position:static;margin-top:18px}.cs-hero .s-hero__in{display:flex;flex-direction:column}.cs-hero .s-hero__in .cs-hero__kicker{order:9}}

/* ---------- intro (694:531): statement, divider, two columns + right rail ---------- */
.cs-intro{padding-top:clamp(56px,calc(146*var(--u)),146px)}
.cs-intro__grid{display:grid;grid-template-columns:minmax(0,1072fr) minmax(200px,300fr);gap:clamp(28px,calc(80*var(--u)),80px);align-items:start}
.cs-intro__lead{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,calc(45*var(--u)),45px);line-height:1.111;letter-spacing:-.044em;color:var(--ink);max-width:calc(var(--sw,955) / 45 * 1em)}
.cs-intro__rule{border:0;border-top:1px solid var(--line);width:calc(1046 / 1072 * 100%);margin:clamp(24px,calc(33*var(--u)),33px) 0 clamp(32px,calc(63*var(--u)),63px)}
.cs-cols{display:grid;grid-template-columns:minmax(0,505fr) minmax(0,475fr);gap:clamp(24px,calc(92*var(--u)),92px)}
.cs-copy{font-family:var(--f-text);font-weight:700;font-size:clamp(17px,calc(22*var(--u)),22px);line-height:1.5;color:var(--muted)}
.cs-copy p+p,.cs-copy p+h3,.cs-copy ul+p{margin-top:1em}
.cs-copy b,.cs-copy strong{color:var(--ink);font-weight:700}
.cs-copy a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.cs-copy h3{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,calc(26*var(--u)),26px);line-height:1.2;letter-spacing:-.03em;color:var(--ink);margin-bottom:.35em}
.cs-copy p+h3,.cs-copy ul+h3{margin-top:1.3em}
.cs-copy ul{list-style:none;display:grid;gap:.7em;margin-top:.9em}
.cs-copy li{padding-left:22px;position:relative}
.cs-copy li::before{content:"";position:absolute;left:0;top:.62em;width:9.5px;height:9.5px;border-radius:50%;background:var(--dot)}
.cs-rail{text-align:right;font-family:var(--f-text);font-weight:700;font-size:clamp(17px,calc(22*var(--u)),22px);line-height:1.364;display:flex;flex-direction:column;align-items:flex-end}
.cs-rail dl{display:grid;gap:clamp(24px,calc(76*var(--u)),76px)}
.cs-rail dt{color:#999}
.cs-rail dd{margin-top:clamp(4px,calc(8*var(--u)),8px);color:var(--ink)}
.cs-rail dd a{display:block;color:var(--ink);transition:color .2s}
.cs-rail dd a:hover{color:var(--teal)}
.cs-rail .s-btn{margin-top:clamp(28px,calc(46*var(--u)),46px);font-weight:700;padding:0 26px 0 41px}
.cs-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-family:Inter,var(--f-text);font-weight:700;font-size:20px;line-height:1}
@media (max-width:980px){.cs-intro__grid{grid-template-columns:1fr}.cs-rail{text-align:left;align-items:flex-start}.cs-rail dl{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 40px;width:100%}}
@media (max-width:640px){.cs-cols{grid-template-columns:1fr}}

/* ---------- big image blocks "1" (694:528) and "02" (694:570): 1520 x 943 ---------- */
.cs-media{position:relative;aspect-ratio:1520/943;border-radius:clamp(14px,calc(25*var(--u)),25px);overflow:hidden;background:var(--bgc,var(--card))}
.cs-media img{width:100%;height:100%;object-fit:cover}
.cs-media--contain img{object-fit:contain}
.cs-media--1{margin-top:clamp(48px,calc(97*var(--u)),97px)}
.cs-media--2{margin-top:clamp(56px,calc(145*var(--u)),145px)}

/* ---------- dark approach block "01" (694:548): full-bleed, 24px radius, photos overhang ---------- */
.cs-dark{position:relative;isolation:isolate;margin-top:clamp(64px,calc(188*var(--u)),188px);padding-top:clamp(56px,calc(155*var(--u)),155px);color:#fff;
  --imgw:calc(var(--wrap) - 48 * var(--u));--ov:calc(var(--imgw) * 344 / 1477)}
.cs-dark::before{content:"";position:absolute;inset:0 0 var(--ov) 0;background:var(--dark);border-radius:24px;z-index:-1}
.cs-dark::after{content:"";position:absolute;inset:0 0 var(--ov) 0;background:url(../img/s/noise.png) 0 0/256px 256px;opacity:.05;border-radius:24px;z-index:-1;pointer-events:none}
.cs-dark__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:start}
.cs-dark .s-eyebrow{font-size:clamp(14px,calc(18*var(--u)),18px);line-height:1.333;gap:9.5px}
.cs-dark__h{margin-top:clamp(14px,calc(23*var(--u)),23px);font-family:var(--f-display);font-weight:700;font-size:clamp(26px,calc(45*var(--u)),45px);line-height:1.178;letter-spacing:-.022em;color:#fff;max-width:calc(var(--hw,982) / 45 * 1em)}
.cs-dark__b{margin-top:clamp(16px,calc(25*var(--u)),25px);font-family:var(--f-text);font-weight:700;font-size:clamp(16px,calc(20*var(--u)),20px);line-height:1.35;color:#fff;max-width:calc(1047 / 20 * 1em)}
.cs-dark__b p+p{margin-top:.8em}
.cs-dark__head .s-btn{margin-top:clamp(0px,calc(79*var(--u)),79px);font-weight:700;padding:0 26px 0 46px}
.cs-dark__imgs{display:grid;grid-template-columns:minmax(0,var(--lw,746fr)) minmax(0,var(--rw,731fr));gap:calc(48 * var(--u));margin-top:clamp(40px,calc(102*var(--u)),102px)}
.cs-dark__imgs figure{position:relative;border-radius:clamp(18px,calc(30*var(--u)),30px);overflow:hidden;aspect-ratio:var(--ar,746/778);background:var(--dark-2)}
.cs-dark__imgs figure:last-child{--ar:var(--ar2,731/778)}
.cs-dark__imgs img{width:100%;height:100%;object-fit:cover}
.cs-dark__imgs .is-contain img{object-fit:contain}
@media (max-width:760px){
  .cs-dark{--ov:calc(var(--wrap) * .42)}
  .cs-dark__head{grid-template-columns:1fr}
  .cs-dark__head .s-btn{justify-self:start;margin-top:4px}
  .cs-dark__imgs{grid-template-columns:1fr;gap:16px}
}

/* ---------- project overview (694:562): The Challenge / Our Approach, 32px inset ---------- */
.cs-ov{margin-top:clamp(56px,calc(101*var(--u)),101px);padding-left:clamp(0px,calc(32*var(--u)),32px);max-width:calc(1344 * var(--u) + 32 * var(--u));min-width:0}
.cs-ov__item+.cs-ov__item{margin-top:clamp(40px,calc(52*var(--u)),52px)}
.cs-ov__h{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,calc(45*var(--u)),45px);line-height:1.467;letter-spacing:-.044em;color:var(--ink)}
.cs-ov .cs-copy{margin-top:clamp(6px,calc(11*var(--u)),11px);line-height:1.2}
.cs-ov .cs-copy p+p{margin-top:.8em}
.cs-ov .cs-copy h3+p{margin-top:0}
@media (max-width:1100px){.cs-ov{max-width:none}}

/* ---------- The Result (694:590) ---------- */
.cs-result{display:grid;grid-template-columns:minmax(0,715fr) minmax(0,752fr);gap:0;margin-top:clamp(56px,calc(88*var(--u)),88px);padding-left:clamp(0px,calc(32*var(--u)),32px)}
.cs-result__h{font-family:var(--f-display);font-weight:600;font-size:clamp(34px,calc(60*var(--u)),60px);line-height:1.1;letter-spacing:-.017em;color:#000}
.cs-result__lead{margin-top:clamp(16px,calc(30*var(--u)),30px);font-family:var(--f-display);font-weight:700;font-size:clamp(22px,calc(36*var(--u)),36px);line-height:1.25;letter-spacing:-.056em;color:var(--ink);max-width:calc(var(--rsw,627) / 36 * 1em)}
.cs-result .s-btn{margin-top:clamp(24px,calc(37*var(--u)),37px);font-weight:700;padding:0 28px}
.cs-result__r{padding-top:clamp(0px,calc(78*var(--u)),78px)}
.cs-result__r .cs-copy{line-height:1.2}
.cs-result__r .cs-copy p+p{margin-top:.8em}
@media (max-width:900px){.cs-result{grid-template-columns:1fr;gap:28px}.cs-result__r{padding-top:0}}

/* ---------- FAQ + qualify (added for SEO in Sell's s-faq component) ---------- */
.cs-faq{margin-top:clamp(72px,calc(150*var(--u)),150px)}
.cs-faq .s-h2{margin-top:12px}
.cs-faq .s-lede{margin-top:clamp(16px,calc(22*var(--u)),22px)}
.cs-faq .s-btns{margin-top:clamp(22px,calc(32*var(--u)),32px)}
.cs-faq .cs-call{font-weight:600;font-size:16px;color:var(--ink)}
.cs-faq .cs-call a{color:var(--teal);font-weight:700}
.cs-faq .cs-support{margin-top:18px;font-weight:500;font-size:clamp(14px,calc(16*var(--u)),16px);line-height:1.5;color:var(--muted);max-width:460px}
.cs-faq .faq-a a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ---------- divider + "What next?" (694:615) ---------- */
.cs-rule{border:0;border-top:1px solid #d6d6d6;margin-top:clamp(64px,calc(151*var(--u)),151px)}
.cs-next{padding-top:clamp(56px,calc(114*var(--u)),114px);--notch:#fff}
.cs-next .s-head{margin-bottom:clamp(30px,calc(81*var(--u)),81px);align-items:end}
.cs-next .s-eyebrow{font-size:clamp(14px,calc(18*var(--u)),18px);margin-bottom:clamp(12px,calc(24*var(--u)),24px);gap:9.5px}
.cs-next .s-h2{letter-spacing:-.033em;line-height:1.1}
.cs-next .s-head .s-btn{font-weight:700;padding:0 20px 0 32px}
.cs-next .s-slide__img{background:var(--bgc,var(--card))}
.cs-next .s-slide__img img{object-fit:contain}
.cs-next .s-slide__img.is-cover img{object-fit:cover}
.cs-next .s-slide__tab img{width:61px;height:61px}
.cs-next .s-slide h3{font-size:clamp(20px,calc(24*var(--u)),24px);line-height:1.2;margin:18px 0 0 4px}
.cs-next .s-slide p{margin:6px 0 0 4px;font-size:clamp(14px,calc(16*var(--u)),16px)}
.cs-next .s-slider__nav{margin-top:clamp(30px,calc(58*var(--u)),58px)}
.cs-next + .s-marquee{margin-top:clamp(40px,calc(120*var(--u)),120px)}
@media (max-width:640px){.cs-next .s-slide{flex-basis:86vw}.cs-next .s-slide__tab{width:96px;height:64px;padding-right:14px}.cs-next .s-slide__tab img{width:46px;height:46px}}

/* client's own words, kept from the pre-rebuild page, under The Result */
.cs-quote{margin-top:clamp(24px,calc(36*var(--u)),36px);padding-left:clamp(18px,calc(24*var(--u)),24px);border-left:2px solid var(--dot)}
.cs-quote p{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,calc(24*var(--u)),24px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.cs-quote footer{margin-top:10px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* quick answer (AI search, Jesse 28 Sep): sits between the hero and Sell's intro, her lede style */
.cs-answer{padding-top:clamp(48px,calc(110*var(--u)),110px)}
.cs-answer__in{max-width:min(1100px,var(--wrap))}
.cs-answer__q{font-family:var(--f-text);font-weight:600;font-size:clamp(14px,calc(18*var(--u)),18px);line-height:1.3;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:9.5px;margin-bottom:clamp(12px,calc(18*var(--u)),18px)}
.cs-answer__q::before{content:"";width:9.5px;height:9.5px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.cs-answer .s-lede{color:var(--ink);font-size:clamp(18px,calc(24*var(--u)),24px);line-height:1.45}
.cs-answer .s-lede a{color:var(--teal)}
.cs-answer + .cs-intro{padding-top:clamp(48px,calc(96*var(--u)),96px)}
.cs-dark__b a{color:#b9dfe9;text-decoration:underline;text-underline-offset:3px}