.stories-page{background:#fff;color:#17121c}.cosmic.stories-page .header{position:relative;background:#09080c}.stories-intro{padding:80px 6% 60px;max-width:1150px}.cosmic.stories-page h1{font-size:clamp(38px,5vw,72px);color:#17121c;margin:22px 0;max-width:1000px}.stories-intro>p{font-size:20px;line-height:1.5;color:#736b7b;max-width:700px}.story-label{font-size:12px;letter-spacing:1.5px;color:#8866a4}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:0 6% 90px}.story-card{border:1px solid #e6e1e9;overflow:hidden}.story-card>img{width:100%;height:300px;object-fit:cover}.story-card>div{padding:30px}.story-card span{color:#7b628d;font-size:14px}.story-card h2{font-size:32px;line-height:1.14;font-weight:500;letter-spacing:-1px;margin:18px 0}.story-card p{font-size:17px;line-height:1.5;color:#746b7d}.story-card b{display:block;margin-top:28px;font-weight:400}.story-card:hover{border-color:#b59ac9}.story-cover{display:block;width:88%;max-height:550px;object-fit:cover;margin:0 auto}.story-quote{margin:0;padding:70px 12%;background:#f4f0f8}.story-quote blockquote{font-size:clamp(26px,3vw,43px);line-height:1.25;letter-spacing:-1px;margin:0 0 25px}.story-quote figcaption{color:#786583;font-size:15px}.story-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:65px 6%;gap:45px;background:#100c17;color:white}.story-stats strong{font-size:65px;font-weight:500;letter-spacing:-3px}.story-stats p{color:#c6bbd0;font-size:16px;line-height:1.5;max-width:250px}.story-body{display:grid;grid-template-columns:1fr 2fr;gap:12%;padding:80px 8%}.story-body h2,.story-summary h2{font-size:34px;font-weight:500;letter-spacing:-1px;line-height:1.15}.story-body p,.story-summary p{font-size:18px;line-height:1.7;color:#6e6476}.story-body .story-label{display:block;margin-top:50px}.story-body .story-label:first-child{margin-top:0}.story-summary{max-width:850px;margin:auto;padding:70px 6%}.story-next{padding:65px 6%;background:#eee8f5;display:flex;justify-content:space-between;align-items:center;gap:30px}.story-next h2{font-size:35px;max-width:550px;font-weight:500;letter-spacing:-1px}.story-next a{background:#211728;color:#fff;padding:20px 30px;white-space:nowrap}@media(max-width:760px){.story-grid,.story-body{grid-template-columns:1fr}.stories-intro{padding:45px 6%}.story-card>img{height:230px}.story-stats{gap:20px}.story-stats strong{font-size:42px}.story-stats p{font-size:13px}.story-next{align-items:start;flex-direction:column}.story-body{gap:30px}.story-quote{padding:45px 6%}}

/* ===== Long-form case study (Cloaked). Built on the shared case-study template, plus the
   devices from the original long-form page: logo masthead, portrait beside the quote,
   sticky About column with a call-to-action card, a reading-width column, pull quotes. ===== */
.story-masthead{display:flex;align-items:center;gap:14px;margin-top:34px}
.story-masthead img{height:22px;width:auto}
.story-masthead .story-label{padding-left:14px;border-left:1px solid #d9d0e1}
.cloaked-story .stories-intro h1{margin-top:20px}
.story-quote--portrait{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:56px;align-items:center;padding:60px 8%}
.story-quote--portrait img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.story-quote--portrait blockquote{font-size:clamp(24px,2.6vw,36px)}
.story-body--longform{grid-template-columns:260px minmax(0,700px);gap:80px;justify-content:center}
.story-body--longform aside{align-self:start;position:sticky;top:32px}
.story-body--longform aside>p{margin:14px 0 0;font-size:15px;line-height:1.65}
.story-aside-card{margin-top:28px;padding:22px;background:#f4f0f8}
.story-aside-card p{margin:0;font-size:14px!important;line-height:1.55!important}
.story-aside-card p strong{color:#17121c;font-weight:500}
.story-aside-card p+p{margin-top:6px}
.story-aside-card a{display:block;margin-top:16px;padding:13px 16px;background:#915ad9;color:#fff;text-align:center;font-size:12px;letter-spacing:.7px;text-transform:uppercase;transition:background .2s}
.story-aside-card a:hover{background:#a775e8}
.story-body--longform>div>h2{margin:14px 0 24px}
.story-body--longform p strong{color:#17121c;font-weight:500}
.story-pull{margin:40px 0;padding:4px 0 4px 26px;border-left:2px solid #a38aba}
.story-pull blockquote{margin:0;font-size:clamp(21px,2vw,27px);line-height:1.35;letter-spacing:-.5px;color:#17121c}
.cloaked-story .story-next a{background:#915ad9;text-transform:uppercase;font-size:13px;letter-spacing:.7px;transition:background .2s}
.cloaked-story .story-next a:hover{background:#a775e8}
@media(max-width:900px){
.story-body--longform{grid-template-columns:1fr;gap:36px}
.story-body--longform aside{position:static}
.story-quote--portrait{grid-template-columns:1fr;gap:28px;padding:45px 6%}
.story-quote--portrait img{max-width:260px}
}
@media(max-width:760px){.story-pull{margin:30px 0;padding-left:18px}}
/* Body spans the same 6% page margins as the intro, stats and quote bands above it. */
.story-body--longform{grid-template-columns:minmax(220px,1fr) 2.6fr;gap:8%;justify-content:stretch;padding:80px 6%}
/* Pull quotes: larger text, no rule beside them. */
.story-pull{padding:0;border-left:0;margin:44px 0}
@media(max-width:900px){.story-body--longform{grid-template-columns:1fr;gap:36px;padding:55px 6%}}
@media(max-width:760px){.story-pull{padding:0;margin:30px 0}}
/* One left edge for the whole page: every band uses the same 6% side margin. */
.cloaked-story .story-quote--portrait{padding-left:6%;padding-right:6%}
/* Case-study pages share the header's 5% side margin on desktop, so content lines up under the logo. */
@media(min-width:761px){
.stories-intro,.story-stats,.story-body,.story-next,.story-grid,.story-summary{padding-left:5%;padding-right:5%}
.story-body--longform,.cloaked-story .story-quote--portrait{padding-left:5%;padding-right:5%}
.story-cover{width:90%}
}
/* Cloaked stats: light, like the rest of the page, with hairline dividers between figures. */
.cloaked-story .story-stats{background:#fff;color:#17121c;padding-top:10px;padding-bottom:70px;gap:0}
.cloaked-story .story-stats>div{padding:0 32px;border-left:1px solid #e6e1e9}
.cloaked-story .story-stats>div:first-child{padding-left:0;border-left:0}
.cloaked-story .story-stats p{color:#6e6476}
@media(max-width:760px){.cloaked-story .story-stats{gap:28px;padding-bottom:50px}.cloaked-story .story-stats>div{padding:0;border-left:0}}
@media(max-width:600px){.cloaked-story .story-stats{grid-template-columns:1fr;gap:26px}.cloaked-story .story-stats strong{font-size:44px}.cloaked-story .story-stats p{max-width:none;font-size:15px}}