/* A continuation of Selected Work: the same type, cutout imagery, handwritten voice
   and open compositions. All rules stay local to the case study. */
.fns-case-study { --case-blue: #2478ff; --case-blue-ink: #245fbd; --case-muted: #626977; background: var(--selected-work-surface,#fdfdfc); color: var(--portfolio-ink,#101216); }
.fns-case-study :is(h1,h2,h3,h4,p,figure,dl,dd) { margin: 0; }
.fns-case-study img { display: block; max-width: 100%; height: auto; }
.fns-case-study video { display: block; max-width: 100%; height: auto; background: #f5f9fb; }
.fns-case-study main { overflow: clip; }
.fns-case-study section,.fns-case-study article { scroll-margin-top: 38px; }
.fns-case-study [hidden] { display: none !important; }
.fns-case-study :is(h1,h2,h3,h4):where(:not(.contact-heading)) { font-weight: 700; letter-spacing: -.055em; text-wrap: balance; }
.fns-case-study h2:where(:not(.contact-heading)) { font-size: clamp(2.25rem,4.2vw,3.5rem); line-height: 1.08; }
.fns-case-study h3 { font-size: clamp(2rem,3.2vw,2.9rem); line-height: 1.1; }
.fns-case-study h4 { font-size: 1.45rem; line-height: 1.2; }
.fns-case-study :where(main > :not(.contact-chapter)) p { font-size: 1.2rem; line-height: 1.55; color: var(--portfolio-body,#505b6c); letter-spacing: -.025em; }
.fns-case-study p + p { margin-top: 1rem; }
.fns-case-study :is(h2,h3,h4) + p { margin-top: 1.4rem; }
.fns-case-study .case-small { font-size: .84rem; line-height: 1.6; color: var(--case-muted); letter-spacing: -.006em; }
.fns-case-study .case-soft { color: var(--portfolio-muted,#687386); }
.case-wide { width: min(1240px,calc(100% - var(--page-padding)*2)); margin-inline: auto; }
.case-medium { width: min(1100px,calc(100% - var(--page-padding)*2)); margin-inline: auto; }
.case-reading { width: min(720px,100%); margin-inline: auto; }
.fns-case-study .case-kicker { display: block; min-height: 0; margin: 0 0 1.25rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--portfolio-muted,#687386); font-size: .75rem; line-height: 1.5; letter-spacing: .16em; font-weight: 750; text-transform: uppercase; }
.fns-case-study .case-handwriting { color: #263449; font-family: "Bradley Hand","Segoe Print","Comic Sans MS",cursive; font-size: 1.25rem; line-height: 1.35; letter-spacing: .01em; font-weight: 400; }
.case-back { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; color: var(--case-muted); }
.case-back:hover { color: var(--portfolio-ink); }
.case-text-link { display: inline-flex; align-items: center; gap: 1.7rem; min-height: 44px; padding-block: .55rem; border-bottom: 2px solid var(--case-blue); font-weight: 650; font-size: 1.1rem; }
.case-text-link span { transition: transform .25s var(--ease-out); }
.case-text-link:hover span { transform: translate(2px,-2px); }
.case-source-link { display: inline-block; min-height: 44px; padding-top: 12px; font-size: .86rem; color: var(--case-blue-ink); text-decoration: underline; text-underline-offset: 4px; }
.fns-case-study :is(a,button,summary,video):focus-visible { outline: 3px solid var(--case-blue); outline-offset: 5px; }
.case-opening { padding-top: calc(var(--header-height) + 12px); }
.case-opening-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; min-height: 630px; gap: 3%; padding: 24px 2% 32px; }
.fns-case-study h1 { font-size: clamp(3.65rem,6.35vw,5.8rem); line-height: 1.02; font-weight: 750; letter-spacing: -.06em; }
.fns-case-study h1 span { white-space: nowrap; }
.fns-case-study h1 span::after { content: ""; display: inline-block; width: .12em; height: .12em; border-radius: 50%; background: var(--case-blue); margin-left: .13em; vertical-align: .12em; }
.fns-case-study .case-subtitle { font-size: clamp(1.3rem,1.9vw,1.7rem); line-height: 1.45; margin-top: 1.6rem; }
.case-opening-copy > .case-text-link { margin-top: 1.9rem; }
.case-hero-media { position: relative; isolation: isolate; width: min(100%,310px,29.7dvh); justify-self: center; }
.case-hero-media video { width: 100%; aspect-ratio: 9/20; object-fit: contain; border-radius: 20px; box-shadow: 0 24px 55px rgb(51 82 111 / 13%); }
.case-video-aura { position: absolute; inset: 5% -55% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse,rgb(189 224 249 / 52%),transparent 68%); }
.fns-case-study figcaption { font-size: .78rem; line-height: 1.5; color: var(--case-muted); margin-top: 16px; }
.case-hero-media figcaption { display: flex; justify-content: space-between; gap: 12px; }
.case-film-chapters { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: 20px auto 40px; }
.case-film-chapters > span { font-size: .8rem; color: var(--case-muted); margin-right: 10px; }
.case-film-chapters button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 0; min-height: 44px; font: inherit; font-size: .86rem; cursor: pointer; color: var(--portfolio-body); }
.case-film-chapters button[aria-pressed="true"] { border-color: var(--case-blue); color: var(--portfolio-ink); }
.case-project-meta { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 25px; padding: 40px 2%; }
.case-project-meta dt { font-size: .75rem; color: var(--case-muted); margin-bottom: .5rem; }
.case-project-meta dd { font-size: .95rem; line-height: 1.5; }
.case-context-section { padding: 130px 3% 110px; }
.case-counter-flow { list-style: none; margin: 60px 0 65px; padding: 30px 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 32px; }
.case-counter-flow li { position: relative; }
.case-counter-flow li + li::before { content: "→"; position: absolute; left: -25px; top: -2px; color: #a7b6ca; }
.case-counter-flow strong { display: block; font-size: 1rem; line-height: 1.4; letter-spacing: -.025em; }
.case-counter-flow span { display: block; margin-top: 9px; font-size: .83rem; line-height: 1.5; color: var(--case-muted); }
.case-counter-weight strong { color: var(--portfolio-ink); }
.case-counter-weight::after { content: ""; position: absolute; left: 0; top: 29px; width: 70px; height: 2px; background: #c6dafa; }
.case-perception { display: grid; grid-template-columns: .95fr 1.05fr; gap: 12%; padding: 45px 5%; background: radial-gradient(ellipse at 20% 20%,#edf5fd,transparent 73%); }
.case-perception h3 { font-size: clamp(1.9rem,3vw,2.65rem); }
.fns-case-study .case-thesis { max-width: 850px; margin: 70px auto 0; color: var(--portfolio-ink); font-size: clamp(1.65rem,3.1vw,2.6rem); line-height: 1.35; letter-spacing: -.045em; text-align: center; }
.case-thesis span { color: var(--case-blue-ink); }
.case-questions { max-width: 1100px; padding-block: 30px 110px; }
.case-questions header { max-width: 580px; }
.case-question-list { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 15%; margin-top: 64px !important; padding-inline: 4%; }
.case-question-list > div { padding: 0; max-width: 390px; }
.case-question-list > div:nth-child(even) { padding-top: 45px; }
.case-question-list > div:last-child { grid-column: 1/-1; justify-self: center; max-width: 460px; }
.case-question-list dt { font-size: .75rem; color: var(--case-muted); margin-bottom: 14px; letter-spacing: .08em; text-transform: uppercase; }
.case-question-list dd { font-family: "Bradley Hand","Segoe Print","Comic Sans MS",cursive; font-size: clamp(1.6rem,2.6vw,2.1rem); letter-spacing: -.02em; line-height: 1.3; rotate: -2deg; }
.case-question-list dd::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 16px; background: var(--case-blue); opacity: .65; rotate: -3deg; }
.case-questions > .case-small { margin-top: 48px; }
.case-design-intro { padding-top: 80px; padding-bottom: 60px; }
.case-discovery { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; padding: 40px 5% 120px; }
.case-feature-copy .case-handwriting { margin-top: 35px; rotate: -4deg; }
.case-stories { margin-top: 32px; }
.case-stories summary { display: flex; gap: 22px; align-items: center; min-height: 44px; font-size: .9rem; color: var(--case-blue-ink); cursor: pointer; }
.case-stories figure { width: min(100%,250px); margin-top: 20px; }
.case-stories video { border-radius: 15px; }
.fns-case-study figcaption a { color: var(--case-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.case-demo { position: relative; isolation: isolate; width: min(100%,340px); justify-self: center; }
.case-demo::before { content: ""; position: absolute; inset: 0 -45%; background: radial-gradient(ellipse,rgb(196 230 248 / 44%),transparent 70%); z-index: -1; pointer-events: none; }
.case-demo video { width: 100%; aspect-ratio: 9/20; border-radius: 18px; box-shadow: 0 18px 45px rgb(31 58 85 / 9%); }
.case-choice-section { padding: 65px 5% 120px; }
.case-choice-composition { margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px 12%; align-items: center; max-width: 920px; position: relative; }
.case-demo-selection { grid-row: span 2; width: min(100%,340px); }
.case-size-detail { overflow: hidden; }
.case-size-detail > a { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 20px; background: #eefbff; box-shadow: 0 15px 40px rgb(31 58 85 / 6%); }
.case-size-detail img { width: 100%; transform: translateY(-39%); }
.fns-case-study .case-size-detail p { font-size: .94rem; margin-top: 22px; }
.case-size-detail strong { color: var(--portfolio-ink); font-weight: 500; }
.case-choice-note { max-width: 340px; align-self: start; }
.case-choice-note > span { display: block; margin-top: 24px; rotate: -4deg; }
.case-cut-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14%; padding: 80px 5% 120px; }
.case-cut-copy { grid-column: 2; grid-row: 1; }
.case-demo-cuts { grid-column: 1; grid-row: 1; }
.fns-case-study .case-design-principle { font-size: 1.25rem; color: var(--case-blue-ink); line-height: 1.4; margin-top: 32px; letter-spacing: -.03em; }
.case-demo-cuts { width: min(100%,350px); }
.case-price-section { padding: 100px 0 100px; background: radial-gradient(ellipse 60% 48% at 50% 55%,#f0f8fc,transparent); }
.case-weight-pair { display: grid; grid-template-columns: 1fr 65px 1fr; max-width: 830px; gap: 32px; margin: 60px auto 75px; align-items: center; }
.case-weight-pair > div > span { font-size: .84rem; color: var(--case-blue-ink); display: block; margin-bottom: 18px; }
.case-weight-pair strong { display: block; font-size: clamp(1.6rem,2.5vw,2.1rem); line-height: 1.2; font-weight: 500; letter-spacing: -.04em; }
.case-weight-pair p { font-size: .9rem !important; margin-top: 15px; }
.case-weight-arrow { color: #9fbadc; font-size: 2.8rem; text-align: center; }
.case-price-proof { max-width: 1000px; margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12%; align-items: center; }
.case-price-proof figure > a { display: block; height: 485px; overflow: hidden; border-radius: 22px; background: #ecfaff; box-shadow: 0 18px 40px rgb(31 58 85 / 8%); }
.case-price-proof img { width: 118%; max-width: none; transform: translate(-15%,-55%); }
.case-price-proof h4:not(:first-child) { margin-top: 36px; }
.case-price-proof .case-text-link { margin-top: 25px; }
.case-price-proof .case-cart-proof { max-width: 340px; margin-top: 25px; }
.case-price-proof .case-cart-proof > a { height: auto; border-radius: 15px; }
.case-price-proof .case-cart-proof img { width: 100%; max-width: 100%; transform: none; }
.case-research { max-width: 1120px; padding: 120px 4% 95px; }
.case-study-result { display: grid; grid-template-columns: .75fr 1.15fr; gap: 13%; align-items: center; margin-block: 70px 80px; }
.case-preference strong { display: block; font-size: clamp(6rem,12vw,10rem); color: var(--portfolio-ink); line-height: 1; font-weight: 700; letter-spacing: -.09em; }
.case-preference strong span { font-size: .45em; color: var(--portfolio-muted); letter-spacing: -.05em; }
.fns-case-study .case-preference p { font-size: 1.3rem; line-height: 1.35; margin-top: 16px; color: var(--portfolio-ink); }
.case-study-result h3 { font-size: clamp(1.7rem,2.8vw,2.5rem); }
.case-research-reading { display: grid; grid-template-columns: .8fr 1.4fr; gap: 10%; align-items: start; margin-bottom: 50px; }
.case-research-reading h3 { font-size: 1.8rem; }
.case-research-reading p { margin: 0 !important; }
.case-refinement-table > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding: 24px 0; border-bottom: 1px solid #e9ebed; }
.case-refinement-table p { font-size: 1rem !important; }
.case-refinement-table strong { color: var(--portfolio-ink); font-weight: 550; }
.case-refinement-table .case-refinement-head { padding-bottom: 14px; font-size: .8rem; color: var(--case-muted); }
.case-research-caveat { margin-top: 20px !important; max-width: 740px; }
.case-interviews { margin-top: 70px; }
.case-interviews h3 { font-size: 2rem; }
.case-interviews p { font-size: 1rem !important; }
.case-interview-links { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px; }
.case-interview-links a { display: flex; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 2px solid #d3e4ff; font-size: 1rem; transition: border-color .2s,transform .3s var(--ease-out); }
.case-interview-links a:hover { border-color: var(--case-blue); transform: translateY(-3px); }
.case-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #edf4ff; color: var(--case-blue-ink); font-size: .85rem; padding-left: 2px; flex: 0 0 auto; }
.case-interview-links small { display: block; font-size: .78rem; color: var(--case-muted); margin-top: 6px; }
.case-interviews > .case-small { margin-top: 15px; font-size: .8rem !important; }
.case-delivery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 75px 10%; padding: 80px 7% 100px; background: radial-gradient(ellipse at 80% 50%,#eff6fc,transparent 70%); }
.case-delivery h2 { font-size: clamp(2rem,3.4vw,3rem) !important; }
.case-production-number { align-self: center; }
.case-production-number strong { display: block; font-size: clamp(4rem,7.6vw,6.5rem); color: var(--portfolio-ink); letter-spacing: -.07em; font-weight: 700; }
.fns-case-study .case-production-number p { font-size: 1.2rem; }
.case-delivery-notes { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12%; }
.case-delivery-notes h3 { font-size: 2rem; }
.case-delivery-notes p { margin: 0 !important; }
.case-launch-line { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center; padding-top: 15px; }
.case-launch-line > div > span { font-size: 1.6rem; font-weight: 550; letter-spacing: -.04em; }
.case-launch-line p { margin-top: 8px; font-size: .9rem !important; }
.case-launch-line > span { text-align: center; color: #a5b9d4; }
.case-outcomes { padding-block: 95px 55px; }
.fns-case-study .case-closing-thought { font-size: 1.5rem; line-height: 1.45; color: var(--case-blue-ink); margin-top: 40px; letter-spacing: -.035em; }
.case-source-notes { margin-top: 20px; margin-bottom: 70px; }
.case-source-notes details { padding-block: 15px; border-block: 1px solid #e6eaee; }
.case-source-notes summary { cursor: pointer; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .9rem; list-style: none; }
.case-source-notes summary::-webkit-details-marker { display: none; }
.case-source-notes summary span { font-size: 1.5rem; color: var(--case-muted); }
.case-source-notes p { font-size: .85rem !important; line-height: 1.6; max-width: 800px; padding-block: 12px; }
.case-source-notes a { text-decoration: underline; text-underline-offset: 4px; }
.case-next { padding-block: 10px 30px; }
.case-next-project { display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: center; margin-top: 30px; padding: 20px 9%; background: radial-gradient(ellipse at 87% 50%,rgb(253 220 210 / 23%),transparent 65%); }
.case-next-project h2 { font-size: clamp(2rem,3.8vw,3.2rem) !important; margin-block: 10px; }
.case-next-project h2 span { margin-left: 20px; }
.case-next-project > img { width: 190px; max-height: 290px; object-fit: contain; }
.fns-case-study .contact-chapter { min-width: 0; margin-top: 40px; }
.fns-case-study .contact-destination span { color: inherit; }
.fns-case-study .case-can-reveal { transition: opacity .65s ease-out,transform .8s var(--ease-out); }
.fns-case-study .case-can-reveal:not(.is-revealed) { opacity: 0; transform: translateY(18px); }
.fns-case-study.case-motion-paused *, .fns-case-study.case-motion-paused *::before,.fns-case-study.case-motion-paused *::after { animation-play-state: paused !important; }
.case-image-dialog { width: min(1040px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid #e0e7ee; border-radius: 20px; color: var(--portfolio-ink); background: #fdfdfc; box-shadow: 0 20px 80px rgb(17 28 46 / 18%); }
.case-image-dialog::backdrop { background: rgb(21 31 45 / 52%); backdrop-filter: blur(8px); }
.case-image-dialog button { display: block; margin: 0 0 14px auto; min-height: 44px; border: 1px solid #d6dee7; border-radius: 25px; padding: 7px 18px; background: white; font: inherit; cursor: pointer; }
.case-image-dialog button span { margin-left: 20px; font-size: 1.3rem; }
.case-dialog-scroll { max-height: calc(100dvh - 205px); overflow: auto; background: #f1f5f8; border-radius: 12px; padding: 16px; }
.case-dialog-scroll img { width: auto; max-width: min(100%,540px); margin-inline: auto; }
.fns-case-study [data-dialog-caption] { font-size: .8rem; padding-top: 15px; }

/* The homepage's layered FnS artwork, without rebuilding or distorting the phone. */
.case-fns-scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1.03; }
.case-scene-aura { position: absolute; inset: 22% -2% 0; z-index: -1; background: radial-gradient(ellipse,rgba(178,221,255,.34),transparent 72%); pointer-events: none; }
.case-hero-preview { position: absolute; display: block; width: 72%; top: -3%; left: 22%; z-index: 2; }
.case-hero-preview img { width: 100%; height: auto; }
.case-scene-fish,.case-scene-ice,.case-scene-herb { position: absolute; pointer-events: none; }
.case-scene-fish { width: 40%; left: -1%; top: 43%; z-index: 1; }
.case-scene-ice { width: 20%; left: 9%; bottom: 12%; z-index: 3; }
.case-scene-herb { width: 22%; right: -1%; bottom: 21%; z-index: 3; }
.case-fns-scene .case-scene-note { position: absolute; width: 145px; top: 7%; left: -2%; margin: 0; text-align: center; rotate: -7deg; }
.case-scene-note .case-handwriting { font-size: 1.12rem; }
.case-scene-note svg { width: 72px; height: 58px; margin: 5px 0 0 65px; }
.case-scene-note svg,.case-sai-aside svg { stroke: #263449; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case-scene-phone { animation: case-phone-float 8.16s ease-in-out infinite; animation-play-state: paused; }
.case-scene-fish { animation: case-fish-float 6.72s ease-in-out -1.3s infinite; animation-play-state: paused; }
.case-fns-scene.is-motion-active .case-scene-phone,.case-fns-scene.is-motion-active .case-scene-fish { animation-play-state: running; }
@keyframes case-phone-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes case-fish-float { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(-4px,-8px) rotate(1deg); } }
.case-character-intro { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.7fr); gap: 10%; align-items: center; }
.case-character-intro .case-reading { width: 100%; margin: 0; }
.case-sai-aside { position: relative; width: 100%; max-width: 290px; justify-self: end; padding-bottom: 60px; }
.case-sai-aside img { width: 100%; }
.case-sai-aside .case-handwriting { font-size: 1.12rem; text-align: center; rotate: -5deg; margin: 0; }
.case-sai-aside svg { position: absolute; width: 57px; height: 48px; left: 0; bottom: 63px; transform: scaleX(-1); }
.case-character-intro--thinking .case-sai-aside { max-width: 250px; }
.case-story-index { padding-block: 20px 0; }
.case-story-index summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; font-size: .92rem; list-style: none; border-bottom: 1px solid #e5e7e9; padding-block: 12px; }
.case-story-index summary::-webkit-details-marker { display: none; }
.case-story-index summary > span { font-size: 1.4rem; color: var(--case-blue-ink); }
.case-story-index details[open] summary > span { transform: rotate(45deg); }
.case-story-index-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 26px; padding-block: 28px; }
.case-story-index-grid strong { display: block; margin-bottom: 16px; color: var(--portfolio-ink); font-size: .88rem; font-weight: 650; }
.case-story-index-grid a { display: block; padding-block: 8px; font-size: .82rem; line-height: 1.5; color: var(--case-muted); }
.case-story-index-grid a:hover { color: var(--case-blue-ink); text-decoration: underline; text-underline-offset: 4px; }
.case-structure-section { padding-block: 110px; }
.case-structure-section > .case-reading { margin-inline: 0; }
.case-overview > .case-reading,.case-final-flow > .case-reading { margin-inline: auto; text-align: center; }
.fns-case-study .case-insight { max-width: 720px; margin: 0 auto; font-size: 1.4rem; line-height: 1.45; color: var(--portfolio-ink); }
.case-insight strong { color: var(--portfolio-ink); font-weight: 650; text-decoration: underline; text-decoration-color: #81b2ff; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.case-gap-map { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 70px; margin-top: 55px; }
.case-gap-map > div:last-child { grid-column: 1/-1; max-width: 720px; }
.fns-case-study .case-gap-map h3,.fns-case-study .case-exploration-prompts h3,.fns-case-study .case-development-notes h3,.fns-case-study .case-build-notes h3,.fns-case-study .case-learning-space h3 { font-size: 1.55rem; line-height: 1.2; }
.fns-case-study :is(.case-gap-map,.case-development-notes,.case-build-notes,.case-learning-space) p { font-size: 1rem; }
.case-evidence-slot { border-left: 2px solid #cddfff; padding: 20px 0 20px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.case-evidence-slot strong { font-size: 1rem; font-weight: 650; color: var(--portfolio-ink); }
.fns-case-study .case-evidence-slot p { font-size: .9rem; line-height: 1.6; max-width: 670px; }
.case-evidence-slot--compact { margin-top: 52px; }
.case-opportunity-list { margin-top: 45px !important; }
.case-opportunity-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding-block: 18px; }
.case-opportunity-list dt { color: var(--case-muted); font-size: .8rem; padding-top: 5px; }
.case-opportunity-list dd { font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.45; }
.case-exploration-space { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; margin-top: 50px; }
.case-exploration-space .case-handwriting { display: block; margin-top: 30px; rotate: -4deg; }
.case-exploration-prompts dl { margin-block: 25px; }
.case-exploration-prompts dl > div + div { margin-top: 20px; }
.case-exploration-prompts dt { font-size: .94rem; margin-bottom: 5px; }
.case-exploration-prompts dd { font-size: .88rem; line-height: 1.55; color: var(--case-muted); }
.case-overview { background: radial-gradient(ellipse at 50% 75%,#eff7fd,transparent 66%); }
.case-journey-route { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 36px; list-style: none; padding: 0; margin: 50px 4%; }
.case-journey-route li { position: relative; font-size: .95rem; line-height: 1.5; }
.case-journey-route li + li::before { content: "→"; position: absolute; left: -28px; color: #8fa5c0; }
.case-overview-screens { display: grid; grid-template-columns: .8fr 1fr .8fr; gap: 9%; max-width: 980px; margin: 0 auto; align-items: start; padding: 30px 4% 0; }
.case-overview-screens > figure:first-child { padding-top: 60px; }
.case-overview-screens > figure:last-child { padding-top: 100px; }
.case-overview-screens img { width: 100%; aspect-ratio: 9/20; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 35px rgb(31 58 85 / 8%); }
.fns-case-study .case-problem-label { font-size: .75rem; color: var(--portfolio-muted); margin-bottom: 20px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.case-section-note { margin-top: 20px !important; }
.case-development-notes { display: grid; grid-template-columns: 1fr 45px 1fr; align-items: center; gap: 35px; margin-top: 50px; }
.case-development-notes > span { font-size: 2rem; color: #8fa5c0; }
.case-build-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; margin-top: 50px; }
.case-build-notes h3:not(:first-child) { margin-top: 28px; }
.case-structure-section > .case-launch-line { margin: 55px auto 0; max-width: 850px; }
.case-demo-results { margin-top: 50px; padding: 28px 0; border-top: 1px solid #dce5f0; }
.fns-case-study .case-demo-notice { font-size: .9rem; color: var(--portfolio-body); }
.case-demo-notice strong { color: var(--portfolio-ink); }
.case-metrics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-block: 34px !important; }
.case-metrics-grid dt { font-size: .85rem; color: var(--portfolio-body); }
.case-metrics-grid dd { font-size: clamp(2.8rem,4.8vw,4.1rem); line-height: 1.2; letter-spacing: -.06em; font-weight: 700; color: var(--portfolio-ink); margin-block: 12px; }
.case-metrics-grid small { display: block; margin-top: 12px; color: var(--case-muted); font-size: .76rem; line-height: 1.5; letter-spacing: 0; font-weight: 400; }
.case-final-flow-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; align-items: center; max-width: 1050px; margin: 60px auto 0; }
.case-final-player { width: min(100%,340px); justify-self: center; }
.case-final-player video { width: 100%; aspect-ratio: 9/20; object-fit: contain; border-radius: 20px; box-shadow: 0 24px 55px rgb(51 82 111 / 13%); }
.case-final-player figcaption { display: flex; justify-content: space-between; gap: 16px; }
.case-final-flow .case-film-chapters { justify-content: start; margin: 0 0 35px; gap: 4px 25px; }
.case-final-flow .case-film-chapters > span { width: 100%; }
.case-final-screen-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.case-final-screen-pair a { display: block; border-radius: 15px; overflow: hidden; box-shadow: 0 12px 35px rgb(31 58 85 / 7%); }
.case-final-screen-pair img { width: 100%; aspect-ratio: 9/20; }
.case-final-flow-details > .case-source-link { margin-top: 25px; }
.case-learning-space { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 50px; }
.case-learning-space > div { padding-top: 20px; border-top: 1px dashed #cbd7e4; }
/* Reading rhythm: open questions, a compact editorial comparison, then the work. */
@media (min-width:1000px) {
  #current-journey { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px 10%; align-items: start; }
  #current-journey .case-gap-map { grid-template-columns: 1fr; gap: 32px; margin-top: 0; }
  #current-journey .case-gap-map > div:last-child { grid-column: auto; }
  #current-journey .case-evidence-slot { grid-column: 1/-1; margin-top: 0; }
  #opportunities { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; align-items: start; }
  #opportunities .case-opportunity-list { margin-top: 0 !important; }
  #opportunities .case-opportunity-list > div { grid-template-columns: 1fr; gap: 10px; padding-block: 0 28px; }
  #opportunities .case-opportunity-list dd { font-size: 1.2rem; }
}
@media (max-width:760px) {
  .case-structure-section { padding-block: 55px; }
  .case-story-index-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .case-story-index-grid a { min-height: 44px; }
  .case-gap-map,.case-exploration-space,.case-build-composition,.case-final-flow-grid,.case-learning-space { grid-template-columns: 1fr; gap: 32px; margin-top: 35px; }
  .case-gap-map > div:last-child { grid-column: auto; }
  .case-evidence-slot { padding: 24px; }
  .case-opportunity-list > div { grid-template-columns: 1fr; gap: 8px; }
  .case-opportunity-list dd { font-size: 1.1rem; }
  .case-journey-route { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 35px 0; }
  .case-journey-route li { font-size: .84rem; }
  .case-overview-screens { gap: 14px; padding-inline: 0; }
  .case-overview-screens img { border-radius: 9px; }
  .case-overview-screens figcaption { font-size: .7rem; }
  .case-development-notes { grid-template-columns: 1fr; gap: 24px; }
  .case-development-notes > span { rotate: 90deg; justify-self: start; }
  .case-demo-results { padding: 24px; }
  .case-metrics-grid { grid-template-columns: 1fr; gap: 26px; }
  .case-metrics-grid dd { font-size: 3.4rem; margin-block: 5px; }
  .case-final-player { width: min(78vw,320px); }
  .case-final-flow .case-film-chapters { justify-content: center; }
  .case-final-flow .case-film-chapters > span { text-align: center; }
  .case-final-screen-pair { gap: 18px; }
}
@media (max-width:1050px) {
  .case-opening-grid { padding-inline: 0; gap: 4%; min-height: 540px; }
  .case-fns-scene .case-scene-note { top: 0; left: -7%; width: 130px; }
  .case-scene-note .case-handwriting { font-size: 1rem; }
  .case-character-intro { gap: 6%; grid-template-columns: minmax(0,1.6fr) minmax(0,.7fr); }
  .case-discovery,.case-cut-section { padding-inline: 5%; gap: 9%; }
  .case-project-meta { padding-inline: 3%; grid-template-columns: 1fr 1fr; }
  .case-perception { gap: 7%; padding-inline: 2%; }
  .case-choice-composition { gap: 35px 7%; }
  .case-price-proof { gap: 7%; }
  .case-price-proof figure > a { height: 440px; }
  .case-price-proof img { transform: translate(-15%,-55%); }
  .case-delivery { padding-inline: 4%; }
}
@media (max-width:760px) {
  .case-opening { padding-top: calc(var(--header-height) + 10px); }
  .case-opening-grid { padding: 30px 0 20px; min-height: 0; grid-template-columns: 1fr; gap: 45px; }
  .fns-case-study h1 { font-size: clamp(2.95rem,8.8vw,4.7rem); }
  .case-opening-copy { text-align: center; }
  .case-fns-scene { max-width: 540px; justify-self: center; margin-top: 10px; }
  .case-fns-scene .case-scene-note { left: 0; top: 5%; }
  .case-character-intro { grid-template-columns: 1fr; gap: 25px; }
  .case-sai-aside,.case-character-intro--thinking .case-sai-aside { width: 210px; justify-self: end; padding-bottom: 35px; }
  .case-sai-aside svg { bottom: 38px; }
  .case-hero-media { width: min(74vw,290px); }
  .case-hero-media video { min-height: 0; max-height: none; }
  .case-film-chapters { gap: 6px 22px; margin-block: 20px 30px; }
  .case-film-chapters > span { width: 100%; text-align: center; }
  .case-project-meta { padding: 26px 0; gap: 24px; }
  .case-project-meta dd { font-size: .88rem; }
  .case-context-section { padding: 80px 0 60px; }
  .case-counter-flow { display: flex; flex-direction: column; gap: 30px; margin: 35px 0; padding: 25px 24px; }
  .case-counter-flow li + li::before { content: "↓"; top: -25px; left: 0; }
  .case-counter-flow span { margin-top: 4px; }
  .case-counter-weight::after { display: none; }
  .case-perception { grid-template-columns: 1fr; gap: 25px; padding: 30px 0; }
  .fns-case-study .case-thesis { margin-top: 35px; text-align: left; }
  .case-questions { padding-bottom: 50px; }
  .case-question-list { grid-template-columns: 1fr; gap: 36px; padding-inline: 0; margin-top: 40px !important; }
  .case-question-list > div { width: min(100%,340px); }
  .case-question-list > div:nth-child(even) { padding-top: 0; justify-self: end; }
  .case-question-list > div:last-child { grid-column: auto; justify-self: start; }
  .case-question-list dt { font-size: .78rem; }
  .case-question-list dd { font-size: 1.6rem; }
  .case-design-intro { width: calc(100% - var(--page-padding)*2); padding-block: 60px 35px; }
  .case-discovery,.case-cut-section { grid-template-columns: 1fr; gap: 40px; padding: 30px 0 60px; }
  .case-cut-copy,.case-demo-cuts { grid-column: auto; grid-row: auto; }
  .case-overview-screens > figure:first-child { padding-top: 25px; }
  .case-overview-screens > figure:last-child { padding-top: 45px; }
  .case-demo { width: min(78vw,300px); }
  .case-demo-cuts { width: min(80vw,310px); }
  .case-feature-copy .case-handwriting { margin-top: 24px; }
  .case-choice-section { padding: 35px 0 70px; }
  .case-choice-composition { grid-template-columns: 1fr; gap: 40px; margin-top: 35px; }
  .case-demo-selection { grid-row: auto; }
  .case-size-detail { max-width: 440px; width: 100%; justify-self: center; }
  .case-choice-note { max-width: none; }
  .case-price-section { padding-block: 60px; }
  .case-weight-pair { gap: 14px; grid-template-columns: 1fr 25px 1fr; margin-block: 40px; }
  .case-weight-pair strong { font-size: 1.35rem; }
  .case-weight-pair p { font-size: .8rem !important; }
  .case-weight-arrow { font-size: 1.5rem; }
  .case-price-proof { grid-template-columns: 1fr; gap: 35px; }
  .case-price-proof figure { max-width: 440px; justify-self: center; }
  .case-price-proof figure > a { height: auto; aspect-ratio: 1 / 1.05; }
  .case-price-proof img { transform: translate(-15%,-55%); }
  .case-research { padding: 70px 0 50px; }
  .case-study-result { grid-template-columns: 1fr; gap: 35px; margin-block: 45px; }
  .case-preference strong { font-size: 7.5rem; }
  .case-research-reading { display: block; margin-block: 50px 35px; }
  .case-research-reading p { margin-top: 20px !important; }
  .case-refinement-table > div { gap: 6%; padding-block: 18px; }
  .case-refinement-table p { font-size: .9rem !important; }
  .case-refinement-head { font-size: .72rem !important; }
  .case-interviews { margin-top: 45px; }
  .case-interview-links { grid-template-columns: 1fr; gap: 16px; }
  .case-interview-links a { padding: 22px; }
  .case-delivery { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; }
  .case-delivery-notes { grid-template-columns: 1fr; gap: 24px; }
  .case-production-number strong { font-size: 5rem; }
  .case-launch-line { grid-template-columns: 1fr 25px 1fr 25px 1fr; }
  .case-launch-line > div > span { font-size: 1.2rem; }
  .case-launch-line p { font-size: .75rem !important; }
  .case-outcomes { width: calc(100% - var(--page-padding)*2); padding-block: 55px 35px; }
  .case-source-notes { margin-bottom: 35px; }
  .case-next-project { grid-template-columns: 1fr 90px; gap: 16px; padding-inline: 0; }
  .case-next-project h2 { font-size: 1.85rem !important; }
  .case-next-project h2 span { margin-left: 5px; }
  .case-next-project p { font-size: .9rem !important; }
  .case-next-project > img { width: 90px; }
}
@media (max-width:390px) {
  .case-scene-note .case-handwriting { font-size: .88rem; }
  .case-fns-scene .case-scene-note { width: 110px; }
  .case-scene-note svg { width: 50px; height: 40px; margin-left: 40px; }
}
/* Phone layouts should never depend on JavaScript finishing before their
   content is readable. Keep the desktop reveal treatment, but show each
   case-study block immediately on small screens. */
@media (max-width:700px) {
  .fns-case-study .case-can-reveal:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fns-case-study { scroll-behavior: auto; }
  .fns-case-study *, .fns-case-study *::before,.fns-case-study *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fns-case-study .case-can-reveal:not(.is-revealed) { opacity: 1; transform: none; }
}