:root {
  --case-reading: min(820px, calc(100vw - 40px));
}

.case-study-page .global-header .header-inner {
  width: min(1180px, calc(100vw - 36px));
  min-height: 58px;
  margin: 0 auto;
  padding: 0 11px 0 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--glass-edge-soft);
  border-top-color: rgba(255,255,255,.23);
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(25,43,70,.9), rgba(16,26,46,.92));
  box-shadow: 0 18px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  pointer-events: auto;
}

.case-study-page .case-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.case-study-page .case-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, rgba(84,178,255,.95), rgba(10,91,220,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 6px 20px rgba(0,106,255,.22);
  font-size: 10px;
  font-weight: 700;
}

.case-study-page .case-brand span:last-child { display: grid; line-height: 1; }
.case-study-page .case-brand b { font-size: 12px; }
.case-study-page .case-brand small { margin-top: 4px; color: var(--ink-tertiary); font-size: 8px; letter-spacing: .12em; }
.case-study-page .case-header-actions { display: flex; align-items: center; gap: 8px; }
.case-study-page .case-header-actions a { padding: 9px 13px; border-radius: 999px; color: var(--ink-subtle); font-size: 11px; text-decoration: none; }
.case-study-page .case-header-actions a:hover { color: #fff; background: rgba(255,255,255,.08); }
.case-study-page .case-header-actions .case-back { color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); }

.case-hero { padding: clamp(150px,17vh,205px) 0 80px; }
.case-hero-inner { width: var(--shell); margin: 0 auto; }
.case-hero-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: rgba(166,211,255,.7); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.case-hero h1 { max-width: 1050px; margin: 34px 0 22px; font-size: clamp(54px,7.5vw,110px); font-weight: 570; line-height: .94; letter-spacing: -.065em; }
.case-hero-lead { max-width: 860px; margin: 0; color: rgba(244,247,253,.78); font-size: clamp(19px,2vw,27px); line-height: 1.58; letter-spacing: -.02em; }
.case-hero-meta { margin-top: 42px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.case-hero-meta article { min-height: 110px; padding: 18px; border: 1px solid rgba(255,255,255,.085); border-radius: 17px; background: rgba(255,255,255,.032); }
.case-hero-meta small { display: block; color: var(--ink-tertiary); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.case-hero-meta b { display: block; margin-top: 28px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 540; line-height: 1.5; }

.case-cover { width: var(--showcase); margin: 0 auto 88px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 32px; background: rgba(3,7,15,.5); box-shadow: 0 36px 110px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1); }
.case-cover > img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 820px; object-fit: contain; background: radial-gradient(circle at 50% 40%, rgba(91,127,188,.16), transparent 55%), #050a13; }
.case-cover .product-shot-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 820px; display: grid; place-items: center; overflow: hidden; background: #050a13; }
.case-cover .product-shot-backdrop { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(.3) saturate(.9); transform: scale(1.08); }
.case-cover .product-shot-main { position: relative; z-index: 1; width: calc(100% - 64px); height: auto; max-height: calc(100% - 64px); object-fit: contain; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.case-cover .tabizoo-shot-pair { position: relative; z-index: 1; width: 100%; height: calc(100% - 56px); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 32px; box-sizing: border-box; }
.case-cover .tabizoo-shot-pair img { width: auto; max-width: 30%; height: 100%; object-fit: contain; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; box-shadow: 0 26px 70px rgba(0,0,0,.5); }
.case-cover figcaption { padding: 14px 18px; display: flex; justify-content: space-between; gap: 20px; color: var(--ink-tertiary); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }
.case-cover figcaption a { color: inherit; text-decoration: none; }
.case-cover figcaption a:hover { color: rgba(255,255,255,.9); }

.case-story { width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(70px,9vw,150px); align-items: start; }
.case-toc { position: sticky; top: 115px; padding-top: 3px; }
.case-toc > span { color: rgba(153,205,255,.58); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.case-toc nav { display: grid; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.case-toc a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.075); color: var(--ink-tertiary); font-size: 11px; text-decoration: none; }
.case-toc a:hover { color: #fff; }
.case-toc .case-source-link { margin-top: 17px; display: inline-flex; color: rgba(161,213,255,.8); font-size: 11px; text-decoration: none; }

.case-content { max-width: 960px; min-width: 0; }
.case-section { padding: 0 0 86px; scroll-margin-top: 110px; }
.case-section + .case-section { padding-top: 80px; border-top: 1px solid rgba(255,255,255,.09); }
.case-section-label { color: rgba(146,205,255,.64); font-family: var(--mono); font-size: 9px; letter-spacing: .15em; }
.case-section h2 { max-width: 800px; margin: 20px 0 28px; font-size: clamp(34px,4.2vw,56px); font-weight: 550; line-height: 1.08; letter-spacing: -.05em; }
.case-section > p { max-width: 790px; margin: 0 0 20px; color: var(--ink-muted); font-size: 16px; line-height: 1.9; }
.case-callout { margin: 34px 0; padding: 25px 27px; border: 1px solid rgba(123,198,255,.17); border-radius: 21px; background: radial-gradient(circle at 100% 0,rgba(34,144,255,.11),transparent 46%),rgba(255,255,255,.035); }
.case-callout span { color: rgba(145,207,255,.72); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.case-callout strong { display: block; margin-top: 11px; color: rgba(255,255,255,.9); font-size: clamp(19px,2vw,25px); font-weight: 540; line-height: 1.55; }

.case-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: 32px 0; }
.case-facts article { min-height: 150px; padding: 21px; border: 1px solid rgba(255,255,255,.08); border-radius: 19px; background: rgba(255,255,255,.027); }
.case-facts span { color: rgba(133,199,255,.55); font-family: var(--mono); font-size: 9px; }
.case-facts b { display: block; margin: 36px 0 7px; color: #fff; font-size: clamp(21px,2.2vw,29px); font-weight: 590; letter-spacing: -.035em; }
.case-facts small { color: var(--ink-subtle); font-size: 11px; line-height: 1.55; }

.decision-list { margin: 34px 0 0; display: grid; gap: 12px; }
.decision-card { padding: 24px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 20px; border: 1px solid rgba(255,255,255,.085); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); }
.decision-card > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(141,203,255,.18); border-radius: 13px; color: rgba(154,211,255,.8); background: rgba(33,139,255,.08); font-family: var(--mono); font-size: 10px; }
.decision-card h3 { margin: 1px 0 9px; font-size: 20px; font-weight: 560; letter-spacing: -.025em; }
.decision-card p { margin: 0; color: var(--ink-subtle); font-size: 14px; line-height: 1.75; }

.tradeoff-table { margin-top: 32px; border: 1px solid rgba(255,255,255,.085); border-radius: 20px; overflow: hidden; }
.tradeoff-row { display: grid; grid-template-columns: .72fr 1fr 1fr; }
.tradeoff-row + .tradeoff-row { border-top: 1px solid rgba(255,255,255,.075); }
.tradeoff-row > * { padding: 18px; }
.tradeoff-row > * + * { border-left: 1px solid rgba(255,255,255,.075); }
.tradeoff-row strong { color: rgba(255,255,255,.88); font-size: 12px; font-weight: 560; }
.tradeoff-row span { color: var(--ink-subtle); font-size: 12px; line-height: 1.65; }
.tradeoff-head { background: rgba(255,255,255,.035); }
.tradeoff-head span { color: var(--ink-tertiary); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }

.case-evidence-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: var(--ink-tertiary); font-size: 11px; line-height: 1.75; }
.case-next { width: var(--shell); margin: 20px auto 120px; padding: clamp(30px,5vw,66px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: radial-gradient(circle at 85% 0,rgba(51,145,255,.15),transparent 43%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); }
.case-next span { color: rgba(146,204,255,.65); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.case-next h2 { max-width: 760px; margin: 17px 0 0; font-size: clamp(32px,4vw,54px); font-weight: 550; line-height: 1.08; letter-spacing: -.05em; }
.case-next-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.return-home-fab { position: fixed; z-index: 80; right: 24px; bottom: 24px; min-height: 48px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid rgba(157,211,255,.22); border-radius: 999px; color: rgba(247,251,255,.92); background: linear-gradient(145deg,rgba(21,55,100,.86),rgba(7,17,34,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 16px 42px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); text-decoration: none; }
.return-home-fab span { color: rgba(151,211,255,.88); font-size: 15px; }
.return-home-fab b { font-size: 12px; font-weight: 560; letter-spacing: .04em; }
.return-home-fab:hover { border-color: rgba(157,211,255,.4); background: linear-gradient(145deg,rgba(30,85,151,.9),rgba(9,25,49,.94)); transform: translateY(-2px); }

@media (max-width: 900px) {
  .case-hero-meta { grid-template-columns: 1fr 1fr; }
  .case-story { grid-template-columns: 1fr; gap: 50px; }
  .case-toc { position: static; }
  .case-toc nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .case-toc a { padding-right: 12px; }
  .case-facts { grid-template-columns: 1fr; }
  .case-facts article { min-height: 120px; }
  .case-facts b { margin-top: 22px; }
}

@media (max-width: 680px) {
  .case-study-page .global-header .header-inner { width: calc(100vw - 20px); border-radius: 22px; }
  .case-study-page .case-brand small,
  .case-study-page .case-header-actions a:not(.case-back) { display: none; }
  .case-hero { padding: 124px 0 56px; }
  .case-hero h1 { margin-top: 25px; font-size: clamp(48px,17vw,72px); }
  .case-hero-lead { font-size: 18px; }
  .case-hero-meta { grid-template-columns: 1fr 1fr; }
  .case-hero-meta article { min-height: 96px; padding: 14px; }
  .case-hero-meta b { margin-top: 20px; font-size: 11px; }
  .case-cover { width: calc(100vw - 20px); margin-bottom: 66px; border-radius: 22px; }
  .case-cover > img { min-height: 300px; object-fit: contain; }
  .case-cover .product-shot-stage { min-height: 300px; }
  .case-cover .product-shot-main { width: calc(100% - 24px); max-height: calc(100% - 42px); border-radius: 12px; }
  .case-cover .tabizoo-shot-pair { height: calc(100% - 38px); gap: 10px; padding-inline: 12px; }
  .case-cover .tabizoo-shot-pair img { max-width: 44%; border-radius: 12px; }
  .case-cover .tabizoo-shot-pair img:nth-child(3) { display: none; }
  .case-cover figcaption { display: grid; }
  .case-story { width: calc(100vw - 40px); }
  .case-toc nav { grid-template-columns: 1fr 1fr; }
  .case-section { padding-bottom: 65px; }
  .case-section + .case-section { padding-top: 64px; }
  .case-section > p { font-size: 15px; }
  .decision-card { grid-template-columns: 1fr; gap: 13px; padding: 20px; }
  .tradeoff-row { grid-template-columns: 1fr; }
  .tradeoff-row > * + * { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
  .tradeoff-head { display: none; }
  .case-next { width: calc(100vw - 40px); grid-template-columns: 1fr; margin-bottom: 90px; }
  .case-next-links { justify-content: flex-start; }
  .return-home-fab { right: 14px; bottom: 14px; min-width: 48px; min-height: 48px; justify-content: center; padding: 0 14px; }
}

/* A concise collaboration record, using the existing case palette and header. */
.collaboration-case-page .case-hero {
  padding: 146px 0 54px;
}

.collaboration-case-page .case-hero h1 {
  margin-top: 30px;
  max-width: 1020px;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.15;
  text-wrap: balance;
}

.collaboration-case-page .case-hero-lead {
  max-width: 850px;
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.8;
}

.collaboration-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 26px;
  color: var(--ink-subtle);
  font-size: 13px;
  line-height: 1.8;
}

.collaboration-roles b {
  margin-right: 10px;
  color: var(--ink);
  font-weight: 550;
}

.collaboration-content {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.collaboration-case-page .case-section {
  padding-bottom: 56px;
}

.collaboration-case-page .case-section + .case-section {
  padding-top: 52px;
}

.collaboration-case-page .case-section h2 {
  max-width: 100%;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
}

.collaboration-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.collaboration-decisions article {
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.collaboration-decisions blockquote {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 550;
  line-height: 1.6;
}

.collaboration-decisions p {
  margin: 0;
  color: var(--ink-subtle);
  font-size: 15px;
  line-height: 1.8;
}

.collaboration-case-page .collaboration-process {
  margin: 8px 0 0;
  font-size: 15px;
}

.collaboration-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.collaboration-compare figure {
  min-width: 0;
  margin: 0;
}

.collaboration-compare a {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}

.collaboration-compare img {
  display: block;
  width: 100%;
  height: auto;
}

.collaboration-compare figcaption {
  display: grid;
  gap: 7px;
  padding: 16px 0;
  line-height: 1.7;
}

.collaboration-compare figcaption b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
}

.collaboration-compare figcaption span {
  color: var(--ink-subtle);
  font-size: 12px;
}

.collaboration-checks {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.collaboration-checks > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.collaboration-checks dt {
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.8;
}

.collaboration-checks dd {
  margin: 0;
  color: var(--ink-subtle);
  font-size: 14px;
  line-height: 1.8;
}

.collaboration-case-page .case-evidence-note {
  margin-top: 24px;
  padding-top: 0;
  border: 0;
  color: var(--ink-subtle);
  font-size: 13px;
}

.collaboration-record-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
}

.collaboration-return {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 80px;
}

@media (max-width: 680px) {
  .collaboration-case-page .case-hero {
    padding: 118px 0 40px;
  }

  .collaboration-content {
    width: calc(100% - 40px);
  }

  .collaboration-roles {
    gap: 8px 20px;
    font-size: 12px;
  }

  .collaboration-decisions,
  .collaboration-compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .collaboration-checks > div {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .collaboration-case-page .case-section h2 {
    margin: 16px 0 22px;
  }
}