/* Shared case-study baseline: measurements observed in the final Paper frames.
   Intermediate widths and safe-area behavior are documented in DESIGN.md. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url('../asset/fonts/manrope-medium.ttf') format('truetype'); }
.case-study { color: var(--color-text-secondary); --case-image-frame-radius: var(--case-image-frame-radius-desktop); }
.case-study strong { font-weight: var(--font-weight-medium); }
.case-study h1, .case-study h2 { color: var(--case-color-heading); font-family: var(--font-project-title); font-weight: 600; font-size: 24px; line-height: 36px; letter-spacing: -.3px; }
.case-study h3 { margin: 0; color: var(--case-color-heading); font-family: var(--font-project-title); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .2px; }
.case-study main { outline: none; }
.case-study section { scroll-margin-top: 32px; }
#case-study-title { scroll-margin-top: 32px; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 20; padding: 8px 12px; background: white; border: 1px solid var(--color-text-primary); translate: 0 -180%; }
.skip-link:focus { translate: 0; }
.mobile-header, .mobile-copy { display: none; }
.overview { display: grid; grid-template-columns: minmax(0,480px) minmax(0,784px); justify-content: space-between; gap: 64px; max-width: 1440px; margin: auto; padding: 88px 56px 96px; align-items: start; }
.overview-left { position: sticky; top: 24px; min-width: 0; display: flex; flex-direction: column; align-items: start; }
.home-button-form { margin: 0; display: flex; }
.back-link, .toc-toggle { position: relative; isolation: isolate; display: inline-flex; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; align-items: center; justify-content: center; color: var(--color-text-secondary); border-radius: 8px; }
.back-icon { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; flex-shrink: 0; }
.back-icon img { width: 13.75px; height: 10px; filter: url(#case-nav-ink); }
.back-link::before, .toc-toggle::before { content: ''; position: absolute; inset: -6px -10px; border-radius: 8px; z-index: -1; }
.back-link:hover::before, .back-link:focus::before, .back-link:active::before, .toc-toggle:hover::before, .toc-toggle:focus::before, .toc-toggle[aria-expanded="true"]::before { background: var(--case-nav-touch-background); }
.back-label { display: block; min-width: 0; max-width: 0; padding-left: 0; overflow: hidden; font-size: 14px; line-height: 20px; letter-spacing: .2px; white-space: nowrap; transition: max-width var(--case-nav-motion-duration) var(--case-nav-motion-easing), padding-left var(--case-nav-motion-duration) var(--case-nav-motion-easing); }
.desktop-back:hover .back-label, .desktop-back:focus-visible .back-label { max-width: 120px; padding-left: 8px; }
.desktop-back { width: auto; margin-bottom: 60px; }
.overview-copy { display: flex; flex-direction: column; gap: 32px; padding-bottom: 96px; }
.copy { display: flex; flex-direction: column; gap: 25px; }
.case-study .mobile-copy { display: none; }
.copy ul, .vision ul { padding-left: 1.2em; list-style: disc; }
.copy li { padding-left: .1em; }
.bullet-paragraph .bullet-line { display: block; position: relative; padding-left: 1.3em; }
.bullet-line::before { content: ''; position: absolute; width: var(--case-prose-bullet-size); height: var(--case-prose-bullet-size); border-radius: 50%; background: currentColor; left: .45em; top: calc(.75em - var(--case-prose-bullet-size) / 2); }
.bullet-intro { display: block; }
.text-block > p + p { margin-top: 25px; }
.metadata { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.case-study .metadata .metadata-label { font-family: var(--font-body); font-size: 12px; line-height: 16px; letter-spacing: .3px; font-weight: 500; margin-bottom: 8px; }
.metadata .chips { padding-top: 4px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { outline: 1px solid var(--color-border); outline-offset: -1px; border-radius: 1000px; padding: 4px 12px; font-size: 16px; line-height: 25px; }
.overview-showcase { display: flex; flex-direction: column; gap: var(--case-overview-image-gap); min-width: 0; container-type: inline-size; }
.showcase { width: 100%; height: auto; border-radius: var(--case-image-frame-radius); }
.showcase-frame { position: relative; min-width: 0; border-radius: var(--case-image-frame-radius); overflow: hidden; }
.showcase-frame::after { content: ''; position: absolute; inset: 0; border: var(--case-overview-border-width) solid var(--color-border); border-radius: inherit; pointer-events: none; }
.showcase-lead { position: relative; }
.download-badges { position: absolute; left: 83.7165%; top: 74.0601%; width: 12.244897959%; aspect-ratio: 96 / 80; }
.download-diagram { width: 100%; height: 100%; overflow: visible; --diagram-scale: calc(100cqw / 784px); }
.download-diagram .diagram-inner { width: 96px; transform: scale(var(--diagram-scale,1)); }
.download-diagram .diagram-inner > div { left: 0 !important; bottom: auto !important; width: 96px !important; height: 80px !important; }
.store-form { margin: 0; width: 96px; height: 32px; flex-shrink: 0; }
.store-button { padding: 0; display: block; }
.store-button:focus-visible { outline: 2px solid var(--case-color-active); outline-offset: 4px; }
.showcase-metrics { display: grid; grid-template-columns: 515fr 245fr; gap: var(--case-overview-image-gap); }
.showcase-metrics > .showcase-frame { display: grid; align-self: stretch; }
.showcase-metrics .showcase { height: 100%; min-height: 0; object-fit: cover; }
.metrics { display: flex; flex-direction: column; gap: var(--case-overview-image-gap); margin: 0; padding: 0; list-style: none; }
.metrics li { flex: 1; outline: var(--case-overview-border-width) solid var(--color-border); outline-offset: calc(-1 * var(--case-overview-border-width)); border-radius: 8px; background: #F8FCFF; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.metric-number { color: var(--case-color-heading); font-family: var(--font-project-title); font-weight: 500; font-size: 40px; line-height: 60px; }
.metric-description { margin: 8px 0 0; font-size: 16px; line-height: 25px; }
.showcase-bottom { display: grid; grid-template-columns: 440fr 320fr; gap: var(--case-overview-image-gap); }
.divider { display: flex; align-items: center; width: 100%; gap: 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px dashed var(--color-border); }
.divider span { padding: 4px 12px; border: 1px dashed var(--color-border); border-radius: 1000px; color: var(--case-color-heading); }
.case-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,var(--case-content-desktop)) minmax(0,1fr); max-width: 1440px; margin: auto; }
.progress-rail { grid-column: 1; grid-row: 1; align-self: stretch; padding-left: 56px; padding-top: 96px; padding-bottom: 96px; }
.progress-rail .progress-landmark { position: sticky; top: calc(50vh - 132px); width: max-content; }
.progress-nav { display: flex; flex-direction: column; }
.progress-nav a { display: flex; align-items: center; gap: var(--case-progress-label-gap); height: var(--case-progress-step); flex: 0 0 auto; position: relative; font-size: 12px; line-height: 16px; letter-spacing: .3px; }
.progress-dot { width: var(--case-progress-node-size); height: var(--case-progress-node-size); flex: 0 0 var(--case-progress-node-size); position: relative; z-index: 1; }
.progress-dot svg { display: block; overflow: visible; }
.progress-circle { fill: var(--case-progress-node-fill); stroke: var(--case-progress-pending); stroke-width: 1px; stroke-dasharray: 2 2; }
.progress-dot::before { content: ''; position: absolute; width: var(--case-progress-halo-size); height: var(--case-progress-halo-size); left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: var(--case-progress-pending); opacity: 0; z-index: -1; pointer-events: none; }
.progress-nav a::after { content: ''; position: absolute; transition: height var(--case-progress-group-duration) ease; width: 1px; height: 40px; left: 5px; top: 31px; background: repeating-linear-gradient(to bottom,var(--case-progress-pending) 0 2px,transparent 2px 4px); pointer-events: none; }
.progress-nav > a:last-child::after { display: none; }
.progress-nav a.passed::after { background: var(--case-progress-complete); }
.progress-nav.has-scroll-progress::before { content: ''; position: absolute; left: var(--progress-line-left,5px); top: var(--progress-line-top); width: 1px; height: var(--progress-line-length); background: var(--case-progress-complete); pointer-events: none; z-index: 1; }
.progress-nav.has-scroll-progress a.passed::after { background: repeating-linear-gradient(to bottom,var(--case-progress-pending) 0 2px,transparent 2px 4px); }
.progress-nav a.passed .progress-circle { stroke-dasharray: none; }
.progress-nav a[aria-current] .progress-circle, .progress-nav .progress-solution.is-active-group .progress-circle { fill: var(--case-progress-complete); stroke: var(--case-progress-complete); stroke-dasharray: none; }
.progress-nav > a[aria-current] .progress-dot::before, .progress-nav .progress-solution.is-active-group .progress-dot::before { animation: case-progress-pulse var(--case-progress-pulse-duration) cubic-bezier(.4,0,.2,1) infinite; }
.progress-nav a:is(:hover,:focus-visible) .progress-dot::before { opacity: .3; }
.progress-nav .progress-label { color: var(--case-progress-complete); white-space: nowrap; flex: 0 0 auto; }
.progress-nav a[aria-current] .progress-label, .progress-nav .progress-solution.is-active-group .progress-label { color: var(--color-text-secondary); }
.progress-children { display: grid; grid-template-rows: 1fr; margin-block: -4px; position: relative; transition: grid-template-rows var(--case-progress-group-duration) cubic-bezier(.25,.1,.25,1), margin var(--case-progress-group-duration) cubic-bezier(.25,.1,.25,1), visibility 0s; }
.progress-children-inner { display: flex; flex-direction: column; min-height: 0; overflow: visible; clip-path: inset(0 -100vw 0 -12px); }
.progress-children::after { content: ''; position: absolute; left: 5px; top: 100%; width: 1px; height: 16px; background: repeating-linear-gradient(to bottom,var(--case-progress-pending) 0 2px,transparent 2px 4px); pointer-events: none; }
.progress-children a { height: var(--case-progress-child-step); }
.progress-children .progress-circle { r: 2px; stroke-dasharray: none; }
.progress-children a.passed .progress-circle, .progress-children a[aria-current] .progress-circle { r: 2.5px; fill: var(--case-progress-complete); stroke-width: 0; }
.progress-children .progress-dot::before { width: 9px; height: 9px; }
.progress-children a::after { top: 13px; height: 16px; }
.progress-children a:last-child::after { height: 24px; }
.progress-nav .progress-solution.has-visible-children::after, .progress-nav:not(.is-enhanced) .progress-solution::after { height: 24px; }
.progress-nav.is-enhanced .progress-children { grid-template-rows: 0fr; margin-block: 0; visibility: hidden; transition-delay: 0s,0s,var(--case-progress-group-duration); }
.progress-nav.is-enhanced.is-solution-expanded .progress-children { grid-template-rows: 1fr; margin-block: -4px; visibility: visible; transition-delay: 0s; }
.progress-nav a::before { content: ''; position: absolute; inset: -1.5px -10px; }
@keyframes case-progress-pulse { 0% { transform: scale(.65); opacity: .2; } 65% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .progress-nav > a[aria-current] .progress-dot::before, .progress-nav .progress-solution.is-active-group .progress-dot::before { animation: none; transform: none; opacity: .7; } }
.case-sections { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--case-section-gap-desktop); padding: 96px 0; }
/* Shared case-study flow. Section-specific spacing remains in its own rules. */
:where(.case-study) .case-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
:where(.case-study) .case-stack-tight {
  gap: var(--space-16);
}
:where(.case-study) .case-media {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.case-section > h2 + .copy, .paragraph > h3 + .copy { margin-top: -16px; }
.paragraph { padding-top: 40px; }
.intro .copy { min-height: 72px; }
.stakeholder { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 32px; align-items: center; }
.speech { position: relative; padding: 12px 16px; border: 1px dashed var(--color-border); border-radius: 8px; font-size: 14px; line-height: 20px; display: flex; flex-direction: column; gap: 8px; }
.speech::after { content: ''; position: absolute; right: -7px; top: 22px; width: 12px; height: 12px; background: white; border-top: 1px dashed var(--color-border); border-right: 1px dashed var(--color-border); rotate: 45deg; }
.speech cite { font-size: 12px; line-height: 16px; font-style: normal; font-weight: 500; }
.research { gap: 32px; }
.research-home, .research-saku { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.research-quotes { margin-top: 16px; }
.research-literacy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; padding-block: 24px; }
.research-literacy h3:nth-of-type(2) { grid-row: 1; grid-column: 2; }
.research-literacy .copy:nth-of-type(2) { grid-column: 2; }
.figure { border: .5px solid var(--color-border); border-radius: var(--case-image-frame-radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; min-width: 0; }
figcaption, .caption { font-size: 12px; line-height: 16px; letter-spacing: .3px; text-align: center; }
.phone-figure img { width: 156px; max-width: 100%; height: auto; }
.phone-figure { padding-block: 48px 24px; }
.saku-flow { margin-top: 32px; font-size: 12px; line-height: 16px; position: relative; }
.saku-flow ol { list-style: none; display: grid; grid-template-columns: max-content max-content; gap: 52px 24px; padding: 12px 8px 0; }
.saku-flow li { border: 1px solid var(--color-border); border-radius: 4px; padding: 12px 8px; text-align: center; position: relative; }
.saku-flow li:nth-child(odd)::after { content: '→'; position: absolute; right: -25px; top: 7px; color: #B5BEBD; font-size: 24px; }
.saku-flow li:nth-child(3) { grid-column: 2; }
.saku-flow li:nth-child(4) { grid-row: 2; grid-column: 1; }
.saku-flow li:nth-child(3)::after { content: '←'; left: -25px; right: auto; }
.workflow-figure { padding: 48px 24px 24px; }
.diagram { width: 100%; position: relative; overflow: auto; }
.diagram.is-fitted { overflow: visible; }
.diagram-inner { transform-origin: left top; }
.workflow { max-width: 651px; aspect-ratio: 651 / 218; }
.workflow .diagram-inner { width: 651px; transform: scale(var(--diagram-scale,1)); }
.content-mapping { min-width: 0; }
.mapping-heading { display: flex; align-items: center; gap: 12px; }
.mapping-title { flex: 1; font: 500 14px/20px var(--font-body); letter-spacing: .2px; }
.mapping-legend { display: flex; gap: 12px; font: 300 12px/16px var(--font-body); letter-spacing: .3px; }
.mapping-legend > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.mapping-key { display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 2px; outline-offset: -1px; }
.mapping-key-existing { background: #FED5CC; outline: 1px solid #D5A399; }
.mapping-key-new { background: #E6F5F2; outline: 1px solid #91C8BE; }
.mapping-key-new > span { width: 4px; height: 4px; border-radius: 50%; background: #91C8BE; }
.content-map { aspect-ratio: 712 / 648; container-type: inline-size; overflow: hidden; }
.content-map.is-fitted { overflow: hidden; }
.content-map .diagram-inner { position: absolute; inset: 0 auto auto 0; width: 712px; transform: scale(var(--diagram-scale, calc(100cqw / 712px))); }
.mapping-artwork { width: 712px; height: 648px; position: relative; overflow: hidden; border: 1px solid transparent; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mapping-chip { cursor: pointer; }
.mapping-chip div { white-space: nowrap; }
.content-mapping[data-highlight="existing"] [data-content-kind="new"],
.content-mapping[data-highlight="new"] [data-content-kind="existing"] { opacity: var(--case-mapping-dim-opacity); }
@media (max-width: 899px) {
  #home-revamp > .mobile-copy { margin-top: -16px; }
  .mapping-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mapping-title { line-height: 22px; }
}
.carousel { min-width: 0; }
.carousel-track { display: flex; gap: 32px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: center; flex-shrink: 0; }
.direction-carousel .carousel-track { display: flex; flex-direction: column; gap: 8px; }
.direction-card { border: .5px solid var(--color-border); border-radius: 8px; padding: 12px 16px; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 16px; }
.direction-card h3 { font: 500 14px/20px var(--font-body); color: var(--color-text-secondary); }
.direction-card p { font-size: 14px; line-height: 20px; }
.saku-showcase { min-width: 0; }
.saku-intro { padding-top: 32px; }
.saku-intro .mobile-copy { gap: 16px; }
.concept { width: 216px; min-height: 419.59375px; border: 0; outline: 1px solid var(--color-border); outline-offset: -1px; border-radius: var(--case-image-frame-radius); padding: 24px; display: flex; justify-content: center; align-items: flex-start; background: white; text-align: center; }
.concept:disabled { opacity: 1; cursor: default; }
.concept:focus-visible { box-shadow: inset 0 0 0 4px white, inset 0 0 0 6px var(--color-text-primary); }
.concept[aria-expanded="true"] { outline-color: var(--case-choice-border); background: var(--case-choice-background); }
.concept[aria-expanded="true"]:not([data-saku-choice="overview"]) { outline-color: var(--case-choice-alternative-border); background: var(--case-choice-alternative-background); }
.concept-carousel.has-selection .concept[aria-expanded="false"] { opacity: var(--case-choice-dim-opacity); }
.concept-carousel.has-selection .concept:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .concept-carousel .concept[aria-expanded="false"]:hover { background: var(--case-choice-hover-background); opacity: 1; }
}
.concept-artwork { width: 156px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.concept-title { font: 500 12px/16px var(--font-body); color: var(--case-color-heading); letter-spacing: .3px; white-space: nowrap; }
.concept-mockup { width: 156px; height: auto; flex-shrink: 0; border-radius: 10.4px 10.4px 0 0; box-shadow: var(--case-mockup-shadow); }
.concept-arrow { width: 24.75px; height: 11.05px; flex-shrink: 0; }
.concept-arrow img { width: 24.75px; height: 11.05px; rotate: 90deg; }
.concept-caption { font: 300 12px/16px var(--font-body); letter-spacing: .3px; white-space: nowrap; }
.concept-caption:has(br) { min-height: 32px; }
.saku-details:has(> .saku-detail):not(:has(> .saku-detail:not([hidden]))) { display: none; }
.saku-reason { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #FDFAFA; outline: 1px solid var(--color-border); outline-offset: -1px; border-radius: 8px; }
.saku-reason.chosen { background: #F6FBFA; }
.saku-reason h4 { margin: 0; font: 500 16px/25px var(--font-body); letter-spacing: .2px; }
.saku-detail-images { width: 100%; min-width: 0; }
.saku-detail-images .carousel-track { gap: 32px; padding: 0; }
.saku-detail-images .figure { width: 340px; border: 0; padding: 32px 24px 24px; gap: 20px; }
.saku-detail-images .figure > img { width: 216px; height: auto; max-width: 100%; }
.saku-overview-phone { width: 180px; max-width: 100%; border-radius: 16px; outline: 5px solid #2E3543; overflow: hidden; }
.saku-overview-phone img { width: 100%; height: auto; }
@media (max-width: 899px) {
  .case-study .saku-intro h3 { font: 600 14px/22px var(--font-project-title); }
  .concept-carousel .carousel-track { gap: 12px; }
  .concept-carousel .concept { width: 216px; }
  .concept-carousel { width: 100vw; margin-left: calc(50% - 50vw); }
  .concept-carousel .carousel-track { padding-left: var(--case-mobile-content-gutter); padding-right: var(--case-carousel-end-gutter); }
  .concept-carousel .carousel-dots { gap: 4px; margin-top: 16px; }
  .concept-carousel .carousel-dots button { width: 8px; height: 8px; padding: 0; position: relative; }
  .concept-carousel .carousel-dots button::after { content: ''; position: absolute; inset: -8px -2px; }
  .concept-carousel .carousel-dots button[aria-current]::before { background: #059275; }
  .saku-reason h4 { font-size: 14px; line-height: 22px; }

}
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.carousel-dots button { border: 0; width: 24px; height: 24px; padding: 8px; background: transparent; border-radius: 50%; }
.carousel-dots button::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.carousel-dots button[aria-current]::before { background: var(--case-color-active); }
.exploration summary { width: fit-content; font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; }
.hero-concept { padding-block: 64px 24px; }
.hero-concept img { width: 243px; height: auto; border-radius: 14px; }
.evolution { padding: 24px 24px 48px; gap: 24px; }
.evolution-stages { list-style: none; display: flex; justify-content: space-between; width: 480px; max-width: 100%; font-size: 12px; line-height: 16px; }
.evolution-stages [aria-current] { font-weight: 500; }
.impact { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.impact h3 { font: 500 16px/25px var(--font-body); color: var(--color-text-secondary); }
.impact h3 span { color: var(--case-color-active); margin-right: 6px; }
.impact h3 { display: flex; align-items: center; gap: 4px; }
.impact-icon { width: 24px; height: 24px; display: inline-flex; }
.goal-icon { width: 24px; height: 24px; overflow: visible; }
.goal-icon .diagram-inner { width: 24px; }
.impact .chips { gap: 8px; }
.impact .chips li, .total-impact .chips li { padding: 8px 16px; font-size: 16px; line-height: 25px; }
.mvo-figure { padding-top: 48px; }
.fab-figure { padding-top: 48px; }
.attract-carousel .carousel-track { align-items: center; }
.attract-one { width: 438px; }
.attract-two { width: 242px; }
.attract-one img { width: 180px; height: 380px; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 4px #2E3543; }
.attract-two img { width: 156px; height: 336px; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 4px #2E3543; }
.vision { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.vision > div { padding: 12px; border: .5px solid var(--color-border); border-radius: 8px; font-size: 14px; line-height: 20px; }
.vision h3 { font: 500 14px/20px var(--font-body); color: var(--color-text-secondary); margin-bottom: 8px; }
.comparison-figure { display: flex; flex-direction: column; gap: 16px; }
.comparison { width: 100%; aspect-ratio: 712 / 428; border: .5px solid var(--color-border); border-radius: var(--case-image-frame-radius); overflow: hidden; position: relative; --reveal: 50%; }
.comparison-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.comparison-layer.after { background: #F5FAF9; }
.comparison-layer.before { background: #FAFAFA; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.comparison-handle { display: none; position: absolute; left: var(--reveal); top: 0; bottom: 0; width: 3px; background: white; translate: -50% 0; box-shadow: 0 0 2px #3B424166; }
.comparison.is-enhanced .comparison-handle { display: block; }
.comparison.is-enhanced { touch-action: pan-y; }
.comparison-control { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.comparison-figure { position: relative; }
.comparison-figure:focus-within .comparison-control { position: static; clip-path: none; width: 100%; height: auto; overflow: visible; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.comparison-control input { accent-color: var(--case-color-active); width: 100%; }
/* Without JavaScript show both complete layers in normal flow. */
.comparison:not(.is-enhanced) { aspect-ratio: auto; display: flex; flex-direction: column; }
.comparison:not(.is-enhanced) .comparison-layer { position: relative; clip-path: none; min-height: 428px; }
.callout { display: flex; flex-direction: column; gap: 8px; border: .5px solid var(--color-border); border-radius: 8px; padding: 16px; background: #FAFAFA; }
.callout h3 { font: 500 16px/25px var(--font-body); color: var(--color-text-secondary); }
.mint { background: #F5FAF9; }
.outcome-divider { width: 100vw; margin-left: calc((712px - 100vw) / 2); margin-block: -16px; }
.total-impact { display: flex; flex-wrap: wrap; gap: 8px; }
.award { background: #FAFAFA; }
.credits h2 { font-size: 20px; line-height: 32px; }
.credits { gap: 16px; }
.team-strip { display: flex; align-items: center; width: 100%; gap: 0; padding: 16px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
/* These exact Paper photo exports already include rotation and white surrounds. */
.team-strip img { width: 245px; height: auto; object-fit: contain; flex-shrink: 0; }
.team-strip img + img { margin-left: -7px; }
.team-strip img:nth-child(2) { width: 244px; }
.team-strip img:nth-child(3) { width: 236px; }
.case-footer { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 20px; }
.case-footer hr { margin-bottom: 20px; }
.case-footer a { font: 600 16px/24px var(--font-project-title); color: var(--case-color-heading); }
.case-footer a span { margin-left: 8px; }
@media (min-width: 1441px) { .outcome-divider { max-width: 1440px; margin-left: -364px; } }
@media (max-width: 1199px) and (min-width: 900px) {
  .overview { padding-inline: 32px; gap: 40px; grid-template-columns: minmax(0,36%) minmax(0,1fr); }
  .metrics li { padding: 16px 12px; }
  .metric-number { font-size: 28px; line-height: 36px; }
  .metric-description { font-size: 14px; line-height: 20px; }
  .progress-rail { padding-left: 32px; }

  .outcome-divider { width: calc(100vw - 2px); margin-left: calc((var(--case-content-desktop) - (100vw - 2px)) / 2); }
}
@media (max-width: 899px) {
  .case-study { font-size: 14px; line-height: 22px; }
  .case-study h1, .case-study h2 { font-size: 20px; line-height: 28px; }
  .case-study h3 { font: 500 14px/20px var(--font-body); }
  .desktop-copy, .desktop-back { display: none; }
  .case-study .mobile-copy { display: flex; }
  .copy.mobile-copy { display: flex; }
  .mobile-header { display: flex; align-items: center; gap: 20px; position: fixed; top: 0; inset-inline: 0; min-height: calc(68px + env(safe-area-inset-top)); padding: calc(32px + env(safe-area-inset-top)) var(--case-mobile-content-gutter) 15px; z-index: 10; background: white; border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 24px #0000000F; transform: translateY(0); transition: transform var(--case-nav-motion-duration) var(--case-nav-motion-easing); }
  .mobile-header.is-hidden { transform: translateY(-100%); pointer-events: none; }
  .mobile-header:has(:focus-visible) { transform: translateY(0); pointer-events: auto; }
  .mobile-header .back-link { width: 20px; height: 20px; }
  .mobile-toc { display: flex; }
  .toc-toggle img { width: 20px; height: 20px; }
  .mobile-toc nav { position: fixed; inset: calc(var(--case-mobile-header-height, calc(68px + env(safe-area-inset-top))) + var(--case-nav-dropdown-gap)) auto auto var(--case-mobile-content-gutter); margin: 0; background: white; color: var(--color-text-secondary); padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; gap: 8px; box-shadow: 0 2px 6px #0000000D; max-height: none; overflow: visible; }
  .mobile-toc nav:popover-open { display: flex; flex-direction: column; }
  .mobile-toc a { min-height: 32px; display: flex; align-items: center; }
  .overview { display: flex; flex-direction: column; gap: 64px; padding: calc(100px + env(safe-area-inset-top)) 20px 64px; width: min(100%,752px); }
  .overview-left { position: static; width: 100%; }
  .overview-copy { gap: 20px; padding: 0; }
  .copy { gap: 22px; }
  .text-block > p + p { margin-top: 22px; }
  .metadata { margin-top: 4px; }
  .chips li { font-size: 14px; line-height: 22px; }
  .overview-showcase { --case-overview-image-gap: var(--case-overview-image-gap-mobile); width: 100%; gap: var(--case-overview-image-gap); container-type: inline-size; }
  .showcase, .showcase-frame { border-radius: 3.57143px; }
  .showcase-metrics { display: grid; grid-template-columns: minmax(0,515fr) minmax(0,245fr); gap: var(--case-overview-image-gap); }
  .metrics { gap: var(--case-overview-image-gap); }
  .metrics li { padding: 2.04cqw; border-radius: 3.57143px; }
  .metric-number { font-size: 5.142857cqw; line-height: 1.5; }
  .metric-description { margin-top: 1.02cqw; font-size: 2.285714cqw; line-height: 1.5; letter-spacing: .0892857px; }
  .showcase-bottom { gap: var(--case-overview-image-gap); }
  .divider { width: calc(100% - 40px); max-width: 712px; margin-inline: auto; }
  .divider span { font-size: 14px; line-height: 20px; padding: 4px 10px; }
  .case-body { display: block; }
  .progress-rail { display: none; }
  .case-sections { width: calc(100% - 40px); max-width: 712px; margin: auto; padding: 64px 0; gap: var(--case-section-gap-mobile); }
  .case-study section { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }
  #case-study-title { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }
  .stakeholder { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .speech { font-size: 14px; line-height: 22px; }
  .speech::after { top: auto; right: 24px; bottom: -7px; border-top: 0; border-bottom: 1px dashed var(--color-border); }
  .research-home, .research-saku { display: flex; flex-direction: column; gap: 20px; }
  .research-home .research-explanation { order: -1; }
  .research .figure { width: 100%; }
  .research-literacy { display: flex; flex-direction: column; gap: 20px; padding-block: 0; }
  .research-literacy h3:nth-of-type(2) { margin-top: 16px; }
  .research-home .desktop-copy { display: none; }
  .figure { padding: 28px 16px 24px; }
  .phone-figure { padding-block: 32px 24px; }
  .phone-figure img { width: 156px; }
  .research-saku .figure { margin-bottom: 4px; }
  .saku-flow { margin-top: 16px; width: 100%; }
  .saku-flow ol { justify-content: start; }
  .saku-flow li:nth-child(3) { grid-column: 2; }
  .saku-flow li:nth-child(4) { grid-column: 3; }
  .saku-flow li:nth-child(3)::after { content: '→'; left: auto; right: -25px; }
  .paragraph { padding-top: 0; gap: 24px; }
  .direction-carousel .carousel-track { flex-direction: row; gap: 12px; }
  .direction-card { display: flex; flex-direction: column; align-items: start; gap: 8px; width: 320px; padding: 12px; }
  .direction-card p { font-size: 14px; line-height: 22px; }
  .direction-carousel .carousel-dots { display: none; }
  .carousel { width: calc(100% + 40px); margin-left: -20px; }
  .carousel-track { padding-inline: 20px; gap: 12px; }
  .carousel-dots { margin-top: 8px; }
  .concept { width: 216px; }
  .hero-concept { padding-top: 32px; }
  .hero-concept img { width: 152px; }
  .evolution { padding: 24px 16px 36px; gap: 20px; }
  .evolution-stages { width: 100%; font-size: 10px; line-height: 14px; }
  .impact { padding-top: 0; gap: 16px; width: 100%; }
  .impact h3 { font-size: 14px; line-height: 22px; }
  .impact .chips { gap: 8px; }
  .impact .chips li, .total-impact .chips li { font-size: 14px; line-height: 22px; padding: 8px 16px; }
  .attract-carousel .carousel-track { gap: 12px; }
  .attract-carousel .figure { width: 350px; max-width: calc(100vw - 40px); }
  .attract-one img { width: 144px; height: 304px; }
  .attract-two img { width: 144px; height: 312px; }
  .vision { gap: 8px; }
  .vision > div { padding: 8px; font-size: 10px; line-height: 16px; }
  .vision h3 { font-size: 12px; line-height: 16px; }
  .vision ul { padding-left: 1em; }
  .comparison { aspect-ratio: 350 / 396; }
  .info-comparison { aspect-ratio: 350 / 226; }
  .comparison:not(.is-enhanced) .comparison-layer { min-height: 0; padding: 24px 0; }
  .callout { padding: 12px; }
  .callout h3 { font-size: 14px; line-height: 22px; }
  .outcome-divider { width: 100%; margin: 0; }
  .total-impact { gap: 8px; }
  .credits h2 { font: 600 16px/24px var(--font-project-title); }
  .team-strip { width: calc(100% + 40px); margin-left: -20px; padding: 24px 20px; gap: 8px; }
  .case-footer a { font: 500 14px/20px var(--font-body); }
}
@media (max-width: 359px) {
  .saku-flow ol { gap: 52px 16px; padding-inline: 0; }
  .saku-flow li { padding: 10px 5px; font-size: 10px; }
  .saku-flow li:nth-child(3)::after { right: -18px; }
  .direction-card { width: 260px; }
  .hero-concept img { width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header, .back-label { transition: none; }
}

/* Independent captioned pairs become native scrolling strips on narrow screens. */
.case-media-pair { width: 100%; margin-left: 0; }
.case-media-pair .carousel-track {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-32);
  overflow: visible;
  padding: 0;
  align-items: stretch;
}
@media (max-width: 899px) {
  .case-media-pair .carousel-track { gap: 12px; }
}

/* Matching quote artwork is shared; borders and narrow gaps stay page-specific. */
:is(#problem, #research) .speech,
.speech-reference {
  padding: 12px;
  background: var(--case-quote-background);
  color: var(--case-quote-ink);
  gap: 20px;
}
:is(#problem, #research) .speech {
  border: 0;
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
}
:is(#problem, #research) .speech::after,
.speech-reference::after { display: none; }
:is(#problem, #research) .speech::before,
.speech-reference::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -5px;
  width: 20px;
  height: 14px;
  background: url('../asset/icons/quote-mark.svg') center / contain no-repeat;
}
:is(#problem, #research) .speech cite { letter-spacing: .3px; }
:is(#problem, #research) .speech cite::before,
.speech-reference cite::before { content: '> '; }
#research h3 { font: 500 16px/25px var(--font-body); letter-spacing: .2px; }
#research .research-home, #research .research-saku { align-items: start; }
#research .research-quotes { margin-top: 32px; }
#research .research-literacy { padding-block: 0; margin-block: 32px; }
#research .phone-figure {
  position: relative;
  border: 0;
  padding: 32px 24px 24px;
  gap: 20px;
}
#research .phone-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--case-overview-border-width) solid var(--color-border);
  border-radius: inherit;
  pointer-events: none;
}
#research .phone-figure img { width: 165px; height: auto; max-width: 100%; }
#research .saku-flow-image {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 136.21;
  container-type: inline-size;
  overflow: visible;
}
#research .saku-flow-image .diagram-inner {
  width: 340px;
  transform: scale(var(--diagram-scale, calc(100cqw / 340px)));
}
#research .flow-desktop > div { width: 340px; }
#research .flow-mobile { display: none; }
@media (max-width: 899px) {
  #problem .stakeholder { gap: 16px; }
  :is(#problem, #research) .speech { gap: 16px; }
  #research h3 { font-size: 14px; line-height: 22px; }
  #research .research-home { gap: 16px; }
  #research .research-literacy { gap: 16px; margin-block: 0; }
  #research .research-saku { gap: 32px; margin-top: -16px; }
  #research .research-saku .figure { margin-bottom: 0; }
  #research .saku-flow-image { max-width: 331px; margin-inline: auto; aspect-ratio: 331 / 136.21; }
  #research .saku-flow-image .diagram-inner { width: 331px; transform: scale(var(--diagram-scale, calc(100cqw / 331px))); }
  #research .flow-desktop { display: none; }
  #research .flow-mobile { display: block; }
  #research .flow-mobile > div { width: 331px; }
}
#research .flow-title { font-weight: 500; letter-spacing: .3px; margin-bottom: 12px; }
#research .saku-flow-image .diagram-inner { position: absolute; inset: 0 auto auto 0; }

/* Supplied WebP artwork inside the observed Paper phone frames. */
#research .problem-phone-frame {
  position: relative;
  width: 156px;
  max-width: 100%;
  aspect-ratio: 156 / 345;
  flex-shrink: 0;
  background: var(--color-background);
  outline: var(--case-problem-phone-stroke) solid var(--case-problem-phone-border);
  border-radius: var(--case-problem-phone-radius);
  overflow: clip;
}
/* Tablet keeps the quote on the left while its paragraph reflows on the right. */
@media (min-width: 620px) and (max-width: 899px) {
  #problem .stakeholder {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

#research .phone-figure { border-radius: var(--case-image-frame-radius-desktop); overflow: hidden; }
@media (max-width: 899px) {
  #research .phone-figure { border-radius: var(--case-image-frame-radius-mobile); }
}
#research .problem-phone-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The recording's baked phone border occupies the existing outline bounds. */
#research .problem-phone-frame--video { overflow: visible; }
#research .problem-phone-frame video {
  position: absolute;
  top: calc(-1 * var(--case-problem-phone-stroke));
  left: calc(-1 * var(--case-problem-phone-stroke));
  display: block;
  width: calc(100% + 2 * var(--case-problem-phone-stroke));
  height: calc(100% + 2 * var(--case-problem-phone-stroke));
  border-radius: calc(var(--case-problem-phone-radius) + var(--case-problem-phone-stroke));
  object-fit: fill;
}

#research .problem-phone-frame video:is(:fullscreen, :-webkit-full-screen) {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}

/* Context: proportionally fitted Paper workflow and viewport-wide team strip. */
#context .workflow-figure {
  border: 0;
  border-radius: var(--case-image-frame-radius-desktop);
  padding: 24px 23px 24px 38px;
  gap: 24px;
}
#context .workflow {
  width: 100%;
  max-width: 651px;
  aspect-ratio: 651 / 218;
  container-type: inline-size;
  overflow: visible;
}
#context .workflow .diagram-inner {
  position: absolute;
  inset: 0 auto auto 0;
  width: 651px;
  transform: scale(var(--diagram-scale, calc(100cqw / 651px)));
}
#context .workflow-mobile { display: none; }
#direction .direction-label { font: 500 14px/20px var(--font-body); color: var(--color-text-secondary); }
@media (max-width: 899px) {
  #context .workflow-figure {
    border-radius: var(--case-image-frame-radius-mobile);
    padding: 20px 8px 24px;
    gap: 24px;
  }
  #direction { gap: 24px; }
  #direction .direction-carousel { width: 100vw; margin-left: calc(50% - 50vw); }
  #direction .carousel-track { padding-inline: var(--case-mobile-content-gutter); }
}
/* Tablet retains the original desktop composition; narrow phones use Paper's mobile artwork. */
@media (max-width: 619px) {
  #context .workflow { max-width: 334px; aspect-ratio: 334 / 111.68; }
  #context .workflow .diagram-inner { width: 334px; transform: scale(var(--diagram-scale, calc(100cqw / 334px))); }
  #context .workflow-desktop { display: none; }
  #context .workflow-mobile { display: block; }
  #context .workflow-mobile > div { width: 334px; height: 111.68px; position: relative; }
}

@media (max-width: 899px) {
  #direction > h2 + .copy { margin-top: -8px; }
}
#direction .direction-card { border: 0; outline: 1px solid var(--color-border); outline-offset: -1px; padding: 12px; grid-template-columns: 180px minmax(0, 1fr); gap: 8px; }
#direction .direction-card p { font-size: 16px; line-height: 25px; }
#context .caption { transform: translateX(-7.5px); }
@media (max-width: 899px) {
  #direction .direction-card p { font-size: 14px; line-height: 22px; }
  #context .caption { transform: none; }
}

#context .workflow-mobile div[style*="font-family"] { white-space: nowrap; flex-shrink: 0; }

/* Saku detail artwork stays native-sized; overflow becomes a viewport-wide strip. */
@media (max-width: 751px) {
  .saku-detail-images { width: 100vw; margin-left: calc(50% - 50vw); }
  .saku-detail-images .carousel-track { padding-left: var(--case-mobile-content-gutter); padding-right: var(--case-carousel-end-gutter); gap: 12px; }
}
:where(.case-study) .case-carousel-compact .carousel-dots { gap: 4px; margin-top: 16px; }
:where(.case-study) .case-carousel-compact .carousel-dots button { width: 8px; height: 8px; padding: 0; position: relative; }
:where(.case-study) .case-carousel-compact .carousel-dots button::after { content: ''; position: absolute; inset: -8px -2px; }
:where(.case-study) .case-carousel-compact .carousel-dots button[aria-current]::before { background: #059275; }
.saku-response { scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }
.saku-response:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 4px; border-radius: 2px; }
.saku-confetti { position: fixed; inset: 0; overflow: clip; pointer-events: none; z-index: 45; }
.saku-confetti span { position: absolute; width: 5px; height: 5px; border-radius: 50%; }

/* Mobile detail cards fit fully with a 24px glimpse of the following card. */
@media (max-width: 619px) {
  .saku-detail-images .figure { width: min(340px, calc(100vw - var(--case-saku-detail-mobile-reserve))); }
  .saku-detail-images .figure > img { width: min(216px, calc((100vw - var(--case-saku-detail-mobile-reserve)) * .6352941176)); }
  .saku-detail-images .saku-overview-phone { width: min(180px, calc((100vw - var(--case-saku-detail-mobile-reserve)) * .5294117647)); border-radius: min(16px, calc((100vw - var(--case-saku-detail-mobile-reserve)) * .0470588235)); outline-width: min(5px, calc((100vw - var(--case-saku-detail-mobile-reserve)) * .0147058824)); }
}

/* Every outer image card shares the Overview radius at the same breakpoint. */
@media (max-width: 899px) {
  .case-study { --case-image-frame-radius: var(--case-image-frame-radius-mobile); }
  .case-study .showcase, .case-study .showcase-frame { border-radius: var(--case-image-frame-radius); }
}

/* Bordered prose cards share the outer image-card radius. */
.case-study :is(.speech, .direction-card, .saku-reason, .vision > div, .callout, .metrics li) { border-radius: var(--case-image-frame-radius); }

/* Keep the native three-card composition when the reading column can fit it. */
.saku-showcase .concept-carousel { width: 100%; margin-left: 0; }
.saku-showcase .concept-carousel .carousel-track { padding: 0; gap: 32px; }
@media (max-width: 751px) {
  .saku-showcase .concept-carousel { width: 100vw; margin-left: calc(50% - 50vw); }
  .saku-showcase .concept-carousel .carousel-track { padding-left: var(--case-mobile-content-gutter); padding-right: var(--case-carousel-end-gutter); gap: 12px; }
}

/* Hero Exploration: native disclosure and a single scaled annotated image. */
.hero-exploration { min-width: 0; }
.hero-exploration-intro { padding-top: 32px; }
.hero-exploration-disclosure summary { display: flex; align-items: center; gap: 4px; list-style: none; color: var(--color-text-secondary); }
.hero-exploration-disclosure summary::-webkit-details-marker { display: none; }
.hero-exploration-disclosure summary:hover, .hero-exploration-disclosure summary:focus-visible { color: var(--case-color-heading); }
.hero-disclosure-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.hero-disclosure-icon img { width: 11px; height: 8px; transform: rotate(90deg); }
.hero-exploration-disclosure[open] .hero-disclosure-icon img { transform: rotate(-90deg); }
.hero-hide-label, .hero-exploration-disclosure[open] .hero-show-label { display: none; }
.hero-exploration-disclosure[open] .hero-hide-label { display: inline; }
.hero-exploration .hero-exploration-image { margin-top: 16px; padding: 24px; gap: 24px; border: 1px dashed var(--color-border); background: #FAFAFA; }
.hero-exploration-image > img { width: 100%; max-width: 664px; height: auto; }
.hero-exploration .hero-concept { padding: 30px 0 23px; gap: 32px; border: var(--case-overview-border-width) solid var(--color-border); }
.hero-artboard { width: min(559px, calc(100% - 16px)); aspect-ratio: 559 / 210; container-type: inline-size; }
.hero-artboard-inner { position: relative; width: 559px; height: 210px; transform: scale(calc(100cqw / 559px)); transform-origin: top left; }
.hero-concept-phone { position: absolute; left: 159px; top: 32px; width: 243px; height: 172px; box-shadow: 0 1.35px 2.7px #28293D0A, 0 5.4px 10.8px #60617029; }
.hero-exploration .hero-concept-phone > img { display: block; width: 243px; height: 172px; border-radius: 0; }
.hero-note { position: absolute; width: 120px; font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: 300; }
.hero-note-business { left: 0; top: 34px; text-align: right; }
.hero-note-balance { left: 0; top: 116px; text-align: right; }
.hero-note-header { left: 439px; top: 37px; }
.hero-note-overview { left: 439px; top: 118px; }
.hero-note-motion { left: 439px; top: 170px; }
.hero-concept-label { position: absolute; left: calc(50% + 1.5px); top: 0; transform: translateX(-50%); font-size: 12px; line-height: 16px; letter-spacing: .3px; font-weight: 500; color: var(--case-color-heading); white-space: nowrap; }
.hero-exploration .hero-annotation-lines { position: absolute; inset: 0; width: 559px; height: 210px; border-radius: 0; pointer-events: none; }
.hero-reward-slot { position: absolute; left: 166.8px; top: 132.7px; width: 55px; height: 10.8332px; overflow: hidden; background: #F3FBFD; color: #03213E; font: 700 8.12px/10.8332px Lato, Arial, sans-serif; }
.hero-reward-slot > span { position: absolute; inset: 0; white-space: nowrap; }
.hero-reward-misi { transform: translateY(100%); }
.hero-motion-ready .hero-reward-voucher { animation: hero-voucher var(--case-hero-loop-duration) var(--case-hero-motion-easing) infinite; }
.hero-motion-ready .hero-reward-misi { animation: hero-misi var(--case-hero-loop-duration) var(--case-hero-motion-easing) infinite; }
@keyframes hero-voucher { 0%,36.956522% { transform: translateY(0); } 43.478261%,93.478261% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes hero-misi { 0%,43.478261% { transform: translateY(100%); } 50%,86.956522% { transform: translateY(0); } 93.478261%,100% { transform: translateY(100%); } }
@media (max-width: 619px) {
  .hero-exploration .hero-concept { padding-top: 18px; gap: 24.43px; }
  .hero-exploration .hero-exploration-image { padding: 16px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-ready .hero-reward-voucher, .hero-motion-ready .hero-reward-misi { animation: none; }
}

@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url('../asset/fonts/lato-bold.ttf') format('truetype'); }
.hero-reward-slot { display: none; }
.hero-motion-ready .hero-reward-slot { display: block; }
.hero-artboard { position: relative; min-height: 0; width: min(559px, calc(100% - 14px)); }
.hero-artboard-inner { position: absolute; inset: 0 auto auto 0; }
@media (min-width: 620px) {
  .hero-exploration .hero-concept { padding-bottom: 24px; }
  .hero-artboard { translate: -1.5px; }
}
@media (max-width: 619px) {
  .case-study .hero-exploration h3 { font: 600 14px/22px var(--font-project-title); letter-spacing: .2px; }
}
@media (max-width: 619px) {
  /* Paper's mobile notification circle is opaque white. */
  .hero-concept-phone::after { content: ''; position: absolute; left: 211.5px; top: 23.5px; width: 19px; height: 19px; border-radius: 50%; background: white; }
}

/* Sequential label swaps never put both strings in the clipped slot together. */
.hero-exploration-reveal { display: flow-root; }
.hero-disclosure-labels { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; }
.hero-disclosure-word { display: inline-block; white-space: nowrap; overflow: hidden; }
.hero-disclosure-suffix { display: inline-block; }
.hero-disclosure-enhanced summary { transition: color var(--case-hero-control-duration) ease; }
.hero-disclosure-enhanced .hero-disclosure-icon img { transition: transform var(--case-hero-control-duration) ease; }
.hero-disclosure-enhanced[data-expanded="false"] .hero-disclosure-icon img { transform: rotate(90deg); }
.hero-disclosure-enhanced[data-expanded="true"] .hero-disclosure-icon img { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .hero-disclosure-enhanced .hero-disclosure-icon img, .hero-disclosure-enhanced summary { transition: none; }
}

/* Restore Paper's native UI and exact SVG paths as crisp inline SVG artwork. */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url('../asset/fonts/lato-regular.ttf') format('truetype'); }
.concept-mockup { display: block; }
.hero-final-vector { display: block; width: 243px; height: 172px; }
.hero-final-vector .hero-reward-slot { display: block; position: relative; left: auto; top: auto; width: 51.46px; height: 10.8332px; flex-shrink: 0; background: transparent; }
@media (max-width: 619px) {
  .hero-concept-phone::after { content: none; }
  .hero-final-vector .hero-vector-notification { background-color: white !important; }
}
/* Mockup text follows Paper's own alignment, independently of the button label. */
.concept-mockup { text-align: left; }

/* Home Evolution: one shared four-column grid keeps titles on their points. */
.evolution-intro { padding-top: 32px; }
.home-evolution .evolution { border: 1px solid var(--color-border); padding: 32px 24px 48px; gap: 24px; }
.evolution-controls:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.evolution-timeline { width: min(480px, 100%); }
.home-evolution .evolution-stages { display: grid; grid-template-columns: repeat(4, 0px); justify-content: space-between; padding-inline: 30px; width: 100%; font-size: 12px; line-height: 16px; letter-spacing: .3px; text-align: center; color: var(--case-evolution-inactive); }
.evolution-stages span { width: max-content; transform: translateX(-50%); transition: color var(--case-evolution-transition); }
.evolution-stages .is-active { color: var(--color-text-secondary); }
.evolution-track { position: relative; margin: 24px 30px 0; height: 8px; border-top: 1px dashed var(--case-evolution-inactive); background: none; }
.evolution-points { display: flex; justify-content: space-between; position: absolute; inset: -22px -22px auto; }
.evolution-point { border: 0; background: transparent; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.evolution-point i { transition: background-color var(--case-evolution-transition); }
.evolution-point:hover i { background: var(--case-evolution-point-hover); }
.evolution-stages .is-hovered { color: var(--color-text-secondary); }
.evolution-points i { width: 8px; height: 8px; border-radius: 50%; background: var(--case-evolution-inactive); }
.evolution-handle { position: absolute; width: 44px; height: 44px; left: 100%; top: 0; transform: translate(-50%, -50%); cursor: grab; touch-action: none; transition: left var(--case-evolution-travel) cubic-bezier(.22,.61,.36,1); }
.evolution.is-dragging .evolution-handle { transition: none; }
.evolution-handle:active { cursor: grabbing; }
.evolution-handle span { position: absolute; width: 16px; height: 16px; left: 14px; top: 14px; border-radius: 50%; background: var(--case-evolution-indicator); }
.evolution-handle::before, .evolution-handle::after { content: ''; position: absolute; box-sizing: border-box; width: 36px; height: 36px; left: calc(50% - 18px); top: calc(50% - 18px); border: 1px solid var(--case-evolution-indicator); border-radius: 50%; animation: evolution-pulse var(--case-evolution-pulse) ease-out infinite; }
.evolution-handle::after { animation-delay: calc(var(--case-evolution-pulse) / -2); }
@keyframes evolution-pulse { from { transform: scale(.44444); opacity: .4; } to { transform: scale(1); opacity: 0; } }

.evolution-switch { position: relative; isolation: isolate; display: flex; border: 1px solid var(--color-border); border-radius: 1000px; padding: 4px; }
.evolution-switch button { position: relative; z-index: 1; border: 0; border-radius: 1000px; padding: 8px 16px; font: inherit; font-size: 12px; line-height: 16px; letter-spacing: .3px; font-weight: 300; color: var(--case-evolution-inactive); background: transparent; transition: color var(--case-evolution-transition), background-color var(--case-evolution-transition); cursor: pointer; }
.evolution-switch [aria-pressed="true"] { background: transparent; color: white; font-weight: 500; }
.evolution-switch-highlight { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 1000px; background: var(--case-evolution-active); transition: transform var(--case-evolution-switch-duration) cubic-bezier(.22,.8,.28,1), width var(--case-evolution-switch-duration) cubic-bezier(.22,.8,.28,1); }
#evolution-help { font-size: 12px; line-height: 16px; letter-spacing: .3px; text-align: center; }
.evolution-artwork { width: min(288px,100%); }
.evolution-view { border-radius: 25.5606px; box-shadow: 0 0 0 7.98769px #2E3543; }
.evolution-view img { border-radius: inherit; display: block; width: 100%; height: auto; }
/* Only the final signed mockup receives the decorative reward loop. */
.evolution-view[data-phase="3"][data-signed="signed"] { position: relative; }
.evolution-reward { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; font: 400 56px Lato, Arial, sans-serif; }
.evolution-reward-track { animation: evolution-reward-loop 6400ms cubic-bezier(.4, 0, .2, 1) infinite paused; }
.evolution-reward-ready .evolution-reward { display: block; }
.evolution-reward-playing .evolution-reward-track { animation-play-state: running; }
@keyframes evolution-reward-loop {
  0% { transform: translateY(0); }
  15.625%, 50% { transform: translateY(-306px); }
  65.625%, 100% { transform: translateY(-612px); }
}
@media (prefers-reduced-motion: reduce) {
  .evolution-reward-ready .evolution-reward { display: none; }
  .evolution-reward-track { animation: none; }
}
.evolution-fallback-title { text-align: center; font-size: 12px; margin: 12px 0; }
.evolution-enhanced .evolution-artwork { display: grid; }
.evolution-enhanced .evolution-view { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--case-evolution-image-fade) var(--case-evolution-image-easing), visibility 0s linear var(--case-evolution-image-fade); }
.evolution-enhanced .evolution-view.is-active { opacity: 1; visibility: visible; transition: opacity var(--case-evolution-image-fade) var(--case-evolution-image-easing), visibility 0s; }
.evolution-enhanced .evolution-fallback-title { display: none; }
@media (max-width: 619px) {
  .home-evolution .evolution, .evolution-controls:not([hidden]) { gap: 16px; }
  .evolution-timeline { width: calc(100% + var(--case-evolution-timeline-mobile-expansion)); max-width: calc(100% + var(--case-evolution-timeline-mobile-expansion)); }
  .home-evolution .evolution-stages { padding-inline: var(--case-evolution-timeline-mobile-start) var(--case-evolution-timeline-mobile-end); }
  .evolution-track { margin: 16px var(--case-evolution-timeline-mobile-end) 0 var(--case-evolution-timeline-mobile-start); }
  .evolution-artwork { width: min(180px,100%); }
  .evolution-view { border-radius: 15.9754px; box-shadow: 0 0 0 4.99231px #2E3543; }
}
@media (max-width: 319px) {
  /* Below the supported 320px target, keep the longest caption legible. */
  .home-evolution .evolution-stages span:last-child { width: min-content; }
}
@media (prefers-reduced-motion: reduce) {
  .evolution-handle::before, .evolution-handle::after { animation: none; }
  .evolution-handle::before { opacity: .2; }
  .evolution-handle::after { transform: scale(.66667); opacity: .4; }
  .evolution-stages span, .evolution-switch button, .evolution-switch-highlight, .evolution-handle, .evolution-point i, .evolution-enhanced .evolution-view, .evolution-enhanced .evolution-view.is-active { transition: none; }
}

/* MVO only: SVG viewBoxes preserve the inspected artwork/annotation composition. */
.mvo-section { display: flex; flex-direction: column; gap: var(--case-mvo-section-gap); min-width: 0; }
.mvo-copy { display: flex; flex-direction: column; gap: var(--case-mvo-copy-gap); }
.mvo-section .mvo-figure { display: flex; flex-direction: column; gap: 0; align-items: center; border: 1px solid var(--color-border); border-radius: var(--case-image-frame-radius); padding: 0 0 var(--case-mvo-caption-inset); overflow: hidden; }
.mvo-composition-mobile { display: none; }
.mvo-annotation { font-family: var(--font-body); font-weight: 300; color: var(--color-text-secondary); }
.mvo-section figcaption { margin-top: 16px; max-width: calc(100% - 32px); }
.mvo-section .mvo-core-values { gap: var(--case-mvo-chip-gap); align-items: center; }
.mvo-core-values li { padding: 8px 16px; flex-shrink: 0; }
.mvo-core-values .mvo-connector { flex: 1 0 20.33px; min-width: 0; padding: 0; height: 1px; outline: none; border-radius: 0; }
.mvo-connector svg { display: block; width: 100%; height: 1px; overflow: visible; }
@media (max-width: 751px) { .mvo-core-values .mvo-connector { display: none; } }
@media (max-width: 619px) {
  .mvo-composition-desktop { display: none; }
  .mvo-composition-mobile { display: block; margin-top: 22px; }
  .mvo-section figcaption { margin-top: 22px; width: 318px; }
  .mvo-core-values li { font-size: 14px; line-height: 22px; }
}

/* Guiding Users artwork: preserve the inspected Paper layer composition. */
.fab-figure { padding: 0; gap: 0; overflow: clip; border-width: 1px; }
.fab-artwork-mobile { display: none; }
.fab-figure figcaption { margin: 16px 16px var(--case-guidance-caption-inset); }
.attract-carousel .carousel-track { align-items: stretch; gap: 32px; }
.attract-carousel .figure { padding: var(--case-guidance-image-top-inset) 24px 24px; gap: var(--case-guidance-image-caption-gap); justify-content: flex-start; border: 0; outline: 1px solid var(--color-border); outline-offset: -1px; flex-shrink: 0; }
.attract-carousel .attract-one, .attract-carousel .attract-two { width: var(--case-guidance-card-width); }
/* Returned-user phone framing is shared; only the second image needs a crop. */
.attract-one img, .attract-two img, .benefit-story-phone { width: var(--case-guidance-phone-width); height: auto; aspect-ratio: var(--case-guidance-phone-ratio); border-radius: 16px; box-shadow: 0 0 0 5px #2E3543; }
.attract-two img { object-fit: cover; object-position: center top; }
.attract-carousel .carousel-dots { gap: var(--case-guidance-dot-gap); }
@media (max-width: 751px) {
  .attract-carousel, .case-media-pair {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .attract-carousel .carousel-track, .case-media-pair .carousel-track {
    padding-left: var(--case-mobile-content-gutter);
    padding-right: var(--case-carousel-end-gutter);
    gap: 12px;
  }
  .attract-carousel .figure { max-width: none; padding: var(--case-guidance-image-top-inset) 16px 16px; gap: var(--case-guidance-image-caption-gap-mobile); }
  .attract-carousel .attract-one, .attract-carousel .attract-two,
  .case-media-pair .carousel-track > * {
    width: min(var(--case-guidance-mobile-card-width), calc(100vw - 56px));
    height: auto;
  }
  .case-media-pair .carousel-track {
    display: flex;
    overflow-x: auto;
    margin-block: calc(-1 * var(--space-8));
    padding-block: var(--space-8);
  }
  .case-media-pair .carousel-track > * { max-width: none; }
  .attract-carousel .figure img, .benefit-story-phone { width: min(var(--case-guidance-phone-width), calc((100vw - 56px) * .5294117647)); border-radius: min(16px, calc((100vw - 56px) * .0470588235)); box-shadow: 0 0 0 min(5px, calc((100vw - 56px) * .0147058824)) #2E3543; }
}
@media (max-width: 619px) {
  .fab-artwork-desktop { display: none; }
  .fab-artwork-mobile { display: block; }
}
.attract-carousel .figure:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 4px; }

/* Exact Paper story layers share the existing top-anchored phone crop. */
.benefit-story-phone { position: relative; flex-shrink: 0; overflow: hidden; background: #06427B; }
.benefit-story-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--case-benefit-story-transition-duration) ease-in-out; pointer-events: none; }
.benefit-story-slide.is-active { opacity: 1; }
.benefit-story-float { animation: benefit-story-float var(--case-benefit-story-float-duration) ease-in-out var(--float-phase, 0ms) infinite; animation-play-state: paused; transform-origin: center; }
.benefit-story-phone.is-playing .benefit-story-float { animation-play-state: running; }
.benefit-story-progress { position: absolute; left: 4.444444%; top: 11.578947%; width: 91.111111%; height: .526316%; display: flex; gap: 2.439024%; }
.benefit-story-progress > span { flex: 1; overflow: hidden; border-radius: 8px; background: #FFFFFF4D; }
.benefit-story-progress > span > span { display: block; height: 100%; background: white; transform: scaleX(0); transform-origin: left; }
.benefit-story-progress > span:first-child > span { transform: scaleX(.0192307692); }
@keyframes benefit-story-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(calc(-1 * var(--case-benefit-story-float-distance))) rotate(.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-story-slide { transition: none; }
  .benefit-story-float { animation: none; }
}

/* Revamp Saku Info: reference spacing and grouped, uniformly scaled artwork. */
#saku-revamp { gap: var(--case-saku-info-group-gap); }
#saku-revamp .paragraph { padding-top: 32px; gap: var(--case-saku-info-copy-gap); }
#saku-revamp > .copy + .paragraph { padding-top: 0; }
#saku-revamp .paragraph > h3 + .copy { margin-top: 0; }
#saku-revamp .copy { gap: var(--case-saku-info-copy-gap); }
#saku-revamp .text-block > p + .bullet-paragraph { margin-top: 0; }
#saku-revamp .vision-carousel { width: 100%; margin: 0; }
#saku-revamp .vision { display: flex; gap: 8px; padding: 0; align-items: stretch; }
#saku-revamp .vision > div { position: relative; flex: 1 0 232px; padding: 12px; border: 0; outline: 1px solid var(--color-border); outline-offset: -1px; font: 300 16px/25px var(--font-body); }
#saku-revamp .vision-label { font-weight: 500; margin-bottom: 8px; }
#saku-revamp .vision-carousel .carousel-dots { display: none; }
#saku-revamp .comparison { aspect-ratio: 712 / 444; border: 1px solid var(--color-border); }
#saku-revamp .comparison-layer { padding: 0; min-height: 0; }
#saku-revamp .comparison-layer.after { background: #F6FBFA; }
#saku-revamp .comparison-control { display: none !important; }
#saku-revamp .saku-annotation { font: 300 14px/20px var(--font-body); letter-spacing: .2px; color: var(--color-text-secondary); }
#saku-revamp .comic-figure { display: flex; flex-direction: column; gap: 16px; width: 100%; }
#saku-revamp .comic-compilation { display: grid; grid-template-columns: minmax(0, 486fr) minmax(0, 218fr); gap: var(--case-saku-comic-gap); width: 100%; }
#saku-revamp .comic-frame { position: relative; min-width: 0; border-radius: var(--case-image-frame-radius); overflow: hidden; }
#saku-revamp .comic-frame::after { content: ""; position: absolute; inset: 0; border: var(--case-saku-comic-frame-border-width) solid var(--color-border); border-radius: inherit; pointer-events: none; }
#saku-revamp .comic-strips { display: flex; width: 486px; height: 246px; gap: 8px; align-items: center; justify-content: center; }
#saku-revamp .comic-strips img { width: 147.6px; height: 147.6px; border-radius: 5.963634px; box-shadow: 0 -1.008px 2.016px #28293D0A, 0 4.023px 8.055px #60617014; }
#saku-revamp .comic-preview { position: relative; width: 218px; height: 246px; background: #FAFAFA; }
#saku-revamp .comic-preview img { position: absolute; width: 147.6px; height: 311.4px; left: 40px; top: 24px; transform: rotate(-9deg); transform-origin: center top; border-radius: 13.12px; outline: 4.1px solid #2E3543; }
#saku-revamp .names-figure { padding: 0 0 23px; gap: 16px; overflow: hidden; border-width: 1px; }
#saku-revamp .names-figure figcaption { max-width: calc(100% - 32px); }
#saku-revamp .callout { border-width: 1px; gap: 12px; }
#saku-revamp :is(.saku-comparison-figure,.comic-figure,.names-figure):focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 4px; border-radius: var(--case-image-frame-radius); }
@media (max-width: 899px) {
  #saku-revamp .vision-carousel { width: 100vw; margin-left: calc(50% - 50vw); }
  #saku-revamp .vision { padding-left: var(--case-mobile-content-gutter); padding-right: var(--case-carousel-end-gutter); gap: 12px; }
  #saku-revamp .vision > div { flex: 0 0 232px; font-size: 14px; line-height: 22px; }
}
@media (max-width: 619px) {
  #saku-revamp .vision > div { flex-basis: 200px; }
  #saku-revamp .comic-compilation { grid-template-columns: minmax(0, 1fr); }
  #saku-revamp .comic-preview-frame { width: calc(100% * var(--case-saku-comic-preview-relative-width)); justify-self: center; }
}

#saku-revamp .comic-decision { background: var(--case-saku-comic-decision-background); }

/* Exploration labels are body text; name artwork shares one composition at every width. */
#saku-revamp .saku-exploration-label { font: 500 var(--case-saku-exploration-label-size)/25px var(--font-body); letter-spacing: .2px; color: var(--color-text-secondary); }
#saku-revamp .saku-exploration-one { margin-top: var(--case-saku-info-copy-gap); }

@media (max-width: 899px) {
  #saku-revamp .saku-exploration-label { font-size: var(--case-saku-exploration-label-size-mobile); line-height: 22px; }
}

/* Closing Outcome and Footer: Paper rhythm and native photo frames. */
#outcome { gap: var(--case-closing-text-gap); }
#outcome > h2 + .copy, #credits > h2 + .copy { margin-top: 0; }
#outcome .outcome-followup { margin-top: 32px; }
#outcome .outcome-followup .text-block { gap: 0; }
#outcome .outcome-followup .text-block > p + p { margin-top: 0; }
#outcome .total-impact { gap: 8px; }
#outcome .total-impact li { background: var(--case-outcome-chip-background); padding: 8px 16px; }
#outcome .award { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-width: 1px; background: var(--case-award-background); }
#outcome .award .copy { flex: 1; min-width: 0; }
.award-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; }
#credits .team-strip { box-sizing: content-box; width: 100%; margin-left: -8px; padding: 31px 8px 14px; min-height: 179px; gap: 14.69px; align-items: flex-start; }
#credits .team-strip img { width: 230.99px; height: 173.24px; object-fit: cover; border-radius: var(--case-team-photo-radius); outline: var(--case-team-photo-surround) solid white; filter: var(--case-team-photo-shadow); transform-origin: top left; margin-left: 0; }
#credits .team-strip img:nth-child(1) { rotate: -4.92deg; margin-top: 20px; }
#credits .team-strip img:nth-child(2) { rotate: 4.54deg; }
#credits .team-strip img:nth-child(3) { width: 228.77px; height: 183.65px; margin-left: -15.19px; margin-top: 9.6px; rotate: -2.26deg; object-position: 0 54.45%; }
.case-footer { gap: 8px; color: var(--color-text-primary); }
.case-footer hr { width: 100%; margin: 0 0 24px; border: 0; border-top: 1px dashed var(--color-border); }
.case-footer .next-project-link { width: fit-content; max-width: 100%; }
.case-footer .next-project-title { margin: 0; }
.case-footer .next-project-arrow { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 8px; vertical-align: middle; }
.next-project-arrow img { width: 8px; height: 8px; }
.case-footer .next-project-ending { white-space: nowrap; margin-left: 0; }
.next-project-preview { position: fixed; top: 0; left: 0; z-index: 30; width: clamp(var(--case-next-preview-width-mobile), 40vw, var(--case-next-preview-width)); border-radius: var(--radius-cover); outline: var(--home-cover-surround-desktop) solid white; filter: var(--home-cover-filter-other-desktop); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--case-next-preview-duration) ease-out, visibility var(--case-next-preview-duration); }
.next-project-preview img { display: block; width: 100%; aspect-ratio: 468 / 263; object-fit: cover; border-radius: inherit; }
.next-project-preview.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 619px) {
  #outcome, #credits, .case-footer { margin-top: calc(var(--case-closing-section-gap-mobile) - var(--case-section-gap-mobile)); }
  #credits { padding-bottom: 16px; }
  #outcome .total-impact li { font-size: 14px; line-height: 22px; }
  .case-footer { font-size: 12px; line-height: 16px; letter-spacing: .3px; }
  .case-footer .next-project-link { font: 600 14px/22px var(--font-project-title); letter-spacing: .2px; }
}
@media (prefers-reduced-motion: reduce) {
  .next-project-preview { transition: none; }
}

#credits .team-strip:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 4px; border-radius: var(--case-image-frame-radius); }

/* Desktop outer gutters are viewport-based; the main reading column stays fixed. */
@media (min-width: 1200px) {
  .overview { max-width: var(--case-desktop-max-width); padding-inline: var(--case-desktop-outer-gutter); grid-template-columns: minmax(0, 480fr) minmax(0, 784fr); }
  .case-body { max-width: var(--case-desktop-max-width); }
  .progress-rail { padding-left: var(--case-desktop-outer-gutter); }
}
@media (max-width: 751px) {
  /* Scroll past the photo's outline too, so its final white edge stays intact. */
  #credits .team-strip { box-sizing: border-box; width: calc(100% + 16px); padding-right: var(--case-team-carousel-end-padding); }
}

.case-study .case-text-link { color: inherit; }
.case-study .case-text-link:is(:hover,:focus-visible,:active) .case-text-link-label {
  color: var(--case-color-heading);
  text-decoration: underline dashed var(--color-name-underline);
  text-decoration-thickness: var(--case-text-link-underline-thickness);
  text-underline-offset: var(--case-text-link-underline-offset);
}

/* Native text underlines share geometry across disclosure and next-project links. */
.hero-disclosure-word { overflow: visible; }
.hero-exploration-disclosure summary:is(:focus-visible,:active) :is(.hero-disclosure-word,.hero-disclosure-suffix),
.next-project-link:is(:focus-visible,:active) .next-project-title {
  text-decoration: underline dashed var(--color-name-underline);
  text-decoration-thickness: var(--case-text-link-underline-thickness);
  text-underline-offset: var(--case-text-link-underline-offset);
}
@media (hover: hover) and (pointer: fine) {
  .hero-exploration-disclosure summary:hover :is(.hero-disclosure-word,.hero-disclosure-suffix),
  .next-project-link:hover .next-project-title {
    text-decoration: underline dashed var(--color-name-underline);
    text-decoration-thickness: var(--case-text-link-underline-thickness);
    text-underline-offset: var(--case-text-link-underline-offset);
  }
}

/* Source order: back, contents, then H1. Grid preserves the existing visual lanes. */
.case-study main { display: grid; grid-template-columns: minmax(0,1fr); }
.desktop-case-navigation { display: contents; }
.case-study main > .overview { grid-column: 1; grid-row: 1; width: 100%; }
.case-study main > .divider { grid-column: 1; grid-row: 2; }
.case-study main > .case-body { grid-column: 1; grid-row: 3; width: 100%; }
.desktop-nav-home { grid-column: 1; grid-row: 1; align-self: start; justify-self: center; width: min(100%,var(--case-desktop-max-width)); padding: 88px var(--case-desktop-outer-gutter) 0; z-index: 1; pointer-events: none; }
.desktop-nav-home .desktop-back { margin-bottom: 0; pointer-events: auto; }
.desktop-case-navigation .progress-rail { grid-column: 1; grid-row: 3; width: min(100%,var(--case-desktop-max-width)); justify-self: center; pointer-events: none; z-index: 1; }
.desktop-case-navigation .progress-rail nav { pointer-events: auto; }
.overview-left { padding-top: 80px; }
@media (min-width: 900px) and (max-width: 1199px) {
  .desktop-nav-home { padding-inline: 32px; }
  .desktop-case-navigation .progress-rail { max-width: 1440px; }
}
@media (max-width: 899px) {
  .desktop-nav-home { display: none; }
  .overview-left { padding-top: 0; }
  .case-study main > .overview { width: min(100%,752px); }
}

/* Compact popover navigation retains the source nodes and progress states. */
@media (max-width: 899px) {
  .mobile-toc nav { gap: 0; min-width: 204px; max-width: calc(100vw - 2 * var(--case-mobile-content-gutter)); }
  .mobile-toc .progress-nav a { height: 44px; min-height: 0; gap: var(--case-progress-label-gap); font-size: 14px; line-height: 22px; }
  .mobile-toc .progress-children a { height: 28px; }
  .mobile-toc .progress-nav .progress-label { visibility: visible; }
  .mobile-toc .progress-nav a::after { top: 27.5px; height: 33px; }
  .mobile-toc .progress-solution.has-visible-children::after, .mobile-toc .progress-nav:not(.is-enhanced) .progress-solution::after { height: 24px; }
  .mobile-toc .progress-children a::after { top: 16.5px; height: 23px; }
  .mobile-toc .progress-children a:last-child::after { height: 24px; }
  .mobile-toc .progress-children::after { height: 12.5px; }
}

/* Labels reveal over the page surface, without changing the reading column. */
.progress-nav a:is(:hover,:focus-visible,:active) .progress-label { color: var(--color-text-secondary); }
.progress-rail nav, .progress-rail .progress-nav a { width: var(--case-progress-node-size); }
.progress-rail .progress-label { position: absolute; left: calc(var(--case-progress-node-size) + var(--case-progress-label-gap) - 8px); top: 50%; translate: 0 -50%; padding: var(--case-progress-label-padding); border-radius: var(--case-progress-label-radius); background: var(--color-background); visibility: hidden; opacity: 0; transform: translateX(-8px); clip-path: inset(0 100% 0 0); pointer-events: none; transition: opacity var(--case-progress-label-duration) ease, transform var(--case-progress-label-duration) ease, clip-path var(--case-progress-label-duration) ease, visibility 0s var(--case-progress-label-duration); }
.progress-rail nav:not(.labels-may-collide) a[aria-current] .progress-label,
.progress-rail nav:not(.labels-may-collide) .progress-solution.is-active-group .progress-label,
.progress-rail nav:is(:hover,:has(a:focus-visible)) .progress-label { visibility: visible; opacity: 1; transform: translateX(0); clip-path: inset(0); pointer-events: auto; transition-delay: 0s; }
/* Keep the whole revealed label area and the gaps between rows hoverable. */
.progress-rail nav:is(:hover,:has(a:focus-visible)) { width: var(--case-progress-hover-width,var(--case-progress-node-size)); }
.progress-rail nav:is(:hover,:has(a:focus-visible)) a { width: 100%; }
.mobile-toc nav:not(:popover-open) { display: none; }
.mobile-toc:has(nav:popover-open) .toc-toggle::before { background: var(--case-nav-touch-background); }
@media (prefers-reduced-motion: reduce) {
  .progress-children, .progress-nav a::after, .progress-rail .progress-label { transition: none; }
}

/* Desktop Back hover surface is a full capsule, including its expanding label. */
@media (min-width: 900px) {
  .desktop-back::before { border-radius: var(--case-back-hover-radius); }
}

/* Match the homepage's native dashed underline, revealed in reading order. */
.next-project-link .next-project-title.has-drawing-underline { position: relative; display: block; text-decoration-line: none; }
.case-footer .next-project-underline { position: absolute; inset: 0; margin: 0; color: transparent; pointer-events: none; text-decoration: underline dashed var(--color-name-underline); text-decoration-thickness: var(--case-text-link-underline-thickness); text-underline-offset: var(--case-text-link-underline-offset); }
.next-project-underline .next-project-arrow { visibility: hidden; }