/* Case study v2: the work is the hero. Same palette, type, radius and pills as Home / Services / Work. */
.cs2-intro { width: min(100% - 64px, 1320px); margin: 0 auto; padding: 170px 0 clamp(50px, 6vw, 80px); }
.cs2-intro h1 { margin: 0; font-size: clamp(3rem, 6.4vw, 6rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; }
.cs2-intro .cs2-lede { max-width: 640px; margin: 26px 0 0; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 300; line-height: 1.75; }
.cs2-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.cs2-pills li { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #c5cfdf; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }

/* Film + story, side by side */
.cs2-feature { display: grid; grid-template-columns: min(46%, calc(min(76vh, 740px) * .5625)) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; width: min(100% - 64px, 1320px); margin: 0 auto; padding-bottom: clamp(80px, 9vw, 130px); }
.cs2-film { width: 100%; }
.cs2-film .film-frame { box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.cs2-film .film-frame::after { display: none; }
.cs2-story { max-width: 640px; }
.cs2-story h2 { margin: 0 0 20px; color: var(--aqua); font-size: clamp(.85rem, 1.05vw, 1rem); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.cs2-story p { margin: 0; color: #eef2f8; font-size: clamp(1.3rem, 2.1vw, 1.95rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.45; }
.cs2-story p + h2 { margin-top: 60px; }

/* Gallery: every photo at its real shape, nothing cropped */
.cs2-gallery-wrap { width: min(100% - 64px, 1320px); margin: 0 auto; padding-bottom: clamp(80px, 9vw, 130px); }
.cs2-gallery-head { display: flex; max-width: 1040px; margin-inline: auto; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 22px; }
.cs2-gallery-head h2 { margin: 0; color: var(--aqua); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.cs2-gallery-head span { color: var(--muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.cs2-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs2-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1040px); margin-inline: auto; }
.cs2-shot { display: block; width: 100%; aspect-ratio: 3 / 4; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--media-radius); background: var(--surface, #0c1a30); cursor: zoom-in; break-inside: avoid; }
.cs2-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease, opacity .35s ease; }
.cs2-shot:hover img, .cs2-shot:focus-visible img { filter: brightness(1.07); }
.cs2-shot:focus-visible { outline: 1px solid var(--aqua); outline-offset: 3px; }

/* Full-size viewer */
.cs2-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(3,8,18,.94); color: #fff; }
.cs2-lightbox::backdrop { background: rgba(3,8,18,.6); }
.cs2-lightbox[open] { display: grid; place-items: center; }
.cs2-lightbox img { max-width: min(92vw, 1100px); max-height: 86dvh; width: auto; height: auto; border-radius: var(--media-radius); }
.cs2-lb-btn { position: absolute; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(4,13,28,.6); color: #fff; font: 300 20px/1 Poppins, sans-serif; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cs2-lb-btn:hover, .cs2-lb-btn:focus-visible { border-color: var(--aqua); color: var(--aqua); }
.cs2-lb-close { top: 22px; right: 22px; }
.cs2-lb-prev { top: 50%; left: 22px; transform: translateY(-50%); }
.cs2-lb-next { top: 50%; right: 22px; transform: translateY(-50%); }
.cs2-lb-count { position: absolute; bottom: 22px; left: 50%; color: var(--muted); font-size: 9px; letter-spacing: .16em; transform: translateX(-50%); }

/* Next project */
.cs2-next { display: grid; grid-template-columns: 92px 1fr auto; gap: 24px; align-items: center; width: min(100% - 64px, 1320px); margin: 0 auto clamp(80px, 9vw, 120px); padding: 26px 0; border-block: 1px solid var(--line); }
.cs2-next img { width: 92px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.cs2-next small { display: block; margin-bottom: 8px; color: var(--aqua); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.cs2-next strong { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.045em; }
.cs2-next i { color: var(--aqua); font-size: 30px; font-style: normal; transition: transform .25s ease; }
.cs2-next:hover i { transform: translate(5px, -5px); }

@media (max-width: 1000px) {
  .cs2-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs2-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs2-feature { grid-template-columns: 1fr; justify-items: center; }
  .cs2-story { max-width: 620px; justify-self: start; }
  .cs2-film { width: min(100%, 420px); }
}
@media (max-width: 700px) {
  .cs2-intro, .cs2-feature, .cs2-gallery-wrap, .cs2-next { width: min(100% - 28px, 620px); }
  .cs2-intro { padding-top: 130px; }
  .cs2-gallery, .cs2-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cs2-next { grid-template-columns: 70px 1fr auto; gap: 16px; }
  .cs2-next img { width: 70px; }
  .cs2-lb-prev, .cs2-lb-next { top: auto; bottom: 18px; transform: none; }
}
.cs2-film .film-sound { right: 16px; bottom: 16px; }

/* Curated rows: each row fills the width and every photo in it shares one height, so nothing is cropped */
.cs2-rows { display: grid; gap: 16px; width: min(100%, 1120px); margin-inline: auto; }
.cs2-row { display: flex; gap: 16px; }
.cs2-row .cs2-shot { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); }
.cs2-row .cs2-shot img { object-fit: cover; }
.cs2-gallery-head { max-width: 1120px; }
@media (max-width: 700px) {
  .cs2-rows { gap: 10px; }
  .cs2-row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 10px; }
  .cs2-row .cs2-shot { aspect-ratio: var(--r); }
  .cs2-row .cs2-shot.is-square { grid-column: 1 / -1; }
}
.cs2-row.is-pair { width: 68%; margin-inline: auto; }
@media (max-width: 700px) { .cs2-row.is-pair { width: 100%; } }
/* Feed layout (Instagram-style): equal tiles, three across on every screen */
.cs2-rows.is-feed { gap: 8px; }
.cs2-rows.is-feed .cs2-row { gap: 8px; }
.cs2-rows.is-feed .cs2-shot { border-radius: 14px; }
@media (max-width: 700px) {
  .cs2-rows.is-feed { gap: 4px; }
  .cs2-rows.is-feed .cs2-row { display: flex; gap: 4px; }
  .cs2-rows.is-feed .cs2-shot { border-radius: 8px; }
}