/* Case study template (cs-), first used by /work/content-creator-awards.
   Blocks: cs-hero (client chip, title, browser + phone stage, spec list), cs-season (stage index),
   cs-sec sections with cs-split and cs-split--flip, cs-strip (filmstrip), cs-duo, cs-layer (--wide, --side),
   cs-solo (phone between copy and features), cs-feats (--grid), cs-under, cs-quote, cs-more.
   Frames: cs-browser, cs-phone, cs-card. Per project glow: --cs-glow-a and --cs-glow-b on <main class="cs">.
   Motion: case.js adds .cs-motion and reveals [data-reveal]; without JS everything stays visible. */

.cs {
  --cs-glow-a: rgba(40, 142, 215, 0.34);
  --cs-glow-b: rgba(40, 142, 215, 0.18);
  --cs-wide: 1280px;
  --cs-radius: 14px;
  overflow-x: clip;
}

.cs-wide { width: min(100% - 2 * var(--pad), var(--cs-wide)); margin-inline: auto; }

.cs-hero { position: relative; padding-block: 32px 0; isolation: isolate; }
.cs-hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  inset: -120px -10% auto -10%; height: 1100px;
  background:
    radial-gradient(38% 34% at 78% 42%, var(--cs-glow-a), transparent 72%),
    radial-gradient(34% 30% at 18% 70%, var(--cs-glow-b), transparent 72%);
}
.cs-client { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.cs-client img { width: auto; height: 44px; }
.cs-client span { font-size: var(--small); color: var(--muted); line-height: 1.35; }
.cs-client b { font-weight: 600; color: #fff; }
.cs-client--mono img { filter: brightness(0) invert(1); }
.cs-hero__title { margin-top: 22px; max-width: 15ch; font-size: var(--h1); }
.cs-hero__lead { margin-top: 20px; max-width: 40rem; }
.cs-hero__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.cs-spec { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.cs-spec dt { font-size: 0.75rem; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cs-spec dd { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text); text-wrap: pretty; }
@media (min-width: 900px) { .cs-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; } .cs-hero .cs-spec { margin-top: 88px; } }

.cs-stage { position: relative; margin-top: 48px; padding-bottom: 8%; }
.cs-stage .cs-browser { width: 100%; }
.cs-stage .cs-phone { position: absolute; right: 1%; bottom: 0; width: 30%; max-width: 270px; }
@media (min-width: 900px) {
  .cs-stage { margin-top: 64px; padding-bottom: 0; padding-right: 9%; }
  .cs-stage .cs-phone { right: 0; bottom: -7%; width: 21%; }
}

.cs-browser {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--cs-radius);
  background: #0b0d10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 70px -24px rgba(0, 0, 0, 0.85), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
.cs-browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #111419; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cs-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2f37; flex: none; }
.cs-browser__bar span {
  margin-inline: auto; max-width: 62%; height: 22px; padding: 0 12px; border-radius: 7px;
  background: #1a1e25; color: rgba(255, 255, 255, 0.6);
  font: 500 11.5px/22px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-browser__bar::after { content: ""; width: 42px; flex: none; }
.cs-browser img { display: block; width: 100%; height: auto; }
@media (max-width: 599.98px) {
  .cs-browser { border-radius: 10px; }
  .cs-browser__bar { height: 24px; padding: 0 9px; gap: 4px; }
  .cs-browser__bar i { width: 6px; height: 6px; }
  .cs-browser__bar span { height: 15px; font-size: 8.5px; line-height: 15px; padding: 0 8px; border-radius: 5px; }
  .cs-browser__bar::after { width: 22px; }
}

.cs-phone { margin: 0; position: relative; container-type: inline-size; width: 260px; }
.cs-phone__body {
  position: relative; padding: 2.25cqw; border: 0.45cqw solid #42474e; border-radius: 14cqw; background: #08090b;
  box-shadow: 0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.3), 0 9cqw 18cqw -6cqw rgba(0, 0, 0, 0.8), 0 3cqw 7cqw -3cqw rgba(0, 0, 0, 0.5);
}
.cs-phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 11.35cqw; background: #fff; }
.cs-phone::before, .cs-phone::after { content: ""; position: absolute; width: 0.7cqw; background: #3a3f45; z-index: -1; }
.cs-phone::before { right: -0.55cqw; top: 27%; height: 12.5%; border-radius: 0 0.5cqw 0.5cqw 0; }
.cs-phone::after { left: -0.55cqw; top: 21%; height: 6.5%; border-radius: 0.5cqw 0 0 0.5cqw; box-shadow: 0 9cqw 0 #3a3f45; }

.cs-cap { margin-top: 14px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.cs-cap--c { text-align: center; }

.cs-inside { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem) 0; }
.cs-inside__head { max-width: 46rem; }
.cs-inside__head .h2 { font-size: var(--h2-sm); }
.cs-inside__head .lead { margin-top: 14px; }
.cs-season { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); counter-reset: none; }
.cs-season li { border-bottom: 1px solid var(--hair); }
.cs-season li:nth-child(odd) { border-right: 1px solid var(--hair); }
.cs-season a {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 100%;
  padding: 18px 14px 18px 0; transition: background-color 200ms ease;
}
.cs-season li:nth-child(even) a { padding-left: 16px; }
.cs-season__when { font-size: 0.75rem; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cs-season__what { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: #fff; display: flex; align-items: center; gap: 8px; }
.cs-season__what .ico { width: 16px; height: 16px; color: var(--blue); transition: transform 200ms var(--ease); }
@media (hover: hover) {
  .cs-season a:hover .cs-season__what { color: var(--blue); }
  .cs-season a:hover .ico { transform: translateY(2px); }
}
@media (min-width: 900px) {
  .cs-season { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-season li, .cs-season li:nth-child(odd) { border-right: 1px solid var(--hair); }
  .cs-season li:nth-child(4n) { border-right: 0; }
  .cs-season a, .cs-season li:nth-child(even) a { padding: 22px 20px 24px; }
  .cs-season li:nth-child(4n + 1) a { padding-left: 0; }
  .cs-season__what { font-size: 1.25rem; }
  .cs-season--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-season--six li:nth-child(4n) { border-right: 1px solid var(--hair); }
  .cs-season--six li:nth-child(3n) { border-right: 0; }
  .cs-season--six li:nth-child(4n + 1) a { padding-left: 20px; }
  .cs-season--six li:nth-child(3n + 1) a { padding-left: 0; }
}

.cs-sec { position: relative; padding-block: clamp(5rem, 3.4rem + 6.6vw, 10rem) 0; isolation: isolate; }
.cs-sec__head { max-width: 46rem; }
.cs-sec__head .h2 { margin-top: 16px; }
.cs-sec__head .lead { margin-top: 18px; }
.cs-copy .h2 { margin-top: 16px; }
.cs-copy .lead { margin-top: 18px; }

.cs-stagepill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; }
.cs-stagepill b { font-weight: 600; color: var(--muted); }
.cs-stagepill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }

.cs-feats { margin-top: 28px; display: grid; gap: 18px; }
.cs-feats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.cs-feats svg { width: 22px; height: 22px; margin-top: 1px; color: var(--blue); }
.cs-feats h3 { font-family: var(--font-body); font-size: 1rem; line-height: 1.4; font-weight: 700; color: #fff; }
.cs-feats p { margin-top: 2px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cs-feats--grid { margin-top: 44px; }
@media (min-width: 700px) { .cs-feats--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } }
@media (min-width: 1024px) { .cs-feats--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; } }

.cs-split { display: grid; gap: 40px; align-items: center; }
.cs-split .cs-visual { position: relative; }
@media (min-width: 1024px) {
  .cs-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .cs-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cs-split--flip .cs-copy { order: 2; }
  .cs-split--flip .cs-visual { order: 1; }
}

.cs-visual { position: relative; isolation: isolate; }
.cs-visual::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -8%; pointer-events: none;
  background: radial-gradient(48% 46% at 55% 50%, var(--cs-glow-a), transparent 74%);
  opacity: 0.55;
}
.cs-duo { position: relative; padding-bottom: 10%; padding-right: 10%; }
.cs-duo .cs-phone { position: absolute; right: 0; bottom: 0; width: 27%; max-width: 230px; }
.cs-layer { position: relative; padding: 0 0 18% 9%; }
.cs-layer > :first-child { width: 88%; opacity: 0.9; }
.cs-layer > :last-child { position: absolute; right: 0; bottom: 0; width: 82%; }

.cs-gap { margin-top: 44px; }
.cs-spec--facts { margin-top: 32px; }
.cs-card { margin: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -18px rgba(0, 0, 0, 0.9), 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.cs-card img { display: block; width: 100%; height: auto; }
.cs-layer--wide { padding: 0 0 14% 0; }
.cs-layer--wide > :first-child { width: 90%; opacity: 1; }
.cs-layer--wide > :last-child { width: 62%; right: 0; bottom: 0; }
@media (max-width: 599.98px) {
  .cs-layer--wide > :first-child { width: 100%; }
  .cs-layer--wide { padding-bottom: 22%; }
  .cs-layer--wide > :last-child { width: 74%; right: -2%; }
}

.cs-layer--side { padding: 0 0 8% 0; }
.cs-layer--side > :first-child { width: 80%; opacity: 1; }
.cs-layer--side > :last-child { width: 31%; right: 0; bottom: 0; }
@media (max-width: 599.98px) {
  .cs-layer--side > :first-child { width: 88%; }
  .cs-layer--side > :last-child { width: 40%; right: -1%; }
}

.cs-strip { margin-top: 44px; }
.cs-strip__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 760px); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 8px var(--pad) 44px; margin-left: calc(-1 * var(--pad)); margin-right: calc(50% - 50vw);
  scrollbar-width: none;
}
.cs-strip__track::-webkit-scrollbar { display: none; }
.cs-strip__track > figure { scroll-snap-align: start; margin: 0; min-width: 0; }
.cs-strip__track .cs-cap b { color: #fff; font-weight: 600; }
.cs-strip__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: -24px; }
.cs-strip__nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hair-strong); color: #fff; background: rgba(255, 255, 255, 0.03);
  transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
.cs-strip__nav button:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
.cs-strip__nav button:disabled { opacity: 0.35; cursor: default; }
.cs-strip__nav button[hidden] { display: none; }
@media (min-width: 1024px) { .cs-strip__track { gap: 28px; } }

.cs-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chips li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 0.875rem; color: var(--text); }

.cs-solo { display: grid; gap: 36px; align-items: center; }
.cs-solo__phone { justify-self: center; width: min(68vw, 300px); }
.cs-solo .cs-visual::before { inset: -14% -40%; }
@media (min-width: 1024px) {
  .cs-solo { grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); gap: 56px; }
  .cs-solo__phone { width: 320px; grid-column: 2; grid-row: 1 / span 2; }
  .cs-solo > .cs-copy { grid-column: 1; grid-row: 1 / span 2; }
  .cs-solo > .cs-feats { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

.cs-mosaic { margin-top: 44px; display: grid; gap: 16px; }
.cs-mosaic figure { margin: 0; }
@media (min-width: 900px) {
  .cs-mosaic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
  .cs-mosaic > :first-child { grid-row: span 2; }
}

.cs-under { margin-top: 44px; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.cs-under > div { background: var(--bg); padding: 26px 24px 28px; }
.cs-under h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: #fff; }
.cs-under p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
@media (min-width: 700px) { .cs-under { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-under { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-under > div { padding: 32px 30px 34px; } }

.cs-stack { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.875rem; color: var(--muted); }
.cs-stack li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--text); }

.cs-quote { margin-top: 0; padding-block: clamp(5rem, 3.4rem + 6.6vw, 10rem) 0; }
.cs-quote p { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: #fff; font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.25rem); line-height: 1.12; max-width: 22ch; text-wrap: balance; }
.cs-quote p span { color: var(--muted); }

.cs-more { padding-block: clamp(5rem, 3.4rem + 6.6vw, 9rem) 0; }
.cs-more .h2 { font-size: var(--h2-sm); }
.cs-close { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }


@media (prefers-reduced-motion: no-preference) {
  .cs-hero__title, .cs-hero__lead, .cs-hero__ctas, .cs-client { animation: cs-rise 900ms var(--ease) both; }
  .cs-client { animation-delay: 40ms; }
  .cs-hero__title { animation-delay: 90ms; }
  .cs-hero__lead { animation-delay: 160ms; }
  .cs-hero__ctas { animation-delay: 220ms; }
  .cs-stage .cs-browser { animation: cs-stage-in 1300ms var(--ease) 260ms both; }
  .cs-stage .cs-phone { animation: cs-phone-in 1300ms var(--ease) 520ms both; }

  .cs-motion [data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease), filter 900ms var(--ease); }
  .cs-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  .cs-motion [data-reveal="clip"] { opacity: 1; filter: none; transform: none; clip-path: inset(10% 6% 0 6% round 18px); transition: clip-path 1200ms var(--ease); }
  .cs-motion [data-reveal="clip"].is-in { clip-path: inset(-20% -20% -20% -20% round 0); }
  .cs-motion [data-reveal-delay="1"] { transition-delay: 120ms; }
  .cs-motion [data-reveal-delay="2"] { transition-delay: 240ms; }
}

@keyframes cs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-stage-in { from { opacity: 0; transform: translateY(48px) scale(0.985); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cs-phone-in { from { opacity: 0; transform: translateY(70px) rotate(2deg); } to { opacity: 1; transform: none; } }