:root {
  --paper: #ffffff;
  --ink: #11120f;
  --muted: #77786f;
  --line: rgba(17, 18, 15, .18);
  --acid: #8b6cff;
  --blue: #23c8e4;
  --coral: #ff6b5f;
  --violet: #8b6cff;
  --violet-hover: #a78bfa;
  --focus-ring: #626b77;
  --focus-ring-on-dark: #d9dee5;
  --sun: #ffbf3f;
  --night: #111827;
  --micro: 14px;
  --control-radius: 100px;
  --surface-radius: 24px;
  --media-radius: 18px;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }
body.is-loading { overflow: hidden; }
section[id] { scroll-margin-top: 96px; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, textarea { font: inherit; }
:where(a, button, input, textarea):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.mono, .eyebrow, .section-label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .05em; }
.site-loader { --loader-progress: 0; position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: var(--paper); opacity: 1; visibility: visible; transform: translateY(0); transition: visibility .76s, transform .76s cubic-bezier(.32, .72, 0, 1); }
.loader-frame { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding-block: 5vw; padding-inline: clamp(40px, 7vw, 120px); }
.loader-composition { width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 2.6vw, 40px); }
.loader-brand { width: clamp(88px, 6vw, 116px); height: auto; object-fit: contain; animation: loader-mark-in .62s .06s cubic-bezier(.16,1,.3,1) both; }
.loader-route { width: 100%; min-width: 0; display: grid; grid-template-columns: max-content minmax(140px, 1fr) max-content; align-items: center; gap: clamp(16px, 2vw, 28px); animation: loader-route-in .68s .14s cubic-bezier(.16,1,.3,1) both; }
.loader-word { display: block; color: var(--ink); font-family: var(--font-sans); font-size: clamp(38px, 3.5vw, 56px); font-weight: 500; line-height: .98; letter-spacing: -.04em; white-space: nowrap; animation: loader-word-in .72s cubic-bezier(.16,1,.3,1) both; transition: color .28s ease; }
.loader-word-logic { animation-delay: .08s; }
.loader-word-feel { animation-delay: .16s; }
.loader-word-feel em { font-family: Georgia, serif; font-weight: 400; }
.loader-route-track { position: relative; height: 20px; }
.loader-route-track::before, .loader-route-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; border-radius: 999px; translate: 0 -50%; }
.loader-route-track::before { background: rgba(17, 18, 15, .16); }
.loader-route-fill { right: auto; width: 100%; background: var(--violet); transform: scaleX(var(--loader-progress)); transform-origin: left center; will-change: transform; }
.loader-progress { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-loader.is-complete .loader-word-logic { color: #73756d; }
.site-loader.is-complete .loader-word-feel { color: #5b3be0; }
.site-loader.is-exiting { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
.site-loader.is-exiting .loader-composition { transform: translateY(-18px); opacity: .3; transition: transform .48s cubic-bezier(.32,.72,0,1), opacity .28s ease; }
@keyframes loader-mark-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes loader-word-in { from { opacity: 0; transform: translateY(22px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes loader-route-in { from { opacity: 0; transform: scaleX(.72); } to { opacity: 1; transform: scaleX(1); } }

.brand-loader .site-loader { --loader-crimson: #9d2921; isolation: isolate; background: #fff; transition: opacity .78s cubic-bezier(.16,1,.3,1), visibility 0s linear .78s; }
.brand-loader .site-loader::before { content: ""; position: absolute; inset: -5%; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.16) 100%), url("assets/videos/crimson-system-field-poster.jpg"); background-position: 50% 0; background-size: cover; filter: blur(18px) saturate(.88); opacity: calc(.18 + (var(--loader-progress) * .26)); transform: scale(1.06); transform-origin: center top; will-change: opacity; }
.brand-loader .site-loader::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.3) 48%, rgba(255,255,255,.62) 100%); }
.brand-loader .loader-frame { z-index: 1; }
.brand-loader .loader-word { transition: color .72s cubic-bezier(.77,0,.175,1); }
.brand-loader .loader-route-track { height: 24px; }
.brand-loader .loader-route-track::before, .brand-loader .loader-route-fill { height: 3px; }
.brand-loader .loader-route-track::before { background: rgba(97,31,27,.2); }
.brand-loader .loader-route-fill { background: var(--loader-crimson); box-shadow: 0 6px 16px rgba(118,25,20,.16); }
.brand-loader .loader-route-track::after { content: ""; position: absolute; top: 50%; left: calc(var(--loader-progress) * 100%); width: clamp(20px, 2.6vw, 36px); height: 3px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255,226,209,.92) 66%, #fff 100%); opacity: clamp(0, calc(var(--loader-progress) * 6), 1); translate: -50% -50%; transition: opacity .24s ease; }
.brand-loader .site-loader.is-complete .loader-word-logic { color: var(--ink); }
.brand-loader .site-loader.is-complete .loader-word-feel { color: var(--loader-crimson); }
.brand-loader .site-loader.is-complete .loader-route-track::after { opacity: 0; }
.brand-loader .site-loader.is-exiting { opacity: 0; visibility: hidden; transform: none; pointer-events: none; }
.brand-loader .site-loader.is-exiting .loader-composition { opacity: 0; transform: none; transition: opacity .44s ease; }

@media (max-width: 620px) {
  .loader-frame { padding: 24px 28px; }
  .loader-composition { width: min(270px, 100%); gap: 30px; }
  .loader-brand { width: 80px; }
  .loader-route { grid-template-columns: 1fr 1fr; grid-template-areas: "logic ." "track track" ". feel"; gap: 20px 0; }
  .loader-word { font-size: clamp(34px, 9.5vw, 38px); line-height: 1; }
  .loader-word-logic { grid-area: logic; justify-self: start; }
  .loader-route-track { grid-area: track; width: 100%; height: 20px; }
  .loader-word-feel { grid-area: feel; justify-self: end; }
  .brand-loader .site-loader::before { background-position: 55% 0; filter: blur(14px) saturate(.88); }
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 1; contain: strict; transform: translateZ(0); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { height: 68px; padding: 0 20px; position: fixed; top: 14px; left: 3vw; right: 3vw; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: var(--micro); color: var(--ink); background: rgba(255,255,255,.56); border: 1px solid rgba(17,18,15,.12); border-radius: var(--control-radius); box-shadow: 0 12px 40px rgba(17,18,15,.06); backdrop-filter: blur(30px) saturate(160%) contrast(1.04); -webkit-backdrop-filter: blur(30px) saturate(160%) contrast(1.04); opacity: 1; transform: translateY(0); transition: transform .95s cubic-bezier(.16,1,.3,1) .16s, opacity .55s ease .16s; }
body.is-loading .site-header { opacity: 0; transform: translateY(calc(-100% - 28px)); }
.site-header.is-scroll-aware { transition: transform 220ms cubic-bezier(.23,1,.32,1), opacity 160ms ease; }
.site-header.is-scroll-hidden { opacity: 0; pointer-events: none; transform: translateY(calc(-100% - 28px)); }
.brand { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 44px; }
.brand img { width: 32px; height: auto; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; }
.desktop-nav a { padding: 3px 26px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; transition: color .3s; }
.desktop-nav a:not(:first-child) { border-left: 1px solid rgba(17,18,15,.18); }
.desktop-nav a, .back-link { position: relative; }
.desktop-nav a:hover { color: #5b3be0; }
.back-link::after { content: ""; position: absolute; height: 1px; background: currentColor; inset: auto 0 -5px; transform: scaleX(0); transform-origin: 100%; transition: transform .45s var(--ease); }
.back-link:hover::after { transform: scaleX(1); transform-origin: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.availability { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--control-radius); background: var(--ink); color: var(--paper); font-weight: 700; transition: background .3s, color .3s; }
.availability:hover { background: var(--violet-hover); color: var(--ink); }
.schedule-short, .menu-toggle, .mobile-nav { display: none; }
.menu-toggle { width: 42px; height: 42px; padding: 0; border: 1px solid rgba(17,18,15,.14); border-radius: 50%; background: rgba(255,255,255,.52); color: var(--ink); cursor: pointer; place-items: center; font-size: 21px; transition: background .3s, color .3s; }
.menu-toggle:hover { background: var(--violet-hover); color: var(--ink); }
.menu-toggle .ph-x { display: none; }
.menu-toggle[aria-expanded="true"] .ph-list { display: none; }
.menu-toggle[aria-expanded="true"] .ph-x { display: inline-block; }
.mobile-nav { position: absolute; top: calc(100% + 10px); right: 0; width: min(310px, calc(100vw - 6vw)); padding: 10px 18px; flex-direction: column; color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid rgba(17,18,15,.12); border-radius: 28px; box-shadow: 0 18px 50px rgba(17,18,15,.12); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .25s, visibility .25s, transform .35s var(--ease); }
.mobile-nav a { min-height: 62px; display: flex; align-items: center; justify-content: space-between; font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.mobile-nav a:not(:first-child) { border-top: 1px solid rgba(17,18,15,.14); }
.mobile-nav i { font-size: 19px; color: #5b3be0; }
.mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.hero { min-height: 100svh; padding: 124px 3vw 42px; position: relative; z-index: 2; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .68; pointer-events: none; z-index: -2; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.34) 56px, #000 132px); mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.34) 56px, #000 132px); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.35) 46%, rgba(255,255,255,.04) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 36%, rgba(255,255,255,.14) 56%, rgba(255,255,255,.5) 82%, rgba(255,255,255,.72) 100%); }
.hero-video { position: absolute; z-index: 0; top: 0; right: 0; width: 72vw; height: 70vh; overflow: hidden; pointer-events: none; opacity: .78; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.72) 9%, #000 22%, #000 40%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.28) 82%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.72) 9%, #000 22%, #000 40%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.28) 82%, transparent 100%); }
.hero-video video { position: absolute; top: -2%; left: 0; display: block; width: 100%; height: 114%; object-fit: cover; object-position: 50% 0%; filter: none; transform: none; transform-origin: 50% 12%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 9%, rgba(0,0,0,.82) 20%, #000 31%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 9%, rgba(0,0,0,.82) 20%, #000 31%); }
.hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(17,18,15,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,15,.075) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent 8%, black 38%, transparent 94%); }
.hero-copy { margin: auto 0 3vh; position: relative; z-index: 2; }
.home-page .hero-copy { transition: opacity .28s ease; }
.home-page.is-loading .hero-copy { opacity: 0; }
.display-title { font-size: clamp(68px, 10.5vw, 168px); line-height: .95; letter-spacing: -.075em; font-weight: 500; margin: 0; }
.display-title .title-row {
  display: block;
  overflow: hidden;
  padding: .08em 0 .26em;
  margin: -.08em 0 -.26em;
}
.display-title .title-row.indent { padding-left: 11vw; }
.display-title em, .contact-section em, .case-hero em, .results-heading em { font-family: Georgia, serif; font-weight: 400; }
.feel-word { position: relative; display: inline-grid; vertical-align: baseline; }
.feel-word-base, .feel-word-charge { grid-area: 1 / 1; align-self: baseline; font: inherit; line-height: inherit; }
.feel-word-base { color: var(--ink); }
.feel-word-charge { color: #9d2921; pointer-events: none; opacity: 0; }
.feel-word.is-signaled .feel-word-charge,
.feel-word.is-releasing .feel-word-charge { will-change: opacity; }
.reveal-text { display: block; transform: translateY(110%) rotate(2deg); animation: title-in 1.15s .18s var(--ease) forwards; }
.title-row:nth-child(2) .reveal-text { animation-delay: .32s; }
@keyframes title-in { to { transform: translateY(0) rotate(0); } }
.hero-bottom { display: flex; justify-content: flex-end; margin-top: 42px; }
.hero-summary { width: min(390px, 100%); overflow: hidden; }
.hero-summary > p { margin: 0; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.02em; opacity: 0; transform: translateY(18px); animation: bridge-settle-in .9s 1.04s var(--ease) forwards; }
.hero-details { margin-bottom: 12px; overflow: hidden; font-size: clamp(17px, 1.55vw, 22px); font-weight: 600; line-height: 1.5; white-space: nowrap; text-transform: none; letter-spacing: -.02em; }
.hero-role { display: block; opacity: 0; transform: translateY(110%); animation: role-rise-in .78s .76s var(--ease) forwards; }
body.is-loading .reveal-text, body.is-loading .hero-role, body.is-loading .hero-summary > p { animation-play-state: paused; }
@keyframes role-rise-in { to { opacity: 1; transform: translateY(0); } }
@keyframes bridge-settle-in { to { opacity: 1; transform: translateY(0); } }

.manifesto { padding: 0 3vw 150px; }
.section-label { --chapter-accent: var(--violet); border-top: 1px solid var(--line); padding-top: 46px; display: grid; grid-template-columns: 1fr auto; column-gap: 5vw; align-items: start; margin-bottom: 110px; font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
.chapter-title { margin: 0; display: flex; align-items: flex-start; justify-self: start; text-align: left; font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.chapter-title span { display: block; }
.chapter-title span::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 18px; background: var(--chapter-accent); transition: width .9s var(--ease); }
.section-label.visible .chapter-title span::after { width: 50%; }
.chapter-meta { align-self: center; color: var(--muted); font-size: var(--micro); line-height: 1.4; }
.profile-chapter { --chapter-accent: var(--violet); }
.work-chapter { --chapter-accent: var(--acid); }
.manifesto .section-label.reveal { opacity: 1; transform: none; }
.manifesto-grid { display: grid; grid-template-columns: 1.55fr .65fr; gap: 10vw; align-items: center; }
.manifesto-statement { margin: 0; font-size: clamp(34px, 4.3vw, 67px); line-height: 1.08; letter-spacing: -.055em; }
.manifesto-statement span { color: #8b8d82; }
.profile-copy { font-size: 15px; line-height: 1.65; color: #55564e; }
.profile-copy p { margin: 0 0 18px; }
.stats { margin-top: 130px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; overflow: clip; }
.stats > div { padding: 30px 18px 0 0; border-right: 1px solid var(--line); min-height: 150px; position: relative; }
.stats > div:not(:first-child) { padding-left: 24px; }
.stats > div:last-of-type { border-right: 0 !important; }
.stats > div > strong,
.stats > div > span { transition: opacity .28s var(--ease); }
.stats.is-tracing > div > strong,
.stats.is-tracing > div > span { opacity: .24; }
.stats.is-tracing > div.is-trace-active > strong,
.stats.is-tracing > div.is-trace-active > span { opacity: 1; }
.stats strong { font-size: clamp(42px, 5.5vw, 78px); line-height: 1; letter-spacing: -.06em; font-weight: 500; display: block; }
.stats span:not(.stats-tracer) { display: block; margin-top: 20px; color: var(--muted); font-size: var(--micro); line-height: 1.5; }
.stats-tracer { position: absolute; z-index: 3; top: 0; left: 0; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .1s; }
.stats-tracer i { position: absolute; left: -5px; top: -1.5px; display: block; width: 10px; height: 3px; border-radius: 100px; background: currentColor; box-shadow: 0 0 8px currentColor; opacity: 0; transform: translate3d(0, 0, 0); transform-origin: 50% 50%; will-change: transform, opacity; transition: opacity .06s; }
.stats-tracer.is-active { opacity: 1; }

.work-section { position: relative; z-index: 2; background: #10110e; color: var(--paper); padding: 84px 3vw 48px; }
.section-label.inverse { border-color: rgba(242,240,232,.22); }
.section-label.inverse .chapter-meta { color: #92938c; }
.eyebrow { font-size: var(--micro); line-height: 1.5; margin: 0 0 28px; }
.work-section .section-label { border-top: 0; padding-top: 0; margin-bottom: 84px; }
.work-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .45fr); gap: 9vw; align-items: end; margin: 0 0 110px; }
.work-intro h3 { max-width: 1080px; margin: 0; font-size: clamp(48px, 6.5vw, 102px); font-weight: 500; line-height: .98; letter-spacing: -.065em; }
.work-intro > p { max-width: 440px; margin: 0 0 8px; color: #9b9d94; font-size: 16px; line-height: 1.65; }
.work-inline-image { display: inline-block; width: 1.55em; height: .6em; margin: 0 .08em; overflow: hidden; vertical-align: .06em; border-radius: 100px; background: #b9a1ff; }
.work-inline-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.work-card, .work-outro { grid-column: span 6; min-width: 0; min-height: 730px; background: #181a1f; position: relative; overflow: hidden; border-radius: var(--surface-radius); }
.work-card { --card-accent: #b7cad4; display: flex; flex-direction: column; padding: 14px; isolation: isolate; }
.work-card-link { transition: background-color .35s ease; }
.work-card-link:focus-visible { outline-color: var(--focus-ring-on-dark); outline-offset: 4px; background: #1b1d22; }
.work-card-top { min-height: 60px; padding: 4px 12px 17px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #94968e; font-size: var(--micro); line-height: 1.4; }
.work-card-top .mono { font-size: var(--micro); }
.work-card-action { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font-size: var(--micro); font-weight: 600; }
.work-card-action i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(215,228,235,.24); border-radius: 50%; color: var(--card-accent); font-size: 17px; transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.work-media { position: relative; flex: 1 1 auto; min-height: 470px; overflow: hidden; border-radius: var(--media-radius); background: #12151a; }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-card-miportal .work-media, .work-preview-video { background: #101b2e; }
.work-preview-video { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.work-media.is-previewing .work-preview-video { opacity: 1; }
.work-card-miportal .work-media img, .work-card-gfh .work-media img { object-position: center center; }
.work-card-oto .work-media img { object-position: center 22%; }
.work-card-logatta .work-media img { object-position: center center; }
.work-card-naseej .work-media img { object-position: center center; }
.work-card-copy { min-height: 178px; padding: 25px 12px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.work-card-copy h3 { margin: 0; font-size: clamp(40px, 3.9vw, 64px); font-weight: 500; line-height: .92; letter-spacing: -.055em; }
.work-card-copy p { max-width: 470px; margin: 15px 0 0; color: #9b9d94; font-size: 14px; line-height: 1.55; }
.work-card-copy > .mono { max-width: 150px; color: #777970; font-size: var(--micro); line-height: 1.5; text-align: right; }
.work-outro { padding: 44px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 84% 8%, rgba(143,161,174,.18), transparent 35%), radial-gradient(circle at 7% 80%, rgba(207,220,226,.08), transparent 38%), #181a1f; }
.work-outro-images { display: flex; align-items: center; margin: 0 0 auto; }
.work-outro-images span { width: clamp(90px, 10vw, 150px); aspect-ratio: 1.55; overflow: hidden; border: 4px solid #1a1a16; border-radius: 100px; }
.work-outro-images span:not(:first-child) { margin-left: -22px; }
.work-outro-images span:nth-child(2) { transform: rotate(5deg); }
.work-outro-images span:nth-child(3) { transform: rotate(-4deg); }
.work-outro-images img { height: 100%; object-fit: cover; }
.work-outro > p { margin: 0 0 28px; color: #9b9d94; font-size: var(--micro); line-height: 1.5; text-transform: uppercase; letter-spacing: .05em; }
.work-outro h3 { margin: 0; font-size: clamp(48px, 6vw, 94px); font-weight: 500; line-height: .92; letter-spacing: -.07em; }
.work-outro h3 em { color: var(--acid); font-family: Georgia, serif; font-weight: 400; }
.work-outro > a { width: fit-content; margin-top: 54px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 28px; border-bottom: 1px solid rgba(242,240,232,.45); font-size: 15px; font-weight: 600; }
.work-outro > a i { color: var(--acid); font-size: 20px; }

@media (hover: hover) and (pointer: fine) {
  .work-card-link:hover { background: #1b1d22; }
  .work-card-link:hover .work-card-action i { color: var(--ink); background: var(--acid); border-color: var(--acid); }
}
.work-card-link:focus-visible .work-card-action i { color: var(--ink); background: var(--focus-ring-on-dark); border-color: var(--focus-ring-on-dark); }

.process-section { position: relative; z-index: 2; padding: 120px 3vw 110px; background: #e2e9e7; }
.process-pin-anchor { height: 0; pointer-events: none; }
.process-pin-shell { position: relative; }
.process-pin { min-height: 100svh; padding: 9vh 0 5vh; display: grid; grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr); gap: 3vw; align-items: stretch; }
.process-narrative { min-width: 0; padding: 18px 0 12px; display: flex; flex-direction: column; justify-content: space-between; }
.process-thesis { max-width: 9.5ch; margin: 0; font-size: clamp(50px, 5.25vw, 84px); font-weight: 500; line-height: .94; letter-spacing: -.065em; }
.process-word { display: inline; opacity: .14; }
.process-word-accent { color: #087f96; }
.process-narrative > p { max-width: 390px; margin: 60px 0 0; color: #4e5a57; font-size: 16px; line-height: 1.65; }
.process-instrument { min-width: 0; min-height: min(720px, 78vh); position: relative; overflow: hidden; isolation: isolate; border-radius: var(--surface-radius); background: #11120f; color: var(--paper); }
.process-instrument::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 24%, rgba(35,200,228,.16), transparent 30%), radial-gradient(circle at 32% 90%, rgba(139,108,255,.11), transparent 34%); }
.process-panels { position: absolute; inset: 0 0 86px; margin: 0; padding: 0; list-style: none; }
.process-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); background: #11120f; opacity: 0; visibility: hidden; }
.process-panel.is-current { opacity: 1; visibility: visible; }
.process-panel-copy { min-width: 0; padding: clamp(34px, 3.3vw, 54px); display: flex; flex-direction: column; }
.process-panel-heading { display: flex; align-items: center; gap: 14px; color: var(--blue); }
.process-panel-heading i { font-size: 30px; }
.process-panel-heading span { color: #a7aaa2; font-size: var(--micro); }
.process-panel h4 { max-width: 9.5ch; margin: auto 0 24px; font-size: clamp(38px, 4vw, 66px); font-weight: 500; line-height: .94; letter-spacing: -.06em; }
.process-panel-copy > p { max-width: 430px; margin: 0; color: #9b9d94; font-size: 15px; line-height: 1.65; }
.process-output { margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(242,240,232,.18); }
.process-output span { display: block; margin-bottom: 13px; color: #777a72; font-size: var(--micro); }
.process-output strong { display: block; max-width: 390px; font-size: 16px; font-weight: 500; line-height: 1.45; }
.process-panel figure { min-width: 0; margin: 18px 18px 18px 0; position: relative; overflow: hidden; border-radius: var(--media-radius); background: #526e76; }
.process-panel figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.process-panel figure img { height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .8s var(--ease); }
.process-panel:nth-child(-n+3) figure img { padding: clamp(18px, 2.2vw, 36px); object-fit: contain; }
.process-panel:nth-child(1) figure img { object-position: center; }
.process-panel:nth-child(2) figure img { object-position: center; }
.process-panel:nth-child(3) figure img { object-position: center; }
.process-panel:nth-child(4) figure img { object-position: center; }
.process-panel figcaption { position: absolute; right: 14px; bottom: 14px; padding: 9px 12px; color: #fff; background: rgba(17,18,15,.78); font-size: var(--micro); backdrop-filter: blur(10px); }
.process-rail { height: 86px; position: absolute; right: 0; bottom: 0; left: 0; display: flex; margin: 0; padding: 0; border-top: 1px solid rgba(242,240,232,.18); list-style: none; }
.process-rail li { min-width: 0; flex: 1 1 0; padding: 20px 18px 14px; position: relative; overflow: hidden; border-right: 1px solid rgba(242,240,232,.14); }
.process-rail li:last-child { border-right: 0; }
.process-rail li > span { height: 2px; position: absolute; top: -1px; right: 0; left: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.process-rail strong, .process-rail small { display: block; white-space: nowrap; }
.process-rail strong { font-size: 14px; font-weight: 600; }
.process-rail small { margin-top: 7px; color: #74776f; font-size: 12px; }
@media (min-width: 901px) {
  .process-section { padding-bottom: calc(110px + 320vh); }
  .process-pin { min-height: calc(100svh - 82px); padding: 3vh 0 4vh; }
}
.step-icon, .solution-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-size: 28px; margin-bottom: 32px; }
.step-icon.coral, .solution-icon.coral { color: #a92720; background: rgba(255,107,95,.2); }
.step-icon.violet, .solution-icon.violet { color: #5b3be0; background: rgba(139,108,255,.2); }
.step-icon.cyan, .solution-icon.cyan { color: #087f96; background: rgba(35,200,228,.2); }
.step-icon.lime, .solution-icon.lime { color: #4321c7; background: rgba(139,108,255,.24); }

.contact-section { min-height: 0; background: var(--paper); padding: 0; position: relative; overflow: clip; }
.site-footer { width: 100%; padding: clamp(44px, 5vw, 72px) 3vw 22px; background: var(--paper); color: var(--ink); position: relative; z-index: 2; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 -20px 60px rgba(17,18,15,.06); }
.site-footer::before { content: ""; position: absolute; z-index: -1; inset: 14% -14% -46% 3%; background: radial-gradient(circle at 28% 56%, rgba(35,200,228,.2), transparent 30%), radial-gradient(circle at 62% 58%, rgba(139,108,255,.35), transparent 38%), radial-gradient(circle at 82% 76%, rgba(255,107,95,.2), transparent 30%); filter: blur(48px); opacity: .68; }
.footer-intro h2 { max-width: none; margin: 0; font-size: clamp(44px, 5.5vw, 88px); font-weight: 500; line-height: .96; letter-spacing: -.048em; white-space: nowrap; }
.footer-intro h2 em { margin-left: .06em; color: #777383; }
.footer-details { margin-top: clamp(38px, 5vh, 64px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 56px; }
.footer-contact { display: grid; gap: 8px; }
.footer-contact > span { color: #77786f; font-size: 13px; }
.footer-contact a { width: max-content; padding: 5px 0 7px; display: inline-flex; align-items: center; gap: 9px; position: relative; font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; transition: color .35s var(--ease); }
.footer-contact a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--violet), var(--blue), var(--coral)); transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease); }
.footer-contact i { color: #5b3be0; transition: color .35s var(--ease); }
.footer-contact a:hover { color: #4321c7; }
.footer-contact a:hover::after { transform: scaleX(1); }
.footer-contact a:hover i { color: #4321c7; }
.footer-contact a:focus-visible, .footer-contact a:focus-visible i { color: var(--ink); }
.footer-details nav { display: flex; gap: clamp(22px, 3vw, 46px); font-size: clamp(15px, 1.2vw, 19px); font-weight: 600; }
.footer-details nav a { transition: color .3s var(--ease); }
.footer-details nav a:hover { color: #5b3be0; }
.footer-details nav a:focus-visible { color: var(--ink); }
.footer-bottom { margin-top: clamp(48px, 6vw, 82px); padding-top: 18px; border-top: 1px solid rgba(17,18,15,.2); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; color: #66685f; font-size: 12px; }
.footer-bottom a { color: var(--ink); }
.footer-socials { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.5vw, 34px); color: var(--ink); font-weight: 600; }
.footer-socials span { opacity: .68; }
.back-top { display: inline-flex; align-items: center; gap: 8px; }
.back-top i { font-size: 18px; transition: transform .35s var(--ease); }
.back-top:hover i { transform: translateY(-4px); }
/* September 26: the same arrival as the case study (case-motion.css): 16px rise, 640ms on cubic-bezier(.23,1,.32,1), opacity 480ms. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 480ms cubic-bezier(.23, 1, .32, 1), transform 640ms cubic-bezier(.23, 1, .32, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Case study */
html:has(body.case-body) { max-width: 100%; overflow-x: clip; background: #ffffff; }
.case-body {
  --case-paper: #f6f7fb;
  --case-paper-deep: #e8ecf3;
  --case-ink: #101827;
  --case-muted: #596475;
  --case-line: #d3d9e3;
  --case-night: #0f1728;
  --case-night-soft: #17233a;
  background: var(--case-paper);
  color: var(--case-ink);
  max-width: 100%;
  overflow-x: clip;
}
.case-body a:focus-visible, .case-body button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.case-main { width: 100%; max-width: 100%; overflow-x: clip; }
.case-shell { width: min(1600px, 94vw); margin-inline: auto; }
.case-header {
  display: flex;
  justify-content: space-between;
  color: var(--case-ink);
  background: rgba(246,247,251,.92);
  border-color: rgba(16,24,39,.13);
  box-shadow: 0 14px 42px rgba(16,24,39,.1);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.case-header .brand img { filter: none; }
.back-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.back-link i { font-size: 18px; color: #5b3be0; transform: none; }
.case-header .back-link:hover i { transform: none; }
.case-header .back-link::after { background: #5b3be0; }
.case-hero {
  width: min(1600px, 94vw);
  min-height: 100svh;
  margin-inline: auto;
  padding: 132px 0 86px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  background: transparent;
  color: var(--case-ink);
  overflow: visible;
}
.case-hero-copy { grid-column: 1 / span 7; align-self: center; }
.case-hero h1 {
  max-width: 1160px;
  margin: 0;
  font-size: clamp(58px, 6.7vw, 96px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.case-hero h1 em, .case-motion-copy h2 em, .results-heading h2 em { font-family: Georgia, serif; font-weight: 400; }
.case-hero-copy > p {
  max-width: 650px;
  margin: 54px 0 0;
  color: var(--case-muted);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.62;
  letter-spacing: -.018em;
}
.case-hero-artifact { grid-column: 8 / -1; margin: 0; align-self: center; }
.case-hero-artifact img { border-radius: 16px; background: var(--case-night); }
.case-hero-artifact figcaption, .case-flow-plate figcaption, .case-map-plate figcaption {
  min-height: 48px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--case-line);
  color: var(--case-muted);
  font-size: 14px;
  line-height: 1.5;
}
.case-hero-artifact figcaption { margin-top: 16px; }
.case-facts {
  width: min(1600px, 94vw);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--case-line);
  border-bottom: 1px solid var(--case-line);
  background: transparent;
}
.case-facts div { min-height: 164px; padding: 32px 28px; border-left: 1px solid var(--case-line); }
.case-facts div:first-child { border-left: 0; }
.case-facts dt { margin-bottom: 42px; color: var(--case-muted); font-size: 14px; line-height: 1.4; }
.case-facts dd { margin: 0; font-size: clamp(17px, 1.35vw, 21px); font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.case-context {
  padding-block: 190px 205px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
}
.case-context-title { grid-column: 1 / span 5; align-self: start; position: sticky; top: 116px; }
.case-context h2, .case-logic h2, .case-component-heading h2, .case-map-proof h2, .case-solution-heading h2, .reflection-title h2 {
  margin: 0;
  font-size: clamp(48px, 5.3vw, 82px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.case-context-copy { grid-column: 7 / -1; }
.case-deck { margin: 0; color: #3f4a5b; font-size: clamp(23px, 2.2vw, 34px); line-height: 1.46; letter-spacing: -.028em; }
.case-tension { margin-top: 104px; border-top: 1px solid var(--case-line); }
.case-tension > div { padding: 26px 0 34px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; border-bottom: 1px solid var(--case-line); }
.case-tension h3 { margin: 0; font-size: 15px; line-height: 1.5; }
.case-tension p { margin: 0; color: var(--case-muted); font-size: 15px; line-height: 1.7; }
.case-context blockquote {
  margin: 118px 0 0;
  padding: 46px 0 0;
  border-top: 1px solid var(--case-ink);
  font-family: Georgia, serif;
  font-size: clamp(34px, 3.6vw, 58px);
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.case-complexity {
  min-height: 960px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--case-night);
  color: #f7f8fc;
}
#case-field-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .72; }
.case-complexity::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,23,40,.96) 0%, rgba(15,23,40,.72) 54%, rgba(15,23,40,.42) 100%); pointer-events: none; }
.case-complexity-inner {
  min-height: 960px;
  padding-block: 150px 110px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
  align-content: space-between;
}
.case-complexity-copy { grid-column: 1 / span 7; }
.case-complexity-copy h2 { margin: 0; font-size: clamp(56px, 6.8vw, 96px); line-height: .96; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.case-complexity-copy p { max-width: 670px; margin: 48px 0 0; color: #b8c2d0; font-size: 17px; line-height: 1.7; }
.case-complexity-scale { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.case-complexity-scale > div { grid-column: span 4; min-height: 215px; padding: 28px 26px 0; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 24px; border-left: 1px solid rgba(255,255,255,.22); }
.case-complexity-scale > div:first-child { border-left: 0; padding-left: 0; }
.case-complexity-scale strong { font-size: clamp(72px, 8vw, 120px); line-height: .8; font-weight: 500; letter-spacing: -.04em; }
.case-complexity-scale span { max-width: 20ch; padding-bottom: 6px; color: #b8c2d0; font-size: 14px; line-height: 1.55; }
.case-logic { padding-block: 205px 215px; }
.case-logic-heading, .case-component-heading, .case-map-proof-copy, .case-solution-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
  align-items: end;
}
.case-logic-heading h2, .case-component-heading h2, .case-map-proof-copy h2, .case-solution-heading h2 { grid-column: 1 / span 8; }
.case-logic-heading > p, .case-component-heading > p, .case-map-proof-copy > p, .case-solution-heading > p {
  grid-column: 9 / -1;
  margin: 0;
  color: var(--case-muted);
  font-size: 16px;
  line-height: 1.7;
}
.case-flow-plate, .case-map-plate { margin: 110px 0 0; }
.case-flow-plate img, .case-map-plate img { border-radius: 16px; background: #c5cad3; }
.case-flow-plate figcaption, .case-map-plate figcaption { margin-top: 18px; }
.case-prototype-note { width: 50%; margin: 96px 0 0 auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid var(--case-line); }
.case-prototype-note p { margin: 0; color: var(--case-muted); font-size: 15px; line-height: 1.72; }
.case-component-evidence { padding-block: 185px 200px; background: #fff; }
.case-component-grid { margin-top: 110px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; align-items: stretch; }
.case-component-grid figure { margin: 0; overflow: hidden; border-radius: 16px; background: var(--case-paper-deep); }
.case-component-grid img { height: 100%; object-fit: contain; }
.case-component-grid figcaption { padding: 16px 18px 18px; color: var(--case-muted); font-size: 14px; line-height: 1.45; }
.case-component-large { grid-column: span 5; min-height: 590px; padding: 24px; display: grid; grid-template-rows: 1fr auto; }
.case-component-stack { grid-column: span 3; display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.case-component-stack figure { min-height: 286px; padding: 28px 20px 0; display: grid; grid-template-rows: 1fr auto; }
.case-component-usage { grid-column: span 4; min-height: 590px; padding: 24px; display: grid; grid-template-rows: 1fr auto; }
.case-component-usage img { object-fit: cover; object-position: top; }
.case-motion { position: relative; min-height: 100svh; background: var(--case-night); color: #fff; }
.case-motion-pin {
  width: min(1600px, 94vw);
  min-height: 100svh;
  margin-inline: auto;
  padding: 112px 0 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
}
.case-motion-copy { grid-column: 1 / span 4; }
.case-motion-copy h2 { margin: 0; font-size: clamp(58px, 6.6vw, 96px); font-weight: 500; line-height: .92; letter-spacing: -.04em; }
.case-motion-copy > p { max-width: 470px; margin: 44px 0 0; color: #b7c0ce; font-size: 16px; line-height: 1.72; }
.case-motion-index { margin: 64px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.22); }
.case-motion-index li { min-height: 74px; padding: 16px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.16); color: #778298; transition: color .35s var(--ease); }
.case-motion-index li.is-active { color: #fff; }
.case-motion-index span { font-size: 15px; font-weight: 600; }
.case-motion-index small { color: inherit; font-size: 14px; }
.case-motion-media { grid-column: 6 / -1; aspect-ratio: 4 / 3; position: relative; }
.case-motion-panel { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: 1fr 54px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #0a1120; opacity: 0; visibility: hidden; clip-path: inset(9% 0 0 0 round 16px); }
.case-motion-panel.is-active { opacity: 1; visibility: visible; clip-path: inset(0 round 16px); }
.case-motion-panel video, .case-motion-panel > img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #0a1120; }
.case-motion-poster { display: none; }
.case-motion-panel figcaption { padding: 0 16px 0 20px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.14); color: #c3ccda; font-size: 14px; }
.case-motion-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .25s, color .25s; }
.case-motion-toggle:hover { background: #a78bfa; color: #080c14; }
.case-map-proof { padding-block: 205px 220px; }
.case-map-plate { margin-top: 110px; }
.case-solution-detail { padding-block: 185px 190px; background: #fff; }
.case-solution-lines { margin-top: 112px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--case-line); }
.case-solution-lines article { min-height: 300px; padding: 34px 34px 0; border-left: 1px solid var(--case-line); }
.case-solution-lines article:first-child { padding-left: 0; border-left: 0; }
.case-solution-lines h3 { max-width: 12ch; margin: 0; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.06; letter-spacing: -.035em; }
.case-solution-lines p { max-width: 42ch; margin: 72px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.68; }
.results-section { padding: 170px 0 125px; background: var(--case-night); color: #fff; }
.results-heading { display: block; }
.results-heading h2 { max-width: 1100px; margin: 0; font-size: clamp(64px, 7.4vw, 96px); font-weight: 500; line-height: .92; letter-spacing: -.04em; }
.results-grid { margin-top: 136px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.results-grid > div { min-height: 310px; padding: 34px 34px 0; border-right: 1px solid rgba(255,255,255,.22); }
.results-grid > div:first-child { padding-left: 0; }
.results-grid > div:last-child { border-right: 0; }
.results-grid strong { display: block; font-size: clamp(76px, 8.5vw, 128px); font-weight: 500; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.results-grid p { max-width: 25ch; margin: 78px 0 0; color: #b7c0ce; font-size: 15px; line-height: 1.6; }
.results-note { max-width: 650px; margin: 94px 0 0 auto; color: #b7c0ce; font-size: 15px; line-height: 1.72; }
.reflection-section { padding-block: 190px 205px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px; }
.reflection-title { grid-column: 1 / span 7; }
.reflection-copy { grid-column: 9 / -1; align-self: end; color: var(--case-muted); font-size: 16px; line-height: 1.72; }
.reflection-copy p { margin: 0 0 24px; }
.next-project { padding: 48px 3vw 64px; background: #c6f1f8; color: var(--case-ink); }
.next-project p { margin: 0; font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: normal; }
.next-project a { margin-top: 40px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(16,24,39,.24); }
.next-project a span { font-size: clamp(96px, 16vw, 240px); line-height: .82; letter-spacing: -.04em; }
.next-project a i { font-size: 60px; font-style: normal; transform: none; transition: color .3s; }
.next-project a:hover i { color: #5b3be0; transform: none; }

@media (min-width: 901px) and (max-width: 1800px) {
  .hero-video video { filter: blur(2px); transform: scale(1.01); }
}

@media (min-width: 901px) and (max-width: 1500px) {
  .hero-video { width: 100%; }
  .hero-video video { object-position: 58% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.32) 12%, rgba(0,0,0,.76) 27%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.32) 12%, rgba(0,0,0,.76) 27%, #000 42%); }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .manifesto-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 6vw; align-items: center; }
  .manifesto-statement { font-size: clamp(42px, 5vw, 58px); }
}

@media (max-width: 900px) {
  .site-header { height: 62px; top: 10px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .brand { width: 44px; min-height: 40px; }
  .brand img { width: 28px; }
  .desktop-nav { display: none; }
  .schedule-long { display: none; }
  .schedule-short { display: inline; }
  .availability { min-height: 40px; padding-inline: 16px; }
  .menu-toggle { display: grid; width: 40px; height: 40px; }
  .mobile-nav { display: flex; }
  .hero { padding-top: 112px; }
  .hero-video { top: 0; width: 100%; height: 40vh; opacity: .74; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.64) 10%, #000 24%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.64) 10%, #000 24%, #000 68%, transparent 100%); }
  .hero-video video { top: -5%; height: 132%; object-position: 54% 0; filter: none; transform: none; -webkit-mask-image: none; mask-image: none; }
  .display-title { font-size: clamp(58px, 13vw, 112px); line-height: .98; }
  .display-title .title-row.indent { padding-left: 0; }
  .hero-bottom { width: 100%; justify-content: flex-start; }
  .hero-summary { width: 100%; }
  .hero-summary > p { width: 100%; max-width: none; text-align: left; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-grid { gap: 0; }
  .profile-copy { max-width: 720px; margin: 54px 0 0; text-align: left; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { border-right: 0; }
  .stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .work-intro { grid-template-columns: 1fr; gap: 36px; }
  .work-intro > p { max-width: 620px; }
  .work-card, .work-outro { min-height: 620px; }
  .work-media { min-height: 360px; }
  .work-card-copy { grid-template-columns: 1fr; }
  .work-card-copy > .mono { max-width: none; text-align: left; }
  .process-pin { min-height: 0; padding: 18px 0 0; grid-template-columns: 1fr; gap: 64px; }
  .process-thesis { max-width: 10ch; font-size: clamp(58px, 9vw, 78px); }
  .process-narrative > p { max-width: 560px; margin-top: 42px; }
  .process-instrument { min-height: 0; overflow: visible; background: #11120f; }
  .process-panels { position: static; }
  .process-panel, .process-panel.is-current { min-height: 720px; margin-bottom: 14px; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(310px, 1fr); overflow: hidden; border-radius: var(--surface-radius); opacity: 1; visibility: visible; }
  .process-panel-copy { min-height: 360px; }
  .process-panel h4 { margin: 56px 0 24px; }
  .process-output { margin-top: 48px; }
  .process-panel figure { min-height: 330px; margin: 0 18px 18px; }
  .process-rail { display: none; }
  .case-lead { margin-left: 0; }
  .prototype-showcase { grid-template-columns: 1fr; }
  .prototype-image { min-height: 530px; }
  .solution-heading { grid-template-columns: 1fr; }
  .solution-cards { grid-template-columns: 1fr; }
  .solution-cards article { min-height: 430px; }
  .mini-ui { max-width: 420px; width: 100%; }
}

@media (min-width: 621px) and (max-width: 1800px) {
  .hero-video { left: 50%; right: auto; width: 100%; transform: translateX(-50%); }
  .hero-video video { object-position: 50% 0; }
  .display-title { text-align: center; }
  .display-title .title-row.indent { padding-left: 0; }
  .hero-bottom { width: 100%; justify-content: center; margin-top: clamp(64px, 7vh, 82px); }
  .hero-summary { width: min(390px, 100%); display: block; text-align: center; }
  .hero-summary > p { text-align: center; }
  .hero-details { margin-bottom: 12px; }
}

@media (max-width: 620px) {
  :root { --surface-radius: 20px; --media-radius: 14px; }
  .case-header > .mono { display: none; }
  .hero-copy { margin-top: auto; margin-bottom: 1vh; }
  .display-title { font-size: 15.5vw; line-height: 1; text-align: left; }
  .hero-bottom { margin-top: 50px; }
  .hero-summary { display: block; }
  .hero-summary > p { max-width: none; }
  .hero-details { margin-bottom: 14px; white-space: normal; }
  .hero-video { top: 0; width: 100%; height: 48vh; opacity: .76; clip-path: none; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.64) 10%, #000 24%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.64) 10%, #000 24%, #000 74%, transparent 100%); }
  .hero-video video { top: -5%; height: 128%; object-position: 55% 0; }
  .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 55%, rgba(255,255,255,.82) 100%); }
  .hero-grid { background-size: 48px 48px; opacity: .22; }
  .manifesto { padding-top: 0; padding-bottom: 90px; }
  .process-section { padding-top: 120px; padding-bottom: 90px; }
  .section-label { padding-top: 32px; margin-bottom: 54px; }
  .chapter-title { font-size: clamp(23px, 6.4vw, 26px); }
  .chapter-title span::after { margin-top: 15px; }
  .manifesto-statement { font-size: 34px; }
  .profile-copy { margin: 46px 0 0; }
  .stats { margin-top: 68px; }
  .stats > div { min-height: 150px; padding-top: 28px; padding-left: 0 !important; }
  .stats > div:nth-child(even) { padding-left: 15px !important; }
  .stats strong { font-size: 44px; }
  .work-section { padding-top: 54px; }
  .work-section .section-label { margin-bottom: 54px; }
  .work-intro { margin-bottom: 72px; }
  .work-intro h3 { font-size: clamp(44px, 12vw, 66px); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card, .work-outro { grid-column: 1; min-height: 0; }
  .work-card { padding: 10px; }
  .work-card-top { min-height: 56px; padding-inline: 8px; }
  .work-card-top > .mono:last-child { display: none; }
  .work-media { min-height: 0; aspect-ratio: 1 / 1; }
  .work-card-miportal .work-media, .work-card-gfh .work-media { aspect-ratio: 4 / 3; }
  .work-card-copy { min-height: 170px; padding: 24px 8px 12px; gap: 20px; }
  .work-card-copy h3 { font-size: clamp(42px, 13vw, 58px); }
  .work-card-copy p { max-width: 92%; }
  .work-outro { min-height: 590px; padding: 30px 20px; }
  .work-outro h3 { font-size: clamp(52px, 16vw, 78px); }
  .process-pin { gap: 54px; }
  .process-thesis { max-width: 9.5ch; font-size: clamp(51px, 15vw, 64px); }
  .process-narrative > p { margin-top: 34px; font-size: 15px; }
  .process-instrument { margin-inline: -3vw; }
  .process-panel, .process-panel.is-current { min-height: 690px; grid-template-rows: auto 300px; }
  .process-panel-copy { min-height: 390px; padding: 32px 6vw 38px; }
  .process-panel h4 { margin: 48px 0 22px; font-size: clamp(40px, 12vw, 54px); }
  .process-panel figure { min-height: 0; margin: 0; }
  .process-panel figcaption { right: 10px; bottom: 10px; }
  .contact-section { min-height: 0; padding: 0; }
  .site-footer { padding: 44px 24px 18px; }
  .footer-intro h2 { font-size: clamp(44px, 13vw, 66px); }
  .footer-intro h2 { white-space: normal; }
  .footer-details { margin-top: 58px; grid-template-columns: 1fr; align-items: start; gap: 38px; }
  .footer-details nav { flex-wrap: wrap; gap: 18px 26px; }
  .footer-bottom { grid-template-columns: 1fr; align-items: end; }
  .footer-socials { grid-column: 1; grid-row: 1; justify-self: start; justify-content: flex-start; margin-bottom: 12px; }
  .case-header .back-link { justify-self: end; }
  .case-hero { padding-top: 116px; }.case-hero h1 { margin-top: 11vh; font-size: 16vw; }
  .case-overline span:last-child { display: none; }
  .case-lead { grid-template-columns: 1fr; margin: 0 0 40px; }.case-lead a { width: max-content; }
  .case-hero-image { height: 120vw; max-height: none; }.float-label { display: none; }
  .case-facts { grid-template-columns: 1fr 1fr; padding-top: 48px; padding-bottom: 64px; }.case-facts div { min-height: 118px; }
  .case-narrative { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 95px; }.case-aside, .case-spacer { display: none; }
  .case-chapter h2 { font-size: 46px; }.large-copy { font-size: 21px; }
  .tension-grid { grid-template-columns: 1fr; }
  .case-wide-media { margin-bottom: 60px; }.case-wide-media img { height: 70vw; object-fit: cover; object-position: left; }.case-wide-media figcaption span:last-child { display: none; }
  .prototype-showcase { margin: 20px 3vw 90px; min-height: 0; }.prototype-copy { padding: 48px 25px; }.prototype-image { min-height: 360px; }.prototype-image img { object-fit: contain; }
  .solution-section, .results-section { padding-top: 90px; padding-bottom: 80px; }
  .solution-cards { margin-top: 60px; }
  .results-heading { grid-template-columns: 1fr; gap: 30px; }.results-heading h2 { font-size: 18vw; }
  .results-grid { grid-template-columns: 1fr; margin-top: 80px; }.results-grid > div { min-height: 180px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); padding-left: 0; }
  .reflection-section { grid-template-columns: 1fr; padding-top: 90px; padding-bottom: 90px; }.reflection-title h2 { font-size: 45px; }
  .next-project a span { font-size: 30vw; }.next-project a i { font-size: 36px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .case-hero { gap: 20px; }
  .case-hero-copy { grid-column: 1 / span 7; }
  .case-hero-artifact { grid-column: 8 / -1; }
  .case-hero h1 { font-size: clamp(56px, 6.8vw, 78px); }
  .case-motion-copy { grid-column: 1 / span 4; }
  .case-motion-media { grid-column: 5 / -1; }
  .case-motion-index small { display: none; }
}

@media (max-width: 900px) {
  .case-shell, .case-hero, .case-facts, .case-motion-pin { width: calc(100% - 40px); }
  .case-header { left: 20px; right: 20px; }
  .case-main { overflow-x: hidden; }
  .case-hero {
    min-height: auto;
    padding: 128px 0 78px;
    grid-template-columns: 1fr;
    gap: 70px;
  }
  .case-hero-copy, .case-hero-artifact { grid-column: 1; }
  .case-hero h1 { max-width: 860px; margin: 0; font-size: clamp(54px, 10vw, 78px); line-height: .96; }
  .case-hero-copy > p { max-width: 650px; margin-top: 42px; }
  .case-hero-artifact { width: min(720px, 100%); justify-self: end; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-facts div { min-height: 144px; padding: 28px 22px; border-bottom: 1px solid var(--case-line); }
  .case-facts div:nth-child(odd) { border-left: 0; }
  .case-facts div:nth-last-child(-n+2) { border-bottom: 0; }
  .case-facts dt { margin-bottom: 30px; }
  .case-context { padding-block: 128px 140px; grid-template-columns: 1fr; gap: 58px; }
  .case-context-title, .case-context-copy { grid-column: 1; }
  .case-context-title { position: static; }
  .case-context h2, .case-logic h2, .case-component-heading h2, .case-map-proof h2, .case-solution-heading h2, .reflection-title h2 { font-size: clamp(46px, 8.8vw, 70px); }
  .case-deck { font-size: clamp(21px, 4vw, 29px); }
  .case-tension { margin-top: 72px; }
  .case-context blockquote { margin-top: 84px; }
  .case-complexity, .case-complexity-inner { min-height: 820px; }
  #case-field-canvas { display: none; }
  .case-complexity { background: radial-gradient(circle at 85% 25%, #283e63 0, transparent 42%), var(--case-night); }
  .case-complexity::after { background: linear-gradient(180deg, rgba(15,23,40,.62), rgba(15,23,40,.94)); }
  .case-complexity-inner { padding-block: 112px 82px; grid-template-columns: 1fr; gap: 96px; }
  .case-complexity-copy, .case-complexity-scale { grid-column: 1; }
  .case-complexity-copy h2 { font-size: clamp(52px, 10.5vw, 80px); }
  .case-complexity-scale { grid-template-columns: 1fr; }
  .case-complexity-scale > div { grid-column: 1; min-height: 135px; padding: 24px 0; grid-template-columns: minmax(110px, .45fr) 1fr; align-items: end; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .case-complexity-scale strong { font-size: clamp(68px, 14vw, 96px); }
  .case-logic { padding-block: 140px 150px; }
  .case-logic-heading, .case-component-heading, .case-map-proof-copy, .case-solution-heading { grid-template-columns: 1fr; gap: 34px; }
  .case-logic-heading h2, .case-component-heading h2, .case-map-proof-copy h2, .case-solution-heading h2,
  .case-logic-heading > p, .case-component-heading > p, .case-map-proof-copy > p, .case-solution-heading > p { grid-column: 1; }
  .case-flow-plate, .case-map-plate { margin-top: 74px; }
  .case-prototype-note { width: 100%; margin-top: 68px; }
  .case-component-evidence { padding-block: 132px 142px; }
  .case-component-grid { margin-top: 76px; grid-template-columns: 1fr; }
  .case-component-large, .case-component-stack, .case-component-usage { grid-column: 1; }
  .case-component-large, .case-component-usage { min-height: 520px; }
  .case-component-stack { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .case-component-stack figure { min-height: 260px; }
  .case-motion { min-height: 0; padding-block: 126px 136px; }
  .case-motion-pin { min-height: 0; padding: 0; grid-template-columns: 1fr; gap: 76px; }
  .case-motion-copy, .case-motion-media { grid-column: 1; }
  .case-motion-copy h2 { font-size: clamp(54px, 10.5vw, 80px); }
  .case-motion-index { display: none; }
  .case-motion-media { aspect-ratio: auto; display: grid; gap: 42px; }
  .case-motion-panel, .case-motion-panel.is-active { position: relative; inset: auto; aspect-ratio: 4 / 3; opacity: 1; visibility: visible; clip-path: inset(0 round 16px); }
  .case-map-proof { padding-block: 142px 150px; }
  .case-solution-detail { padding-block: 132px 140px; }
  .case-solution-lines { margin-top: 78px; grid-template-columns: 1fr; }
  .case-solution-lines article { min-height: 0; padding: 30px 0 44px; border-left: 0; border-bottom: 1px solid var(--case-line); }
  .case-solution-lines p { margin-top: 28px; }
  .results-section { padding-block: 126px 104px; }
  .results-heading h2 { font-size: clamp(58px, 11vw, 82px); }
  .results-grid { margin-top: 90px; grid-template-columns: 1fr; }
  .results-grid > div { min-height: 210px; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: minmax(160px, .6fr) 1fr; align-items: end; }
  .results-grid p { margin: 0 0 10px; }
  .results-note { margin-top: 72px; }
  .reflection-section { padding-block: 132px 145px; grid-template-columns: 1fr; gap: 64px; }
  .reflection-title, .reflection-copy { grid-column: 1; }
  .reflection-copy { max-width: 620px; }
}

@media (max-width: 620px) {
  .case-shell, .case-hero, .case-facts, .case-motion-pin { width: calc(100% - 32px); }
  .case-header { left: 12px; right: 12px; padding-inline: 14px; }
  .case-header .back-link span { font-size: 14px; }
  .case-hero { padding: 112px 0 62px; gap: 50px; }
  .case-hero h1 { margin: 0; font-size: clamp(43px, 12.2vw, 54px); line-height: .98; letter-spacing: -.04em; }
  .case-hero-copy > p { margin-top: 34px; font-size: 16px; line-height: 1.58; }
  .case-hero-artifact { width: 100%; }
  .case-hero-artifact figcaption, .case-flow-plate figcaption, .case-map-plate figcaption { min-height: 44px; }
  .case-hero-artifact figcaption span:last-child, .case-flow-plate figcaption span:last-child, .case-map-plate figcaption span:last-child { display: none; }
  .case-facts div { min-height: 132px; padding: 24px 14px; }
  .case-facts dt { margin-bottom: 24px; }
  .case-facts dd { font-size: 16px; }
  .case-context { padding-block: 108px 116px; gap: 46px; }
  .case-context h2, .case-logic h2, .case-component-heading h2, .case-map-proof h2, .case-solution-heading h2, .reflection-title h2 { font-size: 45px; }
  .case-deck { font-size: 21px; }
  .case-tension { margin-top: 58px; }
  .case-tension > div { padding-block: 22px 28px; grid-template-columns: 1fr; gap: 10px; }
  .case-context blockquote { margin-top: 68px; padding-top: 32px; font-size: 34px; }
  .case-complexity, .case-complexity-inner { min-height: 760px; }
  .case-complexity-inner { padding-block: 92px 64px; gap: 74px; }
  .case-complexity-copy h2 { font-size: 48px; }
  .case-complexity-copy p { margin-top: 34px; font-size: 15px; }
  .case-complexity-scale > div { min-height: 116px; grid-template-columns: 100px 1fr; }
  .case-complexity-scale strong { font-size: 66px; }
  .case-logic { padding-block: 110px 116px; }
  .case-flow-plate { margin-top: 56px; }
  .case-flow-plate img, .case-map-plate img { border-radius: 12px; }
  .case-prototype-note { margin-top: 52px; grid-template-columns: 1fr; gap: 20px; }
  .case-component-evidence { padding-block: 104px 112px; }
  .case-component-grid { margin-top: 58px; }
  .case-component-grid figure { border-radius: 12px; }
  .case-component-large, .case-component-usage { min-height: 410px; padding: 16px; }
  .case-component-stack { grid-template-columns: 1fr; }
  .case-component-stack figure { min-height: 230px; }
  .case-motion { padding-block: 104px 112px; }
  .case-motion-pin { gap: 58px; }
  .case-motion-copy h2 { font-size: 52px; }
  .case-motion-copy > p { margin-top: 32px; font-size: 15px; }
  .case-motion-media { gap: 28px; }
  .case-motion-panel, .case-motion-panel.is-active { border-radius: 12px; grid-template-rows: 1fr 48px; }
  .case-motion-panel figcaption { padding-inline: 14px 10px; }
  .case-map-proof { padding-block: 110px 116px; }
  .case-map-plate { margin-top: 56px; }
  .case-solution-detail { padding-block: 104px 110px; }
  .case-solution-lines { margin-top: 58px; }
  .case-solution-lines h3 { font-size: 31px; }
  .results-section { padding-block: 104px 86px; }
  .results-heading h2 { font-size: 52px; }
  .results-grid { margin-top: 72px; }
  .results-grid > div { min-height: 184px; grid-template-columns: 1fr; align-content: center; gap: 26px; }
  .results-grid strong { font-size: 64px; }
  .results-grid p { margin: 0; font-size: 14px; }
  .results-note { margin-top: 58px; font-size: 14px; }
  .reflection-section { padding-block: 104px 112px; gap: 48px; }
  .next-project { padding: 38px 16px 46px; }
  .next-project a { margin-top: 28px; }
  .next-project a span { font-size: 31vw; }
  .next-project a i { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .brand-loader .site-loader::before { opacity: .2; filter: none; transform: none; }
  .brand-loader .loader-route-track::after { display: none; }
  .work-preview-video { display: none; }
  .reveal { opacity: 1; transform: none; }
  .process-section { padding-bottom: 110px; }
  .process-pin { min-height: 0; padding-top: 18px; position: static; top: auto; grid-template-columns: 1fr; gap: 64px; }
  .process-instrument { min-height: 0; overflow: visible; }
  .process-panels { position: static; }
  .process-word { opacity: 1; }
  .process-panel, .process-panel.is-current { min-height: 680px; position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; border-bottom: 1px solid rgba(242,240,232,.18); }
  .process-rail { display: none; }
  #case-field-canvas, .case-motion-video { display: none; }
  .case-motion { min-height: 0; padding-block: 126px 136px; }
  .case-motion-pin { min-height: 0; padding: 0; align-items: start; }
  .case-motion-index { display: none; }
  .case-motion-media { aspect-ratio: auto; display: grid; gap: 36px; }
  .case-motion-panel, .case-motion-panel.is-active { position: relative; inset: auto; aspect-ratio: 4 / 3; opacity: 1; visibility: visible; clip-path: inset(0 round 16px); }
  .case-motion-poster { display: block; }
  .case-motion-toggle { display: none; }
}

/* MiPortal dossier atlas revision */
.case-body {
  --case-paper: #ffffff;
  --case-paper-deep: #e7ebf2;
  --case-ink: #0d1423;
  --case-muted: #586476;
  --case-line: #d4d9e2;
  --case-night: #0d1628;
  --case-cyan: #c9f4f8;
  --case-display-size: clamp(56px, 4.6vw, 84px);
  --case-display-leading: 1.09;
  --case-display-tracking: -.045em;
  --case-space-chapter: clamp(112px, 8vw, 156px);
  --case-space-section: clamp(82px, 6vw, 112px);
  --case-space-block: clamp(58px, 4.5vw, 84px);
  --case-space-compact: clamp(32px, 3vw, 48px);
  --case-shell-max: 1680px;
  --case-shell-gutter: max(4vw, calc((100vw - var(--case-shell-max)) / 2));
  --case-hero-right-gutter: max(2.4vw, 24px);
  background: var(--case-night);
}
.case-main { overflow-x: clip; }
.case-main .mono,
.case-main .case-flow-label,
.case-main .case-hero-meta dt,
.case-main .case-friction-map article > span {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -.01em;
  text-transform: none;
}
.case-shell { width: min(var(--case-shell-max), 92vw); }
.case-header {
  padding-inline: 10px 20px;
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
  gap: 13px;
  color: var(--case-ink);
  background: rgba(255,255,255,.94);
  border-color: rgba(13,20,35,.12);
}
.case-header-back {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13,20,35,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.74);
  color: var(--case-ink);
  font-size: 20px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.case-header-back:hover { border-color: #8b6cff; background: #a78bfa; color: #0d1423; }
.case-body .case-header-back:focus-visible { outline-color: var(--focus-ring); outline-offset: 2px; }
.case-header-logo { width: 119px; height: 28px; flex: 0 0 119px; display: block; object-fit: contain; transform: translateY(-2px); }
.case-hero {
  width: 100%;
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid var(--case-line);
  display: block;
  background: var(--case-paper);
}
.case-hero-cover {
  width: min(1920px, 100%);
  min-height: 100svh;
  margin-inline: auto;
  padding: 138px var(--case-hero-right-gutter) 0 var(--case-shell-gutter);
  display: grid;
  grid-template-columns: minmax(190px, 1.65fr) minmax(0, 4.55fr) minmax(500px, 5.8fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(36px, 2.4vw, 52px);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: var(--case-ink);
}
.case-hero-meta { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; position: relative; z-index: 1; }
.case-hero-meta dl { margin: 0; padding-right: 34px; border-right: 1px solid var(--case-line); }
.case-hero-meta dl div + div { margin-top: 30px; }
.case-hero-meta dt { margin-bottom: 8px; color: #39465a; font-size: 15px; line-height: 1.4; }
.case-hero-meta dd { margin: 0; color: #475266; font-size: clamp(16px, .95vw, 18px); line-height: 1.58; }
.case-hero-copy { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; padding-left: 0; position: relative; z-index: 1; }
.case-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: var(--case-display-size);
  font-weight: 500;
  line-height: var(--case-display-leading);
  letter-spacing: var(--case-display-tracking);
  text-wrap: balance;
  white-space: nowrap;
}
.case-hero-copy > p { max-width: 420px; margin: 40px 0 0; color: #485467; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.58; }
.case-hero-device {
  width: 100%;
  max-width: 900px;
  height: auto;
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: end;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: visible;
  background: transparent;
}
.case-hero-device img { width: 100%; max-width: none; height: auto; max-height: none; margin: 0; object-fit: contain; object-position: right bottom; filter: none; }
.case-hero-reel { --case-reel-field: #11182a; --case-reel-bottom-space: clamp(16px, 2.4vw, 40px); width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0 clamp(16px, 2.4vw, 40px) var(--case-reel-bottom-space); overflow: hidden; display: grid; place-items: start center; background: var(--case-reel-field); color: #f7f8fc; }
.case-hero-reel-stage { --case-reel-feather: clamp(24px, 5.5vw, 88px); --case-reel-bottom-feather: clamp(30px, 4vw, 64px); width: min(1600px, 100%); height: auto; aspect-ratio: 4 / 3; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--case-reel-field); }
.case-hero-reel-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent calc(100% - var(--case-reel-bottom-feather)), var(--case-reel-field) 100%), linear-gradient(90deg, var(--case-reel-field) 0, transparent var(--case-reel-feather), transparent calc(100% - var(--case-reel-feather)), var(--case-reel-field) 100%); }
.case-hero-reel-video,
.case-hero-reel-poster { width: 100%; height: 100%; margin: 0; display: block; object-fit: contain; background: var(--case-reel-field); }
.case-hero-reel-poster { display: none; }
.case-problem-evidence { min-width: 0; margin-top: var(--case-space-section); padding-top: var(--case-space-compact); border-top: 1px solid var(--case-line); }
.case-problem-evidence-intro { margin-bottom: var(--case-space-block); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.case-problem-evidence-intro h3 { grid-column: 1 / span 6; max-width: 650px; margin: 0; font-size: clamp(32px, 3vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.case-problem-evidence-intro p { grid-column: 8 / -1; max-width: 620px; margin: 4px 0 0; color: var(--case-muted); font-size: 16px; line-height: 1.68; }
.case-hero-evidence-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.case-problem-evidence figure { margin: 0; min-width: 0; }
.case-problem-evidence .case-hero-evidence-product { grid-column: 1 / span 6; }
.case-problem-evidence .case-hero-evidence-flow { grid-column: 7 / -1; }
.case-hero-artifact-well {
  aspect-ratio: 1.42 / 1;
  padding: clamp(22px, 2.2vw, 38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(12px, 1.25vw, 22px);
  overflow: hidden;
  border-radius: 14px;
  background: #e9edf4;
}
.case-hero-product-run { background: #e7ebf2; }
.case-hero-flow-run { background: #f0e8f4; }
.case-hero-screen { height: 100%; min-width: 0; overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 14px 28px rgba(13,20,35,.12); }
.case-hero-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case-hero-flow-run .case-hero-screen { box-shadow: 0 16px 30px rgba(0,0,0,.26); }
.case-problem-evidence figcaption { min-height: 78px; padding: 0 0 18px; display: grid; align-content: start; gap: 5px; color: var(--case-muted); font-size: 14px; line-height: 1.5; }
.case-problem-evidence figcaption span:first-child { color: var(--case-ink); font-weight: 650; }

.case-problem { padding: var(--case-space-chapter) 0 calc(var(--case-space-chapter) + 8px); background: var(--case-paper); color: var(--case-ink); }
.case-problem-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: end; }
.case-problem-intro h2 { grid-column: 1 / span 8; max-width: 1080px; margin: 0; font-size: var(--case-display-size); font-weight: 500; line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); text-wrap: balance; }
.case-problem-intro > p { grid-column: 9 / -1; max-width: 560px; margin: 0 0 8px; color: #3e4a5c; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.62; }
.case-problem-story { margin-top: var(--case-space-section); display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); overflow: hidden; border-top: 1px solid var(--case-line); border-radius: 0 var(--surface-radius) var(--surface-radius) 0; }
.case-friction-path { padding: var(--case-space-compact) 5vw var(--case-space-compact) 0; }
.case-friction-lead { max-width: 520px; margin: 0 0 42px; color: #3e4a5c; font-size: clamp(22px, 2vw, 31px); line-height: 1.35; letter-spacing: -.025em; }
.case-friction-path ol { margin: 0; padding: 0; list-style: none; }
.case-friction-path li { padding: 28px 0 30px; display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 4fr); gap: 28px; border-top: 1px solid var(--case-line); }
.case-friction-path li > span { color: #5b3be0; font-size: 15px; font-weight: 650; line-height: 1.45; }
.case-friction-path h3 { max-width: 660px; margin: 0; font-size: clamp(27px, 2.35vw, 39px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.case-friction-path li p { max-width: 58ch; margin: 13px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.65; }
.case-support-consequence { min-height: 100%; padding: var(--case-space-compact) clamp(28px, 3.5vw, 56px); display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--case-line); background: var(--case-ink); color: #f8f9fc; }
.case-support-consequence p { max-width: 34ch; margin: 0; color: #c3cbd7; font-size: 15px; line-height: 1.65; }
.case-support-consequence strong { margin-top: 80px; font-size: clamp(52px, 5vw, 80px); font-weight: 500; line-height: .95; letter-spacing: -.04em; }
.case-design-mandate { margin-top: clamp(36px, 3.25vw, 56px); padding: clamp(36px, 3.8vw, 58px); display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(42px, 5vw, 82px); align-items: center; border-radius: var(--surface-radius); background: #edf0f5; }
.case-design-mandate-thesis { max-width: 14ch; margin: 0; font-size: clamp(27px, 2.35vw, 39px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.case-design-mandate ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.6vw, 58px); list-style: none; }
.case-design-mandate li { min-width: 0; padding: 2px 0 2px clamp(16px, 1.45vw, 24px); border-left: 1px solid rgba(13, 20, 35, .24); }
.case-design-mandate strong { display: block; color: var(--case-ink); font-size: 17px; font-weight: 700; line-height: 1.35; }
.case-design-mandate span { max-width: 25ch; margin-top: 13px; display: block; color: var(--case-muted); font-size: 14px; line-height: 1.58; }

.case-design-mandate + .case-problem-evidence { margin-top: var(--case-space-block); padding-top: 0; border-top: 0; }

.case-product-landscape { min-width: 0; margin-top: var(--case-space-section); }
.case-product-landscape-intro { margin-bottom: var(--case-space-block); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.case-product-landscape-intro h3 { grid-column: 1 / span 6; max-width: 650px; margin: 0; font-size: clamp(32px, 3vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.case-product-landscape-intro p { grid-column: 8 / -1; max-width: 620px; margin: 4px 0 0; color: var(--case-muted); font-size: 16px; line-height: 1.68; }
.case-destination-collection { min-width: 0; margin: 0; }
.case-destination-grid {
  --destination-grid-padding: clamp(22px, 2.7vw, 44px);
  --destination-grid-bottom: 0px;
  --destination-ghost-depth: clamp(40px, 3vw, 56px);
  --destination-soft-overlap: clamp(60px, 4.1vw, 78px);
  --destination-strong-overlap: 0px;
  padding: var(--destination-grid-padding);
  padding-bottom: var(--destination-grid-bottom);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.45vw, 24px);
  align-items: start;
  overflow: hidden;
  border-radius: var(--surface-radius);
  background: #e7ebf2;
}
.case-destination-grid::before,
.case-destination-grid::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.case-destination-grid::before {
  height: calc(var(--destination-ghost-depth) + var(--destination-grid-bottom) + var(--destination-soft-overlap));
  z-index: 3;
  border-radius: var(--surface-radius);
  background: rgba(231,235,242,.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.88) 82%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.88) 82%, #000 100%);
}
.case-destination-grid::after {
  height: calc(var(--destination-ghost-depth) + var(--destination-grid-bottom) + var(--destination-strong-overlap));
  z-index: 4;
  background: linear-gradient(to bottom, rgba(231,235,242,0) 0%, rgba(231,235,242,.16) 52%, rgba(231,235,242,.86) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.82) 75%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.82) 75%, #000 100%);
}
.case-destination-row { display: contents; }
.case-destination-item { min-width: 0; }
.case-destination-item > span { margin-bottom: 15px; display: block; color: var(--case-ink); font-size: 15px; font-weight: 650; line-height: 1.4; }
.case-destination-stage {
  min-width: 0;
  padding-bottom: var(--destination-ghost-depth);
  position: relative;
  isolation: isolate;
}
.case-destination-screen { min-width: 0; aspect-ratio: 9 / 16; position: relative; z-index: 1; overflow: visible; isolation: isolate; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 10px 22px rgba(13,20,35,.08); }
.case-destination-screen img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1; display: block; border-radius: 14px 14px 0 0; }

.case-complexity { min-height: clamp(760px, 82svh, 900px); }
.case-complexity-inner { min-height: clamp(760px, 82svh, 900px); padding-block: var(--case-space-chapter) var(--case-space-section); }
.case-complexity-copy h2 { max-width: 1050px; font-size: var(--case-display-size); line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); }
.case-complexity-copy p { margin-top: var(--case-space-compact); }

.case-system { padding: var(--case-space-chapter) 0; background: var(--case-paper); color: var(--case-ink); }
.case-system-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: end; }
.case-system-heading h2 { grid-column: 1 / span 8; max-width: 1080px; margin: 0; font-size: var(--case-display-size); font-weight: 500; line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); text-wrap: balance; }
.case-system-heading > p { grid-column: 9 / -1; max-width: 560px; margin: 0 0 8px; color: var(--case-muted); font-size: 16px; line-height: 1.68; }
.system-bento { margin-top: var(--case-space-section); display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "utility context" "utility persistent"; gap: clamp(18px, 1.5vw, 24px); align-items: stretch; }
.system-card { min-width: 0; position: relative; border-radius: var(--surface-radius); }
.system-card h3 { margin: 0; color: inherit; font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.system-card header > p { max-width: 38ch; margin: 11px 0 0; color: var(--case-muted); font-size: 14px; line-height: 1.58; }
.utility-demo { --utility-state-rgb: 0, 119, 204; --utility-state-text: #005ea8; --utility-smart-duration: 280ms; --utility-smart-ease: cubic-bezier(.45, 0, .55, 1); --utility-snapshot-duration: 170ms; --utility-snapshot-ease: cubic-bezier(.23, 1, .32, 1); grid-area: utility; padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; background: radial-gradient(64% 54% at 88% 58%, rgba(var(--utility-state-rgb), .075), transparent 72%), #e5ebf2; color: var(--case-ink); }
.utility-demo[data-active-utility="electric"] { --utility-state-rgb: 0, 122, 78; --utility-state-text: #006241; }
.utility-demo[data-active-utility="gas"] { --utility-state-rgb: 201, 54, 39; --utility-state-text: #a92b20; }
.utility-demo__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(126px, .28fr); gap: clamp(28px, 3vw, 48px); align-items: start; }
.utility-demo__header h3 { width: max-content; max-width: 100%; font-size: clamp(34px, 3vw, 48px); }
.utility-demo__header h3 span { display: block; white-space: nowrap; }
.utility-demo__header > div > p { max-width: 46ch; margin: 16px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.62; }
.utility-demo__coverage { margin: 0; display: grid; justify-self: end; justify-items: end; gap: 12px; text-align: right; }
.utility-demo__coverage strong { display: block; font-size: clamp(68px, 5.6vw, 94px); font-weight: 500; line-height: .78; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.utility-demo__coverage span { max-width: 13ch; display: block; color: var(--case-muted); font-size: 14px; line-height: 1.4; }
.utility-demo__body { min-height: 0; margin-top: clamp(38px, 4vw, 62px); flex: 1; display: grid; grid-template-columns: minmax(190px, .62fr) minmax(360px, 1.38fr); grid-template-rows: auto 1fr auto; grid-template-areas: "label component" "logic component" "dimensions component"; column-gap: clamp(26px, 3vw, 48px); row-gap: clamp(22px, 2.2vw, 34px); align-items: start; }
.utility-demo__label { grid-area: label; align-self: start; padding-top: 4px; }
.utility-demo__label span { display: block; color: #5b3be0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.utility-demo__label strong { margin-top: 12px; display: block; font-size: clamp(23px, 2vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; }
.utility-demo__label p { max-width: 23ch; margin: 12px 0 0; color: var(--case-muted); font-size: 14px; line-height: 1.55; }
.utility-demo__component { width: min(100%, 540px); aspect-ratio: 369 / 339; position: relative; grid-area: component; align-self: end; justify-self: end; overflow: visible; isolation: isolate; }
.utility-demo__component::after { content: ""; position: absolute; z-index: 2; top: 21.3%; right: 4.2%; left: 4.2%; height: 17.5%; background: #fff; pointer-events: none; }
.utility-panel { position: absolute; z-index: 1; inset: 0; overflow: hidden; clip-path: inset(1.18% 1.08% round 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--utility-snapshot-duration) var(--utility-snapshot-ease), visibility 0s linear var(--utility-snapshot-duration); }
.utility-panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.utility-panel img { width: 100%; height: auto; position: absolute; top: 0; left: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--utility-snapshot-duration) var(--utility-snapshot-ease), visibility 0s linear var(--utility-snapshot-duration); }
.utility-panel img.is-active { opacity: 1; visibility: visible; transition-delay: 30ms, 0s; }
#utility-panel-gas img { clip-path: inset(0 0 2px 0); }
.utility-chart-stage { position: absolute; z-index: 3; inset: 0; overflow: hidden; clip-path: inset(63.13% 1.08% 16.52% 1.08%); background: #fff; pointer-events: none; }
.utility-chart-layer { width: 100%; height: auto; position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none; user-select: none; }
.utility-chart-layer--current { z-index: 1; opacity: 1; visibility: visible; }
.utility-chart-layer--next.is-visible { opacity: 1; visibility: visible; }
.utility-chart-stage.is-animating .utility-chart-layer { will-change: clip-path, mask-position, opacity; }
.utility-time-controls { height: max(44px, 13%); position: absolute; z-index: 4; top: 12.4%; right: 5.4%; left: 5.4%; display: flex; align-items: center; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.utility-time-button { width: max(44px, 13.38%); height: max(44px, 100%); padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; pointer-events: auto; cursor: pointer; touch-action: manipulation; transition: background-color 140ms ease-out, box-shadow 140ms ease-out; }
.utility-time-button[aria-disabled="true"] { cursor: default; }
.case-body .utility-time-button:focus-visible { outline-color: var(--focus-ring); outline-offset: 3px; }
.utility-tabs { position: absolute; z-index: 3; top: 22.6%; right: 5.4%; left: 5.4%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, .7vw, 11px); overflow: visible; }
.utility-tab { min-width: 0; min-height: 44px; height: clamp(44px, 4vw, 58px); padding: 6px clamp(6px, .9vw, 13px); border: 1px solid transparent; border-radius: 6px; background: #eef1f7; color: #596273; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.utility-tab[aria-selected="true"] { color: #fff; }
.utility-tab[data-utility="water"][aria-selected="true"] { background: #0077cc; }
.utility-tab[data-utility="electric"][aria-selected="true"] { background: #007a4e; }
.utility-tab[data-utility="gas"][aria-selected="true"] { background: #c93627; }
.case-body .utility-tab:focus-visible { outline-color: var(--focus-ring); outline-offset: 3px; }
.utility-tab.is-pointer-activated:focus-visible { outline: 0; }
.utility-demo__logic { grid-area: logic; align-self: center; display: grid; gap: clamp(18px, 1.8vw, 26px); }
.utility-demo__rule { min-width: 0; padding-top: 14px; border-top: 1px solid rgba(13,20,35,.14); }
.utility-demo__rule > span { display: block; color: var(--case-muted); font-size: 14px; font-weight: 700; line-height: 1.35; }
.utility-demo__rule > p { max-width: 27ch; margin: 8px 0 0; color: #2f3a4b; font-size: 14px; line-height: 1.5; }
.utility-demo__rule--adaptive { padding: 16px; border-top-color: transparent; border-radius: 12px; background: rgba(var(--utility-state-rgb), .065); transition: background-color 180ms var(--ease); }
.utility-demo__active-model { display: flex; align-items: baseline; gap: 9px; }
.utility-demo__active-model strong { color: var(--case-ink); font-size: 21px; font-weight: 650; line-height: 1.1; letter-spacing: -.025em; }
.utility-demo__active-model b { color: var(--utility-state-text); font-size: 14px; font-weight: 750; line-height: 1; }
.utility-demo__active-model.is-updating { animation: utility-model-settle 220ms var(--ease); }
@keyframes utility-model-settle {
  from { opacity: .28; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.utility-demo__dimensions { margin: 0; padding: clamp(18px, 1.8vw, 24px) 0 0; grid-area: dimensions; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; border-top: 1px solid rgba(13,20,35,.14); }
.utility-demo__dimensions div { min-width: 0; padding-inline: 0; }
.utility-demo__dimensions div:nth-child(even) { padding-inline-start: clamp(14px, 1.2vw, 20px); border-inline-start: 1px solid rgba(13,20,35,.14); }
.utility-demo__dimensions dt { font-size: 22px; font-weight: 700; line-height: 1.1; }
.utility-demo__dimensions dd { margin: 5px 0 0; color: var(--case-muted); font-size: 14px; line-height: 1.35; }
.utility-demo__status, .utility-time-current, .system-proof-caption { width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.account-context-proof, .persistent-state-proof { padding: clamp(24px, 2.2vw, 34px); display: flex; flex-direction: column; }
.account-context-proof { grid-area: context; overflow: hidden; isolation: isolate; background: radial-gradient(90% 76% at 100% 100%, rgba(37,201,222,.17) 0%, rgba(37,201,222,.07) 42%, transparent 74%), #12192b; color: #fff; }
.persistent-state-proof { grid-area: persistent; background: #ede9f2; color: var(--case-ink); }
.account-context-proof h3, .persistent-state-proof h3 { max-width: 16ch; font-size: clamp(25px, 2.1vw, 32px); }
.account-context-proof header > p { color: #bac5d8; }
.account-context-proof__media { min-width: 0; margin: auto 0 0; padding-top: clamp(24px, 2.4vw, 36px); position: relative; background: transparent; }
.account-context-proof__account { width: 100%; height: auto; display: block; }
.account-context-proof__bill { width: 100%; aspect-ratio: 393 / 117; position: relative; overflow: hidden; }
.account-context-proof__bill img { width: 100%; height: auto; position: absolute; inset-inline: 0; bottom: 0; display: block; }
.persistent-state-proof__media { min-width: 0; min-height: clamp(250px, 20vw, 330px); margin: auto 0 0; position: relative; overflow: hidden; }
.persistent-state-proof__artifact { position: absolute; overflow: hidden; border-radius: 10px; }
.persistent-state-proof__artifact img { width: 100%; height: auto; position: absolute; inset: 0; display: block; }
.persistent-state-proof__requests { width: 82%; aspect-ratio: 369 / 282; top: clamp(28px, 2vw, 40px); left: 0; }
.persistent-state-proof__alerts { width: 78%; aspect-ratio: 369 / 258; top: clamp(112px, 8vw, 145px); right: 0; }

@media (hover: hover) and (pointer: fine) {
  .utility-time-button:not([aria-disabled="true"]):hover { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(13,20,35,.16); }
  .utility-tab:not([aria-selected="true"]):hover { border-color: rgba(13,20,35,.2); background: #fff; color: var(--case-ink); }
}

@media (forced-colors: active) {
  .case-body .utility-tab:focus-visible { outline-color: Highlight; }
  .utility-tab[aria-selected="true"] { border-color: ButtonText; background: Highlight; color: HighlightText; }
}

.case-atlas { padding: var(--case-space-section) 0 var(--case-space-chapter); background: #edf0f5; color: var(--case-ink); }
.case-atlas-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: end; }
.case-atlas-heading h2 { grid-column: 1 / span 7; max-width: 820px; margin: 0; font-size: clamp(38px, 3.7vw, 58px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.case-atlas-heading > p:last-child { grid-column: 9 / -1; max-width: 560px; margin: 0 0 5px; color: var(--case-muted); font-size: 16px; line-height: 1.68; }
.case-atlas-routes { --route-row-h: 78px; --route-row-gap: 42px; --rail-y-payment: 46px; --rail-y-reporting: 20px; --route-violet: #5b3be0; --route-cyan-deep: #08697f; --route-ink: #394659; margin-top: var(--case-space-block); display: grid; grid-template-columns: minmax(150px, 225px) repeat(5, minmax(0, 1fr)); row-gap: var(--route-row-gap); align-items: start; }
.case-route-name { margin: 0; align-self: start; font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.case-route-name-payment { grid-column: 1; grid-row: 1; padding-top: calc(var(--rail-y-payment) - 9px); color: var(--route-violet); }
.case-route-name-reporting { grid-column: 1; grid-row: 2; padding-top: calc(var(--rail-y-reporting) - 9px); color: var(--route-cyan-deep); }
.case-route-steps { margin: 0; padding: 0; display: contents; }
.case-route-steps-payment { --rail-y: var(--rail-y-payment); }
.case-route-steps-reporting { --rail-y: var(--rail-y-reporting); }
.case-route-steps li { position: relative; height: var(--route-row-h); list-style: none; }
.case-route-steps-payment li { grid-row: 1; }
.case-route-steps-reporting li { grid-row: 2; }
.case-route-steps li:nth-child(1) { grid-column: 2; }
.case-route-steps li:nth-child(2) { grid-column: 3; }
.case-route-steps li:nth-child(3) { grid-column: 4; }
.case-route-steps li:nth-child(4) { grid-column: 5; }
.case-route-steps li:nth-child(5) { grid-column: 6; }
.case-route-steps li::before { content: ""; position: absolute; top: calc(var(--rail-y) - 4.5px); left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--route-color); box-shadow: 0 0 0 4px #edf0f5; opacity: 0; transform: translate(-50%, 0) scale(.4); transition: opacity .45s var(--ease), transform .55s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(200ms + var(--i) * 85ms); }
.case-route-steps-payment li { --route-color: var(--route-violet); }
.case-route-steps-reporting li { --route-color: var(--route-cyan-deep); }
.case-route-steps-payment .case-route-trigger { top: auto; bottom: calc(var(--route-row-h) - var(--rail-y) + 1px); align-items: flex-end; }
.case-route-steps-reporting .case-route-trigger { top: calc(var(--rail-y) + 5px); align-items: flex-start; }
.case-route-trigger { position: absolute; left: 2px; right: 2px; min-height: 44px; padding: 8px 6px; display: flex; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--route-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; opacity: 0; cursor: pointer; transform: translateY(7px); transition: color .18s ease, opacity .5s var(--ease), transform .55s cubic-bezier(.22, 1, .36, 1), background-color .18s ease; transition-delay: 0ms, calc(260ms + var(--i) * 85ms), calc(260ms + var(--i) * 85ms), 0ms; }
.case-route-trigger:disabled { cursor: default; }
.case-body .case-route-trigger:focus-visible { outline-color: var(--focus-ring); outline-offset: 2px; }
.case-route-discovery { position: absolute; z-index: 4; top: calc(var(--rail-y-payment) + 15px); left: 50%; min-height: 36px; padding: 8px 11px 8px 9px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; background: #101827; color: #f7f8fc; box-shadow: 0 10px 26px rgba(16, 24, 39, .16); font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 5px) scale(.98); transform-origin: 50% -6px; transition: visibility .12s, opacity .12s ease, transform .12s cubic-bezier(.16, 1, .3, 1); }
.case-route-discovery::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; border-radius: 2px; background: #101827; transform: translateX(-50%) rotate(45deg); }
.case-route-discovery i { color: #a78bfa; font-size: 16px; line-height: 1; }
.case-route-discovery.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); transition-duration: .22s; }
.case-route-rail { grid-column: 2 / -1; align-self: start; height: 2px; border-radius: 1px; background: var(--route-color); transform: scaleX(0); transform-origin: left center; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.case-route-rail-payment { grid-row: 1; margin-top: calc(var(--rail-y-payment) - 1px); --route-color: var(--route-violet); transition-delay: 80ms; }
.case-route-rail-reporting { grid-row: 2; margin-top: calc(var(--rail-y-reporting) - 1px); --route-color: var(--route-cyan-deep); transition-delay: 240ms; }
.case-atlas-routes.is-drawn .case-route-rail { transform: scaleX(1); }
.case-atlas-routes.is-drawn .case-route-steps li::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
.case-atlas-routes.is-drawn .case-route-trigger { opacity: 1; transform: translateY(0); }
.case-atlas-routes.is-interactive .case-route-steps li::before { transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease; }
.case-route-steps li.is-active::before { transform: translate(-50%, 0) scale(1.28); box-shadow: 0 0 0 4px #edf0f5, 0 0 0 7px var(--route-halo); }
.case-route-steps-payment li { --route-halo: rgba(91, 59, 224, .2); }
.case-route-steps-reporting li { --route-halo: rgba(8, 105, 127, .2); }
.case-route-junction { grid-column: 5; grid-row: 1 / span 2; position: relative; pointer-events: none; }
.case-route-junction::before { content: ""; position: absolute; top: var(--rail-y-payment); left: 50%; width: 2px; height: calc(var(--route-row-h) + var(--route-row-gap) + var(--rail-y-reporting) - var(--rail-y-payment)); margin-left: -1px; background: linear-gradient(to bottom, var(--route-violet), var(--route-cyan-deep)); transform: scaleY(0); transform-origin: top center; transition: transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: .72s; }
.case-route-junction::after { content: ""; position: absolute; top: calc(var(--rail-y-payment) + (var(--route-row-h) + var(--route-row-gap) + var(--rail-y-reporting) - var(--rail-y-payment)) / 2); left: 50%; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 0deg, var(--route-violet) 0 50%, var(--route-cyan-deep) 50% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 1.5px)); opacity: 0; transform: translate(-50%, -50%) scale(.72); transition: opacity .4s var(--ease), transform .55s cubic-bezier(.22, 1, .36, 1); transition-delay: .95s; }
.case-atlas-routes.is-drawn .case-route-junction::before { transform: scaleY(1); }
.case-atlas-routes.is-drawn .case-route-junction::after { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: route-ping .9s 1.25s var(--ease) both; }
.case-atlas-routes.is-interactive .case-route-junction::after { transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease; }
.case-atlas-routes.is-review-active .case-route-junction::after { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 9px rgba(91, 59, 224, .08), 0 0 0 17px rgba(8, 105, 127, .05); }
@keyframes route-ping { from { box-shadow: 0 0 0 0 rgba(91, 59, 224, .26), 0 0 0 0 rgba(8, 105, 127, .26); } to { box-shadow: 0 0 0 20px rgba(91, 59, 224, 0), 0 0 0 20px rgba(8, 105, 127, 0); } }
.case-route-preview { --route-preview-color: var(--route-violet); --route-preview-origin: 50%; position: fixed; z-index: 90; left: 0; top: 0; width: clamp(286px, 23vw, 354px); visibility: hidden; pointer-events: none; }
.case-route-preview-surface { position: relative; overflow: hidden; border-radius: 16px; background: #101827; color: #f7f8fc; box-shadow: 0 22px 54px rgba(16, 24, 39, .22); opacity: 0; filter: blur(2px); transform: translateY(8px) scale(.98); transform-origin: var(--route-preview-origin) calc(100% + 10px); transition: opacity .12s ease, filter .12s ease, transform .12s cubic-bezier(.16, 1, .3, 1); }
.case-route-preview::after { content: ""; position: absolute; bottom: -6px; left: var(--route-preview-origin); width: 12px; height: 12px; border-radius: 2px; background: #101827; opacity: 0; transform: translateX(-50%) rotate(45deg); transition: opacity .12s ease; }
.case-route-preview.is-open::after { opacity: 1; }
.case-route-preview.is-below .case-route-preview-surface { transform-origin: var(--route-preview-origin) -10px; }
.case-route-preview.is-below::after { top: -6px; bottom: auto; }
.case-route-preview.is-open { visibility: visible; }
.case-route-preview.is-open .case-route-preview-surface { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition-duration: .18s, .18s, .22s; }
.case-route-preview.is-below:not(.is-open) .case-route-preview-surface { transform: translateY(-8px) scale(.98); }
.case-route-preview.is-switching .case-route-preview-surface { opacity: .46; filter: blur(2px); transform: translateY(2px) scale(.99); transition-duration: .08s; }
.case-route-preview.is-keyboard-open .case-route-preview-surface { transition: none; }
.case-route-preview-header { min-height: 67px; padding: 14px 16px; display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.case-route-preview-signal { width: 3px; height: 31px; border-radius: 2px; background: var(--route-preview-color); }
.case-route-preview-header div { min-width: 0; display: grid; gap: 2px; }
.case-route-preview-journey, .case-route-preview-hint { color: #b8c2d0; font-size: 14px; line-height: 1.35; }
.case-route-preview-title { overflow: hidden; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.case-route-preview-hint { align-self: start; padding-top: 1px; white-space: nowrap; }
.case-route-preview-media { padding: 0 10px 10px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.case-route-preview-media figure { min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: #fff; }
.case-route-preview-media img { width: 100%; height: 196px; display: block; object-fit: cover; object-position: top center; }
.case-route-preview-media figcaption { min-height: 50px; padding: 10px 12px 11px; display: flex; align-items: center; color: #3d495a; font-size: 14px; font-weight: 600; line-height: 1.4; }
.case-route-preview.is-comparison { width: clamp(340px, 31vw, 468px); }
.case-route-preview.is-comparison .case-route-preview-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-route-preview.is-comparison .case-route-preview-media img { height: 210px; }
.case-route-preview.is-contain .case-route-preview-primary img { padding: 18px; object-fit: contain; background: #f7f8fc; }
.case-route-preview-secondary[hidden] { display: none; }
.case-routes-note { max-width: 420px; margin: 40px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 1100px), (hover: none), (pointer: coarse) {
  .case-route-discovery, .case-route-preview { display: none !important; }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .case-route-steps-payment .case-route-trigger:hover { color: var(--route-violet); }
  .case-route-steps-reporting .case-route-trigger:hover { color: var(--route-cyan-deep); }
}
.case-flow-chapter { margin-top: var(--case-space-chapter); padding-top: var(--case-space-compact); border-top: 1px solid #bac2cf; }
.case-flow-chapter > header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.case-flow-chapter > header .case-flow-label { grid-column: 1 / span 2; margin: 5px 0 0; display: inline-flex; align-items: center; gap: 9px; color: #5b3be0; font-size: 14px; }
.case-flow-chapter > header .case-flow-label::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.case-flow-chapter > header .case-flow-label::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.case-flow-map > header .case-flow-label { color: #08697f; }
.case-flow-chapter > header h3 { grid-column: 3 / span 6; max-width: 680px; margin: 0; font-size: clamp(42px, 4.8vw, 76px); font-weight: 500; line-height: .96; letter-spacing: -.045em; }
.case-flow-chapter > header > p:last-child { grid-column: 9 / -1; margin: 4px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.7; }
.case-screen-run {
  margin: var(--case-space-block) 0 0;
  padding: clamp(40px, 4.8vw, 78px) clamp(28px, 4.2vw, 68px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, min(24vw, 360px)));
  justify-content: center;
  gap: clamp(20px, 2.2vw, 36px);
  align-items: end;
  overflow: hidden;
  list-style: none;
  border-radius: var(--surface-radius);
  background: #f0e8f4;
}
.case-screen-run li { min-width: 0; position: relative; }
.case-screen-run figure {
  aspect-ratio: 393 / 852;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(12px, 1.15vw, 18px);
  background: #fff;
  box-shadow: 0 20px 34px rgba(35, 28, 56, .14);
}
.case-screen-run img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: top;
  filter: none;
}
.case-flow-map .case-screen-run {
  padding: clamp(40px, 4.8vw, 78px) clamp(28px, 4.2vw, 68px);
  grid-template-columns: repeat(3, minmax(0, min(24vw, 360px)));
  gap: clamp(20px, 2.2vw, 36px);
  background: #e5edf3;
}
.case-flow-map .case-screen-run figure { box-shadow: 0 20px 34px rgba(22, 51, 64, .13); }
.case-flow-map { margin-top: calc(var(--case-space-chapter) + 24px); }
.case-specimens { margin-top: calc(var(--case-space-chapter) + 24px); padding-top: var(--case-space-compact); border-top: 1px solid #bac2cf; }
.case-specimens-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.case-specimens-heading h3 { grid-column: 1 / span 9; max-width: 1100px; margin: 0; font-size: clamp(48px, 5.6vw, 88px); font-weight: 500; line-height: .96; letter-spacing: -.04em; }
.case-specimens-heading > p:last-child { grid-column: 9 / -1; margin: 62px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.7; }
.case-specimen-board { min-height: 1040px; margin-top: var(--case-space-block); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 290px 290px 420px; gap: 18px; }
.case-specimen-board figure { min-height: 0; margin: 0; padding: 24px 26px 16px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border-radius: 16px; background: #fff; }
.case-specimen-board figure img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.case-specimen-board figcaption { padding-top: 10px; color: var(--case-muted); font-size: 14px; }
.case-specimen-usage { grid-column: 1 / span 7; grid-row: 1 / span 2; background: #e5e9f1 !important; }
.case-specimen-usage img { object-fit: cover !important; object-position: top center; }
.case-specimen-quick { grid-column: 8 / -1; grid-row: 1; }
.case-specimen-bill { grid-column: 8 / -1; grid-row: 2; }
.case-specimen-map { grid-column: 1 / -1; grid-row: 3; padding: 0 !important; background: #e9edf4 !important; }
.case-specimen-map img { object-fit: cover !important; object-position: center 58%; }
.case-specimen-map figcaption { padding: 12px 26px 16px; }

.case-motion { min-height: 0; padding: var(--case-space-chapter) 0 0; background: var(--case-night); color: #f7f8fc; }
.case-motion-intro { padding-bottom: var(--case-space-section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: end; }
.case-motion-intro h2 { grid-column: 1 / span 9; max-width: 1120px; margin: 0; font-size: var(--case-display-size); font-weight: 500; line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); }
.case-motion-intro > p:last-child { grid-column: 9 / -1; margin: 68px 0 0; color: #b6c0cf; font-size: 16px; line-height: 1.7; }
.case-motion-scroll { height: 330svh; position: relative; background: #080f1d; }
.case-motion-pin { width: 100%; height: 100svh; min-height: 0; margin: 0; padding: 0; position: sticky; top: 0; display: block; overflow: hidden; background: #080f1d; }
.case-motion-media { width: 100%; height: calc(100% - 92px); aspect-ratio: auto; position: absolute; inset: 0 0 auto; }
.case-motion-panel { margin: 0; position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 0; background: #080f1d; opacity: 0; visibility: hidden; transform: scale(.985); clip-path: none; transition: opacity .6s var(--ease), visibility .6s, transform .85s cubic-bezier(.16,1,.3,1); }
.case-motion-panel.is-active { opacity: 1; visibility: visible; transform: scale(1); clip-path: none; }
.case-motion-panel video, .case-motion-panel > img { width: min(2400px, 100vw); height: 100%; margin: 0; object-fit: contain; background: #080f1d; }
.case-motion-poster { display: none; }
.case-motion-panel figcaption { display: none; }
.case-motion-controls { height: 92px; padding: 0 3vw; position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; border-top: 1px solid rgba(255,255,255,.15); background: #0c1424; }
.case-motion-index { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; }
.case-motion-index li { min-width: 0; }
.case-motion-index button { width: 100%; min-height: 52px; padding: 0 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: var(--control-radius); background: rgba(255,255,255,.025); color: #8995aa; text-align: left; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.case-motion-index button:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #edf1f7; }
.case-motion-index button.is-active { border-color: rgba(167,139,250,.62); color: #fff; background: rgba(139,108,255,.2); }
.case-motion-index button:focus-visible { outline-color: var(--focus-ring-on-dark); outline-offset: 2px; }
.case-motion-index span { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.case-motion-index small { font-size: 14px; font-variant-numeric: tabular-nums; }
.case-motion-toggle { width: 42px; height: 42px; flex: 0 0 auto; }
.case-motion-track { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.case-motion-track span { display: block; }

.case-impact { padding: var(--case-space-chapter) 0 0; background: var(--case-cyan); color: var(--case-ink); }
.case-impact-heading { display: grid; grid-template-columns: 2fr 10fr; gap: 28px; }
.case-impact-heading .mono { grid-column: 1; margin: 10px 0 0; color: #5b3be0; font-size: 14px; }
.case-impact-heading h2 { grid-column: 2; max-width: 1260px; margin: 0; font-size: var(--case-display-size); font-weight: 500; line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); }
.case-impact-monument { margin-top: var(--case-space-section); display: grid; grid-template-columns: 2fr 1fr; border-top: 1px solid rgba(13,20,35,.35); border-bottom: 1px solid rgba(13,20,35,.35); }
.case-impact-primary { min-height: 650px; padding: 38px 44px 46px 0; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(13,20,35,.35); }
.case-impact-primary strong { display: block; font-size: clamp(190px, 26vw, 430px); font-weight: 500; line-height: .72; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.case-impact-monument p { max-width: 28ch; margin: 0; font-size: 16px; line-height: 1.55; }
.case-impact-secondary { display: grid; grid-template-rows: 1fr 1fr; }
.case-impact-secondary > div { min-height: 325px; padding: 36px 0 36px 38px; display: flex; flex-direction: column; justify-content: space-between; }
.case-impact-secondary > div + div { border-top: 1px solid rgba(13,20,35,.35); }
.case-impact-secondary strong { display: block; font-size: clamp(76px, 9vw, 150px); font-weight: 500; line-height: .8; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.case-impact-note { max-width: 650px; margin: var(--case-space-block) 0 0 auto; color: #435162; font-size: 15px; line-height: 1.72; }
.case-reflection { margin-top: var(--case-space-chapter); padding: var(--case-space-block) 0 var(--case-space-chapter); display: grid; grid-template-columns: 8fr 4fr; gap: 50px; border-top: 1px solid rgba(13,20,35,.35); }
.case-reflection h2 { max-width: 950px; margin: 0; font-size: var(--case-display-size); font-weight: 500; line-height: var(--case-display-leading); letter-spacing: var(--case-display-tracking); }
.case-reflection > div { align-self: end; color: #435162; font-size: 16px; line-height: 1.72; }
.case-reflection p { margin: 0 0 22px; }
.case-impact + .next-project { background: #ffffff; }

@media (min-width: 1321px) and (max-width: 1800px) {
  .case-hero-device {
    width: clamp(700px, 54vw, 860px);
    max-width: none;
  }
}

@media (min-width: 1801px) {
  .case-hero-cover { --case-hero-right-gutter: max(3.5vw, 80px); width: 100%; max-width: none; }
  .case-hero-copy > p { max-width: 520px; }
  .case-hero-device { width: 100%; max-width: 1320px; }
}

@media (min-width: 2001px) {
  .case-hero-cover { grid-template-columns: minmax(220px, 1.55fr) minmax(620px, 4.25fr) minmax(0, 6.2fr); }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .case-hero-cover { grid-template-columns: minmax(0, 1fr) minmax(480px, .96fr); grid-template-rows: minmax(0, 1fr) auto; padding: 124px var(--case-shell-gutter) 0; column-gap: clamp(32px, 4vw, 54px); }
  .case-hero-copy { grid-column: 1; grid-row: 1; max-width: 580px; align-self: center; padding: 44px 0; }
  .case-hero h1 { font-size: clamp(48px, 4.25vw, 56px); line-height: 1.09; white-space: nowrap; }
  .case-hero-copy > p { max-width: 520px; margin-top: 30px; }
  .case-hero-meta { grid-column: 1; grid-row: 2; align-self: start; padding-bottom: 46px; }
  .case-hero-meta dl { margin: 0 clamp(42px, 4vw, 56px) 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; border-top: 1px solid var(--case-line); border-right: 0; }
  .case-hero-meta dl div + div { margin-top: 0; }
  .case-hero-device { width: clamp(650px, 59vw, 780px); max-width: none; height: auto; grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; justify-content: flex-end; position: relative; z-index: 0; }
  .case-hero-device img { width: 100%; height: auto; max-height: none; margin: 0; }
}

@media (min-aspect-ratio: 4 / 3) and (min-width: 621px) {
  .case-hero-reel-stage { width: auto; height: min(1200px, calc(100svh - var(--case-reel-bottom-space))); max-width: 100%; }
}

@media (min-width: 1801px) {
  .utility-demo__body { grid-template-columns: minmax(220px, .6fr) minmax(480px, 1.4fr); }
  .utility-demo__component { width: min(100%, 620px); }
}

@media (max-width: 1100px) {
  .case-problem-intro, .case-problem-evidence-intro, .case-product-landscape-intro, .case-system-heading, .case-atlas-heading, .case-specimens-heading, .case-motion-intro { grid-template-columns: 1fr; }
  .case-problem-intro h2, .case-problem-intro > p, .case-problem-evidence-intro h3, .case-problem-evidence-intro p, .case-product-landscape-intro h3, .case-product-landscape-intro p, .case-system-heading h2, .case-system-heading > p, .case-atlas-heading h2, .case-atlas-heading > p:last-child, .case-specimens-heading h3, .case-specimens-heading > p:last-child, .case-motion-intro h2, .case-motion-intro > p:last-child { grid-column: 1; }
  .case-problem-intro > p { max-width: 680px; margin-top: 34px; }
  .case-problem-evidence-intro p { max-width: 680px; margin-top: 24px; }
  .case-product-landscape-intro p { max-width: 680px; margin-top: 24px; }
  .case-system-heading > p { max-width: 680px; margin-top: 34px; }
  .system-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "utility utility" "context persistent"; }
  .utility-demo__body { grid-template-columns: minmax(210px, .65fr) minmax(360px, 1.35fr); }
  .utility-demo__component { width: min(100%, 460px); }
  .case-specimens-heading h3, .case-motion-intro h2 { margin-top: 34px; }
  .case-atlas-heading > p:last-child, .case-specimens-heading > p:last-child, .case-motion-intro > p:last-child { max-width: 620px; margin-top: 38px; }
  .case-flow-chapter > header { grid-template-columns: 1fr 3fr; }
  .case-flow-chapter > header .case-flow-label { grid-column: 1; }
  .case-flow-chapter > header h3 { grid-column: 2; }
  .case-flow-chapter > header > p:last-child { grid-column: 2; max-width: 620px; margin-top: 20px; }
  .case-atlas-routes { grid-template-columns: minmax(96px, 132px) repeat(5, minmax(0, 1fr)); --route-row-h: 94px; }
  .case-screen-run,
  .case-flow-map .case-screen-run { overflow-x: auto; grid-template-columns: repeat(3, minmax(240px, 1fr)); justify-content: start; scroll-snap-type: x mandatory; }
  .case-screen-run li { scroll-snap-align: start; }
  .case-specimen-board { min-height: 900px; grid-template-rows: 250px 250px 364px; }
  .case-motion-index small { display: none; }
}

@media (min-width: 621px) and (max-width: 1320px) {
  .utility-demo__component { width: min(100%, clamp(380px, 40vw, 460px)); }
}

@media (max-width: 800px) {
  .utility-demo__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "label" "component" "logic" "dimensions"; row-gap: 28px; }
  .utility-demo__label { width: 100%; padding-top: 0; text-align: center; }
  .utility-demo__label p { margin-inline: auto; }
  .utility-demo__component { width: min(100%, 460px); align-self: center; justify-self: center; }
  .utility-demo__logic { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .utility-demo__rule:not(.utility-demo__rule--adaptive) { padding-top: 16px; border-top: 0; }
  .utility-demo__dimensions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .utility-demo__dimensions div:nth-child(n) { padding-inline: 14px; border-inline-start: 1px solid rgba(13,20,35,.14); }
  .utility-demo__dimensions div:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 900px) {
  .case-body { --case-shell-gutter: 20px; }
  .case-shell { width: calc(100% - 40px); }
  .case-header { left: 20px; right: 20px; }
  .case-problem-evidence { margin-top: var(--case-space-section); padding-top: var(--case-space-compact); }
  .case-hero-evidence-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .case-problem-evidence .case-hero-evidence-product { grid-column: 1 / span 3; }
  .case-problem-evidence .case-hero-evidence-flow { grid-column: 4 / -1; }
  .case-hero-artifact-well { aspect-ratio: 1.12 / 1; padding: 18px; gap: 10px; }
  .case-problem { padding-block: var(--case-space-chapter); }
  .case-complexity, .case-complexity-inner { min-height: 780px; }
  .case-complexity-inner { padding-block: var(--case-space-chapter) var(--case-space-section); gap: var(--case-space-section); }
  .case-problem-story { grid-template-columns: 1fr; border-radius: 0 0 var(--surface-radius) var(--surface-radius); }
  .case-friction-path { padding-right: 0; }
  .case-support-consequence { min-height: 360px; border-top: 1px solid var(--case-line); border-left: 0; }
  .case-design-mandate { grid-template-columns: 1fr; gap: 38px; }
  .case-design-mandate-thesis { max-width: 20ch; }
  .case-destination-grid { display: block; }
  .case-destination-grid::before, .case-destination-grid::after { display: none; }
  .case-destination-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(12px, 1.45vw, 14px); overflow: hidden; isolation: isolate; }
  .case-destination-row + .case-destination-row { margin-top: 30px; }
  .case-destination-row::before,
  .case-destination-row::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; pointer-events: none; }
  .case-destination-row::before { height: calc(var(--destination-ghost-depth) + var(--destination-soft-overlap)); z-index: 3; background: rgba(231,235,242,.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.88) 82%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.88) 82%, #000 100%); }
  .case-destination-row::after { height: calc(var(--destination-ghost-depth) + var(--destination-strong-overlap)); z-index: 4; background: linear-gradient(to bottom, rgba(231,235,242,0) 0%, rgba(231,235,242,.16) 52%, rgba(231,235,242,.86) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.82) 75%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.82) 75%, #000 100%); }
  .case-atlas { padding-block: var(--case-space-section) var(--case-space-chapter); }
  .case-flow-chapter, .case-specimens { margin-top: var(--case-space-chapter); }
  .case-flow-map { margin-top: calc(var(--case-space-chapter) + 20px); }
  .case-flow-chapter > header { grid-template-columns: 1fr; }
  .case-flow-chapter > header .case-flow-label, .case-flow-chapter > header h3, .case-flow-chapter > header > p:last-child { grid-column: 1; }
  .case-flow-chapter > header h3 { margin-top: 28px; }
  .case-screen-run { margin-top: 66px; padding-inline: 28px; }
  .case-specimen-board { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: 600px 280px 360px; }
  .case-specimen-usage { grid-column: 1 / -1; grid-row: 1; }
  .case-specimen-quick { grid-column: 1; grid-row: 2; }
  .case-specimen-bill { grid-column: 2; grid-row: 2; }
  .case-specimen-map { grid-column: 1 / -1; grid-row: 3; }
  .case-motion { padding-top: var(--case-space-chapter); }
  .case-motion-intro { padding-bottom: var(--case-space-section); }
  .case-motion-scroll { height: auto; }
  .case-motion-pin { height: auto; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: visible; }
  .case-motion-track { display: none; }
  .case-motion-controls { height: auto; min-height: 94px; padding: 20px; position: relative; right: auto; bottom: auto; left: auto; order: 0; }
  .case-motion-index { display: grid; }
  .case-motion-index small { display: block; }
  .case-motion-media { height: auto; position: relative; inset: auto; order: 1; display: grid; gap: 22px; }
  .case-motion-panel, .case-motion-panel.is-active { position: relative; inset: auto; min-height: 0; display: grid; grid-template-rows: auto 50px; place-items: stretch; aspect-ratio: auto; opacity: 1; visibility: visible; transform: none; }
  .case-motion-panel video, .case-motion-panel > img { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 3; object-fit: contain; }
  .case-motion-panel figcaption { height: 50px; padding-inline: 20px; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.14); color: #c5cedb; font-size: 14px; }
  .case-impact { padding-top: var(--case-space-chapter); }
  .case-impact-heading { grid-template-columns: 1fr; }
  .case-impact-heading .mono, .case-impact-heading h2 { grid-column: 1; }
  .case-impact-heading h2 { margin-top: 34px; }
  .case-impact-monument { margin-top: var(--case-space-section); grid-template-columns: 1fr; }
  .case-impact-primary { min-height: 470px; border-right: 0; border-bottom: 1px solid rgba(13,20,35,.35); }
  .case-impact-primary strong { font-size: clamp(170px, 45vw, 340px); }
  .case-impact-secondary { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .case-impact-secondary > div + div { border-top: 0; border-left: 1px solid rgba(13,20,35,.35); }
  .case-impact-secondary > div { min-height: 270px; padding: 30px 24px; }
  .case-reflection { margin-top: var(--case-space-chapter); grid-template-columns: 1fr; }
  .case-reflection > div { max-width: 620px; }
}

@media (min-width: 621px) and (max-width: 1100px) {
  .case-hero-cover { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; padding: 118px var(--case-shell-gutter) 0; row-gap: clamp(42px, 6vw, 64px); }
  .case-hero-copy { grid-column: 1 / -1; grid-row: 1; }
  .case-hero-meta { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .case-hero-meta dl { padding: 24px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--case-line); border-right: 0; border-bottom: 1px solid var(--case-line); }
  .case-hero-meta dl div + div { margin-top: 0; }
  .case-hero h1 { max-width: 800px; font-size: clamp(50px, 6.2vw, 68px); line-height: 1.09; white-space: normal; }
  .case-hero-copy > p { max-width: 620px; }
  .case-hero-device { width: 100%; height: auto; grid-column: 1 / -1; grid-row: 3; justify-self: stretch; justify-content: center; }
  .case-hero-device img { width: min(88vw, 880px); height: auto; margin-inline: auto; }
}

@media (max-width: 620px) {
  .case-body {
    --case-shell-gutter: 16px;
    --case-display-size: clamp(36px, 9.7vw, 42px);
    --case-space-chapter: 96px;
    --case-space-section: 68px;
    --case-space-block: 48px;
    --case-space-compact: 28px;
  }
  .case-shell { width: calc(100% - 32px); }
  .case-header { left: 12px; right: 12px; }
  .case-hero { padding: 0; }
  .case-hero-cover { min-height: 100svh; padding: 106px var(--case-shell-gutter) 0; display: flex; flex-direction: column; gap: 0; border-radius: 0; }
  .case-hero-copy { order: 0; padding: 0; }
  .case-hero-meta { width: 100%; order: 1; margin-top: 42px; display: block; }
  .case-hero-meta dl { margin: 0; padding: 26px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; border-top: 1px solid var(--case-line); border-right: 0; border-bottom: 1px solid var(--case-line); }
  .case-hero-meta dl div + div { margin-top: 0; }
  .case-hero-meta dt { font-size: 14px; }
  .case-hero-meta dd { font-size: 16px; }
  .case-hero h1 { font-size: var(--case-display-size); line-height: 1.09; letter-spacing: -.04em; }
  .case-hero h1 { white-space: normal; }
  .case-hero-copy > p { margin-top: 30px; font-size: 16px; line-height: 1.58; }
  .case-hero-device { width: 100%; height: auto; order: 2; margin: auto 0 0; padding-top: 38px; }
  .case-hero-device img { width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
  .case-hero-reel-stage { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .case-problem-evidence { margin-top: var(--case-space-section); padding-top: var(--case-space-compact); }
  .case-hero-evidence-grid { grid-template-columns: 1fr; gap: 42px; }
  .case-problem-evidence .case-hero-evidence-product,
  .case-problem-evidence .case-hero-evidence-flow { grid-column: 1; grid-row: auto; margin-top: 0; }
  .case-hero-artifact-well { aspect-ratio: 1.14 / 1; padding: 16px; gap: 8px; }
  .case-problem-evidence figcaption { min-height: 0; padding-bottom: 16px; display: block; }
  .case-problem-evidence figcaption span { display: block; }
  .case-problem-evidence figcaption span:last-child { margin-top: 3px; }
  .case-problem { padding-block: var(--case-space-chapter); }
  .case-complexity, .case-complexity-inner { min-height: 720px; }
  .case-complexity-inner { padding-block: var(--case-space-chapter) var(--case-space-section); gap: var(--case-space-block); }
  .case-problem-intro h2, .case-motion-intro h2, .case-impact-heading h2 { font-size: var(--case-display-size); }
  .case-problem-intro > p { margin-top: 26px; font-size: 16px; }
  .case-problem-story { margin-top: var(--case-space-section); }
  .case-friction-lead { margin-bottom: 30px; font-size: 21px; }
  .case-friction-path li { padding-block: 24px 26px; grid-template-columns: 1fr; gap: 10px; }
  .case-friction-path h3 { font-size: 29px; }
  .case-support-consequence { min-height: 310px; padding: 28px 24px; }
  .case-support-consequence strong { margin-top: 60px; font-size: 55px; }
  .case-design-mandate { margin-top: 36px; padding: 28px 22px 30px; gap: 34px; border-radius: 18px; }
  .case-design-mandate-thesis { max-width: 15ch; font-size: 29px; }
  .case-design-mandate ol { grid-template-columns: 1fr; gap: 28px; }
  .case-design-mandate li { padding: 2px 0 2px 16px; }
  .case-design-mandate span { max-width: 28ch; }
  .case-problem-evidence-intro { margin-bottom: var(--case-space-block); }
  .case-problem-evidence-intro h3 { font-size: 31px; }
  .case-problem-evidence-intro p { margin-top: 18px; font-size: 15px; }
  .case-product-landscape-intro { margin-bottom: var(--case-space-block); }
  .case-product-landscape-intro h3 { font-size: 31px; }
  .case-product-landscape-intro p { margin-top: 18px; font-size: 15px; }
  .case-destination-grid { --destination-grid-padding: 18px; --destination-grid-bottom: 0px; --destination-ghost-depth: 24px; --destination-soft-overlap: 32px; --destination-strong-overlap: 0px; padding: var(--destination-grid-padding); padding-bottom: var(--destination-grid-bottom); }
  .case-destination-row { column-gap: 12px; }
  .case-destination-row + .case-destination-row { margin-top: 26px; }
  .case-destination-row::before { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .case-destination-row::after { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .case-destination-item > span { margin-bottom: 12px; font-size: 14px; }
  .case-destination-screen { border-radius: 11px 11px 0 0; }
  .case-destination-screen img { border-radius: 11px 11px 0 0; }
  .case-system { padding-block: var(--case-space-chapter); }
  .case-system-heading h2 { font-size: var(--case-display-size); }
  .case-system-heading > p { margin-top: 26px; font-size: 15px; }
  .system-bento { margin-top: var(--case-space-section); grid-template-columns: minmax(0, 1fr); grid-template-areas: "utility" "context" "persistent"; gap: 16px; }
  .utility-demo, .account-context-proof, .persistent-state-proof { padding: 22px; }
  .utility-demo__header { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .utility-demo__header h3 { font-size: clamp(21px, 6.5vw, 31px); }
  .utility-demo__header > div > p { margin-top: 14px; font-size: 15px; }
  .utility-demo__coverage { grid-template-columns: auto minmax(0, 1fr); justify-self: start; justify-items: start; align-items: end; gap: 14px; text-align: left; }
  .utility-demo__coverage strong { font-size: 66px; }
  .utility-demo__coverage span { max-width: 17ch; padding-bottom: 2px; }
  .utility-demo__body { margin-top: 36px; row-gap: 24px; }
  .utility-demo__label p { max-width: 28ch; }
  .utility-demo__component { width: min(100%, 460px); justify-self: center; }
  .utility-tabs { gap: 6px; }
  .utility-tab { height: 44px; padding-inline: 4px; border-radius: 5px; }
  .utility-demo__logic { gap: 12px; }
  .utility-demo__rule:not(.utility-demo__rule--adaptive) { padding-top: 14px; }
  .utility-demo__rule--adaptive { padding: 14px; }
  .utility-demo__dimensions { padding-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .utility-demo__dimensions div:nth-child(n) { padding-inline: 0; border-inline-start: 0; }
  .utility-demo__dimensions div:nth-child(even) { padding-inline-start: 18px; border-inline-start: 1px solid rgba(13,20,35,.14); }
  .account-context-proof h3, .persistent-state-proof h3 { font-size: 28px; }
  .account-context-proof__media { padding-top: 28px; }
  .persistent-state-proof__media { min-height: 0; margin-top: 28px; display: grid; gap: 14px; overflow: visible; }
  .persistent-state-proof__artifact { width: 100%; position: relative; inset: auto; }
  .case-atlas { padding-block: var(--case-space-section) var(--case-space-chapter); }
  .case-atlas-heading h2 { font-size: 34px; }
  .case-atlas-heading > p:last-child, .case-motion-intro > p:last-child { font-size: 15px; }
  .case-atlas-routes { display: block; margin-top: 40px; }
  .case-route-rail, .case-route-junction { display: none; }
  .case-route-name { display: block; padding-top: 0; margin-bottom: 14px; font-size: 16px; }
  .case-route-name-reporting { margin-top: 38px; }
  .case-route-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .case-route-steps li { min-width: 0; position: static; height: auto; display: block; }
  .case-route-steps li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .case-route-steps li::before { display: none; }
  .case-route-trigger { width: 100%; min-width: 0; min-height: 44px; position: static; padding: 10px 12px; align-items: center; justify-content: flex-start; border: 1px solid rgba(57, 70, 89, .18); border-radius: 100px; background: rgba(255, 255, 255, .42); opacity: 1; color: var(--route-ink); -webkit-text-fill-color: currentColor; transform: none; transition: none; text-align: left; }
  .case-route-discovery { display: none; }
  .case-route-steps-payment .case-route-trigger, .case-route-steps-reporting .case-route-trigger { align-items: center; }
  .case-route-steps-payment .case-route-trigger { border-color: rgba(91, 59, 224, .2); }
  .case-route-steps-reporting .case-route-trigger { border-color: rgba(8, 105, 127, .22); }
  .case-route-trigger[data-step="Shared review"] { border-color: rgba(57, 70, 89, .22); background: linear-gradient(90deg, rgba(91, 59, 224, .08), rgba(8, 105, 127, .08)); }
  .case-route-steps li.is-active .case-route-trigger { border-color: var(--route-color); background: rgba(255, 255, 255, .62); color: var(--route-color); }
  .case-route-steps li.is-active::before { transform: none; box-shadow: 0 0 0 3px #edf0f5, 0 0 0 5px var(--route-halo); }
  .case-routes-note { margin-top: 32px; }
  .case-flow-chapter, .case-specimens { margin-top: var(--case-space-chapter); }
  .case-flow-map { margin-top: calc(var(--case-space-chapter) + 18px); }
  .case-flow-chapter > header h3, .case-specimens-heading h3 { font-size: 43px; }
  .case-screen-run,
  .case-flow-map .case-screen-run { margin-top: var(--case-space-block); padding: 28px 22px 34px; grid-template-columns: repeat(3, minmax(250px, 78vw)); gap: 18px; border-radius: 18px; }
  .case-screen-run figure { border-radius: 14px; }
  .case-specimen-board { margin-top: var(--case-space-block); display: grid; }
  .case-specimen-board { grid-template-columns: 1fr; grid-template-rows: 520px 240px 240px 300px; gap: 12px; }
  .case-specimen-board figure { min-height: 0; border-radius: 12px; }
  .case-specimen-usage, .case-specimen-quick, .case-specimen-bill, .case-specimen-map { grid-column: 1; }
  .case-specimen-usage { grid-row: 1; }
  .case-specimen-quick { grid-row: 2; }
  .case-specimen-bill { grid-row: 3; }
  .case-specimen-map { grid-row: 4; }
  .case-motion { padding-top: var(--case-space-chapter); }
  .case-motion-intro { padding-bottom: var(--case-space-section); }
  .case-motion-controls { min-height: 86px; padding: 16px; gap: 12px; overflow: hidden; }
  .case-motion-index { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .case-motion-index::-webkit-scrollbar { display: none; }
  .case-motion-index li { min-width: 124px; flex: 0 0 124px; scroll-snap-align: start; }
  .case-motion-index button { min-height: 58px; padding-inline: 14px; grid-template-columns: 1fr; gap: 2px; align-content: center; }
  .case-motion-index span { font-size: 14px; line-height: 1.15; text-overflow: clip; white-space: normal; }
  .case-motion-index small { font-size: 14px; }
  .case-motion-media { gap: 16px; }
  .case-motion-panel, .case-motion-panel.is-active { border-radius: 0; }
  .case-motion-panel figcaption { height: 48px; padding-inline: 16px; }
  .case-impact { padding-top: var(--case-space-chapter); }
  .case-impact-heading h2 { font-size: var(--case-display-size); }
  .case-impact-monument { margin-top: var(--case-space-section); }
  .case-impact-primary { min-height: 330px; padding: 28px 0 30px; }
  .case-impact-primary strong { font-size: 47vw; }
  .case-impact-monument p { font-size: 14px; }
  .case-impact-secondary { grid-template-columns: 1fr; }
  .case-impact-secondary > div { min-height: 210px; padding: 28px 0; }
  .case-impact-secondary > div + div { border-left: 0; border-top: 1px solid rgba(13,20,35,.35); }
  .case-impact-secondary strong { font-size: 84px; }
  .case-impact-note { margin-top: var(--case-space-block); font-size: 14px; }
  .case-reflection { margin-top: var(--case-space-chapter); padding-block: var(--case-space-block) var(--case-space-chapter); gap: 40px; }
  .case-reflection h2 { font-size: var(--case-display-size); }
  .case-reflection > div { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .utility-panel, .utility-panel img, .utility-demo__rule--adaptive { transition: none; }
  .utility-chart-stage.is-animating .utility-chart-layer { will-change: auto; }
  .utility-demo__active-model, .utility-demo__active-model.is-updating { animation: none; transform: none; }
  .case-route-rail, .case-route-junction::before, .case-route-junction::after { transition: none; animation: none; }
  .case-route-rail { transform: scaleX(1); }
  .case-route-junction::before { transform: scaleY(1); }
  .case-route-junction::after { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: none; }
  .case-atlas-routes .case-route-steps li::before { opacity: 1; transform: translate(-50%, 0) scale(1); transition: none; }
  .case-atlas-routes .case-route-trigger { opacity: 1; transform: translateY(0); transition: none; }
  .case-route-discovery, .case-route-discovery.is-visible { transform: translate(-50%, 0); transition: visibility .12s, opacity .12s ease; }
  .case-route-preview-surface, .case-route-preview::after { transition: none; }
  .case-hero-reel-video { display: none; }
  .case-hero-reel-poster { display: block; }
  .case-motion { padding-bottom: 112px; }
  .case-motion-scroll { height: auto; }
  .case-motion-pin { height: auto; position: relative; display: flex; flex-direction: column; overflow: visible; }
  .case-motion-track { display: none; }
  .case-motion-controls { height: auto; min-height: 92px; position: relative; right: auto; bottom: auto; left: auto; order: 0; }
  .case-motion-media { height: auto; position: relative; inset: auto; order: 1; display: grid; gap: 24px; }
  .case-motion-panel, .case-motion-panel.is-active { position: relative; inset: auto; display: grid; grid-template-rows: auto 50px; place-items: stretch; aspect-ratio: auto; opacity: 1; visibility: visible; transform: none; }
  .case-motion-panel > img { width: 100%; height: auto; margin: 0; display: block; aspect-ratio: 4 / 3; object-fit: contain; }
  .case-motion-panel figcaption { height: 50px; padding-inline: 20px; display: flex; align-items: center; color: #c5cedb; font-size: 14px; }
  .case-motion-toggle { display: none; }
}

@media (forced-colors: active) {
  .utility-time-button { border-color: ButtonText; }
  .utility-time-button[aria-disabled="true"] { border-color: GrayText; }
  .case-body .utility-time-button:focus-visible { outline-color: Highlight; }
}

/* Art-directed Remotion media matches the exported project-film aspect at each breakpoint. */
@media (min-width: 621px) and (max-width: 900px) {
  .case-hero-reel-stage,
  .case-motion-panel video,
  .case-motion-panel > img {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 620px) {
  .case-hero-reel-stage,
  .case-motion-panel video,
  .case-motion-panel > img {
    aspect-ratio: 4 / 5;
  }
}

/* MiPortal typography system
   Reference principles: restrained role count, stable reading measure, and
   predictable vertical rhythm. The typefaces and expression remain Adeeb's. */
.case-body {
  --case-muted: #4d596b;
  --case-type-section: clamp(34px, 2.75vw, 50px);
  --case-type-subsection: clamp(26px, 1.85vw, 34px);
  --case-type-card-title: clamp(23px, 1.55vw, 30px);
  --case-type-lead: clamp(18px, 1.2vw, 21px);
  --case-type-body: clamp(16px, calc(14px + .22vw), 18px);
  --case-type-small: 15px;
  --case-leading-section: 1.18;
  --case-leading-heading: 1.24;
  --case-leading-body: 1.6;
  --case-leading-small: 1.55;
  --case-measure: 66ch;
  --case-space-chapter: clamp(96px, 6.75vw, 132px);
  --case-space-section: clamp(64px, 4.75vw, 88px);
  --case-space-block: clamp(44px, 3.4vw, 64px);
  --case-space-compact: clamp(26px, 2.2vw, 38px);
}

.case-body,
.case-main {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.case-main :where(h1, h2, h3, strong) {
  text-wrap: balance;
}

.case-main :where(p, dd, figcaption) {
  text-wrap: pretty;
}

.case-main .mono,
.case-main .case-hero-meta dt,
.case-main .case-flow-label {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -.015em;
  text-transform: none;
}

.case-hero-copy > p {
  max-width: 48ch;
  color: var(--case-muted);
  font-size: var(--case-type-body);
  line-height: var(--case-leading-body);
}

.case-hero-meta dt {
  color: #3f4b5d;
  font-size: 14px;
  line-height: 1.5;
}

.case-hero-meta dd {
  color: var(--case-muted);
  font-size: 16px;
  line-height: 1.55;
}

.case-problem-intro > p,
.case-complexity-copy p,
.case-system-heading > p,
.case-motion-intro > p:last-child,
.case-impact-note,
.case-reflection > div {
  max-width: var(--case-measure);
  font-size: var(--case-type-body);
  line-height: var(--case-leading-body);
}

.case-problem-intro > p,
.case-complexity-copy p,
.case-system-heading > p,
.case-impact-note,
.case-reflection > div {
  color: var(--case-muted);
}

.case-friction-path > p {
  max-width: 31ch;
  font-size: var(--case-type-lead);
  line-height: 1.5;
}

.case-friction-path h3,
.case-product-landscape-intro h3,
.case-problem-evidence-intro h3 {
  font-size: var(--case-type-section);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: var(--case-leading-section);
}

.case-friction-path li p,
.case-friction-support p,
.case-product-landscape-intro p,
.case-problem-evidence-intro p,
.case-system-card p,
.case-motion-stage__copy p {
  font-size: var(--case-type-body);
  line-height: var(--case-leading-body);
}

.case-friction-path li p,
.case-product-landscape-intro p,
.case-problem-evidence-intro p,
.case-system-card p {
  color: var(--case-muted);
}

.case-friction-path li > span,
.case-design-mandate-step span,
.case-impact-heading .mono,
.next-project .mono {
  font-size: var(--case-type-small);
  line-height: var(--case-leading-small);
}

.case-friction-consequence strong {
  line-height: 1.02;
}

.case-design-mandate-thesis {
  max-width: 28ch;
  font-size: var(--case-type-subsection);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: var(--case-leading-heading);
}

.case-system-card h3,
.case-motion-stage__copy h3 {
  font-size: var(--case-type-card-title);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: var(--case-leading-heading);
}

.case-system-card--utility .case-system-card__copy h3 {
  font-size: clamp(30px, 2.4vw, 42px);
  line-height: 1.14;
}

.case-system-card--account h3,
.case-system-card--persistent h3 {
  font-size: clamp(24px, 1.8vw, 31px);
  line-height: 1.2;
}

.case-motion-intro h2 {
  grid-column: 1 / span 8;
}

.case-motion-intro > p:last-child {
  grid-column: 9 / -1;
  margin-top: 0;
  color: #c5cedb;
}

.case-impact-list span,
.case-impact-list small {
  font-size: 16px;
  line-height: 1.55;
}

@media (min-width: 621px) and (max-width: 1100px) {
  .case-body {
    --case-space-chapter: clamp(88px, 9vw, 112px);
    --case-space-section: clamp(58px, 7vw, 78px);
    --case-space-block: clamp(40px, 5vw, 56px);
    --case-space-compact: clamp(24px, 3.5vw, 34px);
  }

  .case-motion-intro h2 {
    margin-top: 0;
  }

  .case-motion-intro > p:last-child {
    margin-top: 30px;
  }
}

@media (max-width: 620px) {
  .case-body {
    --case-display-size: clamp(40px, 10.7vw, 44px);
    --case-type-section: clamp(30px, 8vw, 34px);
    --case-type-subsection: clamp(25px, 6.8vw, 29px);
    --case-type-card-title: clamp(23px, 6.2vw, 27px);
    --case-type-body: 16px;
    --case-space-chapter: 84px;
    --case-space-section: 56px;
    --case-space-block: 40px;
    --case-space-compact: 24px;
  }

  .case-hero-copy > p {
    max-width: 34ch;
    font-size: 17px;
    line-height: 1.58;
  }

  .case-hero-meta dd {
    font-size: 16px;
    line-height: 1.55;
  }

  .case-motion-intro h2 {
    margin-top: 0;
  }

  .case-motion-intro > p:last-child {
    margin-top: 28px;
  }
}