/* Generated see-mo opt-in from the STADION foundation. */
/* STADION v58: page-local rhythm, shared card language and accent results.
   Brand typography, palette, rail geometry and homepage are not redesigned. */
@media(min-width:810px){
  .case-page>.framer-lw6o2m .framer-x3ci3f{justify-content:center!important;gap:24px!important;align-self:stretch!important}
  .case-page>.framer-lw6o2m .framer-1eel7kf{padding:0 24px 24px!important;height:auto!important}
  .case-page>.framer-lw6o2m .framer-1hylex0{padding:0 24px!important;height:auto!important}
}
.case-page>.framer-lw6o2m .framer-x3ci3f{position:relative!important}
.case-back-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;min-height:44px;padding:10px 16px;box-sizing:border-box;border:1px solid var(--color-rule);border-radius:99px;background:var(--color-soft);color:var(--color-ink);font:500 14px/1.4 var(--font-body);text-decoration:none;white-space:nowrap;margin:0 24px;transition:background-color .18s,color .18s,border-color .18s}
.case-back-link:hover{background:var(--color-paper);border-color:var(--color-muted)}
.case-back-link:active{transform:translateY(1px)}
@media(min-width:1024px){.case-back-link{position:absolute;top:16px;left:24px;margin:0;z-index:2}}
@media(min-width:1200px){.case-back-link{top:24px}}
.case-page .case-chapter{padding:64px 24px 72px;text-align:left}
.case-page .case-chapter h2{font-size:48px;line-height:1.12;letter-spacing:-.025em;overflow-wrap:normal;text-wrap:balance}
.case-page .case-chapter h3,.case-page .case-feature--wide .case-feature-copy h3{font-size:28px;line-height:1.25;text-wrap:balance;overflow-wrap:normal}
.case-chapter .case-chapter-heading{gap:16px;max-width:760px;margin-bottom:40px}
.case-chapter .case-chapter-heading p{font-size:18px;line-height:1.55;text-wrap:pretty}
.case-page .case-blocks{gap:56px}
.case-page .case-copy{gap:16px}
.case-page .case-copy-body{gap:14px}
.case-page .case-copy p{font-size:17px;line-height:1.65;text-wrap:pretty}
.case-page .case-feature{gap:40px;padding-top:40px}
.case-page .case-feature:first-child{padding-top:0}
.case-page .case-feature--reading .case-feature-copy{grid-template-columns:minmax(0,1fr);gap:32px;max-width:760px}
.case-page .case-feature--reading{grid-template-columns:minmax(0,1fr)}
.case-page .case-feature--reading>.case-feature-copy{width:100%;margin-inline:0}
.case-feature--reading .case-copy-body,.case-context-story .case-copy-body{text-align:left}
.case-feature--reading .case-copy+.case-copy{padding-top:32px;border-top:1px solid var(--color-rule)}
.case-page .case-feature.case-feature--wide{gap:32px}
.case-page .case-feature--wide>.case-feature-copy{max-width:760px}
.case-feature:not(.case-feature--wide):not(.case-feature--reading)>.case-feature-copy{text-align:left}
.case-page .case-reading-block{max-width:760px}

/* Context reads in order, then a full-rail break introduces the process. */
.case-context-preview{margin:0 0 40px}
.case-context-preview .case-video-wrap{aspect-ratio:60/31}
.case-context-preview .case-video{width:100%;height:100%;object-fit:cover}
.case-context-story{display:grid;gap:32px;max-width:760px}
.case-context-story .case-narrative-group{gap:32px}
.case-context-story .case-copy+.case-copy,.case-context-story>.case-copy{padding-top:32px}
.case-process-band{position:relative;border-top:1px solid var(--color-rule);margin:56px -24px -72px;padding:56px 24px 64px}
.case-process-band::before,.case-process-band::after{content:'';position:absolute;top:-7px;width:14px;height:14px;background:var(--color-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}
.case-process-band::before{left:-7px}.case-process-band::after{right:-7px}
.case-page .case-process{gap:32px}
.case-process .case-process-heading{gap:16px;max-width:760px}
.case-page .case-process ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case-page .case-process li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;align-content:start;gap:16px;min-width:0;padding:28px 24px;border:1px solid var(--color-rule);border-radius:18px;background:var(--color-paper);color:var(--color-ink)}
.case-page .case-process li::before,.case-page .case-process li::after{content:none}
.case-stage-number{font:500 24px/1.25 var(--font-display);font-variant-numeric:tabular-nums;color:var(--color-muted)}
.case-stage-copy{display:grid;gap:12px;min-width:0}
.case-page .case-process .case-stage-copy>*{grid-area:auto}
.case-page .case-process h4{min-height:0;font-size:22px;line-height:1.35;text-wrap:balance;overflow-wrap:normal}
.case-page .case-process li p{font-size:16px;line-height:1.5}

/* One outcome title, then a close-linked explanation and its qualified figures. */
.case-outcome-composition{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px;margin-bottom:32px}
.case-outcome-composition>.case-chapter-heading{margin:0;gap:12px}
.case-outcome-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:32px;align-items:start}
.case-outcome-story{gap:12px}
.case-page .case-outcome-story p{font-size:17px;line-height:1.55}
.case-outcome-composition .case-results{padding-left:32px;gap:20px}
.case-outcome-composition .case-results>div{padding:0;gap:10px}
.case-outcome-composition .case-results>div+div{padding-top:20px}
.case-outcome-composition .case-results strong{font-size:52px;line-height:1.1}

/* The complete system narrative stays beside all three evidence panels. */
.case-system-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:48px;align-items:start}
.case-system-summary{display:grid;gap:28px;position:sticky;top:calc(var(--case-header-height) + 24px);align-self:start;min-width:0}
.case-system-summary>.case-chapter-heading{margin:0;gap:18px}
.case-system-summary .case-copy{gap:0}
.case-system-evidence{display:grid;gap:40px;min-width:0}
.case-system-evidence .case-media{gap:12px}

/* A single eye affordance replaces the navigation-like arrow on all case images. */
.case-page .case-zoom{width:40px;height:40px;aspect-ratio:1;flex:none}
.case-zoom svg{display:block;width:22px;height:22px}
.case-video:focus-visible{outline:2px solid var(--color-focus);outline-offset:-4px}
.case-media-error{font:400 14px/1.5 var(--font-body);color:var(--color-muted);padding:12px}

/* No visible transport or scrollbar. Hover/focus pauses the automatic strips. */
.case-screen-reel{gap:32px;margin-top:56px;padding-top:40px}
.case-reel-heading{gap:12px}
.case-autoplay .case-auto-viewport{display:flex;gap:24px;overflow:hidden;overflow-anchor:none;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-y;padding:0;margin:0;min-width:0}
.case-auto-viewport::-webkit-scrollbar{display:none}
.case-reel-viewport>.case-media{flex:0 0 360px;width:360px;align-self:stretch;gap:0;grid-template-rows:auto 1fr;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:24px;overflow:hidden}
.case-reel-viewport .case-image-link{border-radius:23px;overflow:hidden}
.case-reel-viewport figcaption{padding:20px;min-height:0;font-size:14px;line-height:1.55;text-wrap:balance;background:var(--color-paper)}
.case-page .case-more{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:64px}
.case-page .case-more h2{font-size:48px;line-height:1.12;text-wrap:balance}
.case-more>h2{text-align:left}
.case-more-grid>a{flex:0 0 calc((100% - 24px)/2);width:calc((100% - 24px)/2);min-width:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--color-rule);border-radius:24px;background:var(--color-soft);color:var(--color-ink);overflow:hidden}
.case-more-grid img{border-radius:0;margin:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.case-project-caption{display:grid;gap:8px;padding:20px;min-width:0}
.case-page .case-more-grid h3{font-size:28px;line-height:1.25;overflow-wrap:normal;text-wrap:balance}
.case-autoplay:not([data-auto-ready]) .case-auto-viewport,.case-autoplay[data-auto-static] .case-auto-viewport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-autoplay:not([data-auto-ready]) .case-auto-viewport>*,.case-autoplay[data-auto-static] .case-auto-viewport>*{width:auto;max-width:100%}
.case-sr-only,.case-motion-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.case-motion-toggle:focus-visible{position:fixed;top:calc(var(--case-header-height) + 16px);left:24px;z-index:11;width:auto;height:auto;padding:12px 16px;margin:0;clip-path:none;background:var(--color-ink);color:var(--color-paper);font:500 14px/1.5 var(--font-body);border-radius:14px}
@media(max-width:1199.98px){
  .case-page .case-process ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-page .case-chapter h2,.case-page .case-more h2{font-size:40px}
  .case-system-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:32px}
  .case-system-summary>.case-chapter-heading h2{font-size:36px}
}
@media(max-width:809.98px){
  .case-back-link{margin:16px 16px 0}
  .case-page .case-chapter{padding:40px 16px 48px}
  .case-page .case-chapter h2,.case-page .case-more h2{font-size:32px}
  .case-page .case-chapter h3,.case-page .case-feature--wide .case-feature-copy h3{font-size:24px}
  .case-chapter .case-chapter-heading{gap:14px;margin-bottom:32px}
  .case-chapter .case-chapter-heading p{font-size:17px;line-height:1.5}
  .case-page .case-copy p{font-size:16px;line-height:1.6}
  .case-page .case-blocks{gap:40px}
  .case-page .case-feature{gap:28px;padding-top:32px}
  .case-page .case-feature.case-feature--wide{gap:28px}
  .case-feature--wide>.case-feature-copy p{text-align:left;text-wrap:pretty}
  .case-context-preview{margin-bottom:32px}
  .case-context-story,.case-context-story .case-narrative-group{gap:28px}
  .case-context-story .case-copy+.case-copy,.case-context-story>.case-copy{padding-top:28px}
  .case-process-band{margin:40px -16px -48px;padding:40px 16px 48px}
  .case-page .case-process li{padding:20px}
  .case-page .case-process h4{font-size:22px}
  .case-outcome-composition{padding:24px 20px;gap:20px;margin-bottom:24px}
  .case-outcome-composition>.case-chapter-heading{margin-bottom:0}
  .case-outcome-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .case-page .case-outcome-story p{font-size:16px}
  .case-outcome-composition .case-results{padding:20px 0 0;border-left:0}
  .case-outcome-composition .case-results strong{font-size:44px}
  .case-system-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .case-system-summary{position:static;gap:24px}
  .case-system-summary>.case-chapter-heading{margin:0}
  .case-system-summary>.case-chapter-heading h2{font-size:32px}
  .case-system-evidence{gap:32px}
  .case-screen-reel{margin-top:40px;padding-top:32px;gap:28px}
  .case-autoplay .case-auto-viewport{gap:16px}
  .case-reel-viewport>.case-media{flex-basis:240px;width:240px;border-radius:18px}
  .case-reel-viewport .case-image-link{border-radius:17px}
  .case-reel-viewport figcaption{padding:16px}
  .case-page .case-zoom{width:32px;height:32px}
  .case-zoom svg{width:19px;height:19px}
  .case-more-grid>a{flex-basis:85%;width:85%;border-radius:18px}
  .case-page .case-more-grid h3{font-size:24px}
  .case-project-caption{padding:16px}
}
[data-auto-clone]{overflow-anchor:none}
.case-autoplay:not([data-auto-ready]) [data-auto-clone],.case-autoplay[data-auto-static] [data-auto-clone]{display:none!important}
@media(max-width:650px){
  .case-page .case-process ol{grid-template-columns:minmax(0,1fr)}
  .case-page .case-process li{row-gap:12px}
  .case-process .case-stage-copy{display:contents}
  .case-page .case-process .case-stage-copy h4{grid-column:2;grid-row:1}
  .case-page .case-process .case-stage-copy p{grid-column:1/-1;grid-row:2}
  .case-autoplay:not([data-auto-ready]) .case-auto-viewport,.case-autoplay[data-auto-static] .case-auto-viewport{grid-template-columns:minmax(0,1fr)}
}
/* CSS also handles live preference changes, independent of JS event timing. */
@media(prefers-reduced-motion:reduce){
  [data-auto-clone]{display:none!important}
  .case-autoplay .case-auto-viewport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .case-autoplay .case-auto-viewport>*{width:auto;max-width:100%}
}
@media(prefers-reduced-motion:reduce) and (max-width:650px){.case-autoplay .case-auto-viewport{grid-template-columns:minmax(0,1fr)}}

/* The brief is a composed spread: origin, task, then personal responsibility.
   Titles always stay with their own copy. The video above remains full-width. */
.case-page .case-context-story--brief{max-width:none;gap:32px;grid-area:auto}
.case-context-story--brief>.case-narrative-group{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.case-context-story--brief .case-narrative-group>.case-copy{padding-top:0;border-top:0}
.case-context-story--brief .case-narrative-group>.case-copy:first-child{padding-top:28px}
.case-context-story--brief .case-narrative-group>.case-copy+ .case-copy{padding:28px 32px;background:var(--color-soft);border:1px solid var(--color-rule);border-radius:24px}
.case-context-story--brief>.case-copy{padding-top:32px;border-top:1px solid var(--color-rule)}
.case-context-story--brief>.case-copy .case-copy-body{max-width:760px}

/* Chapter rail and narrative have different roles, not two competing H3 cards.
   The original dense research sheet spans the entire grid below both columns. */
.case-research-opening{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:32px 48px;align-items:start;min-width:0}
.case-research-introduction,.case-research-narrative,.case-research-proof{min-width:0}
.case-research-introduction>.case-chapter-heading{margin:0;max-width:none}
.case-research-introduction .case-chapter-heading p{max-width:360px}
.case-research-narrative{display:grid;gap:32px;max-width:760px}
.case-research-narrative>.case-copy+ .case-copy{padding-top:32px;border-top:1px solid var(--color-rule)}
.case-research-proof{grid-column:1/-1}
.case-research-proof .case-media{gap:12px}
.case-chapter--editorial>.case-blocks{margin-top:64px}

/* Interface chapters are grouped by user task. These distances include every
   gap/padding contribution instead of accidentally adding 56px + 40px. */
#interface>.case-blocks{gap:0}
#interface .case-feature{margin-top:48px;padding-top:31px;border-top:1px solid var(--color-rule)}
#interface .case-feature:first-child{margin-top:0;padding-top:0;border-top:0}
#interface .case-feature[data-case-spacing="connected"]{margin-top:48px;padding-top:0;border-top:0}
#interface .case-feature--sequence{grid-template-columns:minmax(0,1fr);gap:40px}
.case-sequence-step{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:40px;align-items:start;min-width:0}
.case-sequence-step>.case-feature-media{min-width:0}
#interface>.case-screen-reel{margin-top:32px;padding-top:31px}

@media(max-width:1199.98px){
  .case-research-opening{grid-template-columns:minmax(0,1fr);gap:32px}
  .case-research-introduction>.case-chapter-heading{max-width:760px}
  .case-research-introduction .case-chapter-heading p{max-width:680px}
  .case-research-narrative{max-width:760px}
  .case-context-story--brief>.case-narrative-group{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .case-context-story--brief .case-narrative-group>.case-copy+ .case-copy{padding:24px}
  .case-context-story--brief .case-narrative-group>.case-copy:first-child{padding-top:24px}
  .case-sequence-step{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:32px}
}
@media(max-width:809.98px){
  .case-page .case-context-story--brief,.case-context-story--brief>.case-narrative-group{gap:28px;grid-template-columns:minmax(0,1fr)}
  .case-context-story--brief .case-narrative-group>.case-copy+ .case-copy{padding:24px 20px;border-radius:18px}
  .case-context-story--brief .case-narrative-group>.case-copy:first-child{padding-top:0}
  .case-context-story--brief>.case-copy{padding-top:28px}
  .case-research-opening{gap:28px}
  .case-research-narrative{gap:28px}
  .case-research-narrative>.case-copy+ .case-copy{padding-top:28px}
  .case-chapter--editorial>.case-blocks{margin-top:48px}
  #interface .case-feature{margin-top:32px;padding-top:23px}
  #interface .case-feature[data-case-spacing="connected"]{margin-top:36px;padding-top:0}
  #interface .case-feature--sequence{gap:36px}
  .case-sequence-step{grid-template-columns:minmax(0,1fr);gap:28px}
  #interface>.case-screen-reel{margin-top:24px;padding-top:23px}
}

/* v58 is scoped to STADION. Homepage files and brand type scales stay intact. */
.case-page[data-case="see-mo"]{
  --case-chapter-top:88px;--case-chapter-bottom:96px;--case-content-inset:24px;
  --case-scene-gap:112px;--case-connected-gap:80px;--case-scene-before:64px;
}
.case-page[data-case="see-mo"] .case-chapter{padding-block:var(--case-chapter-top) var(--case-chapter-bottom)}
.case-page[data-case="see-mo"] .case-copy{gap:12px}
.case-page[data-case="see-mo"] .case-copy-body{gap:8px}
.case-page[data-case="see-mo"] .case-chapter-heading{margin-bottom:48px}
.case-page[data-case="see-mo"] .case-blocks{gap:80px}
.case-page[data-case="see-mo"] .case-feature{position:relative;padding-top:32px}
.case-page[data-case="see-mo"] .case-feature:first-child{padding-top:0}
.case-page[data-case="see-mo"] .case-feature--wide{gap:48px}
.case-page[data-case="see-mo"] .case-feature-media{gap:32px}
.case-page[data-case="see-mo"] .case-context-preview{margin-bottom:64px}
/* Trim the encoded 44px bars plus their 2px dark/codec fringe, not the phones. */
.case-page[data-case="see-mo"] .case-context-preview .case-video-wrap{aspect-ratio:480/247}
.case-page[data-case="see-mo"] .case-process-band{margin:80px -24px -96px;padding:80px 24px 88px}
.case-page[data-case="see-mo"] .case-process{gap:40px}
.case-page[data-case="see-mo"] .case-process ol{gap:24px}
.case-page[data-case="see-mo"] .case-stage-number{color:var(--color-accent)}
.case-page[data-case="see-mo"] .case-research-opening{row-gap:48px}
.case-page[data-case="see-mo"] .case-research-introduction>.case-chapter-heading{margin:0}
.case-page[data-case="see-mo"] .case-chapter--editorial>.case-blocks{margin-top:96px}
.case-page[data-case="see-mo"] .case-system-evidence{gap:64px}
.case-page[data-case="see-mo"] .case-system-summary>.case-chapter-heading{margin:0}

/* One controlled interval per scene; close paragraphs never set chapter rhythm. */
.case-page[data-case="see-mo"] #interface>.case-blocks{gap:0}
.case-page[data-case="see-mo"] #interface .case-feature{margin-top:var(--case-scene-before);padding-top:calc(var(--case-scene-gap) - var(--case-scene-before));border-top:0}
.case-page[data-case="see-mo"] #interface .case-feature:first-child{margin-top:0;padding-top:0}
.case-page[data-case="see-mo"] #interface .case-feature[data-case-spacing="connected"]{margin-top:var(--case-connected-gap);padding-top:0}
.case-page[data-case="see-mo"] #interface .case-feature--sequence{gap:var(--case-connected-gap)}
.case-page[data-case="see-mo"] #interface>.case-screen-reel{margin-top:64px;padding-top:48px;border-top:0}

/* Every full-rail internal divider meets the same transparent 14px stars.
   The line and masks are separate: no opaque square covers a surface. */
.case-page[data-case="see-mo"] :is(.case-feature:not(:first-child),.case-screen-reel){border-top:0;position:relative}
.case-page[data-case="see-mo"] :is(.case-feature:not(:first-child),.case-screen-reel)::before{
  content:'';position:absolute;pointer-events:none;left:calc(-1 * var(--case-content-inset));right:calc(-1 * var(--case-content-inset));top:0;height:1px;background:var(--color-rule);
}
.case-page[data-case="see-mo"] :is(.case-feature:not(:first-child),.case-screen-reel)::after{
  content:'';position:absolute;pointer-events:none;left:calc(-1 * var(--case-content-inset) - 7px);right:calc(-1 * var(--case-content-inset) - 7px);top:-7px;height:14px;background:var(--color-ink);z-index:2;
  mask-image:url('/assets/grid-star.svg'),url('/assets/grid-star.svg');mask-size:14px 14px;mask-position:left center,right center;mask-repeat:no-repeat;
  -webkit-mask-image:url('/assets/grid-star.svg'),url('/assets/grid-star.svg');-webkit-mask-size:14px 14px;-webkit-mask-position:left center,right center;-webkit-mask-repeat:no-repeat;
}
.case-page[data-case="see-mo"] #interface .case-feature[data-case-spacing="connected"]::before,
.case-page[data-case="see-mo"] #interface .case-feature[data-case-spacing="connected"]::after{content:none}
.case-page[data-case="see-mo"] .case-chapter::before,.case-page[data-case="see-mo"] .case-chapter::after,
.case-page[data-case="see-mo"] .case-process-band::before,.case-page[data-case="see-mo"] .case-process-band::after{z-index:2;flex:none}

/* Title and explanation start beside the figures, not above their column. */
.case-page[data-case="see-mo"] .case-outcome-composition{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:24px 40px;padding:32px;margin-bottom:64px}
.case-page[data-case="see-mo"] .case-outcome-composition>.case-chapter-heading{grid-column:1;grid-row:1;margin:0}
.case-page[data-case="see-mo"] .case-outcome-body{display:contents}
.case-page[data-case="see-mo"] .case-outcome-story{grid-column:1;grid-row:2;align-content:start}
.case-page[data-case="see-mo"] .case-outcome-composition .case-results{grid-column:2;grid-row:1/3;align-self:stretch;align-content:center;gap:28px;padding:32px;background:var(--color-accent);color:#000;border:0;border-radius:20px}
.case-page[data-case="see-mo"] .case-results>div{padding:0;gap:12px}
.case-page[data-case="see-mo"] .case-results>div+div{border-top:1px solid #0003;padding-top:28px}
.case-page[data-case="see-mo"] .case-results strong{color:#000}
.case-page[data-case="see-mo"] .case-results p{color:#171717;font-size:16px;line-height:1.5}

/* Case routes are always in Projects: the retained SSR dot must agree. */
html[data-case-route] nav .framer-1f4mxxz{transform:rotate(-90deg)!important;opacity:1!important;pointer-events:none}

/* Match the actual homepage project cards, not a separate grey-card system. */
.case-page[data-case="see-mo"] .case-more{display:block;position:relative;padding:0}
.case-more-heading{position:relative;padding:64px 24px;border-bottom:1px solid var(--color-rule)}
.case-more-heading::before,.case-more-heading::after{content:'';position:absolute;bottom:-7px;width:14px;height:14px;background:var(--color-ink);mask:url('/assets/grid-star.svg') center/contain no-repeat;-webkit-mask:url('/assets/grid-star.svg') center/contain no-repeat;z-index:2;pointer-events:none}
.case-more-heading::before{left:-7px}.case-more-heading::after{right:-7px}
.case-page[data-case="see-mo"] .case-more-grid{gap:0;align-items:stretch}
.case-page[data-case="see-mo"] .case-more-grid>.case-project-card{box-sizing:border-box;position:relative;flex:0 0 50%;width:50%;display:flex;flex-direction:column;gap:0;min-width:0;padding:64px 24px;border:0;border-radius:0;background:transparent;overflow:visible;color:var(--color-ink);text-decoration:none}
.case-project-card::after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--color-rule);pointer-events:none}
.case-project-image{position:relative;flex:none;width:100%;aspect-ratio:4/3;border-radius:26px;overflow:hidden;box-shadow:.1763px .764px .7841px -.1429px #00000008,.4319px 1.8717px 1.9208px -.2857px #00000008,.8184px 3.5465px 3.6397px -.4286px #00000008,1.4288px 6.1913px 6.354px -.5714px #0000000a,2.4867px 10.7756px 11.0588px -.7143px #0000000a,4.5546px 19.7367px 20.2555px -.8571px #0000000f,9px 39px 40.025px -1px #0000001a}
.case-page[data-case="see-mo"] .case-project-image img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;margin:0;object-fit:cover;transform:scale(1);transition:transform 550ms cubic-bezier(.2,.7,.2,1)}
.case-page[data-case="see-mo"] [data-project="dirft"] .case-project-image img{inset:auto;left:50%;top:75%;width:145%;height:145%;transform:translate(-50%,-75%) scale(1)}
.case-page[data-case="see-mo"] .case-project-caption{display:flex;align-items:flex-start;gap:20px;padding:24px 0 0;background:transparent}
.case-project-copy{display:grid;gap:8px;min-width:0;flex:1}
.case-page[data-case="see-mo"] .case-project-copy h3{font:500 35px/1.4 var(--font-display);letter-spacing:normal;text-transform:none;text-wrap:balance;transition:color 180ms ease}
.case-page[data-case="see-mo"] .case-project-copy p{font:400 16px/1.6 var(--font-body);text-wrap:pretty;color:var(--color-muted)}
.case-project-arrow{display:grid;place-items:center;flex:none;width:49px;height:49px;border-radius:50%;background:var(--color-soft);color:var(--color-ink);transition:background-color 180ms,color 180ms}
.case-project-arrow svg{width:24px;height:24px}
.case-project-card:is(:hover,:focus-visible) h3{color:var(--color-accent)}
.case-project-card:is(:hover,:focus-visible) .case-project-arrow{background:var(--color-accent);color:#000}
.case-page[data-case="see-mo"] .case-more[data-auto-static] .case-more-grid,
.case-page[data-case="see-mo"] .case-more:not([data-auto-ready]) .case-more-grid{gap:0}
.case-page[data-case="see-mo"] .case-more[data-auto-static] .case-project-card,
.case-page[data-case="see-mo"] .case-more:not([data-auto-ready]) .case-project-card{width:auto;border-bottom:1px solid var(--color-rule)}
@media(hover:hover) and (pointer:fine){
  .case-project-card:is(:hover,:focus-visible) .case-project-image img{transform:scale(1.035)}
  .case-page[data-case="see-mo"] [data-project="dirft"]:is(:hover,:focus-visible) .case-project-image img{transform:translate(-50%,-75%) scale(1.035)}
}
@media(max-width:1199.98px){
  .case-page[data-case="see-mo"] .case-project-copy p{font-size:15px;line-height:1.6}
  .case-page[data-case="see-mo"] .case-outcome-composition{gap:24px 32px}
  .case-page[data-case="see-mo"] .case-outcome-composition .case-results{padding:24px}
}
@media(max-width:809.98px){
  .case-page[data-case="see-mo"]{--case-chapter-top:56px;--case-chapter-bottom:64px;--case-content-inset:16px;--case-scene-gap:72px;--case-connected-gap:56px;--case-scene-before:40px}
  .case-page[data-case="see-mo"] .case-chapter-heading{margin-bottom:40px}
  .case-page[data-case="see-mo"] .case-blocks{gap:48px}
  .case-page[data-case="see-mo"] .case-feature{padding-top:24px;gap:32px}
  .case-page[data-case="see-mo"] .case-feature--wide{gap:32px}
  .case-page[data-case="see-mo"] .case-feature-media{gap:24px}
  .case-page[data-case="see-mo"] .case-context-preview{margin-bottom:40px}
  .case-page[data-case="see-mo"] .case-process-band{margin:56px -16px -64px;padding:56px 16px 64px}
  .case-page[data-case="see-mo"] .case-process{gap:32px}
  .case-page[data-case="see-mo"] .case-process ol{gap:20px}
  .case-page[data-case="see-mo"] .case-research-opening{row-gap:32px}
  .case-page[data-case="see-mo"] .case-chapter--editorial>.case-blocks{margin-top:64px}
  .case-page[data-case="see-mo"] .case-system-evidence{gap:40px}
  .case-page[data-case="see-mo"] #interface>.case-screen-reel{margin-top:40px;padding-top:32px}
  .case-page[data-case="see-mo"] .case-outcome-composition{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px;margin-bottom:40px}
  .case-page[data-case="see-mo"] .case-outcome-story{grid-column:1;grid-row:2}
  .case-page[data-case="see-mo"] .case-outcome-composition .case-results{grid-column:1;grid-row:3;padding:24px;border-radius:18px;gap:24px}
  .case-page[data-case="see-mo"] .case-results>div+div{padding-top:24px}
  .case-more-heading{padding:48px 16px}
  .case-page[data-case="see-mo"] .case-more-grid>.case-project-card{flex-basis:85%;width:85%;padding:64px 16px 62px}
  .case-project-image{border-radius:26px}
  .case-page[data-case="see-mo"] .case-project-caption{display:grid;grid-template-columns:minmax(0,1fr) 49px;column-gap:20px;row-gap:8px}
  .case-project-copy{display:contents}
  .case-page[data-case="see-mo"] .case-project-copy h3{grid-column:1;grid-row:1;font-size:25px;align-self:center}
  .case-page[data-case="see-mo"] .case-project-copy p{grid-column:1/-1;grid-row:2}
  .case-project-arrow{grid-column:2;grid-row:1}
}
@media(prefers-reduced-motion:reduce){
  .case-page[data-case="see-mo"] .case-more-grid{gap:0}
  .case-page[data-case="see-mo"] .case-more-grid>.case-project-card{width:auto;border-bottom:1px solid var(--color-rule)}
  .case-page[data-case="see-mo"] .case-project-image img{transition:none}
}

/* STADION v61: semantic vertical rhythm. Homepage, grids and media stay intact.
   Each relationship has one owner; divider tokens are TOTAL visible intervals. */
.case-page[data-case="see-mo"]{
  --case-sp-paragraph:8px;--case-sp-title-copy:12px;--case-sp-h2-intro:16px;
  --case-sp-intro-body:32px;--case-sp-proof:40px;--case-sp-pair:24px;
  --case-sp-stack:40px;--case-sp-related:48px;--case-sp-scene:88px;--case-sp-chapter:120px;
  --case-related-before:24px;--case-related-after:23px;
  --case-scene-before:44px;--case-scene-after:44px;
  --case-chapter-top:60px;--case-chapter-bottom:59px;
  /* Existing full-rail scene geometry consumes these aliases, never adds gaps. */
  --case-scene-gap:var(--case-sp-scene);--case-connected-gap:var(--case-sp-related);
}
.case-page[data-case="see-mo"] .case-copy{gap:var(--case-sp-title-copy)}
.case-page[data-case="see-mo"] .case-copy-body{gap:var(--case-sp-paragraph)}
.case-page[data-case="see-mo"] .case-chapter-heading{gap:var(--case-sp-h2-intro);margin-bottom:var(--case-sp-intro-body)}
.case-page[data-case="see-mo"] #context{padding-top:80px}
.case-page[data-case="see-mo"] #context>.case-chapter-heading{margin-bottom:var(--case-sp-proof)}
.case-page[data-case="see-mo"] .case-blocks{gap:0}
.case-page[data-case="see-mo"] .case-feature{margin-top:0;padding-top:0}
.case-page[data-case="see-mo"] .case-blocks>.case-feature:not(:first-child){margin-top:var(--case-scene-before);padding-top:var(--case-scene-after)}
.case-page[data-case="see-mo"] #interface .case-feature{margin-top:var(--case-scene-before);padding-top:var(--case-scene-after)}
.case-page[data-case="see-mo"] .case-feature:first-child,
.case-page[data-case="see-mo"] #interface .case-feature:first-child{margin-top:0;padding-top:0}
.case-page[data-case="see-mo"] #interface .case-feature[data-case-spacing="connected"]{margin-top:var(--case-sp-related);padding-top:0}
.case-page[data-case="see-mo"] .case-feature--wide{row-gap:var(--case-sp-proof)}
.case-page[data-case="see-mo"] :is(.case-feature-media,.case-system-evidence){row-gap:var(--case-sp-stack)}
.case-page[data-case="see-mo"] .case-media-pair{gap:var(--case-sp-pair)}
.case-page[data-case="see-mo"] .case-context-preview{margin-bottom:var(--case-sp-related)}
.case-page[data-case="see-mo"] .case-context-story--brief{row-gap:0}
.case-page[data-case="see-mo"] .case-context-story--brief>.case-copy{
  margin-top:var(--case-related-before);padding-top:var(--case-related-after);
}
/* Real 1px border: 44+1+43=88. Bottom padding cancels the negative margin;
   chapter bottom owns the 59px from the final stage row to its boundary. */
.case-page[data-case="see-mo"] .case-process-band{
  margin:var(--case-scene-before) calc(-1 * var(--case-content-inset)) calc(-1 * var(--case-chapter-bottom));
  padding:calc(var(--case-scene-after) - 1px) var(--case-content-inset) var(--case-chapter-bottom);
}
.case-page[data-case="see-mo"] .case-research-opening{row-gap:0}
.case-page[data-case="see-mo"] .case-research-proof{margin-top:var(--case-sp-proof)}
.case-page[data-case="see-mo"] .case-research-narrative{row-gap:0}
.case-page[data-case="see-mo"] .case-research-narrative>.case-copy+ .case-copy{
  margin-top:var(--case-related-before);padding-top:var(--case-related-after);
}
.case-page[data-case="see-mo"] .case-chapter--editorial>.case-blocks{margin-top:var(--case-sp-related)}
.case-page[data-case="see-mo"] #research>.case-blocks>.case-competitors{margin-top:var(--case-sp-scene)}
.case-page[data-case="see-mo"] #research .case-competitors+.case-gallery{margin-top:var(--case-sp-proof)}
/* The panel's existing border is part of this transition, not a second line.
   Its approved internal padding/min-height are independent component metrics. */
.case-page[data-case="see-mo"] #research .case-analysis-trigger{margin-top:calc(var(--case-sp-related) - 1px)}
.case-page[data-case="see-mo"] #architecture .case-reading-block{margin-top:var(--case-sp-related)}
.case-page[data-case="see-mo"] #interface .case-feature--sequence{row-gap:var(--case-sp-related)}
.case-page[data-case="see-mo"] #interface>.case-screen-reel{margin-top:var(--case-scene-before);padding-top:var(--case-scene-after)}
.case-page[data-case="see-mo"] .case-outcome-composition{
  margin-bottom:var(--case-sp-related);
  /* A tall metrics panel must not distribute empty space inside the title row. */
  grid-template-rows:max-content minmax(0,1fr);
}
/* These are paragraphs of one introduction, not independent content blocks. */
.case-page[data-case="see-mo"] .case-system-summary{gap:8px}
.case-page[data-case="see-mo"] .case-system-summary>.case-chapter-heading,
.case-page[data-case="see-mo"] .case-research-introduction>.case-chapter-heading,
.case-page[data-case="see-mo"] .case-outcome-composition>.case-chapter-heading{margin:0}
.case-page[data-case="see-mo"] .case-system-summary>.case-chapter-heading{gap:18px}
.case-page[data-case="see-mo"] .case-outcome-composition>.case-chapter-heading{gap:12px;align-content:start}
.case-page[data-case="see-mo"] .case-process li{grid-template-columns:max-content minmax(0,1fr);column-gap:17px}
.case-page[data-case="see-mo"] .case-stage-number{width:max-content}

/* One media-card structure for full-width, paired and reel evidence. The
   caption stays outside the image link, so only the image pauses the reel. */
.case-page[data-case="see-mo"] .case-media:has(>figcaption){
  display:grid;gap:0;grid-template-rows:auto 1fr;min-width:0;margin:0;
  border:1px solid var(--color-rule);border-radius:26px;
  overflow:hidden;background:var(--color-paper);
}
.case-page[data-case="see-mo"] .case-media:has(>figcaption)>:is(.case-image-link,.case-video-wrap){border-radius:25px;overflow:hidden}
.case-page[data-case="see-mo"] .case-media>figcaption{
  margin:0;padding:20px;font:400 14px/1.55 var(--font-body);
  color:var(--color-muted);background:var(--color-paper);text-wrap:pretty;
}
.case-page[data-case="see-mo"] .case-outcome-composition .case-results,
.case-page[data-case="see-mo"] .case-results :is(strong,p){color:#fff}
.case-page[data-case="see-mo"] .case-results>div+div{border-top-color:#ffffff66}

/* Canonical homepage component in a moving strip. v60: preserve the homepage
   card dimensions; never shrink cards to fit the viewport height. */
.case-page[data-case="see-mo"] .case-more.home-projects-source{width:100%;margin:0}
.case-page[data-case="see-mo"] .case-more-heading{padding:40px 24px}
.case-page[data-case="see-mo"] .case-more-grid{gap:0}
.case-page[data-case="see-mo"] .case-more-grid>.home-project-card{
  box-sizing:border-box;flex:0 0 var(--case-project-width);width:var(--case-project-width)!important;
  --case-project-width:min(50%,700px);
  min-width:0;max-width:none;height:auto;padding:64px 24px;gap:0;
  border:0;border-radius:0;background:transparent;color:var(--color-ink);overflow:visible;
  justify-content:flex-start;align-items:stretch;
}
.case-page[data-case="see-mo"] .home-project-card .framer-1nr2uxi{height:auto;aspect-ratio:1.33256}
.case-page[data-case="see-mo"] .home-project-card h3{
  font:500 35px/49px var(--font-display);letter-spacing:normal;text-transform:none;
  color:var(--framer-text-color,var(--color-ink));white-space:normal;text-wrap:pretty;
}
.case-page[data-case="see-mo"] .home-project-card .framer-gxm2oc p{font:400 16px/25.6px var(--font-body);color:var(--color-muted)}
.case-page[data-case="see-mo"] .home-project-card .framer-1jyqkgd{width:49px;height:49px}
.case-page[data-case="see-mo"] .home-project-card:is(:hover,:focus-visible) h3{--framer-text-color:var(--color-accent)!important}
.case-page[data-case="see-mo"] .home-project-card:is(:hover,:focus-visible) .framer-1jyqkgd{background-color:var(--color-accent)!important}
.case-page[data-case="see-mo"] .home-project-card:is(:hover,:focus-visible) .framer-CfD0L{--1hmr9s8:#fff!important}
.case-page[data-case="see-mo"] .case-more[data-auto-static] .home-project-card,
.case-page[data-case="see-mo"] .case-more:not([data-auto-ready]) .home-project-card{width:100%!important;min-width:0}
.case-page[data-case="see-mo"] .case-more[data-auto-static] .case-more-grid,
.case-page[data-case="see-mo"] .case-more:not([data-auto-ready]) .case-more-grid{max-width:1400px;margin-inline:auto}
@media(max-width:1199.98px){
  .case-page[data-case="see-mo"] .home-project-card h3{font-size:25px;line-height:35px}
  .case-page[data-case="see-mo"] .home-project-card .framer-gxm2oc p{font-size:15px;line-height:24px}
}
@media(min-width:810px) and (max-width:1199.98px){
  .case-page[data-case="see-mo"]{
    --case-sp-intro-body:28px;--case-sp-proof:32px;--case-sp-pair:20px;
    --case-sp-stack:32px;--case-sp-related:40px;--case-sp-scene:72px;--case-sp-chapter:104px;
    --case-related-before:20px;--case-related-after:19px;
    --case-scene-before:36px;--case-scene-after:36px;
    --case-chapter-top:52px;--case-chapter-bottom:51px;
  }
}
@media(max-width:1199.98px){
  .case-page[data-case="see-mo"] .case-research-narrative{margin-top:var(--case-sp-intro-body)}
}
@media(max-width:809.98px){
  .case-page[data-case="see-mo"]{
    --case-sp-h2-intro:14px;--case-sp-intro-body:24px;--case-sp-proof:24px;--case-sp-pair:16px;
    --case-sp-stack:28px;--case-sp-related:32px;--case-sp-scene:56px;--case-sp-chapter:80px;
    --case-related-before:16px;--case-related-after:15px;
    --case-scene-before:28px;--case-scene-after:28px;
    --case-chapter-top:40px;--case-chapter-bottom:39px;
  }
  .case-page[data-case="see-mo"] #context{padding-top:48px}
  .case-page[data-case="see-mo"] .case-feature{row-gap:var(--case-sp-proof)}
  .case-page[data-case="see-mo"] .case-context-story--brief>.case-narrative-group{row-gap:var(--case-sp-related)}
  .case-page[data-case="see-mo"] .case-sequence-step{row-gap:var(--case-sp-proof)}
  .case-page[data-case="see-mo"] .case-system-layout{row-gap:32px}
  .case-page[data-case="see-mo"] .case-system-summary>.case-chapter-heading{gap:14px}
  .case-page[data-case="see-mo"] .case-outcome-composition{grid-template-rows:none}
  .case-page[data-case="see-mo"] .case-media:has(>figcaption){border-radius:18px}
  .case-page[data-case="see-mo"] .case-media:has(>figcaption)>:is(.case-image-link,.case-video-wrap){border-radius:17px}
  .case-page[data-case="see-mo"] .case-media>figcaption{padding:16px}
  .case-page[data-case="see-mo"] .case-more-heading{padding:32px 16px}
  .case-page[data-case="see-mo"] .case-more-grid>.home-project-card{--case-project-width:100%;min-width:0;height:min-content;padding:64px 16px 62px}
  .case-page[data-case="see-mo"] .home-project-card .framer-1nr2uxi{border-radius:20px!important}
  .case-page[data-case="see-mo"] .home-project-card h3{font-size:25px;line-height:35px}
  .case-page[data-case="see-mo"] .home-project-card .framer-1jyqkgd{width:37px;height:37px}
}
@media(prefers-reduced-motion:reduce){
  .case-page[data-case="see-mo"] .case-more-grid{max-width:1400px;margin-inline:auto}
  .case-page[data-case="see-mo"] .case-more-grid>.home-project-card{width:100%!important;min-width:0}
}