/* Case studies share the portfolio's typography, colour tokens and grid rails. */
html[data-case-route]{--case-bg:#fff;--case-ink:#000;--case-muted:#575757;--case-line:#f0f0f0;--case-soft:#f2f2f2;--case-accent:#ff6a00;--case-display:'Big Shoulders','Career Cyrillic',sans-serif;--case-body:'Inter',sans-serif;--case-header-height:104px;--case-rail-inset:64px;scroll-behavior:smooth;scroll-padding-top:0}
html[data-case-route][toggle-theme="dark"]{--case-bg:#0f0f0f;--case-ink:#fff;--case-muted:#ccc;--case-line:#242424;--case-soft:#1c1c1c;color-scheme:dark}
html[data-case-route][toggle-theme="light"]{color-scheme:light}
html[data-case-route] body{background:var(--case-bg)!important;color:var(--case-ink);padding-bottom:100px;--token-8f8b32ea-2243-4c94-90d7-9dbc1e52ffc2:var(--case-bg);--token-e354a3cd-fc10-4572-8441-4fe955f17d9e:var(--case-ink);--token-2c4d0fad-06de-414f-b048-811f13183390:var(--case-muted);--token-fb315f8f-abaa-4742-a977-7745bac80b10:var(--case-soft);--token-5d23e02d-37c1-4334-b3aa-070b54ae1264:var(--case-line);--token-11865464-7f13-41cb-ab19-077e3c0ce0d1:var(--case-line);--token-2755f934-118b-4dbc-93a1-f2eb80d42f93:#000;--token-0cf62797-c341-4cdd-86b9-49f64afc3f64:#fff;--token-5b2fb1cd-f447-45d1-a04e-edafbc520509:#ff6a00}
.case-page{position:relative!important;gap:0!important;color:var(--case-ink)}
.case-page::before,.case-page::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--case-line);pointer-events:none}
.case-page::before{left:var(--case-rail-inset)}.case-page::after{right:var(--case-rail-inset)}
.case-page :is(.case-chapter,.case-more){box-sizing:border-box;width:100%}
.case-page :is(h2,h3,h4,p,figure,ol){margin:0}
.case-page .case-chapter h2,.case-page .case-more h2{font:600 64px/1.1 var(--case-display);letter-spacing:-.025em;text-transform:uppercase;color:var(--case-ink);text-wrap:balance}
.case-page :is(.case-copy,.case-process) h3{font:600 35px/1.2 var(--case-display);color:var(--case-ink);letter-spacing:-.015em;text-wrap:balance}
.case-page :is(.case-copy p,.case-chapter-heading p,.case-process p,.case-insights p,.case-results p,.case-competitor-card p){font:400 18px/1.55 var(--case-body);color:var(--case-muted);text-wrap:pretty}

/* Original hero framing, a fuller introduction, no extra CTA or expand control. */
.case-page [data-case-cover]{cursor:default}
.case-cover-art{position:absolute;inset:0;background-image:var(--case-cover-medium);background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none}
@media(min-resolution:1.6dppx) and (min-width:1200px){.case-cover-art{background-image:var(--case-cover-image)}}
.case-page .framer-hzjNE{min-width:105px}

/* Viewport-fixed contents, instead of a second full-width header strip. */
.case-page .case-toc{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:10;border:1px solid var(--case-line);border-radius:14px;background:var(--case-bg);box-shadow:0 6px 28px #00000012}
.case-toc nav{display:flex;gap:2px;padding:7px}
.case-toc a{color:var(--case-muted);font:500 13px/1.4 var(--case-body);text-decoration:none;white-space:nowrap;padding:12px 14px;border-radius:8px;transition:color .2s,background .2s;cursor:pointer}
.case-toc a:hover{color:var(--case-ink);background:var(--case-soft)}
.case-toc a[aria-current="location"]{color:var(--case-accent);background:var(--case-soft)}
.case-toc a:active{background:var(--case-line)}

/* One aligned editorial grid for chapter summaries and story rows. */
.case-chapter{position:relative;border-bottom:1px solid var(--case-line);padding:64px 24px 80px;scroll-margin-top:calc(var(--case-header-height) + 24px)}
.case-chapter::before,.case-chapter::after{content:'';position:absolute;bottom:-7px;width:14px;height:14px;background:var(--case-ink);mask:url('/assets/grid-star.svg') center/contain no-repeat;-webkit-mask:url('/assets/grid-star.svg') center/contain no-repeat;pointer-events:none;z-index:1}
.case-chapter::before{left:-7px}.case-chapter::after{right:-7px}
.case-chapter-heading,.case-story-row,.case-process-heading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.case-chapter-heading{margin-bottom:56px}
.case-chapter-heading p{max-width:620px;padding-top:4px}
.case-blocks,.case-story-rows{display:grid;gap:48px}
.case-copy{max-width:none;width:100%}
.case-story-row h3{max-width:460px}
.case-prose{grid-column:2;display:grid;gap:20px;max-width:620px;min-width:0}

/* Chronological process: number, stage, purpose. */
.case-process{display:grid;gap:32px}
.case-process-heading h3{max-width:460px}
.case-process ol{list-style:none;padding:0;counter-reset:process}
.case-process li{display:grid;grid-template-columns:56px minmax(0,calc(50% - 80px)) minmax(0,1fr);gap:24px;align-items:start;padding:24px 0;border-top:1px solid var(--case-line);counter-increment:process}
.case-process li::before{content:counter(process,decimal-leading-zero);font:500 32px/1.2 var(--case-display);color:var(--case-accent);font-variant-numeric:tabular-nums}
.case-process h4{font:600 28px/1.25 var(--case-display);color:var(--case-ink)}
.case-process li p{font-size:16px;max-width:600px}

/* Competitors are the intentional panel exception, not the default story layout. */
.case-competitors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-competitor-card{min-width:0;background:var(--case-soft);border:1px solid var(--case-line);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:1fr auto}
.case-competitor-card header{min-width:0;padding:24px;display:grid;gap:20px;align-content:start}
.case-competitor-card h3{justify-self:start;max-width:100%;box-sizing:border-box;font:500 28px/1.25 var(--case-display);background:var(--case-ink);color:var(--case-bg);padding:12px 18px;border-radius:12px;text-wrap:balance}
.case-competitor-card p{font-size:16px!important}
.case-competitor-logos{min-width:0;display:flex;justify-content:space-around;align-items:start;gap:12px;padding:24px 16px;background:var(--case-bg);border-top:1px solid var(--case-line);border-radius:20px 20px 0 0}
.case-competitor-logos figure{display:grid;justify-items:center;gap:12px;flex:1;min-width:0}
.case-competitor-logos img{width:clamp(52px,5.5vw,80px);max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px}
.case-competitor-logos figcaption{font:400 13px/1.4 var(--case-body);text-align:center;color:var(--case-ink);overflow-wrap:anywhere}

/* Project media retain their full original aspect ratio. */
.case-media{min-width:0;display:grid;gap:14px}
.case-image-link{position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--case-soft);cursor:zoom-in}
.case-image-link img{width:100%;height:auto;max-width:100%;display:block;pointer-events:none}
.case-zoom{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:#0009;font:500 24px/1 var(--case-body);transition:background .2s}
.case-image-link:hover .case-zoom{background:#000}
.case-media figcaption{font:400 14px/1.5 var(--case-body);color:var(--case-muted);padding-inline:2px}
.case-media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.case-video-wrap{position:relative;overflow:hidden;border-radius:26px;background:var(--case-soft)}
.case-video{display:block;width:100%;height:auto}
.case-video-toggle{position:absolute;right:18px;bottom:18px;background:#000d;color:#fff;border:0;border-radius:24px;padding:12px 18px;cursor:pointer;font:500 14px/1.2 var(--case-body);white-space:nowrap}
.case-video-toggle:hover{background:#000}
.case-insights{border:1px solid var(--case-line);border-radius:14px;padding:0 28px}
.case-insights summary{font:600 30px/1.3 var(--case-display);cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;gap:24px;list-style:none}
.case-insights summary::-webkit-details-marker{display:none}
.case-insights summary span{font:400 32px/1.2 var(--case-body)}
.case-insights[open] summary span{transform:rotate(45deg)}
.case-insights-body{display:grid;gap:32px;padding-bottom:28px}
.case-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.case-insight-grid h4{font:600 24px/1.3 var(--case-display);margin-bottom:12px}
.case-insight-grid p{font-size:16px}
.case-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.case-results>div{display:grid;gap:16px;padding-block:16px 24px}
.case-results strong{font:600 76px/1.1 var(--case-display);letter-spacing:-.03em}
.case-results p{max-width:430px}
.case-more{padding:64px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.case-all-projects{font:500 16px/1.4 var(--case-body);color:var(--case-ink);text-decoration:none;white-space:nowrap}
.case-all-projects span{margin-left:12px}
.case-more-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.case-more-grid a{display:grid;gap:12px;text-decoration:none;color:var(--case-ink)}
.case-more-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:26px;margin-bottom:8px}
.case-more-grid h3{font:500 35px/1.3 var(--case-display)}
.case-more-grid p{font:400 16px/1.5 var(--case-body);color:var(--case-muted)}
.case-more a:hover{color:var(--case-accent)}
.case-page :is(a,button,summary):focus-visible,.case-lightbox button:focus-visible{outline:2px solid var(--case-accent);outline-offset:3px}
html[data-case-route] footer .portfolio-nav-roll{color:var(--case-muted)}
html[data-case-route] footer [data-framer-name="Email"] p{color:var(--case-ink)!important}
html[data-case-route] nav a.framer-qjfp2z{cursor:pointer}

.case-lightbox{border:1px solid var(--case-line);padding:0;border-radius:16px;width:min(94vw,1800px);max-width:94vw;height:92dvh;max-height:92dvh;background:var(--case-bg);color:var(--case-ink);overflow:hidden}
.case-lightbox::backdrop{background:#000d}
.case-lightbox-inner{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
.case-lightbox-tools{display:flex;justify-content:flex-end;gap:12px;padding:14px;border-bottom:1px solid var(--case-line)}
.case-lightbox button{font:500 14px/1.3 var(--case-body);padding:10px 14px;color:var(--case-ink);background:var(--case-soft);border:1px solid var(--case-line);border-radius:12px;cursor:pointer;white-space:nowrap}
.case-lightbox-canvas{display:grid;place-items:center;overflow:auto;padding:16px}
.case-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.case-lightbox.is-actual-size .case-lightbox-canvas{display:block}
.case-lightbox.is-actual-size img{max-width:none;max-height:none}
.case-lightbox-caption{padding:14px 20px;font:400 14px/1.5 var(--case-body);color:var(--case-muted);border-top:1px solid var(--case-line)}

/* Use the homepage's 46px inner mark and original SVG orbit, not a 52px
   replacement painted on its layout holder. The shared site override supplies
   Sergey's artwork; hide only the inherited template glyph. Static cases use
   CSS for the same 35s linear orbit that the homepage's Framer loop provides. */
html[data-case-route] .framer-JPaLj .framer-1i96c6o>*{display:none!important}
@media(prefers-reduced-motion:no-preference){html[data-case-route] .framer-JPaLj .framer-1fo4rhn-container{animation:case-logo-orbit 35s linear infinite}}
@keyframes case-logo-orbit{to{transform:rotate(360deg)}}
@media(max-width:1199.98px){
  html[data-case-route]{--case-rail-inset:16px}
  .case-page .case-chapter h2,.case-page .case-more h2{font-size:clamp(48px,4.67vw,56px)}
  .case-chapter{padding:56px 24px 64px}
  .case-chapter-heading,.case-story-row,.case-process-heading{gap:32px}
  .case-story-row h3{max-width:360px}
  .case-competitors{gap:20px}
  .case-competitor-card header{padding:20px}
  .case-competitor-logos{gap:8px;padding:24px 12px}
  .case-competitor-logos figcaption{font-size:12px}
}
@media(max-width:809.98px){
  .case-cover-art{background-image:var(--case-cover-small)}
  .case-page .case-chapter h2,.case-page .case-more h2{font-size:clamp(36px,10vw,44px);overflow-wrap:normal}
  .case-chapter{padding:40px 16px 48px}
  .case-chapter-heading,.case-story-row,.case-process-heading{grid-template-columns:minmax(0,1fr);gap:20px}
  .case-chapter-heading{margin-bottom:36px}
  .case-chapter-heading p{padding-top:0}
  .case-page :is(.case-copy p,.case-chapter-heading p,.case-process p,.case-insights p,.case-results p){font-size:16px;line-height:1.5}
  .case-page :is(.case-copy,.case-process) h3{font-size:30px}
  .case-blocks,.case-story-rows{gap:36px}
  .case-prose{grid-column:1;gap:16px}
  .case-process{gap:28px}
  .case-process li{grid-template-columns:32px minmax(0,1fr);gap:10px 16px;padding:20px 0}
  .case-process li::before{font-size:26px;grid-row:span 2}
  .case-process h4{font-size:25px}
  .case-process li p{grid-column:2;font-size:15px}
  .case-competitors,.case-media-pair,.case-insight-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .case-competitor-card header{padding:20px;gap:16px}
  .case-competitor-card h3{font-size:26px;padding:10px 14px}
  .case-competitor-logos img{width:60px;border-radius:12px}
  .case-competitor-logos{padding:20px 12px}
  .case-competitor-logos figcaption{font-size:12px}
  .case-image-link,.case-video-wrap,.case-more-grid img{border-radius:18px}
  .case-media{gap:10px}
  .case-media figcaption{font-size:12px}
  .case-zoom{width:28px;height:28px;right:10px;bottom:10px;font-size:19px}
  .case-insights{padding-inline:18px}
  .case-insights summary{font-size:26px}
  .case-results{grid-template-columns:minmax(0,1fr);gap:0}
  .case-results strong{font-size:60px}
  .case-video-toggle{right:10px;bottom:10px;font-size:12px;padding:10px 12px}
  .case-more{padding:40px 16px 48px;gap:28px;grid-template-columns:minmax(0,1fr)}
  .case-more-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .case-lightbox{width:96vw;max-width:96vw}
}
@media(max-width:650px){
  html[data-case-route] body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .case-page .case-toc{width:calc(100vw - 32px);bottom:calc(12px + env(safe-area-inset-bottom))}
  .case-toc nav{display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:2px;padding:6px}
  .case-toc a{text-align:center;font-size:11px;padding:10px 4px;min-width:0}
}
@media(max-width:479.98px){
  .case-competitor-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .case-competitor-logos figure:nth-child(3):last-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){html[data-case-route]{scroll-behavior:auto}.case-toc a{transition:none}}