/* JS DECO case-study editorial component candidate 1.0.0. Shared theme chrome remains theme-owned. */
.jsd-case{--case-ink:#292d27;--case-muted:#50534b;--case-olive:#68784a;--case-paper:#f8f7f3;--case-line:#dfe4dd;background:#fff;color:var(--case-ink);font-family:"Instrument Sans JSD",Arial,sans-serif;font-size:17px;line-height:1.65;padding:76px 0 0;text-align:left}
.jsd-case *{box-sizing:border-box}
.jsd-case .cs-wrap{width:calc(100% - 96px);max-width:1320px;margin:0 auto}
.jsd-case :is(h1,h2,h3,p,figure,dl,dd){margin:0;letter-spacing:normal;text-transform:none;color:inherit;font-family:inherit}
.jsd-case h1{font-size:clamp(34px,3.4vw,52px);line-height:1.1;font-weight:450;max-width:600px}
.jsd-case h2{font-size:clamp(28px,2.7vw,39px);line-height:1.18;font-weight:450;margin-bottom:22px}
.jsd-case h3{font-size:21px;line-height:1.3;font-weight:550;margin-bottom:12px}
.jsd-case p+p{margin-top:17px}
.jsd-case a{color:var(--case-olive);text-decoration:underline;text-underline-offset:4px}
.jsd-case a:hover{color:#303923}
.jsd-case :is(a,summary):focus-visible{outline:3px solid #956d2c;outline-offset:5px}
.jsd-case .cs-crumb{font-size:13px;color:var(--case-muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.jsd-case .cs-crumb a{text-decoration:none}
.jsd-case .cs-kicker{font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--case-olive);margin-bottom:18px}
.jsd-case .cs-hero{display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:center}
.jsd-case .cs-lead{font-size:18px;line-height:1.6;margin-top:26px;color:var(--case-muted);max-width:590px}
.jsd-case .cs-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.jsd-case .cs-button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:49px;padding:13px 22px;background:var(--case-olive);border:1px solid var(--case-olive);color:#fff;text-decoration:none;font-size:15px;line-height:1.35;font-weight:550;border-radius:3px}
.jsd-case .cs-button:hover{background:#3f482b;color:#fff}
.jsd-case .cs-textlink{font-size:14px;font-weight:550}
.jsd-case .cs-photo{display:block;position:relative;background:#e8e8df;overflow:hidden;text-decoration:none;border-radius:4px}
.jsd-case img{display:block;width:100%;height:auto;max-width:100%;border:0}
.jsd-case .cs-hero img{aspect-ratio:1.28;object-fit:cover;object-position:50% 55%}
.jsd-case .cs-enlarge{position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.94);color:#30362a;padding:7px 11px;border-radius:2px;font-size:12px;line-height:1.4}
.jsd-case figcaption{font-size:13px;line-height:1.5;color:var(--case-muted);padding-top:12px}
.jsd-case .cs-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line);margin-top:42px;padding:22px 0;gap:22px}
.jsd-case dt{font-size:12px;font-weight:500;color:var(--case-muted);margin-bottom:5px}
.jsd-case dd{font-size:16px;font-weight:550;line-height:1.4}
.jsd-case .cs-jump{display:flex;gap:26px;flex-wrap:wrap;padding:20px 0;font-size:13px}
.jsd-case .cs-jump a{display:inline-flex;min-height:26px;align-items:center;text-decoration:none}
.jsd-case .cs-section{padding:76px 0;scroll-margin-top:145px;background:transparent}
.jsd-case .cs-section.cs-tint{background:var(--case-paper)}
.jsd-case .cs-split{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center}
.jsd-case .cs-split.cs-reverse{grid-template-columns:.88fr 1.12fr}
.jsd-case .cs-split img{aspect-ratio:1.55;object-fit:cover;object-position:center}
.jsd-case .cs-annotation{display:flex;gap:16px;border-top:1px solid var(--case-line);padding-top:22px;margin-top:26px;align-items:center}
.jsd-case .cs-number{font-size:36px;line-height:1;font-weight:450;color:var(--case-olive)}
.jsd-case .cs-annotation p{font-size:14px;line-height:1.5}
.jsd-case .cs-spec{margin-top:30px;border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line)}
.jsd-case summary{cursor:pointer;padding:18px 0;font-size:15px;font-weight:550;color:var(--case-olive)}
.jsd-case .cs-spec dl{padding:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:19px}
.jsd-case .cs-spec dd{font-size:14px;font-weight:450}
.jsd-case .cs-wide-copy{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px;margin:32px 0 0;align-items:start}
.jsd-case .cs-wide-photo img{aspect-ratio:20/9;object-fit:contain}
.jsd-case .cs-process{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}
.jsd-case .cs-process>div{border-top:1px solid var(--case-line);padding-top:20px}
.jsd-case .cs-process p{font-size:15px;color:var(--case-muted)}
.jsd-case .cs-process .cs-step{font-size:12px;letter-spacing:.1em;color:var(--case-olive);margin-bottom:14px}
.jsd-case .cs-short{max-width:720px}
.jsd-case .cs-cta{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;padding:48px;background:var(--cs-panel-background,#eff1e7);border:1px solid var(--case-line);border-radius:5px}
.jsd-case .cs-cta p{color:#525947}
.jsd-case .cs-cta ul{margin:0 0 20px;padding-left:20px;font-size:15px}
.jsd-case .cs-cta li+li{margin-top:7px}
.jsd-case .cs-note{font-size:13px;margin-top:17px}
.jsd-case .cs-next{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;border-top:1px solid var(--case-line);margin-top:45px;padding-top:24px;font-size:14px}
/* Canvas wrapper only, selected by this content marker; no other pages receive these rules. */
body:has(.jsd-case) #content{padding:0!important}
body:has(.jsd-case) .jsd-case-row{margin:0!important}
body:has(.jsd-case) .jsd-case-row>.wpb_column>.vc_column-inner{padding:0!important}
body:has(.jsd-case) .jsd-case-row .wpb_raw_code{margin-bottom:0!important}
@media(min-width:1800px){.jsd-case .cs-wrap{max-width:1440px}.jsd-case h1{font-size:54px}}
@media(max-width:1000px){.jsd-case .cs-wrap{width:calc(100% - 48px)}.jsd-case .cs-hero{gap:28px;grid-template-columns:1fr 1fr}.jsd-case .cs-split,.jsd-case .cs-split.cs-reverse{gap:32px;grid-template-columns:1fr 1fr}.jsd-case .cs-wide-copy{gap:34px}.jsd-case .cs-cta{gap:32px;padding:32px}.jsd-case .cs-section{padding:56px 0}.jsd-case .cs-hero img{aspect-ratio:1}}
@media(max-width:700px){.jsd-case{padding-top:58px;font-size:16px}.jsd-case .cs-wrap{width:calc(100% - 36px)}.jsd-case .cs-crumb{margin-bottom:24px}.jsd-case .cs-hero,.jsd-case .cs-split,.jsd-case .cs-split.cs-reverse,.jsd-case .cs-wide-copy,.jsd-case .cs-cta{grid-template-columns:1fr;gap:28px}.jsd-case h1{font-size:35px;max-width:540px}.jsd-case .cs-lead{font-size:17px;margin-top:20px}.jsd-case .cs-hero img{aspect-ratio:16/11}.jsd-case .cs-actions{gap:17px;margin-top:22px}.jsd-case .cs-facts{grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}.jsd-case .cs-jump{gap:4px 22px;padding:14px 0}.jsd-case .cs-jump a{min-height:40px}.jsd-case .cs-section{padding:42px 0;scroll-margin-top:100px}.jsd-case .cs-split img{aspect-ratio:20/11}.jsd-case .cs-process{grid-template-columns:1fr;gap:24px}.jsd-case .cs-cta{padding:25px 22px}.jsd-case .cs-wide-copy{margin-top:26px}.jsd-case .cs-spec dl{gap:18px 14px}.jsd-case .cs-next{margin-top:30px}}
@media(max-width:360px){.jsd-case h1{font-size:30px}.jsd-case .cs-button{width:100%;padding:13px 12px;gap:10px}.jsd-case .cs-facts dd{font-size:14px}.jsd-case .cs-cta{padding:22px 16px}}

.jsd-case :is(h1,h2,h3){text-align:left!important}
/* Archi wraps vc_row in section > container > row. Remove only this candidate's extra grid gutters. */
body:has(.jsd-case) .jsd-case-row{padding:0!important}
body:has(.jsd-case) .jsd-case-row>.container{width:100%!important;max-width:none!important;padding:0!important}
body:has(.jsd-case) .jsd-case-row>.container>.row{margin:0!important}
body:has(.jsd-case) .jsd-case-row .vc_column-inner{padding:0!important}
.jsd-case h1{font-size:clamp(34px,3.4vw,52px)!important;line-height:1.1!important;font-weight:450!important}
.jsd-case h2{font-size:clamp(28px,2.7vw,39px)!important;line-height:1.18!important;font-weight:450!important}
.jsd-case h3{font-size:21px!important;line-height:1.3!important;font-weight:550!important}
@media(min-width:1800px){.jsd-case h1{font-size:54px!important}}
@media(max-width:700px){.jsd-case{padding-top:30px}.jsd-case h1{font-size:35px!important}}
@media(max-width:360px){.jsd-case h1{font-size:30px!important}}
.jsd-case summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.jsd-case summary::-webkit-details-marker{display:none}
.jsd-case summary::after{content:'+';font-size:24px;line-height:1;flex:0 0 auto}
.jsd-case details[open]>summary::after{content:'−'}

/* Reusable transformation and gallery variants, derived from the accepted editorial pattern. */
.jsd-case .cs-hero img{aspect-ratio:auto;object-fit:contain}
.jsd-case .cs-comparison{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
.jsd-case .cs-comparison img{aspect-ratio:4/3;object-fit:cover}
.jsd-case .cs-label{font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;color:var(--case-olive)}
.jsd-case .cs-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.jsd-case .cs-gallery--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.jsd-case .cs-gallery--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.jsd-case .cs-gallery img{height:260px;object-fit:cover}
.jsd-case .cs-gallery--four img{height:320px;object-fit:cover}
.jsd-case .cs-gallery-heading{margin-top:44px}
.jsd-case .cs-extra{margin-top:28px}
.jsd-case .cs-note{font-size:13px;color:var(--case-muted);margin-top:14px}
.jsd-case .cs-split img{aspect-ratio:auto;object-fit:contain}
.jsd-case blockquote{border:0;padding:0;margin:26px 0;color:var(--case-ink)}
.jsd-case blockquote p{font-size:clamp(23px,2.1vw,30px);line-height:1.4}
.jsd-case blockquote footer{font-size:14px;margin-top:20px;color:var(--case-muted);background:none;padding:0}
.jsd-case .cs-review-original{max-width:480px;justify-self:center}
.jsd-case .cs-short{max-width:760px}
.jsd-case a.cs-photo{cursor:zoom-in}
.jsd-case :is(a,summary,button):focus-visible{outline:3px solid #805a00;outline-offset:4px}
.jsd-case-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#171a16;color:#fff;font-family:"Instrument Sans JSD",Arial,sans-serif}
.jsd-case-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.jsd-case-viewer::backdrop{background:rgba(0,0,0,.85)}
.jsd-case-viewer *{box-sizing:border-box}
.jsd-case-viewer .csv-bar{display:flex;justify-content:space-between;align-items:center;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));gap:12px}
.jsd-case-viewer .csv-bar>div{display:flex;gap:12px}
.jsd-case-viewer :is(p,a,button){font:inherit;color:inherit;letter-spacing:normal}
.jsd-case-viewer p{margin:0}
.jsd-case-viewer button{min-height:48px;padding:10px 16px;background:#31392a;border:1px solid #7b846e;border-radius:3px;cursor:pointer}
.jsd-case-viewer :is(button,a):focus-visible{outline:3px solid #ddc184;outline-offset:3px}
.jsd-case-viewer .csv-stage{overflow:auto;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 16px}
.jsd-case-viewer .csv-stage img{display:block;max-height:100%;max-width:100%;height:auto;width:auto;object-fit:contain}
.jsd-case-viewer.is-zoomed .csv-stage{display:block}
.jsd-case-viewer.is-zoomed .csv-stage img{max-height:none;max-width:none;margin:0 auto}
.jsd-case-viewer .csv-footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 20px;padding:12px 20px max(16px,env(safe-area-inset-bottom));font-size:14px}
.jsd-case-viewer .csv-caption{text-align:center;line-height:1.5}
.jsd-case-viewer .csv-original{grid-column:1/-1;text-align:center;font-size:12px;text-underline-offset:4px;min-height:28px}
.csv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1000px){.jsd-case .cs-gallery--four{grid-template-columns:repeat(2,minmax(0,1fr))}.jsd-case .cs-gallery img{height:220px}}
@media(max-width:700px){.jsd-case .cs-comparison{grid-template-columns:1fr;gap:24px}.jsd-case .cs-gallery{grid-template-columns:1fr 1fr;gap:24px 14px}.jsd-case .cs-gallery img{height:190px}.jsd-case .cs-gallery--four img{height:230px}.jsd-case .cs-hero img{aspect-ratio:auto}.jsd-case-viewer .csv-footer{grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px max(16px,env(safe-area-inset-bottom))}.jsd-case-viewer .csv-caption{grid-column:1/-1;grid-row:1}.jsd-case-viewer .csv-next{grid-column:2;grid-row:2}.jsd-case-viewer .csv-bar{font-size:14px}.jsd-case-viewer button{padding:10px 12px}.jsd-case-viewer .csv-stage{padding:0}}
@media(max-width:400px){.jsd-case .cs-gallery{grid-template-columns:1fr}.jsd-case .cs-gallery img{height:auto}}

/* Keep image height tied to its rendered width under Archi and WPBakery. */
.jsd-case .cs-split img{height:auto;aspect-ratio:auto;object-fit:contain}

/* Reserve a proportional box before native lazy-loaded images acquire natural dimensions. */
.jsd-case .cs-split img{aspect-ratio:auto 1 / 1}.jsd-case .cs-hero img{height:auto;aspect-ratio:auto 16 / 9}.jsd-case .cs-review-original img{aspect-ratio:auto 800 / 671}

/* Image-led hero variant: large complete composition, quieter supporting copy. */
.jsd-case .cs-hero--image-led{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:40px}
.jsd-case .cs-hero--image-led h1{font-size:clamp(32px,2.8vw,42px)!important;line-height:1.12!important}
.jsd-case .cs-hero--image-led .cs-lead{font-size:17px;line-height:1.6;margin-top:22px}
.jsd-case .cs-hero--image-led>figure{min-width:0}
@media(max-width:1000px){.jsd-case .cs-hero--image-led{grid-template-columns:minmax(0,1fr);gap:28px}.jsd-case .cs-hero--image-led>figure{grid-row:1}.jsd-case .cs-hero--image-led>div{grid-row:2;max-width:660px}.jsd-case .cs-hero--image-led h1{font-size:36px!important}}
@media(max-width:700px){.jsd-case .cs-hero--image-led{gap:24px}.jsd-case .cs-hero--image-led h1{font-size:32px!important}.jsd-case .cs-hero--image-led .cs-lead{margin-top:18px}.jsd-case .cs-hero--image-led .cs-actions{margin-top:22px}}
@media(max-width:360px){.jsd-case .cs-hero--image-led h1{font-size:29px!important}}

/* Preserve original compositions; align columns and spacing, not forced crops. */
.jsd-case .cs-gallery,.jsd-case .cs-comparison{align-items:start}
.jsd-case .cs-gallery img,.jsd-case .cs-comparison img{height:auto;aspect-ratio:auto 1 / 1;object-fit:contain}
.jsd-case img.cs-image--landscape{aspect-ratio:auto 16 / 9}
.jsd-case img.cs-image--portrait{aspect-ratio:auto 3 / 4}
.jsd-case img.cs-image--square{aspect-ratio:auto 1 / 1}

/* Wide displays: more room for photography; body copy remains readable. */
@media(min-width:1800px){.jsd-case .cs-wrap{max-width:1760px}.jsd-case .cs-split>div{max-width:680px}.jsd-case .cs-wide-copy p,.jsd-case .cs-cta p{max-width:68ch}}
@media(min-width:2400px){.jsd-case .cs-wrap{max-width:1920px}}

/* Approved Manchester visual pattern. Shared content/media widths, no typography duplication. */
.jsd-case{--cs-media-max:max(1320px,92vw);--cs-copy-max:1320px;--cs-paired-max:1440px}
.jsd-case .cs-wrap{max-width:var(--cs-media-max)}
.jsd-case .cs-short{margin-inline:auto;margin-bottom:36px}
.jsd-case .cs-wide-copy{max-width:var(--cs-copy-max);margin-inline:auto}
.jsd-case .cs-cta,.jsd-case .cs-wrap.cs-split{max-width:var(--cs-paired-max);margin-inline:auto}
.jsd-case .cs-hero-full{width:100%}
.jsd-case .cs-hero-full img{height:auto;object-fit:contain}

/* Match mixed image heights without cropping. Ratios describe source width / height. */
@media(min-width:701px){.jsd-case .cs-gallery--proportional{grid-template-columns:minmax(0,var(--cs-photo-first,1fr)) minmax(0,var(--cs-photo-second,1fr))}}
@media(max-width:700px){.jsd-case .cs-gallery--proportional{grid-template-columns:minmax(0,1fr)}}
/* Image-led cards: compact frame, comfortable text inset, uncropped media. */
.jsd-case .cs-cta.cs-cta--media{padding:16px;gap:32px}
.jsd-case .cs-cta--media>div{padding:clamp(4px,1vw,16px)}
@media(max-width:700px){.jsd-case .cs-cta.cs-cta--media{padding:10px;gap:20px}.jsd-case .cs-cta--media>div{padding:8px}}

/* Full-width media rows retain shared gutters and uncropped photographs. */
.jsd-case .cs-media-row{background:var(--cs-panel-background,#eff1e7)}
.jsd-case .cs-media-row>.cs-wrap.cs-split{max-width:var(--cs-media-max);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,3vw,64px)}
@media(max-width:700px){.jsd-case .cs-media-row>.cs-wrap.cs-split{grid-template-columns:minmax(0,1fr)}}
/* Legacy media cards share the full-width row treatment without changing project content. */
.jsd-case .cs-cta:has(img){position:relative;isolation:isolate;max-width:none;border:0;border-radius:0;background:transparent;padding:clamp(42px,4vw,76px) 0;margin-block:36px 0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,3vw,64px)}
.jsd-case .cs-cta:has(img)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cs-panel-background,#eff1e7);box-shadow:0 0 0 100vmax var(--cs-panel-background,#eff1e7);clip-path:inset(0 -100vmax)}
.jsd-case .cs-cta.cs-cta--media>div{padding:0}
@media(max-width:700px){.jsd-case .cs-cta:has(img){grid-template-columns:minmax(0,1fr)}}
/* Consistent specification blocks with readable, openly visible facts. */
.jsd-case .cs-spec{max-width:var(--cs-copy-max);margin:36px auto 0;padding:28px 0;border-bottom:0}
.jsd-case .cs-spec>h2,.jsd-case .cs-spec>h3{margin:0 0 24px}
.jsd-case .cs-spec dl{margin:0;padding:0;gap:0 36px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.jsd-case .cs-spec dl>div{padding:16px 0;border-bottom:1px solid var(--case-line);min-width:0}
.jsd-case .cs-spec dt{font-size:14px;margin:0 0 6px}
.jsd-case .cs-spec dd{font-size:16px;line-height:1.5;margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.jsd-case .cs-spec dl{grid-template-columns:minmax(0,1fr)}}

/* Media row widths are independent of the reading measure. */
.jsd-case .cs-wrap.cs-split:has(img):not(:has(.cs-review-original)){max-width:var(--cs-media-max)}
.jsd-case .cs-split>div:has(img):not(.cs-review-original){max-width:none;min-width:0;width:100%}
.jsd-case .cs-split>div:not(:has(img)){min-width:0}
.jsd-case .cs-split:has(img):not(:has(.cs-review-original)){gap:clamp(28px,3vw,64px)}
.jsd-case .cs-spec.cs-gallery-heading{margin-top:36px}

/* Editorial subheadings: consistent weight and scale without changing semantic levels. */
.jsd-case .cs-wide-copy>div>h3{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.2!important;font-weight:450!important;margin-bottom:22px!important}
.jsd-case .cs-wide-copy>div:first-child:not(:has(p,ul,ol,dl))>h3{font-size:clamp(28px,2.7vw,39px)!important;line-height:1.18!important}