:root {
  --ink: #17386f;
  --ink-soft: #58709a;
  --accent: #356fc4;
  --paper: #fff;
  --wash: #eaf1f8;
  --line: rgba(39, 76, 130, .18);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "SimSun", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
.case-story-chapter,
.case-system-design,
.case-chapter-image { content-visibility:auto; contain-intrinsic-size:auto 900px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image: radial-gradient(rgba(31, 66, 112, .16) .55px, transparent .55px);
  background-size: 5px 5px;
  z-index: 10;
}

.case-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  height: 78px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 250, 247, .86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.case-breadcrumb { min-width:0; display:flex; align-items:center; gap:14px; color:#263967; font:600 12px var(--mono); letter-spacing:.13em; white-space:nowrap; }
.case-breadcrumb__home { flex:none; display:flex; align-items:center; gap:14px; }
.case-breadcrumb__home span { flex:none; width:40px; height:40px; display:grid; place-items:center; color:#1f4fb2; border:1px solid rgba(45,82,169,.48); border-radius:50%; font:700 18px/1 var(--sans); letter-spacing:0; }
.case-breadcrumb__home b { display:block; font:inherit; }
.case-breadcrumb__separator { flex:none; color:rgba(53,77,132,.5); font-style:normal; font-weight:400; }
.case-breadcrumb__section { flex:none; padding-block:8px; border-bottom:1px solid transparent; }
.case-breadcrumb__section:hover { border-color:var(--accent); }
.case-breadcrumb__current { min-width:0; max-width:34vw; overflow:hidden; color:var(--ink-soft); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.case-back { padding: 12px 0; border-bottom: 1px solid var(--accent); font-size: 13px; font-weight: 600; }

main { overflow: clip; }
.case-hero {
  position: relative;
  min-height: 590px;
  padding: clamp(100px, 14vh, 150px) max(7vw, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 80px;
  align-items: end;
}
.case-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 44%, rgba(170, 204, 236, .5), transparent 34%), linear-gradient(125deg, transparent 22%, rgba(220, 233, 246, .62) 63%, transparent 84%); opacity: .75; }
.case-wash::after { content: ""; position: absolute; right: 4%; top: 11%; width: 52%; height: 70%; border: 1px solid rgba(61, 104, 165, .13); border-radius: 50%; transform: rotate(-12deg); }
.case-hero__copy, .case-facts { position: relative; }
.case-kicker { margin: 0 0 26px; font: 12px var(--mono); letter-spacing: .13em; }
.case-kicker span { width: 34px; height: 34px; margin-right: 10px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.case-kicker i { font-style: normal; }
.case-hero h1,
.aip-hero__copy h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif !important;
  font-size: clamp(46px, 4.4vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}
.case-hero h1 { max-width: 890px; }
.case-summary { max-width: 780px; margin: 34px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.9; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.case-tags span { padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; }
.case-facts { margin: 0; border-top: 1px solid var(--line); }
.case-facts div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.case-facts dt { font: 12px var(--mono); letter-spacing: .15em; opacity: .65; }
.case-facts dd { margin: 8px 0 0; font-size: 14px; line-height: 1.7; }

.case-cover { width: min(1180px, 86vw); margin: 0 auto; }
.case-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 22px 65px rgba(45, 72, 111, .13); }
.case-cover--html {
  position: relative;
  min-height: clamp(360px, 48vw, 570px);
  padding: clamp(42px, 7vw, 92px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #eef5fd;
  background: linear-gradient(135deg, #173766 0%, #275692 55%, #8fb7df 135%);
  box-shadow: 0 22px 65px rgba(45, 72, 111, .13);
}
.case-cover--html::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; top: -48%; right: -12%; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.02); }
.case-cover--html > div { position: relative; z-index: 1; max-width: 760px; }
.case-cover--html small { font: 12px var(--mono); letter-spacing: .14em; opacity: .72; }
.case-cover--html strong { display: block; margin-top: 22px; font: 400 clamp(42px, 6vw, 78px)/1.12 var(--serif); letter-spacing: -.035em; }
.case-cover--html p { max-width: 680px; margin: 25px 0 0; font-size: 15px; line-height: 1.9; opacity: .82; }
.case-cover--html > span { position: absolute; right: 9%; bottom: 16%; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.case-cover--html > span i { position: absolute; left: 50%; top: 50%; width: 74%; height: 1px; background: rgba(255,255,255,.35); transform-origin: left; }
.case-cover--html > span i:nth-child(2) { transform: rotate(60deg); }
.case-cover--html > span i:nth-child(3) { transform: rotate(120deg); }

.case-detail-nav {
  position: sticky;
  top: 78px;
  z-index: 8;
  width: 100%;
  margin-top: 24px;
  background: rgba(247, 247, 243, .88);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.case-detail-nav > div { width: min(1180px, 86vw); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.case-detail-nav a { position: relative; min-height: 54px; padding: 9px 8px; display: flex; align-items: center; justify-content: center; color: #6c7e9b; text-align: center; transition: color 180ms ease, background-color 180ms ease; }
.case-detail-nav a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 200ms ease; }
.case-detail-nav a:hover { color: var(--ink); }
.case-detail-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.case-detail-nav a.is-active { color: var(--ink); background: rgba(226, 236, 247, .35); }
.case-detail-nav a.is-active::after { transform: scaleX(1); }
.case-detail-nav strong { font-size: 13px; font-weight: 500; }
.case-detail-nav a > span { display: none; }
.case-detail-nav + .case-story-intro { padding-top: clamp(72px, 8vw, 104px); }

.case-section { width: min(1180px, 86vw); margin: 0 auto clamp(120px, 15vw, 190px); }
.case-section > header { display: grid; grid-template-columns: 42px 180px minmax(0, 1fr); column-gap: 20px; align-items: baseline; margin-bottom: 56px; }
.case-section > header > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 12px var(--mono); }
.case-section > header > p { margin: 0; font: 12px var(--mono); letter-spacing: .12em; }
.case-section > header h2 { margin: 0; font: 400 clamp(32px, 4vw, 54px)/1.15 var(--serif); letter-spacing: -.025em; }
.case-section > header small { grid-column: 3; margin-top: 12px; color: var(--ink-soft); font-size: 12px; }

.case-overview__body { margin-left: 242px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); }
.case-overview article { padding-top: 22px; border-top: 1px solid var(--line); }
.case-overview h3 { margin: 0 0 18px; font: 500 18px var(--sans); }
.case-overview p { margin: 0; color: #465e83; font-size: 15px; line-height: 2; }

.case-decision-list { margin-left: 242px; }
.case-decision-list article { display: grid; grid-template-columns: 68px 220px 1fr; gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); }
.case-decision-list article:last-child { border-bottom: 1px solid var(--line); }
.case-decision-list span { font: 12px var(--mono); opacity: .65; }
.case-decision-list h3 { margin: 0; font: 400 24px var(--serif); }
.case-decision-list p { max-width: 590px; margin: 0; color: #526887; font-size: 14px; line-height: 1.9; }

.case-results { width: 100%; padding: clamp(90px, 10vw, 140px) max(7vw, calc((100vw - 1180px) / 2)); background: #203d6f; color: #eef4fb; }
.case-results > header { max-width: 1180px; margin-left: auto; margin-right: auto; }
.case-results > header > span { border-color: rgba(255,255,255,.25); }
.case-results ol { max-width: 938px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.case-results li { display: grid; grid-template-columns: 70px 1fr; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.2); }
.case-results li:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.case-results li span { font: 12px var(--mono); opacity: .65; }
.case-results li p { margin: 0; font: 400 clamp(20px, 2.5vw, 32px)/1.55 var(--serif); }

.case-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.case-gallery figure { margin: 0; }
.case-gallery button { width: 100%; padding: 0; border: 0; color: inherit; background: none; text-align: left; cursor: zoom-in; }
.case-gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 260ms ease, filter 260ms ease; }
.case-gallery button:hover img { transform: translateY(-5px); filter: saturate(1.06); }
.case-gallery button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.case-gallery button span { display: block; margin-top: 12px; font: 12px var(--mono); letter-spacing: .1em; }

.case-story-intro__body {
  margin-left: 242px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.case-story-intro__body > p {
  margin: 0;
  font: 400 clamp(22px, 2.6vw, 34px)/1.65 var(--serif);
}
.case-story-intro__body aside { padding-top: 18px; border-top: 1px solid var(--line); }
.case-story-intro__body small { font: 12px var(--mono); letter-spacing: .12em; }
.case-story-intro__body aside p { margin: 18px 0 0; color: #526887; font-size: 14px; line-height: 2; }

.case-story { counter-reset: chapter; }
.case-story-chapter {
  width: min(1180px, 86vw);
  margin: 0 auto clamp(130px, 16vw, 210px);
  scroll-margin-top: 190px;
}
.case-story-chapter > header {
  position: relative;
  display: grid;
  grid-template-columns: 52px 190px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: baseline;
  padding-top: 28px;
  margin-bottom: 58px;
  border-top: 1px solid var(--line);
}
.case-story-chapter > header > span { font: 12px var(--mono); color: var(--accent); }
.case-story-chapter > header > p { margin: 0; font: 12px var(--mono); letter-spacing: .13em; }
.case-story-chapter h2 { margin: 0; font: 400 clamp(38px, 5vw, 66px)/1.12 var(--serif); letter-spacing: -.03em; }
.case-story-chapter__intro {
  grid-column: 3;
  display: grid;
  grid-template-columns: 32px minmax(0, 620px);
  gap: 20px;
  margin-top: 25px;
}
.case-story-chapter__intro i { width: 28px; height: 1px; margin-top: 13px; background: var(--accent); }
.case-story-chapter__intro p { margin: 0; color: #526887; font-size: 15px; line-height: 2; }
.case-story-chapter__pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; }
.case-story-chapter__pages.is-single { grid-template-columns: minmax(0, 1fr); }
.case-story-chapter__pages figure { margin: 0; }
.case-story-chapter__pages button { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: zoom-in; }
.case-story-chapter__pages img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #fff; box-shadow: 0 18px 55px rgba(39, 67, 105, .09); transition: transform 260ms ease, box-shadow 260ms ease; }
.case-story-chapter__pages.is-single img { aspect-ratio: 16 / 9; }
.case-story-chapter__pages button:hover img { transform: translateY(-5px); box-shadow: 0 26px 70px rgba(39, 67, 105, .14); }
.case-story-chapter__pages button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.case-story-chapter__pages button > span { display: block; margin-top: 13px; font: 12px var(--mono); letter-spacing: .1em; }
.case-story-chapter__content { margin-left: 242px; }
.case-html-block { display: grid; grid-template-columns: 54px 230px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.case-html-block:last-of-type { border-bottom: 1px solid var(--line); }
.case-html-block > span { font: 12px var(--mono); color: var(--accent); }
.case-html-block h3 { margin: 0; font: 400 23px var(--serif); }
.case-html-block p { margin: 0; color: #526887; font-size: 14px; line-height: 1.95; }
.case-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 58px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-metrics article { min-height: 160px; padding: 30px 24px; border-right: 1px solid var(--line); }
.case-metrics article:last-child { border-right: 0; }
.case-metrics strong { display: block; font: 400 clamp(34px, 4vw, 52px) var(--serif); color: var(--accent); }
.case-metrics p { margin: 14px 0 0; color: #526887; font-size: 13px; line-height: 1.7; }
.case-flow { display: flex; gap: 0; margin: 58px 0; padding: 0; list-style: none; counter-reset: flow; }
.case-flow li { position: relative; flex: 1; min-width: 0; padding: 24px 22px 24px 0; border-top: 1px solid var(--line); }
.case-flow li:not(:last-child)::after { content: "→"; position: absolute; right: 8px; top: 20px; color: var(--accent); }
.case-flow span { font: 12px var(--mono); color: var(--accent); }
.case-flow p { margin: 18px 22px 0 0; color: #3e577d; font-size: 13px; line-height: 1.75; }
.case-system-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 58px 0; background: var(--line); border: 1px solid var(--line); }
.case-system-map article { min-height: 190px; padding: 34px; background: rgba(249,249,246,.98); }
.case-system-map small { font: 12px var(--mono); letter-spacing: .1em; color: var(--accent); }
.case-system-map h3 { margin: 30px 0 0; font: 400 26px var(--serif); }
.case-system-map p { margin: 14px 0 0; color: #526887; font-size: 13px; line-height: 1.8; }
.case-screen-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 58px; }
.case-screen-slots article { min-height: 250px; padding: 28px; display: grid; grid-template-columns: 46px 1fr; align-content: end; gap: 20px; border: 1px dashed rgba(53,111,196,.4); background: linear-gradient(145deg, rgba(231,240,249,.75), rgba(255,255,255,.35)); }
.case-screen-slots > article > span { font: 12px var(--mono); color: var(--accent); }
.case-screen-slots small { font: 12px var(--mono); letter-spacing: .1em; }
.case-screen-slots h3 { margin: 14px 0 0; font: 400 23px var(--serif); }
.case-screen-slots p { max-width: 440px; margin: 12px 0 0; color: #71819b; font-size: 12px; line-height: 1.75; }
.case-research-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 12px 0 64px; background: var(--line); border: 1px solid var(--line); }
.case-research-quotes blockquote { min-height: 280px; margin: 0; padding: 34px 30px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(250,250,247,.96); }
.case-research-quotes blockquote p { margin: 0; font: 400 19px/1.85 var(--serif); }
.case-research-quotes footer { display: flex; align-items: baseline; gap: 10px; margin-top: 36px; }
.case-research-quotes footer strong { font-size: 13px; font-weight: 600; }
.case-research-quotes footer span { color: var(--ink-soft); font-size: 12px; }
.case-need-map { margin: 64px 0; border-top: 1px solid var(--line); }
.case-need-map > header { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; padding: 17px 0 17px 52px; color: var(--ink-soft); font: 12px var(--mono); letter-spacing: .1em; }
.case-need-map article { display: grid; grid-template-columns: 32px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 20px; align-items: start; padding: 25px 0; border-top: 1px solid var(--line); }
.case-need-map article:last-child { border-bottom: 1px solid var(--line); }
.case-need-map small, .case-need-map i { color: var(--accent); font: 12px var(--mono); font-style: normal; }
.case-need-map p { margin: 0; color: #4d6486; font-size: 14px; line-height: 1.85; }
.case-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 14px 0 66px; }
.case-principles article { min-height: 230px; padding: 26px 0; border-top: 2px solid rgba(53,111,196,.55); }
.case-principles span { font: 12px var(--mono); color: var(--accent); }
.case-principles h3 { margin: 48px 0 14px; font: 400 24px var(--serif); }
.case-principles p { margin: 0; color: #526887; font-size: 13px; line-height: 1.85; }
.case-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 26px; margin: 64px 0; }
.case-media-slot { margin: 0; }
.case-media-slot--wide, .case-media-slot--panorama { grid-column: 1 / -1; }
.case-media-slot__canvas { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(53,111,196,.38); background: linear-gradient(145deg, rgba(225,236,247,.78), rgba(249,249,246,.72)); }
.case-media-slot--wide .case-media-slot__canvas { aspect-ratio: 16 / 8.5; }
.case-media-slot--panorama .case-media-slot__canvas { min-height: 230px; aspect-ratio: 21 / 7; }
.case-media-slot--standard .case-media-slot__canvas { aspect-ratio: 4 / 3; }
.case-media-slot__canvas::before, .case-media-slot__canvas::after { content: ""; position: absolute; border: 1px solid rgba(53,111,196,.12); border-radius: 50%; }
.case-media-slot__canvas::before { width: 62%; aspect-ratio: 1; right: -22%; top: -52%; }
.case-media-slot__canvas::after { width: 36%; aspect-ratio: 1; left: -14%; bottom: -43%; }
.case-media-slot__canvas small { position: absolute; left: 22px; top: 20px; font: 12px var(--mono); letter-spacing: .1em; color: #6f82a0; }
.case-media-slot__mark { width: 58px; height: 42px; border: 1px solid rgba(53,111,196,.45); }
.case-media-slot__mark::before { content: ""; display: block; width: 18px; height: 18px; margin: 11px auto; border: 1px solid rgba(53,111,196,.45); border-radius: 50%; }
.case-media-slot__play { width: 64px; height: 64px; display: grid; place-items: center; padding-left: 4px; border: 1px solid rgba(53,111,196,.48); border-radius: 50%; color: var(--accent); font-size: 18px; }
.case-media-slot figcaption { display: grid; grid-template-columns: minmax(160px, .55fr) 1fr; gap: 24px; margin-top: 16px; }
.case-media-slot figcaption strong { font: 400 18px var(--serif); }
.case-media-slot figcaption span { color: #6c7d98; font-size: 12px; line-height: 1.7; }
.case-subsection { margin: 108px 0 0; }
.case-subsection > header { max-width: 800px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-subsection > header small { font: 12px var(--mono); letter-spacing: .12em; color: var(--accent); }
.case-subsection > header h3 { margin: 20px 0 14px; font: 400 clamp(28px, 3vw, 40px)/1.25 var(--serif); }
.case-subsection > header p { margin: 0; color: #526887; font-size: 14px; line-height: 2; }
.case-story-outcome { margin: 90px 0 0 242px; padding: 42px 48px; color: #edf4fc; background: #203d6f; }
.case-story-outcome > small { font: 12px var(--mono); letter-spacing: .12em; opacity: .72; }
.case-story-outcome ol { margin: 28px 0 0; padding: 0; list-style: none; }
.case-story-outcome li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.2); }
.case-story-outcome li:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.case-story-outcome li span { font: 12px var(--mono); opacity: .65; }
.case-story-outcome li p { margin: 0; font: 400 clamp(18px, 2vw, 25px)/1.6 var(--serif); }

.case-pagination { width: min(1180px, 86vw); margin: 0 auto 120px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-pagination a { padding: 32px 0; display: flex; flex-direction: column; gap: 9px; }
.case-pagination a + a { padding-left: 40px; text-align: right; border-left: 1px solid var(--line); }
.case-pagination span { font: 12px var(--mono); opacity: .65; }
.case-pagination strong { font: 400 24px var(--serif); }
.case-pagination a:hover strong { color: var(--accent); }

.case-footer { min-height: 150px; padding: 52px max(7vw, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #173462; color: #eaf1fa; font: 12px var(--mono); letter-spacing: .1em; }
.case-footer a { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.4); }

.case-viewer { max-width: min(1240px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.case-viewer::backdrop { background: rgba(12, 25, 48, .88); backdrop-filter: blur(10px); }
.case-viewer img { display: block; max-width: 100%; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,.35); }
.case-viewer button { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(20, 40, 72, .55); font-size: 24px; cursor: pointer; }

@media (max-width: 820px) {
  .case-nav { height: 66px; padding: 0 18px; }
  .case-breadcrumb { gap:9px; font-size:11px; letter-spacing:.08em; }
  .case-breadcrumb__home { gap:9px; }
  .case-breadcrumb__home span { width:36px; height:36px; font-size:16px; }
  .case-breadcrumb__section { display:none; }
  .case-breadcrumb__section + .case-breadcrumb__separator { display:none; }
  .case-breadcrumb__current { max-width:44vw; }
  .case-back { font-size: 12px; }
  .case-hero { min-height: auto; padding: 88px 7vw 72px; grid-template-columns: 1fr; gap: 48px; }
  .case-hero h1,
  .aip-hero__copy h1 { font-size: clamp(38px, 10vw, 48px) !important; }
  .case-cover, .case-section, .case-pagination { width: 86vw; }
  .case-detail-nav { top: 66px; overflow-x: auto; overscroll-behavior-inline: contain; }
  .case-detail-nav > div { width: max-content; min-width: 100%; display: flex; }
  .case-detail-nav a { min-width: 96px; min-height: 50px; padding: 9px 14px; }
  .case-story-chapter { scroll-margin-top: 134px; }
  .case-section > header { grid-template-columns: 38px 1fr; row-gap: 12px; }
  .case-section > header > p { grid-column: 2; }
  .case-section > header h2 { grid-column: 1 / -1; margin-top: 18px; }
  .case-section > header small { grid-column: 1 / -1; }
  .case-overview__body, .case-decision-list { margin-left: 0; }
  .case-overview__body { grid-template-columns: 1fr; }
  .case-decision-list article { grid-template-columns: 42px 1fr; }
  .case-decision-list p { grid-column: 2; }
  .case-results { width: 100%; padding-left: 7vw; padding-right: 7vw; }
  .case-results ol { margin-left: 0; }
  .case-gallery__grid { grid-template-columns: 1fr; gap: 30px; }
  .case-story-intro__body { margin-left: 0; grid-template-columns: 1fr; gap: 40px; }
  .case-story-chapter { width: 86vw; }
  .case-story-chapter > header { grid-template-columns: 38px 1fr; }
  .case-story-chapter h2 { grid-column: 1 / -1; margin-top: 18px; }
  .case-story-chapter__intro { grid-column: 1 / -1; }
  .case-story-chapter__pages { grid-template-columns: 1fr; gap: 32px; }
  .case-story-chapter__content { margin-left: 0; }
  .case-html-block { grid-template-columns: 38px 1fr; }
  .case-html-block p { grid-column: 2; }
  .case-flow { display: block; }
  .case-flow li:not(:last-child)::after { content: "↓"; right: auto; left: 2px; top: auto; bottom: -10px; }
  .case-system-map, .case-screen-slots { grid-template-columns: 1fr; }
  .case-research-quotes, .case-principles, .case-media-grid { grid-template-columns: 1fr; }
  .case-research-quotes blockquote { min-height: 230px; }
  .case-need-map > header { display: none; }
  .case-need-map article { grid-template-columns: 32px 1fr; gap: 10px 16px; }
  .case-need-map article i { grid-column: 2; transform: rotate(90deg); transform-origin: left; }
  .case-need-map article p { grid-column: 2; }
  .case-media-slot--wide, .case-media-slot--panorama { grid-column: auto; }
  .case-media-slot__canvas, .case-media-slot--wide .case-media-slot__canvas, .case-media-slot--panorama .case-media-slot__canvas { min-height: 220px; aspect-ratio: 4 / 3; }
  .case-media-slot figcaption { grid-template-columns: 1fr; gap: 8px; }
  .case-subsection { margin-top: 82px; }
  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-metrics article:nth-child(2n) { border-right: 0; }
  .case-story-outcome { margin-left: 0; padding: 34px 24px; }
  .case-pagination { grid-template-columns: 1fr; }
  .case-pagination a + a { padding-left: 0; text-align: left; border-left: 0; border-top: 1px solid var(--line); }
  .case-footer { padding: 42px 7vw; flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case-story-chapter, .case-scroll-step, .case-scroll-story__stage { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}