:root {
  --cr-ink: #090b0a;
  --cr-paper: #f1f2e9;
  --cr-acid: #f1f2e9;
  --cr-green: #173c2b;
  --cr-line: rgba(241, 242, 233, .18);
  --cr-muted: rgba(241, 242, 233, .65);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.case-page { margin: 0; background: var(--cr-ink); color: var(--cr-paper); font-family: "Poppins", sans-serif; }
body.case-library-page { --cr-acid: #d2d3cf; }
body.case-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .055; background: url("../img/bg-noise.png"); }
a { color: inherit; }
.case-shell { width: min(1460px, calc(100% - 80px)); margin: 0 auto; }
.case-header { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; padding: 25px 0; }
.case-header-inner { width: min(1460px, calc(100% - 80px)); margin: auto; display: flex; justify-content: space-between; align-items: center; }
.case-logo { position: relative; z-index: 2; }
.case-logo img { width: 154px; height: auto; display: block; }
.case-nav { position: fixed; inset: 0; padding: 120px 6vw 55px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow-y: auto; color: var(--cr-paper); background: var(--cr-ink); font-size: clamp(32px, calc(3.2vw - 2px), 60px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.case-nav.is-open { display: flex; }
.case-nav a { text-decoration: none; }
.case-nav a:hover { color: #d2d3cf; }
.case-menu-button { display: block; position: relative; z-index: 2; border: 0; color: white; background: none; font: 500 13px Poppins, sans-serif; cursor: pointer; }

.case-library-hero { min-height: 90vh; padding: 190px 0 80px; display: grid; align-items: end; border-bottom: 1px solid var(--cr-line); position: relative; overflow: hidden; }
.case-library-hero::after { content: "12"; position: absolute; right: -1vw; bottom: -10vw; font: 800 clamp(280px, 43vw, 720px)/.8 Poppins, sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(210,211,207,.14); }
.case-kicker { display: flex; gap: 16px; align-items: center; color: var(--cr-acid); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.case-kicker::before { content: ""; width: 42px; height: 2px; background: currentColor; }
.case-library-title { position: relative; z-index: 1; max-width: 1100px; margin: 26px 0 30px; font-size: clamp(64px, 10vw, 160px); font-weight: 700; line-height: .82; letter-spacing: -.075em; }
.case-library-title em { display: block; margin-left: 18%; color: var(--cr-acid); font-family: "Noto Serif JP", serif; font-style: normal; font-weight: 300; }
.case-hero-bottom { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.case-hero-intro { max-width: 570px; margin: 0; color: var(--cr-muted); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5; }
.case-scroll-cue { justify-self: end; color: var(--cr-muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.case-library { padding: 90px 0 150px; }
.case-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; margin-bottom: 70px; }
.case-count { color: var(--cr-muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.case-count strong { color: var(--cr-paper); font-size: 26px; margin-right: 8px; }
.case-industries { width: min(100%, 980px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.case-industries a { min-width: 0; padding: 13px 2px; border-top: 1px solid var(--cr-line); display: flex; gap: 12px; align-items: baseline; color: var(--cr-paper); font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: color .25s, padding-left .25s; }
.case-industries a:hover { padding-left: 7px; color: var(--cr-acid); }
.case-industries span { flex: none; color: var(--cr-muted); font-size: 9px; }
.case-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 34px 24px; }
.case-card { grid-column: span 4; position: relative; min-width: 0; scroll-margin-top: 95px; }
.case-card[hidden] { display: none; }
.case-card-link { display: block; text-decoration: none; }
.case-card-image { position: relative; height: clamp(280px, 30vw, 460px); overflow: hidden; background: var(--cr-green); }
.case-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78); transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s; }
.case-card-link:hover img { transform: scale(1.045); filter: saturate(1); }
.case-card-no-image { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 75% 25%, #396b4a, transparent 27%), var(--cr-green); }
.case-card-no-image span { color: transparent; -webkit-text-stroke: 1px rgba(241,242,233,.35); font-size: clamp(130px, 20vw, 280px); font-weight: 800; line-height: 1; }
.case-card-index { position: absolute; top: 18px; left: 18px; padding: 7px 10px; background: var(--cr-ink); color: var(--cr-paper); font-size: 11px; letter-spacing: .12em; }
.case-card-arrow { position: absolute; right: 18px; bottom: 18px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--cr-acid); color: var(--cr-ink); font-size: 22px; transform: scale(0); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.case-card-link:hover .case-card-arrow { transform: scale(1); }
.case-card-copy { padding: 22px 0 36px; border-bottom: 1px solid var(--cr-line); }
.case-card-sector { color: var(--cr-acid); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.case-card-title { max-width: 650px; margin: 10px 0 0; font-size: clamp(23px, 2.5vw, 40px); line-height: 1.08; letter-spacing: -.035em; }

.case-detail-hero { min-height: 100vh; position: relative; display: grid; align-items: end; overflow: hidden; }
.case-detail-media { position: absolute; inset: 0; }
.case-detail-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,11,10,.2), rgba(9,11,10,.94) 88%), linear-gradient(90deg, rgba(9,11,10,.75), transparent 70%); }
.case-detail-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); }
.case-detail-placeholder { height: 100%; background: radial-gradient(circle at 75% 20%, #4f7c53, transparent 28%), linear-gradient(135deg, #173c2b, #080b09 72%); }
.case-detail-placeholder::before { content: "10"; position: absolute; right: -2vw; top: 11vh; color: transparent; -webkit-text-stroke: 1px rgba(199,243,107,.3); font-size: 45vw; font-weight: 800; line-height: .8; }
.case-detail-heading { width: min(1460px, calc(100% - 80px)); margin: 0 auto; padding: 170px 0 78px; position: relative; z-index: 2; }
.case-detail-number { color: var(--cr-acid); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.case-detail-title { max-width: 1150px; margin: 20px 0 35px; font-size: clamp(48px, 7.7vw, 122px); line-height: .9; letter-spacing: -.065em; }
.case-detail-sector { max-width: 730px; display: flex; gap: 18px; color: var(--cr-muted); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.case-detail-sector span { color: var(--cr-acid); }
.case-body { padding: 125px 0 100px; }
.case-story-grid { display: grid; grid-template-columns: 3fr 7fr; gap: 8vw; }
.case-story-label { color: var(--cr-acid); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.case-story-copy p { max-width: 900px; margin: 0 0 45px; font-family: "Noto Serif JP", serif; font-size: clamp(22px, 2.5vw, 38px); font-weight: 300; line-height: 1.55; }
.case-result { margin: 90px 0; padding: 70px; position: relative; color: var(--cr-ink); background: var(--cr-acid); }
.case-result::before { content: "THE RESULT"; display: block; margin-bottom: 28px; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.case-result p { max-width: 1100px; margin: 0; font-size: clamp(25px, 3.2vw, 49px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.case-pagination { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); }
.case-pagination a { min-height: 250px; padding: 50px max(40px, 5vw); display: flex; flex-direction: column; justify-content: center; text-decoration: none; transition: background .3s, color .3s; }
.case-pagination a + a { border-left: 1px solid var(--cr-line); text-align: right; }
.case-pagination a:hover { color: var(--cr-ink); background: var(--cr-acid); }
.case-pagination-label { margin-bottom: 15px; color: var(--cr-muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.case-pagination a:hover .case-pagination-label { color: rgba(9,11,10,.6); }
.case-pagination-title { font-size: clamp(22px, 2.7vw, 39px); line-height: 1.12; }

.case-footer { padding: 85px 0 40px; }
.case-footer-cta { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 100px; }
.case-footer-title { max-width: 900px; margin: 12px 0 0; font-size: clamp(45px, 8vw, 118px); line-height: .9; letter-spacing: -.06em; }
.case-footer-title em { font-style: normal; }
.case-footer-link { flex: none; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: var(--cr-acid); color: var(--cr-ink); font-size: 27px; transition: transform .3s; }
.case-footer-link:hover { transform: rotate(12deg) scale(1.06); }
.case-footer-meta { padding-top: 28px; border-top: 1px solid var(--cr-line); display: flex; justify-content: space-between; color: var(--cr-muted); font-size: 11px; }

@media (max-width: 900px) {
  .case-shell, .case-header-inner, .case-detail-heading { width: min(100% - 38px, 1460px); }
  .case-nav { padding: 105px 28px 40px; gap: 9px; font-size: 30px; }
  .case-library-hero { padding-top: 145px; min-height: 82vh; }
  .case-library-title em { margin-left: 8%; }
  .case-hero-bottom { grid-template-columns: 1fr; }
  .case-scroll-cue { display: none; }
  .case-toolbar { align-items: flex-start; flex-direction: column; }
  .case-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card, .case-card:nth-child(n) { grid-column: span 6; }
  .case-card-image { height: 46vw; }
  .case-story-grid { grid-template-columns: 1fr; gap: 30px; }
  .case-result { padding: 45px 30px; }
}

@media (max-width: 600px) {
  .case-header { padding: 18px 0; }
  .case-logo img { width: 125px; }
  .case-library-title { font-size: 18vw; }
  .case-library { padding: 60px 0 100px; }
  .case-industries { grid-template-columns: 1fr; }
  .case-grid { display: block; }
  .case-card { margin-bottom: 25px; }
  .case-card-image { height: 105vw; max-height: 520px; }
  .case-card-arrow { transform: scale(.85); }
  .case-detail-heading { padding-bottom: 45px; }
  .case-detail-title { font-size: 14vw; }
  .case-body { padding-top: 75px; }
  .case-result { margin: 55px 0; }
  .case-pagination { grid-template-columns: 1fr; }
  .case-pagination a { min-height: 190px; }
  .case-pagination a + a { border-left: 0; border-top: 1px solid var(--cr-line); }
  .case-footer-cta { align-items: flex-start; flex-direction: column; margin-bottom: 70px; }
  .case-footer-link { width: 90px; height: 90px; }
  .case-footer-meta { gap: 20px; flex-direction: column; }
}

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