/* Editorial case-study layer. Loaded only by work/rkw.html. */
.case-page main {
  background: radial-gradient(ellipse at 100% 27%, #40544812, transparent 23%),
    linear-gradient(180deg, #080A09 0%, #0D100F 28%, #111412 48%, #080A09 72%, #0D100F 100%);
}
.case-page section { padding-block: clamp(80px, 10vw, 150px); }
.case-page .case-hero { padding-top: clamp(150px, 14vw, 210px); padding-bottom: 0; }
.case-hero .lab { margin-bottom: clamp(36px, 5vw, 72px); }
.case-page .case-hero h1 {
  font-size: clamp(58px, 10.6vw, 158px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 400;
  max-width: none;
}
.case-meta { display: grid; grid-template-columns: 1.5fr 1fr .4fr; gap: 24px; margin: 44px 0 0; }
.case-meta dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dm); margin-bottom: 8px; }
.case-meta dd { margin: 0; font-size: 14px; color: var(--t2); }
.case-hero-image { margin-top: clamp(48px, 7vw, 100px); }
.case-visual { position: relative; aspect-ratio: 1.8; overflow: hidden; background: #111412; }
.case-visual--portrait { aspect-ratio: .8; }
.case-visual .img { transition-delay: var(--image-delay, 0s); }
.case-image-plane { position: absolute; inset: -22px 0; transform: translate3d(0,var(--case-parallax,0px),0); }
.case-placeholder { position: absolute; inset: 0; transform: scale(1.04); transition: transform 1.8s var(--ease-premium); transition-delay: var(--image-delay,0s); background: linear-gradient(125deg, #202521 0%, #111412 42%, #364138 100%); }
.case-visual--portrait .case-placeholder { background: linear-gradient(155deg,#333a35,#151a17 55%,#252f28); }
.case-shot--medium .case-placeholder { background: linear-gradient(35deg,#101412,#354138 70%,#202521); }
.img.in .case-placeholder, .case-visual.in .case-placeholder { transform: scale(1); }
.case-temp-label { position: absolute; top: 42px; left: 24px; color: var(--t2); font-size: 10px; letter-spacing: .18em; }
.case-index { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; font-size: 10px; letter-spacing: .12em; color: var(--dm); text-transform: uppercase; }
.case-page .case-heading { font-size: clamp(40px, 5.5vw, 82px); font-weight: 400; letter-spacing: -.05em; line-height: 1.04; }
.case-copy { color: var(--t2); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; max-width: 49ch; margin-top: 40px; }
.case-copy p + p { margin-top: 24px; }
.case-copy--offset { margin-left: 48%; margin-top: clamp(40px, 5vw, 72px); }
.case-background { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; align-items: center; }
.case-background .case-heading, .case-split .case-heading { font-size: clamp(36px, 3.9vw, 58px); }
.case-background .case-visual { margin-top: 100px; }
.case-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12%; align-items: end; }
.case-split .case-copy { margin-top: 0; }
.case-rows { list-style: none; margin: clamp(48px, 6vw, 90px) 0 0; padding: 0; }
.case-rows li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding-block: 24px; border-top: 1px solid #70827340; transition: border-color .5s var(--ease-premium); }
.case-rows li > span { color: var(--dm); font-size: 11px; padding-top: 6px; }
.case-rows li > div { font-size: clamp(22px, 2.9vw, 42px); letter-spacing: -.025em; line-height: 1.25; transition: transform .5s var(--ease-premium); }
.case-scope { margin-top: clamp(70px, 8vw, 120px); }
.case-scope .lab { margin-bottom: 0; }
.case-scope .case-rows { margin-top: 28px; }
.case-shot { margin: 0; min-width: 0; }
.case-shot figcaption { display: flex; gap: 24px; margin-top: 18px; font-size: 13px; color: var(--t2); }
.case-shot figcaption > span { color: var(--dm); }
.case-shot-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10%; margin-top: clamp(70px, 9vw, 130px); align-items: start; }
.case-shot--tall { margin-top: 160px; }
.case-outcomes { margin-top: clamp(50px, 6vw, 90px); }
.case-outcomes li { padding: 22px 0; border-top: 1px solid #70827340; font-size: clamp(26px, 3.7vw, 54px); line-height: 1.2; letter-spacing: -.035em; }
.case-outcomes li:nth-child(even) { padding-left: 8%; }
.case-live .pill { margin-top: 38px; min-height: 48px; }
.case-live .case-link-note { margin-top: 16px; }
.case-back { display: flex; width: fit-content; align-items: center; gap: 10px; padding: 14px 0; margin-top: 64px; border-bottom: 1px solid #70827350; transition: border-color .5s; }
.case-back span { transition: transform .5s var(--ease-premium); }
.case-page .case-final { padding-block: clamp(100px, 13vw, 190px); background: radial-gradient(ellipse at 45% 85%, #40544842, transparent 65%); }
.case-final .cl { font-size: clamp(24px, 3vw, 42px); }
@media (hover:hover) and (pointer:fine) {
  .case-scope .case-rows li:hover { border-color: var(--sg); }
  .case-scope .case-rows li:hover > div { transform: translateX(8px); }
  .case-back:hover { border-color: var(--t2); }
  .case-back:hover span { transform: translateX(-4px); }
}
@media (max-width:860px) {
  .case-page .case-hero h1 { font-size: clamp(56px, 10.5vw, 86px); }
  .case-background, .case-split { grid-template-columns: 1fr; gap: 38px; }
  .case-background .case-visual { margin-top: 0; aspect-ratio: 1.2; width: 85%; margin-left: auto; }
  .case-copy--offset { margin-left: 20%; }
  .case-split .case-copy { margin-left: 20%; }
  .case-image-plane { transform: none; }
  .case-shot-pair { gap: 7%; }
  .case-shot--tall { margin-top: 90px; }
}
@media (max-width:540px) {
  .case-page section { padding-block: 76px; }
  .case-page .case-hero { padding-top: 144px; padding-bottom: 0; }
  .case-page .case-hero h1 { font-size: clamp(48px, 11.2vw, 60px); }
  .case-page .case-heading { font-size: clamp(34px, 8.7vw, 46px); line-height: 1.1; }
  .case-heading .mk { display: inline; overflow: visible; padding: 0; }
  .case-heading .mk > span { display: inline; }
  .case-heading .mk:not(:last-child)::after { content: ' '; }
  /* Natural mobile wrapping; reveal the heading as a whole rather than clipping tall text. */
  .js .case-heading .mk > span { transform: none; }
  .case-meta { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
  .case-meta > div:first-child { grid-column: 1 / -1; }
  .case-visual { aspect-ratio: 1.2; }
  .case-visual--portrait { aspect-ratio: .85; }
  .case-index span { display: none; }
  .case-copy--offset, .case-split .case-copy { margin-left: 0; }
  .case-background .case-visual { width: 100%; }
  .case-rows li { grid-template-columns: 24px 1fr; gap: 12px; padding-block: 21px; }
  .case-shot-pair { display: block; margin-top: 44px; }
  .case-shot--medium { width: 94%; }
  .case-shot--tall { margin-top: 48px; width: 88%; margin-left: auto; }
  .case-outcomes li:nth-child(even) { padding-left: 0; }
  .case-back { margin-top: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .case-page .case-visual .img { clip-path: none; }
  .case-placeholder, .case-image-plane { transform: none !important; }
}
