/* ===== LADY DESIGN — CASE STUDY STORY-BLOCK SYSTEM =====
   Extends ld-system.css + ld-stage.css (same tokens, type scale, radii, rhythm).
   One architecture, many stories: each .sb is one story block.
   Geometry only — content lives in case-projects.js. */
.cs-hero{padding-bottom:clamp(30px,4vw,56px)}
.cs-flagline{margin-bottom:clamp(18px,2.4vw,30px)}
.cs-flag{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
html[lang="ar"] .cs-flag{letter-spacing:.02em;text-transform:none;font-size:12.5px}
.cs-flag i{width:6px;height:6px;border-radius:50%;background:var(--cs-accent,var(--violet))}
.cs-flag em{font-style:normal}
.cs-hero .cs-name{max-width:22ch}
.cs-hero .cs-line{font-size:clamp(19px,2.4vw,34px);max-width:28ch;color:var(--ink);letter-spacing:-.025em}
html[lang="ar"] .cs-hero .cs-line{max-width:32ch;line-height:1.5}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(38px,5vw,68px);padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
.cs-meta dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
html[lang="ar"] .cs-meta dt{letter-spacing:.02em;text-transform:none;font-size:12px}
.cs-meta dd{font-size:15px;font-weight:500;line-height:1.35}
.cs-conf{margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--line2);font-size:clamp(15px,1.15vw,17px);line-height:1.62;color:var(--ink);opacity:.74;max-width:54ch}
@media (max-width:820px){.cs-meta{grid-template-columns:repeat(2,1fr)}}
.sb-hero-media{margin-top:clamp(26px,4vw,56px)}

/* ---------- block rhythm ---------- */
.sb{padding-block:clamp(48px,6vw,96px)}
.sb+.sb{padding-top:0}
.sb-ink{background:var(--cs-ink,var(--ink));color:var(--cs-ink-fg,var(--paper));border-radius:clamp(20px,3vw,34px);margin-block:clamp(34px,5vw,74px);padding-block:clamp(50px,7vw,100px)}
.sb-ink+.sb{padding-top:0}
/* .sb+.sb{padding-top:0} outranks .sb-ink's padding-block — restore it */
.sb.sb-ink{padding-top:clamp(50px,7vw,100px)}
.sb-ink .eyebrow{color:rgba(247,246,242,.5)}
.sb-ink .sb-copy p{color:rgba(247,246,242,.7)}
.sb-ink .cs-cap{color:rgba(247,246,242,.45)}
.sb-title{font-size:clamp(28px,4.4vw,66px);line-height:1;letter-spacing:-.045em;margin-top:18px;max-width:20ch}
html[lang="ar"] .sb-title{line-height:1.24;letter-spacing:-.035em;max-width:22ch}
.sb-title.sm{font-size:clamp(22px,2.6vw,40px);max-width:26ch}
.sb-copy{margin-top:clamp(18px,2.2vw,28px)}
.sb-copy p{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.62;color:var(--mut);max-width:54ch}
.sb-copy p+p{margin-top:1em}
.sb-copy strong{color:var(--ink);font-weight:500}
.sb-ink .sb-copy strong{color:var(--paper)}
.sb-metric{margin-top:clamp(22px,3vw,34px);border-top:2px solid currentColor;padding-top:14px;display:inline-block}
.sb-metric b{display:block;font-size:clamp(28px,3.6vw,52px);font-weight:500;letter-spacing:-.05em;line-height:1}
.sb-metric span{display:block;margin-top:8px;font-size:13px;color:var(--mut)}
.sb-quote{margin-top:clamp(22px,3vw,32px);padding-inline-start:18px;border-inline-start:2px solid var(--cs-accent,var(--violet));font-size:clamp(16px,1.6vw,21px);line-height:1.45;max-width:40ch}

/* ---------- context ---------- */
.sb-2col{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,3vw,52px);align-items:start}
.sb-lead{font-size:clamp(24px,3.2vw,46px);line-height:1.06;letter-spacing:-.04em;margin-bottom:clamp(20px,2.4vw,32px);max-width:26ch}
html[lang="ar"] .sb-lead{line-height:1.32;letter-spacing:-.03em;max-width:28ch}
.sb-ctx-body p{font-size:clamp(16.5px,1.3vw,19px);line-height:1.65;color:var(--mut);max-width:62ch}
.sb-ctx-body p+p{margin-top:1em}
.sb-ctx-body p:first-child{font-size:clamp(17px,1.5vw,22px);color:var(--ink);line-height:1.48}
.sb-owned{list-style:none;margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 28px;padding-top:20px;border-top:1px solid var(--line)}
.sb-owned li{font-size:14px;color:var(--mut);position:relative;padding-inline-start:16px}
.sb-owned li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;width:7px;height:1px;background:var(--cs-accent,var(--violet))}
@media (max-width:860px){.sb-2col{grid-template-columns:1fr;gap:14px}}

/* ---------- layouts ---------- */
/* scoped to the inner element: a section also carries .sb-<type>, so an unscoped
   .sb-split rule would turn the whole section into the two-column grid */
.wrap>.sb-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,84px);align-items:center}
.wrap>.sb-split.rev .sb-viz{order:-1}
@media (max-width:1000px){.wrap>.sb-split{grid-template-columns:1fr;gap:26px}.wrap>.sb-split.rev .sb-viz{order:0}}
.sb-head{max-width:min(100%,880px)}
.sb-wide{margin-top:clamp(26px,4vw,54px)}
.sb-wide.first{margin-top:0}
.sb-after{margin-top:clamp(24px,3vw,42px);max-width:620px;margin-inline-start:auto}
html[lang="ar"] .sb-after{margin-inline-start:0;margin-inline-end:auto}
.sb-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);margin-top:clamp(26px,4vw,50px)}
@media (max-width:760px){.sb-two{grid-template-columns:1fr}}
.sb-stmt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:center}
.sb-stmt.solo{grid-template-columns:1fr}
.sb-big{font-size:clamp(28px,5.2vw,82px);line-height:1;letter-spacing:-.05em;font-weight:500;margin-top:16px;max-width:22ch}
html[lang="ar"] .sb-big{line-height:1.26;letter-spacing:-.04em;max-width:24ch}
@media (max-width:860px){.sb-stmt{grid-template-columns:1fr}}
.sb-media{position:relative;border-radius:clamp(14px,2vw,26px);overflow:hidden;background:#EFEDE8}
.cs-fig{margin:0}
.sb-panel{border:1px solid var(--line);border-radius:clamp(14px,2vw,24px);padding:clamp(16px,2.2vw,28px);background:#fff}
.sb-ink .sb-panel{background:rgba(247,246,242,.04);border-color:rgba(247,246,242,.14)}
.sb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,3vw,32px)}
.sb-tags span{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12px;color:var(--mut)}
.sb-ink .sb-tags span{border-color:rgba(247,246,242,.22);color:rgba(247,246,242,.66)}

/* sequence + chain */
.sb-seq,.sb-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-top:clamp(28px,4vw,50px);background:transparent;border-radius:clamp(14px,2vw,20px);overflow:hidden}
.sb-seq>div,.sb-chain>div{background:transparent;border:1px solid var(--line);margin-block-start:-1px;margin-inline-start:-1px;padding:clamp(18px,2.2vw,28px) clamp(15px,1.8vw,22px)}
.sb-ink .sb-seq>div,.sb-ink .sb-chain>div{border-color:rgba(247,246,242,.16)}
.sb-seq .k,.sb-chain .k{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--cs-accent-text,var(--cs-accent,var(--violet)));margin-bottom:10px}
.sb-ink .sb-seq .k,.sb-ink .sb-chain .k{color:var(--cs-accent-ink,var(--pink))}
.sb-seq .n,.sb-chain .n{display:block;font-size:clamp(15px,1.5vw,20px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.sb-seq .d{display:block;margin-top:9px;font-size:13px;line-height:1.45;color:var(--mut)}
.sb-ink .sb-seq .d{color:rgba(247,246,242,.6)}

/* facts + columns */
.sb-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(32px,4vw,58px)}
.sb-facts>div{border-top:2px solid currentColor;padding-top:16px}
.sb-facts .k{font-size:clamp(28px,4vw,58px);font-weight:500;letter-spacing:-.055em;line-height:1}
html[lang="ar"] .sb-facts .k{letter-spacing:-.035em}
.sb-facts .v{margin-top:10px;font-size:13px;color:var(--mut);max-width:20ch}
.sb-ink .sb-facts .v{color:rgba(247,246,242,.6)}
@media (max-width:700px){.sb-facts{grid-template-columns:1fr 1fr}}
.sb-cols{display:grid;gap:0;margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line)}
.sb-cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-cols>div{padding:clamp(24px,3vw,40px) clamp(18px,2.2vw,32px);border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line)}
.sb-cols.c3>div:first-child,.sb-cols.c4>div:nth-child(odd){border-inline-start:0}
.sb-cols .k{display:block;font-size:11px;letter-spacing:.14em;color:var(--cs-accent-text,var(--cs-accent,var(--violet)));margin-bottom:12px}
.sb-cols h3{margin-bottom:10px}
.sb-cols p{font-size:14.5px;color:var(--mut);max-width:42ch}
@media (max-width:860px){.sb-cols.c3,.sb-cols.c4{grid-template-columns:1fr}.sb-cols>div{border-inline-start:0!important}}

/* outcome */
.sb-out-q{margin-top:clamp(38px,5vw,80px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);font-size:clamp(22px,3.4vw,48px);line-height:1.1;letter-spacing:-.04em;font-weight:500;max-width:34ch}
html[lang="ar"] .sb-out-q{line-height:1.4;letter-spacing:-.03em;max-width:38ch}
/* direction-aware back arrow */
.cs-back i{display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
html[dir="rtl"] .cs-back i{transform:scaleX(-1)}

/* ===== ORIGINAL ABSTRACT VISUALS (no client IP) ===== */
.v{position:relative;width:100%;height:100%;overflow:hidden;font-variant-numeric:tabular-nums}
.v-ink{background:linear-gradient(155deg,#1B1626 0%,#141019 55%,#0E0B12 100%);color:var(--paper)}
.v-soft{background:linear-gradient(150deg,#EFE7F8 0%,#F6EEF0 54%,#E8EDF6 100%);color:var(--ink)}
.v-g{position:absolute;inset:0;background-image:linear-gradient(var(--gl,rgba(247,246,242,.06)) 1px,transparent 1px),linear-gradient(90deg,var(--gl,rgba(247,246,242,.06)) 1px,transparent 1px);background-size:46px 46px}
.v-soft .v-g{--gl:rgba(11,10,13,.055)}
.v-pad{position:absolute;inset:clamp(18px,4.2%,42px)}
.v-num{position:absolute;inset-inline-end:4%;top:auto;bottom:4%;font-size:clamp(80px,15vw,190px);font-weight:500;letter-spacing:-.06em;line-height:.85;opacity:.1}
.v-lbl{position:absolute;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.v-lbl.s{inset-inline-start:0;top:0}.v-lbl.e{inset-inline-end:0;top:0}.v-lbl.b{top:auto;bottom:0}
.v-bars{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:flex-end;gap:2.2%}
.v-bars i{flex:1;background:currentColor;opacity:.2;border-radius:3px 3px 0 0}
.v-bars i.on{opacity:1;color:var(--pink)}
.v-ln{position:absolute;height:1px;background:currentColor;opacity:.32}
.v-dot{position:absolute;width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;opacity:.55}
.v-dot.f{background:var(--pink);border-color:var(--pink);opacity:1}
.v-hub{position:absolute;width:68px;height:68px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:11px;letter-spacing:.02em;font-weight:500}
.v-ring{position:absolute;border-radius:50%;background:conic-gradient(var(--pink) var(--p,64%),rgba(247,246,242,.14) 0);display:grid;place-items:center}
.v-ring::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#141019}
.v-soft .v-ring::after{background:#F6EEF0}
.v-ring b{position:relative;z-index:1;font-size:13px;font-weight:500}
.v-hz .hz-top{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(14px,2.4vw,26px)}
.v-hz .hz-top span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.v-hz .hz-top b{font-size:clamp(18px,2.6vw,34px);font-weight:500;letter-spacing:-.04em}
.v-hz .v-pad{display:flex;flex-direction:column}
.v-hz .hz-row{flex:1;display:flex;align-items:stretch;gap:clamp(6px,.9vw,10px);width:var(--w);opacity:var(--o);margin-bottom:clamp(8px,1.4vw,16px)}
.v-hz .hz-row:last-of-type{margin-bottom:0}
.v-hz .hz-row i{flex:1;border-radius:5px;background:currentColor}
.v-hz .hz-row i.f{background:var(--violet)}
.v-arc .arc-rail{position:absolute;inset-inline:0;top:52%;height:1px;background:rgba(247,246,242,.2)}
.v-arc .arc-row{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:clamp(8px,1.6vw,20px)}
.v-arc .arc-st{position:relative;padding-top:clamp(34px,6vw,64px)}
.v-arc .arc-st .dot{position:absolute;top:calc(52% - 46px);inset-inline-start:0;width:calc(9px + 15px * var(--s));height:calc(9px + 15px * var(--s));border-radius:50%;background:var(--pink);opacity:calc(.3 + .7 * var(--s))}
.v-arc .arc-st .k{display:block;font-size:10px;letter-spacing:.18em;opacity:.45;margin-bottom:8px}
.v-arc .arc-st .n{display:block;font-size:clamp(14px,1.8vw,24px);font-weight:500;letter-spacing:-.03em}
.v-arc .arc-st .d{display:block;margin-top:8px;font-size:11.5px;line-height:1.45;opacity:.58;max-width:20ch}
.v-disc{display:grid;gap:9px}
.v-disc>div{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.v-disc .t{font-size:14px;font-weight:500}
.v-disc .m{font-size:12px;color:var(--mut)}
.v-disc>div.dim{opacity:.44}
.sb-ink .v-disc>div{border-color:rgba(247,246,242,.16)}
.sb-ink .v-disc .m{color:rgba(247,246,242,.55)}
.v-mx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
.v-tile{border-radius:14px;padding:16px;border:1px solid var(--line);overflow:hidden}
.v-tile.lt{background:#fff;color:var(--ink)}
.v-tile.dk{background:#17131F;color:var(--paper);border-color:rgba(247,246,242,.14)}
.v-tile .th{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-bottom:13px}
.v-tile .ln{height:8px;border-radius:4px;background:currentColor;opacity:.15;margin-bottom:7px}
.v-tile .ln.a{opacity:.45;width:58%}.v-tile .ln.b{width:88%}.v-tile .ln.c{width:72%}
.v-tile .nums{display:flex;gap:6px;margin-top:12px}
.v-tile .nums span{height:20px;flex:0 0 46px;border-radius:5px;background:var(--violet);opacity:.5}
.v-tile .nums span:last-child{flex:0 0 28px;opacity:.22}
.v-tile .pills{display:flex;gap:6px;margin-top:12px}
.v-tile .pills i{height:13px;border-radius:999px;background:currentColor}
.v-tile .pills .p1{width:34px;opacity:.7}.v-tile .pills .p2{width:20px;opacity:.18}
.v-layers{display:grid;gap:8px}
.v-layers>div{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 17px;background:linear-gradient(90deg,rgba(123,82,171,calc(.05 + var(--i,0)*.05)),rgba(123,82,171,.015))}
.sb-ink .v-layers>div{border-color:rgba(247,246,242,.14)}
.v-layers .k{font-size:10px;letter-spacing:.16em;opacity:.45}
.v-layers .n{font-size:14px;font-weight:500;letter-spacing:-.015em}


/* ---------- real product screenshots ---------- */
.sb-media.shot{background:var(--cs-plate,#EDEAE4);border:1px solid var(--line)}
.sb-media.shot image-slot,.sb-media.shot video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center top)}
.sb-media.shot img{object-position:var(--pos,center top)}
.cs-cap{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--mut);max-width:56ch}

/* film — one cinematic product moment, media only */
.sb-film{padding-block:clamp(56px,8vw,132px)}
.sb-film .wrap{width:min(1560px,calc(100% - 32px))}
.sb-filmw .sb-media{border-radius:clamp(14px,2vw,26px)}
.sb-filmw .cs-fig+.cs-fig{margin-top:clamp(14px,2vw,24px)}

/* stack — primary screen with an overlapping detail crop */
.sb-stackw{position:relative}
.sb-stackw .sb-inset{position:absolute;inset-inline-end:clamp(-14px,-1.6vw,-8px);bottom:clamp(-26px,-3vw,-16px);width:clamp(120px,15%,208px)}
.sb-stackw .sb-inset .sb-media{border-radius:clamp(10px,1.2vw,16px);box-shadow:0 24px 60px -18px rgba(11,10,13,.42);background:#fff}
.sb-stackw .sb-inset image-slot{object-fit:contain;object-position:center}
@media (max-width:760px){.sb-stackw .sb-inset{position:static;width:clamp(140px,42%,200px);margin-top:16px}}
.sb-stack+.sb{padding-top:clamp(40px,5vw,72px)}

/* responsive pairing — phone beside a desktop screen bleeding off the inline-end edge */
.sb-responsive{overflow:clip}
.sb-resp{position:relative;margin-top:clamp(30px,4.5vw,68px);display:grid;grid-template-columns:clamp(150px,19%,272px) minmax(0,1fr);gap:clamp(18px,3.4vw,64px);align-items:end}
.sb-resp .cs-fig{width:100%}
.sb-resp-m .sb-media{border-radius:clamp(14px,1.8vw,24px);background:#fff;box-shadow:0 34px 74px -28px rgba(11,10,13,.55)}
.sb-resp-d{margin-inline-end:calc(-1 * clamp(16px,5vw,110px))}
.sb-resp-d .sb-media{background:#fff;border-start-end-radius:0;border-end-end-radius:0}
.sb-ink .sb-resp-m .sb-media,.sb-ink .sb-resp-d .sb-media{border-color:rgba(247,246,242,.14)}
/* empty image-slots paint their chrome in currentColor — keep it legible on the white plate */
.sb-ink .sb-media{color:var(--ink)}
@media (max-width:760px){.sb-resp{grid-template-columns:1fr;gap:20px;align-items:stretch}.sb-resp-m{max-width:220px}.sb-resp-d{margin-inline-end:0}.sb-resp-d .sb-media{border-radius:clamp(14px,1.8vw,24px)}}

/* brand swatch chips inside a chain row */
.sb-chain .sw{display:inline-block;width:14px;height:14px;border-radius:4px;margin-inline-end:9px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(247,246,242,.22)}

/* brand system — notes beside real swatches */
.sb-brand{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,3.4vw,58px);margin-top:clamp(28px,4vw,54px);align-items:start}
.sb-brand-notes{display:grid;gap:clamp(12px,1.6vw,20px)}
.sb-brand-notes>div{border:1px solid var(--line);border-radius:clamp(14px,1.8vw,22px);padding:clamp(20px,2.6vw,34px)}
.sb-brand-notes h3{color:var(--cs-accent-text,var(--cs-accent,var(--violet)));font-size:clamp(17px,1.8vw,24px);letter-spacing:-.02em;margin-bottom:12px}
.sb-brand-notes p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.6;color:var(--mut);max-width:52ch}
.sb-brand-sw{display:grid;gap:clamp(10px,1.4vw,16px);align-content:start}
.sb-brand-sw>div{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px)}
.sb-brand-sw i{flex:0 0 auto;width:clamp(48px,4.6vw,66px);height:clamp(48px,4.6vw,66px);border-radius:clamp(10px,1.2vw,15px);box-shadow:inset 0 0 0 1px rgba(11,10,13,.1)}
.sb-brand-sw b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.sb-brand-sw span{display:block;margin-top:4px;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
@media (max-width:860px){.sb-brand{grid-template-columns:1fr}}

/* polish: Arabic measure, and a short accent rule that anchors every caption */
html[lang="ar"] .sb-copy p{max-width:48ch}
html[lang="ar"] .sb-ctx-body p{max-width:56ch}
html[lang="ar"] .sb-cols p,html[lang="ar"] .sb-brand-notes p{max-width:38ch}
.cs-cap{display:block;margin-top:14px}
.cs-cap::before{content:"";display:block;width:22px;height:1px;margin-bottom:10px;background:var(--cs-accent-text,var(--cs-accent,var(--violet)));opacity:.7}
.sb-ink .cs-cap::before{background:var(--cs-accent-ink,var(--pink))}

/* AA on paper: the explanatory layer sits on --mut, keep it at or above 4.5:1 */
.cs-cap,.sb-seq .d,.sb-chain .d,.sb-owned li,.sb-brand-sw span{color:rgba(11,10,13,.68)}

/* ---------- section tone: a quiet plate band for rhythm ---------- */
.sb-plate{background:var(--cs-plate,#EFEDE8)}
.sb.sb-plate{padding-top:clamp(64px,8vw,124px);padding-bottom:clamp(64px,8vw,124px)}
/* air before and after a tonal band so the previous caption never touches its edge */
.sb:not(.sb-plate):not(.sb-ink)+.sb-plate,.sb:not(.sb-ink):not(.sb-plate)+.sb-ink{margin-top:clamp(28px,4vw,64px)}
.sb-plate+.sb:not(.sb-plate):not(.sb-ink),.sb-ink+.sb:not(.sb-ink):not(.sb-plate){margin-top:clamp(28px,4vw,64px)}
.sb-plate+.sb-plate{margin-top:0;padding-top:0}
.sb-plate .sb-media.shot{background:#fff}
/* hairline where two paper sections meet, so the story reads in chapters */
.sb+.sb:not(.sb-plate):not(.sb-ink):not(.sb-final)>.wrap{border-top:1px solid var(--line2);padding-top:clamp(40px,5vw,72px)}
.sb-plate+.sb:not(.sb-plate)>.wrap,.sb-ink+.sb>.wrap,.sb-final+.sb>.wrap{border-top:0;padding-top:0}

/* ---------- next project: an image-led teaser, not footer navigation ---------- */
.cs-next{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,88px);padding:clamp(28px,4vw,56px) 0 clamp(32px,4vw,64px)}
.cs-next-a{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:stretch;min-height:clamp(500px,58vh,620px)}
.cs-next-img{position:relative;border-radius:clamp(12px,1.6vw,20px);overflow:hidden;background:var(--cs-plate,#EFEDE8);border:1px solid var(--line)}
.cs-next-txt{display:flex;flex-direction:column;justify-content:center}
.cs-next-img image-slot{display:block;width:100%;height:100%;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cs-next-a:hover .cs-next-img image-slot{transform:scale(1.04)}
.cs-next-txt .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.cs-next-txt .t{display:flex;align-items:baseline;gap:.28em;margin-top:14px;font-size:clamp(30px,4.6vw,64px);line-height:1.05;letter-spacing:-.04em;font-weight:500}
html[lang="ar"] .cs-next-txt .t{line-height:1.28}
.cs-next-txt .t .arw{font-style:normal;font-size:.5em;color:var(--cs-accent-text,var(--cs-accent,var(--violet)));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cs-next-a:hover .t .arw{transform:translate(4px,-4px)}
html[dir="rtl"] .cs-next-a:hover .t .arw{transform:translate(-4px,-4px)}
.cs-next-txt .c{margin-top:16px;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--mut);max-width:34ch}
.cs-next-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,3vw,34px);font-size:15px;font-weight:500;color:var(--cs-accent-text,var(--cs-accent,var(--violet)))}
.cs-next-cta i{font-style:normal;transition:transform .5s cubic-bezier(.16,1,.3,1)}
html[dir="ltr"] .cs-next-cta i{transform:scaleX(-1)}
.cs-next-a:hover .cs-next-cta i{transform:translateX(-6px)}
html[dir="ltr"] .cs-next-a:hover .cs-next-cta i{transform:scaleX(-1) translateX(-6px)}
.cs-next-a:hover .cs-next-txt .t{color:var(--cs-accent-text,var(--cs-accent,var(--violet)))}
.cs-next-txt .t{transition:color .4s ease}
@media (max-width:800px){.cs-next-a{grid-template-columns:1fr;gap:22px;min-height:0}.cs-next-img{aspect-ratio:4/3}}

/* dark-tone counterparts for the brand-system block */
.sb-ink .sb-brand-notes h3{color:var(--cs-accent-ink,var(--pink))}
.sb-ink .sb-brand-notes p{color:rgba(247,246,242,.74)}
.sb-ink .sb-brand-sw span{color:rgba(247,246,242,.62)}
.sb-ink .sb-brand-sw b{color:var(--paper)}
/* a colour band already separates chapters — no hairline needed straight after one */
.sb-plate+.sb.sb>.wrap,.sb-ink+.sb.sb>.wrap,.sb-final+.sb.sb>.wrap{border-top:0;padding-top:0}

/* type scale: lead paragraph → body, so each section opens at a larger size */
.sb-copy p:first-child{font-size:clamp(18px,1.55vw,23px);line-height:1.5;color:var(--ink);opacity:.86}
html[lang="ar"] .sb-copy p:first-child{line-height:1.62;max-width:42ch}
.sb-copy p:first-child+p{margin-top:1.15em}
.sb-ink .sb-copy p:first-child{color:var(--paper);opacity:.94}
.sb-plate .sb-copy p:first-child{opacity:.9}
.sb-plate .sb-brand-notes h3{color:var(--cs-accent-text,var(--cs-accent,var(--violet)))}


/* ===== UX AUDIT PASS: legible small type, real <img> media, next-project fallback,
       video pause control, in-case call to action ===== */
.cs-meta dt{font-size:12px;letter-spacing:.12em}
html[lang="ar"] .cs-meta dt{font-size:13.5px}
.cs-flag{font-size:12.5px}
html[lang="ar"] .cs-flag{font-size:13.5px}
.cs-back{font-size:14.5px;display:inline-flex;align-items:center;gap:8px;padding-block:8px}
.sb-seq .k,.sb-chain .k{font-size:12.5px;letter-spacing:.12em}
.sb-cols .k{font-size:12.5px;letter-spacing:.12em}
.sb-seq .d,.sb-chain .d{font-size:14px}
.sb-facts .v{font-size:14px}
.sb-metric span{font-size:14px}
.sb-tags span{font-size:13px}
.cs-cap{font-size:14px;line-height:1.55}
.cs-next-txt .l{font-size:12.5px;letter-spacing:.14em}
html[lang="ar"] .cs-next-txt .l{font-size:13.5px;letter-spacing:.02em;text-transform:none}

/* screenshots are plain images now: indexable, alt-described */
.sb-media.shot img,.cs-next-img img{display:block;width:100%;height:100%;object-fit:cover}
.cs-next-img img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cs-next-a:hover .cs-next-img img{transform:scale(1.04)}
/* next project with no preview image: a typographic plate, never an empty box */
.cs-next-img.no-img{display:grid;place-items:center;background:linear-gradient(150deg,rgba(11,10,13,.045),rgba(11,10,13,.015))}
.cs-next-img.no-img b{font-size:clamp(74px,13vw,150px);font-weight:500;letter-spacing:-.06em;line-height:1;color:var(--cs-accent-text,var(--cs-accent,var(--violet)));opacity:.5}

/* video: an explicit pause control (autoplaying motion must be stoppable) */
.sb-media.shot{position:relative}
.cs-vid-btn{position:absolute;inset-inline-start:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid rgba(247,246,242,.35);border-radius:999px;background:rgba(11,10,13,.55);color:#F7F6F2;font:inherit;font-size:13px;cursor:pointer;transition:background .3s,border-color .3s}
.cs-vid-btn:hover{background:rgba(11,10,13,.78);color:#fff}

/* in-case call to action — the page no longer dead-ends */
.cs-cta{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,88px);padding:clamp(46px,7vw,96px) 0}
.cs-cta-q{font-size:clamp(26px,3.6vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.1;max-width:26ch}
html[lang="ar"] .cs-cta-q{line-height:1.3;letter-spacing:-.03em;max-width:28ch}
.cs-cta-s{margin-top:16px;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--mut);max-width:46ch}
.cs-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3.4vw,40px)}
.cs-cta-mail{font-size:15px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:3px}
.cs-cta-mail:hover{color:var(--violet);border-color:var(--violet)}

/* ===== tall interface crops on tablet/mobile =====
   A portrait crop at full width becomes a 1500px-tall image on a phone. Re-frame
   the box (the engine marks portrait media .tall) and let object-fit crop it
   intentionally — never shrink the interface to fit. max-height is NOT usable
   here: with aspect-ratio it shrinks the box width too. */
@media (max-width:980px){.sb-media.tall{aspect-ratio:3/4!important}}
@media (max-width:600px){.sb-media.tall{aspect-ratio:4/5!important}}

/* ===== mobile: crop the interface, never shrink it =====
   A 1440px desktop screen at 354px wide is unreadable. On phones the frame turns
   portrait and the screenshot is shown at ~1.9x the frame width, anchored to the
   reading edge — an intentional crop, with the caption saying what it is. */
@media (max-width:700px){
  .sb-media.shot:not(.tall):not(.wide):not(.photo){aspect-ratio:3/4!important}
  .sb-hero-media .sb-media.shot:not(.tall):not(.wide):not(.photo){aspect-ratio:4/5!important}
  .sb-media.shot:not(.photo) img{width:190%;max-width:none;height:100%;object-fit:cover;object-position:right top}
  html[dir="ltr"] .sb-media.shot:not(.photo) img{object-position:left top}
}