/* Editorial film/result pairs, using Veridian's established surfaces and type. */
.case-page { background: #0a130e; }
.case-page #main-content { position: relative; isolation: isolate; }
.case-page #main-content::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('assets/case-texture.svg') center top / 1440px 1000px repeat-y; opacity: .3; }
.case-page .wrap { max-width: 1600px; }
.case-hero { border-top: 0; padding-top: clamp(60px,8vw,135px); padding-bottom: 85px; }
.case-hero h1 { font-size: clamp(4.4rem,12.8vw,13rem); font-weight: 450; letter-spacing: -.065em; line-height: .94; margin: 0 0 34px; text-wrap: nowrap; }
.case-hero h1 > span { display: inline-block; }
.case-hero p { color: #b0bcb4; font-size: clamp(1.1rem,1.8vw,1.75rem); line-height: 1.5; max-width: 39ch; letter-spacing: -.02em; }
.case-hero-index { display: flex; justify-content: space-between; font-size: .625rem; letter-spacing: .15em; color: #8fa595; margin-top: 56px; }
.case-list { padding-bottom: 40px; }
.case-study { display: grid; grid-template-columns: 1.16fr 1fr; gap: clamp(40px,5vw,90px); align-items: center; padding: 64px 0; border-top: 1px solid #b3cbb42b; }
.case-media { min-width: 0; padding: 9px; border: 1px solid #9ab19b40; border-radius: 7px; background: linear-gradient(135deg,#26362b,#101c14); box-shadow: inset 0 1px 0 #e6f5e617,0 12px 35px #0003; transition: border-color .25s,box-shadow .25s; }
.case-media:hover { border-color: #a7c2a970; box-shadow: inset 0 1px 0 #e6f5e61a,0 15px 40px #0004; }
.case-screen { position: relative; aspect-ratio: 16/9; background: #030805; border-radius: 3px; overflow: hidden; }
.case-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-play { position: absolute; inset: 0; border: 0; background: linear-gradient(transparent 55%,#0005); display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px; }
.case-play > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b8d2be80; border-radius: 50%; background: #15291bc9; color: #d7e8cd; font-size: .8125rem; padding-left: 2px; transition: background .2s,transform .2s; }
.case-play:hover > span { transform: scale(1.08); background: #a9c69b; color: #0d2113; }
.case-caption { display: flex; justify-content: space-between; gap: 16px; padding: 14px 5px 3px; font-size: .75rem; color: #afbeb2; }
.case-caption > :last-child { font-variant-numeric: tabular-nums; font-size: .625rem; letter-spacing: .06em; white-space: nowrap; }
.case-details { padding-block: 12px; min-width: 0; }
.case-number { font-size: .6875rem; color: #a3b6a6; letter-spacing: .12em; }
.case-details h2 { font-weight: 450; font-size: clamp(1.8rem,3.5vw,3.65rem); line-height: 1.1; letter-spacing: -.045em; margin: 12px 0 18px; text-wrap: nowrap; }
.case-details h2 > span { color: #91a394; }
.case-result { font-size: clamp(3.8rem,6.3vw,6.5rem); line-height: 1; font-weight: 450; letter-spacing: -.065em; margin: 0 0 24px; color: #e4eddf; }
.case-description { color: #e0e9dc; font-size: clamp(.875rem,1.3vw,1.15rem); line-height: 1.6; letter-spacing: -.015em; }
.case-description > span { color: #a0b1a4; }
.case-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; }
.case-facts > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.case-facts dt { font-size: .5625rem; letter-spacing: .13em; color: #94aa9a; text-transform: uppercase; }
.case-facts dd { font-size: .8125rem; color: #d1ddce; }
.case-arrow.btn { width: 48px; height: 48px; padding: 0; margin-top: 26px; min-height: 48px; background: linear-gradient(#c8dfb2,#a5c294); border-color: #b9d2a8; color: #172c1c; }
.case-arrow.btn::after { width: 8px; height: 8px; }.case-arrow > span { font-size: 0; }
.case-arrow:hover { background: linear-gradient(#dbecc7,#bdd5ac); }
.case-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top-color: #abc2ac35; padding-block: 80px; }
.case-countdown { color: #b1c9a9; font-size: .625rem; letter-spacing: .15em; margin-bottom: 20px; }
.case-cta h2 { font-size: clamp(2.8rem,5vw,5rem); font-weight: 450; letter-spacing: -.05em; margin-bottom: 20px; }
.case-cta h2 + p { font-size: .9375rem; color: #b8c7b8; line-height: 1.7; max-width: 54ch; }
.case-cta .btn { flex-shrink: 0; }
.case-footer { display: flex; justify-content: space-between; gap: 60px; padding-block: 48px; }
.case-footer p { color: #a3b5a7; font-size: .8125rem; margin-top: 14px; }
.case-footer small { display: block; font-size: .625rem; color: #92a396; margin-top: 24px; }
.case-footer nav { display: flex; align-items: flex-start; height: auto; gap: 70px; }
.case-footer nav > div { display: grid; gap: 12px; font-size: .8125rem; }.case-footer nav span { font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: #9aad9c; margin-bottom: 5px; }
.case-page [hidden] { display: none !important; }
@media (max-width: 1060px) { .case-study { gap: 32px; }.case-details h2 { font-size: 2.25rem; }.case-caption { font-size: .6875rem; }.case-facts { gap: 10px; } }
@media (max-width: 860px) { .case-study { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }.case-hero { padding-block: 62px 45px; }.case-hero-index { margin-top: 32px; }.case-details { display: grid; grid-template-columns: 1fr auto; gap: 0 20px; padding: 0; }.case-number { grid-column: 1/-1; }.case-details h2 { font-size: clamp(2rem,5vw,3.2rem); grid-column: 1/-1; }.case-result { font-size: 4.5rem; }.case-description,.case-facts { grid-column: 1/-1; }.case-arrow.btn { grid-column: 2; grid-row: 3; margin: 0; align-self: center; }.case-cta { padding-block: 55px; }.case-footer nav { gap: 28px; } }
@media (max-width: 560px) { .case-hero h1 { font-size: 14vw; margin-bottom: 22px; }.case-desktop-break { display: none; }.case-hero p { font-size: 1rem; max-width: 30ch; }.case-hero { padding-top: 50px; }.case-hero-index { font-size: .5rem; }.case-media { padding: 5px; }.case-caption { padding: 10px 3px 4px; font-size: .625rem; gap: 6px; }.case-caption > :last-child { font-size: .5625rem; }.case-details h2 { font-size: 1.9rem; }.case-result { font-size: 4rem; margin-bottom: 18px; }.case-facts dd { font-size: .75rem; }.case-facts { margin-top: 18px; }.case-cta { display: block; }.case-cta .btn { margin-top: 25px; }.case-footer { flex-direction: column; gap: 30px; }.case-footer nav { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .case-page *, .case-page *::after { transition: none !important; }.case-play:hover > span { transform: none; } }

/* Each launch lives in one complete panel: film, result and story link. */
.case-page .case-list { max-width: 1440px; display: grid; gap: 28px; padding-bottom: 72px; }
.case-list .case-study {
  position: relative; padding: clamp(22px, 3vw, 42px);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px); border: 1px solid #abc5b333;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 0, #324d393d, transparent 65%), linear-gradient(145deg, #18251d, #101a14);
  box-shadow: inset 0 1px 0 #e9f5e80c, 0 18px 48px #00000020;
  transition: border-color .25s, box-shadow .25s;
  scroll-margin-top: 120px;
}
.case-list .case-study:focus-within {
  border-color: #a7cfb28c; box-shadow: inset 0 1px 0 #e9f5e81a, 0 20px 48px #0003;
}
.case-list .case-media { padding: 0; border: 0; background: none; box-shadow: none; }
.case-list .case-screen { border-radius: 10px; border: 1px solid #b7d2bd26; }
.case-list .case-caption { padding: 16px 2px 0; line-height: 1.5; }
.case-list .case-caption > :last-child { display: none; }
.case-list .case-details { padding: 0; }
.case-list .case-number {
  display: inline-flex; align-items: center; gap: 12px; color: #b9d3bd;
  font: 11px/1.4 monospace; letter-spacing: .12em;
}
.case-list .case-number::before { content: ''; width: 24px; height: 1px; background: #a7cfb2; }
.case-list .case-details h2 { font-size: clamp(30px, 3.2vw, 48px); margin: 18px 0 22px; text-wrap: wrap; }
.case-list .case-result { font-size: clamp(54px, 5.2vw, 78px); margin-bottom: 16px; }
.case-list .case-facts { border-top: 1px solid #adc6b326; padding-top: 20px; margin-top: 24px; gap: 12px 24px; }
.case-list .case-facts > div { display: grid; gap: 5px; }
.case-list .case-arrow.btn {
  width: fit-content; height: auto; min-height: 44px; padding: 12px 17px;
  margin-top: 24px; gap: 24px; background: #a7cfb2; border-color: #bcdac3;
}
.case-list .case-arrow > span { font-size: 13px; }
@media (hover: hover) {
  .case-list .case-study:hover { border-color: #a7cfb26b; box-shadow: inset 0 1px 0 #e9f5e81a, 0 20px 48px #0003; }
}
@media (max-width: 860px) {
  .case-page .case-list { gap: 22px; }
  .case-list .case-study { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px; }
  .case-list .case-details { display: block; }
  .case-list .case-details h2 { font-size: clamp(29px, 5vw, 40px); }
  .case-list .case-result { font-size: 58px; }
}
@media (max-width: 560px) {
  .case-page .case-list { padding-inline: 16px; }
  .case-list .case-study { padding: 16px; border-radius: 16px; gap: 22px; }
  .case-list .case-details { padding: 0 4px 6px; }
  .case-list .case-caption { font-size: 11px; padding-top: 12px; }
  .case-list .case-details h2 { margin-block: 14px 20px; }
  .case-list .case-description { font-size: 14px; }
  .case-list .case-facts { margin-top: 20px; padding-top: 16px; }
  .case-list .case-arrow.btn { width: 100%; justify-content: space-between; }
}