.case-page{background:#090d0f}.case-hero{padding:80px var(--gutter) 55px;background:#111e28}.case-hero h1{font-size:clamp(48px,6.5vw,98px);max-width:1100px;margin:25px 0;line-height:1.05;overflow-wrap:anywhere}.case-hero .case-intro{font-size:21px;color:#c0ccca;max-width:760px;line-height:1.6}.case-breadcrumb{font-size:15px;color:var(--sea);text-decoration:underline;text-underline-offset:5px}.case-meta{font-size:15px;color:var(--muted);margin-top:25px}.case-grid{padding:60px var(--gutter) 90px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 40px}.case-card{border-bottom:1px solid var(--line);padding-bottom:30px}.case-card img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover}.case-card h2{font-size:clamp(28px,3vw,42px);margin:25px 0 16px;line-height:1.15}.case-card p{font-size:18px;color:var(--muted);margin-bottom:20px}.case-card a:hover h2{color:var(--sea)}.case-cover{padding:40px var(--gutter);background:#111719}.case-cover img{width:100%;max-width:1250px;margin:auto;height:auto}.case-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:65px;max-width:1400px;margin:auto;padding:65px var(--gutter)}.case-toc{align-self:start;position:sticky;top:130px;max-height:calc(100dvh - 150px);overflow:auto;font-size:14px}.case-toc summary{font-size:16px;color:var(--sea);cursor:pointer;padding-bottom:16px}.case-toc ol{padding-left:20px}.case-toc li{margin:0 0 15px;line-height:1.5}.case-toc a:hover{color:var(--sea)}.case-body{min-width:0;max-width:900px}.case-body>p,.case-body>ul,.case-body>ol,.case-body>blockquote{max-width:720px;margin:0 auto 24px;font-size:19px;line-height:1.8;color:#c6cfcb}.case-body h2{font-size:clamp(29px,3vw,44px);line-height:1.22;letter-spacing:-.035em;margin:65px auto 26px;max-width:720px;scroll-margin-top:140px}.case-body .article-deck{font-size:25px;color:var(--sea)}.case-body a:not(.article-image-link){text-decoration:underline;text-underline-offset:4px;color:var(--sea);overflow-wrap:anywhere}.case-body figure{margin:36px 0 45px}.case-body img{width:100%;height:auto;background:#111719}.case-body figcaption{font-size:14px;color:var(--muted);line-height:1.6;margin-top:14px;text-align:center}.case-body blockquote{border-left:2px solid var(--sea);padding:12px 24px;text-align:left;letter-spacing:normal;font-family:var(--sans)}.case-body blockquote p{margin:0}.case-body strong{color:var(--white)}.case-body em{font-family:inherit;font-size:inherit;letter-spacing:normal}.case-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}.case-source{font-size:14px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;margin-top:45px}.case-next{background:#14251f;padding:55px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:35px}.case-next h2{font-size:clamp(28px,4vw,48px);margin-top:15px}.case-contact{padding:65px var(--gutter);background:var(--sea);color:var(--black)}.case-contact h2{font-size:clamp(32px,4vw,54px);margin-bottom:25px}.case-contact .button{background:var(--black);color:var(--white)}.case-footer{padding:30px var(--gutter);font-size:15px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}.case-page .header nav a[aria-current=page]{color:var(--sea);text-decoration:underline;text-underline-offset:8px}
@media(max-width:900px){.case-layout{grid-template-columns:1fr;gap:35px}.case-toc{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:15px}.case-toc ol{columns:2;column-gap:35px}.case-toc li{break-inside:avoid}}
@media(max-width:750px){.case-hero{padding-top:45px;padding-bottom:40px}.case-hero h1{font-size:45px}.case-hero .case-intro{font-size:18px}.case-grid{grid-template-columns:1fr;gap:40px;padding-top:35px}.case-cover{padding:0}.case-layout{padding-top:35px}.case-toc ol{columns:1}.case-body>p,.case-body>ul,.case-body>ol,.case-body>blockquote{font-size:18px;line-height:1.75}.case-body h2{margin-top:45px}.case-body figure{margin:30px calc(-1 * var(--gutter))}.case-body figcaption{padding:0 var(--gutter)}.case-next{align-items:start;flex-direction:column}.case-footer{flex-direction:column}}

@media(max-width:750px){.case-hero h1{font-size:clamp(30px,8.6vw,45px)}}

/* Give screenshots the page width and keep prose comfortable to read. */
.case-layout{display:block;max-width:1600px;padding:55px clamp(20px,5vw,90px);scroll-margin-top:120px}
.case-toc{position:static;max-height:none;width:100%;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:45px}
.case-toc summary{padding-bottom:0}
.case-toc details[open] summary{padding-bottom:20px}
.case-toc ol{columns:3;column-gap:40px}
.case-toc li{break-inside:avoid}
.case-body{width:100%;max-width:none}
.case-body>p,.case-body>ul,.case-body>ol,.case-body>blockquote,.case-body h2,.case-source{max-width:780px;margin-left:auto;margin-right:auto}
.case-body figure{width:100%;margin:40px 0 55px}
.article-image-link{display:block;cursor:zoom-in}
.case-body img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.case-cover img{display:block;max-width:1420px}
.case-problem{padding:55px var(--gutter);background:#14251f;border-bottom:1px solid var(--line)}
.case-problem>.micro{color:var(--sea);margin-bottom:25px}
.case-problem-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:7%;max-width:1420px;margin:auto}
.case-problem h2{font-size:clamp(30px,3.5vw,52px);line-height:1.15;margin-bottom:22px}
.case-problem-grid p:not(.micro){font-size:18px;line-height:1.75;color:#d5dfda}
.case-problem ul{padding-left:21px;margin-top:22px;color:var(--sea);font-size:16px;line-height:1.7}
.case-outcome{border-left:1px solid var(--line);padding-left:35px}
.case-outcome>.micro{margin-bottom:18px;color:var(--sea)}
.case-outcome .text-link{margin-top:24px}
@media(max-width:900px){.case-toc ol{columns:2}.case-problem-grid{grid-template-columns:1fr;gap:30px}.case-outcome{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}}
@media(max-width:750px){.case-layout{padding:35px 20px}.case-toc ol{columns:1}.case-body figure{width:calc(100% + 40px);margin:30px -20px}.case-body figcaption{padding:0 20px}.case-problem{padding-top:35px;padding-bottom:35px}.case-problem-grid p:not(.micro){font-size:17px}}
.case-hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:center;padding-top:64px;padding-bottom:64px}.case-hero-split h1{font-size:clamp(44px,4.4vw,80px)}.case-hero-split .case-intro{font-size:19px}.case-hero-media{margin:0}.case-hero-media img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 24px 60px #0008}@media(max-width:900px){.case-hero-split{grid-template-columns:1fr;padding-top:48px;padding-bottom:48px}.case-hero-split h1{font-size:clamp(44px,11vw,72px)}}
@media(min-width:901px){.case-hero-split h1{font-size:clamp(36px,3.4vw,76px)}.case-hero-split{grid-template-columns:minmax(330px,.9fr) minmax(0,1.6fr);padding-right:0;padding-top:48px;padding-bottom:48px;gap:clamp(32px,4vw,64px)}.case-hero-media img{border-radius:8px 0 0 8px;box-shadow:-24px 30px 70px #000a}}
/* Split hero: the problem leads beside the cover screenshot; the band below pairs the starting point with the outcome. */
.case-hero-split h1.case-title{font-size:clamp(20px,1.7vw,28px);letter-spacing:-.01em;line-height:1.2;color:var(--sea);margin:22px 0 26px;text-shadow:none}
.case-hero-label{color:var(--muted);margin-bottom:14px}
.case-problem-headline{font-family:var(--display);font-weight:500;letter-spacing:-.045em;line-height:1.06;font-size:clamp(34px,3.4vw,62px);color:var(--white);margin-bottom:22px}
.case-problem-summary{font-size:18px;line-height:1.7;color:#c6d1cd;max-width:560px}
.case-hero-split .case-meta{margin-top:22px}
.case-start-points{list-style:none;padding:0!important;margin:0!important;display:grid;gap:12px}
.case-start-points li{color:var(--white);font-size:19px;line-height:1.45;padding-left:28px;position:relative}
.case-start-points li:before{content:'';position:absolute;left:0;top:.6em;width:14px;height:1px;background:var(--sea)}
.case-problem .case-problem-grid>div>.micro{color:var(--sea);margin-bottom:18px}
@media(max-width:900px){.case-problem-summary{font-size:17px}.case-problem-headline{font-size:clamp(32px,8.5vw,46px)}}
/* Mobile standard: the cover screenshot sits under the problem headline, before the summary. */
@media(max-width:900px){.case-hero-split{display:flex;flex-direction:column;gap:0}.case-hero-copy{display:contents}.case-hero-copy>*{order:1}.case-hero-copy>.case-problem-summary,.case-hero-copy>.case-meta{order:3}.case-hero-media{order:2;margin:4px 0 28px}}
/* Numbered sections (Aaron, 2026-10-02) */
.case-section-no{display:block;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--sea);margin-bottom:12px}
.case-toc ol{list-style:none;padding-left:0}
.case-toc .toc-no{display:inline-block;min-width:30px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--sea)}
.case-toc a{display:flex;gap:6px;text-decoration:none}
.case-body h2[id]{scroll-margin-top:130px}
/* Desktop: the contents list becomes a sticky right-hand column and highlights the section in view. Smaller screens keep the fold-out list above the article. */
@media(min-width:1200px){
.case-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:clamp(40px,4vw,72px);align-items:start}
.case-body{grid-column:1;grid-row:1;max-width:none}
.case-toc{grid-column:2;grid-row:1;position:sticky;top:130px;max-height:calc(100dvh - 160px);overflow:auto;width:auto;margin:0;padding:0 0 0 24px;border:0;border-left:1px solid var(--line)}
.case-toc summary{list-style:none;pointer-events:none;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-toc summary::-webkit-details-marker{display:none}
.case-toc details[open] summary{padding-bottom:18px}
.case-toc ol{columns:1}
.case-toc li{margin:0 0 4px;font-size:14px;line-height:1.45}
.case-toc a{padding:7px 10px;margin-left:-10px;border-radius:4px;color:var(--muted);transition:color .2s,background .2s}
.case-toc a:hover{color:var(--white)}
.case-toc a.is-current{color:var(--white);background:#ffffff0d}
.case-toc a.is-current .toc-no{color:var(--brass,#d9be7a)}
}