/* Stable navigation; the compact mobile state retains every contact. */
html{--header-offset:112px;scroll-padding-top:var(--header-offset)}
body>.header{position:sticky;top:0;z-index:100;width:100%;padding-inline:max(var(--space),calc((100% - 1360px)/2 + var(--space)));background:var(--canvas);border-bottom:0;isolation:isolate}
.header .compact-mark{display:none!important}
.case-page>.case-builder{scroll-margin-top:var(--header-offset)}
.case-phase h2{gap:20px;align-items:center;justify-content:flex-start}
.case-phase h2>.case-phase-number{font:400 28px/1.4 Nothing,cursive;letter-spacing:0;min-width:30px;flex:none;color:var(--hand);margin:0}
.case-phase-2 h2>.case-phase-number{color:var(--handOnFill)}
.case-original-workflow{grid-column:1/-1;min-width:0}
.case-original-workflow>img{display:block;width:100%;height:auto;border-radius:8px}
.case-warehouse figure>img{display:block;width:100%;height:340px;object-fit:cover;border-radius:12px}
.case-warehouse .case-production{width:100%;max-width:191px;justify-self:center}
.case-warehouse .case-production video{width:100%;height:auto;max-height:none;aspect-ratio:9/16;object-fit:cover;background:transparent}
.home-closing .closing-meta{padding-bottom:32px}
@media(max-width:900px){html{--header-offset:152px}html[data-scrolled=true]{--header-offset:80px}html[data-scrolled=true] body>.header{min-height:64px;flex-wrap:nowrap;gap:6px;padding-block:8px}html[data-scrolled=true] .header .brand>img:not(.compact-mark){display:none}html[data-scrolled=true] .header .compact-mark{display:block!important;width:44px;height:32px}html[data-scrolled=true][data-theme=light] .header .compact-mark.brand-dark,html[data-scrolled=true][data-theme=dark] .header .compact-mark.brand-light{display:none!important}html[data-scrolled=true] .header .header-socials{order:0;width:auto;gap:0}html[data-scrolled=true] .header-socials a{width:32px;min-width:32px;height:40px}html[data-scrolled=true] .header>.theme-toggle{margin-left:auto}}
@media(max-width:760px){.case-phase h2>.case-phase-number{font-size:23px;min-width:24px}.case-warehouse figure>img{height:230px}.case-warehouse figure:first-child>img{height:auto;aspect-ratio:4/3}}
html{--header-offset:96px}
@media(max-width:900px){html{--header-offset:136px}html[data-scrolled=true]{--header-offset:64px}}


/* Compact creator-to-product composition, with each label above its image. */
.case-intro{min-height:0;padding:24px 0 32px}
.case-hero-visual{height:auto;width:100%;max-width:580px;aspect-ratio:1.16;margin-inline:auto}
.case-portrait-note{left:6%;top:0;font-size:clamp(23px,2.3vw,29px);transform:rotate(-5deg);white-space:nowrap}
.case-portrait-role{position:absolute;left:6%;top:9%;font-size:13px;color:var(--ink2)}
.case-hero-visual .case-portrait{left:3%;top:18%;width:62%}
.case-hero-phone{right:2%;top:31%;width:27%}
.case-product-note{position:absolute;right:0;top:22%;font-size:clamp(17px,1.7vw,21px);white-space:nowrap}
@media(max-width:760px){
 .case-intro{gap:16px;padding:16px 0 24px}
 .case-hero-visual{max-width:490px}
 .case-portrait-note{font-size:clamp(20px,5.5vw,26px)}
 .case-portrait-role{font-size:clamp(10px,2.8vw,13px);top:11%}
 .case-hero-visual .case-portrait{top:21%;width:59%;left:4%}
 .case-hero-phone{top:34%;right:2%;width:26%}
 .case-product-note{top:23%;font-size:clamp(13px,3.7vw,18px)}
 .case-intro .case-hand{margin:14px 0 16px}
 .case-intro .case-hero-description{margin-bottom:12px}
}

@media(max-width:380px){.case-portrait-role{top:14%}.case-hero-visual .case-portrait{top:23%;width:58%}}

/* Text-bearing evidence keeps its native proportions and a readable line scale. */
.case-evidence-panel-0{display:flex;flex-direction:column;gap:40px}
.case-evidence-panel-0>*{width:100%;min-width:0}
.case-pipeline h3{max-width:none;margin-bottom:24px}
.case-pipeline ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.case-pipeline li{padding:0;margin:0}
.case-pipeline li::before,.case-pipeline li::after{display:none}
.case-evidence-panel-1>figure,.case-operations,.case-retention{display:flex;flex-direction:column;align-items:stretch;gap:24px}
.case-evidence-panel figure figcaption{margin:0 0 20px;max-width:72ch}
.case-evidence-panel figure figcaption h3{font-size:26px;margin-bottom:10px}
.case-evidence-panel figure figcaption p{margin-bottom:0}
.case-operations>div,.case-retention>div{max-width:72ch}
.case-company-structure{margin-top:16px!important}
.case-document{display:block;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:auto;scrollbar-color:var(--accentText) var(--line);padding-bottom:8px}
.case-document:focus-visible{outline:2px solid var(--accentText);outline-offset:5px}
.case-system .case-document>img{display:block;width:100%;max-width:var(--document-width);height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;transform:none;border-radius:0;margin-inline:auto}
.case-document::-webkit-scrollbar{height:8px}
.case-document::-webkit-scrollbar-thumb{background:var(--accentText);border-radius:4px}
.case-document::-webkit-scrollbar-track{background:var(--line)}
@media(max-width:760px){
 .case-evidence-panel-0{gap:28px}
 .case-pipeline ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
 .case-evidence-panel figure figcaption h3{font-size:22px}
 .case-document{width:100%}
 .case-system .case-document>img{width:var(--document-width);max-width:none;margin:0}
}

/* A complete first viewport followed by the case's opening narrative. */
.case-page{padding-top:0}
.case-first-screen{min-height:calc(100svh - var(--case-header-height,96px));display:grid;grid-template-rows:36px 1fr;padding-top:28px}
.case-first-screen>.work-back{align-self:start}
.case-first-screen .case-intro{min-height:0;padding:24px 0 48px;gap:40px}
.case-first-screen .case-hero-visual{max-width:650px}
.case-first-screen .case-portrait-role{font-family:Nothing,cursive;font-size:clamp(15px,1.5vw,19px);line-height:1.4;color:var(--hand);top:9%;transform:rotate(-3deg);white-space:nowrap}
.case-first-screen .case-intro h1{font-size:clamp(72px,6.7vw,98px)}
.case-opening{position:relative;max-width:none;gap:14%;padding:96px 0 88px;border-top:1px solid var(--line2)}
.case-opening .case-chapter h2{font:400 clamp(27px,3vw,38px)/1.4 Nothing,cursive;letter-spacing:0;margin-bottom:24px;color:var(--hand)}
.case-opening .case-chapter-lead{font:400 clamp(23px,2.3vw,30px)/1.4 NeueText,sans-serif;letter-spacing:-.02em;color:var(--ink);margin-bottom:24px}
.case-opening .case-chapter>p:last-child{font-size:18px;max-width:44ch}
.case-chapter-arrow{position:absolute;width:140px;height:70px;left:calc(50% - 70px);top:92px;stroke:var(--accentText);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.case-problem{background:transparent;border-radius:0;padding:72px 0 88px;border-top:1px solid var(--line2);grid-template-columns:1fr 1.15fr;gap:10%;align-items:start}
.case-problem h2{font-size:clamp(36px,4.3vw,60px);max-width:12ch}
.case-audience-flow{display:block;width:100%;max-width:420px;height:auto;margin-top:40px;overflow:visible}
.case-audience-flow .audience-ring{fill:none;stroke:var(--accentText);stroke-width:1.5}
.case-audience-flow .audience-route{fill:none;stroke:var(--accentText);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.case-audience-flow .audience-arrival{fill:var(--hand);stroke:none}
.case-audience-flow text{font:14px NeueText,sans-serif;fill:var(--ink2);stroke:none}
.case-problem-copy>p{margin:0;padding:24px 0;border-top:1px solid var(--line2)}
.case-problem-copy>p:first-child{padding-top:0;border-top:0}
.case-problem-copy strong{display:block;font:400 23px/1.4 NeueText,sans-serif;color:var(--ink);margin-bottom:12px}
.case-problem-copy span{display:block;font:17px/1.6 NeueText,sans-serif;color:var(--ink2)}
@media(max-width:1100px) and (min-width:761px){.case-first-screen .case-intro h1{font-size:64px}.case-first-screen .case-portrait-role{font-size:14px}.case-chapter-arrow{width:100px;left:calc(50% - 50px)}}
@media(max-width:760px){
 .case-first-screen{min-height:calc(100svh - var(--case-header-height,115px));padding-top:20px}
 .case-first-screen .case-intro{padding:12px 0 32px;gap:24px;justify-content:center}
 .case-first-screen .case-intro h1{font-size:clamp(48px,12vw,72px)}
 .case-first-screen .case-hero-visual{max-width:490px;flex-shrink:0}
 .case-first-screen .case-portrait-role{font-size:clamp(11px,3.1vw,15px);top:12%}
 .case-first-screen .case-hero-visual .case-portrait{top:24%;width:58%}
 .case-opening{display:flex;flex-direction:column;gap:72px;padding:56px 0}
 .case-opening .case-chapter h2{margin-bottom:18px;font-size:29px}
 .case-opening .case-chapter-lead{font-size:25px;margin-bottom:18px}
 .case-opening .case-chapter>p:last-child{font-size:16px}
 .case-chapter-arrow{position:static;width:80px;height:48px;align-self:center;transform:rotate(65deg);margin:-60px 0 -40px}
 .case-problem{display:flex;flex-direction:column;padding:48px 0;gap:32px}
 .case-problem h2{max-width:15ch;font-size:38px}
 .case-audience-flow{margin-top:28px;max-width:400px}
 .case-problem-copy strong{font-size:21px}.case-problem-copy span{font-size:16px}
}

/* Persistent visible motion uses fixed SVG particles, never accumulating nodes. */
.case-audience-flow .flow-customer{display:none;fill:var(--hand);stroke:none}
.case-audience-flow.is-live .flow-customer{display:block}
.case-audience-flow.is-live .audience-arrival{opacity:0}
.case-audience-flow .flow-travel-path{fill:none;stroke:none}
.case-asset-path>div>svg{width:56px;height:58px;overflow:visible}
.case-asset-path .diagnosis-token{display:none;fill:var(--hand);stroke:none}
.case-asset-path .program-copy{display:none;fill:var(--canvas);stroke:var(--accentText);stroke-width:1.4}
.case-asset-path.is-live .diagnosis-token,.case-asset-path.is-live .program-copy{display:block}
.case-asset-path.is-live>div:last-child>svg{color:var(--accentText)}
.case-asset-path .program-screen{fill:var(--canvas)}
@media(prefers-reduced-motion:reduce){.case-audience-flow .flow-customer,.case-asset-path .diagnosis-token,.case-asset-path .program-copy{display:none!important}.case-audience-flow .audience-arrival{opacity:1!important}}

/* Call 02.10: continuous header surface, without a container-width seam. */
/* The full-width header paints its own background without extending page overflow. */

/* Diagnosis: the connector is measured from the visible icon edges. */
.case-asset-path{position:relative;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.case-asset-path>.case-asset-arrow{position:absolute;inset:0;width:100%;height:100%;transform:none;overflow:visible;pointer-events:none;align-self:auto}
.case-asset-path>div{min-width:0}
@media(max-width:380px){.case-asset-path{gap:44px}.case-asset-path small{max-width:12ch}}

/* Keep the services link readable on the shared cobalt surface in both themes. */
.services-section .service-detail-link{color:var(--onFill)}