/* Case study pages · v2 */
.cs-title { padding-top: clamp(132px, 13vw, 190px); padding-bottom: clamp(40px, 5vw, 72px); }
.cs-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: clamp(28px, 4vw, 48px); padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: border-color .3s; }
.cs-back:hover { border-color: var(--ink); }
.cs-h1 { margin-top: 18px; font-size: clamp(44px, 7.4vw, 118px); }
.cs-lede { margin: 28px 0 0; max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-2); }
.cs-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.cs-meta dt { margin: 0 0 8px; }
.cs-meta dd { margin: 0; font-size: 17px; font-weight: 500; }

.cs-hero { margin: 0; overflow: hidden; border-radius: var(--radius); background: #000; }
.cs-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.cs-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(64px, 7vw, 110px); }
.cs-text h2 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--green); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.015em; }
.cs-text p { margin: 0 0 18px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 36em; }

.cs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.cs-fig { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.cs-fig img { width: 100%; height: 100%; object-fit: cover; }
.cs-grid .s12 { grid-column: span 12; } .cs-grid .s7 { grid-column: span 7; } .cs-grid .s5 { grid-column: span 5; } .cs-grid .s6 { grid-column: span 6; } .cs-grid .s4 { grid-column: span 4; }
.ar-wide img { aspect-ratio: 16 / 9; } .ar-land img { aspect-ratio: 4 / 3; } .ar-port img { aspect-ratio: 4 / 5; }

.cs-motion { margin-top: clamp(80px, 9vw, 140px); background: var(--night); color: #fff; }
.cs-motion-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.cs-motion .eyebrow { color: rgba(255, 255, 255, .55); }
.cs-motion h2 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.015em; }
.cs-video { overflow: hidden; border-radius: var(--radius); background: #000; max-width: 460px; }
.cs-video video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cs-pal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.cs-sw { aspect-ratio: 1 / 1.25; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 13px; }
.cs-sw b { font-size: 15px; font-weight: 600; }
.cs-motion + .wrap { margin-top: clamp(80px, 9vw, 140px); }

.cs-deliv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
.cs-deliv li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; }

.cs-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: clamp(40px, 6vw, 90px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 6vw, 96px); border-top: 1px solid var(--line); color: var(--ink); }
.cs-next-name { display: block; margin-top: 14px; font-family: var(--serif); color: var(--green); font-size: clamp(34px, 5vw, 80px); line-height: 1.05; letter-spacing: -.015em; transition: color .3s, transform .6s var(--ease); }
.cs-next:hover .cs-next-name { color: var(--ink); transform: translateX(10px); }
.cs-next img { width: min(280px, 40vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* 404 */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 120px; padding-bottom: 80px; text-align: center; }
.nf .display { margin-top: 18px; font-size: clamp(40px, 6.4vw, 100px); }
.nf p { margin: 24px 0 0; color: var(--mut); }
.nf .btn { margin-top: 34px; }

@media (max-width: 860px) {
  .cs-meta { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cs-text, .cs-motion-in { grid-template-columns: minmax(0, 1fr); }
  .cs-grid .s7, .cs-grid .s5, .cs-grid .s6, .cs-grid .s4 { grid-column: span 12; }
  .cs-pal, .cs-deliv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-next { grid-template-columns: minmax(0, 1fr); }
}

/* product case study (FlowFrame): films, template loops, dark bands */
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cs-meta.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-hero video, .cs-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.cs-film { overflow: hidden; border-radius: var(--radius); background: #000; }
.cs-band { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); background: var(--night); color: #fff; }
.cs-band-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4.6vw, 64px); }
.cs-band .eyebrow { color: var(--accent, rgba(255, 255, 255, .55)); }
.cs-band h2 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.015em; }
.cs-band p { margin: 0; max-width: 36em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: rgba(255, 255, 255, .72); }
.cs-loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.cs-loops figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: #000; }
.cs-loops video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-band + .wrap { margin-top: clamp(80px, 9vw, 140px); }
.cs-deliv.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .cs-meta.m4, .cs-deliv.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-band-head { grid-template-columns: minmax(0, 1fr); }
  .cs-loops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}